WEB DESIGN I PRACA Z MOCK-UPAMI – PROTOTYPOWANIE PROSTYCH WIDOKÓW APLIKACJI

By 27 lutego 202021 sierpnia, 2020Dedykowane oprogramowanie, Web 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.

<- Kliknij w sowę, aby zobaczyć finalny efekt strony głównej.

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.

Web Development Software House Boring Owl Site
Tomasz Kozon

Autor Tomasz Kozon

Zajmuję się projektowaniem aplikacji i serwisów internetowych. Posiadam wiedzę i doświadczenie z zakresu: programowania, Marketing Automation, kampanii w Social Media, SEO, SEM, kampanii mailingowych i copywrittingu. Obecnie kieruję własną spółką (software house/agencja marketingowa) i organizacją non-profit. Rozwijam start-upy, programuję i zarządzam projektami zintegrowanych kampanii marketingu w wielu kanałach on-line.

Więcej wpisów od Tomasz Kozon