Pamiętasz jeszcze czasy sprzed ery Responsive Web Design? Kiedy wystarczyło wyrysować w Photoshopie stronę o określonych wymiarach, pociąć na „plasterki” i zakodować dla najczęściej spotykanej rozdzielczości ekranu. Dziś praca nad projektem strony wygląda trochę inaczej.

Z tego tekstu dowiesz się:

  • jakie zasady User Experience warto stosować niezależnie od projektu strony,
  • gdzie szukać fajnych inspiracji do własnego projektu,
  • o czym musisz pamiętać, by Twój projekt był spójny i zgodny z dobrymi praktykami.

Zbierz narzędzia i dane do projektu

Zanim przystąpisz do szykowania poszczególnych elementów projektu strony, zastanów się, czego potrzebujesz. Wejdź w rolę UX designera i zaplanuj ścieżkę użytkownika. Aby to zrobić, wystarczy Ci kartka i ołówek. No, może kilka kartek. Jedna na każdy ekran, który przybliży użytkownika do celu. 

Jeśli potrzebujesz wsparcia na tym etapie, pomocne mogą być notesy, które mają wstępnie nadrukowany „interfejs” przeglądarki, takie jak te od UX notes. Spójrz krytycznym okiem na swój plan. Dokonaj niezbędnych korekt, żeby na Twojej stronie znalazło się jak najwięcej dobrych praktyk UX. 

O jakich dobrych praktykach mówimy? 

W artykule User Experience – jak zaprojektować stronę www pisałam, że UX designer nie zajmuje się graficznym projektem stron. Wykonuje natomiast szereg testów i zbiera informacje, które pozwalają zaprojektować doświadczenie użytkownika. Jego zadaniem jest rozwiązać problem. 

Jeśli projektujesz lub zlecasz projekt strony www, powinieneś przynajmniej częściowo „wejść w skórę” projektanta UX. Nawet jeśli nie masz doświadczenia na tym polu, możesz korzystać z 5 prostych zasad, które z pewnością pomogą Ci w pracy nad projektem. 

  1. Słuchaj swoich użytkowników, zbierz o nich jak najwięcej informacji.  
  2. Nie podążaj ślepo za trendami, w internecie ich „życie” jest wyjątkowo krótkie. 
  3. Projektuj kolejne kroki użytkownika, a nie ładne ekrany. 
  4. Rozważaj każdą możliwość, bądź otwarty na ulepszenia i zmiany.
  5. Projektuj tak, by korzystanie z Twojej witryny było naturalne i intuicyjne, wykorzystaj moc sprawdzonych rozwiązań. 

Pamiętaj, że użytkownicy internetu zwiedzili już niejedną stronę. Gdyby każda z nich operowała nowymi dla nas elementami, przeglądanie internetu mogłoby być zniechęcającym wyzwaniem. Zresztą wystarczy, że spojrzysz, ile może być wariantów ikonek menu:

Tutaj grafika inspirowana tym: https://www.instagram.com/p/CPsiHmNNN92/?utm_source=ig_web_copy_link

Jak temu zaradzić? Rozwiązaniem jest korzystanie ze sprawdzonych wzorców projektowych. Dzięki nim będziesz „mówić” do swoich odbiorców w znanym im języku (wizualnym). Zanim więc zaczniesz projektować zaokrąglone buttony czy ikonki w stylu flat, koniecznie zapoznaj się z wytycznymi projektowania pod konkretne platformy:

Strona z wytycznymi do projektu stron i aplikacji na iOS
Platforma z wytycznymi dla projektujących z myślą o użytkownikach urządzeń Apple

Choćby pobieżne spojrzenie na nie, pomoże Ci zdać sobie sprawę z tego, jak wiele składowych musisz zaprojektować. Zachęcam Cię, byś traktował je jako ściągawkę, która zaoszczędzi Twój czas i pomoże uniknąć błędów. 

Skąd czerpać (najnowszą) wiedzę z zakresu UX/UI? 

