Blog  agencji interaktywnej Honki

Makieta lo-fi - blog Honki Digital Agency – 5

Makiety funkcjonalne serwisów WWW lub aplikacji.

Makiety funkcjonalne serwisów WWW lub aplikacji.

Przygotowanie profesjonalnej strony WWW lub aplikacji nie może obyć się bez etapu przygotowania szkiców lub makiet funkcjonalnych.

Przygotowanie makiet funkcjonalnych.

Użyteczność (z ang. usability), czyli łatwość obsługi serwisu WWW, aplikacji lub jakiegokolwiek produktu ma na celu uzyskanie wysokiej satysfakcji klienta i wywołanie pozytywnych doświadczeń (z ang. user experience). Stanowi ważny element w procesie podejmowania decyzji o ponownym zakupie lub poleceniu produktu. Podczas projektowania serwisów WWW i aplikacji, makietowanie lub prototypowanie ma na celu zniwelowanie kosztów wynikających z wdrożenia rozwiązania, które nie spełnia celu biznesowego i zarazem nie jest przyjazne dla użytkownika. Pamiętaj, że im precyzyjniej zaprojektujesz ścieżkę użytkownika do wyznaczonego celu, tym szybciej zobaczysz zwrot z inwestycji.

Makiety funkcjonalne low-fi i high-fi, przykłady.

Makiety funkcjonalne możesz przygotować w sposób maksymalnie uproszczony tj. lo-fi (z ang. low fidelity mockups) jak też maksymalnie szczegółowy hi-fi (z ang. high fidelity mockups). Decyzja, którą wersję rozwiązania zastosować, należy do Ciebie, ponieważ Ty wiesz najlepiej co będzie najlepsze dla Twojego projektu. Jeśli nie wiesz, możesz się zdać na agencję interaktywną, która będzie wdrażała Twój projekt. Makiety różnią się poziomem szczegółowości w 3 aspektach:

  • projektu wizualnego,
  • treści,
  • interakcji.
Makieta lo-fi blog Honki Digital Agency
Makieta lo-fi blog Honki Digital Agency

Makieta hi-fi blog Honki Digital Agency
Makieta hi-fi blog Honki Digital Agency

Projekt graficzny makiety lo-fi i hi-fi.

W wersji uproszczonej makiety lo-fi projekt graficzny może być wykonany odręcznie na serwetce, kartce, tablicy suchościeralnej (whiteboard) lub w jakimkolwiek programie komputerowym umożliwiającym narysowanie kilku prostokątów. To najczęściej widok kilku najważniejszych elementów, bez szczegółowego opisu. Projekt graficzny makiety w wersji hi-fi zawiera logo projektu, kolorystykę, wstępną koncepcję gridów (siatek), adekwatne do tematyki projektu grafiki oraz nagłówki oraz przyciski z dbałością o ich proporcje i treść. Projekt makiety hi-fi nadaje się do testowania na użytkownikach, ponieważ jest zbliżony do wersji ostatecznej, jaka zostanie na kolejnych etapach prac dopracowana graficznie i oprogramowana.

Projekt treści makiet lo-fi i hi-fi.

Treści w makiecie lo-fi to najczęściej kilka ogólnych nagłówków symulujących miejsca, w których prezentowane będą różne tematy i główne call to action. Wypełniaczem najczęściej stosowanym w tym przypadku jest „lorem ipsum”, która oznacza zupełnie nic. W wersji makiety hi-fi nie ma miejsca na nic nie znaczące wyrazy. Makieta powinna zawierać dokładnie takie teksty, jakie planujesz opublikować i nawigację zgodną z architekturą informacji (strukturą). Jeśli zastanawiasz się skąd je wziąć, spojrzyj na swoją stronę WWW i kopiuj konkretne treści z aktualnej WWW.

Interakcje w makiecie lo-fi i hi-fi.

W przypadku makiet rzadko spotykamy się z interakcjami, ponieważ te typowe są dla prototypów. Jeśli występują, są najczęściej proste, stawiające na umowność i duże uproszczenie.

Oprogramowanie do makietowania.

W zależności od tego, jak złożony jest projekt, takie powinieneś zastosować rozwiązanie. Jeśli projekt jest prosty i decydujesz się na niską jakość, wystarczy jakikolwiek Notatnik z możliwością rysowania – nawet ten dostępny na smartfonie – lub jeden z programów pakietu Office, czyli Power Point lub Word. W przypadku projektu bardziej złożonego powinieneś zapoznać się z oprogramowaniem profesjonalnym, które, jeśli masz smykałkę do grafiki, okaże się całkiem proste do opanowania. Spośród tych najpopularniejszych polecamy:

