Forma i funkcja — przewodnik po najlepszych narzędziach szkieletowych

W 1487 r. Leonardo da Vinci narysował schemat zwany „pojazdem bojowym”, zaprojektowany pod patronatem księcia Mediolanu Ludovica Sforzy. Chociaż maszyna została celowo zaprojektowana tak, aby nie działała prawidłowo, grupa inżynierów odtworzyła ją w 2010 roku. Schemat Da Vinci jest jednym z najwcześniejszych przykładów podstawowego szkieletu.

Termin wireframe jest używany od dziesięcioleci, na długo przed tym, zanim został przyjęty przez świat projektowania stron internetowych. Modele szkieletowe były pierwotnie używane w oprogramowaniu do projektowania wspomaganego komputerowo (CAD) w celu zilustrowania projektu obiektu bez potrzeby szczegółowego przedstawiania. W rezultacie powstał projekt , który wyglądał, jakby był zrobiony z drutów, ergo, skończyliśmy z modelami szkieletowymi.

Ale czym jest szkielet w projektowaniu i jaki jest cel jego posiadania?

Model szkieletowy w projektowaniu cyfrowym to wizualny przewodnik lub schemat strony pozbawiony typograficznego stylu, kolorów, grafiki i elementów interaktywnych, reprezentujący określony punkt w procesie projektowania. Jego celem jest pokazanie pomysłów na układ na poziomie strony, które przedstawiają funkcjonalność, zachowanie i priorytet treści.

Projektanci używają modeli szkieletowych do łączenia podstawowych struktur koncepcyjnych z wizualnym projektem ekranu witryny lub aplikacji. Istnieją trzy różne rodzaje makiet:

• Niska wierność - rysunek na wczesnym etapie bez dużej ilości szczegółów. Makiety o niskiej wierności to często ręcznie rysowane szkice lub linie i kształty przedstawiające pomysł.
• Mid-fidelity — makiety, które zaczynają pokazywać więcej szczegółów komponentów i koncentrują się na układzie treści i ogólnej strukturze strony.
• Wysoka wierność — rysunki na późniejszym etapie (post iteracyjne), które przedstawiają więcej szczegółów i renderowania komponentów na wyższym poziomie, z charakterystyką behawioralną i skupieniem się na układzie treści.

Ewolucja modeli szkieletowych w projektowaniu cyfrowym to kolejny artefakt UX, który można dostarczyć: wireflow. Wireflows to połączenie modeli szkieletowych i schematów blokowych, dwóch artefaktów, które projektanci UX powoli połączyli w jeden w innym celu: aby zilustrować i śledzić interakcje, które reprezentują przepływy zadań w produkcie, takim jak aplikacja internetowa.

Problem, który projektanci napotykają z modelami szkieletowymi, polega na komunikowaniu podróży użytkownika. Chociaż istnieją bardziej złożone sposoby przedstawiania podróży użytkowników, istnieje tendencja do uwzględniania ich w prostocie modelu szkieletowego. Pomocnym narzędziem do tego jest mapa szkieletowa.

Mapa szkieletowa łączy modele szkieletowe z podróżami użytkownika (lub przepływami użytkowników), aby zademonstrować podróż użytkownika przez produkt za pomocą modeli szkieletowych.

Najlepsze narzędzia do tworzenia szkieletów

Projektanci mają wiele możliwości wyboru narzędzi do tworzenia szkieletów. Na rynku nieustannie pojawiają się nowe narzędzia, więc trudno za nimi nadążyć. Oto kilka cech świetnych narzędzi do tworzenia szkieletów, których należy szukać:

• Możliwość tworzenia różnych wierności (od niskiego do wysokiego)
• Stabilne oprogramowanie, które jest łatwe w użyciu i często aktualizowane
• Wbudowane szablony, symbole i standardowe komponenty interfejsu użytkownika z dodatkowymi możliwościami

Niektóre z narzędzi w tym przewodniku są bardziej skoncentrowane na wireframingu, podczas gdy inne starają się zachować równowagę między wireframingiem i prototypowaniem oraz funkcjonalnością makiety. Wybór jednego narzędzia zamiast drugiego (lub kilku razem) sprowadza się do preferencji projektanta.

Balsamiq

Balsamiq to proste w obsłudze narzędzie do tworzenia szkieletów o niskiej wierności, cenione ze względu na łatwość użycia i kultowy, „rysowany ręcznie” wygląd. Zawiera zestaw gotowych szablonów, z których można szybko i łatwo korzystać za pomocą edytora „przeciągnij i upuść”. Projektanci mogą dodawać własne zasoby i dostosowywać układ.

