Czym jest wireframe? Wireframe, makieta, mockup i prototyp - różnice

Wireframe to uproszczony schemat ekranu strony lub aplikacji, na którym prostokąty, linie i opisy pokazują rozmieszczenie elementów - bez kolorów, zdjęć i ostatecznych tekstów. Jest pierwszym wizualnym krokiem projektu i służy do rozstrzygnięcia struktury, zanim ktokolwiek zacznie dyskutować o estetyce.

Cztery pojęcia z tytułu tego artykułu są w rozmowach z klientami mylone częściej niż jakiekolwiek inne. Ktoś prosi o makietę, a ma na myśli szkic; ktoś inny zamawia prototyp, oczekując gotowej grafiki. W tym tekście porządkujemy terminologię, pokazujemy, do czego służy każdy etap, jak go przygotować i ile czasu oraz pieniędzy warto na niego przeznaczyć. Szerszy kontekst całego procesu opisaliśmy w artykule o projektowaniu stron internetowych.

Czym jest wireframe?

Wireframe to szkielet ekranu: czarno-biały lub szary rysunek, który pokazuje położenie nagłówka, menu, bloków treści, zdjęć, formularzy i przycisków. Nie ma w nim kolorów marki ani ostatecznych tekstów - są za to proporcje, kolejność i hierarchia ważności.

Po co powstaje

Jego zadaniem jest rozstrzygnięcie decyzji strukturalnych w najtańszym możliwym momencie. Przesunięcie sekcji na szarym schemacie zajmuje minutę. Ta sama zmiana w dopracowanym projekcie graficznym to godzina, a w zakodowanej stronie - dzień pracy programisty.

Co zawiera

• Układ sekcji: nagłówek, treść główna, kolumny boczne, stopka.
• Nawigację: menu główne, okruszki, linki w stopce.
• Miejsca na treść: prostokąty z opisem, co ma się w nich znaleźć.
• Elementy akcji: przyciski, formularze, pola wyszukiwania.
• Adnotacje: krótkie notatki wyjaśniające zachowanie elementów.

Czego w nim celowo nie ma

Kolorów, zdjęć, ikon i ostatecznej typografii. To nie brak staranności, lecz świadomy zabieg: szary schemat nie wywołuje dyskusji o gustach. Klient ocenia logikę - czy oferta jest widoczna od razu, czy przycisk kontaktu jest w dobrym miejscu - a nie to, czy podoba mu się odcień niebieskiego.

Czym jest makieta strony internetowej?

Makieta strony internetowej to statyczny projekt graficzny ekranu, pokazujący, jak strona będzie wyglądać po wdrożeniu: z kolorami, typografią, zdjęciami, ikonami i docelowymi tekstami. Powstaje na bazie zaakceptowanego szkieletu układu.

Makieta w polskiej praktyce

W polskich agencjach słowo makieta bywa używane w dwóch znaczeniach. Część zespołów nazywa tak szary szkic układu, a część - gotowy projekt graficzny. Dlatego przed rozpoczęciem współpracy warto zapytać wprost, co wykonawca rozumie przez makietę i czy będzie kolorowa. W tym artykule trzymamy się znaczenia bliższego praktyce projektowej: grafika to projekt wizualny ekranu.

Co zawiera makieta

• Paletę kolorów: barwy marki, kolor akcji, kolory tła i tekstu.
• Typografię: kroje pisma, rozmiary, interlinię.
• Zdjęcia i grafiki: docelowe lub zbliżone do docelowych.
• Ikony i elementy dekoracyjne: w spójnym stylu.
• Treści: najlepiej prawdziwe, a nie wypełniacz.

Czym jest mockup?

Mockup to realistyczna wizualizacja projektu - w kontekście stron internetowych jest praktycznie synonimem makiety graficznej. Słowo pochodzi z angielskiego i oznacza model pokazujący, jak coś będzie wyglądać, zanim powstanie naprawdę.

Dwa znaczenia słowa mockup