Jeśli chodzi o UX i UI design, najnowszą wiedzę znajdziesz w internecie. Dlaczego tak ważna jest tutaj „świeżość”? Cóż, internet ciągle się zmienia, wciąż prowadzone są nowe badania, pojawiają się nowe urządzenia i problemy. Dlatego jeśli lubisz czytać książki, wybieraj te z psychologii czy socjologii, które pomogą Ci poznać lepiej człowieka. Projekt strony powinien być jak najbardziej „nowoczesny”.

UX-u ucz się z sieci. Na początek polecam Ci regularną lekturę portali: AIGA, Smashing Magazine. Najnowsze trendy z kolei szybko pojawiają się na Dribbble i Behance. To portale, które gromadzą naprawdę dobrych projektantów. Możesz też zaglądać na Awwwards, to portal, na którym nagradzane są naprawdę inspirujące projekty stron.  

Projekty stron na platformie dribbble.com
Dribbble to platforma zrzeszająca świetnych projektantów

W mediach społecznościowych też możesz znaleźć ciekawe źródła wiedzy. Codzienną porcję wskazówek dostarczają na przykład konta z Instagrama: uxswipe, uiuixdailytips czy fullstackhq.  

O czym pamiętać robiąc projekt strony? 

Trendy na bok, postaw na funkcjonalność i wydajność. Nie żartuję. Estetyka to tylko wisienka na torcie, jeśli chodzi o projekt strony. Nawet najpiękniejsza strona, która zbyt długo się ładuje lub po prostu nie osiąga celu (np. nikt nie zapisuje się na newsletter), kwalifikuje się do poprawy. To dlatego tak ważne są: research i planowanie. 

Co się tyczy samego graficznego projektu strony, jest kilka bardzo ważnych zasad, których powinieneś się trzymać. 

  1. Projektuj całość, a nie pojedyncze ekrany. Pamiętaj, że Twoja strona musi tak samo dobrze sprawdzać się na dużym ekranie monitora i niewielkim ekranie smartfona. 
  2. Pamiętaj o nawigacji – ma być łatwa do znalezienia, intuicyjna w użyciu i czytelna. 
  3. Ogranicz zawartość strony do niezbędnych elementów. Wszystko inne to rozpraszacze (nawet, jeśli są ładne). 
  4. Pamiętaj o wydajności. Nic tak nie zniechęca do korzystania z internetu jak wolno ładująca się strona. Każdy element graficzny zaplanuj tak, żeby nie obciążać transferu. 
  5. Zadbaj o to, by ta najważniejsza rzecz przyciągała oko użytkownika, nic innego nie może walczyć o jego uwagę. Zatem na jednym ekranie ma się znaleźć ta jedna, najważniejsza rzecz, wyraźna i umożliwiająca szybkie dotarcie do celu. 
Strona awwwards z najlepszymi projektami stron
Awwwards to platforma, która nagradza najlepsze projekty stron

Skuteczny sposób na projekt strony

Nietrudno zachwycić się projektami stron www. Pamiętaj jednak, że to, co robi wrażenie na Instagramie, niekoniecznie przekłada się na funkcjonalność i dobre doświadczenie użytkownika. Przeglądając inspirujące projekty, szukaj w nich rozwiązań, które dyskretnie, ale skutecznie, pomagają osiągnąć cel.

Gdzie szukałeś inspiracji do projektu swojej strony? Podziel się z nami swoimi doświadczeniami w komentarzu.

>
Monika Suchodolska
Od blisko 4 lat związana z czasopismem Grafmag. Projektuje, ilustruje i pisze (najczęściej o reklamie). Miłośniczka dobrej kawy, książek i kotów.

2 odpowiedzi na "Gdzie szukać inspiracji do projektu strony www?"

  1. agrodane pisze:

    Na pewno warto szukać inspiracji u konkurencji 🙂 Zawsze warto być o ten jeden krok z przodu 😉

  2. Moto Trasa pisze:

    Ja porównuję nie z bezpośrednią konkurencją.
    Np layout można wziąć od aplikacji które wykładają na designerów grube dziesiątki tysięcy. Nie trzeba wymyślać koła na nowo, spójrz co robi Spotify, Netflix lub chociażby audioteka i masz wzór na mobile friendly stronę z UX level master 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *

Polecane dla Ciebie

Szukasz dalej?