Wireframing i storyboarding to popularne techniki, które są wykorzystywane w cyklu życia aplikacji internetowych od dłuższego czasu. Na cykl tworzenia stron internetowych składa się wiele czynników. Istnieje kilka różnych czynników, które przyczyniają się do ogólnego doświadczenia użytkownika. Załóżmy, że korzystasz z aplikacji do robienia zakupów online. Twoje doświadczenie może być zrujnowane przez wiele czynników, na przykład, nieprzyjazny UI, małe czcionki, responsywność, każdy z nich przyczynia się do projektowania UX. Wireframing i storyboarding są proponowanymi technikami, które są stosowane we wczesnym etapie procesu, tak aby mogły pomóc w zmniejszeniu ryzyka w późniejszym etapie procesu, jednocześnie oszczędzając dużo czasu w całym procesie. Jednak wireframing jest często mylony z storyboardingiem ze względu na ich podobny charakter i cel.
Co to jest Wireframe?
Wireframe jest schematem strony, szkicem Twojej witryny zanim jakikolwiek element rozwoju lub projektowania zostanie na niej umieszczony. Jest to w zasadzie wizualna reprezentacja układu Twojej strony bez wymyślnych elementów, takich jak kolory, czcionki, cieniowanie, lub po prostu każdy inny element projektu, który czyni Twoją stronę atrakcyjną wizualnie i interaktywną. Wireframe jest rodzajem pralnianej listy tego, co wchodzi na każdą stronę z perspektywy mediów i treści. W zasadzie masz szkic swojej strony internetowej i ważnych elementów zarysowanych w kształtach, pudełkach, liniach, kolorach, ale tylko w skali szarości, aby utrzymać go tak prostym, jak to możliwe. Podobnie jak w przypadku tworzenia planów nowego budynku lub biura, wireframes są planami dla Twojej strony internetowej, pokazującymi jak każda ze stron łączy się ze sobą. To daje ci pomysł, jak strona będzie wyglądać, gdy jest zrobione. Wireframing jest ważną częścią cyklu życia web designu, który pozwala ustalić hierarchię informacji na stronie internetowej lub stronie internetowej.
Co to jest Storyboard?
Podobnie jak wireframes, storyboard jest również planem dla projektu web designu lub prototypem dla Twojej aplikacji, który mapuje wszystkie komponenty Twojej strony i jak są one połączone. Storyboard to rodzaj zaawansowanego wireframingu tworzonego na kartce papieru za pomocą ołówka lub programu graficznego na komputerze. Jest to wysokopoziomowy zarys zamierzonych rezultatów modułu, takich jak na przykład, jak zacząć organizować informacje, wymyślając przepływ strony internetowej, zanim zaczniesz martwić się o elementy projektu strony, takie jak kolory, czcionki, itp. Storyboard to zbiór obrazów o niskiej wierności, które mogą być używane do tworzenia makiet ekranów aplikacji. Storyboardy są prostymi szkicami i opisami tego, co dzieje się gdzie, gdy użytkownik przechodzi dalej w głąb aplikacji i zaczyna wchodzić w interakcje z elementami. Storyboardy to sposób na określenie, czy wszystko idzie dobrze i w dobrym kierunku.
Różnica między Wireframe a Storyboardem
Znaczenie
– Wireframe i storyboardy to dwa najczęściej tworzone produkty UX, które często są ze sobą mylone. Schemat jest podstawową, obrazkową reprezentacją Twojej strony internetowej lub aplikacji, która pokazuje, jak każda ze stron jest ze sobą połączona. Jest to raczej lista tego, co znajdzie się na każdej stronie z perspektywy mediów i treści. Storyboard jest bardzo podobny do wireframe, z wyjątkiem tego, że jest to zaawansowany wireframing stworzony podczas początkowego procesu badawczego na tablicach. Oba są równie ważne i odgrywają swoje role w ogólnym cyklu rozwoju strony internetowej.
Struktura
– Schemat jest liniową reprezentacją struktury strony internetowej, rodzajem makiety tego, jak będzie wyglądać rzeczywista rzecz. Jest to bardziej liniowe podejście do planowania całego układu strony internetowej, jak szkieletowa reprezentacja lub ramy tego, co wchodzi na każdą stronę. Storyboard jest dość podobny do wireframes, gdzie oba mapują wszystkie elementy strony internetowej. Jednak storyboard jest bardziej szczegółową reprezentacją, wysokopoziomowym zarysem zawierającym opisy tego, co dzieje się w miarę jak użytkownik przechodzi dalej w aplikacji. Storyboardy mają bardziej dynamiczną strukturę pod względem grupowania i porządkowania.
Cel
– Najważniejszym powodem, dla którego zawsze powinieneś robić wireframe, jest to, że wireframing pozwala na określenie jasnych celów i ustalenie hierarchii informacji na stronie lub stronie internetowej. Oznacza to, że pozwala Ci na mapowanie, gdzie trafiają ważne elementy strony, takie jak wezwanie do działania, np. formularz zapisu, strona z informacjami zwrotnymi lub inne ważne informacje. Upraszcza to również komunikację pomiędzy Tobą a Twoim klientem. Storyboard w zasadzie służy temu samemu celowi, ale w bardziej szczegółowy sposób. Działa jako katalizator do dalszej dyskusji z Twoim klientem (lub klientami).
Podsumowanie
Zarówno wireframes jak i storyboardy są dość podobne, gdzie w zasadzie podążają za tym samym schematem nawigacyjnym i układem bez elementów wizualnych, zmniejszając tym samym obciążenie poznawcze zarówno projektantów jak i programistów stron internetowych. Wireframing i storyboarding są proponowanymi technikami, które są stosowane wcześnie jako warunki wstępne w procesie tworzenia stron internetowych. Jednakże storyboarding może być postrzegany jako wysokopoziomowy wireframing z bardziej szczegółową reprezentacją i szkicami lub układami do dzielenia się z klientem, aby upewnić się, że wszyscy są na dobrej drodze i pracują w kierunku wspólnego celu. Poza tym, są to najważniejsze i najczęściej tworzone produkty UX, które odgrywają kluczową rolę w całym cyklu tworzenia stron internetowych.