Zrób własną aplikację – narzędzia do tworzenia prototypów

Jeśli jesteś w stanie pomyśleć o rzeczy, którą może za ciebie zrobić aplikacja, ale nie udało ci się znaleźć odpowiedniej appki, gratulujemy – być może właśnie odkryłeś żyłę złota.

Aplikacje na telefon to obecnie jedna z najważniejszych gałęzi rynku IT. Do zaprojektowania aplikacji nie musisz nawet posiadać zaawansowanych umiejętności programowania – powstały już serwisy, które tworzą aplikacje, strony www i programy za pomocą przeciągnij-i-upuść (KLIK).

Jeśli jednak jesteś koderem i masz pomysł na stworzenie swojej aplikacji mobilnej, przyda ci się narzędzie do tworzenia prototypów. O tworzeniu prototypów w narzędziach webowych i aplikacjach desktopowych pisaliśmy już TU.

Teraz chcemy wam przedstawić cztery kolejne aplikacje do tworzenia prototypów aplikacji mobilnych na różne systemy operacyjne.

Narzędzia do tworzenia prototypów – strony czy warstwy?

Narzędzia do tworzenia prototypów aplikacji mobilnych działają w oparciu o strony lub warstwy.

Aplikacje, w których budujesz prototyp na podstawie stron polegają na tym, że tworzysz kolejne screeny, które łączysz za pomocą hotspotów lub przycisków. Tapnięcie w przycisk przeniesie cię z jednego ekranu do kolejnego. Do wyboru masz różne przejścia między ekranami (przenikania, przewijania i inne).

Narzędzia działające na stronach są wygodne, jeśli nie wiesz dokładnie, z ilu ekranów będzie się składała twoja aplikacja. Więcej na ich temat pisaliśmy TU.

Narzędzia bazujące na warstwach każdy element interfejsu (czyli każda warstwa) może być dowolnie edytowana: przez tapnięcie, przeciągnięcie i animację.

Ustalanie położenia i funkcji każdego elementu aplikacji osobno może zająć tyle, ile napisanie całego kodu do niej, więc ten typ narzędzi do prototypów warto stosować, kiedy chcesz przetestować nowy typ interakcji lub animacji.

4 narzędzia do tworzenia prototypów aplikacji

Prototyp aplikacji mobilnych – Proto.io

Źródło
Systemy: iOS, Android
Cena: 15-dniowa darmowa wersja próbna, plany płatne od 29$ na miesiąc na 5 projektów

Aplikacja działa w systemie przeciągnij-i-upuść, a dzięki listom wartości i przyciskom możesz dopracować szczegóły swojego projektu. Biblioteka Proto.io zawiera sporo gotowych elementów UI, a niektóre z nich są edytowalne. Oprócz pracy na warstwach możesz skorzystać także z możliwości pracy ze stronami.

Projekt możesz udostępnić w postaci linka lub prototypu na aplikacjach iOS lub Android.

Niestety, aplikacja nie ma opcji edycji w czasie rzeczywistym – aby zobaczyć każdą zmianę, musisz zapisać i odświeżyć projekt.

Prototypy aplikacji mobilnych – Facebook Origami/Avocado

Origami źródło
Avocado źródło
System: iOS
Cena: darmowy

Origami jest dodatkiem do Quartz, narzędzia deweloperskiego Apple. W Quartz Composer tworzysz programy przez łączenie ścieżek, z których każda ma swoją funkcję.

Origami to po protu zbiór kilku ścieżek, które odpowiadają za stronę wizualną i design UI. Łączenie ścieżek przypomina programowanie, ale za pomocą opisu logiki programu (jeśli…, to…).

Origami została stworzona przez projektantów Facebooka. Bazując na środowisku Quartz powstał także farmework do tworzenia prototypów stworzony przez designerów z IDEO.

Origami na początku jest mało intuicyjne, ale możesz liczyć na wsparcie dużej społeczności użytkowników. Origami ma swoje plusy i minusy: z jednej strony umożliwia śledzenie zmian w czasie rzeczywistym, z drugiej udostępnianie prototypów klientom to dość złożony proces.

Aplikacje do tworzenia prototypów – RelativeWave – Form

Źródło
System: OS
Cena: darmowy

A gdyby zostawić to, co najlepsze w Origami, ale pozbawić tę aplikację „bagażu” narzucanego przez Quartz? W ten właśnie sposób powstała aplikacja Form, w której usunięto wszystkie zbędne ścieżki.

Gotowy prototyp prześlesz klientowi w formacie .form., który otwiera się na urządzeniu z systemem iOS.

Jak stworzyć prototyp aplikacji – Framer

Źródło
Cena: framer.js jest darmowy, Framer Studio jako aplikacja desktopowa ma 8-godzinny darmowy okres próbny, plan płatny od 15$ na miesiąc

Framer występuje w dwóch wersjach: aplikacji desktopowej dla Mac oraz biblioteki JavaScript. Trudno uznać tę aplikację za dobrą dla początkujących. Wymaga znajomości pisania kodu do każdego elementu – od animacji do interakcji. Projektanci pozbawieni funkcji przeciągnij-i-upuść mogą czuć się mniej pewnie.

Framer używa uproszczonej wersji Java Script – CoffeeScript. Silnik wciąż działa na JavaScript, dlatego w ramach aplikacji możesz zrobić w zasadzie to wszystko, co jest możliwe w przeglądarce internetowej.

Framer umożliwia śledzenie zmian w czasie rzeczywistym, integrację z Photoshopem oraz możliwość przesłania klientowi prototypu w postaci linka.

Narzędzia do tworzenia prototypów – podsumowanie

Tworzenie aplikacji mobilnej nie musi być trudne – w niektórych wypadkach nie musisz nawet być zaawansowanym programistą.

Podobnie jest z tworzeniem prototypów: choć niektóre aplikacje wymagają znajomości JavaScript lub środowiska Quartz, są również takie, w których prototyp tworzy się za pomocą przeciągnij-i-upuść. Ta funkcja okazuje się szczególnie przydatna dla projektantów i grafików, którzy nie znają podstaw programowania.

Część aplikacji jest darmowa lub udostępnia darmowe wersje próbne. Aplikacje, które bazują na stronach, a nie na warstwach, sprawdzą się, kiedy pracujesz nad spójnością korzystania z aplikacji, z kolei do testowania nowych rozwiązań wykorzystaj raczej aplikacje bazujące na warstwach.