Oto sytuacja: jesteś programistą i masz wszystkie niezbędne narzędzia do kodowania niesamowitej aplikacji. Ale utknąłeś trochę w martwym punkcie, jeśli chodzi o projekt. Bez mistrzostwa w branży standardowych narzędzi projektowych, takich jak Adobe Photoshop, jak zaprojektować aplikację mobilną, która odzwierciedla Twój wewnętrzny geniusz? Jak zrobić aplikację, która jest zarówno wizualnie oszałamiające i łatwe dla użytkowników do nawigacji?

Nie martw się, jest dobra wiadomość. Możesz nie mieć dużego (lub żadnego) doświadczenia z UX/designem, ale nie musisz go koniecznie potrzebować, aby stworzyć oszałamiający wizualnie projekt końcowy. Te rozwiązania pomogą Ci w procesie projektowania aplikacji mobilnej – każde z nich spełnia tę obietnicę, nie wymagając od Ciebie zapłaty ani grosza.

How to Design a Mobile App

Wireframing polega na stworzeniu minimalnego produktu, który w zasadzie stanowi szkielet dla projektu Twojej aplikacji. Jeśli miałbyś porównać swoją aplikację do startupu, mógłbyś odnieść się do tego etapu projektowania jako minimalnego produktu wykonalnego (koncepcja spopularyzowana przez książkę, The Lean Startup).

Wireframing jest niezbędnym etapem podczas przechodzenia przez proces projektowania aplikacji mobilnej, ponieważ pozwala myśleć o strukturze jako oddzielne od ostatecznych elementów projektu. Umożliwia również efektywne przedstawienie swojej koncepcji wszystkim zainteresowanym stronom – współpracownikom, projektantom lub inwestorom – bez konieczności posiadania doświadczenia w projektowaniu, aby dokładnie wyrazić te idee.

Następujące narzędzia mogą być pomocne podczas tego ważnego kroku założycielskiego jak zaprojektować aplikację mobilną.

Pen and Paper

Dla tych, którzy naprawdę nie chcą wydać grosza, stary dobry niezawodny długopis i papier jest sposób, aby przejść do szkicowania wstępnych pomysłów aplikacji jako szkic projektu. Podczas gdy niektórzy wolą iść bezpośrednio do Photoshopa lub narzędzia prototypowania, ta metoda może być idealnym rozwiązaniem do przechwytywania pomysłów szybko, jak to się dzieje. Jako dodatkowy bonus, nie trzeba żadnego specjalnego szkolenia lub opanowania narzędzia, aby uzyskać jak najwięcej z tej metody wireframing.

Android i / lub iOS szkic papieru

Dla tych, którzy zastanawiają się, jak zaprojektować aplikację mobilną, istnieje specjalne narzędzie wireframing z tobą szczególnie w umyśle. Za rozsądną cenę za darmo, można pobrać papiery dot-grid, które mają iPhony i iPady wydrukowane na nich. Jest to idealne rozwiązanie projektowe dla programistów, którzy potrzebują lepszej wizualizacji niż pióro i papier mogą zapewnić. Ten papier szkicowy iOS jest również idealny do storyboardingu lub pokazania różnych stanów tego, jak Twoja aplikacja będzie wyglądać w użyciu.

Ten papier szkicowy iOS zawiera linie siatki dla wszystkich domyślnych elementów UI na wyżej wymienionych urządzeniach iOS. Dla wersji Android tego szkicownika, papier ma 8 modeli telefonów wydrukowanych na nim. Jednakże, w przeciwieństwie do papieru iOS (który ma siatkę kropek), ten nie ma żadnych linii.

MockFlow

Jeśli szukasz nieco bardziej technicznego narzędzia do tworzenia makiet aplikacji mobilnych, rozważ coś takiego jak MockFlow. Mockflow to rozwiązanie do tworzenia makiet online, które jest w stanie obsłużyć każdy rodzaj projektu – niezależnie od tego, czy jest to aplikacja mobilna czy webowa (lub coś zupełnie innego). Dostępna jest podstawowa, darmowa wersja, która pozwala na pracę nad jednym projektem w tym samym czasie, do 1 GB pamięci i dwóch członków zespołu. Możesz odblokować dodatkowe funkcje (więcej projektów, pamięci masowej i członków zespołu), gdy uaktualnisz do płatnego planu, który zaczyna się od 14 dolarów miesięcznie.

WireframeApp to kolejna opcja wireframingu oparta na aplikacji internetowej, podobna do MockFlow. Wszystkie plany są płatne, ale często można znaleźć niedrogie dożywotnie umowy (poniżej 49 dolarów), zapisując się do ich biuletynu e-mail lub AppSumo.

Prototypowanie

Prototypowanie jest następnym krokiem, jak zaprojektować aplikację mobilną po zakończeniu wireframing. Cały sens tego etapu polega na stworzeniu wykonalnej wersji projektu, podobnej do tego, jak chcesz, aby wyglądał ostateczny projekt.

Następujące narzędzia pasują do rachunku za to, jak zaprojektować aplikację mobilną bez płacenia grosza, ponieważ wszystkie są w 100% darmowe do użytku!

