Kompleksowy przewodnik po wireframing w rozwoju produktu
Opublikowany: 2018-04-13Projekt tworzenia stron internetowych ma wiele wspólnego z budową domu. Kiedy budujesz dom, naturalnie wybierasz najlepszą osobę, która może wykonać tę pracę. Chciałbyś mieć kogoś z doświadczeniem, głęboką wiedzą i chciałbyś się upewnić, że budowniczy ma odpowiedni proces, aby wykonać pracę w wyznaczonym czasie i sankcjonowanym budżecie. Co sprawia, że jesteś tego pewien? Plan, prawda? Cóż, w dziedzinie tworzenia stron internetowych jest to wireframing.
Spis treści
Co to jest szkieletowanie?
Mówiąc prościej, wireframing to ilustracja strony internetowej. Szkielet to układ strony internetowej, który określa, jakie elementy interfejsu znajdą się na ważnych stronach. Jest to ważna część procesu projektowania interakcji.
Głównym celem tworzenia szkieletów jest zapewnienie wizualnego zrozumienia strony na najwcześniejszym etapie projektu, aby uzyskać akceptację wszystkich interesariuszy i członków zespołu projektowego. Modele szkieletowe są również używane do tworzenia nawigacji globalnej i pomocniczej, aby upewnić się, że terminologia i struktura zawarta w witrynie spełnia oczekiwania użytkowników.
Różnica między makietami, makietami i prototypami?
Szkielet
Szkielet jest jak szkielet lub podstawowa struktura witryny. Szkielet jest bardziej związany z funkcjonalnością. Na przykład szkielet witryny lub aplikacji będzie przedstawiał nawigację, główne przyciski, kolumny itp. Można to porównać z planem projektu architektonicznego.
makieta
Z drugiej strony makiety są bardziej realistycznymi reprezentacjami produktów. W przeciwieństwie do makiety szkieletowej skupia się na szczegółach. Wszystkie aspekty, takie jak kolory, czcionki, ikony, wykresy, obrazy są brane pod uwagę.
Prototyp
Prototypy oferują wysoką wierność wizualną reprezentację Twojego projektu. Możesz myśleć o prototypie jako wartościowym dodatku do makiety. Prototyp, jak sama nazwa wskazuje, pokazuje dokładnie, jak produkt będzie wyglądał. Prototypowanie obejmuje łączenie ze sobą szkieletu, łączenie przycisków z odpowiednimi stronami docelowymi, rozwijane menu warstw itp.
Upraszczając dalej, są to wszystkie etapy procesu projektowania produktu, począwszy od szkicowania (najprostsza podstawowa faza projektowania – odręczne rysowanie) kończąc na stworzeniu prototypu.
Szkielet dla aplikacji mobilnej
Szkielet dla aplikacji mobilnej oferuje podobne korzyści jak robienie tego dla strony internetowej. Daje jasny obraz tego, jak aplikacja będzie wyglądać i jak będzie działać. Nikt nie lubi kupować niejasnego pomysłu. Modelowanie szkieletowe zapewnia dużą łatwość podczas przenoszenia projektu. Zmniejsza również całkowity koszt rozwoju produktu, ponieważ zmiany można wprowadzać na wczesnym etapie.
Jedną z ważnych rzeczy, o których należy pamiętać podczas tworzenia szkieletów aplikacji mobilnej, jest rozważenie platformy (iOS lub Android), na której będziesz uruchamiać swój produkt. 
Ważne rzeczy, o których należy pamiętać podczas tworzenia wireframeu
Tworząc makiety, należy pamiętać, że są one jedynie wskazówkami wskazującymi, gdzie na stronie pojawią się główne treści i elementy nawigacyjne Twojej witryny. Ponieważ celem ilustracji nie jest przedstawienie projektu wizualnego, zawsze lepiej jest zachować prostotę. Oszczędza czas i wysiłek. Oto kilka wskazówek, które przydadzą się podczas tworzenia szkieletów:
- Zacznij od prostych makiet o niskiej wierności.
- Unikaj używania kolorów. Możesz trzymać się skali szarości, aby zobrazować różnicę.
- Nie ma potrzeby używania obrazów. Po prostu użyj geometrycznego kształtu zamiast obrazów, aby przedstawić ogólny pomysł.
- Użyj ogólnej czcionki i zachowaj ją przez cały czas tworzenia szkieletu. Typografia nie jest istotną częścią procesu.
- Nie ma potrzeby obramowywania każdej strony.
Wireframing to procedura przemyślenia problemów i określenia interfejsów. Pamiętaj, podobnie jak inne formy tworzenia szkieletów procesu rozwoju mogą mieć swoje niebezpieczeństwa, jeśli nie zostaną wykonane prawidłowo.
Niezbędne elementy zilustrowane w modelach szkieletowych
Elementy wireframingu zależą w dużej mierze od typu witryny, którą zamierzasz zbudować, między innymi od wymagań klienta. Istnieją jednak pewne elementy, które często są włączane jako standardowe elementy szkieletu, takie jak nagłówek, stopka, logo, pole wyszukiwania, systemy nawigacji, treść, przyciski udostępniania, bułka tarta.
Rodzaje makiet
Modele szkieletowe mogą różnić się w zależności od procesu produkcyjnego (szkice papierowe a obrazy narysowane komputerowo) ilością szczegółów, które zawierają. Dwoma terminami powszechnie używanymi do określenia produkcji szkieletów są — szkielety o niskiej i wysokiej wierności.
- Makiety o niskiej wierności – są łatwe i szybkie do opracowania. Pomagają usprawnić komunikację w zespole. Często makiety o niskiej wierności zawierają proste obrazy, a tekst lorem ipsum jako wypełniacz.
- Modele szkieletowe o wysokiej wierności — są bardziej odpowiednie do dokumentacji ze względu na ich podwyższony poziom szczegółowości. Te makiety zawierają informacje o każdym małym elemencie na stronie.
Dlaczego tworzymy makiety?
Oto kilka znaczących korzyści płynących z tworzenia szkieletów:
- Szkielet odgrywa kluczową rolę w komunikacji podczas tworzenia stron internetowych lub aplikacji. Daje możliwość wszystkim zainteresowanym stronom; klientom, programistom, projektantom do wizualizacji i uzyskania jasnego obrazu struktury serwisu.
- Makiety ułatwiają komunikację i przekazywanie pomysłów.
- Modele szkieletowe dodają przejrzystości projektom, pozwalają również pracować przez wszystkie interakcje i potrzeby dotyczące układu.
- Wireframing sprawia, że projektowanie treści jest przyjazne.
- Modele szkieletowe skłaniają klienta do zastanowienia się nad swoimi wymaganiami i pomagają mu określić cele projektu i główny cel.
- Pomaga zebrać opinie na temat Twojego produktu na bardzo wczesnym etapie.
- Modele szkieletowe umożliwiają projektantom tworzenie układów dla wielu sekcji witryny, co prowadzi do bardziej płynnego procesu twórczego.
Ważne kroki w procesie tworzenia szkieletów
Niektóre ważne kroki, które należy wykonać podczas tworzenia szkieletów, obejmują:
- Badania — mały pomysł na to, jak inni projektanci wykonują wireframe'y, bardzo pomoże ci znaleźć inspirację.
- Wybierz swoje narzędzie — dostępnych jest wiele narzędzi do tworzenia makiet. Możesz wybrać jeden na podstawie swojej wygody.
- Skonfiguruj siatkę – Istnieje kilka szablonów siatki dostępnych do bezpłatnego pobrania, możesz nawet dostosować swój własny szablon siatki za pomocą Telerik, UI-grid itp.
- Określ układ — ułóż pola, dodaj treść, jeśli jest dostępna, zaangażuj klienta na tym etapie, aby zakomunikował ewentualne rozbieżności.
- Przekształć go w prototyp.
Niektóre popularne narzędzia do tworzenia makiet
Bez względu na to, do jakiego rodzaju wireframingu dążysz, niskiej lub wysokiej wierności, korzystanie z narzędzi wireframing pomaga osiągnąć bardziej profesjonalny charakter i pracować w bardziej uporządkowany i uporządkowany sposób. Oto lista siedmiu narzędzi do tworzenia szkieletów, z których możesz efektywnie korzystać:
- Balsamiq
- Mockflow
- InVison
- Wireframe.cc
- HotGloo
- Pidoco
- Axure
Wireframing to jedna z podstawowych umiejętności, które należy zdobyć jako programista produktu. Aby odnieść sukces jako menedżer produktu, musisz mieć holistyczne podejście do tworzenia szkieletów i innych umiejętności rozwoju produktu, co jest podstawą zrozumienia podstaw projektowania produktu. To z pewnością będzie Twoja brama do dobrze prosperującej kariery w rozwoju produktów.
Ucz się kursów zarządzania produktami online na najlepszych światowych uniwersytetach. Zdobywaj programy Masters, Executive PGP lub Advanced Certificate Programy, aby przyspieszyć swoją karierę.
