Trend projektowy: tekst zablokowany

Niektóre witryny wyglądają świetnie, nawet jeśli są sprzeczne z konwencjonalną mądrością lub zasadami teorii projektowania. Nowym trendem projektowym jest prezentacja tego pomysłu za pomocą elementów zakrywających lub zasłaniających część tekstu w projekcie.

To interesujący trend, ponieważ jest sprzeczny ze wszystkim, o czym często mówimy w projektowaniu - że musi być czytelny, aby szybko łączyć się z użytkownikami.

Nie trzeba dodawać, że może to być trudna technika skutecznego oderwania się, ale projekty są uderzające i efektowne, jeśli są dobrze wykonane. Oto podział trendu i kilka pomysłów na samodzielne wypróbowanie go.

Przeglądaj zasoby projektowe

Prosta przeszkoda

Jeśli tekst jest ujęty w projekcie, wszystko inne musi być bardzo proste wizualnie, aby użytkownik nie zagubił się w zbyt wielu efektach.

W każdym responsywnym punkcie przerwania tekst nie jest bardziej zasłonięty niż jakikolwiek inny.

Root Studio świetnie sobie z tym radzi z pierwszym wrażeniem, które przyciąga uwagę kolorem i prostą animowaną żyrafą, która pokrywa część zbyt dużego napisu. Sztuczka polega na tym, że chociaż niektóre litery są zasłonięte, nie ma wątpliwości, jakie jest słowo na ekranie. Litery są nadal czytelne ze względu na rozmiar, prostotę kroju i rozmieszczenie elementu przeszkodowego.

Zespół projektowy dołożył wszelkich starań, aby tekst nie był utrudniony, aby zachować integralność „ROOT”, która jest marką tej konkretnej witryny. W każdym responsywnym punkcie przerwania tekst nie jest bardziej zasłonięty niż jakikolwiek inny. (W tym przypadku wiele z tych projektów jest niewystarczających. Wyglądają świetnie w rozdzielczościach pulpitu, ale tekst jest zbyt zasłonięty, aby można go było odczytać na mniejszych ekranach).

Warstwy trójwymiarowe

Dodanie trójwymiarowego efektu warstwowego może pomóc elementom zeskoczyć z ekranu, dzięki czemu użytkownicy będą mieli wrażenie, że mogą je wyciągnąć i dotknąć. W niektórych przypadkach tekst może służyć jako element tła.

Upewnij się tylko, że warstwa na górze tekstu nie pokrywa zbyt wiele słowa (lub słów). I zawsze ważne jest, aby upewnić się, że przeszkody w tekście nie powodują niepożądanych słów z powodu umieszczenia innych elementów.

Simply Chocolate dobrze wykorzystuje ten efekt warstwowy. Działa głównie ze względu na kombinację dużych liter, które używają wspólnych słów pogrubioną czcionką i górnego elementu, który nie jest tak naprawdę duży i zawiera dokładnie te same słowa, które są zasłonięte przez element cukierków.

Ta obróbka sprawia, że ​​duże litery w tle są bardziej elementem graficznym niż czytelnym, tworząc świeży kontrast i doskonały efekt nakładania warstw. (Może się okazać, że przewijasz wszystkie różne smaki cukierków, aby zobaczyć, jak tworzą one efekt na różne sposoby).

Zapomnij o regułach kosmosu

Czasami przeszkody tekstowe nie zakrywają liter, ale wkraczają na ich miejsce.

Jest to jedna z tych zasad, które łamie North Street, a projekt nie jest zagracony ani rozczłonkowany. Opis firmy uderza wprost w środkową pionową zasadę na ekranie (reszta projektu używa tego dzielnika do estetyki podzielonego ekranu).

