La situazione è questa: sei uno sviluppatore e hai tutti gli strumenti necessari per codificare un’app fantastica. Ma sei un po’ bloccato per quanto riguarda il design. Senza la padronanza degli strumenti di design standard del settore come Adobe Photoshop, come fai a progettare un’applicazione mobile che rifletta il tuo genio interiore? Come fai a creare un’app che sia visivamente stupefacente e facile da navigare per gli utenti?

Non preoccuparti, ci sono buone notizie. Potresti non avere molta (o nessuna) esperienza di UX/design, ma non ne hai necessariamente bisogno per creare un progetto finale visivamente stupefacente. Queste soluzioni ti aiuteranno nel processo di come progettare un’app mobile – ognuna delle quali mantiene questa promessa senza richiederti di pagare un centesimo.

Come progettare un’app mobile

Wireframing comporta la creazione di un prodotto minimo indispensabile che rappresenta essenzialmente lo scheletro per il design della tua app. Se dovessi paragonare la tua app a una startup, potresti riferirti a questa fase di progettazione come il prodotto minimo realizzabile (un concetto reso popolare dal libro, The Lean Startup).

Il wireframing è una fase essenziale quando si passa attraverso il processo di come progettare un’app mobile perché ti permette di pensare alla struttura come separata dagli elementi finali del design. Rende anche possibile far passare efficacemente il tuo concetto a tutte le parti interessate – collaboratori, designer o investitori – senza che tu personalmente abbia bisogno di alcuna esperienza di design per esprimere accuratamente queste idee.

I seguenti strumenti possono essere utili durante questo importante passo fondamentale di come progettare un’applicazione mobile.

Penna e carta

Per coloro che davvero non vogliono spendere un centesimo, la buona vecchia e affidabile carta e penna è la strada da percorrere per abbozzare le idee iniziali dell’applicazione come bozza del tuo design. Mentre alcuni preferiscono andare direttamente in Photoshop o in uno strumento di prototipazione, questo metodo può essere ideale per catturare rapidamente le idee mentre accadono. Come bonus aggiuntivo, non è necessario alcun addestramento speciale o padronanza degli strumenti per ottenere il massimo da questo metodo di wireframing.

Android e/o iOS sketch paper

Per coloro che stanno cercando di capire come progettare un’app mobile, esiste uno strumento di wireframing speciale con voi specificamente in mente. Per il ragionevole prezzo di gratis, è possibile scaricare carte a griglia di punti che hanno iPhone e iPad stampati su di loro. Questa è la soluzione di design ideale per gli sviluppatori che hanno bisogno di una visione migliore di quella che carta e penna possono fornire. Questa carta da disegno per iOS è anche ideale per lo storyboarding o per mostrare i vari stati di come la vostra app apparirà in uso.

Questa carta da disegno per iOS include linee di griglia per tutti gli elementi UI di default sui suddetti dispositivi iOS. Per la versione Android di questo sketch paper, la carta ha 8 modelli di telefono stampati su di essa. Tuttavia, a differenza della carta per iOS (che ha una griglia di punti), questa non ha alcuna linea.

MockFlow

Se stai cercando uno strumento leggermente più tecnico per fare il wireframing della tua app mobile, considera qualcosa come MockFlow. Mockflow è una soluzione di wireframing online, con la flessibilità necessaria per gestire qualsiasi tipo di progetto di design – che si tratti di un’applicazione mobile o web (o qualcosa di completamente diverso). C’è una versione gratuita di base disponibile che ti permette di lavorare su un progetto alla volta, fino a 1 GB di storage e due membri del team. È possibile sbloccare funzionalità aggiuntive (più progetti, archiviazione e membri del team) quando si passa a un piano a pagamento, che parte da $ 14/mese.

WireframeApp è un’altra opzione di wireframing basata su web-app simile a MockFlow. Tutti i piani sono a pagamento, ma spesso è possibile trovare un affare a vita conveniente (sotto i 49 dollari in totale) iscrivendoti alla loro newsletter o ad AppSumo.

Prototyping

Prototyping è il passo successivo per come progettare un’app mobile una volta che hai finito il wireframing. L’intero scopo di questa fase successiva è quello di creare una versione praticabile del design, simile a quello che vuoi che sia il progetto finale.