Podstawowe prototypowanie można osiągnąć, łącząc makiety, aby tworzyć proste, klikalne doświadczenia do testowania użyteczności podczas wyświetlania projektu w trybie prezentacji pełnoekranowej lub jako wyeksportowany plik PDF.

Balsamiq jest oferowany jako wersja komputerowa (Windows i Mac), usługa w chmurze lub jako wtyczka do Dysku Google, Confluence i JIRA.

Moqupy

Moqups to kolejne narzędzie do kreatywnej współpracy, które koncentruje się na wireframingu, ale może być również wykorzystywane do prototypowania. W przeciwieństwie do Balsamiq, jest czysto webowy i służy do tworzenia szkieletów dla aplikacji internetowych i mobilnych.

Główną różnicą między Moqups a Balsamiq jest wierność makiety. Podczas gdy Balsamiq tworzy wygląd „odręcznie rysowany”, Moqups zapewnia pełnokolorowe szablony i zestawy do projektowania aplikacji mobilnych i stron internetowych, w tym iOS, Android i Bootstrap.

Moqups różni się od Balsamiq na kilka innych sposobów. Oprogramowanie pozwala na skończoną edycję obiektów i zarządzanie stronami, dając projektantom możliwość definiowania obiektów „głównych”, co pozwala zaoszczędzić sporo czasu podczas wprowadzania zmian w makiecie podczas procesu iteracji.

Na przykład projektant tworzy główny obiekt przycisku o określonym rozmiarze, kształcie i kolorze. Ten przycisk jest używany wielokrotnie w całym modelu szkieletowym. Później, w procesie iteracji, jeśli projektant musi zmienić kolor przycisku, zamiast zmieniać każdy pojedynczy obiekt przycisku, może to zmienić raz, a wszystkie obiekty przycisku podrzędnego zostaną natychmiast zmienione.

Pidoco

Pidoco to najlepsze narzędzie do tworzenia szkieletów, które koncentruje się na dostarczanych materiałach o niskiej wierności z pewną podstawową interaktywnością. Również oparty na chmurze, wykorzystuje komponenty wielokrotnego użytku i różni się od Balsamiq i Moqups bardziej niezawodnym interfejsem szkieletowym.

Pidoco jest przydatne w przypadku aplikacji mobilnych i projektowania stron internetowych, ponieważ ma wbudowane widoki mobilne, dzięki czemu projektanci mogą zobaczyć, jak będą wyglądać ich strony aplikacji na różnych rozmiarach ekranu. Kolejną wbudowaną funkcją jest funkcja eksportu i specyfikacji . Pomaga to projektantom przejść od modelu szkieletowego do prototypu/makiety bez potrzeby stosowania wtyczki lub rozszerzenia.

Picoco wygląda i czuje się słabo, ale zawiera kilka funkcji, które zwykle można znaleźć w bardziej złożonych narzędziach do projektowania. Działa dobrze w przypadku projektantów, którzy stosują lean UX i muszą szybko iterować z krótszymi cyklami informacji zwrotnych.

Gliffy

Gliffy to narzędzie do tworzenia szkieletów o średniej wierności z kilkoma unikalnymi funkcjami, które odróżniają go od Balsamiq i Mockups. Jedną z unikalnych funkcji jest możliwość tworzenia obiegów. Gliffy ma wbudowane możliwości tworzenia schematów blokowych i diagramów z dołączonymi szablonami, mapami myśli i modelowaniem procesów biznesowych.

Podobnie jak inne narzędzia do tworzenia szkieletów, Gliffy zapewnia bibliotekę kształtów, ikon i możliwość udostępniania szkieletów natywnie w platformach Atlassian's Confluence, Slack, Basecamp, Trello i WordPress.

Jest to stosunkowo nowe narzędzie do projektowania szkieletów UX, jednak może pochwalić się dużą bazą subskrybentów profesjonalnych projektantów, którzy szukają prostych integracji i możliwości wykraczających poza statyczny szkielet.

Wireframe.cc

Wireframe.cc to podstawowe narzędzie do tworzenia szkieletów, podobnie jak Balsamiq. Ma przejrzysty interfejs bez wielu rozpraszających pasków narzędzi i ikon. W przeciwieństwie do wielu innych narzędzi, pozwala na „szkicowanie” makiet za pomocą myszy.

Wireframe.cc udostępnia bibliotekę szablonów i czystą, nieskomplikowaną obsługę obiektów. Pomocnym elementem, który Wireframe.cc oferuje podczas pracy z lean UX, jest adres URL dla każdej strony szkieletowej, dzięki czemu można go szybko i łatwo udostępnić w celu uzyskania opinii.

