Najlepsze zasoby do szkicowania szkieletowych siatek

Proces projektowanie interfejsu zawsze zaczyna się od generowanie pomysłów. Obejmuje to wizualizację, badanie innych witryn i szybkie prototypowanie. Ta wczesna faza idei ma kluczowe znaczenie zrozumieć układ i wrażenia użytkownika zamierzasz zbudować. W jaki sposób powinniście faktycznie wykonać pracę nad nowym projektem w trybie wireframing?

Jestem fanem tradycyjnego papieru i ołówka z dodatkowymi narzędziami według potrzeb. Ale cyfrowy szkielet jest również duży i jest realną opcją dla nowoczesnych projektantów. W tym artykule chciałbym udostępnić najlepsze zasoby dla obu technik, aby pomóc Ci stworzyć własne siatki szkieletowe interfejsu użytkownika oparte na siatce.

Wczesna konceptualizacja interfejsu użytkownika / UX

Zacznijmy od wyjaśnienia różnic między a model szkieletowy i a prototyp. Te dwa słowa są często używane zamiennie, ponieważ odnoszą się do tego samego procesu.

ZA model szkieletowy jest pojedynczy szkic statyczny interfejsu użytkownika strony internetowej lub aplikacji. Może mieć objaśnienia wyjaśniające tekst przycisku, marginesy, rozmiary elementów, a nawet animacje. Ale makiety są po prostu nieobrobione szkice dla poszczególnych stron.

Podobnie, a prototyp jest jak schemat blokowy pokazujący, jak różne strony łączą się ze sobą. Tak więc prototyp łączy szkielety, aby pokazać, jak różne przyciski lub linki powinny prowadzić do innych stron.

Te definicje nie są wykute w kamieniu, niektórzy projektanci mogą mieć własną terminologię i mogą nie zgadzać się z moim dokładnym sformułowaniem. Ale tak właśnie widziałem ich opisywanie i ilu projektantów rozumie te terminy najlepiej.

Więc co dokładnie masz robić z tymi wczesnymi koncepcjami? Czy są naprawdę potrzebne? Powiedziałbym, że prototypowanie nie zawsze jest konieczne, ale jest to bardzo dobry pomysł, zwłaszcza w przypadku projektowania aplikacji ze złożonymi interakcjami.

Ale wireframing jest zawsze dobrym pomysłem dla każdego nowego projektu. To pomaga skup się na dużym obrazie bez obawy o szczegóły. Masz wrażenie, że cała strona jest ułożona, a to jest nieocenione podczas projektowania konkretnego układu.

Cele dla Wireframing

Za każdym razem, gdy rozpoczynasz nowy projekt, powinieneś kontemplować co próbujesz rozwiązać. Każda witryna ma określony cel. Wiele witryn ma nawet wiele celów, w których niektóre cele są ważniejsze niż inne.

Użyj przewodnictwa jako przewodnika, który pomoże Ci znaleźć najlepszą strategię uchwycenie celu (ów) strony internetowej. Prawdopodobnie nie zdarzy się to w pierwszym modelu szkieletowym, więc przygotuj się nakreślić wiele różnych pomysłów.

Wyszukaj inne podobne witryny i zapisz ich najlepsze funkcje. Przeanalizuj, w jaki sposób treść jest zorganizowana i jak przechodzisz przez każdą stronę.

Pomyśl o modelach szkieletowych z interaktywny punkt widzenia. To nie są tylko ładne zdjęcia. Są to reprezentacje cyfrowych interfejsów i chcesz naszkicować swoje pomysły z myślą o tym.

Posiadanie zasobów opartych na siatce, niezależnie od tego, czy są one wykonane z papieru, czy są cyfrowe, może bardzo pomóc w szybkim szkicowaniu. Sprawdźmy teraz najlepsze zasoby do tworzenia makiet.

Siatkowe sketchpady

Zawsze możesz zacząć od podstawowych szkiców miniatur na papierze do drukarki tylko do mapować szorstkie pomysły. Osobiście zaczynam pracę na papierze do drukarek, ponieważ w ten sposób mniej martwię się o siatki i więcej o nich generowanie pomysłów.

Szkicowniki z siatką punktów to najlepszy sposób, jeśli chcesz posprzątać pomysł, i nadaj mu więcej struktury. Siatka pomaga oszacować odległości między przedmiotami na stronie i utwórz rodzaj symetrii w modelu szkieletowym.

Istnieje wiele świetnych produktów, jeśli chcesz rozpocznij wireframing na papierze, na przykład Rhodia Dot Pad występuje w różnych rozmiarach do codziennego użytku. Ma tylko 80 stron, ale jest to dość typowe dla większości szkicowników siatkowych.

Kolejnym bardzo fajnym i konfigurowalnym produktem jest Dotgrid. Wszystkie przedmioty Dotgrid są droższe niż książki Rhodia, ale zawierają więcej materiałów i niestandardowych wzorów okładek.

Dotgrid akceptuje nawet zamówienia na zamówienie, które pozwalają zaprojektuj swój własny szkicownik. Każda książka zawiera prawie 100 arkuszy, więc wraz z przodem i tyłem otrzymujesz około 200 stron do szkicowania siatki.

Kilka innych szkicowników do siatki punktowej, o których chcę wspomnieć, to siatka Behance Dot, która jest twarda i spiralnie związana, chociaż zawiera tylko 50 arkuszy papieru.

Responsive Design Sketchbook jest jednym z najlepszych zasobów dla projektantów stron internetowych. Żaden inny projektant produktu nie potrzebowałby responsywnego szkicownika projektowego, ale projektanci stron internetowych czerpią ogromne korzyści z wolności generuj pomysły przy różnych szerokościach urządzenia na górze układu siatki.

