Jak stworzyć prototyp strony internetowej

Łukasz Usarz, 24 kwietnia 2020

Około 4 minuty czytania
Udostępnij:  

Prototyp jest szkicowym odwzorowaniem produktu, który chcemy wdrożyć na rynek. To stosunkowo szczegółowy projekt, który poddaje się testom. Ma on określoną wierność, czyli ilość szczegółów i stopień realizmu. Mogą to być tylko szkice elementów produktu w prototypie papierowym – mowa wtedy o niskiej wierności. Natomiast każdy prototyp papierowy można wyposażyć w większą ilość szczegółów i zmienić go w wersję cyfrową , wówczas wierność takiego prototypu automatycznie wzrasta. Najprościej ujmując – im więcej szczegółów tym większa wierność.

Co to jest prototyp?
Prototyp jest szkicowym odwzorowaniem produktu, który chcemy wdrożyć na rynek. To stosunkowo szczegółowy projekt, który poddaje się testom. Ma on określoną wierność, czyli ilość szczegółów i stopień realizmu. Mogą to być tylko szkice elementów produktu w prototypie papierowym – mowa wtedy o niskiej wierności. Natomiast każdy prototyp papierowy można wyposażyć w większą ilość szczegółów i zmienić go w wersję cyfrową , wówczas wierność takiego prototypu automatycznie wzrasta. Najprościej ujmując – im więcej szczegółów tym większa wierność.

Po co tworzymy prototypy i co nam to daje?
Głównym powodem, dla którego tworzymy prototypy jest fakt, że możemy w ten sposób sprawdzić ich funkcjonalność bez zbędnego inwestowania czasu i pieniędzy w rozwój. Pokazujemy ogólną koncepcję użytkownikom i w ten sposób uzyskujemy opinie i wskazówki do dalszego działania, bądź pewnych zmian. Pozwala to wyłapać wiele wad projektowych, którym możemy w porę zapobiec. Oprócz tego, tworzenie prototypu w większym zespole projektowym buduje jedność, ale również podnosi zaangażowanie i kreatywność każdego uczestnika projektu.

Narzędzia do prototypowania
Jedynymi narzędziami niezbędnymi do prototypowania jest kartka i długopis – to w zupełności wystarczy. Oczywiście istnieje jednak kilka narzędzi, które ułatwiają to zadanie. Do dyspozycji mamy różnego rodzaju szablony, dzięki którym z łatwością odtworzymy wszelkie przyciski czy ikony. Kolejną pomocą mogą być gotowe zestawy, gdzie oprócz szablonów znajdziemy różne arkusze i narzędzia, podnoszące wierność naszego prototypu. Innym rozwiązaniem, trochę droższym, ale jednocześnie zapewniającym wysoką wierność są specjalne oprogramowania do projektowania, gdzie wysyłając papierowy szkic prototypu otrzymujemy prototyp cyfrowy.

Od czego zacząć?
Na początku warto zabrać się za stworzenie w krótkim czasie projektu Wirefame, czyli ogólnego szkicu, jak mają zostać ułożone najważniejsze elementy na stronie. Nie jest to konieczne do stworzenia prototypu, jednak bardzo pomoce, gdyż już na etapie najprostszego szkieletu jesteśmy w stanie wyłapać pewne błędy, które na późniejszym etapie jest dużo trudniej poprawić. Zanim jednak przystąpimy do jakiegokolwiek projektowania, powinniśmy zgromadzić informacje na temat użytkowników naszej przyszłej strony – w jakim celu będą z niej korzystać, po jakich ścieżkach będą się poruszać. To daje nam tak naprawdę całą wiedzę, którą potem z łatwością możemy przełożyć na ten pierwszy schemat.

O czym pamiętać pracując nad prototypem?
Kiedy mamy już wstępny plan i przechodzimy do tworzenia prototypu, musimy mieć na uwadze kilka ważnych aspektów. Przede wszystkim należy pamiętać, żeby stworzyć osobny szkic dla każdej wielkości ekranu. Inaczej widzimy układ strony na laptopie, a inaczej na smartfonie. Po drugie zaczynamy od prototypu mobilnego, gdyż później łatwiej będzie nam go skalować i tym samym przenieść na pozostałe urządzenia. Warto też zwrócić uwagę na przygotowanie złożonych szczegółów tworzących efekty, które będzie można dodawać wraz z działaniami użytkownika testującego prototyp, ale również mieć w zapasie dodatkowe ekrany, na wypadek gdyby użytkownik zabłądził, bądź któryś z ekranów po prostu się zgubił. Rozważmy wszystkie możliwe ścieżki podróży, aby być gotowym na każdą ewentualność. Przez cały proces tworzenia prototypu dodawajmy notatki, które będą pomocą dla użytkowników w czasie testów.

Jak przygotować się do testów?
Przed testami warto zaplanować kto będzie miał jaką rolę i odpowiednio się do niej przygotować. Na pewno będzie potrzebna osoba, która wszystko wytłumaczy i poinstruuje użytkowników co mają robić, ale również taka, która będzie odpowiedzialna za przełączanie szkiców ekranów i ich elementów zgodnie z działaniem użytkowników. Dobrze jest zrobić wcześniej próbę takiego testu, żeby każdy na pewno wiedział za co jest odpowiedzialny. Powinniśmy również przygotować się na opinie i sugestie osób, które będą testować nasz prototyp. W tym celu warto wziąć ze sobą jakiś notes, żeby wszystko można było na bieżąco spisywać.

Podsumowując
Stworzenie prototypu strony internetowej jest szybkim i łatwym sposobem aby przetestować wartość swoich planów i koncepcji, zanim zainwestuje się w nie więcej pracy. Pozwala to niejednokrotnie zaoszczędzić sporo czasu i pieniędzy, ale również rozczarowań.

Jak stworzyć prototyp strony internetowej, 24 kwietnia 2020

WRITTEN BY

Łukasz Usarz

CEO firmy Softarea. Ukończył Akademię Górniczo-Hutniczą w Krakowie. Doświadczony software developer. Specjalizuje się między innymi w Node.js i Vue.js.

SOFTAREA

Jesteśmy zespołem studentów skupionych wokół doświadczonego programisty - Łukasza Usarz. Tworzymy prototypy aplikacji mobilnej, artykuły na bloga a także proste elementy graficzne.



Pozostańmy w kontakcie

Gotowy, aby rozpocząć z nami swój kolejny projekt? To wspaniale! Wyślij nam e-mail, a my skontaktujemy się z Tobą jak najszybciej!

© 2020 SOFTAREA