1. Start
  2. Wireframing

Wireframing

Zasadniczo wireframe to wczesna makieta witryny lub aplikacji lub też sposób na dodawanie nowych funkcji do istniejącej strony. Makieta to wizualna reprezentacja tego, co będzie na danej stronie: jaką zawartość i funkcjonalność będzie zawierać. Elementy, które są zawarte w wireframe’ie strony, będą całkowicie zależały od celu danej strony. Na przykład strona główna bloga…

Jeśli kiedykolwiek zajmowałeś się projektowaniem aplikacji lub stron internetowych w jakimkolwiek charakterze, prawdopodobnie znasz termin wireframing – czyli proces tworzenia makiet. W języku polskim nie ma jednoznacznego tłumaczenia tego słowa, ale najczęściej używa się słów: tworzenie szkieletów, makietowanie, prototypowanie. Każde słowo ma jednak inne znaczenie.

Strony internetowe lub aplikacje na ogół zawierają wiele elementów jak: nagłówki, stopki, menu, paski wyszukiwania, nagłówki, tekst, wezwania do działania itp. Ustalenie, w jaki sposób mają być rozmieszczone na ekranie, nierzadko zajmował wiele godzin pracy. Z pomocą przyszła tu metoda zwana wireframing’iem – czyli błyskawiczne i tworzenie wizualnych prototypów. Inaczej mówiąc, wireframing to skok o tyczce w przeniesieniu strony internetowej lub aplikacji z czyjejś myśli do produktu na żywo.

Co to jest wireframing?

Zasadniczo wireframe to wczesna makieta witryny lub aplikacji lub też sposób na dodawanie nowych funkcji do istniejącej strony. Makieta to wizualna reprezentacja tego, co będzie na danej stronie: jaką zawartość i funkcjonalność będzie zawierać. Elementy, które są zawarte w wireframe’ie strony, będą całkowicie zależały od celu danej strony. Na przykład strona główna bloga i strona docelowa webinaru będą zawierać różne elementy i funkcje.

Ponieważ „wireframing” to termin bezpośrednio kojarzony z komputerami i otaczającą je technologią, jest on używany w zasadzie dopiero od lat 80. Mówiąc najprostszym językiem, wireframing to wczesny projekt aplikacji lub strony internetowej. Ale aby zrozumieć prawdziwa moc makiet, potrzeba zanurzyć się znacznie głębiej. Poszukajmy zatem odpowiedzi na pytania: czym tak naprawdę są modele makietowe, dlaczego są używane, kto ich używa, a także jak są zbudowane.

Jaki jest cel makiet?

Modele szkieletowe są używane na wczesnych etapach procesów tworzenia aplikacji i stron internetowych. Można, oczywiście, budować aplikacje i strony internetowe bez użycia wireframe’ów, ale większości przypadków, szczególnie przy większych projektach, nie jest to zalecane. Projekty internetowe często angażują wiele osób, z obydwu stron – klient i wykonawca. Zła komunikacja lub nieprzemyślany project road map mogą zniweczyć projekt lub spowodować, że nie osiągnie on zamierzonych celów. Wireframing pomaga uniknąć obu.

Projekty często przechodzą przez wiele modeli szkieletowych w miarę rozwoju projektu i wprowadzania udoskonaleń. Model szkieletowy pełni też funkcję archiwizowania projektu, dzięki czemu interesariusze z obu stron mogą spojrzeć wstecz na wprowadzone zmiany lub wcześniejsze decyzje.

Tworzenie makiet często umożliwia również współpracę w różnych formach między zespołami. Wszyscy członkowie zespołu zaangażowani technicznie w tworzenie strony internetowej lub aplikacji mogą komunikować się i widzieć te same informacje o tym, co należy uwzględnić. Tak więc w miarę postępów procesu tworzenia, modele szkieletowe utrzymują wszystkich na tej samej stronie i zmierzają do tego samego celu.

Gdzie jest ten wireframing?

Zgodnie z kursem Dave’a Holstona „Managing a Web Design Project From Start to Finish”, tworzenie witryny internetowej składa się z ośmiu kroków:

  1. Definicja projektu
  2. Zakres projektu
  3. Modele szkieletowe i architektura witryny
  4. Projekt wizualny
  5. Rozwój witryny
  6. Testowanie witryny
  7. Uruchomić
  8. Utrzymanie strony

