Podstawowe zasady, które pomogą Ci stać się lepszym Web Designerem

Zacznij od zrobienia researchu i poszukaniu inspiracji

Na samym początku warto przejrzeć strony konkurencyjnych firm. Zobacz, w jakim stylu są one wykonane. Zwrócić także uwagę na to, jakie ciekawe rozwiązania i detale zostały na nich wykorzystane, jakie informacje są wyeksponowane, jaka jest ich hierarchia oraz jakie moduły zostały użyte. Następnie powienieneś poświęcić czas na przemyślenie swojej wizji projektu. W znalezieniu ciekawych inspiracji czy innowacyjnych rozwiązań pomogą serwisy takie jak behance.com, dribbble.com i awwwards.com. 

Prezentowane są na nich jedynie najbardziej profesjonalne projekty, dzięki którym będziesz miał okazję zapoznać się z obecnymi trendami i sprawdzić, w jaki sposób najlepsi freelancerzy/największe agencie dobierają typografię czy kolorystykę do swoich projektów. Fachowcy w dziedzinie designu wymieniają się tam także konstruktywnymi uwagami na temat swoich prac, będziesz więc miał okazję sam przekonać się, co powinieneś poprawić lub co zrobić w zupełnie inny sposób we własnym projekcie. Więcej o inspiracjach możesz przeczytać na blogu Merixstudio, gdzie przestawione zostało “7 miejsc, w których warto szukać inspiracji do projektów webowych”.

 Makieta, która ułatwi Ci życie 

Przed rozpoczęciem projektowania musisz pamiętać o przygotowaniu szkicu. Możesz go stworzyć zarówno na kartce, jak i w specjalnie do tego przygotowanych aplikacjach, takich jak Balsamique czy Axure. Programy te pozwolą na rozplanowanie układu elementów i modułów umieszczanych w designie, dzięki czemu podczas procesu tworzenia nie będziesz musiał zastanawiać się co i gdzie chcesz pokazać. Na takiej makiecie powinieneś zaplanować miejsce na logotyp i menu (zwinięte i rozwinięte). Zdecyduj pomiędzy wykorzystaniem baneru a slidera oraz rozważ, co ma zawierać stopka. Pamiętaj o umieszczeniu w makiecie wszystkich modułów, jakie mają się znaleźć na stronie. Na tym etapie powinieneś ustalić także, czy chcesz projektować full-screenowo, czy trzymać się konkretnej szerokości dla contentu strony. Przy wybraniu drugiej opcji wykorzystać powinieneś grid, o którym szerzej opowiem w dalszej części mojego artykułu.

Projektując makietę, patrz na nią z perspektywy docelowego użytkownika – stworzona strona musi być intuicyjna, przejrzysta i łatwa w obsłudze. Jest to tak naprawdę najważniejszym wyznacznikiem tego, czym powinieneś się kierować na etapie makietowania.

Dobór kolorystki

 Po wykonaniu poprzednich kroków możesz zabrać się za dobór kolorystki projektu. Ilość wykorzystywanych kolorów nie powinna być zbyt duża, gdyż efekt końcowy może być chaotyczny i nieprzyjemny dla oka.

Polskie strony błędu 404 – cz. 6

 

Przykład złego dopasowania kolorów.

Zwykle powinieneś ograniczyć do do użycia maksymalnie trzech lub czterech kolorów. Jeden z nich powinien być kontrastujący, dzięki czemu będzie przyciągał uwagę, podkreślał znaczenie odpowiednich elementów designu – odróżnienie od pozostałych odcieni pozwoli na przełamanie monotonii projektu. Jeden lub dwa kolory powinny pełnić rolę kolorów wiodących, na których oprzemy nasz design.

 

Przykład dobrego dopasowania kolorów

Pamiętaj także o tym, by tekst w połączeniu z wybraną przez Ciebie kolorystyką był czytelny i wyraźny. Wybrane kolory muszą także współgrać z logotypem serwisu oraz, jeśli takowa istnieje, spełniać zasady doboru kolorystyki opisanej w identyfikacji firmy (CI). Dzięki temu utrzymasz charakter designu spójny z innymi materiałami graficznymi firmy.

Innym ważnym aspektem wpływającym na podejmowaną decyzję jest tematyka strony, która w znaczący sposób narzuca to, jakie kolory powinny być wykorzystane. Do projektów, które prezentują poważną treść lub mają odzwierciedlać cechy takie jak prestiż czy elegancja powinieneś użyć stonowanej kolorystyki (np. czerń, biel czy odcienie szarości i brązu).

Ważnym elementem, który wpływa na naszą paletę barw, jest także to, czy strona jest kierowana do osób niedowidzących lub mających problem z rozpoznawaniem kolorów. W takich przypadkach powinno się dobierać mocno kontrastowe kolory. 

Typografia – wybór fontu

W Internecie możesz znaleźć wiele naprawdę dobrych fontów, które możesz wykorzystać w swoim projekcie (zarówno darmowych, jak i  płatnych). Ważne jednak jest sprawdzenie, czy dostosowane są one do wykorzystywania w projektach webowych. Świetną bazą atrakcyjnych webfontów jest Google Fonts, z których możesz korzystać w zupełnie darmowy i prosty sposób.

Przykład niepoprawnego doboru fontów

