Zarówno wireframe jak i mockups są istotnymi elementami całego procesu projektowania, które kładą podwaliny pod to, jak strona internetowa lub aplikacja będzie wyglądać i czuć się, reprezentując cele projektu i wizję dla strony internetowej lub aplikacji. Mockup jest wizualną reprezentacją produktu, podczas gdy wireframe jest schematem produktu, który zarysowuje jego strukturę bez wszystkich dzwonków i gwizdków prawdziwego produktu. Oto zestawienie, jak te dwa elementy wpisują się w proces projektowania stron internetowych i czym się różnią.
Co to jest Wireframe?
Wireframe to nic innego jak szkielet strony internetowej lub aplikacji mobilnej, który nadaje kierunek Twojemu projektowi. Jest to schematyczna reprezentacja ostatecznego UI, która zarysowuje funkcjonalność produktu, jego cechy i zawartość. Makiety są dość ważne, jeśli nie niezbędne. Czasami musisz opracować wireframe dla klienta, czasami nie. Szkielet jest w zasadzie prototypem projektu strony internetowej o niskiej wierności, skupiającym się na ogólnym układzie, hierarchii treści i funkcjonalności. Makiety mogą być rysowane ręcznie, składające się z linii, pól i zwykłego tekstu, lub mogą być wykonane elektronicznie przy użyciu specjalnego oprogramowania, takiego jak Microsoft Visio. Makiety są prawdziwie strukturalnym dokumentem, pozbawionym wizualnego bałaganu, co oznacza brak kolorów, tekstur, obrazów czy animacji. Jedną z największych zalet makiet jest to, że mogą być tworzone i modyfikowane szybko, bez dodatkowych dzwonków i gwizdków, i prowadzą do ostatecznego projektu.
Co to jest Mockup?
Mockup jest statycznym renderowaniem projektu wizualnego, który będzie używany do prezentacji produktu i innych celów. W oparciu o strukturę wireframe, mockup jest krokiem w górę od podstawowego układu i ma na celu opracowanie wstępnego projektu z nieinteraktywnymi elementami wizualnymi. Tak więc, mockupy są reprezentacją średniej wierności projektu, który zawiera czcionki, tekst, kolory, obrazy, logo i inne elementy wizualne, które będą dalej kształtować wireframe. Makieta najlepiej reprezentuje cele projektu i wizję strony internetowej lub aplikacji. Używając sitemap jako podstawy i wireframe jako przewodnik, możesz stworzyć unikalną, atrakcyjną makietę ze wszystkimi elementami strony. Makieta ma na celu dostarczenie klientowi wizualnej reprezentacji tego, jak produkt końcowy będzie wyglądał i funkcjonował, zanim faktycznie przystąpisz do budowy stron internetowych. Mockup staje się wtedy ostatecznym planem, do którego zarówno projektant jak i klient mogą się odnosić podczas komunikacji o szczegółach projektu.
Różnica między Mockupem a Wireframe
Znaczenie Mockup i Wireframe
– Zarówno wireframe jak i mockups są statyczną reprezentacją końcowego produktu i tego jak będzie on wyglądał i funkcjonował. Statyczne oznacza tutaj, że oba są renderowane w formacie, który nie pozwala na interakcję użytkownika z elementami w taki sposób, w jaki robi to produkt końcowy. Wireframe to prototyp projektu strony internetowej o niskiej wierności, skupiający się na ogólnym układzie, hierarchii treści i funkcjonalności, który nadaje kierunek Twojemu projektowi. Mockupy, z drugiej strony, są krokiem naprzód w stosunku do etapu wireframingu i reprezentacją średniej wierności projektu, która daje podstawowe poczucie tego, jak strona lub aplikacja będzie wyglądać po ukończeniu.
Struktura
– Szkielet jest diagramem drzewa lub diagramem przepływu strony internetowej, który zarysowuje jej funkcjonalność, cechy i zawartość. Jest to dokument prawdziwie strukturalny, pozbawiony wszelkiego wizualnego bałaganu, co oznacza brak kolorów, tekstur, obrazów i animacji. Makiety mogą być zarówno ręcznymi rysunkami złożonymi z linii, pól i zwykłego tekstu, jak i elektronicznymi stworzonymi przy użyciu specjalnego oprogramowania, takiego jak Microsoft Visio. Mockupy, z drugiej strony, są statycznym renderowaniem rzeczywistego projektu, który zawiera czcionki, tekst, kolory, obrazy, logo i inne elementy wizualne, które będą dalej kształtować wireframe.
Goal
– Mówiąc najprościej, wireframe to dwuwymiarowy rysunek interfejsu projektowego, który skupia się na ogólnym układzie, hierarchii treści i funkcjonalności. Służy do określenia i zaplanowania hierarchii informacji na stronie lub ekranie, lub innymi słowy, jak elementy na stronie powinny być zorganizowane i jaka treść trafia gdzie, oraz jakie funkcjonalności są dostępne. Mockup to pełnowymiarowy model projektu używany do prezentacji produktów lub innych celów. Jest to sposób na pokazanie, jak Twój projekt będzie wyglądał, gdy zostanie wystawiony w prawdziwym świecie. Mockupy są używane do różnych projektów wizualnych.
Narzędzia
– Wireframes są często określane jako szkieletowy blueprint lub zarys układu projektu internetowego, który reprezentuje podstawowy układ każdej strony bez wszystkich gotowych elementów. Microsoft Visio i OmniGraffle to najbardziej ogólne narzędzia używane specjalnie do tworzenia makiet, podczas gdy niektórzy nie-projektanci używają PowerPointa lub Keynote’a do przygotowania makiet. Jednak najczęściej używane narzędzia do tworzenia makiet to Balasmiq, Axure, UXPin, Whimsical i inne. Narzędzia wyspecjalizowane w tworzeniu makiet mobilnych to Marvel i Flinto. Mockup służy temu samemu celowi, więc większość narzędzi do wireframingu może być również używana do tworzenia mockupów, ale istnieją inne narzędzia, takie jak Balasmiq, Mockplus, Mockflow, Mockingbird itp.
Podsumowanie Mockup i Wireframe
W skrócie, wireframes są najłatwiejszą formą makiet do stworzenia, które są niczym innym jak zwykłym tekstem, liniami, pudełkami i prostymi obiektami, aby pokazać podstawowy układ projektu. Najlepszą częścią wireframing jest to, że są one łatwe do stworzenia za pomocą podstawowych narzędzi, takich jak ołówek i papier, i nie są wymagane żadne umiejętności artystyczne. Mockupy mogą występować w wielu różnych formach i służą temu samemu podstawowemu celowi – pokazaniu, jak projekt będzie wyglądał po jego ukończeniu. Mockup jest repliką produktu końcowego, która zawiera wszystko, od grafiki po projekt ekranu, podczas gdy wireframe’y nie zawierają podstawowych elementów wizualnych.