Suggerimenti ed esempi sui siti web di Killer Mobile App

La scena mobile è cresciuta esponenzialmente negli ultimi due anni. L'App Store iOS e le App Android su Google Play sono diventati i due hotspot per gli appassionati di smartphone. Con l'aumentare del numero di utenti di smartphone, stiamo vedendo centinaia di sviluppatori di app mobili lanciare nuove idee sul mercato.

Le app più popolari sono accompagnate dal proprio sito web. Questo può essere utile con il marketing e ottenere il tuo nome là fuori. È anche un URL online molto più carino di entrambi gli App Store. Ritengo che qualsiasi applicazione mobile di successo richieda quasi una presenza sul web.

In questo articolo voglio andare oltre alcuni dei tendenze di progettazione più comuni per i siti web di app mobili. Non esiste un regolamento preciso da seguire per costruire un layout del genere. Piuttosto ci sono alcune linee guida e tendenze uniche che i web designer hanno trovato utili per conquistare un pubblico. Accoppiato con la mia Guida allo sviluppo di iOS puoi mettere insieme una fantastica app per dispositivi mobili e costruire anche il suo sito web.

Dai un'occhiata a questi concetti qui sotto e prova ad implementarne alcuni nel layout del tuo sito web dell'applicazione.

Schermate del dispositivo

Un pezzo di base per qualsiasi sito web di app per dispositivi mobili deve essere uno screenshot dell'applicazione. I visitatori sono interessati solo alla tua app e a quale modo più rapido per dimostrare il suo scopo rispetto agli screenshot? Puoi adattare i colpi del dispositivo a qualsiasi stile di layout, quindi non è un fattore limitante.

Easy Chef è un'app spagnola iOS che utilizza molti scatti del dispositivo. La parte superiore del layout ha un'anteprima della presentazione di diverse viste. Ma mentre scorri verso il basso, noterai altri diagrammi usando i display di iPhone. Questi pannelli includono etichette dettagliate e upclose, visualizzazioni ingrandite dello schermo. In realtà ho scritto sulla progettazione di grafica di prodotto informativo in un post precedente.

Un'altra configurazione interessante può essere trovata nella pagina della galleria Tweetbot. Questo è un client Twitter molto popolare per iPhone e gli sviluppatori hanno messo insieme una vetrina scorrevole di schermate. Se stai cercando di salvare spazio nel tuo layout, questa potrebbe essere una soluzione più semplice. I visitatori non dovranno scorrere verso il basso alla ricerca di una vista specifica. jQuery è facile da implementare e puoi rapidamente mettere insieme un'anteprima dello schermo di iPhone scorrevole. Potrebbe essere difficile includere dettagli extra, ma questo può essere aggiunto in un'altra sezione.

Distintivi dell'App Store

Questa tecnica sembra anche molto assurda una volta che hai finito di compilare l'applicazione. I badge vengono rapidamente riconosciuti come collegamenti per il download sul marketplace dell'app. Sia gli utenti Android che quelli iOS hanno la possibilità di visualizzare le app direttamente dal proprio browser, o questo verrà reindirizzato se visualizzato su uno smartphone.

Mi piace usare Instagram come esempio da quando il sito web è stato aggiornato ad un nuovo layout. Hanno badge che supportano Android Marketplace (Google Play) e iOS App Store. Entrambi i badge sono di design molto semplice ma facilmente riconoscibili a colpo d'occhio. Se stai cercando disegni più complessi, ti consiglio una rapida ricerca per il dribbble. I designer di talento spesso condividono i loro concetti di badge per app store per critiche costruttive.

Reti sociali mobili

Facebook e Twitter sono passati al mobile, ma questo non ha impedito alle altre reti di spuntare. Stiamo vedendo che i social network utilizzano app mobili per consentire una nuova piattaforma di comunicazione.

Localmind funziona su un concetto simile a Foursquare, in cui si registra un account e si inizia a controllare in luoghi locali. Puoi lasciare domande o rispondere alle domande di altre persone. Il loro sito web è molto amichevole e invitante per i nuovi arrivati. Mi piace soprattutto la sezione banner superiore progettata con uno sfondo personalizzato della mappa. Il loro uso di sfumature e texture di sfondo conferisce al sito una vita propria.

Condivisione di foto minima

