3 Essential Design Trends, grudzień 2017 r
Wszystkie trzy najważniejsze trendy w tym miesiącu związane są z typografią. Trendy pokazują bardzo piękne sposoby wykorzystania pięknego typu, aby stworzyć zaangażowanie użytkowników i zrobić świetne pierwsze wrażenie.
Wspólnym motywem tych projektów jest to, że wszystkie style typografii są dobrze czytelne. Jeśli masz zamiar pracować z modniejszym lub bardziej funkcyjnym elementem tekstowym, wybierz krój czcionki, którego użytkownicy nie będą mieli trudności z czytaniem. Modna technika to sztuczka z tymi wzorami, a nie sam krój pisma.
Oto, co zyskuje na popularności w tym miesiącu:
1. Po prostu wpisz powyżej przewijania
Chociaż świetny obraz może pomóc użytkownikom w projektowaniu, czasem właściwym słowem i przestrzenią jest bilet.
Kluczem do maksymalnego wykorzystania tego trendu jest udoskonalenie przekazu. Słowa muszą być proste, powiedzieć coś znaczącego i stworzyć wartość dla użytkownika.
Jak to zrobić?
- Zacznij od frazy kluczowej. Może to być Twoja misja lub oferta wartości dla użytkowników. Powiedz użytkownikom, co przynosisz do stołu i dlaczego Twoja strona będzie dla nich ważna.
- Wybierz prosty krój pisma, który ma taki sam nastrój jak wiadomości dla dłuższych bloków kopiowania.
- Jeśli blok tekstu jest krótki, na przykład z Rodzaje typu , rozważ opcję typu funkier, aby narysować użytkowników.
- Wykorzystaj w pełni przestrzeń. Zwróć uwagę, że w każdym z poniższych przykładów tekst ma dużo miejsca do oddychania, dzięki czemu łatwiej go przeczytać na pierwszy rzut oka. Przestrzeń może również pomóc przyciągnąć wzrok do tekstu i może zrównoważyć elementy tekstowe, jeśli nie chcesz ich wyśrodkować na ekranie, na przykład Podniesienie projektu .
- Użyj koloru, aby dodać wizualne zainteresowanie. Jasne, modne kolory mogą pomóc wciągnąć użytkowników w projekt. Kolor może także pomóc ustawić nastrój, który koreluje z wiadomościami.
Podczas pracy z ciężką konstrukcją nie należy jej wymuszać. Czasami nie masz wystarczającej ilości tekstu, aby wypełnić cały "ekran". Mniej + więcej a Type of Type używa blokowania kolorów, aby utworzyć wiele paneli, które są idealnie dopasowane do zawartości tekstowej.
2. Tekst w białych polach
Przy tak wielu odważnych elementach wizualnych w projektach stron internetowych - i tak wielu reagujących punktach przerwania, którymi można sobie poradzić - białe skrzynki ponownie pojawiają się jako element kontenera dla tekstu. Białe pola z ciemnym tekstem wewnątrz mogą zapewnić czytelność, jeśli chodzi o przesyłanie wiadomości na górze zdjęć, wideo lub ilustracji, gdzie występuje odchylenie kolorów.
I chociaż ten trend może brzmieć trochę, dobrze ... niechlujnie lub leniwie, to wygląda świetnie, gdy jest dobrze zrobiony.
Nie możesz po prostu uderzyć pudełka w obraz i mieć nadzieję na najlepsze. Białe pudełka muszą być rozmieszczone strategicznie, tak aby nie obejmowały ważnych części obrazu, a użytkownicy będą się do nich przenosić w trakcie patrzenia na projekt.
Białe pola muszą być wystarczająco duże, aby zawierały rozsądną ilość tekstu, a powinieneś mieć plan dla tego elementu na mniejszych ekranach, na przykład pozwalając, aby wszystko w polu tekstowym spadło poniżej głównego obrazu. Nie próbuj umieszczać ramki tekstowej na obrazie na mniejszych ekranach, ponieważ skończysz z pudełkiem z tekstem, który jest zbyt mały, aby go przeczytać, albo pole będzie obejmowało większość samego obrazu.
Jeśli masz ochotę na białe pudełko, baw się dobrze. Każdy z poniższych przykładów wykorzystuje białe pola na zupełnie inny sposób.
Czy Space wycina białe pole w dolnym rogu obrazu, tak aby większość obrazu była widoczna. Białe pudełko spływa do białej przestrzeni poniżej, tak że wygląda prawie tak, jakby wychodziło z panelu poniżej. Ta technika pomaga połączyć główny suwak z zawartością poniżej (a nawet może zachęcić do przewijania).
Jak to używa okrągłych obiektów typu blob, dzięki czemu białe pola tekstowe lepiej pasują do tonu tła. Ta subtelna zmiana kształtu, dzięki czemu pudełka wyglądają na bardziej płynne, pomaga łączyć elementy tak, że pudełka i tło mają spójne odczucie. Nie chcesz, aby białe pola tekstowe miały wrażenie, jakby zostały przypadkowo umieszczone w tle. (To nie działa i nie pomoże stworzyć spójnego klimatu dla użytkowników).
Macaulay Sinclair zawiera więcej tekstu niż w innych przykładach, w których jedna część siatki panelu obrazu przytrzymuje element tekstowy. W tym przypadku obraz za białym pudełkiem nie ma wartości informacyjnej. Ma schemat kolorów i ruchów, który wygląda podobnie do innych obrazów i służy głównie do tworzenia spójności między elementem tekstowym a resztą projektu.
3. Wycinanki typograficzne
Nikt nigdy nie powiedział, że tekst musi być ciągiem pełnych liter. Więcej projektantów decyduje się na wycięcia typografii, które zawierają blokadę koloru nad obrazem, dzięki czemu obraz jest wyraźny.
Ta technika może działać z nieruchomymi lub ruchomymi obrazami oraz z nakładkami pełnoekranowymi, tak że tylko niewielka ilość informacji przychodzi poprzez litery (prawie w celu utworzenia tekstury) lub z większą ilością stylu blokowania z większym obrazem tła widoczny.
Sztuczka do wykonania tej pracy to właściwy krój pisma. Litery muszą mieć wystarczająco grube pociągnięcia, aby widoczny był obraz lub tekstura w tle. Nie można tego zrobić za pomocą cienkiej lub skondensowanej czcionki z ciągłym powodzeniem.
Ta technika działa również najlepiej, jeśli liczba słów i liter jest dość ograniczona. Trzymaj od jednego do trzech słów z 10 lub mniej liter lub użyj bardzo popularnych słów, które użytkownicy będą znać na pierwszy rzut oka.
Danbury używa jasnego wycięcia tekstu jako zachęty do zachęcania użytkowników do angażowania się w wezwanie wideo do działania. Całe pomarańczowe pudełko to tylko gigantyczny przycisk.
Wytwórnia Fusion korzysta z tła wideo z winnicy w napisie. Wspaniałą cechą tego wzoru jest efekt potrójnej warstwy: tło wideo poniżej białego wycięcia tekstu poniżej obrazu produktu.
Kaneko używa niezidentyfikowanego obrazu jako wypełnienia liter. Jeśli zdecydujesz się na ten styl, utrzymuj to tło w prosty sposób, podobnie jak w przypadku tego projektu. Jest tylko odrobina koloru i tekstury, która przyciąga wzrok do tekstu na surowym płótnie.
Wniosek
Kolekcja stanowi inspirację dla tych projektów, które mogą nie mieć doskonałego obrazu lub wideo, dzięki czemu można znaleźć sposób na stworzenie czegoś, na co użytkownicy będą reagować. Nie bój się używać tekstu jako elementu wizualnego i informacyjnego w tym projekcie.
Jakie trendy lubisz (lub nienawidzisz) w tej chwili? Chciałbym zobaczyć niektóre ze stron, które Cię fascynują. Wyślij mi link na Twitterze ; Chciałbym usłyszeć od ciebie.