Każdy, kto zajmuje się projektowaniem stron www, dąży do tego, aby jego produkty były przystępne dla użytkownika. Stanowi to naprawdę duże wyzwanie, zwłaszcza na początku drogi designerskiej. Interesuje Cię Web Development Design? Szukasz porad, jak uzyskać jeszcze lepszy wygląd interfejsów? Chcesz wznieść swój web design na nowy, wyższy poziom? Przeczytaj artykuł, aby dowiedzieć się, jak projektować estetyczne i funkcjonalne strony internetowe.
Web Design to określenie szeregu procesów tworzenia stron internetowych. Zawiera w sobie web development, UI i UX Design. Każdy z tych elementów wymaga oddzielnej specjalizacji. Dzięki branży UX (User Experience) na piedestale znajdują się użyteczność tworzonych interfejsów i potrzeby użytkowników. Nie wymaga znajomości kodowania. UI dotyczy projektowania aplikacji i witryn od strony graficznej, czyli makiet strony. Dzieje się to przy użyciu np. programu graficznego (Photoshop) lub w aplikacji do projektowania makiet witryn internetowych (Figma). Web development to implementacja projektu za pomocą kodu i zajmuje się tym developer.
Projektowanie stron www to skomplikowany proces, dlatego w Internecie nie znajdziesz zbyt wielu poradników i inspiracji do pracy. Końcowy produkt powinien być estetyczny i funkcjonalny. Wpływa na to szereg czynników, dlatego precyzyjne wybranie najważniejszych zasad UI designu nie jest łatwym zadaniem.
W sieci na różnych stronach można natknąć się na stwierdzenie „naucz się analizować pracę innych”. Chociaż zależności, jakie dostrzeżesz w innym projekcie mogą okazać się bardzo edukacyjne, a do odnalezienia źródeł inspiracji wystarczy wyszukiwarka Google, to zależy nam, aby przedstawić triki, które będziesz w stanie wprowadzić w swój proces web designu od zaraz.
Poniżej przedstawiamy 5 porad, jak poprawić jakość projektowanych stron internetowych, które możesz zacząć stosować w swojej pracy Web Designera(ki) już dziś.
Kluczowe tipy podczas tworzenia stron www, o których musi pamiętać każdy Web Designer:
Kiedy jeszcze nie było Internetu, projektanci(tki) zajmowali się głównie drukiem. Wersje do druku (w tym tekst, logo i grafika) były rozplanowywane na kartkach papieru. W tym celu wykorzystywano formaty ze sztywno wyznaczonymi proporcjami. Przykładowy projekt był tworzony na formacie np. A4.
Jaki format ma strona internetowa? Zwykle jest to długi scroll w płaszczyźnie pionowej, który ciągnie się w dół.
W zależności od urządzenia, strona w sieci będzie się inaczej wyświetlać. Użytkownik podczas przeglądania strony www, nie będzie jej widział jako jednego, długiego scrolla, a właśnie w postaci konkretnych modułów, przez tzw. „okienko” swojego monitora, czyli viewport. W przypadku urządzeń desktopowych okienko web będzie poziome. Urządzenia mobilne będą wyświetlać stronę www pionowo.
Ważne, aby starać się myśleć o poszczególnych modułach, jak o slajdach w prezentacji. Strona to każdy moduł następujący po sobie nawzajem. Takie wyobrażenie pomoże ułożyć web content i poszczególne elementy strony krok po kroku.
Unikniesz sytuacji, w której projektujesz bardzo długiego „węża”, który nie wiadomo, gdzie ma głowę, a gdzie ogon. Jakiego rozmiaru ma być ten slajd? Na samym początku możesz zacząć projektować obszar o wysokości, na której będzie wyświetlać się strona – to już jest świetny start.
Jeżeli chodzi o web design strony na desktop, która ma mieć 1440 px szerokości, to wysokość takiego slajdu (przy założeniu, że projektujemy ekran o proporcjach 16:10), można w prosty sposób obliczyć. 1440 px : 16 x 10 = 900 px – wysokość naszego ekranu.
Slajd o wymiarach 1440 px x 900 px to slajd o wymiarach ekranu użytkownika. W kolejnym kroku należy pamiętać o paskach systemowych oraz pasku przeglądarki, które pojawią się podczas rzeczywistego kontaktu ze stroną na urządzeniach – odejmą dodatkową przestrzeń. Zwykle zajmują pomiędzy 80 px a 120 px.
Należy to odjąć od wysokości ekranu. 900 px – 120 px = 720 px – to jest ostateczna wysokość projektowanego modułu. Połączenie wszystkich modułów w scroll łączy się w jedną stronę.
W przypadku urządzeń mobilnych obliczenia wyglądają podobnie. Za przykład weźmy iPhone 14 Pro – nowy preset w Figmie ma wymiary 393 px szerokości i 852 px wysokości. Należy pamiętać o odjęciu przestrzeni pasków systemowych i przeglądarki.
Na urządzeniach mobilnych wynoszą one od 80 px do 100 px. 852 px – 90 px = 762 px. W tym wypadku wymiary slajdu wynoszą 393 px x 762 px.
Zastanawiasz się, czym w web designie jest hierarchia wizualna? W projekcie strony internetowej oznacza ważność danej treści czy elementów może być stopniowana przez różne cechy wizualne.
Najłatwiejszym i najczęściej stosowanym sposobem jest skorzystanie z wielkości elementu – im coś jest większe, tym jest ważniejsze w hierarchii. Mniej istotne elementy mogą być bardziej „wyciszone” przez mniej wybijające się kolory lub mniejszy rozmiar tekstu i mniejsze wymiary. Daje Ci to możliwość rozwiązania dylematu, na co użytkownik będzie patrzeć w pierwszej i następnej kolejności, gdy już wejdzie na witrynę.
Rozpocznij od umieszczenia największego, najważniejszego elementu możliwie najwyżej. Wzrok użytkownika będzie przemieszczał się po stronie w dół, w kształt litery F, szukając wskazówek. Z zastosowaniem hierarchii wizualnej zapobiegniesz sytuacji, w której użytkownik poczuje się zdezorientowany i ucieknie ze strony.
Kolejnym, ciekawym sposobem na nadanie elementom określonej hierarchii podczas projektowania jest skorzystanie z negative space. Jest to przestrzeń, która otacza główny element projektu. Stanowi jego tło, dodaje projektowi „oddechu”. Jest to doskonały sposób na wykorzystanie swojej kreatywności.
Wszystkie projekty web designu powinny być stworzone w oparciu o siatkę (grid). Dzięki niej możesz bawić się chaosem, ostatecznie nadając mu porządek. Sprawi to, że Twój projekt będzie nietuzinkowy, interesujący, a przy tym przemyślany.
Przykładowo – możesz "rozsypać" zdjęcia w 12–sto kolumnowej siatce. Pamiętaj, aby za pomocą kolumn zadbać, aby grafika miała określoną szerokość. Stworzenie takiej galerii posiada szereg zalet, np. sprawia, że przechodzisz z wartości absolutnych (konkretny wymiar zdjęcia), na wartości relatywne.
To niezwykle istotne przy responsywności projektu UI – w sytuacji, gdy okno skaluje się w szerokości, to zdjęcie posiada dalej tyle samo kolumn szerokości. To sposób na uzyskanie z pozoru chaotycznego layoutu, który jest przyjemny dla oka. Do dyspozycji masz nie tylko kolumny, ale i przestrzenie pomiędzy nimi. Siatki są istotne z punktu widzenia web developera, odpowiedzialnego za implementację kodu frontendowego.
Projektowanie „na oko” jest niezwykle trudne. Gdy projektujesz bez siatki, dobierasz wielkości na zasadzie “widzimisię”. Siatka sprawia, że kompozycja jest bardziej przemyślana i uporządkowana. Stosowanie gridu przenosi web design na wyższy poziom. Można to porównać do przejścia z zabawy w piasku na zabawę klockami lego – znacznie trudniej jest zepsuć projekt, który jest oparty na siatce.
Jeżeli chcesz dowiedzieć się więcej o stosowaniu gridu, koniecznie dołącz do swojej biblioteki książkę „Systemy siatek” autorstwa Josefa Müllera–Brockmanna. To absolutny must–have dla UI Designerów(ek). Jej treść dotyczy projektowania pod druk, natomiast nie jest to istotne – doskonale ukazuje istotę siatki i jak „wlewać” w nią teksty i zdjęcia, aby uzyskać harmonię projektu. Ta lektura naprawdę zmieni Twój sposób postrzegania layout gridu.
To, co utarło się przez lata w projektowaniu stron, to korzystanie z Lorem Ipsum, aby wypełnić bloki tekstowe. Jeżeli masz już jakieś projekty jako Web Designer(ka), nie możesz pracować z tekstami Lorem Ipsum.
Jeśli zajmujesz się tworzeniem stron już jakiś czas, to z pewnością zdarzyło się, że klient prosił Cię o wykonanie projektu UI informując, że nie ma do niego treści. „Wstaw cokolwiek, ja później dodam treść”.
Taka sytuacja jest niedopuszczalna – wyobraź sobie, że masz zaprojektować gazetę, ale nie masz do niej tekstu. Projektowanie stron internetowych jest uporządkowywaniem już istniejącej komunikacji – nie da się tego zrobić, nie wiedząc o czym są treści.
Jako UI Designer(ka) możesz wziąć udział w ich przygotowywaniu, np. we współpracy z copywriterami(kami) lub UX Writerami(kami). Praca na Lorem Ipsum przypomina trochę tworzenie wydmuszki – nawet nie wiesz, o czym dokładnie jest Twój projekt. Trudne jest, aby w takim przypadku zachować prawidłową hierarchię informacji (patrz punkt 2).
Call To Action, inaczej CTA, to po prostu wezwanie użytkownika do działania. Po co się je stosuje? Przede wszystkim należy sobie zadać pytanie, trudne dla wielu projektantów na początku procesu designu. Po co robię tę stronę? Dlaczego?
Czasem się zdarza tak, że UI Designer(ka) zaczyna projektować stronę, bo ktoś zwyczajnie to zlecił. Nierzadko jest też tak, że klient zapytany o to, po co mu strona odpowie, że jej potrzebuje, bo „wszyscy mają i to jest taka wizytówka”.
Należy pamiętać, że strony zawsze są po coś. Z tego powodu nazywa się je produktami cyfrowymi, a projektantów mianem Product Designera(ki). Charakterystyczną cechą produktów jest to, że do czegoś służą.
Przykładowo – krzesło służy do siedzenia, samochód do przemieszczania się, a strona do... No właśnie – do czego? Dobrze jest to wiedzieć, przystępując do procesu projektowego.
Jako Digital Designer(ka), musisz mieć opanowane podstawy UXa. To ważna gałąź Web Development Designu. To dzięki niemu, w dużej mierze, użytkownicy wiedzą jakie interakcje są dostępne na tworzonej stronie.
CTA to takiego rodzaju wezwanie do akcji, które wciągnie użytkownika głębiej w strukturę strony i zbliży go do celu, który sobie założyliśmy.
Ten cel określany jest mianem konwersji – w przypadku sklepu online może to być dodanie produktu do koszyka lub jego zakup, a w przypadku strony poświęconej jakiejś usłudze – umówienie się na wizytę.
Czym charakteryzuje się dobre CTA? Musi być odpowiednio zredagowane. Musi być przede wszystkim krótkie i możliwe do zeskanowania wzrokiem, ponieważ dzisiejsi użytkownicy Internetu nie czytają.
Po drugie, musi wzbudzać konkretne oczekiwanie – zanim użytkownik kliknie w wezwanie do działania, musi być świadomy, co się wydarzy, a przynajmniej się domyślać.
CTA powinno opisywać dokładnie interakcje, czyli to, co wydarzy się po kliknięciu. Co więcej – musi być zawsze widoczne na stronie. Strona jest dobra tylko wtedy, gdy próbuje użytkownika do czegoś nakłonić.
Użytkownicy podczas jej przeglądania mogą podjąć decyzję – dobra, daję się namówić! To jest kluczowy moment, w którym musi znaleźć sposób na podjęcie interakcji ze stroną. Jeżeli go nie znajdzie, po prostu z niej ucieknie.
Spójrz na to przez pryzmat tych kilku przykładów:
„Model” – Co to znaczy? Co się wydarzy po kliknięciu? → „Zobacz model”
„Zamówienie” – Co z nim? Czyje zamówienie i co się stanie? → „Złóż zamówienie”
„Kliknij tutaj” – No dobrze, ale po co? → „Skontaktuj się”
„Wizyta” – Jaka wizyta? Moja? A może jak wygląda wizyta? → „Umów wizytę”
„Zobacz” – Co mam zobaczyć? → „Zobacz całą kolekcję”
Słowo „więcej” jest w porządku, ale powinno być wykorzystywane w połączeniu z czasownikiem – zobacz, wyświetl, przeczytaj. Więcej znaczy po prostu więcej. W odbiorcy należy wzbudzić oczekiwanie.
Jeśli na stronie wykorzystywane są dwa rodzaje CTA, których wygląd jest taki sam, to za pomocą hierarchii wizualnej, musimy je rozróżnić. To ważne, aby zaprojektowany design oddał wszystkie funkcjonalności strony.
Jeśli oba CTA są identyczne to użytkownik, aby zrozumieć, jakie działanie zbliży go do konwersji, musi je dokładnie przeczytać. Jest to wyjątkowo niekorzystny rodzaj rozwiązania – zwykle, gdy odbiorca musi zacząć intensywnie myśleć, to ucieka ze strony.
W celu lepszego zrozumienia sposobu myślenia użytkownika, polecamy książkę „Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych” Steve Kruga.
Mamy nadzieję, że dzięki temu artykułowi ulepszysz swój Web Design! Pamiętaj, że Toim zadaniem jest stworzenie klientowi strony, która będzie prezentować wszystkie swoje funkcjonalności w sposób zrozumiały i estetyczny dla użytkowników. Jeśli chcesz zrozumieć Web Design jeszcze dogłębniej, koniecznie zakup polecane przez nas książki!
