Częstym błędem podczas stylizowania tekstu dla interfejsu UI jest zbyt wiele zależności od rozmiaru czcionki.

• „Czy ten tekst jest ważny? Zwiększmy to.”
• „Czy ten tekst jest drugorzędny? Zróbmy to mniejsze.”

Zamiast wykonywać ciężkie podnoszenie rozmiaru czcionek, spróbuj użyć koloru lub wagi czcionek, aby wykonać tę samą pracę.

• „Czy ten tekst jest ważny? Zróbmy to odważniej.”
• „Czy ten tekst jest drugorzędny? Użyjmy jaśniejszego koloru.”

Warto zastosować wyłącznie dwa lub trzy kolory:

• Ciemny ( ale nie czarny ) – kolor dla głównej treści ( np. nagłówek artykułu )
• Szary dla zawartości dodatkowej ( np. data opublikowania artykułu )
• Jaśniejszy szary dla zawartości pomocniczej ( może być informacja o prawach autorskich w stopce )

Waga czcionek posiada kilka typów własności absolutnych dla typów „normal” oraz „bold”.

• normal – czcionka podstawowa ( wartość absolutna 100, 200, 300, 400 )
• bold – czcionka pogrubiona ( wartość absolutna 500, 600, 700 )

Normalna grubość czcionki to 400 lub 500 dla większości tekstu.
Cięższy krój czcionki to 600 lub 700 dla tekstu, który chcemy wyróżnić.

Staraj się uważać na czcionki poniżej 400 dla interfejsu użytkownika. Mogą pracować dla dużych nagłówków, lecz są zbyt trudne do odczytania przy mniejszych rozmiarach.
Jeśli rozważasz użycie mniejszej wagi czcionek, użyj zamiast tego jaśniejszy kolor lub mniejszy rozmiar czcionki.

Tworzenie tekstu o jaśniejszym odcieniu szarości jest świetnym sposobem na zmniejszenie akcentowania na białym tle, lecz nie wygląda to dobrze na kolorowym tle.
Dzieje się tak dlatego, że efekt, który widzimy z szarym kolorem zmniejsza kontrast.

Zbliżanie tekstu do koloru tła pomaga w tworzeniu hierarchii, nie czyniąc jej jasnoszarą.

Użyj białego tekstu i zmniejsz krycie. Dzięki temu kolor tła ujawnia się, zmniejszając nacisk na tekst, który nie koliduje z tłem.

Działa to lepiej niż zmniejszenia krycia, gdy tło jest obrazem lub wzorem. Zmniejszanie krycia powoduje, że tekst jest zbyt tępy lub sprany.

Wybierz kolor, który ma taki sam odcień jak tło, dostosowując nasycenie i jasność, dopóki nie będzie dobrze wyglądać.

Zamiast używać dużych wartości rozmycia i rozrzutu, aby cienie boxów były bardziej zauważalne, dodaj pionowe przesunięcie.

Wygląda to o wiele bardziej naturalnie, ponieważ symuluje źródło światła świecące z góry, tak jak jesteśmy przyzwyczajeni do oglądania w prawdziwym świecie.

Odnosi się to również do wewnętrznych cieni np. dla formularzy.

Gdy chcesz odseparować dwa elementy, spróbuj wykorzystać narzędzie odstępu.

Odstępy to świetny sposób na odróżnienie elementów od siebie. Nie są one jedynym sposobem, użycie zbyt wielu może sprawić, że Twój projekt będzie zagracony.

Gdy następnym razem będziesz analizował projekt nawigacji UI, wypróbuj jeden z tych pomysłów:

Cienie boxa świetnie nadają się do zaznaczenia elementu wrażliwego, lecz mogą być bardziej subtelne i osiągnąć ten sam cel, nie będąc tak mocno rozpraszającym.

Nadanie sąsiadującym elementom nieco odmiennych kolorów tła jest zwykle wszystkim, czego potrzeba, aby stworzyć różnicę pomiędzy nimi.

Jeśli używasz już odmiennych kolorów tła i obramowań, spróbuj usunąć obramowania. Efekt może być niesamowity i bardzie przyjazny UI.