W web designie makieta graficzna to statyczny projekt ekranu. W grafice i marketingu to także gotowy szablon, w którym projekt osadza się na zdjęciu telefonu, laptopa, kubka czy opakowania, aby pokazać go w realistycznym otoczeniu. Oba znaczenia są poprawne, ale przy zamawianiu strony chodzi o pierwsze - projekt wyglądu ekranów.

Mockup a makieta - czy to to samo?

W praktyce tak. Różnica jest głównie językowa: projektanci pracujący na angielskiej terminologii mówią mockup, zespoły posługujące się polskimi określeniami - projekt graficzny. Ważniejsze od nazwy jest to, by obie strony rozumiały, że chodzi o pełną warstwę wizualną, ale jeszcze bez klikalności.

Czym jest prototyp?

Prototyp to interaktywna wersja projektu, w której ekrany są połączone ze sobą tak, że można klikać przyciski, rozwijać menu i przechodzić między podstronami. Nie jest jeszcze działającą stroną - nie ma bazy danych ani prawdziwego formularza - ale zachowuje się na tyle realistycznie, że można go przetestować z użytkownikami.

Po co go budować

Prototyp pozwala sprawdzić, czy ścieżka od wejścia do kontaktu jest oczywista, zanim programista napisze pierwszą linijkę kodu. Pięć osób przeklikujących prototyp wychwytuje większość problemów z nawigacją i zrozumiałością oferty - a poprawka na tym etapie kosztuje ułamek zmiany po wdrożeniu.

Prototyp szary czy kolorowy

Można połączyć w klikalną całość już same szare schematy - to szybki sposób na przetestowanie struktury nawigacji. Można też zbudować wersję klikalną z pełnych makiet graficznych, która służy do testów i do prezentacji klientowi. Pierwsza wersja sprawdza logikę, druga - całość doświadczenia.

Czym różnią się wireframe, makieta, mockup i prototyp?

Wszystkie cztery pojęcia opisują ten sam projekt na kolejnych poziomach szczegółowości: od szkicu struktury, przez warstwę wizualną, po wersję klikalną. Różnią się celem, wyglądem, czasem przygotowania i tym, kto je ocenia.

Kto co ocenia

Szkic układu ocenia się pod kątem logiki - robi to klient razem z projektantem, często także specjalista od pozycjonowania, bo to tu zapada decyzja o strukturze nagłówków. Makietę ocenia się pod kątem estetyki i zgodności z marką. Prototyp sprawdzają użytkownicy z grupy docelowej, bo tylko oni powiedzą, czy coś jest niezrozumiałe.

Czy zawsze potrzebne są wszystkie cztery

Nie. Przy prostej wizytówce wystarczy szkic i jedna makieta. Przy stronie firmowej z kilkoma typami podstron warto przejść przez szkice, grafiki i prototyp głównej ścieżki. Przy sklepie czy aplikacji prototyp z testami jest właściwie obowiązkowy - koszt błędu w procesie zakupowym jest zbyt duży.

Jakie są rodzaje wireframe'ów?

Wireframe'y dzieli się według poziomu szczegółowości na trzy rodzaje: niskiej, średniej i wysokiej wierności. Wybór zależy od etapu projektu i od tego, co w danym momencie trzeba rozstrzygnąć.

Szkic odręczny - niedoceniany

Kartka i ołówek to wciąż najszybsze narzędzie do sprawdzenia kilku wariantów układu. W piętnaście minut można narysować pięć różnych wersji strony głównej i odrzucić cztery z nich, zanim ktokolwiek otworzy program projektowy. Na spotkaniach z klientem taki szkic działa zaskakująco dobrze, bo nikt nie ma oporów przed skreśleniem czegoś, co wygląda na nieskończone.

Kiedy iść w wysoką szczegółowość

Gdy strona ma dużo tekstu ofertowego, tabele, formularze albo skomplikowaną nawigację. Wtedy schemat z realnymi treściami pokazuje problemy, których szkic nie zdradzi: sekcje, które się nie mieszczą, nagłówki za długie na telefonie, formularze z za dużą liczbą pól.

