Nie uważam się za nie wiadomo jakiego specjalistę od kreatywnego projektowania graficznego, dlatego w tej liście najczęstszych błędów designerskich wymienię te najbardziej oczywiste. Chociaż estetyka i piękno nie jest subiektywne, to nie chcę zamienić tego artykułu w rozważania typu co mi się bardziej podoba – bo to nie będzie przydatne – w sieci jest wiele blogów, które przedstawiają czyjeś opinie i za wszelką cenę nie chcę dopuścić aby ten też taki był.
Projektowanie graficzne dla potrzeb stron internetowych jest trudne z dwóch powodów. Po pierwsze, projekt strony internetowej wymaga długotrwałej pracy. Wielogodzinne tworzenie layoutu strony internetowej powoduje, że zaczynamy przyzwyczajać się do tego jak ona wygląda i w efekcie przestajemy zauważać po jakimś czasie ewidentne błędy graficzne. Jest to praktyczny odpowiednik efektu czystej ekspozycji i klątwa web designera polega n tym, że traci wobec niego obiektywność. Nie da się odtworzyć efektu pierwszego wrażenia jaki layout strony wywołuje.PROTIP: Mój sposób to popatrzenie na layout w odbiciu lustrzanym (odbicie w poziomie) – to dlatego zazwyczaj nie podobamy się sobie na zdjęciach – zazwyczaj patrzymy na siebie w lustrze. Tutaj wykorzystujemy odwrotny mechanizm 😉
Wiadomo, że rozpoznajemy wady raczej w dziełach cudzych niż własnych… gdy malujesz, powinieneś mieć pod ręką płaskie zwierciadło i często oglądać w nim swe dzieło. Jeśli je bowiem ujrzysz w odwróconym odbiciu wyda się jakoby wykonane ręką cudzą i lepiej osądzisz swe błędy.
Leonardo da Vinci
Po drugie, strony nie dość, że same w sobie są dosyć złożone, to dodatkowo kompozycję trzeba tak zaprojektować aby była skalowalna i możliwa do zakodowania w myśl podejścia „responsive web design”.
Web design a SEO
Dodatkowa trudność polega na tym, że silniki wyszukiwarki są w stanie zbadać, czy projekt trzyma się zasad projektowania dla potrzeb użytkowników mobilnych – mowa tutaj o optymalizacji mobilnej i przyjazności dla ekranów dotykowych. Sprawdź czy twoja strona jest z nimi zgodna: Test optymalizacji mobilnej.
Wyszukiwarka „widzi”, czy tekst ma odpowiednią wielkość oraz kontrast. Czy odległość pomiędzy przyciskami jest wystarczająco duża oraz czy same linki są odpowiedniej wielkości. Czy hierarchia syntaktyczna odpowiada wielkościom nagłówków h1,h2,h3. Jest to bardzo niedoceniany czynnik rankingowy Google i jeden z największych sekretów zaawansowanego pozycjonowania stron.
#1: Zbyt mały kontrast pomiędzy tekstem i tłem
Najczęściej to niedociągnięcie występuje w sekcjach, które mają tło obrazkowe. Błąd możemy naprawić poprzez dodanie nakładki, która przyciemni tekst lub nadać tekstowi taką barwę aby był bardziej widoczny. Voila:
Jeżeli nie podoba nam się przyciemnione tło, można zrobić coś dokładnie odwrotnego – dać białą nakładkę i barwę tekstu odwrócić. W ostateczności dodać tekstowi kontur (jeżeli jego wielkość jest powyżej 36px) lub dodać cień.
DLA NERDÓW: Jeżeli nie chcemy przyciemniać oryginalnego obrazka w programie graficznym to możemy użyć trzech technik CSS. Pierwsza z nich to wykorzystanie dwóch teł, z których jedno jest obrazkiem z jednolitym kolorem. Drugie to wykorzystanie linear gradient:
#sekcja-tlo {
background:linear-gradient(0deg,rgba(230,230,230,0.3),rgba(230,230,230,0.3)),url('obrazek.jpg'); background-size:cover;
}
Trzecie podejście polega na wykorzystaniu bardzo dużego cienia wewnętrznego. Podpowiem, że to rozwiązanie jest bardziej elastyczne jeżeli chcemy używać przejść transition i zdarzenia hover.
#sekcja-tlo{
background:url('obrazek.jpg'); background-size:cover; box-shadow:inset 0 0 0 3000px rgba(230,230,230,0.3);
}
Nieczytelność tekstu możemy też rozwiązać za pomocą obrysowania znaków lub zastosowania cienia:
#sekcja-tlo h2{
text-shadow: -1px -1px 12px rgba(128, 128, 128, 0.5);
}
#2: Brak odstępów i marginesów
Odstęp jest bardzo ważny w projektowaniu graficznym. Dzięki odstępom grupujemy obiekty lub eksponujemy je.
Nie potrzeba wiele wysiłku by uratować taki projekt. Wystarczy dodać odstępy – dzięki temu treść łatwiej skanować okiem i wygląda estetycznie
Odstępy są szalenie istotnie w przypadku użyteczności na ekranie dotykowym. Małe odstępy i brak marginesów wewnętrznych może utrudniać lub powodować nieprawidłowe kliknięcia i „tapnięcia”.
#3: Kolorystyka
W projektowaniu layoutów stron internetowych używamy jednego koloru przewodniego (najczęściej jest spójny z brandingiem), koloru uzupełniającego (np. mniej kontrastowej odmiany lub jaśniejszego/ciemniejszego wariantu) ewentualnie dodatkowych odcieni oraz bieli i czerni.
Łączenie więcej niż trzech barw kolorowych w typowym projekcie strony internetowej z góry jest skazane na porażkę.
Więcej w artykule dotyczącym dobierania kolorów w oparciu o koło kolorów i zasadę kolorów analogicznych na stronach internetowych:
Dobieranie kolorów na stronę WWW#4: Przypadkowe ułożenie zdjęć
Z tym mamy do czynienia np. w galeriach zdjęć. Dobór zdjęć to jedno natomiast kiedy chcemy je zaprezentować ułóżmy je tak aby wyglądało to przyjaźnie. Postaraj się tak ułożyć zdjęcia aby dało się zaobserwować jakąś regularność (np. za pomocą rytmu) unikaj czarnych owiec.
Występowanie w prostych blokach tworzonych przez miniatury zdjęć, mocno odróżniających się elementów może zmienić piękne portfolio i galerię cudownych zdjęć w nie mały chaos.
#5: Wszelkie błędy typograficzne
Czyli błędy związane z posługiwaniem się literami i kompozycją tekstu:
- brak poprawnej skali typograficznej
- justowanie tekstu
- wyrównanie do prawej
- niepoprawnie dobrana wysokość linii
- niepoprawny tracking (światło czyli wolna przestrzeń pomiędzy pojedynczymi literami)
Nawet wydawałoby się takie „szczegóły” jak wysokość linii są wstanie zrujnować najlepsze dobory fontów i treść tekstu.
Odpowiednio dobrana wysokość linii powoduje że tekst wygląda atrakcyjnie i jest przyjemny w odbiorze dla czytającego. Do operowania wysokością linii jest właściwość line-height jaką nadajemy dla selektora tekstu.
#6: Napisy na kluczowym elemencie tła
Nagłówki z tłem przedstawiające osoby, na buziach których umieszczamy napisy wyglądają mało atrakcyjnie. W przypadku produktów, które mają być eksponowane też nie jest to zalecane. Tutaj nakładka i dodatkowe cienie jeszcze pogarszają całą sprawę:
Starajmy się unikać takich sytuacji. Rozwiązaniem może być małe przeskalowanie zdjęcia, przesuniecie obiektu na jedną ze stron, rozciągnięcie tła i umieszczenie napisu na przeciwnej stronie.
Możemy też podzielić tego typu widok na dwie części.
#7: Podstawowe błędy kadrowania zdjęć
Przed studiami Inżynierskimi wybrałem się na zawodowy kurs grafika komputerowego. Zajęcia związane z kadrowaniem zdjęć uważam za jedne z najbardziej wartościowych chociaż to nawet nie był wstęp do warsztatów jakie mają za sobą profesjonalni fotografowie.
Kadrowanie zdjęć to przycinanie pierwotnego obrazu. To między innymi z tego powodu powstały wodospady zdjęć, które tolerują różny stosunek rozmiarów każdego kolejnego elementu. Przy kadrowaniu ważny jest dobór odpowiednich proporcji kadru (np. panorama, kwadrat, portret itd.), umiejętne wypełnienie kadru kluczowym obiektem, oraz kompozycja ogólna, która decyduje o wrażeniach estetycznych.
#8: Brak skalowalności
Tutaj za przykład podam swoje archiwum artykułów, które zaprojektowałem i zakodowałem parę dni temu:
Selektor z poszczególnymi latami zajmującego 1/6 kontenera i miesiącami zajmującymi 1/12 może wyglądać ciekawie. Problem w tym, że za 8 miesięcy cały ten projekt pójdzie do kosza. Dojdzie nam kolejny rok 2020 i jedynym rozwiązaniem będzie usunięcie roku 2014 lub… dodanie strzałek i zmianę statycznej sekcji z poszczególnymi latami w karuzelę np. tak jak robię ze zrzutami w portfolio.
Niektóre prace mają 5, 6 lub 7 zrzutów. Karuzela jest jednym z rozwiązań tego typu dylematów.
Idea kalendarza może jest ciekawa ale – no właśnie – nieskalowalna. Dodanie jednego elementu zrujnuje całą ideę lub zawęzi możliwości rozbudowy. Powinniśmy unikać w projektach stron takich układów, które będą uniemożliwiać dodanie kolejnego elementu tej samej klasy lub jego rozbudowy.
#9: Używanie na stronie starych Windowsowych fontów
Ja wiem, że uczelnie wymagają Times New Roman w pracach magisterskich, ale choćby nie wiem co, nie używaj tego typu fontów na stronie internetowej. Nie zostały stworzone z myślą o stronach internetowych, są mało atrakcyjne i przestarzałe. Zmiana fontu na Arial, który jest nieudolną podróbką fontu Helvetica jest w stanie zepsuć najlepszy projekt.
Stosowanie tych fontów na stronach WWW jest tak kontrowersyjne, że nie będę zamieszczał przykładu. I pamiętaj mówimy font a nie czcionka 😉 Sprawdź które fonty idealnie nadają się na stronę internetową (i jak je zainstalować) w mojej selekcji najciekawszych fontów na stronę WWW:
Najlepsze fonty na stronę WWW#10: Uskoki i brak symetrii
Ludzki mózg lubi regularności i symetrię. Jest taka zasada projektowania stron mówiąca o tym, że layout dopasowujemy do treści – to prawda.
Należy jednak przy tym podjąć wszelki wysiłek aby treść wyglądała na przemyślaną i zorganizowaną. Jeżeli posiadamy listy ułożone horyzontalnie róbmy wszystko aby treść była podobnej objętości.
Jeżeli nierówności dotyczą obiektów blokowych, i chcesz przypisać im stałą wysokość można użyć skryptu, który poszuka maksimum a potem przypisze wszystkim elementom wartość maksymalną. Używam tego skryptu w niemal co drugiej stronie:
var maxHeight = 0;
$('.element-do-wyrownania').each(function(){
var thisHeight = $(this).height();
if (thisHeight > maxHeight){
maxHeight = thisHeight;
}
});
$('.element-do-wyrownania').css('height',maxHeight);
Czytaj więcej odnośnie uniwersalnych zasad projektowania graficznego:
Sekrety dobrego web designu11#: Niepoprawne logo
Hej, miało być o stronach a nie o logo! Problem w tym, że logo jest tak ważne na stronie internetowej, że nawet jak posiadalibyśmy jedną z najładniejszych stron internetowych na świecie to jest ono w stanie wszystko zmienić.
Kolorystyka w logo nadaje barwy jakimi posługujemy się na stronie. Użyty font i styl logotypu będzie miał swoje odzwierciedlenie w projekcie graficznym. Radykalna zmiana logo wymaga najczęściej zmiany strony internetowej i innych elementów identyfikacji wizualnej.
#12: Zbyt duże logo
Częsta przypadłość stron, które prezentują niepoprawnie (nieskalowalne) logo. Jak już wspomniałem, uporczywe trzymanie się logo, które jest źle zaprojektowane będzie obciążać wizerunek i utrudniać rozwój wizerunkowy.
Jeżeli zaś logo ci się podoba, powiększanie go nie ma najmniejszego sensu. Podobno „małe jest piękne” i jak najbardziej ma to zastosowanie w kwestii logo.
#13: Kolorystyka niespójna z logo
Jeszcze jeden punkt odnośnie logo. Kolorystyka musi być zgrana z logo. Wyjątek stanowią logotypy stworzone przy użyciu barw achromatycznych (są na samym końcu).
To częsta przypadłość stron internetowych wykonanych przy użyciu gotowych szablonów, przy wyborze których nie kierowano się chęcią dopasowania ich kolorystyki do obecnego logo.
Czytaj więcej o tym jakie powinno być logo na stronie internetowej:
Jakie powinno być logo firmowe?#14: Niespójny styl zdjęć
Dobór zdjęć na stronach głównych i ofertowych jest bardzo istotny. Jeżeli korzystamy ze stylistyki flat, dobierzmy zdjęcia tak aby równoważne elementy były wykonane także w tej stylistyce.
Zasadę tę możemy „złamać” na blogach lub wtedy kiedy jest to mocno uzasadnione. Np. zdecydowanie odradzam przerabiania zdjęć profilowych na odpowiedniki w stylu flat 🙂 Poniżej pozytywny przykład, którym dodano obramowania do zdjęć profilowych:
#15: Brak hierarchii
Hierarchii nie budujemy tylko z myślą o estetyce ale to troska przede wszystkim o wygodę użytkowników.
Czytaj więcej o hierarchii i czytelności interfejsu UI w artykule dotyczącym User Experience:
Czym jest User Experience?#16: Zbyt duże elementy pływające
Stosowanie pływającego menu nagłówkowego jest dobrą praktyką z perspektywy UX. Ten drobny dodatek jednak szybko może stać się uciążliwy jeżeli nie ukryjemy go na urządzeniach mobilnych kiedy zwyczajnie zasłania 20% ekranu.
#Dodatek
Są jeszcze inne oczywistości do których nie chciało mi się robić obrazków:
- skalowanie grafik bez zachowania oryginalnego stosunku rozmiarów (efekt rozciągniecia lub spłaszczenia),
- ignorowanie innych szczegółów, w których rzekomo tkwi diabeł 😉
Źródła
https://www.w3.org/WAI/standards-guidelines/wcag/
https://pl.wikipedia.org/wiki/Efekt_czystej_ekspozycji
Odpowiedz lub skomentuj