Popraw swój przepływ pracy dzięki narzędziom do prototypowania dla projektantów

Nie wiem jak wy, ale zawsze szukam idealnego narzędzia do prototypowania dla mojego przepływu pracy przy projektowaniu stron internetowych. Istnieje wiele opcji, ale jedno jest pewne: możesz wydajniej pracować nad swoimi projektami dzięki szybkiemu prototypowaniu.

Czy są tam fani HTML, CSS lub Javascript? Jeśli lubisz te technologie, możesz być po prostu Szybkim prototypem. Jako projektanci stron internetowych, coraz więcej z nas wypełniło tę lukę i wykonuje pewne prace programistyczne. Oprócz tego, że jesteśmy supergwiazdami wizualnymi, jesteśmy również ekspertami w tworzeniu kodu.

Posiadając działający, zakodowany prototyp, możesz szybko rozpocząć pracę, z możliwością udostępniania swojej witryny klientom i uzyskiwania informacji zwrotnych na wczesnym etapie procesu. Jeśli kodowanie nie jest twoją sprawą, ale nadal chcesz tworzyć prototypy w szybkim tempie, istnieje wiele narzędzi, które zapewnią twoim klientom prototyp wysokiej jakości.

Dlaczego szybkie prototypowanie?

Szybkie prototypowanie jest często kluczowym elementem w zwinnym procesie. Projektowany i rozwijany jest działający, działający przykład Twojej witryny, a często kod z prototypu może być później ponownie wykorzystany w rzeczywistym procesie rozwoju. Informacje zwrotne są pozyskiwane i przekazywane na wczesnym etapie procesu, co pomaga zmniejszyć liczbę zmian w fazie rozwoju. Projektanci często zgadzają się, że poprawia to ostateczny projekt, ponieważ po drodze wypróbowywane są różne warianty. Podczas tworzenia prototypu ważne jest, aby wybrać narzędzie, które pozwoli Ci pracować szybko i wydajnie, niezależnie od tego, czy kod jest zaangażowany, czy nie.

Rapid Prototypers wnosi wartość do każdego projektu, a klienci z pewnością uwielbiają widzieć działający przykład. Większość ludzi jest wzrokowców i jeśli dostępny jest dla nich prototyp, korzystne jest zobaczenie projektu w przeglądarce, najlepiej na wielu urządzeniach.

Prototypy statyczne i działające

Tradycyjnie projektanci tworzyli statyczne makiety dla prototypów, często w Photoshopie lub Illustratorze. Te statyczne makiety zapewniają ogromną wartość, ale działające prototypy są świetną opcją, ponieważ projekty można natychmiast testować w przeglądarce, gdy są opracowywane. Wielu projektantów zauważa, że ​​wraz ze wzrostem umiejętności kodowania, kodują szybciej, a projektowanie w przeglądarce staje się dla nich normą. Jeśli chcesz, nie musisz polegać na statycznej makiecie Photoshop/Illustrator, jak kiedyś.

Jak szczegółowe muszą być prototypy?

Nie ma dobrej lub złej odpowiedzi na ilość szczegółów projektowych, które musisz dostarczyć, zależy to tylko od klienta i projektu. Być może znasz termin „wierność” w świecie projektowania. Odnosi się to do ilości szczegółów i interakcji zawartych w projekcie. Niska wierność jest bardzo prosta, często „szkicowa” i nie pozwala użytkownikowi na interakcję z projektem. Podano bardzo mało szczegółów projektu, a niska wierność zawiera tylko podstawowe informacje dotyczące rozmieszczenia komponentów w prototypie. Prototypy o wysokiej wierności często umożliwiają interakcję użytkownika i są zbliżone do rzeczywistej reprezentacji witryny. Elementy projektu często zawierają dużo szczegółów i są bardzo dopracowane.

Prototyp o niskiej wierności.

Prototyp o wysokiej wierności.

Narzędzia, które wybierzesz dla swojego prototypu, będą zależeć od wymagań dotyczących wierności. Jeden niekoniecznie jest lepszy od drugiego, zależy to tylko od zakresu projektu.

Świetne narzędzia do prototypowania

Teraz, gdy omówiliśmy już podstawy tworzenia prototypów, przyjrzyjmy się niektórym z dostępnych narzędzi. Narzędzia do prototypowania mają różne poziomy wierności i ograniczenia. Jeśli kodowanie jest w Twojej sterówce, super! Ale przyjrzymy się też pokrótce niektórym opcjom, które nie wymagają znajomości kodu.

Narzędzia do prototypowania do szybkiego kodowania

Frameworki to narzędzia, które zapewniają punkt wyjścia do ustandaryzowanego kodu składającego się z HTML, CSS, JS itp. W przypadku prototypu, framework to świetna opcja do szybkiego tworzenia projektu internetowego. Bardzo pomocne może być również stworzenie motywu startowego, który można ponownie wykorzystać w następnym prototypie.

Istnieją dwa świetne frameworki, które pozwalają na szybkie budowanie. Nawet podczas kodowania masz możliwość wyboru niższej lub wysokiej wierności. Możesz uzyskać tak szczegółowe lub tak podstawowe, jak chcesz, gdy zbliżasz się do szybkiego prototypowania. Gdy nauczysz się niuansów tych narzędzi, będziesz zaskoczony, jak szybko wszystko idzie.

Szybki prototyp, opcja pierwsza – Twitter Bootstrap

