Framer – błyskawiczne prototypowanie Twoich projektów

Błyskawiczne tworzenie prototypów jest potrzebą chwili dla dzisiejszych designerów, niezależnie od branży. Wytyczne, jakie otrzymują designerzy, są zwykle dość niejasne, a co za tym idzie, końcowy projekt wymaga wiele żmudnych poprawek.

Narzędzie do tworzenia prototypów wyposaża designerów w środki niezbędne do skutecznej komunikacji i współpracy z innymi zespołami czy klientami. Jednym z takich narzędzi jest Framer, stworzony z myślą o designerach UI/UX [ang. User Interface/User Experience]. Umożliwia im prezentowanie klientom swoich interaktywnych prototypów w efektywny sposób. Framer pozwala designerom wykańczać interaktywne elementy projektów w fazie prototypu zarówno za pomocą aplikacji komputerowych, jak i mobilnych.

Framer: Twórz i efektywnie finalizuj projekty

Framer to najprostszy sposób na stworzenie potężnego, interaktywnego i ruchomego prototypu na potrzeby designerów. To dobry sposób, by płynnie przejść z fazy prototypu do finalizacji projektu. Zamiast prezentacji papierowej wersji projektu, mamy możliwość dostarczyć klientowi interaktywny prototyp, który mogą dowolnie odtwarzać i wyrażać opinie na jego temat. Framer pozwala dokonać tego wszystkiego dzięki wielu, zróżnicowanym funkcjom.

• Prototypy tworzy się bez konieczności tworzenia nawet linijki kodu. Jeśli jednak użytkownik zna się na kodowaniu, Framer pozwala zanurzyć się głębiej w meandry tworzenia UI, by nanosić własne poprawki.
• Narzędzia do dodawania zróżnicowanych, możliwych do edycji motywów i elementów projektu są łatwe w obsłudze.
• Płynne sterowanie projektem i przejścia w wysokości 60 fps-ów to nieskończone pole możliwości.
• Przejścia pomiędzy stronami osiągnęły zupełnie nowy poziom: Możliwość własnego doboru kierunku i tempa sprawia, że przejścia między stronami osiągają zupełnie nowy poziom.
• Efekt poziomego i pionowego suwaka może być zintegrowany z szablonem.
• Szeroki zakres elementów wizualnych pozytywnie wpływa na satysfakcję użytkowników. Framer posiada funkcje wzbogacania aplikacji o barwne elementy, jak na przykład animacje — a wszystko to za pomocą prostej metody przeciągnij i upuść.
• Gotowe komponenty: Suwaki, dynamiczne mapy, integracja z serwisem YouTube, a także wiele innych elementów, które uczynią nasz projekt ciekawszym.
• Zasoby potrzebne do projektu, a w tym ruchome mapy, zestawy UI, a także wiele innych elementów dostępnych jest w sklepie, dzięki czemu nie musimy rozpoczynać całej pracy od zera.

Jak to działa

Framer oferuje prosty interfejs, w którym łatwo można rozpocząć pracę nad nowym projektem:

1. Z okienka głównego należy wybrać „Nowy Projekt”. Aby w nowym oknie otworzyć płótno, wraz z rozbudowanym zestawem narzędzi i podglądem na urządzeniu, aby móc na bieżąco analizować nasz projekt.
2. Płótno pozwala przeciągać elementy bezpośrednio z zestawu narzędzi. Ponadto, mamy możliwość importu wartości wektorów, aby rozpocząć pracę nad projektem.
3. Prostym sposobem na rozpoczęcie pierwszego projektu będzie rozpoczęcie pracy od gotowego szablonu aplikacji. Należy nacisnąć klawisz „F”, a otworzy się lista gotowych szablonów w postaci panelu wyboru z prawej strony okna.
4. Aby rozpocząć, należy wybrać jeden z takich szablonów; nazwijmy go naszym szablonem głównym. Mamy możliwość dowolnej zmiany rozmiaru w zależności od potrzeb, w tym celu wystarczy jedynie przeciągnąć krawędzie. Dodatkowo możemy dowolnie przesuwać szablon i powiększać konkretne jego obszary, za pomocą skrótów klawiszowych lub wyboru myszy.
5. Następnie mamy możliwość uzupełnienia naszego głównego szablonu w elementy takie jak symbole lub tekst, dostępne w zestawie narzędzi, w lewym panelu płótna. Dodane kształty i elementy mogą być wypełnione kolorem w ramach interaktywnego projektu. Wypełnienia te mogą przybrać formę gradientu lub nawet obrazu — zupełnie jak w innych narzędziach do edycji, takich jak Photoshop.
6. Płótna wyposażone są też w inteligentną siatkę, która może być wykorzystana do przypisywania elementów do projektu. Główny szablon można wypełnić z pomocą kilku różnych, wbudowanych szablonów, obrazów i interaktywnych elementów, w zależności od potrzeb.
7. Następnie, do naszego szablonu należy dodać suwak. Dokonamy tego, budując warstwę szablonu, wystarczy wybrać obszar płótna i stworzyć warstwę szablonu za pomocą wklejania wielu szablonów/elementów.
8. Kiedy już to zrobimy, należy wybrać suwak z interaktywnej listy narzędzi widocznej w lewym panelu, a następnie wskazać, w którym miejscu szablonu głównego chcemy umieścić element. Następnie wystarczy jedynie dołączyć opcję wyboru suwaka wraz z warstwą szablonu, za pomocą metody przeciągnij i upuść.
9. W ten sposób mamy już naszą pierwszą, prostą aplikację interaktywną, za pomocą której mamy możliwość analizy i podglądu płótna. Aplikacją sterujemy za pomocą kursora myszy. Mamy też możliwość eksperymentów z innymi elementami.

Ocena Framera

Zalety

• Narzędzie tak łatwe w instalacji i obsłudze jak każde inne narzędzie do edycji
• Wbudowane, zróżnicowane elementy, przyśpieszające tworzenie prototypów
• Przewaga nad statycznymi narzędziami do tworzenia projektów z suwakami, jak na przykład Photoshop
• Elementy projektu mogą być eksportowane i wykorzystane ponownie w ramach innych projektów
• Budowa aplikacji kompatybilna ze wszystkimi typami urządzeń i platform jak komputery, telefony czy tablety.
• Dobra komunikacja ze społecznością online
• Rozbudowane wsparcie bibliotek
• Sklep Frame X z widgetami UI

Wady

• Umiejętność kodowania może być konieczna, by radzić sobie w niektórych przypadkach
• Personalizacja gotowych elementów może być czasochłonna
• Gotowe elementy mają ograniczoną możliwość kreatywnych rozwiązań
• W celu uzyskania zadowalającego efektu może być konieczna personalizacja

Ostateczny werdykt

Framer to świetne rozwiązanie dla designerów, którzy mają już dość konwencjonalnych metod finalizacji projektu, wymagających serii spotkań i sesji współpracy pomiędzy zespołami i klientem. Za pomocą Framer mamy dostęp do interaktywnych aplikacji, nawet w fazie prototypu i finalizacji ważnych elementów projektu.

Jednakże chcąc stworzyć bogaty, interaktywny projekt w aplikacji, powinniśmy rozważyć personalizację i wykorzystanie różnych narzędzi, dzięki czemu nasze prace będą zróżnicowane. To dlatego, że Framer posiada jedynie ograniczony pakiet gotowych elementów.

W ostatecznym rozrachunku narzędzie to świetnie spełnia swoje zadanie, jakim jest tworzenie prototypów projektów i prezentacja konceptów w formie aplikacji.