Nie ma wbudowanego prototypowania ani interaktywności, ponieważ koncentruje się wyłącznie na wireframingu o niskiej wierności.

Kapryśny

Nazywane „Dokumentami Google” dla modeli szkieletowych, narzędziami do tworzenia diagramów Whimsical mimics, takimi jak OmniGraffle i Visio. Nie skupia się na prototypowaniu/makietach, ponieważ skupia się głównie na wireframe'ach i schematach blokowych, co czyni go doskonałym kandydatem do tworzenia wireflow.

Podobnie jak Gliffy, Whimsical jest narzędziem do tworzenia szkieletów o średniej wierności i zawiera dużą bibliotekę konfigurowalnych elementów (przyciski, wejścia, pola wyboru itp.).

Nieograniczona współpraca nad tym samym dokumentem szkieletowym w tym samym czasie to świetna wbudowana funkcja dla zdalnych zespołów projektowych.

Adobe XD

Adobe XD przyciągnął ostatnio uwagę projektantów ze względu na prosty interfejs, głębokie powiązania z innymi produktami Adobe, łatwość obsługi i wbudowaną funkcjonalność, która ogranicza potrzebę polegania na wtyczkach i rozszerzeniach.

Istnieją dwa sposoby tworzenia modeli szkieletowych w programie Adobe XD. Można je budować za pomocą linii i kształtów do tworzenia obiektów i elementów lub można je budować za pomocą gotowych zestawów interfejsu użytkownika ze źródeł takich jak behance.net i zasoby XD.

Jedną z funkcji programu Adobe XD, która pozwala zaoszczędzić czas, jest możliwość tworzenia „głównych” komponentów (zwanych symbolami w szkicu), które są przydatne podczas wprowadzania zmian, ponieważ wszystkie komponenty utworzone z wzorca odziedziczą wszelkie zmiany.

Kolejną zaletą korzystania z XD jako narzędzia do tworzenia szkieletów jest możliwość przełączania się w tryb prototypowania jednym kliknięciem myszy. Tryb prototypowania jest wbudowany w XD i działa w tle, dzięki czemu projektanci nie marnują czasu na przechodzenie od modeli szkieletowych do prototypów.

Naszkicować

Sketch, popularne narzędzie do projektowania dla projektantów UX/UI, zapewnia platformę do edycji wektorów, prototypowania i współpracy, a także ma rosnącą bibliotekę setek wtyczek, które rozszerzają jego funkcjonalność.

Szkielet w programie Sketch jest bardzo podobny do Adobe XD z wykorzystaniem zestawów/szablonów i narzędzi do rysowania. Sketch w szerokim zakresie wykorzystuje symbole , które są komponentami wielokrotnego użytku, które można zdefiniować raz i używać wielokrotnie (przyciski itp.). Symbole instancyjne przejmują również wszelkie zmiany dokonane w symbolu „głównym”. Jest to korzystne dla projektantów, ponieważ często trzeba wprowadzić wiele zmian w całym procesie tworzenia szkieletu.

Sketch pozwala projektantom tworzyć modele szkieletowe, prototypy i makiety o wysokiej wierności. Nie jest to aplikacja oparta na chmurze, a jedną z potencjalnych wad jest to, że działa tylko z systemem macOS.

UXPin

UXPin to najlepsze narzędzie szkieletowe, które obsługuje interaktywne stany, logikę i komponenty programistyczne, dając projektantom możliwość kodowania warunkowych interakcji, zmiennych i wyrażeń.

UXPin wykracza daleko poza tworzenie szkieletów, koncentrując się przede wszystkim na prototypowaniu za pomocą bibliotek komponentów interfejsu użytkownika, symboli, narzędzi do rysowania wektorów i wspólnej edycji.

Dostępna jest wersja dla systemu Windows, macOS i chmury/przeglądarki. W przypadku tworzenia szkieletów o wysokiej wierności UXPin działa podobnie jak Sketch i Adobe XD. Nie jest to metoda „przeciągnij i upuść”, jak Balsamiq, ale przenosi prototypowanie i makiety na wyższy poziom dla projektantów, którzy chcą pozostać w jednym ekosystemie.

Podziwiać

Marvel, inne popularne narzędzie do projektowania, które ułatwia tworzenie szkieletów i prototypowanie, zapewnia projektantom znany interfejs typu „przeciągnij i upuść” do tworzenia szkieletów od niskiej do wysokiej wierności.

Marvel nie wymaga żadnych dodatków ani rozszerzeń, ponieważ zawiera wszystkie zasoby. Platforma jest w pełni oparta na chmurze, co sprawia, że ​​udostępnianie makiety innym członkom zespołu projektowego lub klientom jest szybkie i łatwe.

