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.
