Przejdź do treści

Projektowanie UI i UX.

Wytrwale projektujemy i testujemy interfejsy by Twoja strona sprawdziła się w każdym scenariuszu.

Badania użyteczności

Zacznijmy od zrozumienia co aktualnie sprawia problem Twoim klientom. Audyt UX pokaże nam co mamy do zrobienia.

To będzie strona dla zupełnie nowej firmy? Sprawdźmy jak podobne funkcje ograła konkurencja i co możemy od razu poprawić.

Makiety blokowe UX

Rozpoczęcie prac projektowych od makiet pozwala na skupieniu się na funkcjach i użyteczności rozwiązań.

Jednocześnie jest to najszybszy sposób by przetestować cały układ i logikę wraz z nawigacją na stronie.

Projektowanie UI

Wygląd to pierwsza warstwa strony, z którą styka się twój klient, jednocześnie jest to podsumowanie wszystkich prac wykonanych na wcześniejszych etapach.

Projektujemy responsywne strony oraz z priorytetem dla urządzeń mobilnych (mobile first).

Jak tworzymy projekty?

Nasz przepis na ponadczasową i skuteczną stronę, to jej przemyślany i przetestowany układ.
Projektowanie UI, to przede wszystkim zadbanie o czytelną nawigację, zwinne i  przejrzyste układy elementów oraz zachowanie poprawnego kontrastu kolorów na stronie (WCAG 2.o). Projektując skupiamy się także na logicznej i łatwej do podążania ścieżce sprzedaży.

Projektowanie blokowe

Najpierw projektujemy układ blokowy – to prosty szkic strony oparty jedynie na elementach blokowych symbolizujących, takie części strony jak menu, przyciski, zdjęcia, teksty i tytuły. Układ blokowy jest fundamentem dobrego projektu. Na tym etapie, jeszcze w oderwaniu od designu możemy skupić się na celach strony i na tym jak będziemy prowadzić Klienta za rękę do celu. Dokładne rozrysowanie układu elementów strony pozwala nam sprawdzić czy strona zawiera odpowiednie elementy do przedstawienia i przekonania odwiedzających.

Dzięki zaprojektowaniu całej ścieżki sprzedażowej możemy sprawdzić, czy układ jest intuicyjny dla użytkowników już na etapie szkicu. Na potrzeby testów wdrażamy klikalne makiety podpinając projekty pod program Invision.

 

Chcesz sprawdzić w praktyce jak korzysta się z klikalnych makiet strony? Poproś nas o wersję demonstracyjną – bez żadnych zobowiązań.

 

Analiza funkcji strony na etapie schematów blokowych pomaga Zamawiającym skupić się na tym czy dane układy są funkcjonalne i proste w używaniu. Pozwala również na analizę układu bez wpływu preferencji dotyczących wyglądu.

Projektowanie UI w wersji finalnej

Na podstawie układu blokowanego projektujemy makietę 1:1 – czyli projekt przedstawiający docelowo wdrożoną stronę.

Kluczem do pięknego designu strony jest dobór typografii, kolorów i stylu elementów, a do tego tak by było spójne z identyfikacją wizualną firmy i obecnymi materiałami graficznymi.

Dla zachowania spójności wszystkich elementów strony tworzymy Style Guide zawierający wizualizacje takich elementów jak nagłówki, linki, dłuższe i krótsze treści, przyciski z wariantami oraz całe segmenty strony.

Wszystkie prace projektowe przeprowadzamy w programie Sketch, a jedną z największych jego zalet są symbole. To rodzaj zmiennej, po zdefiniowaniu np. menu możemy używać tego elementu we wszystkich widokach. A jeśli na etapie poprawek lub zmian przyjdzie zadanie zmiany czegoś w menu, to wystarczy wykonać jedną zmianę by zmiany zaszły we wszystkich widokach.

Zwinne projektowanie w Sketchu zapewnia nam, więc niesamowite możliwości i usprawnienia pracy projektowej. Między innymi:

  • Szybkie, a co najważniejsze konsekwentne zmiany w projekcie. Poprzez używanie symbolów mamy gwarancję, że np. przyciski zaktualizują się z nowym stylem wszędzie. W przypadku nanoszenia zmian ręcznie w dużych projektach z kilkunastoma widokami w wersji na telefon i komputer, bardzo często można zaobserwować niekonsekwencję w poszczególnych widokach. Niekonsekwencja wprowadzania zmian potrafi się nawarstwić i być bardzo problematyczna przy odbiorze projektu przez Klienta, jak również kumuluje godziny na sprawdzanie, komunikacje i poprawki.
  • Proste generowanie widoków na różne szerokości ekranu. Np. dostosowanie widoku aplikacji mobilnej do 10 urządzeń na podstawie gotowego widoku, to tylko kilka kliknięć. Także możemy wygenerować podgląd aplikacji np. na telefonach w rozpiętości 4″ – 6″.
  • Platformę do komentowania projektów i ustalania rozwiązań. Eksportujemy widoki do InVision, w którym prezentujemy gotowe projekty. Komentowanie bezpośrednio na projektach zapewnia nieporównywalny poziom komunikacji i wygodę, oraz pozwala uniknąć mailowania.
  • Tworzenie elementów graficznych w formie wektorowej (svg). Dzięki temu możemy przygotować dla zespołu deweloperów paczkę wszystkich ikon i rysunkowych elementów strony, również w formie sprite svg. Osadzanie elementów wektorowych na stronie zapewnia idealną widoczność szczegółów ikon oraz radykalnie wpływa na szybkość strony, względem grafik w formacie .png. Zapewniamy, więc dobre podstawowy pod wdrożenie.

Zakres projektowania

Specjalizujemy się w projektowaniu sklepów internetowych i wszyskich innych zastosowań stron, których celem jest sprzedaż lub inny bardzo konkretny cel. Np. systemy sprzedaży biletów na wydarzenia czy portal internetowy z nastawieniem na zakładanie kont przez użytkowników.

Czy wiedziałeś, że realizujemy kompleksowo sklepy internetowe?

Czy wiedziałeś, że projektujemy identyfikacje wizualne firmy i inne materiały graficzne?

Audyt UX

Połączmy projektowanie z analityką internetową. Jeśli masz już sklep lub stronę internetową, najpierw sprawdźmy jak teraz użytkownicy korzystają ze strony. Analiza obecnego układu na podstawie tego jak teraz klienci korzystają ze strony, pozwoli na wyciągnięcie dużo lepszych wniosków niż zaczynanie projektu od nowa. Zapraszamy do sprawdzenia oferty audytu UX.

Napisz do chłopaków!

GeekRoom.pl to kreatywny software house tworzący skuteczne rozwiązania z zakresu eCommerce.

Nasz zespół obsługi klienta czeka na Twój ruch.