Jak zrobić wireframe strony krok po kroku?

Dobry szkic układu powstaje z celu i treści, a nie z pustego ekranu w programie graficznym. Poniższa kolejność sprawdza się niezależnie od narzędzia i wielkości projektu.

1. Zapisz cel podstrony: jedno zdanie opisujące, co użytkownik ma zrobić po wejściu.
2. Wypisz treści w kolejności ważności: od najważniejszego argumentu do najmniej istotnego.
3. Zacznij od wersji mobilnej: wąski ekran wymusza decyzje, co naprawdę jest ważne.
4. Rozmieść bloki: nagłówek, oferta, dowody, akcja, dodatkowe informacje, stopka.
5. Zaznacz elementy akcji: przyciski, formularze, numer telefonu - i sprawdź, czy są widoczne bez przewijania.
6. Dodaj adnotacje: co się dzieje po kliknięciu, co pokazuje się na telefonie, co jest dynamiczne.
7. Rozszerz na wersję desktop: dopiero teraz wykorzystaj dodatkową szerokość.
8. Pokaż komuś spoza projektu: jeśli w pięć sekund nie wie, co firma oferuje, szkic wymaga poprawy.

Ile ekranów trzeba narysować

Tyle, ile jest unikalnych typów podstron. Serwis z dwudziestoma usługami może mieć tylko sześć różnych układów: stronę główną, listę usług, pojedynczą usługę, stronę o firmie, blog z wpisem oraz kontakt. Każdy układ rysuje się raz, a reszta podstron korzysta z tego samego szablonu.

Co powinien pokazywać szkic strony głównej i podstrony usługi?

Strona główna i podstrona usługi mają inne zadania, więc ich szkielety różnią się kolejnością sekcji. Strona główna rozdziela ruch do właściwych miejsc, podstrona usługi ma doprowadzić do zapytania.

Strona główna

• Górna sekcja: jasny opis, co firma robi i dla kogo, plus jeden główny przycisk.
• Lista usług: krótkie karty prowadzące do podstron.
• Dowody: realizacje, opinie, liczby, logotypy klientów.
• Proces lub wyróżniki: dlaczego warto wybrać właśnie tę firmę.
• Powtórzenie akcji: formularz lub dane kontaktowe.

Podstrona usługi

• Nagłówek z nazwą usługi: identycznej z tym, czego szuka klient.
• Dla kogo i jaki problem rozwiązuje: dwa, trzy zdania, nie slogan.
• Zakres i przebieg: co dokładnie klient dostaje i jak to wygląda krok po kroku.
• Cena lub widełki: brak informacji o koszcie zatrzymuje decyzję.
• Opinie dotyczące tej usługi: blisko przycisku kontaktu.
• Pytania i odpowiedzi: rozwiewające typowe wątpliwości.

Skuteczne rozmieszczenie przycisków i komunikatów wzywających do działania omawiamy w artykule o tym, jak projektować CTA, a strukturę podstron nastawionych na jedną akcję w tekście o tym, czym jest landing page.

Jak przygotować makietę graficzną na podstawie szkicu?

Makietę graficzną buduje się, nakładając na zaakceptowany szkic warstwę wizualną zgodną z identyfikacją marki. Kluczowe jest to, by na tym etapie nie zmieniać już struktury - jeśli pojawia się potrzeba przesunięcia sekcji, lepiej wrócić do szkicu, niż przebudowywać kolorowy projekt.

Ustalenie kierunku wizualnego

Zanim powstaną pełne makiety, warto przygotować jeden ekran próbny lub zestaw inspiracji: paletę, kroje pisma, styl zdjęć, przykładowy przycisk i kartę. Klient akceptuje kierunek na jednym ekranie, a projektant przenosi go na pozostałe. To oszczędza wiele rund poprawek.

Prawdziwe treści zamiast wypełniacza