Te responsywne klocki mają także 50 arkuszy o łącznej liczbie 100 stron, ale każda strona ma cztery różne czułe siatki reprezentujących różne punkty przerwania w responsywnym projekcie: komputer stacjonarny, laptop, tablet i smartfon.

Chociaż projekt jest mdły w porównaniu z książkami Dotgrid, nikt inny nie rozważał responsywnych szkicowników dla projektantów stron internetowych. Jeśli jesteś w tym rodzaju, to warto zamówić go na jazdę próbną.

Jeśli naprawdę lubisz rzeczy ręcznie robione i nie chcesz wydawać żadnych pieniędzy, możesz również wydrukuj własne strony siatki ze szkicem interfejsu. Ta darmowa strona oferuje różne szablony siatki można drukować i używać do ręcznie rysowanych makiet.

Siatki występują w rozmiarach liter A4 i US dla różnych stylów papieru do drukarek. Możesz wybierać spośród wielu opcji, takich jak szablony pełnowymiarowej przeglądarki internetowej lub różne ekrany iPhone'a.

Wszystkie te opcje są świetne i warte zbadania, jeśli jesteś w to zamieszany szkicowanie ołówkiem. Papier jest jednym z najłatwiejszych nośników, które pozwalają szybko zdobyć nowe pomysły, dlatego często jest preferowanym wyborem nawet przez projektantów interfejsu użytkownika.

Narzędzia cyfrowe i aplikacje internetowe

Istnieje tak wiele świetnych programów do tworzenia szkieletów, że nie można ich objąć bez ryzyka paraliżu analizy, więc na razie skupmy się na niektórych najlepszych opcjach gridframing oparty na siatce.

Po pierwsze, chciałbym wspomnieć, że możesz użyć narzędzi Adobe, takich jak Illustrator, do stwórz własne makiety. To nie jest część przepływu pracy każdego, a Illustrator z pewnością nie jest wolny. Ale jeśli już pracujesz z Adobe Creative Cloud, może to być dobry początek.

1. Moqups

Moqups to jedno z najlepszych narzędzi internetowych wireframing. Pracujesz z edytorem wizualnym i biblioteką zasobów, aby przeciągać i upuszczać całą stronę.

Każdy nowy projekt Moqups ma wstępnie zdefiniowana siatka, i używa jasnych fioletowych linii, aby pomóc ci przyciągnąć elementy do wyrównania. To świetne narzędzie internetowe, które znacznie ułatwia projektowanie z siatką.

Witryna działa domyślnie na bezpłatnym planie, który ogranicza użytkownika do 300 obiektów stron. Witryna ma opcje premium, ale płacenie miesięcznej opłaty może być bardziej irytujące niż tylko korzystanie z narzędzi Adobe lub jednorazowy zakup Sketch.

2. Siatka Papr

Aplikacja internetowa Grid Papr jest całkowicie bezpłatna i oferuje zarówno publiczne, jak i prywatne konta dla twoich makiet. Tworzysz nazwę swojego projektu i uzyskasz swój własny unikalny adres URL dla modelu szkieletowego, który możesz edytować z dowolnego komputera.

Każdy nowy model szkieletowy pochodzi z siatką co pozwala wykonywać snap-to-grid na wszystkich elementach. Funkcje są proste, ale wystarczy utwórz szkielet lo-fi w kilka minut. Po prostu przeciągnij na stronę wszystko, co chcesz, i podążaj za siatką, aby stworzyć gwiezdny szkielet.

3. Wireframe.cc

Wireframe.cc to jedno z najprostszych i najbardziej minimalnych narzędzi, które można wykorzystać do tworzenia szkieletów. Posiada funkcję bezplatny interfejs z gotowa siatka i zorganizowane paski narzędzi. Po prostu kliknij i przeciągnij, aby utworzyć nowe elementy na płótnie. Możesz także zapisać i udostępnić swoją pracę.

To kolejne narzędzie oferowane za darmo z opcjonalnymi planami premium. Każdy plan jest rozliczany co miesiąc, więc jest bardzo podobny do Moqupów w strukturze cen. Darmowe narzędzie jest dostępne z dowolnego komputera bez konta.

4. Przedrzeźniacz

Mockingbird to kolejna świetna opcja, która oferuje znacznie więcej funkcji niż większość narzędzi do rysowania. Możesz zacząć za darmo, ale okres próbny jest ograniczony do 7 dni. Może to być denerwujące dla niektórych użytkowników, ale narzędzie jest naprawdę niesamowite i działa we wszystkich przeglądarkach.

Mockingbird ma niekończącą się bibliotekę elementów interfejsu użytkownika, takich jak karty, akordeony, menu rozwijane, odtwarzacze wideo i proste łącza tekstowe. Domyślna siatka używa systemu siatki 960gs, ale możesz wybierać spośród 12, 16 i 24 kolumny.

Ostatnie słowa

Niezależnie od tego, czy wybierzesz tradycyjny czy cyfrowy szkielet, zawsze chodzi o jakość produkcji. Podczas tego rodzaju pracy jest wiele do nauczenia się, więc znajdź dowolne narzędzie, które wydaje ci się najbardziej wygodne.

Idąc dalej, najlepszą rzeczą do zrobienia jest po prostu zacznij rysować. Poczuj, co lubisz najlepsze (papierowe lub cyfrowe) i stwórz własne. Zasoby w tym artykule powinny dać ci więcej niż wystarczająco dużo, aby zacząć korzystać z tworzenia własnych interfejsów cyfrowych.

(Zdjęcie na okładce: Oykun Yilmaz)