Makiety stron internetowych - jak je projektować i czy warto to robić? Agencja InMarketing
Strona główna » Blog » Makiety stron internetowych – jak je projektować i czy warto to robić?

Makiety stron internetowych – jak je projektować i czy warto to robić?

W tym artykule wytłumaczymy, czym są makiety, jaki jest cel ich tworzenia oraz jak je przygotować. Skupimy się na makietach stron internetowych, ponieważ proces ich produkcji jest niezwykle istotny z dwóch powodów. Po pierwsze, nasz klient musi zrozumieć, co dla niego budujemy. Po drugie, na makietach opiera się nasz Web Developer, który będzie wiedzieć, co ma budować. Naturalnie do stworzenia makiety strony internetowej potrzebujemy narzędzi, dlatego je także omówimy i wskażemy, w które warto zainwestować.

Czym jest makieta?

Makieta jest wizualną prezentacją tego, jak ma wyglądać gotowa strona internetowa. Nie możemy używać losowych tekstów, zdjęć, czcionek czy kolorów. Musimy zaimplementować kolory marki, logo bądź logotyp, wybrany font, zdjęcia oraz opisy sekcji. Kiedy nasza makieta jest już gotowa, możemy przestudiować nasz prototyp i samodzielnie zdecydować, czy chcemy budować dalej. Warto też uzyskać opinię od naszego klienta. Makiety stron internetowych nie należy mylić z wireframe (szkieletem strony). Makieta prezentuje gotowy produkt, natomiast szkielet pozwala zrozumieć, co znajdzie się na stronie i jak będą rozmieszczone wszystkie jej elementy.

Dlaczego warto budować makiety stron internetowych?

Po co marnować na to czas? Nie lepiej od razu zacząć budowanie strony internetowej? Zdecydowanie zalecamy tworzenie makiet przed rozpoczęciem procesu budowy strony internetowej i już tłumaczymy, dlaczego jest to tak istotne.

Oszczędzamy czas

Proces tworzenia strony internetowej potrafi być czasochłonny, w szczególności, gdy pomijamy pewne kroki w produkcji. Naturalnie musimy wiedzieć, czego oczekuje klient, ale – klient nie zawsze wie, czego potrzebuje 🙂 Drużyna kreatywna obmyśla więc rozwiązanie i wybór pada na sklep e-commerce. Klient jest zadowolony i zgadza się na rozpoczęcie pracy. Nasz Web Developer zaczyna budowę i po jakimś czasie produkt jest gotowy, by ruszyć w świat. Przychodzi moment spotkania z klientem i okazuje się, że jest on niezadowolony z produktu. Jedynym rozwiązaniem jest jest jego przebudowanie i podjęcie kolejnego ryzyka – bo niestety jest szansa, że efekty znów nie będą satysfakcjonujące. 

Po co tracić nerwy? Wystarczy zbudować makietę, którą możemy szybko edytować i sprawniej dostosowywać się do wymagań klienta!

Interaktywna makieta

Dedykowane narzędzia do tworzenia makiet posiadają tak zwane opcje “prezentacji”, które pozwalają na stworzenie imitacji interakcji, tak jak na prawdziwej stronie internetowej. Wytłumaczymy ten proces na prostym przykładzie, a celem będzie przedstawienie ruchu klienta po sklepie internetowym. 

Wyobraź sobie proszę sklep internetowy, który handluje butami. Zawiera on trzy strony – stronę z listą produktów, wnętrze jednego produktu z opisem oraz koszyk. Twórca prototypu może utworzyć interakcję pomiędzy makietami, dzięki czemu kliknięcie w produkt załaduje makietę wnętrza tego produktu, a przycisk “dodaj do koszyka” zabierze nas do koszyka. W ten prosty sposób pokazaliśmy klientowi, jak będzie wyglądać jego sklep oraz jak potencjalny klient będzie się w nim przemieszczać. 

Możemy eksperymentować

Nie musimy od razu budować prototypu całej strony internetowej. Możemy zacząć od makiet pojedynczych stron i stworzyć na przykład trzy prototypy dla strony “About us”, a następnie przedstawić je klientowi. Wówczas będzie on mógł wybrać to, co najbardziej mu odpowiada lub dać znać, że musimy postarać się bardziej. Cały proces tworzenia pojedynczych makiet jest prosty i nie zajmuje dużo czasu. 

Zbieramy opinie

Wszyscy się zgodzą, że feedback jest istotny. Pomaga nam budować, ulepszać i zmieniać. Prosty prototyp może być testowany nie tylko na kliencie, nawet nasi współpracowicy z biurą mogą wspomóc cały proces. Proste zadania typu “Zamów produkt”, “Znajdź stronę z kontaktem i wyślij nam e-mail” pozwalają projektantowi sprawdzać, ile kliknięć jest potrzebnych, by gdzieś dotrzeć, czy zawartość jest czytelna lub czy może projekt jest tak dziwaczny, że próbuje on na nowo wynaleźć koło. 

Naturalnie zdarzają się sytuacje, kiedy nasz pomysł zostaje wdeptany w ziemię i wiążą się z tym przykre emocje. Nie przejmujcie się, wyciągajcie wnioski i adaptujcie się do wymagań.

Jak uczyć się projektowania?

