Contenuto
- 01. Angolo2
- 02. MADCLEM
- 03. IBM Plex
- 04. Cowboy
- 05. Amanti dell'interfaccia
- 06. Google Fonts
- 07. Revisione della tecnologia del MIT
- 08. Resn
- 10. Monotipo
- 11. LS Productions
- 12. O’Neill
- 13. Hipstamatic
- 14. Apple
Il giusto design della pagina di destinazione può creare o distruggere un sito Web, poiché questa è la prima cosa che i tuoi visitatori vedranno. Se sbagli, la maggior parte delle persone non si fermerà.
I design delle pagine di destinazione dovrebbero trasmettere chiaramente il punto di vendita unico (USP) per il prodotto o servizio e concentrarsi su un invito all'azione (CTA), ad esempio convincere il visitatore a registrare i propri dettagli o effettuare un acquisto. Qualunque sia l'obiettivo, spetta al design della pagina incanalare l'utente verso di esso, sia attraverso l'uso di spazi bianchi, colori contrastanti o indicazioni direzionali più esplicite. (E avere i migliori strumenti di web design a portata di mano ti aiuterà a raggiungere questo obiettivo.)
Intestazioni e sottotitoli chiari e concisi e punti elenco incisivi e facilmente scansionabili sono all'ordine del giorno. La pagina di destinazione dovrebbe avere un marchio ben visibile, spesso incorporare un'immagine eroica per comunicare il prodotto o servizio a colpo d'occhio e andare dritta al punto per evitare che l'attenzione degli utenti si sposti.
Tenendo presente tutto ciò, abbiamo raccolto alcuni esempi particolarmente efficaci di progettazione di pagine di destinazione da tutto il Web.
Cerchi più ispirazione per il design? Dai un'occhiata alla nostra selezione delle migliori pagine di errore 404 e a questi abbinamenti di caratteri perfetti.
01. Angolo2
Angle2 è un'agenzia di design digitale ucraina, con un team che crede fermamente nel potere del marchio. Apparentemente nulla li eccita di più che creare esperienze uniche e su misura che "trasudano il DNA del tuo marchio" mentre spingono la busta dell'interfaccia utente.
Questa nuova casa online per i suoi servizi sostiene sicuramente l'affermazione, introducendo non solo un lavoro stellare ma anche due effetti fantastici. Aprendo alcuni enormi caratteri Montserrat intrisi di # 2AF8EB - o turchese per gli umani - otteniamo un allenamento tipografico che vale la pena assaporare. Il trucco diventa una caratteristica in tutto e trasmette il sentimento "angolare" con una superba illusione di testo inclinato.
Questo essenzialmente utilizza gli elementi div> sinistro e destro per formare una divisione 50/50 al centro della visualizzazione. Da qui una serie di righe di testo inclinate avvolte in tag span> hanno funzioni CSS translate3d applicate e animate con TweenMax al passaggio del mouse. Applicando colori contrastanti su ciascun lato, si ottiene un'estetica piegata a 45 gradi che definisce il design generale.
L'iniezione del vivido colore blu accento in una tavolozza in gran parte in bianco e nero mostra anche un'esecuzione di buon gusto, con ulteriore divertimento riservato alla sezione "The Team" dei ritratti di persone sorridenti. Qui, durante la transizione da una fotografia all'altra, noterai un favoloso filtro frammentato che funziona a meraviglia.
02. MADCLEM
Sin dall'inizio del Web, sviluppatori e designer hanno spinto e spinto ai margini esterni di ciò che è possibile, cercando di fare qualcosa di nuovo o interessante e respingendo le aspettative su cosa sia un sito web e come funziona. Questa sperimentazione dallo spirito libero è un segno distintivo del web strano e selvaggio.
Il sito portfolio di Clément Chenebault, MADCLEM, segue quella storica tradizione di spingersi oltre i confini, trasformando una semplice griglia di quadrati colorati in una massa fluida e malleabile di blobbery liquido. L'intero sito si piega e si gonfia ad ogni movimento che fai, espandendosi e contraendosi per mostrare piccoli scorci di pezzi del portfolio mentre ti fai strada attraverso la massa gelatinosa. Il sito è un'isola divertente e ondulata in mezzo a un mare spesso monotono di portafogli di designer e sviluppatori che sembrano uguali.
03. IBM Plex
IBM ha recentemente rilasciato un proprio font personalizzato, IBM Plex; questo è il primo aggiornamento del suo carattere tipografico aziendale dal 1956, quindi è un grosso problema. Per aiutare a introdurre il carattere tipografico nel mondo, IBM ha chiesto allo studio XXIX di progettare e costruire un sito web per mostrarlo. L'idea alla base del design era quella di utilizzare immagini, animazioni e fotografie per raccontare la storia di Plex mentre mostrava il carattere in modi entusiasmanti.
La cosa fantastica è che gran parte del sito serve come un modo per testare il carattere ed esplorare i molteplici stili disponibili per l'uso. Quindi puoi davvero vederlo nel contesto prima di decidere di iniziare a usarlo nei progetti. Il sito è sicuramente uno per i grafici e ricorda in qualche modo una pagina di portfolio. Soprattutto perché, nonostante le informazioni dense visualizzate, è possibile scorrere continuamente le diverse sezioni, mentre si viene accolti da alcune animazioni inventive attivate dallo scorrimento.
04. Cowboy
Cowboy è una nuova generazione di bici elettriche, destinata agli abitanti delle città negli Stati Uniti. Di conseguenza, il suo sito web doveva essere intelligente per comunicare il valore di un prodotto che sta cercando di rivoluzionare un mercato noto per la produzione di biciclette poco attraenti e goffe.
Creato da Ueno, il sito utilizza una tipografia audace, colori forti, un'ottima fotografia ed è costruito davvero bene, offrendo un'esperienza di prima classe agli utenti. La bici stessa è al centro della scena e attira immediatamente gli occhi dell'utente.
Le transizioni e l'ingrandimento delle caratteristiche della bici, mentre l'utente scorre verso il basso, vengono mantenute sottili in modo che la bici rimanga centrale. L'attenzione al contenuto e la non progettazione eccessiva dell'esperienza significa anche che il sito si carica rapidamente su tutti i dispositivi ed è molto reattivo. L'app per la bici ha una sua pagina e le parallassi tra le caratteristiche ei dati sulle prestazioni offerti rivelano magnificamente la natura connessa del prodotto e la parallasse entro i confini del dispositivo.
05. Amanti dell'interfaccia
Progettare una pagina di destinazione per un sito dedicato agli "amanti dell'interfaccia" non è un'impresa da poco, ma Timothy Achumba, un designer per Facebook, l'ha inchiodata qui. Il sito mira a ispirare le persone, fornire consigli pratici sull'arte del design dell'interfaccia utente e celebrare le esperienze uniche di diversi designer.
Il design pone l'accento sul contenuto e utilizza un layout equilibrato ispirato al primo amore di Achumba: la stampa."Il design per Interface Lovers, basato su una semplice griglia a tre colonne presa dal layout di un giornale, è semplice e pulito", afferma. La bella fotografia di ritratto attira i visitatori e sottolinea l'interesse del sito per le singole storie.
Per costruire il sito, lo sviluppatore Iheanyi Ekechukwu ha sfruttato Tachyons, un framework CSS funzionale che consente un controllo granulare sul design. Il risultato è un design stupendo e minimale, senza che nessun suono possa intralciarlo.
06. Google Fonts
Lanciati originariamente nel 2010, i caratteri di Google sono ora visualizzati sul Web oltre 15 miliardi di volte al giorno, in oltre 135 lingue in tutto il mondo. Il sito di Google Fonts è pulito e completamente reattivo, utilizzando Material Design per la sua griglia e lo stile.
Nel suo post sul blog sul progetto, la designer Yuin Chien spiega che "sviluppando la capacità di giocare con le combinazioni di scala, colore e font, invitiamo tutti a scoprire e utilizzare perfettamente i caratteri tipografici nei loro progetti". E ha ragione; l'interfaccia è invitante e bella. È anche intuitivo e divertente da esplorare.
Fondamentalmente non ti obbliga a fare i salti mortali per arrivare ai caratteri; sono proprio lì nella parte superiore della pagina di destinazione, pronti per essere giocati. Puoi digitare direttamente nei campi di testo della pagina per provarli. E se sei sopraffatto dalla scelta, Google semplifica il restringimento delle cose con caselle di controllo per le categorie di caratteri e pratici cursori per numero di stili, spessore, inclinazione e larghezza.
07. Revisione della tecnologia del MIT
Così tanti siti fanno di tutto per raccogliere quelle visualizzazioni di pagina con trucchi fantasiosi, è un sollievo trovare un sito che mantiene le cose belle e semplici. La Technology Review del MIT, pubblicata per la prima volta alla fine del XVIII secolo, ha una lunga e orgogliosa eredità e il suo sito è stato progettato su misura per mostrare arte eccellente ed essere un piacere da leggere.
La pagina di destinazione è una gioia per gli occhi, che inizia con una storia di copertina audace, tre storie secondarie e un elenco di riepilogo delle notizie principali del giorno chiamato "Download". Ciò consente ai visitatori di arrivare rapidamente a ciò che conta in modo pratico.
Un grande CTA di iscrizione rosso in alto a destra attira immediatamente la tua attenzione, canalizzando i visitatori verso le opzioni del sito Web a pagamento senza ostacolare il loro godimento dei contenuti gratuiti disponibili.
08. Resn
Con la sua griglia ben strutturata di immagini gloriose, il sito Present & Correct raggiunge quello che è sicuramente il suo pubblico principale: le persone che feticizzano la cancelleria.
Uno sfondo di carta millimetrata, una colorazione grigio chiaro e un carattere classico trasmettono l'atmosfera di un quaderno scolastico e ogni pannello mostra un bellissimo prodotto. Le scorte sono meticolosamente organizzate in categorie visualizzate nella barra dei menu in alto e si è tentati di fare clic sull'intero lotto, iniziando dalla sezione "Ephemera" dal titolo intrigante.
10. Monotipo
"Siamo l'azienda dietro il tipo", afferma la pagina di destinazione di Monotype, e il suo design sobrio ma intelligente va di pari passo con questa affermazione sicura. L'intera metà sinistra del design della pagina di destinazione è dedicata alla dichiarazione di intenti dell'azienda, e c'è una svolta intelligente: attraverso un menu a discesa è possibile visualizzare il testo in un assortimento di caratteri e in vari pesi e stili, per avere un assaggio di cosa Monotype lo fa.
Il lato destro della pagina è dedicato a un collegamento alla libreria Monotype, alla licenza aziendale e alle notizie aziendali, con grandi icone "M" in caratteri diversi, che agiscono come capolettera. Una tavolozza di colori seppia attenuata mantiene l'attenzione sui caratteri.
11. LS Productions
LS Productions, una società di produzione di servizi di fotografia e movimento con sede in Scozia, sa qual è la sua più grande risorsa, ed è ciò che ti viene presentato quando visiti il suo sito. Un video in loop che riempie le finestre mostra una selezione del lavoro dell'azienda, il tutto ambientato in luoghi meravigliosi. Scorri verso il basso e imparerai i suoi tre servizi principali: movimento, foto e luoghi.
A questo punto la pagina di destinazione ha già fatto il suo lavoro. Tutto ciò che segue - la splendida location della settimana, la sezione "incontra la squadra" - è solo una vetrina. Se stai cercando di assumere LS Productions, sarai già passato a una delle pagine di servizio principali, dove troverai una vasta gamma di informazioni pertinenti e ben presentate che ti convinceranno dell'idoneità dell'azienda.
12. O’Neill
Il marchio di lifestyle americano O’Neill si concentra principalmente su due cose: surf e neve. E il suo sito negli Stati Uniti lo rende perfettamente chiaro con una pagina di destinazione guidata da immagini che vende le sue gamme di abbigliamento e attrezzatura sportiva attraverso splendide fotografie di grandi onde e montagne innevate.
Una serie di link a discesa nella parte superiore della pagina di destinazione può portarti direttamente a ciò che desideri se sai cosa stai cercando, ma al di sotto di ciò la pagina di destinazione si propone di sedurti, con diversi grandi, guidati da immagini link di sezione e gallerie Instagram. È tutto abbastanza per farti precipitare in spiaggia - o in cima alla montagna più vicina - ma non prima di aver prima fatto scorta di attrezzatura O’Neill.
13. Hipstamatic
Per l'app di fotografia analogica retrò Hipstamatic, si tratta di dimostrare le fantastiche funzioni, nonché l'aspetto, le sensazioni e la navigazione intuitiva dell'app, nel modo più coinvolgente possibile per attirare gli utenti.
Nella parte superiore della pagina, una striscia di galleria a scorrimento mostra in pratica l'``estetica Hipstamatic '', mentre un enorme iPhone mostra l'ultima versione dell'app, con la sua vecchia scuola ClassicMode e il nuovo ProMode, con funzionalità più aggiornate . Al di sotto di ciò, un nuovo slogan riassume ciò che è ora Hipstamatic: "Fai una bella fotografia", con un grande CTA che ti indirizza all'App Store.
14. Apple
Pinterest sa quello che vuole e non è dell'umore giusto per girarci intorno: è l'iscrizione o niente. Il popolare album di ritagli online è abbastanza sicuro del suo marchio e della sua reputazione in crescita da non preoccuparsi troppo di vendersi da solo o di dare agli utenti l'opportunità di sfogliare alcune bacheche e rischiare di essere distratti.
Dietro la scheda di registrazione, uno degli album di ritagli di Pinterest di fotografie gloriose scorre in modo allettante verso l'alto, dando un assaggio di ciò che viene offerto agli utenti. Questa è una versione ridotta e abbellita di ciò che ottieni effettivamente: nessuna descrizione prolissa, pubblicità o informazioni repin ingombra questa versione della home page.