I seguenti strumenti sono ideali per progettare un’applicazione mobile senza pagare un centesimo, dato che sono tutti gratuiti al 100%!

Marvel

Marvel è un’applicazione web disponibile anche per iOS e Android. Oltre alla possibilità di progettare su qualsiasi dispositivo con cui ti trovi più a tuo agio, questo strumento rende facile trasformare i tuoi schizzi in prototipi funzionanti. Oltre alla capacità di aggiungere elementi di design di base, è anche possibile collegare i disegni insieme per creare un flusso. Marvel ti permette di creare hotspot interattivi e transizioni realistiche, e puoi scegliere azioni come passare il mouse, cliccare, scorrere, pizzicare e altro. Con tonnellate di integrazioni di terze parti, Marvel gioca bene con molti degli altri strumenti che già usi, e con i collaboratori del tuo team.

InVision

InVision è simile a Marvel, in quanto è uno strumento gratuito di prototipazione web e mobile. È uno strumento di prototipazione perfetto per i team, grazie alla funzionalità che permette di commentare e collaborare in modo semplice. Ciò che lo distingue da molti altri strumenti simili è la sua funzione di controllo della versione, che consente di ripristinare le modifiche a una versione precedente, se necessario.

InVision è utilizzato da aziende innovative come Adobe, Zappos, AT&T, Dell e Sony, così come startup in rapida crescita come Prezi, Soundcloud ed Evernote. Usare InVision non ti garantisce il loro successo, ma non puoi negare i benefici dell’associazione!

Axure

Per completare le tue opzioni su come progettare un’app mobile senza pagare un centesimo, ecco un’opzione che è a pagamento se usata a lungo termine, ma completamente gratuita per 30 giorni di prova. Axure permette una facile prototipazione di app grazie a disegni altamente funzionali (simili alle transizioni su Marvel). Come le altre opzioni in questo articolo, questo strumento fornisce funzionalità per una facile collaborazione di squadra.

Proto.io

Proto.io si presenta come uno strumento che può aiutare a creare “Prototipi che sembrano reali”. Per uno sviluppatore di app mobile che cerca di creare un prototipo realistico e funzionale, questa potrebbe essere musica per le vostre orecchie. Forniscono agli utenti più librerie UI, integrazioni di terze parti (con partner come Dropbox), e anche test degli utenti per garantire che l’esperienza utente sia senza soluzione di continuità al momento del lancio. Una prova gratuita consente 15 giorni di accesso con accesso a vita a funzioni limitate, o la possibilità di passare a un account completamente funzionale con più progetti e caratteristiche, a partire da 24 dollari al mese.

Se devi ancora trovare il perfetto strumento di wireframing o prototipazione, Developer Drive condivide alcune ulteriori opzioni generiche da considerare.

Ovviamente, se questo è il limite del tuo interesse e abilità quando si tratta di progettazione di app, dovrai pagare qualcuno per portare il tuo wireframe o prototipo di base al livello successivo. Ma arrivare con un piano di base può essere un buon modo per risparmiare tempo e denaro in anticipo. Meglio sei in grado di comunicare la tua visione a un designer, più facile sarà trasformarla in realtà e meno soldi sprecherai in versioni di design che non sono in linea con la tua visione.

Visual Design

Sia che tu stia cercando una guida su come progettare un’app per iPhone, o su come progettare un’app per Android, questi strumenti gratuiti possono aiutarti ad avere un design perfetto per entrambi i sistemi operativi mobili.

A volte, una piccola ispirazione può aiutare a rimuovere un blocco creativo, e perdersi in un tutorial di design può aiutarti a capire come finire il progetto completamente da solo.

Laudable Apps

Laudable Apps è un sito web/app gallery di abare-boness che si concentra specificamente sulla presentazione di bei design per iOS 7. Non c’è testo o altre distrazioni, solo progetti presentati senza commenti.

Mentre stai pensando specificamente a iOS, potresti anche voler prendere tempo per rivedere le severe linee guida di presentazione dell’App Store di Apple. Dal momento che hanno un atteggiamento “senza eccezioni”, tenere queste linee guida in mente mentre si determina come progettare un’applicazione mobile può aiutare a fare le cose bene la prima volta, risparmiando tempo e denaro nel lungo periodo.

Modelli Android