AXURE – prosty na pierwszy rzut oka program na systemy Windows i macOS, będący niejako ojcem założycielem oprogramowania do makietowania. Łatwy w użyciu ze względu na dużą ilość komponentów i bibliotek gotowych elementów. Jeśli potrzebujesz interakcji, wydaje się bardziej skomplikowany niż konkurencja, ale jak już się nauczysz jego obsługi, pozwala na naprawdę dużo. Minusem i plusem zarazem jest siermiężność wyglądu gotowych elementów. Umożliwia pracę grupową i prezentację projektu online. 

Axure - screen
Axure – strona główna serwisu WWW.

XD – prosty program do przygotowania makiet pochodzący ze stajni ADOBE, którego nikomu nie trzeba przedstawiać. Dostępny na Windows i macOS. Pozwala na przygotowanie makiety, prototypu, a potem płynne przejście do projektowania graficznego, dzięki funkcjonalnościom rodem z Adobe Phothoshop i Illustrator. Znakomicie zintegrowany z Photoshopem pozwala na edycję grafik w sposób bardziej zaawansowany niż u konkurencji. Korzystamy z niego w pracy codziennej. Umożliwia pracę zespołową, łatwy podręczny podgląd projektu i prezentację online.

adobe xd - screen
adobe xd – strona główna serwisu WWW.

Sketch – program stworzony do projektowania interfejsów aplikacji mobilnych, webowych i stron internetowych. Dostępny wyłącznie na komputery z system macOS. Interfejs programu daje się lubić, a makiety przygotowywane w Sketch są za każdym razem „ładne”. Dodawanie interakcji jest tak łatwe jak projektowanie, nie trzeba być programistą, aby je umieścić w projekcie. Korzystamy z niego w pracy codziennej. Jak większość produktów zaadoptowanych przez Apple, działa i się nie zwiesza. Popracujesz na nim samodzielnie i bez problemów w zespole projektowym. 

sketch - screen
sketch – strona główna serwisu WWW.

MIRO – program stworzony do zapisywania pomysłów, myśli, schematów, projektów i makiet na tablicy online (z ang. whiteboard). Zmienione w ostatnich latach miro stawia na styl i wielofunkcyjność. Dostępny online daje swobodę zalogowania się i pracy z każdego miejsca na świecie na dowolnym komputerze. Niestety dostępność wyłącznie online powoduje, że złożone projekty mogą się albo wolno wczytywać albo nie działać płynnie. Biblioteka komponentów i gotowych elementów dla makiet funkcjonalnych jest dość skromna i raczej stworzona jest pod prosty projekt serwisu WWW lub aplikacji. Tak jak wiele narzędzi ma „swój styl”, który nie zawsze pasuje do projektu. Idealny do pracy zespołowej. Konto bezpłatne pozwala na realizację projektu bez większych niedogodności, tak więc testuj go do woli. My wykorzystujemy do opisywania procesów, schematów, mapy myśli i pracy nad architekturą informacji. 

miro - screen
miro – strona główna serwisu WWW.

Makieta funkcjonalna to prototyp.

Wiele osób myli szkice i makiety (z ang. mockups) z prototypami. Makiety i szkice są statyczne i z tego powodu nie są prototypami. Idea symulacji działania interfejsów jest cechą prototypów. Dlatego materiałów statycznych — takich jak szkice, siatki i makiety — nie uznajemy za prototypy. Prototyp służy symulacji działania gotowego produktu. Umożliwia zespołom produktowym testowanie użyteczności i wykonalności ich projektów.

Podsumowanie.

Szkicowanie i makietowanie to nieodłączny element procesu projektowego. Jeśli jesteś właścicielem projektu i zamierzasz go samodzielnie zrealizować, możesz bez problemu naszkicować to, co chcesz w projekcie umieścić. Taki materiał na 100% przyda się każdemu projektantowi lub agencji, aby zrozumieć potrzeby projektowe i poznać Twoje oczekiwania. Jeśli nie masz w planach makietowania, taką pracę powinna wykonać za Ciebie agencja. Jeśli ta wmawia Ci, że ten etap nie jest istotny i podsuwają Ci projekt graficzny pod nos, lepiej zastanów się, czy warto ryzykować pracę z kimś, kto przedkłada formę nad treść. Dobre praktyki i procesy służą uporządkowaniu prac i utrzymywaniu jednego standardu jakości. Odbiór i ocenę makiet najlepiej dokonać odpowiadając sobie na pytania zawarte w Ocena makiet funkcjonalnych serwisu WWW lub aplikacji

Linki do programów:

https://www.axure.com
https://www.adobe.com/pl/products/xd.html
https://www.sketch.com
https://miro.com/online-whiteboard/
https://www.figma.com/prototyping/
https://www.invisionapp.com/cloud/prototype
https://www.mockflow.com
https://www.figma.com/prototyping/
https://www.uxpin.com/