Web Design i praca z mock-upami. Wireframes Wordpress Development

Wyobrażenie o końcowym efekcie pracy designera projektującego layout strony internetowej może się znacznie różnić z punktu widzenia wykonawcy i zamawiającego. Szczególnie w przypadku małych projektów estymowanych godzinowo, często brakuje czasu na robienie szczegółowych makiet, wireframes i szczegółowe omawianie koncepcji. Jednak także w przypadku takich projektów zamawiający powinien już na wstępny etapie otrzymać przybliżoną wizualizację widoków docelowej aplikacji i elementów dostępnych w bibliotece wtyczek/szablonu w przypadku komercyjnych motywów. W ten sposób wykonawca może ograniczyć liczbę poprawek do projektu i już na wczesnym etapie wykryć problemy z różnicą oczekiwań obu stron dotyczącą wyglądu działającej produkcyjnie aplikacji.

Dzięki programom do prototypowania takim jak Adobe XD i Figma designer jest w stanie zwizualizować klientowi wygląd poszczególnych widoków aplikacji. Makieta znacznie ułatwia zdalną pracę nad projektem, umożliwiające łatwe komentowanie wybranych elementów i wprowadzanie poprawek. Oprogramowanie nie jest drogie, a w przypadku używaniu jednocześnie jednego projektu, może być nawet darmowe.

Przykład zlecenia

Klient zlecił stworzenie responsywnej strony internetowej z systemem zarządzania treścią i widokami: strona główna, oferta, kontakt. Layouty tworzone za pomocą funkcji “podnieść i upuść”. Hamburger menu na wszystkich wielkościach ekranów. Wygląd ma być nowoczesny, oryginalny (jeżeli można tak powiedzieć o stronie zrobionej z szablonu).

Wybrana technologia

Wordpress: Szablon Salient – Responsive Multi-Purpose Theme + WPBakery Page Builder

Czas wykonania strony w wersji produkcyjnej: 14 dni

Wykorzystane narzędzie do prototypowania: AdobeXD

Etap 1: Koncepcja

W projekcie największe znaczenie będzie miał wygląd strony głównej. Proces tworzenia widoków warto rozpocząć od ustalenia listy pojedynczych elementów, które mają się znaleźć na stronie. W tym przypadku klient chce, aby na stronie głównej znalazły się:

• baner z przyciskiem wzywającym do działania (CTA) typu: “Zamów”, Sprawdź” i krótkim tekstem;
• sekcja z ikonami pokazująca poszczególne segmenty działalności firmy i przekierowaniem na docelową podstronę oferty
• sekcja z 8 logotypami klientów
• sekcja z 4 realizacjami w portfolio (grafika + tekst)
• sekcja z modułem blogowym
• zdjęcie z efektem hotspotów, które klient znalazł w bibliotece szablonu: link
• stopka z kontaktem 
   

Etap 2: Prototypowanie

Po przygotowaniu listy elementów pora na stworzenie prototypu. W tym przypadku skorzystam z popularnego programu AdobeXD. Chcę uniknąć dużej liczby poprawek i zamknąć projekt w maksymalnie dwóch iterakcjach, więc tworzenie widoków rozpocznę od szkicu layoutu (wireframe). W ten sposób uniknę straty czasu na układanie elementów w gotowej aplikacji, których ustawienie klient później zakwestionuje. Prototyp znacznie skraca czas oddania końcowej wersji, ponieważ już na wczesnym etapie znacznie niweluje margines poprawek i właściwie do rozstrzygnięcia pozostawia kwestie dotyczące kolorystyki, wyglądu elementów i docelowych grafik.

W omawianym przypadku makieta wyglądała tak:

Etap 3: Poprawki

W przygotowanej makiecie nie było wiele zmian, ale klient dodał komentarze do kilku elementów, w części punktów sam zawarłem także sugerowane animacje komponentów. Dzięki temu klient mógł łatwiej wyobrazić sobie efekt finalny. Docelowe widoki będą budowane za pomocą gotowych elementów szablonu i wtyczki, aby końcowy projekt był opłacalny należy pamiętać, że czas zajmie jeszcze skonfigurowanie formularzy kontaktowych, przeniesienia bazy i plików na serwer klienta, a także konfiguracja podstawowych elementów SEO. Web design i makieta to tylko jeden z elementów całości projektu. 
Na mojej makiecie zamieściłem najważniejszy nagłówek H1 i nagłówki H2 w ofercie – na stronach wizytówkach klienci zwykle chcą się pozycjonować na frazy w swojej ofercie.

Etap 4: Web Development - Wdrożenie

W moim przypadku klientem było moja spółka, projekt od A do Z wykonałem samodzielniem, a makiety oceniał wspólnik i grupa znajomych. To znacznie ułatwiło komunikację, ale podobnie można poprowadzić każdej projekt z wykorzystaniem gotowych edytorów podobnych do WP Page Bakery. Zrobiłem jedynie makietę strony głównej, resztę podstron pokazałem od razu na działającym linku. Strona główna z biegiem czasu zmieniła kilka elementów, ale układ pozostał niezmienny.

Czy takie przeprowadzenie prostego projektu gwarantuje sukces zlecenia? Na pewno nie, ale często ułatwia i przyspiesza tempo web developmentu, nie generując przy tym wysokich kosztów.