Share
Typekit ha recentemente ridisegnato la propria homepage con alcuni nuovi servizi in mente. Quando Typekit è entrato in Adobe, hanno deciso di portarci un nuovo modo di gestire i caratteri sul web. Non solo hanno creato un modo abbastanza semplice per incorporare i caratteri sul Web, ma hanno anche lanciato ufficialmente un'opzione di sincronizzazione desktop, che consente agli abbonati di Creative Cloud di sincronizzare i caratteri sul proprio computer direttamente da Typekit. Questo è stato in una forma beta per un po 'ora, e fornisce un percorso molto più facile per i caratteri locali piuttosto che trovarli altrove!
Disclaimer: questo articolo non è stato in alcun modo approvato da Adobe o dai membri del team di Typekit (speriamo comunque che a loro piaccia).
Questo articolo parlerà esclusivamente della nuova homepage di Typekit e fornirà alcuni dettagli dell'implementazione utilizzata per creare gli elementi di marketing.
Come è il corso della nostra serie How They Did It, forniremo anche alcuni commenti sulle decisioni artistiche e tecnologiche e apriremo la conversazione per una conversazione costruttiva e critica.
Cercheremo anche di evitare qualsiasi allitterazione.
Typekit è in circolazione da un po 'ed era abbastanza scadente per un aggiornamento. Ecco come appariva prima:
Mentre questa è una homepage perfettamente bene, era un po 'datata. Con il nuovo design, Typekit utilizza un contesto graficamente centrato per visualizzare i caratteri accanto alle persone e alle aziende che utilizzano il servizio. Utilizzando le query multimediali, la pagina di destinazione conserva gran parte del design principale e degli elementi di contenuto fino al mobile. Ecco come appare ora.
Alcune importanti decisioni di progettazione caratterizzano la versione desktop di questo design. L'effetto risultante offre ai visitatori la sensazione che il design sia, letteralmente, fuori dalla scatola. Ne vediamo le prove in tutto il sito.
Per prima cosa, vediamo gli screenshot dell'app nell'intestazione della pagina sotto il titolo "Ogni tipo di carattere è necessario. Ovunque ne hai bisogno". (A proposito, parleremo più tardi di questo titolo.) Le png circle ci forniscono tre punti marketing direttamente correlati al servizio: "Migliaia di caratteri", "Consegnato da Creative Cloud", "Scegli il tuo mezzo". Queste tre idee sono immediatamente accessibili alla maggior parte dei designer, poiché la maggior parte dei designer ha ormai familiarità con Creative Cloud, e quasi certamente tutti i designer hanno familiarità con i caratteri e i dispositivi.
La scelta dei cerchi stabilisce immediatamente l'evitamento di un'interfaccia squadrata. I cerchi aumentano di dimensioni da sinistra a destra, dando un senso di movimento e progresso. Nessuno dei cerchi è utilizzabile. Va anche notato che questa è anche l'unica presenza di cerchi come forma grafica sulla pagina.
Ci sono molte tendenze da monitorare quest'anno e l'uso dei pannelli è uno di questi. Abbiamo visto l'aumento di questa interfaccia quando plugin come jQuery Masonry hanno colpito la scena e quando Pinterest li ha resi popolari come elemento interattivo primario. Typekit utilizza pannelli in sei "cluster" distinti sulla pagina, ciascuno dei quali ha il proprio scopo di contenuto.
Il primo cluster mostra i caratteri tipografici stessi e il secondo cluster mostra i clienti che utilizzano Typekit:
Il terzo cluster mostra quali tipi di lavoro è possibile utilizzare con Typekit ora che è possibile eseguire la sincronizzazione sul desktop locale.
Il quarto cluster spiega i prezzi di Typekit.
Il quinto cluster contiene in realtà una selezione di pannelli FAQ che non usano un colore di sfondo, e invece impiegano solo tipografia e iconografia.
Infine, il sesto cluster funge da "footer" del sito Web, con informazioni sul copyright e collegamenti a destinazioni comuni relative a Typekit.
Questi cluster costituiscono gli elementi di interesse del layout principale e presentano un allineamento unico sfalsato che fornisce chiarezza e separazione tra di essi, oltre a favorire la separazione da un layout più comune costituito da elementi che sono naturalmente allineati verticalmente. Tutti i pannelli che hanno uno sfondo sono sfalsati di metà dell'altezza di un pannello, usando una simmetria prevedibile. (L'unica eccezione a questo sconcertante è il cluster di prezzi, che forma una forma +.) Questa prevedibilità funziona per consentire a questi blocchi di formare una forma; per esempio, il primo gruppo di blocchi forma un diamante, mentre il terzo insieme forma una linea diagonale da in alto a sinistra a in basso a destra.
Diamo un'occhiata a come questo particolare effetto viene raggiunto.
Ecco il markup per il primo cluster:
I MIGLIORI SONO SU TYPEKIT
Caratteri stordenti da fonderie di qualità. Inspiring per navigare e facile da usare.
Sfoglia tutti i tipi di carattere
AW Conqueror Carved
Typofonderie
Disponibile in più stili, inclusi inline e "Scolpito", AW Conqueror è un volto di titolazione multitalento le cui componenti cromatiche rispondono con potenza alla stratificazione.
Vedi: Stratificazione di caratteri web cromatici
Proxima Nova
Mark Simonson Studio
Combinando elementi geometrici con proporzioni umanistiche, Proxima Nova funziona in molti contesti diversi grazie alla sua varietà di pesi e larghezze.
Notizie Gothic Std
Adobe
Un classico per titoli di giornali, pubblicità e packaging, l'originale News Gothic è stato progettato nel 1908 e si veste ordinatamente sul web oggi.
Vedi: ombreggiatura con CSS
I MIGLIORI SONO SU TYPEKIT
Non preoccuparti mai della qualità dei caratteri tipografici, delle fonti, delle licenze. Il carattere che vuoi, ovunque, in qualsiasi momento.
Sfoglia tutti i tipi di carattere
Futura PT
ParaType
Futura, la quintessenza delle sans geometriche, ha ispirato generazioni di designer con le sue caratteristiche audaci e ora è stata sapientemente preparata per il web da ParaType.
Brandon Grottesco
Font HVD
Brandon Grotesque è elegante e caldo, con lunghi discensori e terminali arrotondati: un grande talento per le dimensioni del display o per una copia accattivante.
Kulturista Web
Tipo di valigia Fonderia
Kulturista Web è un robusto serif lastra adatto per intestazioni, sottotitoli e navigazione, disponibile in cinque pesi con corsivo.
Minion Pro
Adobe
Minion è un carattere di Adobe Originals ispirato ai disegni classici del tardo Rinascimento, un periodo di tipo elegante, bello e altamente leggibile.
Vedi: Elenco: buono per longform
FF Meta Serif Web Pro
FontFont
FF Meta Serif è snello e leggibile, con un eccellente equilibrio e affascinanti idiosincrasie. Si imposta bene da solo o con una varietà di altri caratteri tipografici.
Vedi: Accoppiamento dei caratteri tipografici
Klavika
Tipo di processo Fonderia
Disponibile direttamente da Process Type Foundry, Klavika dimostra una flessibilità infinita e una miscela di influenze umanistiche e geometriche.
Vedi: porta la tua licenza
A parte gli url delle librerie degli asset oscurati (generati dalla pipeline delle risorse di Ruby on Rails), il markup è abbastanza diretto. Ecco un esempio sintetico:
L'elemento di intestazione viene visualizzato solo sotto 980 px. Utilizzando una larghezza del contenitore di 940 px, i blocchi sono quadrati di 300x300 px. utilizzando elementi per i blocchi, l'offset si ottiene aggiungendo un margine superiore al
.blocks> ul.offset-half margin-top: 150px; .blocks> ul.offset-full margin-top: 300px; .blocks> ul.offset-three-halves margin-top: 450px;
Esistono anche alcune classi di offset che estrapolano le colonne dal bordo della griglia.
.blocchi> ul.overflow-left position: absolute; a sinistra: -280px;
L'eccezione a questa è la FAQ, che ha quattro colonne anziché tre.
Su molti dei pannelli stessi, vediamo l'uso di una "tenda". Quando si posiziona il mouse sull'elemento, una tenda si sposta o appare, rivelando il contenuto relativo al pannello stesso. Ciò si traduce in un'interfaccia che invita all'esplorazione e all'indagine. Queste interazioni si basano su transizioni CSS innescate da elementi in bilico e assolutamente posizionati all'interno di elementi relativamente posizionati.
Diamo un'occhiata a come potremmo ottenere questo.
Abbiamo due tipi di tende di base: la tenda di sovrapposizione e la tenda a scorrimento di diapositive.
Vediamo il seguente markup per un singolo pannello di ogni tipo.
Vedi: Elenco: buono per longform
I designer di Paravel si concentrano sul design di qualità reattivo per i siti Web dei loro clienti con codice solido, attenzione profonda ai dettagli visivi e tipo eccellente.
Quindi imposteremo le nostre diverse transizioni al passaggio del mouse.
/ * Slide Ttain * / #who li.paravel background-image: url (/assets/newhome/who/paravel-ce782f6791c64eee5bf74b72986bceb9.jpg); #who li div height: 220px; text-align: left; background-color: RGBA (0,0,0,0.8); Filtro: progid: DXImageTransform.Microsoft.Alpha (Opacità = 0); Opacità: 0; -webkit-transition: opacity .15s linear; -moz-transition: opacity .15s linear; -o-transizione: opacità .15s lineare; transizione: opacità .15s lineare; padding: 40px; #who li: hover div filter: progid: DXImageTransform.Microsoft.Alpha (Opacity = 100); opacità: 1; / * Fade Curtain * / #best li position: relativo; background-color: # 323232; overflow: hidden; text-align: left; #best li img left: 0; position: absolute; z-index: 1; -webkit-transition: left .1s cubic-bezier (0,0,0,4,1); -moz-transition: left .1s cubic-bezier (0,0,0,4,1); -o-transizione: sinistra .1s cubico-bezier (0,0,0,4,1); transizione: left .1s cubic-bezier (0,0,0,4,1); #best li: hover img left: -280px;
Gli aloni sugli elementi del pannello li attivano le transizioni sugli elementi figli del li stesso.
A misura di cellulare, il layout cambia in modo significativo. Vediamo un leggero cambiamento nel nav, portando in alto il badge Adobe e lasciando cadere gli elementi primari nella seconda barra per consentire loro di spostarsi sotto il logo Typekit. Perdiamo i cerchi nell'intestazione e invece restano i tre punti di marketing come sottotitoli. Vediamo quindi i nostri contenuti suddivisi in sei sezioni separate, incluso il piè di pagina. Queste sezioni hanno ciascuna un'intestazione verde allegata a loro, seguita da ciò che in precedenza erano i nostri pannelli. I pannelli ora sono stati spostati in una lista a scorrimento laterale. Questo ovviamente significa che l'effetto sfalsato non appare sul cellulare.
Successivamente, vedremo come viene scritto il CSS per i pannelli a scorrimento laterale, in contrasto con i pannelli sfalsati.
Ricorda, stiamo mostrando l'intestazione sul cellulare, e i pannelli stessi dovrebbero scorrere orizzontalmente. Raggiungiamo questo obiettivo con poche righe di CSS:
@media (max-width: 979px) sezione # best .blocks width: 2700px; header di sezione display: block; section .container .blocks> ul float: left; margin-top: 0! importante; larghezza: auto; section .container .blocks> ul> li float: left;
Questo modello allinea sostanzialmente tutti i pannelli di blocco orizzontalmente, con una larghezza totale di 2700 px per questa sezione.
Abbiamo anche impostato l'elemento contenitore (#soddisfare) per overflow nascosto.
#content overflow: hidden;
Questo consente il .blocchi elemento per essere più ampio dello schermo senza che il corpo del documento si espanda oltre la naturale larghezza del 100% dello schermo, facendo in modo che lo scorrimento orizzontale avvenga in modo discreto dal resto della pagina.
Sui dispositivi mobili e su tablet, vediamo anche un piè di pagina più tradizionale che sostituisce il footer dell'unità panel-drive.
È interessante notare che non c'è quasi nessun tipo di JavaScript in esecuzione sulla pagina. La maggior parte del codice JavaScript in esecuzione è correlata ai caratteri Typekit utilizzati nella pagina.
Rompendo da un numero enorme di pagine di marketing che sono emerse negli ultimi anni, Typekit ha scelto di non utilizzare lo scorrimento per i trigger di animazione o l'attivazione di tipo parallasse. Anche se non possiamo dire in modo specifico perché questa decisione è stata presa, potrebbe segnalare un ritorno all'interazione meno impegnativa basata sul puntamento diretto del mouse e uno spostamento verso una nuova tendenza.
La scelta del carattere del titolo. I caratteri del titolo sembrano essere una scelta strana, data la scelta dei caratteri tipografici per tutto il resto della pagina. I caratteri slab e cursive sono intrisi di una notevole quantità di caratteristiche di visualizzazione che ci si potrebbe aspettare di trovare in un editoriale interattivo o in un sito promozionale di film.
Averli in cima al Typekit è accettabile solo a causa della natura del prodotto. Tuttavia, questo sembra essere l'elemento di design più discutibile.
Problemi di retina. Mentre gran parte delle immagini appare nitida, i PNG circolari nell'intestazione sono chiaramente pixelati sugli schermi retina. Ciò rende il prodotto meno raffinato di quanto ci si aspetterebbe da un prodotto Adobe ed è un promemoria dell'adozione da parte di Adobe della grafica retina per Photoshop e delle altre applicazioni desktop. Le icone nella sezione Domande frequenti sono un'altra occasione mancata per l'utilizzo del vettore, anche se questo è molto meno evidente.
Tutto sommato, la nuova landing page di Typekit è un'elegante e unica esecuzione di un refresh in presenza sul web che accompagna uno spostamento nell'offerta di prodotti. Con un flusso di contenuti avvincente e una direzione artistica ben eseguita, la semplicità delle interazioni per questo sito aumenta l'efficacia del tono di vendita.
Cosa hai trovato di essere particolarmente avvincente con questa pagina? Di quali parti del progetto vorresti saperne di più? Discutiamone nei commenti!
Accentsconagua