Czy istnieje lepszy sposób oddzielenia elementów niż po prostu zwiększenie odstępu?

Rozdzielenie elementów na większą odległość to świetny sposób na rozróżnienie grup elementów bez wprowadzania żadnego nowego interfejsu użytkownika.

Jeśli projektujesz coś, co może zawierać duże ikony ( np. sekcja „Funkcje” strony docelowej ), możesz pobrać bezpłatne zestawy ikon np. Font Awesome i podnieść rozmiar, dopóki nie spełni Twoich oczekiwań.

W końcu są to obrazy wektorowe, więc jakość nie ucierpi jeśli zwiększysz rozmiar.

Chociaż to prawda, że obrazy wektorowe nie będą tracić jakości, gdy zostaną powiększone. Jednak ikony, które zostały zaprojektowane w rozmiarze 12-24px, nigdy nie będą wyglądały profesjonalnie, jeśli powiększysz 3x lub 4x niż zamierzone. Brakuje im szczegółów i zawsze wydają się nieproporcjonalnie „grube”.

Jeśli nie jesteś grafikiem a pragniesz dodać odrobinę polotu do interfejsu użytkownika, który nie jest tak pięknie przygotowany jak np. przy pomocy zdjęć lub fotografii. Skorzystaj z obramować akcentujących.

Jedną z prostych sztuczek, które mogą zrobić dużą różnicę to dodanie kolorowych krawędzi. Kolor krawędzi można wybrać zgodnie z charakterem elementu ( np. informacyjny, ostrzeżenie, ważne… ).

Dodając obramowanie akcentujące nie potrzeba wykonywać wielu zmian w obecnym systemie nawigacji, a można znacznie poprawić wizualny efekt pod kątem Design UI.

Czy trudno jest zbierać kolory? Spróbuj skorzystać z kilku narzędzi, które pozwolą wyszukiwać kolory, aby uniknąć uczucia przytłoczenia, nieskończonymi możliwościami tradycyjnego próbnika kolorów.

Inspiracje kolorystyczne – dribbble.com
Próbnik kolorów – hslpicker.com

Kiedy istnieje wiele czynności, które użytkownik może wykonać na stronie, łatwo wpaść w pułapkę projektowania w oparciu wyłącznie o semantykę.

Framework np. Bootstrap zachęca do wykorzystania menu stylów semantycznych do wyboru, gdy dodajesz nowy przycisk.

„Czy to pozytywne działanie? zmień kolor na zielony.”

„Czy to usuwa dane? Zmień kolor na czerwony.”

Semantyka jest ważną częścią projektowania przycisków, ale istnieje ważniejsza cecha, o której powszechnie się zapomina to: Hierarchia.

Każda akcja na stronie znajduje się w piramidzie ważności. Większość stron ma tylko jedną prawdziwą akcję podstawową, kilka mniej ważnych działań dodatkowych i kilka rzadko używanych działań trzeciorzędnych.

Podczas projektowania hierarchii przycisków warto uzgodnić każdy element np. na podstawie takich warunków:

• Działania pierwszorzędne – powinny być oczywiste. Solidne kolory tła o wysokim kontraście działają tutaj doskonale.
• Działania drugorzędne – powinny być jasne. Styl kontur lub kolory tła o niższym kontraście to świetna opcja.
• Działania trzeciorzędne – powinny być możliwe do wykrycia, ale nie rzucające się w oczy. Stylizowanie tych przycisków to wykorzystanie linków tekstowych jako najlepsze rozwiązanie.

„A co z działaniami destrukcyjnymi, czy zawsze powinny być czerwone?”

Niekoniecznie! Jeśli działanie destrukcyjne nie jest podstawowym działaniem na stronie, lepszym rozwiązaniem byłoby nadanie hierarchii przycisku np. drugorzędnej lub trzeciorzędnej.

Zachowaj dużą, czerwoną i odważną stylizację, gdy działanie destrukcyjne jest w rzeczywistości główną akcją w interfejsie, np. w oknie dialogowym potwierdzenia.