Share
Typekit a redesenat recent pagina lor de pornire cu câteva servicii noi în minte. Când Typekit s-au alăturat Adobe, au propus să ne aducă un nou mod de a gestiona fonturile de pe web. Nu numai că au creat o modalitate destul de simplă de a încorpora fonturile pe web, dar au lansat oficial o opțiune de sincronizare desktop, care permite abonaților Creative Cloud să sincronizeze fonturile pe calculatorul lor direct de la Typekit. Acest lucru a fost într-o formă beta pentru un timp acum, și oferă un traseu mult mai ușor pentru fonturi locale decât găsirea lor în altă parte!
Disclaimer: acest articol nu a fost în nici un fel aprobat de Adobe sau de membrii echipei Typekit (sperăm că totuși le place).
Acest articol va vorbi exclusiv despre noua pagină de pornire Typekit și vă va oferi câteva detalii despre implementarea utilizată pentru crearea elementelor de marketing.
Așa cum se întâmplă pentru cursul din seria "Cum au făcut-o", vom oferi, de asemenea, niște comentarii în legătură cu deciziile artistice și tehnologice și vom deschide conversația pentru o conversație critică constructivă.
Vom încerca, de asemenea, să evităm orice aliterație.
Typekit a fost în jur de ceva timp și a fost destul de târziu pentru o reîmprospătare. Iată cum a fost înainte:
Deși aceasta este o pagină de pornire foarte fină, a fost ușor datată. Cu noul design, Typekit folosește un context centrat grafic pentru a afișa fonturi alături de persoanele și companiile care utilizează serviciul. Utilizând interogările media, pagina de destinație păstrează în mare parte cea mai mare parte a elementelor sale de design primar și de conținut, până la cel mobil. Iată cum arată acum.
Câteva decizii importante de design caracterizează versiunea desktop a acestui design. Efectul care rezultă oferă vizitatorilor un sentiment că designul este, literalmente, ieșit din cutie. Vedem dovezi despre acest lucru pe întreg site-ul.
În primul rând, vedem capturile de ecran ale aplicației în antetul paginii, sub titlul "Fiecare font de care aveți nevoie, oriunde aveți nevoie". (Apropo, vom vorbi despre acel titlu mai târziu.) Png-urile din cerc ne dau trei puncte de marketing care sunt direct legate de serviciu: "Mii de fonturi", "Livrate de Creative Cloud", "Alegeți mediul". Aceste trei idei sunt accesibile imediat celor mai mulți designeri, deoarece majoritatea designerilor sunt deja familiarizați cu Cloud Creative și, cu siguranță, toți designerii sunt familiarizați cu fonturile și dispozitivele.
Alegerea cercurilor stabilește imediat evitarea unei interfețe boxy. Cercurile cresc în dimensiune de la stânga la dreapta, dând un sentiment de mișcare și progres. Niciunul dintre cercuri nu poate fi atacat. Trebuie de asemenea remarcat faptul că aceasta este și singura prezență de cercuri ca formă grafică pe pagină.
Există multe tendințe care trebuie monitorizate în acest an, iar utilizarea panourilor este una dintre ele. Am văzut creșterea acestei interfețe când plugin-uri precum jQuery Masonry au lovit scena, iar când Pinterest le-a popularizat ca un element interactiv primar. Typekit folosește panouri în șase "grupuri" distincte pe pagină, fiecare cluster având propriul scop de conținut.
Primul cluster afișează fonturile înșiși, iar cel de-al doilea cluster arată clienților care utilizează Tipul de tip:
Cel de-al treilea cluster arată tipurile de lucru pe care le puteți utiliza pentru tipărire, acum cu ajutorul căruia vă puteți sincroniza cu desktop-ul local.
Al patrulea cluster explică prețul tipului de tip.
Cea de-a cincea cluster conține de fapt o selecție de întrebări frecvente despre panouri care nu utilizează culoarea de fundal și folosesc în schimb doar tipografie și iconografie.
În cele din urmă, cel de-al șaselea grup acționează ca "subsolul" site-ului web, cu informații privind drepturile de autor și linkuri către destinații comune legate de tipul de cuvânt.
Aceste grupuri alcătuiesc elemente de interes primar de aspect și au o aliniere unică, care oferă o claritate și o separare între ele, în timp ce, de asemenea, continuă separarea dintr-o structură mai comună, constând din elemente care, în mod natural, sunt aliniate vertical. Toate panourile care au un fundal sunt eșalonate de jumătate din înălțimea unui panou, folosind o simetrie previzibilă. (Singura excepție de la această eșalonare este grupul de stabilire a prețurilor, care formează o formă +). Această predicție funcționează pentru a permite acestor blocuri să formeze o formă; de exemplu, primul set de blocuri formează un diamant, în timp ce al treilea set formează o linie diagonală de la stânga sus la dreapta jos.
Să analizăm modul în care se realizează acest efect special.
Aici este marcajul pentru primul grup:
Cele mai bune sunt pe TYPEKIT
Stripuri uimitoare din turnătorii de calitate. Inspirat pentru a naviga, și ușor de utilizat.
Răsfoiți toate fonturile
AW cuceritor sculptat
Typofonderie
Disponibil în mai multe stiluri, incluzând inline și "Carved", AW Conqueror este o față de titrare multitalentă a cărei componente cromatice răspund puternic la stratificare.
Consultați: Fonturi cromatice de tip Layer
Proxima Nova
Mark Simonson Studio
Combinând trăsături geometrice cu proporții umaniste, Proxima Nova lucrează în mai multe contexte diferite datorită varietății de greutăți și lățimi.
Știri Gothic Std
Chirpici
Un clasic pentru titlurile ziarelor, publicitate și ambalare, versiunea originală News Gothic a fost proiectată în 1908 - și se imbracă perfect pe web astăzi.
Consultați: Umbrirea cu CSS
Cele mai bune sunt pe TYPEKIT
Nu vă faceți griji cu privire la calitatea tipurilor de fonturi, a surselor, a licențelor. Fontul pe care îl doriți, oriunde, oricând.
Răsfoiți toate fonturile
Futura PT
ParaType
Futura, sentimentul geometric quintessential, a inspirat generații de designeri cu trăsăturile sale îndrăznețe și acum a fost pregătit pentru web de ParaType.
Brandon Grotesque
Fonturi HVD
Brandon Grotesque este elegant și cald, cu coborâri lungi și terminații rotunjite ale cursei - o performanță excelentă la dimensiunile ecranului sau pentru o copie ochi.
Kulturista Web
Valiza tip valiză
Kulturista Web este o serifă pentru plăci rezistente pentru titluri, subcapitole și navigație, disponibilă în cinci greutăți cu caractere italice.
Minion Pro
Chirpici
Minion este un tip de Adobe Originals inspirat de designul clasic al Renașterii târzii, o perioadă de tip elegant, frumos și foarte lizibil.
Vezi: Listă: Bine pentru forma lungă
FF Meta Serif Web Pro
FontFont
FF Meta Serif este slabă și lizibilă, cu echilibru excelent și idiosincrazii fermecătoare. Se potrivește frumos singur sau cu o varietate de alte tipuri de fonturi.
Consultați: Corespondența între fonturi
Klavika
Tipul proceselor de turnătorie
Disponibil direct de la Process Type Foundry, Klavika demonstrează flexibilitate infinită și un amestec de influențe umaniste și geometrice.
Consultați: Aduceți-vă propria licență
În afară de urlurile bibliotecilor de materiale ascunse (generate de linia Ruby on Rails), marcarea este destul de simplă. Iată un exemplu condensat:
Elementul header se afișează numai sub 980 de pixeli. Folosind o lățime a containerului de 940px, blocurile sunt de 300x300 px pătrate. Utilizarea elemente pentru blocuri, offsetul este realizat prin adăugarea unui marginea superioară la
.blocuri> ul.offset-jumătate margin-top: 150px; .blocks> ul.offset-plin margin-top: 300px; .blocks> ul.offset-trei-jumătăți margin-top: 450px;
Există, de asemenea, câteva clase de offset care trage coloanele de pe marginea grila.
.blocuri> ul.overflow-left position: absolute; stânga: -280px;
Excepția la aceasta este Întrebări frecvente, care are patru coloane în loc de trei.
Pe multe dintre panourile în sine, vedem utilizarea unei "cortine". Atunci când plasați cursorul pe element, o perdea se mișcă sau apare, dezvăluind conținut relevant pentru panoul însuși. Acest lucru are ca rezultat o interfață care invită la explorare și investigație. Aceste interacțiuni se bazează pe tranzițiile CSS declanșate de elemente de poziționare și absolut poziționate în interiorul elementelor relativ poziționate.
Să ne uităm la modul în care am putea realiza acest lucru.
Avem două tipuri de draperii de bază: perdelele de suprapunere și perdelele de tip slide-revelate.
Vom vedea următorul marcaj pentru un singur panou de fiecare tip.
Vezi: Listă: Bine pentru forma lungă
Designerii de la Paravel se concentrează pe aducerea designului de calitate pe site-urile clienților lor, cu cod solid, o atenție deosebită pentru detaliile vizuale și un tip excelent.
Atunci vom stabili diferitele noastre tranziții pe hover.
/ * Slide Cortina * / #who li.paravel background-image: url (/assets/newhome/who/paravel-ce782f6791c64eee5bf74b72986bceb9.jpg); #who li div înălțime: 220px; text-align: left; background-color: RGBA (0,0,0,0.8); Filtru: progid: DXImageTransform.Microsoft.Alpha (Opacity = 0); opacitate: 0; -webkit-tranziție: opacitate .15s linear; -moz-tranziție: opacitatea .15s liniară; -o-tranziție: opacitate .15s liniară; tranziție: opacitatea .15s liniară; padding: 40px; #who li: hover div filtru: progid: DXImageTransform.Microsoft.Alpha (Opacitate = 100); opacitate: 1; / * Fade Cortina * / #best li poziție: relativă; background-color: # 323232; overflow: ascuns; text-align: left; #best li img stânga: 0; Poziția: absolută; z-index: 1; -webkit-transition: stânga .1s cubic-bezier (0,0,0,4,1); -moz-tranziție: stânga .1s cubic-bezier (0,0,0,4,1); -o-tranziție: stânga .1s cubic-bezier (0,0,0,4,1); tranziție: stânga .1s cubic-bezier (0,0,0,4,1); #best li: hover img left: -280px;
Planele de pe elementele panoului li declanșează tranzițiile asupra elementelor de copii ale lui li în sine.
La dimensiunea mobilă, aspectul se modifică semnificativ. Vedem o ușoară schimbare în navigație, aducând insigna Adobe în sus și scăpând elementele primare până la a doua bară pentru a le permite să se deplaseze sub sigla Tipului. Pierdem cercurile din antet și, în schimb, rămânem cu cele trei puncte de marketing ca un subcapitol. Apoi vom vedea conținutul nostru rupt în șase secțiuni separate, inclusiv subsolul. Aceste secțiuni au fiecare câte un antet verde atașat acestora, urmate de ceea ce anterior au fost panourile noastre. Panourile au fost acum deplasate într-o listă de derulare laterală. Aceasta înseamnă, desigur, că efectul eșalonat nu apare pe telefonul mobil.
Apoi, vom analiza cum este scris CSS pentru panourile de derulare laterală, spre deosebire de panourile eșalonate.
Amintiți-vă, afișăm antetul pe telefonul mobil, iar panourile însele ar trebui să parcurgeți orizontal. Realizăm acest lucru doar cu câteva linii de CSS:
@media (max-width: 979px) secțiunea # best .blocks width: 2700px; header header display: block; secțiunea .container .blocks> ul float: left; margin-top: 0! important; lățime: auto; secțiunea .container .blocks> ul> li float: left;
Acest model aliniază în mod esențial toate panourile blocului pe orizontală, cu o lățime totală de 2700px pentru această secțiune.
De asemenea, setăm elementul care conține (#conţinut) pentru a depăși ascunse.
#content overflow: hidden;
Acest lucru permite .blocuri elementul să fie mai lat decât ecranul, fără ca corpul documentului să se extindă peste lățimea naturală a ecranului de 100%, făcând derularea orizontală să se întâmple discret din restul paginii.
Pe lățimea mobilă și pe cea a comprimatului, vedem și un subsol mai tradițional, înlocuindu-l pe subsolul drive-ului.
Este interesant să rețineți că nu există aproape nici un JavaScript care rulează pe pagină. Cea mai mare parte a executării JavaScript este legată de fonturile Typekit utilizate pe pagină.
Spre deosebire de numărul mare de pagini de marketing care au apărut în ultimii ani, Typekit a ales să nu folosească derularea pentru declanșarea animației sau declanșarea de tip parallax. Deși nu putem spune în mod special de ce a fost luată această decizie, aceasta ar putea semnala o revenire la o interacțiune mai puțin ocupată bazată pe îndreptarea directă a mouse-ului și o trecere într-o nouă tendință.
Alegerea fontului principal. Fonturile principale par a fi o alegere ciudată, având în vedere alegerea tipurilor de fonturi în restul paginii. Placile și plăcile fluorescente sunt îmbibate cu o cantitate considerabilă de caracteristici de afișare pe care le-am putea aștepta să le găsim într-un site promoțional interactiv sau într-un film promoțional.
Dotarea acestora în partea de sus a Typekit este acceptabilă numai datorită naturii produsului oferit de tip Tipkit. Totuși, acest lucru pare a fi cel mai discutabil element de design.
Probleme cu retina. În timp ce o mare parte din imagini apar ascuțite, PNG-urile cercului din antet sunt foarte clar pixelizate pe ecranele retinei. Acest lucru face ca produsul să se simtă mai puțin rafinat decât ar fi de așteptat de la un produs Adobe și este un memento pentru adoptarea târziu a jocului Adobe de grafică a retinei pentru Photoshop și pentru celelalte aplicații desktop. Pictogramele din secțiunea Întrebări frecvente reprezintă o altă ocazie ratată pentru utilizarea vectorului, deși acest lucru este mult mai puțin vizibil.
În ansamblu, noua pagină de destinație Tipkit este o execuție lustruită și unică a unei reîmprospătare în prezența web care însoțește o schimbare în ofertele de produse. Cu un flux de conținut convingător și o direcție artistică bine executată, simplitatea interacțiunilor pentru acest site sporește eficacitatea pitch-ului vânzărilor.
Ce ați considerat a fi deosebit de convingătoare în această pagină? În ce părți ai proiectului doriți să aflați mai multe? Hai să discutăm în comentarii!
Accentsconagua