Pose è un'altra rete mobile con ideali simili per un design minimalista. Puoi scaricare l'app mobile per dispositivi iOS e Android. La sensazione è simile a weheartit ma è per gli amanti della moda mobile. L'intera app è incentrata sulla moda, i capelli, il trucco e il glamour.

Gli utenti possono scattare foto del loro vestito, vestiti o accessori e condividerli sulla rete. Una cosa da notare su Pose è la velocità con cui puoi navigare sul sito web. È facile trovare il blog aziendale, i dettagli di contatto, ecc. Altri siti web di app spesso trascurano queste caratteristiche aziendali che possono essere un argomento delicato.

Se vuoi attirare l'attenzione dei media è importante che il tuo sito web sembri un vero prodotto di social networking. Non stai solo provando a vendere la tua app (tramite annunci o abbonamento a pagamento) ma anche a vendere la rete stessa. Le app social possono sicuramente essere più complicate della progettazione di siti web di app regolari. Ma ottengono anche molti più download dagli utenti ed è un nuovo entusiasmante campo per i dispositivi mobili.

Da umili origini

I web designer non sono sempre in grado di mettere insieme grafici e icone scandalosi. Per fortuna i siti web delle app non sono fondamentali per la quantità di produzioni di Adobe Photoshop che possiedi. In realtà sento che il minimalismo può funzionare molto meglio per questo stile di layout.

Leef App è un client Forrst appena rilasciato per iPhone. Il loro sito web include una bella schermata dell'app e un pulsante di download in grassetto. Tutto il testo della pagina è semplificato in modo simile ai caratteri e alle combinazioni di colori di Apple.

Ciò che rende grande il sito Leef è la natura schietta di ogni elemento della pagina. È sfacciato e in anticipo con niente nascosto o messo da parte. Consiglio di provare questo stile come il tuo primo sito web per app mobili, se non altro per la pratica. Puoi imparare molto riducendo al minimo i piccoli bocconcini e concentrandoti su ciò che cattura l'attenzione.

Lovely Whitespace

Inoltre, è semplicemente geniale il sito web di Wood Camera App. Il loro layout non contiene altro che uno sfondo bianco e un contenuto centrato. Questo contenuto include alcuni screenshot predefiniti, un badge dell'app store e alcune funzionalità chiave aggiuntive.

Se hai voglia di minimalismo e lo spazio bianco è importante per il tuo layout, allora resta con esso! Wood Camera non è un layout del sito web particolarmente avvincente, ma è super facile da navigare. Il loro sito non collega nemmeno a nessun contenuto alternativo oltre alla pagina ufficiale dello sviluppatore. Ciò mantiene l'attenzione sull'app e su ciò che può offrire, che è molto più importante della grafica appariscente. Anche se questo non vuol dire che la grafica vistosa è una cattiva idea - richiede solo una corretta implementazione.

Illustrazioni colorate

Al contrario, l'approccio minimalista è un lavoro con illustrazioni uniche, che adoro totalmente. Spesso questo dettaglio extra mi venderà completamente l'app. Un esempio a cui posso riferire è l'app Barista per iPhone. L'intestazione del loro sito è piena di cappuccini e caffè espresso.

Ma nota come non ci sono altre immagini quando scorri verso il basso la pagina. L'intera sezione superiore è stata progettata specificamente per l'app per iPhone, simile a a pagina di destinazione. I vettori catturano subito i tuoi occhi e suggeriscono anche cosa riguarda l'app.

Kitchenator è un'applicazione iOS simile che converte le unità di misura per cucinare e cuocere. La loro disposizione di intestazione usa trame di legno ricche, una tovaglia a quadretti e mini cucchiai di acqua. Questa immagine suggerisce lo scopo di questa app prima ancora di scremare il contenuto.

Questo stile di design in realtà permea attraverso l'intero layout. L'area del piè di pagina corrisponde a uno sfondo di legno simile e molte delle stesse scelte di carattere. Questo è un esempio di un layout del sito molto semplice con una grafica molto potente.

Siti web di app: Premium Showcase

Quale articolo sarebbe completo senza un po 'di piacere per gli occhi? Insieme con le tecniche di cui sopra ho anche messo insieme questa bellissima galleria di siti web di app per dispositivi mobili; notare il logo e gli schemi di navigazione, nonché gli URL dei domini. Studiando ciò che fanno i professionisti, puoi capire le tendenze del design e usarle nei tuoi progetti.

App Bosquet