Marvel

Marvel jest aplikacją internetową, która jest również dostępna dla iOS i Android. Oprócz możliwości projektowania na dowolnym urządzeniu, z którym jest Ci najwygodniej, narzędzie to ułatwia przekształcanie szkiców w wykonalne prototypy. Oprócz możliwości dodawania podstawowych elementów projektu, możesz również łączyć projekty ze sobą, aby stworzyć przepływ. Marvel pozwala na tworzenie interaktywnych hotspotów i realistycznych przejść, a Ty możesz wybrać akcje, takie jak najechanie, kliknięcie, przesunięcie, uszczypnięcie i inne. Dzięki wielu integracjom z innymi firmami, Marvel współpracuje z wieloma innymi narzędziami, których już używasz, a także ze współpracownikami w Twoim zespole.

InVision

InVision jest podobny do Marvela, ponieważ jest darmowym narzędziem do prototypowania stron internetowych i urządzeń mobilnych. Jest to doskonałe narzędzie do prototypowania dla zespołów, dzięki funkcjonalności, która pozwala na proste komentowanie i współpracę. Co odróżnia go od wielu podobnych typów narzędzi to ich funkcja kontroli wersji, która pozwala na przywrócenie zmian do poprzedniej wersji w razie potrzeby.

InVision jest używany przez innowacyjne firmy, takie jak Adobe, Zappos, AT&T, Dell i Sony, a także szybko rozwijające się startupy, takie jak Prezi, Soundcloud i Evernote. Korzystanie z InVision nie gwarantuje Ci ich sukces, ale nie można zaprzeczyć korzyści stowarzyszenia!

Axure

Aby zaokrąglić swoje opcje, jak zaprojektować aplikację mobilną bez płacenia grosza, oto opcja, która jest płatna, jeśli używana w dłuższej perspektywie, ale całkowicie za darmo do użytku podczas 30-dniowej próby. Axure pozwala na łatwe prototypowanie aplikacji dzięki wysoce funkcjonalnym projektom (podobnym do przejść na Marvelu). Podobnie jak inne opcje w tym artykule, to narzędzie zapewnia funkcjonalność dla łatwej współpracy zespołowej.

Proto.io

Proto.io reklamuje się jako narzędzie, które może pomóc Ci stworzyć „Prototypy, które czują się prawdziwe”. Dla twórców aplikacji mobilnych, którzy chcą stworzyć realistyczny i funkcjonalny prototyp, może to być muzyka dla twoich uszu. Dostarczają użytkownikom wiele bibliotek UI, integracje z firmami trzecimi (z partnerami takimi jak Dropbox), a nawet testy użytkowników, aby zapewnić, że doświadczenie użytkownika jest bezproblemowe po uruchomieniu. Darmowa próba pozwala na 15 dni dostępu z dożywotnim dostępem do ograniczonych funkcji, lub możliwość uaktualnienia do w pełni funkcjonalnego konta z wieloma projektami i funkcjami, zaczynając od $24/miesiąc.

Jeśli jeszcze nie znalazłeś idealnego narzędzia do tworzenia makiet lub prototypów, Developer Drive udostępnia kilka dodatkowych ogólnych opcji do rozważenia.

Oczywiście, jeśli jest to zakres twoich zainteresowań i możliwości, jeśli chodzi o projektowanie aplikacji, będziesz musiał zapłacić komuś, kto weźmie twój goły szkielet lub prototyp na następny poziom. Ale przychodząc z podstawowym planem może być dobrym sposobem, aby zaoszczędzić czas i pieniądze z góry. Im lepiej jesteś w stanie przekazać swoją wizję projektantowi, tym łatwiej będzie ją zrealizować i tym mniej pieniędzy zmarnujesz na wersje projektu, które nie są zgodne z twoją wizją.

Projektowanie wizualne

Czy szukasz wskazówek, jak zaprojektować aplikację na iPhone’a, czy jak zaprojektować aplikację na Androida, te darmowe narzędzia mogą pomóc ci owinąć głowę wokół idealnego projektu dla każdego z mobilnych systemów operacyjnych.

Czasami, odrobina inspiracji może pomóc usunąć blokadę twórczą, a zagubienie się w samouczku projektowania może pomóc Ci dowiedzieć się, jak ukończyć projekt całkowicie na własną rękę.

Laudable Apps

Laudable Apps to abare-boness strona internetowa/galeria aplikacji, która koncentruje się w szczególności na pokazywaniu pięknych projektów iOS 7. Nie ma tekstu lub innych elementów rozpraszających, tylko projekty prezentowane bez komentarza.

Podczas gdy myślisz konkretnie o iOS, możesz również chcieć poświęcić czas na przejrzenie ścisłych wytycznych Apple App Store dotyczących składania aplikacji. Ponieważ mają one „bez wyjątków” postawy, utrzymując te wytyczne w umyśle podczas określania, jak zaprojektować aplikację mobilną może pomóc dostać rzeczy w prawo za pierwszym razem, oszczędzając czas i pieniądze w dłuższej perspektywie.

