--- title: "Makieta: co to jest? Słownik pojęć" description: "Makieta to uproszczony schemat strony lub ekranu aplikacji. Pokazuje, gdzie stoją treści, przyciski, formularze i zdjęcia, bez kolorów i ostatecznej grafiki…" url: https://fluostudio.pl/baza-wiedzy/slownik/makieta/ --- [Strony www](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=www) # Makieta Inaczej wireframe, makieta funkcjonalna, makieta strony Makieta to uproszczony schemat strony lub ekranu aplikacji. Pokazuje, gdzie stoją treści, przyciski, formularze i zdjęcia, bez kolorów i ostatecznej grafiki, żeby ustalić układ przed projektem graficznym. ## Usługa - [Makietowanie](https://fluostudio.pl/uslugi/product-design/makietowanie/) Pierwszy projekt nowej strony trafia na spotkanie, na które przyszło pół firmy. Przez godzinę wszyscy dyskutują o odcieniu niebieskiego i zdjęciu w nagłówku. Nikt nie pyta, czemu formularz kontaktowy jest na samym dole, a cennika w ogóle nie ma. Makieta rozdziela te dwie rozmowy. Jest celowo szara: prostokąty, nagłówki, robocze teksty, miejsca na zdjęcia. Bez kolorów nikt nie spiera się o gust. Rozmowa dotyczy tego, co jest na stronie, w jakiej kolejności i czy klient trafi tam, gdzie chce. ## Co pokazuje makieta - kolejność sekcji i ich wagę, - nawigację i powiązania między podstronami, - miejsca na [CTA](https://fluostudio.pl/baza-wiedzy/slownik/cta/), formularze i zdjęcia, - układ na telefonie i na komputerze. Makiety rysuje się na podstawie [mapy strony](https://fluostudio.pl/baza-wiedzy/slownik/mapa-strony/), podstrona po podstronie. Najlepiej od razu na docelowych treściach. Tekst zastępczy ukrywa problemy: nagłówek, który w makiecie miał trzy słowa, w rzeczywistości ma dwanaście i nie mieści się w układzie. Przy sklepie [Design Optyk](https://fluostudio.pl/projekty/designoptyk/) teksty do stref marek klient pisał sam, według makiety, którą dla niego przygotowaliśmy. Przesunięcie sekcji w makiecie zajmuje chwilę. Ta sama zmiana w gotowym projekcie graficznym oznacza poprawki w kilku widokach, a na wdrożonej stronie dochodzi praca programisty i testy. Im więcej decyzji zapadnie na etapie makiety, tym taniej wychodzi cały projekt. Serwis [Porta PRO](https://fluostudio.pl/projekty/porta-pro/) dla architektów zaczęliśmy od makiety funkcjonalnej, potem powstały widoki na komputer i telefon w Figmie, a na końcu motyw WordPress. ## Makieta, prototyp i mockup Te trzy słowa często padają na jednym spotkaniu. Makieta pokazuje układ. [Prototyp](https://fluostudio.pl/baza-wiedzy/slownik/prototyp/) pozwala się po stronie poruszać: przyciski działają, ekrany się zmieniają, da się przejść drogę od strony głównej do formularza. [Mockup](https://fluostudio.pl/baza-wiedzy/slownik/mockup/) to gotowy projekt graficzny pokazany realistycznie, np. na ekranie laptopa. Służy do oceny wyglądu, a nie układu. ## W naszych projektach - ### [Overmax](https://fluostudio.pl/projekty/overmax/) Makieta funkcjonalna sklepu z autami RC przed koncepcją wizualną: strona główna, menu, listing, karta produktu, wyszukiwarka i porównywarka. ## Zobacz też - [Strony www Prototyp Prototyp to klikalna symulacja strony albo aplikacji. Przyciski i przejścia między ekranami działają, choć za nimi nie ma jeszcze działającego systemu. Służy do sprawdzenia pomysłu przed programowaniem.](https://fluostudio.pl/baza-wiedzy/slownik/prototyp/) - [Strony www Mapa strony Mapa strony to spis wszystkich podstron serwisu ułożony w hierarchię. W projekcie służy do planowania struktury, a jako plik sitemap.xml podpowiada wyszukiwarkom, które adresy mają odwiedzić.](https://fluostudio.pl/baza-wiedzy/slownik/mapa-strony/) - [Strony www Architektura informacji Architektura informacji to sposób, w jaki treści na stronie są podzielone, nazwane i połączone. Od niej zależy, czy ktoś znajdzie to, po co przyszedł, czy zamknie kartę.](https://fluostudio.pl/baza-wiedzy/slownik/architektura-informacji/) - [Identyfikacja wizualna Mockup Mockup to realistyczna wizualizacja, która pokazuje projekt w użyciu, np. logo na szyldzie, etykietę na butelce albo stronę na ekranie telefonu. Pomaga ocenić projekt w kontekście, ale nie jest zdjęciem gotowego produktu.](https://fluostudio.pl/baza-wiedzy/slownik/mockup/) - [Strony www UX UX (user experience) to doświadczenie człowieka, który korzysta ze strony, aplikacji albo usługi: czy szybko znajduje to, czego szuka, rozumie, co ma zrobić, i kończy sprawę bez frustracji.](https://fluostudio.pl/baza-wiedzy/slownik/ux/) - [Strony www UI UI (user interface) to interfejs, czyli wszystko, co człowiek widzi na ekranie i czego używa: przyciski, pola formularzy, menu, ikony, typografia i kolory.](https://fluostudio.pl/baza-wiedzy/slownik/ui/) - [Strony www Testy użyteczności Testy użyteczności to badanie, w którym prawdziwi użytkownicy wykonują na stronie, w aplikacji albo na prototypie konkretne zadania, a badacz obserwuje, gdzie się wahają, mylą i rezygnują.](https://fluostudio.pl/baza-wiedzy/slownik/testy-uzytecznosci/) Hasło pojawia się też w: [Brief](https://fluostudio.pl/baza-wiedzy/slownik/brief/), [Copywriting](https://fluostudio.pl/baza-wiedzy/slownik/copywriting/), [Mobile first](https://fluostudio.pl/baza-wiedzy/slownik/mobile-first/), [MVP](https://fluostudio.pl/baza-wiedzy/slownik/mvp/), [Product design](https://fluostudio.pl/baza-wiedzy/slownik/product-design/), [Siatka projektowa](https://fluostudio.pl/baza-wiedzy/slownik/siatka-projektowa/), [Storyboard](https://fluostudio.pl/baza-wiedzy/slownik/storyboard/) ## Strona ma sprzedawać, działać szybko i dawać się łatwo edytować. Porozmawiajmy o Twojej. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. [Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)