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 鈥減rezentacji鈥, 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 鈥渄odaj 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 鈥淎bout 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.

Przeczytaj te偶: Tworzenie stron internetowych 鈥 o czym warto pami臋ta膰?

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 鈥淶am贸w produkt鈥, 鈥淶najd藕 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 鈥淐o 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膰 – 鈥淛ak 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