Czym jest projektowanie stron internetowych? 🖌️
Web design to proces tworzenia stron internetowych, czyli web development, UI i UX design. Każdy z tych elementów to oddzielna specjalizacja.
UX (user experience) to użyteczność interfejsów. Nie wymaga znajomości kodowania. UI to projektowanie aplikacji i stron od strony graficznej.
Wykorzystuje się do tego programy graficzne (Photoshop) lub w dedykowane aplikacje do projektowania makiet (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 merytorycznych poradników. Wiadome jest jedno: końcowy produkt powinien być estetyczny i funkcjonalny. A to zależy od naprawdę wielu czynników!
W sieci na różnych stronach często pada stwierdzenie „naucz się analizować pracę innych”. Okej, zależności, jakie dostrzeżesz w cudzym projekcie mogą okazać się bardzo edukacyjne. Fakt, do odnalezienia źródeł inspiracji wystarczy wyszukiwarka Google.
Nam jednak zależy, aby przedstawić triki, które będziesz w stanie wprowadzić w swój proces web designu od zaraz.
I już. Temacik rozwijam w dalszej części artykułu.
1. Podziel stronę internetową na moduły ✂️
Kiedy jeszcze nie było Internetu, designerzy zajmowali się głównie drukiem. Wersje do druku (w tym tekst, logo i grafika) były rozplanowywane na kartkach papieru.
Wykorzystywano do tego formaty ze sztywno wyznaczonymi proporcjami. Przykładowy projekt rysowano na formacie A4.
Teraz zagadka: jaki format ma strona internetowa?
.
.
.
.
.
Tak jest. Zwykle jest to długi, pionowy scroll, który ciągnie się w dół.
Responsive web design – elastyczność stron www 🤸
W zależności od urządzenia, strona będzie się inaczej wyświetlać.
Przeglądając stronę internetową, użytkownik nie będzie jej widział jako jednego, długiego scroll. Zobaczy właśnie te konkretne moduły 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ę pionowo.
Ważne, aby myśleć o poszczególnych modułach, jak o takich slajdach w prezentacji. Końcowa 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.
Web development design – jak dobrać rozdzielczość modułu strony internetowej? 📏
Jeżeli chodzi o 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żesz 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.
Pamiętaj 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.
Teraz odejmij to 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. Pamiętaj 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 to 393 px x 762 px.
2. Stosuj hierarchię wizualną w pracy 🪴
Zastanawiasz się, czym w web designie jest hierarchia wizualna?
W projekcie strony internetowej 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ę.
Projektowanie stron www – jak zastosować hierarchię wizualną? 🤔
Rozpocznij od umieszczenia największego, najważniejszego elementu tak wysoko, jak się da.
Wzrok będzie przemieszczał się po stronie w dół, w kształt litery F, szukając wskazówek.
Dzięki 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.
3. Kontroluj chaos za pomocą siatki 🕸️
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.
To sposób, aby uzyskać projekt nietuzinkowy, interesujący, a przy tym przemyślany.
Jak wykorzystać grid w web designie? ⚒️
Przykładowo – możesz "rozsypać" zdjęcia w 12–sto kolumnowej siatce. Pamiętaj, aby za pomocą kolumn zadbać o określoną szerokość grafiki.
Tak stworzona galeria pozwala na przejście z wartości absolutnych (konkretny wymiar zdjęcia) na wartości relatywne.
To mega istotne dla responsywności projektu UI – w sytuacji, gdy okno skaluje się na szerokość, to zdjęcie posiada dalej tyle samo kolumn. Dobry 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.
Dlaczego ważne jest, aby korzystać z siatki? 👀
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, serio, zmieni Twój sposób postrzegania layout gridu.
4. Nie używaj Lorem Ipsum ❌
To, co utarło się przez lata w projektowaniu stron, to korzystanie z Lorem Ipsum, aby wypełnić bloki tekstowe.
Masz już jakieś projekty? Pliska, nie pracuj na tekstach 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.
Współpraca podstawą web designu 🤝
Jest jednak rozwiązanie! Jako designer możesz wziąć udział w ich przygotowywaniu, np. współpracując z copywriterami ub UX writerami.
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).
5. Stosuj Call To Action 🔈
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. Po co robię tę stronę? Dlaczego?
Czasem się zdarza tak, że UI designer zabiera się za projektowanie, 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”.
Pierwszym krok: zrozumienie celu strony 🌟
Pamiętaj, że strony zawsze są po coś.
Z tego powodu nazywa się je produktami cyfrowymi, a projektanta mianem Product Designera. Charakterystyczną cechą produktów jest to, że do czegoś służą. I to nie jest rocket science.
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ć już na początku procesu projektowego.
Dbaj o użyteczność stron internetowych ✔️
Jako Digital Designer, usisz mieć opanowane podstawy UX.
To bardzo ważna składowa web development designu. To dzięki niemu, w dużej mierze, użytkownicy wiedzą jakie interakcje są dostępne na stronie.
CTA to takiego rodzaju wezwanie do akcji, które wciągnie użytkownika głębiej w strukturę strony i zbliży go do konwersji.
Konwersja to pożądane działanie podejmowane przez użytkownika – dla sklepu online może to być dodanie produktu do koszyka lub (jeszcze lepiej) jego zakup. W przypadku strony poświęconej jakiejś usłudze – umówienie się na wizytę.
Wezwanie do działania w praktyce ☝️
Czym charakteryzuje się dobre CTA? Musi być odpowiednio zredagowane.
Przede wszystkim: krótkie i możliwe do zeskanowania wzrokiem, ponieważ dzisiejsi użytkownicy nie czytają. Nikt nie ma na to czasu.
Po drugie, musi wzbudzać konkretne oczekiwanie – zanim użytkownik kliknie w wezwanie do działania, musi być świadomy, co się wydarzy. A przynajmniej powinien się domyślać.
CTA jako narzędzie projektowania 🪛
CTA powinno dokładnie opisywać 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 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 ucieknie.
Spójrz 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.
Zaprezentuj CTA w odpowiedni sposób🎖️
Jeśli na stronie wykorzystujesz są dwa rodzaje CTA, których wygląd jest taki sam, to za pomocą hierarchii wizualnej, musisz 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 niekorzystne – 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.
Dalej Ci mało? 🎧 Posłuchaj podcastu z Tomem Biskupem, który mówi kompetencjach na rynku pracy w web designie.