Obecnie Twitter Bootstrap jest w swojej trzeciej wersji, więc został dopracowany po drodze. To świetna platforma do tworzenia działającego prototypu, jeśli chcesz stworzyć kod. Jest świetny, ponieważ jest responsywny, łatwy do nauczenia i ma wiele elementów konstrukcyjnych, takich jak przyciski, modele, ikony itp. Dzięki tym elementom możesz szybko i łatwo uruchomić projekt internetowy. Wiele stron internetowych jest tworzonych przy użyciu Bootstrap, więc kod prototypowy można również wykorzystać później.

Szybki prototyp, opcja druga – Fundacja

Podobnie jak Twitter Bootstrap, Foundation jest świetną opcją do szybkiego stworzenia prototypu. Ta struktura jest bardziej podstawowa niż Bootstrap i wymaga więcej stylizacji CSS z góry, ponieważ nie ma tylu wartości domyślnych. Jest to również świetny wybór, ponieważ możesz szybko rozpocząć pracę, jednocześnie tworząc kod wielokrotnego użytku. Możesz użyć tego narzędzia do stworzenia prototypu, który może mieć niską lub bardzo wysoką wierność, w zależności od twoich preferencji.

Opcje prototypu, które nie wymagają kodowania

Zgodnie z obietnicą, oto kilka opcji prototypowania, które nie wymagają żadnego kodowania. Istnieje wiele opcji zarówno dla wysokiej, jak i niskiej wierności lub czegoś pośredniego.

Opcja trzecia szybkiego prototypu – stary dobry papier i ołówek

Ten statyczny prototyp można stworzyć bardzo szybko. Ta metoda jest łatwa w użyciu i powinieneś już znać jej funkcjonalność! Chociaż uważa się, że jest to mało wierne, szkicowanie może odciążyć projekt i umożliwić swobodny przepływ pomysłów. Wierz lub nie, ale czasami może to być wszystko, czego potrzebujesz do prototypu. To tylko zależy od projektu i klienta.

Szybki prototyp, opcja czwarta – stylowe płytki

Płytki Style to świetna opcja, jeśli wolisz statyczne podejście do prototypowania, a także chcesz czegoś o wysokiej wierności. Makiety projektowe mają mocne miejsce w projektowaniu stron internetowych (w końcu elementy projektu są tym, czego potrzebujemy do zbudowania strony). Ale zanim zainwestujesz czas na stworzenie pełnej makiety strony, świetnym rozwiązaniem są stylowe kafelki. Stanowią one ważny krok przed zainwestowaniem czasu w szczegółowy, pełny prototyp. Tezy zawierają wszystkie informacje wizualne, jakie miałaby makieta statyczna. Uwzględniono kolory, obrazy, style przycisków itp., aby dać klientom wyobrażenie o tym, jak będą wyglądać elementy projektu.

Szybki prototyp, opcja piąta – Omnigraffle

OmniGraffle to świetna opcja, która pozwala szybko stworzyć makietę strony internetowej, która służy jako prototyp o niskiej lub średniej wierności. Możesz dodawać łącza, wybierać spośród wstępnie ustalonych stylów i obiektów i nie tylko. To świetny sposób na odwzorowanie prototypu, a następnie stworzenie czegoś, z czym Twoi klienci mogą wchodzić w interakcje.

Szybki prototyp, opcja szósta – Invision Ap

InVision to wyjątkowa opcja, ponieważ możesz przesłać istniejący statyczny prototyp i uczynić go interaktywnym, bez potrzeby kodu. To świetny sposób na wykorzystanie statycznego prototypu, udostępnienie go klientom i śledzenie opinii. Ponadto za pomocą tego narzędzia możesz przeprowadzać testy użytkowników i przekazywać wszelkie inne informacje zwrotne.

Opcja 7 szybkiego prototypu Axure

Axure pozwala na stworzenie interaktywnego prototypu. Ponadto istnieją różne elementy interfejsu użytkownika, które można wykorzystać, aby rozwijać i dzielić się swoimi pomysłami. Od szybkich masek po dopracowany projekt z kolorami, gradientami, obrazami itp., to narzędzie oferuje szeroką gamę opcji wierności. Jest również wyposażony w przydatną opcję udostępniania, dzięki czemu użytkownicy mogą kliknąć i zobaczyć, jak będzie działać Twój projekt.

Szybki prototyp opcja ósma – Lucidchart

Lucidchart jest oparty na chmurze i działa na wielu urządzeniach. Współpraca jest również łatwiejsza, jeśli nad projektem pracuje wiele osób. Umożliwia prowadzenie rozmów z zespołem w czasie rzeczywistym, a także pozostawianie komentarzy bezpośrednio w prototypie. Tworzone są dynamiczne prototypy stron internetowych o średniej wierności z wieloma oferowanymi elementami interfejsu użytkownika.

Co dalej?

Jest wiele do rozważenia przy szukaniu wybranego narzędzia do prototypowania. Niezależnie od tego, czy wolisz kod na żywo, czy nie, istnieją narzędzia oferujące różne opcje wierności. Jeśli pracujesz w pojedynkę lub w dużym stopniu polegasz na komunikacji zespołowej, znajdziesz idealne rozwiązanie, które zaspokoi Twoje potrzeby.

Teraz, gdy jesteś uzbrojony w doskonałe narzędzia do prototypowania, możesz z dumą nosić odznakę Rapid Prototyper.