Jak stworzyć prototyp aplikacji nie będąc programistą? 3 kroki do imitacji startupu

Jeśli tak jak ja zaczynasz od poszukiwania programisty i jest to Twój pierwszy projekt – daj sobie z tym spokój. Uwierz mi, żeby podjąć pierwsze kroki w realizacji pomysłu na swoją rewolucyjną i niepowtarzalną aplikację, nie musisz być ani programistą, ani grafikiem. Wystarczy, że zaczniesz od stworzenia prostego prototypu z pomocą ogólnodostępnych i w większości darmowych narzędzi.

W tym artykule przedstawię Ci sprawdzone narzędzia i pomysły na to, jak z niczego stworzyć coś, co będzie skutecznie „imitowało” Twoją wymarzoną aplikację mobilną lub webową. Dzięki ich zastosowaniu będziesz mógł szybko zweryfikować swoje założenia i to zanim przystąpisz do kosztownej budowy docelowego produktu.

1. Zalety tworzenia prototypu aplikacji

Czy wiesz o tym, że prototyp aplikacji pomoże Ci nie tylko przedstawić swój pomysł w postaci namacalnych mock-upów, ale też zaoszczędzi sporą część Twoich pieniędzy i czasu. Dzięki prototypowaniu możesz:

• Łatwo podzielić się swoim pomysłem z przyjaciółmi, przyszłymi wspólnikami, pracownikami czy nawet inwestorami,
• Zaoszczędzić pieniądze i uniknąć wpadnięcia w pułapkę jaką jest budowa nieprzetestowanej (i w efekcie prawdopodobnie nietrafionej) aplikacji. (Pamiętaj aby zawsze zanim przystąpisz do prac, najpierw zebrać feedback od potencjalnych klientów!),
• Łatwiej przekazać swoją wizję UI/UX Designerowi lub Developerowi, co na pewno obniży koszt finalnego produktu,
• Przekonać się o słuszności swoich założeń oraz dopracować logikę pracy aplikacji – sam proces logowania/wylogowywania/rejestracji/resetowania hasła wart jest dogłębnej analizy, 

PAMIĘTAJ!

Nie musisz być grafikiem, żeby 'narysować’ swój pierwszy prototyp – pokażę Ci, gdzie znaleźć bezpłatne projekty interfejsu użytkownika, ikony i zdjęcia, oraz jakich narzędzi możesz użyć w celu dostosowania ich do swoich potrzeb.

Nie musisz być też programistą, żeby 'ożywić’ swój prototyp przez animację – pokażę Ci jak w łatwy sposób wprowadzić Twój interfejs w „ruch”, tak by sprawiał wrażenie prawdziwej aplikacji (80% użytkowników na pierwszy rzut oka nie zauważy różnicy – trust me! 😉 )

2. Narzędzia potrzebne do tworzenia prototypu aplikacji

Prototypowanie na papierze. Krok po kroku

1. Ściągnij stąd i wydrukuj darmowe szablony okna przeglądarki, ekranu smartfona czy tabletu. Kup ołówek i ewentualnie zaopatrz się we wzorniki elementów interfejsu użytkownika. 

2. Narysuj wszystkie widoki w aplikacji, które twoim zdaniem są kluczowe, by je dobrze przedstawić. Następnie sfotografuj je i połącz ze sobą przy użyciu prostej aplikacji na swojego smartfona. 

Efekt jaki możesz uzyskać jest widoczny poniżej.

Software przydatny w tworzeniu prototypów

Wprowadźmy teraz ten piękny, świeżo naszkicowany przez Ciebie prototyp na kolejny poziom. Poniżej znajdziesz listę programów, które są niesamowicie proste w obsłudze i posłużą Ci do stworzenia bardziej profesjonalnej wersji prototypu aplikacji.

Keynote lub PowerPoint – zaskoczony? Przy użyciu tych narzędzi jesteś w stanie zrobić dla swojego startupu nawet animację (explainer video). Istnieje wiele świetnych tutoriali, dzięki którym z łatwością stworzysz piękny i animowany prototyp,