Makieta z tekstem zastępczym wygląda dobrze do momentu, gdy trafia do niej prawdziwy opis usługi na pół strony. Wtedy sekcje się rozjeżdżają, a nagłówki łamią w nieprzewidzianych miejscach. Jeśli teksty jeszcze nie istnieją, warto przynajmniej ustalić ich długość dla każdej sekcji.

Wersje na różne ekrany

Każdy unikalny układ powinien mieć co najmniej dwie wersje: mobilną i desktopową. Przy serwisach z rozbudowaną nawigacją warto dodać też szerokość tabletu. Jak projekt powinien zachowywać się na różnych szerokościach, tłumaczymy w tekście o responsywności strony.

Stany komponentów

Makieta nie kończy się na stanie idealnym. Trzeba pokazać przycisk po najechaniu i po kliknięciu, formularz z błędem walidacji, komunikat po wysłaniu, pustą listę wyników. Jeśli tych ekranów zabraknie, powstaną przypadkiem na etapie kodowania - zwykle gorzej, niż gdyby je zaprojektowano.

Najdroższe poprawki w projektach stron to te, które klient zgłasza po zobaczeniu kolorowej grafiki, a które dotyczą układu. Dlatego u nas szary szkic zawsze idzie do akceptacji pierwszy. Kiedy struktura jest zamknięta, rozmowa o grafice trwa krótko i nikt nie przesuwa sekcji w ostatnim tygodniu przed wdrożeniem.

Sprawdz nasz proces

Porozmawiajmy o Twojej stronie

Krzysztof Domiński, Smartwww

Jak zbudować i przetestować prototyp?

Prototyp buduje się, łącząc gotowe ekrany w klikalną ścieżkę, a testuje, obserwując kilka osób z grupy docelowej, które wykonują konkretne zadania. Całość zajmuje zwykle od kilku dni do tygodnia i jest najtańszym sposobem na wyłapanie problemów przed wdrożeniem.

Które ścieżki zaprototypować

• Od strony głównej do zapytania: najważniejsza ścieżka w każdym serwisie usługowym.
• Od wyszukiwarki do podstrony usługi: bo większość użytkowników nie trafia na stronę główną.
• Od kategorii do koszyka: w sklepie internetowym.
• Nawigacja mobilna: otwarcie menu, przejście do usługi, powrót.

Jak przeprowadzić prosty test

1. Wybierz pięć osób z grupy docelowej: nie pracowników firmy ani projektantów.
2. Daj im konkretne zadanie: na przykład znajdź cenę usługi i wyślij zapytanie.
3. Obserwuj, nie podpowiadaj: każde zawahanie to informacja o problemie.
4. Zapisuj, gdzie się zatrzymują: i co mówią na głos.
5. Popraw i powtórz: druga runda zwykle potwierdza, że zmiany zadziałały.

Co najczęściej wychodzi w testach

Niejasne nazwy w menu, przyciski, które nie wyglądają na klikalne, brak informacji o cenie, zbyt długie formularze i sekcje, których nikt nie przewija, bo górna część strony nie zachęca do dalszej lektury. Wszystkie te problemy da się poprawić w projekcie w ciągu godzin - po wdrożeniu kosztowałyby dni.

W jakich narzędziach tworzy się wireframe, makietę i prototyp?

Większość projektów stron powstaje dziś w jednym edytorze projektowym pracującym w przeglądarce, który obsługuje wszystkie trzy etapy - od szarego szkicu po klikalny prototyp. Do szybkich szkiców wciąż świetnie sprawdza się papier, a do prostszych grafik pomocniczych narzędzia szablonowe.

Najpopularniejszy dziś edytor projektowy opisaliśmy w tekście o tym, czym jest Figma, a narzędzie szablonowe do prostszych materiałów - w artykule o Canvie.

Narzędzie nie jest najważniejsze

Dobry projektant zrobi czytelny szkic w dowolnym programie, a słaby nie uratuje projektu najnowszą aplikacją. Przy wyborze wykonawcy warto pytać nie o to, w czym pracuje, ale czy pokazuje szkic przed grafiką i czy testuje prototyp przed wdrożeniem.