Se stai progettando esclusivamente per un dispositivo Android, o stai creando due versioni della tua applicazione mobile (con una per l’App Store di Apple), vorrai familiarizzare con i dentro e fuori del design per un dispositivo Android. Potrebbe sorprendervi sapere che questo è decisamente diverso (e significativamente meno rigido) rispetto agli standard di design delle app per iOS. Può essere utile leggere i materiali di presentazione del Google Play store, come questa checklist di lancio.

Puoi anche usare Android Patterns come corso intensivo di design Android. Questo sito web è una libreria di modelli di interazione Android che puoi usare quando crei il tuo design. I pattern di interazione sono organizzati per tipo di app e includono azioni come la navigazione, le notifiche e le interazioni con lo schermo. Mentre questi modelli possono essere utili per un nuovo designer di app mobili, dovrebbero essere presi come una guida, ma non come regole assolute.

Icone

Aggiungere qualche dimensione ai tuoi elementi visivi può aiutare il tuo prototipo a sembrare il più vicino possibile al risultato finale. Icons8 fornisce una libreria di oltre 53.800 icone che sono completamente gratuite da usare. Oltre a questa gigantesca risorsa gratuita, dovresti anche controllare questi strumenti di progettazione dell’interfaccia utente per diversi modi di cercare e utilizzare le icone quando stai determinando come progettare un’applicazione mobile.

Adobe Kuler

Adobe ha un sacco di risorse per coloro che cercano di progettare un’applicazione mobile, da un livello principiante a quello avanzato di progettazione, ma uno dei più semplici e più utili è il loro strumento di combinazione di colori. Kuler aiuta progettisti e non progettisti a scegliere schemi di colore basati sulla ruota dei colori, e diverse regole di colore: monocromatico, complementare, triade, ecc. È possibile creare una combinazione di colori da un’immagine, o sfogliare le proposte di combinazione di colori di altri per l’ispirazione.

Mobile Design Inspiration

Secondo CSSWinner, Mobile Design Inspiration è la più densa galleria di ispirazione per il design di app mobili, con ispirazioni di design di app disponibili e organizzate specificamente per iPhone, Android, Apple Watch e iPad. Nuovi design vengono aggiunti settimanalmente, e la loro sezione “Campi creativi” può fornire ulteriore ispirazione se stai lavorando anche alla progettazione del logo di un’app.

Tuts+

Se vuoi davvero sapere come progettare un’app mobile senza pagare un centesimo, dovresti considerare di investire il tuo tempo per acquisire nuove competenze. Imparare a progettare la tua app piuttosto che assumere qualcuno per farlo può farti risparmiare denaro E anche guadagnare preziose competenze che puoi monetizzare in seguito.

Ci sono diversi siti web che offrono ottimi corsi online di design (Treehouse è una fantastica risorsa a pagamento), ma Tuts+ offre un sacco di conoscenze approfondite, completamente gratis, senza sacrificare la qualità. Oltre ad articoli utili, hanno anche altre lunghe risorse sul design, come gli ebook.

Come progettare un’app mobile senza pagare un centesimo

Non è davvero necessario assumere un designer per progettare la tua app mobile, soprattutto nelle prime fasi di wireframing e prototipazione. Prenditi un po’ di tempo per portare la tua app dove vuoi che sia ad un livello di base, poi anche se finisci per assumere un designer, il progetto non sarà così profondo (e costoso).

Con questi strumenti di design per app mobili, puoi capire come progettare un’app mobile da solo, e acquisire alcune nuove competenze lungo la strada. Immagina le opportunità di assunzione per un individuo che può dimostrare la sua abilità sia nella progettazione che nello sviluppo di un’app!

Quali suggerimenti o strumenti aggiungeresti a questa lista su come progettare un’app mobile senza pagare un centesimo? Ci piacerebbe sentire i tuoi pensieri! Twitta le tue intuizioni a @icons8, e condivideremo i nostri preferiti.

Chi è l’autore
Maddy Osman ama WordPress e scrivere. Quando non è impegnata ad aiutare ad organizzare il WordCamp Denver, condivide i suoi migliori consigli di content marketing/SEO sul suo blog, www.the-blogsmith.com. Tieni il passo con i suoi ultimi articoli sul web su Twitter: MaddyOsman.