Jednym z powodów, dla których projektanci wybierają Marvela do tworzenia szkieletów, jest jego integracja z innymi platformami, takimi jak Jira, Sketch, Confluence, Dropbox, Slack i wieloma innymi. W przypadku współpracy z programistami, zdalnymi zespołami projektowymi i klientami ta funkcja pozwala zaoszczędzić projektantom dużo czasu.

Marvel ma również produkt o nazwie Pop, który pomaga przekształcić szkice szkieletowe piórem i papierem w interaktywne prototypy iPhone'a i Androida. Pop umożliwia projektantom robienie zdjęć ich szkiców i przekształcanie ich w interaktywne makiety.

Axure RP

Axure RP istnieje od dłuższego czasu i jest doskonałym narzędziem do tworzenia statycznych makiety (a także wysoce interaktywnych prototypów). Nie jest oparty na chmurze, ale działa zarówno w systemie Windows, jak i macOS.

Wireframing można wykonać za pomocą ogromnej biblioteki komponentów typu „przeciągnij i upuść”, jednak Axure RP to złożone narzędzie, które znacznie wykracza poza ramy szkieletowe. Korzystając z funkcji programistycznych Axure RP, projektanci mogą tworzyć zaawansowane prototypy z funkcjonalnością, która odzwierciedla w pełni działającą aplikację.

Biorąc pod uwagę wysoką krzywą uczenia się Axure, nie miałoby sensu używać go wyłącznie do statycznych modeli szkieletowych. Jeśli jednak celem jest wyprodukowanie prototypów, które są dopracowane i funkcjonalne, będzie to idealne narzędzie dla projektantów produktów.

Ulubione narzędzia szkieletowe Toptal Designers

Skontaktowaliśmy się z niektórymi projektantami Toptal, aby dowiedzieć się, jakich narzędzi do tworzenia szkieletów używają profesjonalni projektanci i dlaczego. Oto, co mieli do powiedzenia.

„Moje ulubione to Adobe XD i UXPin. Zaczynam wybierać XD jako ulubioną, ponieważ łatwo jest tworzyć szybkie makiety i testować pomysły, a stamtąd mogę faktycznie rozpocząć projektowanie, a nawet prototypowanie na tej samej platformie”. - Michael Craig

„Moim ulubionym jest Pop, ponieważ jest po prostu tak szybki. I tak zawsze rysuję swoje makiety na papierze, więc działa to świetnie i nie muszę niczego podwójnie obsługiwać. Uważam też, że jest to dobre dla całej sprawy „nie zakochuj się w rozwiązaniu”, ponieważ jest to tak wyraźnie lo-fi.” - Nicola Rushton

„Dla moich prac projektowych używam Axure prawie przez cały czas. Jest to wysoce niedoceniane narzędzie do kompleksowych prac projektowych, o bardzo dużej złożoności” - Andi Omtvedt

„Właściwie nie robię już modelu szkieletowego jako takiego — ponieważ uważam, że narzędzia są wystarczająco mocne, aby tworzyć prototypy o niskiej wierności, więc prawie łączą początkowy szkielet z lepszym wyglądem. Zaadoptowałem Framer X od stycznia tego roku i bardzo mi się to podoba”. - Charliego Williamsa

Streszczenie

Biorąc pod uwagę możliwość tworzenia wyrafinowanych prototypów, czy wireframing nadal ma znaczenie? Niektórzy profesjonalni projektanci będą argumentować, że szkielety to relikt przeszłości, podczas gdy inni twardo bronią swojego stałego znaczenia dla procesu projektowania.

Obecnie istnieje mnóstwo narzędzi szkieletowych, które ułatwiają proces projektowania. Niektórzy nadal koncentrują się wyłącznie na wireframing, nawet podczas gdy trend zmierza w kierunku produktów hybrydowych, które zaczynają się od wireframe'owania, ale zawierają również zdolność do prototypowania, a w wielu przypadkach tworzą w pełni funkcjonalne makiety.

Chociaż ewoluował od dostarczania o niskiej wierności do średniej lub wysokiej wierności, Wireframing z pewnością nie zniknie.

Dalsza lektura na blogu Toptal Design:

• Mapowanie szkieletowe: jak uniknąć pełzania zakresu
• Śmierć modelowi szkieletowemu. Prosto do High-Fidelity!
• Prezentacja narzędzi do projektowania — Adobe XD vs. Sketch (2019)
• Opanuj swoje rzemiosło dzięki tym najlepszym narzędziom UX
• 10 elementów UX, z których korzystają najlepsi projektanci