4 kolejne - proste designerskie tricki, by ulepszyć Twoją stronę WWW

4 kolejne - proste designerskie tricki, by ulepszyć Twoją stronę

Opublikowano 1 miesiąc temu -


Dziś znowu trochę o sztuczkach w designie. Jak łatwo da się domyśleć, tyle ile jest elementów na stronie, tyle różnych wyzwań dla jej twórcy. Czy to będzie zwykły przycisk, czy zaawansowane, rozwijane menu - każdy z nich może zostać zaprojektowany dobrze albo źle. Są jednak sposoby, by szybko i efektowanie podrasować nasz projekt, a użytkownik cierpiący na OCD nie zgrzytał zębami.

Jeśli chcesz poczytać o poprzednich trickach w designie, zajrzyj tutaj.
Bez zbędnego przedłużania, zaczynajmy.

Przyciski

Na swojej WWW zrobiłeś formularz, masz regulamin do zaakceptowania, Twój użytkownik będzie się do niej logował - co za tym idzie, potrzebujesz buttonów. DOBRYCH buttonów.

Wszystkie przyciski w obrębie jednej strony, w zależności od funkcji, muszą mieć swój styl pasujący do reszty, oraz najlepiej by było, gdyby wyglądem niosły ze sobą dodatkową informację (np. czerwone tło przycisku jest zarezerwowane do ostatecznych i nieodwracalnych decyzji użytkownika jak "Usuń", "Odrzuć", a zielone do potwierdzenia akcji  "Akceptuj", "OK", "Zapisz"). Gdy wrzucisz obok siebie dwa przyciski, na tym samym tle, użytkownik nie będzie zdawał sobie sprawy, czy jego akcja ma jakiekolwiek znaczenie.

Przypatrz się swoim przyciskom i zwróć uwagę, czy odpowiednie rozróżnienie kolorów jest zachowane.

Pro UX Design Hack Tip

Jedna również jedna rzecz do zapamiętania: to jest element na stronie, który w 99% nie występuje sam. (Prawie) Zawsze ma kolegę. Jeśli jest przycisk "Akceptuj" / "OK", zawsze będzie mu towarzyszyć przycisk "Anuluj". Jeśli będzie to "Zapisz", zawsze będzie stać obok niego dzielnie "Anuluj". Jeśli będzie to "Zaloguj", jego kolegami będą "Zarejestruj" i "Zapomniałem hasła", a czasem także "Zaloguj przez Facebooka / Google / Twittera / etc".  To taka UXowa drobnostka i nie można tym zapomnieć.

Ogranicz paletę kolorów

Jeśli nie jesteś właścicielem Skittelsów - Twój maksymalny limit kolorów na stronie to 3. Uwierz mi, to dla Twojego dobra. Najlepiej jest, gdy wybierasz jeden, przewodni kolor dla Twojej strony, a pozostałe 2 to tylko akcenty.

W zależności od branży, połączenia mogą być różne - ale jest to temat na osobny artykuł i obiecuję, że takowy stworzę - jednak każdy, kto wejdzie na Twoją stronę musi być przekonany o profesjonalności Twoich usług, a Twoim zadaniem jest stworzyć to wrażenie wizualnie. Pomogą Ci w tym Palleton oraz Colordot, genialne generatory palety kolorów.

8 prostych designerskich tricków, by ulepszyć Twoją stronę

Co należy zrobić?
Spisz wszystkie możliwe kolory, jakie pojawiają się na Twojej stronie. Dosłownie - w notatniku bądź na papierze i oznacz, który pojawia się najczęściej. (Pamiętaj, bierzesz pod uwagę też tła). Ten zostanie Twoim przewodnim a reszty się pozbądź. Zobacz, jak będzie wyglądała Twoja strona, "ogołocona" z reszty kolorów.
Kiedy to już za Tobą, przejdź do Palletonu i wybierz kolor dodatkowy i nanieś go na nasze "gołe" elementy.

Tekst musi być czytelny

Jakby nie było, jeśli nawet informacja będzie błaha i nieistotna, a strona będzie kameralna, jeśli tekst będzie nieczytelny użytkownik zirytuje się, że nie może go odczytać. Zdarza się, że spodoba nam się fajny obraz w tle, jednak to nie on gra główne skrzypce na stronie WWW (pomijam wszelakie portfolia fotograficzne).

Mamy wtedy parę opcji. Zacznijmy więc, dlaczego tekst może wyglądać źle:

Po prostu go nie widać. Jeśli czytelnika nie lubimy, to tak zostawmy, jednak nasz czytelnik to użytkownik naszej strony i lepiej jeśli i on i my jesteśmy z niej zadowoleni.

Co możemy zrobić?

Sposobów rozwiązania jest parę. Możemy np. nałożyć na fotkę ciemny kolor i zostawimy biały font, tak, by kontrast między tłem a tekstem był znacznie większy:

Możemy sytuację również odwrócić. Kontrast jest duży, przez ciemny font i delikatny background. Zmniejszyłam po prostu widoczność zdjęcia do 30%, dzięki czemu dalej widzimy kontury postaci i co dzieje się w tle, ale nie odwraca nam uwagi od ważniejszych elementów.

Możemy dodać tło tylko dla tekstu i zostawiamy oryginalną fotografię nieruszoną.

Przyciski i ikonki

Czasami w buttonie widzimy dodatkowo ikonkę. Jest to kolejny element wizualnie potwierdzający nam daną akcję, mający na celu dodatkowo podkreślić czego dotyczy dany przycisk. Czasami jednak wprowadza nam to chaos. Co robimy źle i jak to łatwo wyprostować?
Załóżmy, że historia buttona toczyła się w następujący sposób, zaczynając od pierwszego dziewiczego designu pierwszej iteracji;

... i dzięki temu z całkiem przyzwoitego przycisku otrzymaliśmy potworka.
Designer / UX z ułańską fantazja wymyślał kolejne funkcje do tego jednego przycisku, a biedny webdev spełniał kolejno życzenia z jego długiej listy.
Dlaczego na końcu okazał się potworkiem? Bo dokładając elementy i funkcjonalność, uciekł nam pierowzór i w efekcie przycisk jest nierówny dzięki niesymetrycznym marginesom, ikonka jest za duża w stosunku do reszty i w sumie nie wygląda ładnie na designie. Całe szczęście, można to szybko "załatać":

Dodaliśmy troche paddingu (5-10px) wewnątrz całego buttona, przez co jest większy i czytelniejszy oraz zrównaliśmy przerwy pomiędzy elementami w środku.

Tadaaaam. Przycisk jak nowy.