Android Patterns

Czy projektujesz wyłącznie dla urządzenia z systemem Android, lub tworzą dwie wersje aplikacji mobilnej (z jednym dla Apple App Store), będziesz chciał zapoznać się z in’s i out’s projektowania dla urządzenia z systemem Android. Może Cię zaskoczyć, że jest to zdecydowanie inny (i znacznie mniej sztywny) niż iOS standardów projektowania aplikacji. To może być pomocne, aby przeczytać przez sklep Google Play materiałów składania, jak ta lista kontrolna startowa.

Możesz również użyć Android Patterns jako swój crash course w Android Design. Ta strona jest biblioteką wzorców interakcji Android, które można wykorzystać podczas tworzenia projektu. Wzorce interakcji są ułożone według typu aplikacji i obejmują działania takie jak nawigacja, powiadomienia i interakcje ekranowe. Podczas gdy te wzorce mogą być pomocne dla nowego projektanta aplikacji mobilnych, powinny być traktowane jako przewodnik, ale nie jako absolutne zasady.

Ikony

Dodanie pewnego wymiaru do twoich elementów wizualnych może pomóc twojemu prototypowi wyglądać tak blisko, jak to tylko możliwe do ostatecznego wyniku. Icons8 udostępnia bibliotekę ponad 53,800 ikon, które są całkowicie darmowe do użytku. Oprócz tego gigantycznego darmowego zasobu, powinieneś również sprawdzić te narzędzia do projektowania interfejsu użytkownika, aby poznać różne sposoby wyszukiwania i używania ikon podczas ustalania, jak zaprojektować aplikację mobilną.

Adobe Kuler

Adobe ma wiele zasobów dla tych, którzy chcą zaprojektować aplikację mobilną, od początkującego do zaawansowanego poziomu projektowania, ale jednym z najprostszych i najbardziej przydatnych jest ich narzędzie schematu kolorów. Kuler pomaga projektantom i nie-projektantom wybrać schematy kolorów w oparciu o koło kolorów i różne zasady kolorystyczne: monochromatyczny, komplementarny, triada, itp. Możesz stworzyć schemat kolorów z obrazu, lub przeglądać schematy kolorów przesłane przez innych dla inspiracji.

Mobile Design Inspiration

Według CSSWinner, Mobile Design Inspiration jest najgęstszą galerią inspiracji dla projektowania aplikacji mobilnych, z inspiracjami do projektowania aplikacji dostępnymi dla i zorganizowanymi specjalnie przez iPhone, Android, Apple Watch, i iPad. Nowe projekty są dodawane co tydzień, a ich sekcja „Creative Fields” może dostarczyć dodatkowych inspiracji, jeśli pracujesz również nad zaprojektowaniem logo aplikacji.

Tuts+

Jeśli naprawdę chcesz wiedzieć, jak zaprojektować aplikację mobilną bez płacenia ani grosza, powinieneś rozważyć zainwestowanie swojego czasu w zdobycie nowych umiejętności. Nauka projektowania własnej aplikacji nad zatrudnianiem kogoś, kto to zrobi, może zaoszczędzić pieniądze, a także zdobyć cenne umiejętności, które można spieniężyć później.

Istnieje kilka stron internetowych, które oferują doskonałe kursy online w zakresie projektowania (Treehouse to świetny płatny zasób), ale Tuts+ oferuje wiele dogłębnej wiedzy, całkowicie za darmo, bez poświęcania jakości. Oprócz pomocnych artykułów, mają również dodatkowe, długie zasoby na temat projektowania, takie jak ebooki.

How to Design a Mobile App Without Paying A Dime

Naprawdę nie musisz zatrudniać projektanta, aby zaprojektować swoją aplikację mobilną, zwłaszcza we wczesnych etapach tworzenia makiet i prototypów. Poświęć trochę czasu, aby uzyskać swoją aplikację, gdzie chcesz, aby być na poziomie podstawowym, a następnie nawet jeśli nie skończyć zatrudnić projektanta, projekt nie będzie tak głęboko (i drogie).

Z tych narzędzi do projektowania aplikacji mobilnych, można dowiedzieć się, jak zaprojektować aplikację mobilną na własną rękę, i odebrać kilka nowych umiejętności po drodze. Wyobraź sobie możliwości zatrudnienia dla osoby, która może udowodnić swoją zdolność zarówno w projektowaniu i rozwoju aplikacji!

Jakie wskazówki lub narzędzia można dodać do tej listy, jak zaprojektować aplikację mobilną bez płacenia grosza? Chętnie usłyszymy Twoje przemyślenia! Tweetnij swoje spostrzeżenia na @icons8, a my podzielimy się naszymi ulubionymi.

O autorze
Maddy Osman kocha WordPress i pisanie. Kiedy nie jest zajęta pomaganiem w organizacji WordCamp Denver, dzieli się najlepszymi wskazówkami z zakresu content marketingu/SEO na swoim blogu www.the-blogsmith.com. Śledź jej najnowsze artykuły w sieci na Twitterze: MaddyOsman.