Jeśli ktoś powiedziałby, że zamierza skorzystać z tego leczenia, prawdopodobnie spróbowałbyś przekonać go inaczej, ale tutaj to działa. Kompozycja wizualna jest tak lekka - dzięki dużej ilości białej przestrzeni - a ich krój pisma jest na tyle odważny, że lekka szara linia prawie po prostu spada na tło, nawet jeśli zajmuje miejsce, które powinno być zarezerwowane dla tekstu.

Druga szara linia dodatkowo dzieli tekst w nawigacji, ale większość użytkowników prawdopodobnie nawet nie zauważy przeszkody.

Tylko dla dużych liter

Patrząc na wszystkie przykłady tutaj, prawdopodobnie zauważysz wspólny motyw. Wszystkie zasłonięte litery są dość duże i wykorzystują proste kroje pisma.

Małe litery zazwyczaj nie zapewniają wystarczającej ilości miejsca na pokrycie części tekstu w sposób, który wydaje się celowy. Jeśli planujesz projektować z przeszkodą tekstową, powinna być celowa i mieć znaczenie.

Skomplikowane skrypty nowych stylów są po prostu zbyt trudne do odczytania z umieszczonym na nich elementem.

Zakrycie małych liter jest niezwykle trudne, jeśli chodzi o celowe wzornictwo i czytelność. Dlatego technika ta jest połączona z nadmierną typografią.

Te duże, często bezszeryfowe, kroje są łatwe do odczytania na pierwszy rzut oka i często mają średnie szerokości skoku oraz duże miski i blaty, dzięki którym elementy warstwowe są bardziej praktyczne. Aby ta koncepcja działała, potrzebujesz liter o kształtach, które nadają się do tej koncepcji. Style cienkie lub skondensowane często nie działają, a skomplikowane skrypty stylów nowości są po prostu zbyt trudne do odczytania z elementem na nich.

Elementy o małym kontraście

Czasami niedrożność tekstu nie jest elementem na wierzchu tekstu; jest to relacja między elementem tekstowym a tym, co go otacza. Brak kontrastu między tekstem a elementami tła może również powodować niedrożność tekstu.

Ponownie, może to być trudna koncepcja, aby skutecznie ją zrealizować. Tekst z natury istnieje do przeczytania. Brak kontrastu może to utrudnić.

Po sparowaniu z czytelnym tekstem elementy tekstowe o niskim kontraście są subtelnymi przypomnieniami na ekranie. Elementy te zostaną odczytane po innych elementach o wyższym kontraście.

W powyższym projekcie dla Anew opis firmy jest ważniejszy niż nazwa marki. To właśnie mówi projekt użytkownikom z powodu obróbki typu. Słowa kluczowe „dach + kuchnia testowa” są łatwe do zobaczenia i przeczytania. Nazwa „Anew” pojawia się w miejscu o niskim kontraście pod znakiem marki. Oko jest nadal przyciągane z powodu dużego logo, ale nie jest to główny punkt centralny, jeśli chodzi o czytanie i zbieranie informacji.

Jednym z powodów, dla których to leczenie działa w tej przestrzeni, jest zawartość projektu. Pomyśl o symbiozie słowa „Anew” z jasnymi białymi talerzami obiadowymi. Jest świeży, inny i kuszący.

Wniosek

Zablokowane wzory tekstowe stają się coraz bardziej popularne. Nie tak dawno trudno byłoby ci znaleźć coś w tym stylu online. (Projekty drukowania wykorzystują go bardziej konsekwentnie, ponieważ projektanci nie musieli się martwić o responsywne punkty przerwania).

Po prostu zadbaj o stworzenie czegoś z tekstem, który nie jest w pełni widoczny. Upewnij się, że słowa nadal mówią (i oznaczają) to, co zamierzasz. Jeśli masz jakiekolwiek wątpliwości co do tego, jak projekt będzie postrzegany lub czytany, w przypadku korzystania z tekstu zasłoniętego, rozważ inną opcję. Nigdy nie chcesz, aby Twój projekt był trudny do zrozumienia dla użytkowników.