Skoro wszyscy już wiemy, czym są makiety dla stron internetowych, czas porozmawiać o tym, jak rozpocząć przygodę z ich projektowaniem.

Przygotowanie

Najbardziej podstawową zasadą podczas każdego procesu twórczego jest przygotowanie. Czego będzie potrzebować nasza makieta? Loga bądź logotypu, kolorów, czcionek, przycisków oraz, biorąc pod uwagę cały proces tworzenia stron internetowych, szkieletu tej strony. Radzimy Ci podejść do tego etapu pracy bardzo skrupulatnie. Nie ma nic bardziej irytującego niż ciągłe odrywanie się od procesu tworzenia, bo nie zapisaliśmy, jak wielki ma być nasz font lub logo nie pasuje do czarnego tła.

Budujemy

Podobnie jak z matematyką, nie nauczymy się niczego przez samo czytanie, musimy budować. Zapewne pojawiło się pytanie “Co mam budować, jak nie mam klienta?”. Nic nie szkodzi. Od tego jest nasza wyobraźnia. Zapisz dwa pomysły na nową stronę  internetową i rzuć monetą – niech przeznaczenie zdecyduje! 🙂

Nie musisz na nowo budować koła

Musisz pogodzić się z faktem, że wiele świetnych pomysłów zostało już opracowanych i będzie niezwykle ciężko wymyślić coś unikalnego. Nie przejmuj się tym, bo cała ta sytuacja da ci więcej siły niż słabości. Jak mówiłem, wiele rzeczy zostało już opracowanych, a to daje nam możliwość szukania inspiracji i opierania naszych projektów na już istniejących stronach internetowych. Każdy sklep internetowy potrzebuje wyszukiwarki, nie ma też prawa funkcjonować bez opcji filtracji artykułów… Można by wymieniać bez końca. 

Skąd mam wiedzieć, co spodoba się użytkownikowi?

Na to pytanie odpowiada inna nauka, związana z projektowaniem dla użytkownika, czyli tak zwany User Experience. Czym jest User Experience? Wszystko można szybko wytłumaczyć – “Jak budować produkty multimedialne, by nasi użytkownicy nie uciekli do konkurencji po kilku sekundach od wejścia”. Jeśli jesteś zainteresowany/na pogłębieniem wiedzy na temat UX, zapraszamy tutaj.

Boję się negatywnych opinii

Nie ma się czego bać! Zdecydowanie gorsze niż zły feedback jest zupełny jego brak. Zrozum, że w branży kreatywnej nie raz usłyszysz negatywną opinię odnośnie swoich kreacji. Zagryź zęby i wysłuchaj, co inni mają do powiedzenia, a następnie wyciągnij wnioski i kontynuuj swoją pracę.

Makiety stron internetowych – narzędzia

Nie możemy budować niczego bez odpowiednich narzędzi. Można powiedzieć, że prototyp wykonamy w jakimkolwiek programie graficznym (nawet legendarny Paint podoła temu zadaniu). Jednak pozostaje zadać sobie pytanie, po co męczyć się z programami, które nie są przystosowane do tego rodzaju zadań? Prezentujemy naszym zdaniem najlepsze narzędzia do pracy z prototypami.

Adobe XD

Prosto ze stajni Adobe, stworzony do produkcji szkieletów stron internetowych oraz ich prototypów. XD pozwala na współpracę kilku osób nad jednym projektem. W grupie zawsze raźniej. Wcześniej wspomniałem też o możliwościach imitacji interakcji. XD idzie o krok dalej i pozwala nam dodawać animacje do naszych prototypów.

Jeśli się postaracie, istnieje możliwość, że klient uzna Wasz prototyp za gotową stronę (tak, zdarzyła nam się taka sytuacja). Oczywiście perfekcyjny produkt nie istnieje, a wadą XD jest jego cena. Jeśli postanowimy zainwestować w Adobe dla zespołu, musimy liczyć się z kosztem co najmniej 100zł na miesiąc.

Figma

W przeciwieństwie do XD, Figma jest narzędziem webowym (działa w przeglądarce) i nie pożera w całości ramu naszej maszyny, tak jak robi to Adobe. Figma jest bardzo podobna do XD jeśli chodzi o możliwości, bo możemy pracować w drużynie, rysować wektory i prototypować. Społeczność Figmy regularnie uzupełnia bazę wtyczek, które jeszcze bardziej mogą ułatwić nam pracę. Gadżety, takie jak diagramy czy wskaźniki, są dostępne, aby nam pomóc. Figma zdecydowanie lepiej prezentuje się pod względem ceny, bo za jednego edytora zapłacimy 60 zł, a za cały zespół trochę poniżej 200 zł.

Źródła

Patryk jest naszym specjalistą PPC, który także zajmuję się analizami UX oraz projektami stron WWW, we wszystko wkłada 101% swoich sił. Świetnie zorganizowany, co więcej spragniony wiedzy. Absolwent Duńskiej uczelni Business Academy Aarhus. Jego zainteresowania zawodowe skupiają się na projektowaniu UX, zwinnych metodach zarządzania projektami oraz płatnymi reklamami w systemie Google. W wolnym czasie Patryk poświęca się swojej największej pasji, czyli modelarstwu, którym zajmuje się od ósmego roku życia. Patryk gra także w gry komputerowe, jego ulubionym gatunkiem są gry RPG.

LEAVE A COMMENT