Model szkieletowy. Każda konstrukcja, każdy budynek, każdy projekt zaczyna się od szkieletu. To ważna część procesu projektowania, która decyduje o powodzeniu całego projektu.
Niezależnie od tego, czy pracujesz z projektami cyfrowych interfejsów użytkownika, czy projektami banerów, makiety powinny być częścią procesu projektowania. W tym przewodniku pomożemy Ci zrozumieć, czym jest model szkieletowy i dlaczego jest ważny.
Stworzyliśmy ten przewodnik zarówno dla początkujących, jak i zaawansowanych projektantów, aby przekazać znaczenie wireframe’u. Dowiesz się wszystkiego, od projektowania makiet po najlepsze narzędzia do tworzenia szkieletów, wskazówki dotyczące unikania typowych błędów i nie tylko.
Co to jest model szkieletowy?
Wyobraź sobie, że budujesz dom. Czy przystępujesz od razu do budowy budynku bez żadnego przygotowania? Nie! Zaczynasz od przejścia do desek kreślarskich i zaprojektowania planu domu. Tworząc układ, który definiuje konstrukcję budynku.
To samo można powiedzieć o modelu szkieletowym. Pomaga utrzymać uziemienie i tworzyć układy i projekt zgodnie z odpowiednio ułożonym planem.
Istnieje wiele różnych typów modeli szkieletowych. W projektowaniu interfejsu użytkownika modele szkieletowe służą do tworzenia układów stron internetowych, aplikacji internetowych, aplikacji mobilnych i nie tylko. Modele szkieletowe są nawet używane w projektach drukowanych, takich jak plakaty i infografiki, aby poprawić wrażenia użytkownika.
Dlaczego modele szkieletowe są ważne
Jeśli chodzi o projektowanie interfejsu użytkownika, większość projektantów często pomija znaczenie wireframe’u. Przechodzą bezpośrednio do procesu budowy, ponieważ znają już zwykłą strukturę projektu.
Gdy zobaczysz wystarczająco dużo projektów i aplikacji witryn internetowych, aby wiedzieć, gdzie znajduje się nagłówek, menu i przyciski, możesz przejść od razu do projektowania bez szkieletu. I to właśnie powoduje katastrofalne strony internetowe i aplikacje, które generują bardzo niskie interakcje z użytkownikami, niszcząc komfort użytkowania.
Modele szkieletowe pomagają temu zapobiec, umożliwiając wcześniejsze zrozumienie konturu lub ramy projektu.
Oprócz tworzenia przyjaznych dla użytkownika i skutecznych projektów, istnieje kilka innych korzyści z tworzenia szkieletów.
- Zacznij od przejrzystego układu: modele szkieletowe pomagają przejść do fazy prototypu, mając na uwadze przejrzysty układ. Pomaga to zachować koncentrację i tworzyć bardziej efektywne i uporządkowane projekty.
- Uzyskaj wczesną opinię: dzięki szkieletowi możesz uzyskać wczesne opinie od swoich klientów. Pomoże to uniknąć konieczności przechodzenia przez wiele poprawek do projektów na późniejszym etapie.
- Lepsza struktura: możesz użyć modelu szkieletowego, aby zaplanować podstawową strukturę projektu, aby skutecznie komunikować się z użytkownikami końcowymi.
- Lepsza współpraca: modele szkieletowe pomagają również we współpracy z zespołem. Zwłaszcza gdy otrzymuję opinie od programistów.
Główne elementy szkieletu
Co powinieneś zawrzeć w modelu szkieletowym? Zwykle zależy to od rodzaju projektu, nad którym pracujesz. Nie ma żadnych zasad ani standardów projektowania szkieletów. Istnieje jednak kilka koncepcji, które można zastosować, aby tworzyć lepsze modele szkieletowe.
Postępuj zgodnie z koncepcją KISS
Keep It Stupid Simple, to popularna koncepcja, którą można wykorzystać w wielu różnych projektach, a zwłaszcza w projektach.
Głównym celem wireframe’u jest zaprojektowanie struktury interfejsu użytkownika. Nie ma potrzeby tworzenia szczegółowych projektów. Po prostu zachowaj prostotę i czystość z minimalnymi elementami.
Struktura podstawowa
Większość modeli szkieletowych ma podstawową strukturę, na której się opiera. Na przykład szkielet witryny powinien zawierać sekcję nagłówka, logo, menu itp.
Ważne jest, aby rozpocząć tworzenie szkieletu, mając na uwadze tę podstawową strukturę. Tworzy główny zarys dla pozostałej zawartości w modelu szkieletowym.
Treść ciała
Treść modelu szkieletowego to miejsce, w którym pojawia się treść. W przypadku modeli szkieletowych witryn internetowych zawiera to funkcje, portfolio, tabele cen i inne ważne sekcje.
Jednak podczas tworzenia szkieletu nie musisz martwić się o szczegóły. Nie musisz dodawać opisów tekstowych, nazywać każdego przycisku lub ikony, ani nawet martwić się o tytuły. Głównym celem jest utworzenie symboli zastępczych dla całej zawartości i zmapowanie jej.
Low Fidelity vs High Fidelity
Istnieje również rodzaj wireframe’ów zwany wireframe’ami wysokiej jakości. W przeciwieństwie do szkieletów o niskiej wierności, które zawierają minimalną ilość treści, te makiety mają bardziej szczegółowe struktury. Zobaczysz różnicę w sekcji przykładów w przewodniku.
Tak czy inaczej, od Ciebie zależy, jaki typ modelu szkieletowego projektujesz. Zwykle zależy to od tego, jak duży projekt nad którym pracujesz i ile czasu masz w harmonogramie.
Różne przykłady modeli szkieletowych
Aby pomóc Ci zorientować się, jak wyglądają modele szkieletowe, oto kilka przykładowych projektów, które możesz przestudiować.
Modele szkieletowe pulpitu nawigacyjnego aplikacji internetowej
Ten szkielet pulpitu nawigacyjnego pokazuje, co należy uwzględnić, a czego nie należy umieszczać w wysokiej jakości makiecie.
Wireframe witryny
To świetny przykład prostego wireframe’u strony internetowej
Model szkieletowy aplikacji mobilnej
Kompletny szkielet aplikacji. Zawiera wiele projektów ekranu dla interfejsu użytkownika aplikacji.
Szkielet witryny Low Fidelity
Jak widać, są one więcej niż wystarczające do wykonania efektywnego szkieletu.
Czego należy unikać podczas projektowania szkieletów
Istnieje również kilka typowych błędów, których należy unikać podczas projektowania modeli szkieletowych.
Nie dołączaj obrazów
Nie myl makiet ani prototypów. Modele szkieletowe służą do planowania i określania struktury. Nie ma potrzeby dołączania obrazów ani grafik do szkieletu.
W rzeczywistości dodanie grafiki w modelu wireframe będzie kolidować tylko z głównym celem, jakim jest stworzenie szkieletu – uzyskanie wyraźnego widoku zarysu projektu.
Polecane tematy:
Unikaj używania kolorów
Niektórzy projektanci wolą używać różnych kolorów w modelach szkieletowych, aby podkreślić ważne części projektu. Ale to niepotrzebne. W przypadku projektów szkieletowych trzymaj się szarych i czarnych kolorów.
Ogranicz szczegóły do minimum
Poświęcanie zbyt dużej uwagi dopracowywaniu mniejszych szczegółów w modelu szkieletowym to tylko strata czasu. Nawet projektując wysokiej jakości szkielet, staraj się ograniczyć szczegóły, aby zachować minimalny wygląd całego projektu.
Użyj szablonów lub narzędzi
Jednym z największych błędów popełnianych przez projektantów podczas tworzenia wireframe’ów jest próba narysowania go za pomocą pióra i papieru lub użycie oprogramowania takiego jak Photoshop, aby narysować go od podstaw.
Istnieje wiele wspaniałych narzędzi i szablonów, których możesz użyć do projektowania szkieletów bez wysiłku. Obejmują gotowe komponenty do planowania całych konstrukcji. Możesz ich użyć do projektowania makiet bez wysiłku.
Jak zacząć
Tworzenie szkieletu to najłatwiejsza część procesu.
Jeśli pobrałeś zestaw szablonów szkieletowych, jest to tak proste, jak otwarcie plików szablonów w wybranej aplikacji do edycji grafiki. Jak Photoshop czy Sketch. Następnie możesz rozpocząć dostosowywanie układu.
Na przykład tworzenie szkieletów na Figmie jest dość łatwe. Oferuje gotowe układy i komponenty potrzebne do rozpoczęcia. Lub możesz załadować zestawy szablonów. Wszystko, co musisz zrobić, to przeciągnąć i upuścić elementy na płótnie i zacząć je zmieniać, aby zaprojektować szkielet. To takie proste!
Na początku może się to wydawać przytłaczające. Ale przy odrobinie praktyki będziesz w stanie tworzyć modele szkieletowe bez wysiłku. Pamiętaj tylko, aby postępować zgodnie ze wskazówkami i radami, które przedstawiliśmy w tym przewodniku.
Kolejne kroki procesu
Modelowanie szkieletowe to tylko jeden z wielu etapów procesu projektowania. Możesz teraz użyć modelu szkieletowego, aby uzyskać informacje zwrotne od klienta. Wróć do deski kreślarskiej, aby poprawić szkielet. Uzyskaj zgodę klienta. I pracuj nad kolejną fazą procesu – projektowaniem makiety lub prototypu. A na koniec praca nad projektem.
Nie trzeba dodawać, że integracja wireframe’u z przepływem pracy może w niesamowity sposób ulepszyć Twoje projekty i Twoją pracę. Spędzenie tego dodatkowego czasu na etapie tworzenia szkieletów na dłuższą metę dobrze Cię wynagrodzi.