Od wyglądu i funkcjonalności po nawigację i łatwość użytkowania – istnieje wiele elementów, które składają się na stworzenie w pełni funkcjonalnej strony internetowej lub aplikacji. Projektowanie profesjonalnej strony internetowej lub aplikacji to nie tylko tworzenie pięknych i kolorowych stron; to zrozumienie swoich odbiorców i stworzenie modelu, który nie tylko zaspokoi potrzeby klienta, ale także spełni Twoje cele biznesowe. W rzeczywistości, cały proces projektowania może być ekscytującym doświadczeniem, ale jednocześnie może być chaotyczny i frustrujący. Podobnie jak w przypadku tworzenia projektu nowej konstrukcji, faza projektowania rozpoczyna się od stworzenia planu strony internetowej lub aplikacji, który nazywany jest wireframe. Wireframe to podstawowy układ podstawowych elementów projektu w procesie projektowania. Następnie pojawia się prototyp, który jest kolejnym krokiem w tworzeniu makiety, ponieważ ludzie muszą zobaczyć prawdziwą wersję. Prototypowanie skupia się na strukturze strony i jej zawartości.
Co to jest Wireframe?
Wireframe to mało szczegółowa, strukturalna reprezentacja układu Twojego produktu internetowego. Jest to szkielet, który pomaga uporządkować strukturę strony, podobnie jak w przypadku tworzenia planu nowego biura lub budynku. Schemat jest drzewiastym diagramem lub diagramem przepływu witryny, który pokazuje wszystkie jej strony i ich wzajemne powiązania. Daje on programistom i projektantom ogólne pojęcie o tym, jak strona będzie wyglądać. Pomaga im lepiej zrozumieć podstawową funkcjonalność strony lub aplikacji. Każda makieta stanowi wizualne odniesienie, na którym można zbudować każdą stronę, ale zazwyczaj nie zawiera żadnych odniesień do projektu witryny lub jej zawartości. Szkielet składa się z następujących elementów: globalny schemat nawigacji, fragmenty tekstu i mediów oraz projekt interakcji. Wireframe’y służą w zasadzie jako fundament procesu projektowania. Ograniczają się do rysunków ręcznych, ale często są składane przy użyciu programów takich jak Microsoft Visio, Dia czy Gliffy.
Co to jest prototyp?
Prototyp to wczesny model projektowy ostatecznego interfejsu Twojej strony internetowej lub aplikacji z funkcjonalnym UI, bogatymi interakcjami i animacjami. We wczesnym etapie procesu projektowania, klienci muszą zrozumieć jak wszystko jest zorganizowane, a samo patrzenie na makiety nie wystarcza, ponieważ muszą zobaczyć i dotknąć prawdziwego rozwiązania. W tym miejscu pojawia się więc prototyp. Prototyp jest jak makieta lub demo tego, jak będzie wyglądał produkt końcowy, gdy wejdzie na rynek. Prototyp jest jak produkt końcowy, ostateczna reprezentacja Twojej strony internetowej lub aplikacji. Jest jak interaktywna makieta projektu strony internetowej z ograniczonymi klikalnymi wireframe’ami, gdzie w rzeczywistości możesz kliknąć na szkicowe wersje nawigacji i przycisków. Chociaż może nie mieć wszystkich dzwonków i gwizdków ostatecznej strony lub aplikacji, pozwala na interakcję z witryną prawie tak, jakby to był produkt końcowy.
Różnica między Wireframe a Prototypem
Znaczenie
– Wireframe i prototypy to dwa najczęściej produkowane produkty UX, ale często są one ze sobą mylone. Wireframe to uproszczona reprezentacja lub podstawowy układ strony internetowej lub aplikacji. Jest to schemat drzewa lub diagram przepływu strony internetowej, który pokazuje wszystkie jej strony i sposób, w jaki są ze sobą połączone. Prototypy, z drugiej strony, są wczesnymi modelami projektowymi ostatecznego UI Twojej strony lub aplikacji z bogatymi interakcjami i animacjami. Prototyp jest niemal jak ostateczna reprezentacja produktu bez zbędnych bajerów.
Struktura
– Wireframe to zwykły model tekstowy struktury strony internetowej lub aplikacji, podobnie jak blueprint, który reprezentuje szkielet tego samego. Makiety mogą być rysowane ręcznie lub tworzone elektronicznie przy użyciu programów takich jak Microsoft Visio, Dia lub Gliffy, ale w każdym przypadku składają się z linii i tekstu. Projekt wizualny i kolor nie są reprezentowane w makietach. Z drugiej strony, prototyp jest nieco bardziej elastyczny i może zawierać treści lub obrazy. Prototypy mogą być statyczne lub responsywne i mogą być wykonane z papieru lub narzędzi cyfrowych, takich jak axure lub Adobe XD.
Focus
– Zasadniczo wszystkie wireframes są prototypami; w rzeczywistości są to prototypy o niskiej wierności bez dużej ilości szczegółów. Elementy strukturalne, które reprezentują priorytet, są głównym obszarem zainteresowania wireframe. Szkielet ma trzy podstawowe cele; przedstawienie zawartości strony głównej, zarysowanie struktury strony/aplikacji i układu, oraz podkreślenie podstawowych UI. Jednak nie wszystkie prototypy są wireframe. Prototypy służą do wielu zastosowań, takich jak wizualizacja pomysłu, służenie jako schemat dla programistów, ocena wykonalności technicznej lub testowanie efektywności projektu.
Podsumowanie
Wszystkie wireframes są prototypami, ale nie wszystkie prototypy są wireframes. Makiety są prototypami o niskiej wierności, bez dużej ilości szczegółów, co oznacza brak projektu wizualnego lub koloru, tylko linie i tekst. Z drugiej strony, prototyp o wysokiej wierności jest jak interaktywna makieta Twojego projektu internetowego, która wygląda dokładnie tak samo jak produkt końcowy, ale nie zachowuje się tak samo jak produkt końcowy. Jeśli jesteś na wczesnym etapie produktu, prototypy niskiej wierności mogą być skuteczne i szybkie do opracowania. Alternatywnie, jeśli jesteś trochę do przodu w procesie i chcesz przekazać projekt innym, prototyp średniej lub wysokiej wierności będzie lepszym wyborem i prawdopodobnie zostanie dobrze przyjęty przez odbiorców.