Jakie korzyści daje wireframing i kto go wykonuje?

Wireframing, czyli proces tworzenia szkiców układu, skraca projekt, obniża koszt poprawek i pozwala wcześnie uzgodnić oczekiwania między klientem, projektantem i programistą. Wykonują go zwykle projektanci UX (w angielskiej terminologii: UX designers), ale w mniejszych zespołach - także projektanci interfejsu, właściciele produktów, a czasem sam klient.

Najważniejsze korzyści

• Uzgodnienie struktury i funkcjonalności na wczesnym etapie: w angielskiej literaturze mówi się o ustaleniu structure and functionality w the early stages projektu.
• Rozdzielenie treści od formy: najpierw content i layout, dopiero potem visual design.
• Szybsze iteracje: nowy wariant szkicu powstaje w minuty, nie w godziny.
• Jasny brief dla programisty: adnotacje tłumaczą zachowanie elementów.
• Lepsza komunikacja z klientem: szary schemat nie prowokuje dyskusji o kolorach.

Kto i kiedy tworzy wireframe'y

W typowym procesie projektowym (design process) szkice - czyli wireframes - powstają po badaniach i architekturze informacji, a przed projektem graficznym. Tworzą je projektanci odpowiedzialni za user experience, konsultując się z osobami od user interface i ui design. W agencjach pracujących nad stronami firmowymi często jedna osoba prowadzi cały proces - od szkicu po gotową grafikę - co opisaliśmy w tekście o różnicach między UX i UI.

Czy wireframe strony różni się od wireframe'u aplikacji?

Tak, choć zasady są te same. Szkic strony (website wireframe) skupia się na hierarchii treści, nawigacji i przewijaniu długich podstron, a szkic aplikacji mobilnej (app) - na krótkich ekranach, gestach, dolnym pasku nawigacji i stanach przejść między widokami.

Strona internetowa

Na stronie liczą się sekcje przewijane w pionie, menu, stopka i sposób, w jaki użytkownik trafia z wyszukiwarki na konkretną podstronę. Szkic musi uwzględniać, że wiele osób nigdy nie zobaczy strony głównej. Szkic strony pokazuje też, gdzie znajdą się nagłówki ważne dla pozycjonowania.

Aplikacja

W aplikacji szkice są krótsze, ale jest ich więcej - każdy ekran, każdy stan, każde okno dialogowe. Częściej projektuje się tu przepływy niż pojedyncze widoki, a wersja klikalna jest właściwie obowiązkowa, bo bez niej trudno ocenić nawigację gestami.

Low-fidelity wireframe czy high-fidelity wireframe - co wybrać?

Low-fidelity wireframe sprawdza się na początku, gdy trzeba szybko porównać kilka pomysłów, a high-fidelity wireframe - gdy struktura jest już ustalona i trzeba przygotować projekt do grafiki lub testów. Większość projektów przechodzi przez oba poziomy.

Kiedy wystarczy szkic niskiej szczegółowości

Na warsztatach z klientem, przy burzy mózgów i na etapie, gdy kilka ideas konkuruje ze sobą. Taki szkic może być dosłownie sketch na kartce - liczy się tempo, a nie wygląd. Takie szkice zwykle wyrzuca się po wybraniu kierunku.

Kiedy potrzebna jest wysoka szczegółowość

Gdy strona ma dużo treści, tabel, formularzy albo skomplikowaną nawigację. The wireframe na tym poziomie zawiera docelowe nagłówki, realne długości tekstów i dokładne odstępy, więc jest już bardzo blisko finalnego layoutu - brakuje mu tylko warstwy wizualnej.

Narzędzia online do wireframingu

Do szybkich szkiców wystarczy online wireframing tool działający w przeglądarce, z gotowymi blokami interfejsu. Profesjonalne wireframing tools - a przede wszystkim Figma - pozwalają płynnie przejść od szarego szkicu do pełnej grafiki bez zmiany programu. To dziś standard w projektowaniu stron i aplikacji, choć dobór tools zawsze powinien wynikać z procesu, a nie odwrotnie.