Adobe XD – darmowy i prosty niczym kultowy i ponadczasowy MS Paint, tool do tworzenia prototypów aplikacji z wieloma przydatnymi funkcjami. Przy jego pomocy nie tylko narysujesz piękny interfejs, ale także stworzysz świetne animacje.

Cloud software do prototypowania apek

Piękno aplikacji wymienionych poniżej tkwi w tym, że mogą być używane bez instalacji i zbędnej konfiguracji, niezależne od tego z jakiego systemu operacyjnego korzystasz. Z całą masą tutoriali możesz zacząć swoją przygodę z prototypowaniem szybko i łatwo. Aplikacji tego typu jest bardzo dużo, ale moim zdaniem wystarczy jeśli zaczniesz od:

UXPin – narzędzie wymyślone przez naszych rodaków. Bardzo dobrze sprawdza się w tworzeniu i animowaniu interfejsów webowych oraz mobilnych. Dzięki niemu z łatwością podzielisz się swoim prototypem z klientem lub kolegami,by uzyskać feedback – wystarczy link!

Basamiq – narzędzie służące do tworzenia tzw. wireframe’ów aplikacji (można by powiedzieć, że są one szkicami funkcjonalnymi, gdzie User Experience jest ważniejszy od kolorów, pięknych czcionek lub zdjęć). Efekt jaki uzyskasz stosując ten program można by ulokować gdzieś pomiędzy szkicem na kartce, a prototypem wykonanym w UXPinie.

3. Zbiór inspiracji i gotowców dla Twojej aplikacji

Jak już wcześniej wielokrotnie wspominałem, nie musisz być grafikiem, aby stworzyć swoją pierwszą aplikację. Podobnie jak Picasso zaczerpnij inspiracji od innych, w twoim wypadku tych, którzy swoje zęby zjedli na UI/UX.

Uwierz mi, że łączenie elementów już stworzonych to najszybsza droga do nauczenia się i wypracowania swojego własnego unikalnego stylu.

Użyj tego zbioru narzędzi, wzorców, zdjęć, ikon i gotowych prototypów by zbudować jeden dla siebie. Gdy poszukujesz:

• Elementów Interfejsu użytkownika (UI) poszukaj ich na UI8.net,
• Ikon, wtedy zajrzyj Flaticon,
• Ciekawych czcionek, zapraszam FontSquirrel albo Fonts Google,
• Darmowych zdjęć wysokiej jakości – Pexels, Unsplash czy Tookapic.

Jeśli szukasz inspiracji dla swojego UI, polecam Pttrns lub Collectui. Zobacz też gotowe prace doświadczonych UI/UX Designerów i grafików na behance.net lub dribbble.com.

Ostatni krok to zaprogramowanie prototypu

Jak widzisz stworzenie prototypu aplikacji nie będąc programistą ani designerem nie jest w cale takie trudne. Żadne z powyższych narzędzi nie jest ani skomplikowane w obsłudze, ani kosztowe – wręcz przeciwnie są one zwykle darmowe. Dodatkowo, w internecie roi się od darmowych szablonów, inspiracji czy tutoriali o tym, jak zrobić dobry prototyp aplikacji mobilnej lub webowej.

Po stworzeniu prototypu i zwalidowaniu go w oczach potencjalnych klientów możemy przystąpić do zakodowania prawdziwej aplikacji. To właśnie taka kolejność pozwoli zaoszczędzić Ci najwięcej czasu i pieniędzy.

A czy Ty możesz polecić jakieś ciekawe narzędzia albo miejsca w internecie pomocne przy prototypowaniu aplikacji webowych lub mobilnych?

–

Mateusz Warcholiński

Co-Founder & COO w Brainhub

Mateusz na codzień zajmuje się tworzeniem i realizacją strategii rozwoju firmy Brainhub, specjalizującej się w budowaniu epickich aplikacji webowych i mobilnych w oparciu o JS (Node.js, React.js i wiele innych) dla klientów z całego świata. Od 2009 roku jego pasją jest budowanie innowacyjnych startupów o globalnym zasięgu. Jego specjalność to także szeroko pojęta sprzedaż oraz inbound marketing.