Wireframing odbywa się na wczesnym etapie procesu, jednocześnie z architekturą witryny, która powinna brać pod uwagę takie rzeczy, jak ogólnie rozumiany User Experience, strategia treści i cele biznesowe.

Prawda jest czasem okrutna: strony internetowej lub aplikacji zbudowanej profesjonalnie i jasno określonym przeznaczeniem nie można zbudować bez makiety. Jest to jedna z najwcześniejszych wizualizacji strony internetowej lub aplikacji, która pomaga kierować pracą wielu osób lub zespołów zaangażowanych w dalszy etap procesu tworzenia.

Jaka jest różnica między modelem szkieletowym a makietą

Wireframe to termin, który jest ściśle powiązany z innymi etapami w procesie tworzenia. Makieta jest często mylona z modelem szkieletowym. Szkielet zawiera podstawowy układ strony internetowej lub aplikacji, makieta jest bardziej zaawansowaną wersją elementów projektu produktu.

Szkielet jest używany głównie do projektowania funkcjonalności produktu. Makieta służy do testowania różnych elementów „kosmetycznych” produktu, ale jest ograniczona tylko do funkcjonalności zaprojektowanej za pomocą szkieletu.

Jaka jest różnica między makietą a prototypem

Prototyp jest jeszcze bardziej zaawansowany niż model szkieletowy czy makieta. Zasadniczo jest to szkic produktu. W przypadku produktów cyfrowych, prototypy jako jedyne z trzech są interaktywne i pozwalają użytkownikowi na kliknięcie, w przypadku prototypy rzeczywistego – możemy go wziąć do ręki i w dosłownym sensie poczuć jego wagę.

Ogólnie rzecz biorąc, prototyp to nieaktywna symulacja strony internetowej lub aplikacji, która umożliwia zespołowi wypróbowanie ich działania. Nie działa jak produkt końcowy, ponieważ nie zawiera elementów zaplecza, ale prototyp z założenia ma być jak najbardziej zbliżony do rzeczywistego.

Kto używa makiet?

Modele szkieletowe są używane przez osoby pełniące różne role w procesie tworzenia całej witryny internetowej i procesach tworzenia aplikacji, a każda rola wykorzystuje je na różne sposoby. Jeśli używany specjalnego oprogramowania do tworzenia makiet, oprogramowanie takie dzieli użytkowników na to na dwa segmenty: role techniczne i nietechniczne.

Wireframing
Wireframing na papierze

Jak role techniczne używają modeli szkieletowych

Projektanci UX

Projektanci UX to członkowie zespołu, którzy faktycznie tworzą szkielet na podstawie zakresu projektu i definicji, którą otrzymali. Biorąc pod uwagę wiele czynników, próbując stworzyć układ, który będzie spełniał cele projektu: najlepsze praktyki dotyczące użyteczności, hierarchia wizualna, wytyczne dotyczące marki i wiele więcej. Projektanci UX biorą również udział w badaniach użytkowników i testach użyteczności, aby lepiej zrozumieć, w jaki sposób użytkownik będzie poruszał się po stronie. Tworzenie szkieletu z UX na czele ma kluczowe znaczenie dla pozytywnego doświadczenia klienta.

Graficy

Graficy biorą iteracje wireframe’ów do projektu i przekształcają je w gotowy projekt.

Deweloperzy i inżynierowie

Deweloperzy i inżynierowie biorą model szkieletowy i ożywiają go technicznie. Biorą model szkieletowy i tworzą kod oraz zaplecze niezbędne do tego, aby działał tak, jak powinien. Są chwile, w których zaprojektowanie modelu szkieletowego nie jest wykonalne w praktyce lub rozwiązanie, które sprawi, że funkcjonalność będzie działać, spowoduje nieoczekiwane problemy (na przykład zmniejszenie szybkości ładowania witryny). Może to spowodować potrzebę dalszych iteracji i tworzenia nowych modeli szkieletowych.

Zespoły SEO

Jeśli strona internetowa ma na celu przyciąganie ruchu organicznego, członkowie zespołu SEO muszą upewnić się, że jest technicznie skonfigurowana, aby umożliwić optymalne indeksowanie przez wyszukiwarki. Będą musieli wziąć pod uwagę takie kwestie, jak głębokość klikania strony (jak daleko strona jest od strony głównej), szybkość ładowania strony internetowej, nagłówki, tekst alternatywny obrazu, zawartość strony, linki do innych stron w Twojej witrynie i nie tylko.