Jakie błędy najczęściej popełnia się na etapie szkiców i makiet?

Najczęstsze błędy wynikają z przeskakiwania etapów albo z mieszania ich celów - oceniania estetyki na szkicu albo przesuwania sekcji na gotowej makiecie. Każdy z nich wydłuża projekt i podnosi jego koszt.

Pominięcie szkicu

Przejście od razu do kolorowej grafiki wydaje się oszczędnością czasu, ale kończy się rozmową o odcieniu przycisku, zanim wiadomo, czy przycisk w ogóle powinien tam być. Każda zmiana struktury na tym etapie oznacza przeprojektowanie kilku ekranów.

Zbyt ładny szkic

Szkic z kolorami, cieniami i zdjęciami przestaje być szkicem. Klient zaczyna oceniać wygląd, a nie logikę, i prosi o zmiany estetyczne, które na tym etapie nie mają sensu. Szary schemat to nie brak umiejętności, tylko narzędzie do skupienia rozmowy.

Projektowanie tylko pod komputer

Układ zaprojektowany na szerokim ekranie często nie da się sensownie przełożyć na telefon. Sekcje w trzech kolumnach zamieniają się w długą listę, a ważne elementy lądują na samym dole. Szkic mobilny powinien powstać pierwszy albo co najmniej równolegle.

Szkic bez treści

Prostokąty podpisane jako tekst nie mówią nic o tym, co faktycznie ma się znaleźć na stronie. Przy akceptacji wszystko wygląda dobrze, a problemy wychodzą przy wprowadzaniu treści. Lepiej zamiast napisu tekst wpisać choćby roboczą wersję nagłówka i dwa zdania opisu.

Brak testów prototypu

Zespół, który pracował nad projektem przez kilka tygodni, zna go na pamięć i nie widzi, że dla nowej osoby menu jest niezrozumiałe. Kilka godzin testów z prawdziwymi użytkownikami to najtańsza polisa w całym projekcie.

Ile kosztuje i ile trwa przygotowanie szkiców, makiet i prototypu?

Przygotowanie szkiców, projektów graficznych i prototypu dla typowej strony firmowej trwa od trzech do sześciu tygodni i stanowi zwykle 25-40 procent budżetu całego serwisu. Główną zmienną jest liczba unikalnych układów podstron.

Jak rozkłada się czas

Mniej więcej jedna trzecia przypada na szkice i architekturę, połowa na makiety w wersjach mobilnych i desktopowych, a reszta na prototyp i testy. Pełne widełki kosztu strony wraz z wdrożeniem i utrzymaniem zebraliśmy w artykule o tym, ile kosztuje strona internetowa.

Co podnosi koszt

• Dodatkowe rundy poprawek: szczególnie zmiany struktury zgłaszane na etapie grafiki.
• Brak treści: projektant czeka albo projektuje dwa razy.
• Decyzje podejmowane przez komitet: każda osoba zgłasza inne uwagi.
• Rozbudowane testy: kilka rund z rekrutacją uczestników.

Jak szkice i makiety łączą się z UX i UI?

Szkic układu i wersja klikalna to narzędzia projektowania doświadczeń użytkownika, a projekt graficzny to główny rezultat projektowania interfejsu. Rozdzielenie tych etapów odpowiada naturalnemu podziałowi pracy między strukturą a wyglądem.

Szkic rozstrzyga, co użytkownik zobaczy i w jakiej kolejności - to domena UX. Makieta nadaje temu wygląd - to domena UI. Prototyp łączy obie warstwy i sprawdza, czy razem działają. Szczegółowo różnice między tymi dyscyplinami opisaliśmy w artykule UI/UX design - czym UX różni się od UI, a samą ideę doświadczenia użytkownika w tekście o tym, czym jest UX.

Jak pracujemy ze szkicami i makietami?

