Non c'è carenza di aziende che seguono le tendenze del design popolare per fare appello a un mercato di massa. Molto più raro è il tipo di azienda che definisce le tendenze del design. Oggi esamineremo le tecniche di un'azienda che occupa il top della catena alimentare del design: Apple.
Di seguito troverai 15 modi pratici per seguire l'esempio di Apple nella creazione di bellissime interfacce.
1: mantienilo semplice
Dai un'occhiata alla homepage di Apple e non pensare a quello che vedi, ma a ciò che non vedi. Ti darò un suggerimento, è tutto su questo sito (no, non proprio questo sito, clicca il link sciocco). La risposta ovviamente è l'ingombro visivo. Una homepage dovrebbe comunicare agli utenti tutto ciò che riguarda la tua azienda, comunicare tutte le categorie di prodotti in dettaglio, elencare caratteristiche infinite e mostrare il tuo logo il più grande possibile. Destra? Secondo Apple: sbagliato.
La homepage di Apple mostra semplicemente il loro lavoro più recente e ti fornisce alcune categorie facilmente comprensibili per aiutarti a ottenere le informazioni che vuoi vedere. Certo, le probabilità sono che non stai progettando per una società notevolmente onnipresente che non ha bisogno di presentazioni. Tuttavia, puoi ancora utilizzare un design minimale ma attraente per aumentare l'usabilità.
Immagina di guidare fino all'aeroporto. Mentre guidi sei contemporaneamente colpito con cinque o sei cartelli contenenti mappe con le posizioni di tutto, dai terminali fino ai bagni accessibili ai disabili. L'argomento che il progettista di mappe farebbe è che ti ha dato tutte le informazioni di cui avevi bisogno per arrivare ovunque tu volessi andare. Sicuramente ti riprenderei che la sua colpa era nel dartelo tutto in una volta mentre guidavi a 20 mph. Ora immagina di essere a Sky Harbor, l'aeroporto di Phoenix Arizona straordinariamente facile da raggiungere. Mentre entri, vedi un cartello che dice? Ciao, benvenuto su Sky Harbor. Ci sono tre terminali? Poi, mentre guidi, raggiungi più cartelli, ognuno con una breve descrizione di ciò che le compagnie aeree volano in ogni terminal e dove andare per gli arrivi o le partenze. La sensazione che provi mentre guidi su Sky Harbor è: Wow, è facile !?
Apple ha lo stesso approccio al design dell'interfaccia. Invece di colpirti con tutto ciò che hanno in nome dell'usabilità, usano piccoli frammenti di informazione per condurti nel luogo in cui si trova il contenuto che stai cercando davvero. Guarda il sito su cui stai lavorando e considera come puoi rompere le informazioni complesse in parti più piccole che l'utente non troverà travolgente.
# 2: Usa sorprendenti colpi di prodotto
Uno dei motivi principali di Apple per ridurre la grafica superflua sul loro sito è mostrare veramente ciò che è importante: i loro prodotti. Guarda gli scatti che usano; è quasi impossibile guardare una pagina sul sito Apple e non focalizzare gli occhi sui prodotti per pochi secondi.
Ci sono molte cose che rendono questi prodotti così incredibili. Il primo è che sono ovviamente incontaminati. Getta questo a esperti di imaging digitale. Non ho visto esattamente come lo fanno, ma la combinazione è probabilmente un misto di fotografia, modellazione 3D (scegliete: Modo, Lightwave, Maya, ecc.) E, naturalmente, Photoshop.
La prossima cosa che fanno è farli occupare una parte enorme della pagina. Se trascorri ore a realizzare un bellissimo pacchetto e poi ridimensionalo a una miniatura, è semplicemente non così impressionante. Si noti che Apple include spesso anche più prodotti disposti in modo attraente come nella foto sopra.
La lezione qui è non solo scattare una foto del tuo prodotto e chiamarlo un giorno. Passa il tempo per farlo sembrare fantastico. Che si tratti di una lattina di fagioli fritti o di una Lexus, fai del tuo meglio per fare un grande colpo di eroe.
Non credi che puoi rendere il tuo prodotto non tecnologico buono come quello di Apple? Scopri We Shoot Cans come prova che un artista di talento può far sembrare buono qualsiasi prodotto.
3: il contrasto è la chiave
Un'altra cosa che rende le immagini dei prodotti Apple così dannatamente grandiose è il semplice ambiente in cui le ha inserite. Il cervello umano ama il contrasto. È il motivo per cui fissiamo le catene montuose e l'orizzonte sull'oceano. È anche la ragione per cui diciamo? Oooooohhhh? quando vediamo un iPhone nero lucido su uno sfondo bianco piatto. Dovresti cercare di applicare il contrasto selettivo in ogni singolo disegno che crei. Cerca le opportunità per utilizzare il contrasto con il colore, le dimensioni, lo spessore del font e qualsiasi altra cosa con cui devi lavorare.
Apple non si limita ad applicare il contrasto alle foto dei loro prodotti. Dai un'occhiata alla foto qui sopra e pensa a cosa ti salta addosso. Probabilmente è il grande pulsante di download blu. Naviga intorno al sito di Apple e vedrai che quasi ogni volta che vogliono che tu faccia qualcosa (compra, scarica, ecc.), Usano un pulsante blu brillante per attirare la tua attenzione.
# 4: sudare le piccole cose
Apple è incentrata sull'attenzione ai dettagli. Ogni piccolo pezzo del loro sito è rifinito alla perfezione. Mai cadere nella trappola di dire? Nessuno se ne accorgerà? o? abbastanza buono.? Spesso è il margine di tempo dedicato ai minimi dettagli che separa i bravi designer dai grandi.
Non comprare nella discussione sulle piccole cose? Dai un'occhiata ai loghi dei social media sulla home page di Microsoft Office e dimmi che non ti fanno rabbrividire.
Personalmente posseggo i file vettoriali di ciascuno di questi loghi. Ora, se posso farlo, non credi che i progettisti Microsoft avrebbero potuto prendere il tempo per rintracciare le versioni migliori di questi loghi per evitare la selezione sciatta di Photoshop Magic Wand? Ti sfido a trovare qualcosa di questo poco realizzato sul sito di Apple, tanto meno nella pagina di destinazione di uno dei loro software più popolari.
# 5: Evita il flash
Non sono mai stato uno con la folla degli hater di Flash, ma il fatto è che la folla sta crescendo. A guidare le masse non è altro che il CEO di Apple e il chiaroveggente della tecnologia di fama mondiale Steve Jobs. Dai un'occhiata a questo estratto di un recente articolo di Wired:
? A proposito di Adobe: sono pigri, dice Jobs. Hanno tutto questo potenziale per fare cose interessanti ma si rifiutano di farlo. Non fanno nulla con gli approcci che Apple sta prendendo, come Carbon. Apple non supporta Flash perché è così buggato, dice. Ogni volta che un Mac si arresta in modo anomalo il più delle volte è a causa di Flash. Nessuno userà Flash, dice. Il mondo si sta spostando su HTML5.? (Fonte)
Quelle sono parole forti da un uomo venerato per la leadership nel mondo tecnologico. Ad essere onesti, molto di ciò che dice è vero. Il contenuto Flash online non è certamente la tecnologia più affidabile e dipende in gran parte da software aggiuntivi e plug-in aggiornati che l'utente può avere o meno. Inoltre, HTML5 e CSS3 sono uno sguardo in un futuro in cui è possibile realizzare un'esperienza multimediale altamente interattiva con un codice semplice e conforme agli standard.
Come sviluppatore, se ti iscrivi a Apple nel loro boicottaggio Flash virtuale, probabilmente non te ne pentirai. Non devi nemmeno prendere una posizione attiva contro Flash, per evitare semplicemente di usare il più possibile. È praticamente garantito che ci siano molti meno mal di testa da parte degli utenti che non riescono a visualizzare i tuoi contenuti.
N. 6: renderlo amichevole
Per anni, Apple è stata bollata come un culto tutt'altro che amichevole. Hanno davvero cercato di eliminare quest'idea negli ultimi anni ristrutturando la loro immagine per renderla più accessibile. Il luogo più evidente che vedi è nel? Prendi un Mac? Annunci. Il Mac è ritratto come un tipo di ragazzo di tutti i giorni mentre il PC è il? Là fuori? un uomo d'affari che non ha sempre successo. In via subliminale, questi spot dicono che Apple è davvero una comunità aperta e chiunque, dagli adolescenti alle nonne, si adatta perfettamente.
Un'altra cosa che hanno fatto è migliorare il loro precedente record di supporto tecnico abissale. Ora chiunque in una grande città può solo fissare un appuntamento presso l'Apple Store per una consulenza gratuita one-to-one per risolvere eventuali problemi e / o domande che i clienti potrebbero avere.
Tutte queste tecniche sono rinforzate dalla grafica di volti amichevoli e sorridenti. Attualmente il negozio Apple vicino a me ha circa una dozzina di ritagli di cartone dei dipendenti Apple nella finestra come per dire "vieni dentro, siamo felici di aiutarti". Puoi anche individuare questi dipendenti sorridenti in alcuni punti del sito Web di Apple, come mostrato nella foto sopra.
Ciò che Apple sta facendo è creare un equilibrio tra design basato sulla tecnologia sorprendente ma non personabile e volti sorridenti e accessibili. Non importa cosa stai vendendo, considera se è appropriato farlo sembrare più amichevole e pensa a cosa puoi fare per ottenerlo. Anche un semplice? Ciao? in un titolo può fare molto.
7: usare una griglia forte
L'immagine qui sopra parla da sé. Ogni pagina del sito Apple aderisce a una rigida struttura a griglia; sia semplice o complicato, è lì. La proposta? Scopri quante informazioni ti stanno dando sulla pagina qui sopra. C'è semplicemente una tonnellata in corso, ma in qualche modo sembra attraente invece di travolgente.
Rompere le informazioni sporadiche in celle gestibili riduce drasticamente il disordine visivo e la confusione. Si noti che ogni cella contiene anche un riferimento visivo per accompagnare la descrizione del testo. Questi riferimenti visivi sembrano tutti molto simili e si inseriscono nel tema generale Apple. Anche se stai usando immagini d'archivio, prova a mantenere un tema simile in modo che non ci sia disparità visiva nelle immagini sparse su tutta la pagina.
8: Creare aiuti didattici
Per rafforzare il messaggio che la parte superiore del mouse è in realtà una superficie multi-touch, Apple ha creato l'illustrazione sopra. Anche senza il titolo, quasi nessuno sarebbe in grado di comprendere cosa sta succedendo nell'immagine e di conseguenza comprendere come usare un nuovo pezzo di tecnologia di cui non hanno completamente familiarità.
Tuttavia, Apple va oltre le illustrazioni. Quasi ogni pezzo di hardware e software sul loro sito ha un video di accompagnamento che mostra come funziona. Questo è un modo lungo per ridurre le domande di supporto tecnico. Faccio spesso riferimento ai miei amici (che sono tutti convertiti al Mac grazie a me e quindi mi vedono come supporto tecnico gratuito) a questi video perché forniscono un'esperienza molto più ricca e più facile da comprendere rispetto a una conversazione telefonica possibile. Dai un'occhiata alla libreria di Apple di video didattici per vedere quanto sono grandi per te.
N. 9: essere coerenti
L'immagine qui sopra è uno screenshot del negozio iTunes. Sembra familiare? Se stai pensando che assomigli molto ad Apple.com, hai ragione. Ora dai un'occhiata a Mac OS X, in particolare nel Finder. Ancora una volta vediamo un forte design basato sulla griglia, un sacco di trame bianche e metalliche e blu come strumento per catturare l'attenzione (nelle selezioni). Infine, dai un'occhiata alla linea completa di hardware Apple per vedere queste trame e gli elementi di design portati nel mondo reale.
Aspetto generale di Apple o? Essenza del marchio? viene applicato su ogni singola cosa che progettano. È piuttosto sorprendente quando ti rendi conto di quanto il loro software sia effettivamente il loro hardware. Quanto più integrato puoi ottenere? Se ti è mai stato affidato il compito di sviluppare un marchio, esamina ogni aspetto dell'azienda dagli annunci televisivi e dai siti web fino ai prodotti stessi. Considera come puoi integrare tutti questi elementi disparati per assomigliare a singoli pezzi di un insieme coerente.
# 10: Non solo un grande negozio
Apple è un ottimo caso di studio in un sito di e-commerce di successo. Si noti che l'intero sito è intenzionato a influenzare l'acquisto e l'educazione dei propri prodotti.Tuttavia, il sito non sembra un grande negozio.
Quello che intendo con questo è illustrato negli screenshot qui sopra. Il colpo in alto è la pagina Time Capsule dedicata. Apple ama creare bellissime pagine di prodotti con titoli intelligenti che ti informino di quanto siano grandi i loro prodotti. Si noti che questo tecnicamente non è il? Negozio? Se fai clic sul pulsante Acquista, tieni indirizzato alla pagina nella seconda schermata: il negozio online effettivo. Qui Apple ha completamente ridotto l'attrattiva visiva e focalizzato sull'usabilità. Ti danno le informazioni che ti servono senza distrazioni e rendono facile l'acquisto di un oggetto in pochi click.
Se stai facendo un negozio online, la tua prima idea sarà probabilmente quella giusta: costruire un negozio. Se hai tempo, budget, libertà, ecc, considera la possibilità di creare un sito Web per mostrare gli articoli nel negozio in un modo che semplicemente non sarebbe efficiente nel negozio stesso. Crea bellissime pagine dedicate che amplificano davvero il tuo prodotto e includono un? Acquista ora? collegamento che porta i clienti alla sezione del sito visivamente noiosa ma molto pratica.
# 11: sii sicuro
Ammettiamolo, i prodotti Apple sono piuttosto sorprendenti. Fai clic sul sito Apple per alcuni minuti e scoprirai che non sono esattamente modesti. I loro titoli sono pieni di aggettivi come bello, potente, divertente, rivoluzionario, facile da usare e avanzato. Le loro descrizioni dei prodotti ti informano che l'articolo è la cosa migliore disponibile nella sua categoria. Se lo si analizza troppo, potrebbe sembrare un po 'altezzoso. Tuttavia, come visitatore occasionale, probabilmente rimarrai semplicemente impressionato.
Se il tuo sito web sta pubblicizzando un prodotto, un servizio o semplicemente un'idea, non venderti breve. Non usare mai la parola? Buono? quando puoi dire "fantastico"? mai dire? attraente? quando puoi dire "bello"? Se sei sicuro del tuo prodotto, cerca davvero di comunicarlo ai tuoi visitatori. Scoprirai che si tratterà di loro e che in genere avranno una prima impressione molto più positiva se tutto sul tuo sito è focalizzato a convincerli di quanto sei bravo.
Come qualsiasi cosa, c'è ovviamente un punto di rottura. Chiedere a qualcuno non coinvolto nel sito di leggere la propria copia per assicurarsi che non si stia riversando sull'auto-lode così spesso da diventare un fastidio.
# 12: Metti copia legale in esso posto
Questo è piccolo ma importante. Se lavori per una società abbastanza grande da avere un dipartimento legale, sai che le persone nei dipartimenti legali lavorano duramente per dimostrare che non sono prive di valore. Di solito ciò che significa è che tu, come designer, crei qualcosa, invialo all'ufficio legale e ritiri un documento di 500 parole pieno di contenuti extra richiesti per legge. Inevitabilmente, ne scaturisce una maledizione.
Quello che fai con questo contenuto è importante. Considera se si tratta di informazioni che l'utente vuole effettivamente conoscere o se è solo una necessità malvagia che nessuno leggerà mai. Se è quest'ultimo, prendi una pagina dal libro di Apple (un morso dalla mela per intenderci) e lanciala nella parte inferiore della pagina in un font piccolo ma leggibile che non sia troppo contrastato con lo sfondo. Il tuo obiettivo principale come dipendente dovrebbe essere rendere questo contenuto accessibile, individuabile e leggibile. Tuttavia, il tuo obiettivo come designer è quello di assicurarti che non rovini il tuo progetto riempiendolo di ingombri non importanti.
13: Navigazione completa del sito a piè di pagina
Guarda il footer nello screenshot qui sopra. Apple ha trasformato la parte inferiore di ogni pagina in uno strumento di navigazione estremamente utile. Questo è un ottimo modo per ridurre la difficoltà di navigare in un grande sito. Piuttosto che riempire la loro navigazione principale con un link ad ogni sezione del sito, l'hanno riservata per categorie generali. All'interno di una categoria, se scorri verso il basso nella parte inferiore della pagina trovi una mappa del sito molto più completa nel footer.
Si noti che non si sono fatti in quattro per farlo sporgere. È sufficiente che tu riesca a individuarlo se stai cercando qualcosa ma abbastanza sottile da non dargli una seconda occhiata se non hai bisogno di aiuto con la navigazione.
# 14: Crea bellissime icone personalizzate
Con l'introduzione di OS X, Apple ha portato le icone in un nuovo regno. Da allora, la straordinaria progettazione di icone ha allagato i sistemi operativi e si è riversata sul web. Tuttavia, ci sono alcuni set di icone gratuiti online che hanno raggiunto una tale fama da diventare cliché.
Quindi, prima di scaricare una serie di icone che assomigliano a qualsiasi altra cosa sul web, provala tu stesso. Accendi Photoshop e / o Illustrator, rispolvera le tue abilità di disegno e crea delle fantastiche icone personalizzate. Alla fine rimuoveranno davvero il design del tuo sito. Man mano che impari l'arte del design di icone, noterai che sei molto meno dipendente dall'arte di terzi per produrre siti incredibili (che è davvero una buona cosa). Se non altro, risparmierai quei pazzi del dipartimento legale dal cercare di capire le restrizioni legali su tutti quelli? icone.
# 15: Contenuti interattivi e dinamici
Quasi ogni pagina del sito di Apple contiene una presentazione automatica, un menu di fisarmonica animato, un video o una galleria fotografica interattiva. L'obiettivo qui è quello di mantenere l'attenzione dell'utente. Il contenuto statico può essere un po 'noioso e può indurre un utente a lasciare il sito alla ricerca di qualcosa di più interessante. Apple attira la tua attenzione offrendoti molte pagine con contenuti in continua evoluzione o parti di funzionalità interattive.
Questo tipo di contenuto dovrebbe essere affrontato con estrema cautela per una serie di motivi. Prima di tutto, è facile lasciare indietro più della metà dei tuoi visitatori se stai programmando in funzioni che richiedono un plug-in speciale.Cerca di attenersi a tecnologie ampiamente supportate che funzionano su più browser. Inoltre, è davvero facile lasciarsi trasportare dai contenuti dinamici. C'è una linea estremamente sottile tra accattivante e fastidioso e devi assolutamente imparare dove cade quella linea. Altrimenti si dà ai visitatori un mal di testa al posto della buona impressione che stavi cercando.
Un'altra cosa?
Per riassumere, Apple Inc. è praticamente sinonimo di design di classe. C'è molto da imparare dall'osservare questi grandi designer al lavoro che va ben oltre il semplice strappo delle fredde riflessioni che mettono su tutto. I suggerimenti di cui sopra sono pensati per essere generalmente applicati al tuo lavoro in un modo unico. Usali come fonte d'ispirazione per illuminare il tuo percorso nel design del sito.
Ogni volta che qualcuno menziona Apple, ci sono degli evangelisti e nemici, desiderosi di condividere il loro amore immortale o profondo odio per i metodi di progettazione di Apple. Usa i commenti qui sotto per dirci quale sei. Siete tutti per il minimalismo mescolato con icone lucide o siete stufi del web come un gruppo di aspiranti alla mela? Vogliamo sentire i tuoi pensieri.