Menedżerowie produktu

Menedżerowie produktu mają za zadanie spierać się ze wszystkimi innymi członkami zespołu i ich rozważaniami, zarządzać interesariuszami, komunikować się w zespole i przeprowadzać produkt od pomysłu do gotowego projektu. Menedżerowie projektów wchodzą w interakcję z modelami szkieletowymi jako jednym z etapów tego procesu, zapewniając, że szkielet spełnia cele projektu i odpowiada potrzebom każdego interesariusza. Często będą potrzebować nowych modeli szkieletowych, ponieważ konieczne są nowe iteracje.

Jak role nietechniczne używają modeli szkieletowych

Role nietechniczne to członkowie projektu, którzy nie są bezpośrednio zaangażowani w tworzenie szkieletu lub aplikacji / strony internetowej, ale nadal są interesariuszami produktu końcowego.

Zespół ds. sprzedaży

Podobnie jak w przypadku zespołu ds. Sukcesu klienta, zapętlenie zespołu sprzedaży pozwala im dzielić się z klientami lub potencjalnymi klientami nadchodzącymi funkcjami lub produktami firmy. Może to być jednak niebezpieczne, jeśli Twój zespół sprzedaży przekroczy obietnice. Ponadto zezwolenie członkom zespołu sprzedaży na komentowanie modelu szkieletowego może pomóc im w dzieleniu się opiniami, które otrzymali od klientów lub potencjalnych klientów w przeszłości, potencjalnie chroniąc firmę przed negatywnymi opiniami.

Zespół ds. marketingu

Członkowie zespołu marketingowego mogą zapewnić, że projekt jest zgodny z oznaczeniem marki i przekazem treści strony lub że zamierzone wezwanie do działania znajduje się na stronie.

Jak tworzyć modele szkieletowe

Modele szkieletowe można tworzyć ręcznie za pomocą papieru i ołówka – projektanci UX często robią to właśnie w ten sposób na etapie robienia notatek. Ale prawie zawsze dalsze iteracje są wykonywane za pomocą oprogramowania. Pozwala to na dokładniejsze projekty, łatwiejsze poprawki, lepszą współpracę i znacznie więcej.

Oprogramowanie do tworzenia makiet

Wireframing zyskał na popularności wraz ze wzrostem UX, UI i użyteczności oraz ogólnym wzrostem liczby istniejących witryn internetowych i aplikacji. Wraz z tym nastąpił wzrost liczby i jakości narzędzi programowych do tworzenia szkieletów. Uwzględniono również przyjęcie oprogramowania w chmurze oraz łatwość tworzenia aplikacji i witryn internetowych.

Zasadniczo wireframing można wykonać cyfrowo za pomocą większości narzędzi, w których można tworzyć wizualizacje. Do tworzenia szkieletów można używać narzędzi do projektowania ogólnego przeznaczenia, takich jak Adobe Illustrator.

Jednak doświadczeni projektanci i zespoły projektowe często używają narzędzi do tworzenia szkieletów stworzonych specjalnie do projektowania szkieletów. Te programy często mają funkcjonalność, która sprawia, że ​​praca z makietami jest szybsza i bardziej oparta na współpracy niż przy zastosowaniu innych, bardziej uniwersalnych narzędzi.

Podsumowanie

Makietowanie jest istotnym elementem procesu projektowania stron internetowych. Mimo to, są one tylko jednym etapem tego, co może być długim, opartym na współpracy procesem. Wykwalifikowani projektanci UX mogą stworzyć szkielet strony w sposób, który pomoże przewidzieć problemy z użytecznością i skierować użytkowników do działania, którego życzy sobie firma, jednocześnie spełniając oczekiwania użytkownika. Umiejętność tworzenia makiet nie następuje z dnia na dzień, ale jest to niezbędna umiejętność dla każdego zespołu programistów internetowych.

Chcesz wiedzieć jeszcze więcej?

Z przyjemnością opowiemy o szczegółach naszej wysublimowanej pracy i odpowiemy na każde Twoje pytanie.

Zobacz również

That’s the end, my beautiful friend

Porozmawiaj z nami!
Najwyższy czas poznać sekrety naszej wysublimowanej pracy.

Zadzwoń lub napisz do nas! Z przyjemnością zaprosimy Cię na spotkanie, na którym wszystko Ci opowiemy i pomożemy rozwiązać nurtujące Cie problemy.