Tak samo jak w przypadku doborów kolorów, tak i w przypadku fontów nie możesz przesadzić z ich różnorodnością w projekcie – dobrą praktyką jest ograniczenie się do dwóch lub (maksymalnie) trzech. Wybrane przez nas kroje powinny różnić się od siebie, co możesz uzyskać poprzez między innymi łączenie fontów szeryfowych z bezszeryfowym. Najlepiej, aby posiadały klika wariantów (np. light, regular, italic, medium, bold, black), dzięki czemu możesz zmieniać ich grubość czy nachylenie i uzyskać w ten sposób atrakcyjniejszy i bardziej profesjonalny wygląd projektu.

 

Przykład poprawnego użycia typografii 

Powinieneś także manipulować wielkością fontów, dzięki czemu w prosty sposób możesz podkreślić znaczenie wybranego elementu i zwrócić uwagę użytkownika. Stosuj odmienne rozmiary dla nagłówków, paragrafów i elementów takich jak np. buttony. Tak jak w przypadku kolorystyki, wpływ na Twój wybór ma tematyka projektu. Stonowane i eleganckie fonty będziesz stosować przy pracy nad poważniejszymi projektami, futurystyczne i ekstrawaganckie kroje świetnie się zaś sprawdzą w projektach o luźnym klimacie.

Dobór typografii do projektu jest bardzo ważny. Moim zdaniem często w znaczącym stopniu wpływa na to, w jaki sposób projekt zostanie odebrany przez klienta, warto więc poświęcić więcej czasu na ten etap projektowania.

Po co nam Grid? 

Grid w łatwy sposób pozwala nam na utrzymanie równych odstępów i marginesów w projekcie. 

Wspomniany na początku artykułu grid to system poziomych i/lub pionowych linii pomocniczych (prowadnic) wyznaczający pewne ramy, w które powinieneś wpasować swój projekt i wszystkie zawarte w nim elementy. Pozwala on “utrzymać” cały design w odpowiedniej szerokości/wysokości oraz dopasowywać rozmiary modułów w taki sposób, by całość współgrała ze sobą. Z tego względu przed rozpoczęciem pracy nad projektem dobierz grid poprzez ustalenie szerokości, na jakiej chcesz projektować. W Internecie często można znaleźć gotowe pliki .psd z nałożonym gridem, lecz równe dobrze możesz stworzyć go sam poprzez korzystanie z generatorów takich jak Gridcalculator. Dzięki pracy z liniami pomocniczymi w łatwy sposób możesz także operować szerokością modułów bez martwienia się o ich spójność. Zaletą takiego podejścia jest także fakt, że znacznie ułatwia on pracę Front End Developerów, czyli osób, które po zakończonym etapie designu przejmują opiekę nad projektem. Więcej na temat gridu przeczytacie w artykule “Grid – najprostszy sposób na dobry design”.

Nazywanie i grupowanie warstw

Twoją pierwszą reakcją prawdopodobnie będzie stwierdzenie, że nazwy i grupowanie warstw to nic specjalnego. Przecież w żadnym stopniu nie wpływa to na estetykę projektu… Oczywiście masz rację, jest to rada dla najbardziej początkujących grafików. 🙂 Dzięki grupowaniu i nazywaniu warstw (odpowiednio do ich funkcjonalności i znaczenia) nie będziesz nigdy miał problemu z szybkim określeniem czego one dotyczą. Pomoże to także grafikom i developerom, którzy pracować będą na stworzonym przez Ciebie pliku. 

Dodatkowym atutem jest to, że nie będziesz miał żadnych problemów w odnalezieniu się w pliku, nad którymi nie pracowałeś od dłuższego czasu. Spójrz na to także z drugiej strony – jeśli musiałbyś przejąć projekt, w którym panuje bałagan, to prawdopodobnie nie byłbyś z tego faktu zbyt zadowolony. Dodatkowym argumentem za poprawnym nazewnictwem i grupowaniem warstw jest to, że często praktyka ta stawiana jest przez pracodawców jako wymóg.

 Przejrzystość projektu – Flat Design 

Pewnie niejednokrotnie miałeś do czynienia z chaotycznymi i  przepełnionymi efektownymi elementami stronami. Projekty powinny być tworzone pod kątem czytelności i wygody odbioru, dzięki czemu nie będą stwarzały efektu przeładowania. Nie staraj się na siłę umiejscawiać jak najwięcej elementów w danej sekcji i przesadnie walczyć o oryginalność, gdyż możesz uzyskać efekt odwrotny do zamierzonego. Staraj się projektować jak najbardziej przejrzyście i zwracać uwagę na detale, które potrafią w niesamowity sposób podnieść estetykę projektu i oddać kunszt pracy grafika. Zwracaj uwagę na przestrzenie i nie bój się stosować dużych marginesów – Twój projekt musi być lekki i czytelny. Używaj dużych zdjęć i grafik o odpowiedniej otrości. Dzięki takiemu podejściu w łatwy sposób możesz wyróżnić ważne elementy oraz uzyskać profesjonalny wygląd strony. Najlepszym przykładem takiego podejścia do projektowania jest minimalistyczny Flat Design (mniej znaczy więcej), w którym pozbyto się brzydkich i przestarzałych gradientów, cieni i ciężkich kolorów. Postawiono tutaj na czytelność i lekkość projektu, co podbiło serca grafików i zepchnęło w cień nieczytelne, przepełnione niepotrzebnymi detalami projekty.

Podsumowując…

 Przestrzeganie wyżej wymienionych zasad z pewnością sprawi, że Twoje projekty będą coraz lepsze, a praca wygodniejsza i bardziej poukładana. Brak chaosu w pracy sprawi, że będzie dawała ona jeszcze więcej satysfakcji. Wypracowanie reguł pozwoli na ciągły rozwój umiejętności oraz zapewni, że każdy nowy projekt będzie jeszcze lepszy od poprzedniego.