Studio di progettazione nei siti Web delle app di Mac OS X (layout)

Apple ha sempre richiesto il più alto livello di lavoro dai suoi dipendenti fin dalla sua fondazione alla fine degli anni '70. Molti designer si sono recentemente trasferiti nell'ambiente OS X e molti si innamorano a prima vista. Mac OS X Lion offre così tante funzioni che non riesci a trovare altrove, in particolare l'App Store.

Da qui si ha accesso a un gran numero di applicazioni sia gratuite che a pagamento. Questi sono tutti costruiti per OS X Lion e possono essere scaricati direttamente in Launchpad. In questo caso di studio esaminerò le tendenze del design per i siti web delle app Mac. Questi sono specificamente orientati verso OS X e non includono app iOS? gli stili sono molto diversi. Insieme a questi suggerimenti ho anche compilato una piccola galleria di vetrine dei miei siti di app Mac preferiti per condividere un po 'di ispirazione.

Ingrandisci i tuoi punti chiave

Quando le persone arrivano su qualsiasi sito web di app, sperano di capire molto rapidamente lo scopo dell'applicazione. Il modo più semplice per farlo è afferrare immediatamente l'attenzione dei visitatori e guidarli lungo tutto il layout. E dall'esperienza passata sembra che testo / grafica di dimensioni gigantesche facciano spesso il trucco.

Alfred App è uno di questi esempi che incorpora l'intero schermo in un layout scorrevole. Sia il logo dell'app che il pulsante di download saltano fuori dalla pagina a colpo d'occhio, insieme all'icona mostruosa dell'app! Gli utenti che hanno familiarità con l'app Alfred riconosceranno il cappello e la lente d'ingrandimento unici. E non è solo l'area della prima pagina, neanche.

Mentre scorri verso il basso dovresti notare che ogni sezione di pagina viene anche suddivisa in pezzi. L'area screenshot della demo ha una piccola colonna per le anteprime con una bella visualizzazione dell'app. Semplicemente verificando i pochi scatti dimostrativi è generalmente chiaro che cosa può fare l'app. Come trovi più siti Web di applicazioni tieni gli occhi aperti per la "grande immagine"? roba che è destinata a distinguersi. Inoltre, continua a pensare a cosa dovrebbe saltare dal tuo sito web di app.

Caratteristiche pulite

I design dei siti più popolari hanno spesso lo stesso tipo di elementi. Questo potrebbe essere un design dell'icona più finalizzato e dettagliato, testo del logo elaborato e altra grafica divertente. Ma dovresti seguire l'esempio di Apple e ritagliare le cose sacrificabili. Interfacce pulite e semplificate manterranno l'attenzione dei visitatori in movimento attraverso più download e acquisti.

Sono un grande fan di Instagram che ha dedicato molto tempo a iOS. E l'app Mac Carousel è un bellissimo servizio gemello sul desktop. Se noti che il layout del loro sito include un'area del logo più piccola con più spazio per gli screenshot. Inoltre, la tipografia appare più raffinata per abbinarsi ai temi di classe e di alto livello.

Dovresti anche notare che non c'è alcuna navigazione principale qui. Prendi in considerazione la possibilità di duplicarlo per il tuo sito web della tua app, rimuovendo la frustrazione degli utenti. Questa idea è doppia per gli utenti mobili che cercano il tuo sito Web per la prima volta su iPhone o Android. Se riesci a ritrarre il messaggio della tua app su una singola pagina, io dico Fallo!

Includi icone di App Store standard

Per attirare l'attenzione del tuo visitatore è un requisito importante, ma vuoi anche guadagnare la loro fiducia. E le persone che usano il Mac OS generalmente si fidano degli sviluppatori Apple. Dovresti includere badge e / o pulsanti sul tuo sito per far sapere che sei stato pubblicato nell'app store. Può sembrare piccolo, ma può essere di enorme importanza per i nuovi potenziali clienti.

Le Linee guida per il marketing sull'App Store Mac (PDF) contengono un piccolo dettaglio sul badge App Store che vedi nella maggior parte delle popolari app Mac. Mi piace anche colpire gli scatti di Dribbble per vedere se qualcuno ha serie di design o icone relative al tema.

Fornire una dimostrazione dove possibile

Ricorda l'intero punto di trasmettere il tuo messaggio rapidamente? Questo può essere ottenuto più facilmente tramite immagini o video - nessuna grande sorpresa lì. Ma anche le gallerie di miniature o le presentazioni a volte non sono sufficienti.

Dovresti provare ad includere una demo del tuo servizio in un tipo di infografica del flusso di lavoro. Ci sono tonnellate di PSD gratuiti da scaricare che si adattano a MacBook, iPhone, iPad e tutto il resto. Ecco un bellissimo esempio di un modello di iMac PSD gratuito da scaricare. Ora puoi prendere screenshot della tua applicazione e creare piccole immagini dimostrative.

Questo funziona molto bene nell'esempio sopra per Avvisami. L'app è aperta e sviluppata per tutte e 3 le piattaforme su iOS / iPad e OSX. A prima vista si può supporre che l'app sia un sistema di tipo di notifica. Attraverso una piccola demo grafica e qualche ulteriore spiegazione, puoi mettere insieme le funzionalità estese per comporre la tua opinione sull'app.

Animazioni dinamiche e jQuery

Apple è anche nota per avere bellissime animazioni di transizione. La loro attenzione ai dettagli sia nel design sia nella funzionalità è incredibile: abbraccia l'intera gamma del loro portafoglio software. E come un web designer che pubblica sotto Apple, potresti scoprire che il tuo sito dell'app potrebbe usare un tocco magico.

Reeder per Mac è bello e il sito demo si adatta altrettanto bene. Si noti che gli URL delle pagine sono estremamente semplici e facili da trasmettere agli amici o tramite i social network. Inoltre, la navigazione è contenuta in una colonna laterale, mentre il contenuto della pagina è ridotto al minimo.

Sebbene Reeder abbia una velocità di pagina veloce, è solo un esempio di molti siti web di app. Se ti piacciono queste animazioni dinamiche, considera la possibilità di guardare nella libreria jQuery e anche l'interfaccia utente jQuery. Queste sono due librerie JavaScript molto popolari con funzioni predefinite per effetti di pagina? e puoi costruire molto! Per un'idea puoi divertirti con questo piccolo tutorial in stile Apple che utilizza jQuery per creare un effetto dissolvenza sullo schermo iniziale.

Galleria di ispirazione

Come accennato in precedenza, nessun case study sarebbe completo senza una piccola vetrina di design.Di seguito sono riportati alcuni esempi dei miei layout di siti Web app OS X preferiti personali. Controllali e facci sapere cosa ne pensi! E se ci mancassimo dei fantastici layout di app ti piacerebbe davvero farcelo sapere nei commenti.