W każdym projekcie strony przechodzimy przez te same etapy: najpierw szary szkic każdego unikalnego układu do akceptacji, potem projekty graficzne w wersjach mobilnej i desktopowej, a na końcu prototyp głównej ścieżki do przetestowania. Struktura jest zamykana, zanim zaczniemy rozmawiać o kolorach.

Co dostajesz

• Szkic każdego typu podstrony: z adnotacjami i wersją mobilną.
• Makiety graficzne: zgodne z identyfikacją firmy, z prawdziwymi treściami.
• Prototyp klikalny: ścieżka od wejścia do zapytania.
• Pliki projektowe: zostają u ciebie, niezależnie od tego, kto wdraża stronę.

Jeśli planujesz nowy serwis albo jego przebudowę, zajrzyj na stronę tworzenia stron internetowych. Przy przebudowie istniejącej strony przydatny będzie też tekst o redesignie strony. Po rozmowę o projekcie napisz przez formularz kontaktowy.

Słownik pojęć

• Wireframe: szary schemat układu ekranu bez warstwy graficznej.
• Makieta: statyczny projekt graficzny ekranu.
• Mockup: angielski odpowiednik makiety; także wizualizacja projektu na urządzeniu.
• Prototyp: klikalne połączenie ekranów do testów.
• Low-fidelity: niska szczegółowość, szybki szkic.
• High-fidelity: wysoka szczegółowość, bliska finalnej wersji.
• Adnotacja: notatka opisująca zachowanie elementu.
• Architektura informacji: sposób pogrupowania treści i nawigacji.
• User flow: sekwencja kroków użytkownika do celu.
• Test użyteczności: obserwacja użytkowników wykonujących zadania.
• Stan komponentu: wygląd elementu w różnych sytuacjach, na przykład błędu.
• Mobile first: projektowanie zaczynane od najwęższego ekranu.

Najczęstsze pytania

Co to jest wireframe w prostych słowach?

To szkic ekranu strony, podobny do planu mieszkania: pokazuje, gdzie co się znajduje, ale bez kolorów, mebli i dekoracji. Służy do ustalenia układu, zanim projekt dostanie wygląd.

Czym różni się mockup od prototypu?

Mockup jest statyczny - pokazuje, jak ekran wygląda. Prototyp jest interaktywny - można w nim klikać i przechodzić między ekranami. Mockup ocenia się wzrokiem, prototyp testuje się, używając go.

Czy makieta strony to to samo co wireframe?

Zależy od zespołu. Część polskich projektantów nazywa makietą szary szkic, część - gotowy projekt graficzny. W praktyce projektowej grafika to zwykle wersja graficzna, a wireframe - szkielet bez grafiki. Warto doprecyzować to z wykonawcą przed podpisaniem umowy.

Czy mogę sam narysować wireframe swojej strony?

Tak, i to bardzo dobry pomysł. Nawet odręczny szkic na kartce pokazuje projektantowi, jak widzisz swoją ofertę i co uważasz za najważniejsze. Oszczędza to czas i pieniądze na pierwszych etapach projektu.

Ile szkiców potrzebuje strona firmowa?

Zwykle pięć do ośmiu - tyle, ile jest unikalnych typów podstron. Każdy w wersji mobilnej i desktopowej. Podstrony o takim samym układzie nie wymagają osobnych szkiców.

Czy prototyp jest potrzebny przy małej stronie?

Przy prostej wizytówce można go pominąć. Przy stronie z kilkoma usługami i formularzem kontaktowym warto zbudować wersję klikalną głównej ścieżki - kosztuje kilka godzin, a może uchronić przed błędem, który obniży liczbę zapytań.

W jakim programie najlepiej robić makiety?

Standardem rynkowym jest dziś edytor projektowy pracujący w przeglądarce, który obsługuje szkice, makiety i prototypy w jednym miejscu. Do pierwszych szkiców świetnie nadaje się też kartka papieru.

Czy dostanę pliki makiet po zakończeniu projektu?

Powinieneś. Pliki projektowe to część tego, za co płacisz, i przydadzą się przy każdej kolejnej zmianie strony. Warto zapisać to w umowie z wykonawcą.