Share
Typekit nylig redesignet sin hjemmeside med noen nye tjenester i tankene. Når Typekit ble med i Adobe, satte de ut for å gi oss en ny måte å håndtere skrifter på nettet. Ikke bare skapte de en ganske enkel måte å legge inn fonter på nettet, men de har nå offisielt lansert et skrivebordssynkroniseringsalternativ, noe som gjør at Creative Cloud-abonnenter kan synkronisere fonter til datamaskinen direkte fra Typekit. Dette har vært i et beta-skjema for en stund nå, og gir en mye enklere rute til lokale skrifter enn å finne dem andre steder!
Ansvarsfraskrivelse: denne artikkelen ble på ingen måte godkjent av Adobe eller medlemmene av Typekit-teamet (vi håper fortsatt at de liker det selv).
Denne artikkelen kommer til å snakke utelukkende om den nye Typekit-hjemmesiden, og gir deg noen detaljer om implementeringen som brukes til å opprette markedsføringselementene.
Som det er par for kurset i How They Did It-serien, vil vi også gi noen kommentarer om de kunstneriske og teknologiske avgjørelsene, og åpne samtalen for konstruktiv kritisk samtale.
Vi vil også prøve å unngå alliansering.
Typekit har eksistert en stund, og var ganske forsinket for en oppdatering. Slik ser det ut som før:
Selv om dette er en helt fin hjemmeside, var det litt datert. Med den nye designen bruker Typekit en grafisk sentrert kontekst for å vise skrifttyper ved siden av personer og selskaper som bruker tjenesten. Ved hjelp av medieforespørsler beholder destinasjonssiden stort sett de fleste av de primære design- og innholdselementene helt ned til mobilen. Slik ser det ut nå.
Noen viktige designbeslutninger karakteriserer desktopversjonen av dette designet. Den resulterende effekten gir besøkende en følelse av at designet er ganske bokstavelig talt ute av esken. Vi ser bevis på dette gjennom hele nettstedet.
Først ser vi skjermbilder av appen i overskriften på siden under overskriften "Hver skrifttype du trenger. Overalt trenger du det." (Forresten, vi snakker om overskriften senere.) Sirkelen pngs gir oss tre markedsføringspoeng som er direkte relatert til tjenesten: "Tusenvis av skrifter", "Leveres av Creative Cloud", "Choose your medium". Disse tre ideene er umiddelbart tilgjengelige for de fleste designere, da de fleste designere er kjent med Creative Cloud nå, og absolutt er alle designere kjent med skrifter og enheter.
Valget av sirkler etablerer umiddelbart unngår et boxy-grensesnitt. Sirklene øker i størrelse fra venstre mot høyre, noe som gir en følelse av bevegelse og fremgang. Ingen av kretsene er tiltakbare. Det skal også bemerkes at dette også er den eneste tilstedeværelsen av sirkler som en grafisk form på siden.
Det er mange trender å overvåke i år, og bruk av paneler er en av dem. Vi så oppgangen til dette grensesnittet når plugins som jQuery Masonry traff scenen, og da Pinterest populariserte dem som et primært interaktivt element. Typekit bruker paneler i seks forskjellige "klynger" på siden, hver klynge har sitt eget innholdsformål.
Den første klyngen viser selve skrifttypene, og den andre klyngen viser kunder som bruker Typekit:
Den tredje klyngen viser hvilke typer arbeid du kan bruke Typekit med nå som du kan synkronisere med ditt lokale skrivebord.
Den fjerde klyngen forklarer prisen på Typekit.
Den femte klyngen inneholder faktisk et FAQ-utvalg av paneler som ikke bruker bakgrunnsfarge, og i stedet bruker bare typografi og ikonografi.
Endelig fungerer den sjette klyngen som "footer" på nettstedet, med opphavsrettsinformasjon og lenker til felles destinasjoner relatert til Typekit.
Disse klyngene utgjør de primære layoutinteressene, og har en unik forskyvningsjustering som gir klarhet og separasjon mellom dem, samtidig som de fremmer breakaway fra en mer vanlig layout bestående av elementer som naturlig er vertikalt justert. Alle panelene som har en bakgrunn, forskyves med halvparten av panelets høyde, ved hjelp av en forutsigbar symmetri. (Det eneste unntaket til dette svimlende er prisklassen, som danner en + form.) Denne forutsigbarheten fungerer slik at disse blokkene kan danne en form; for eksempel danner det første settet av blokker en diamant, mens det tredje settet danner en diagonal linje fra øverst til venstre til nederst til høyre.
La oss se på hvordan denne effekten oppnås.
Her er oppslaget for den første klyngen:
DET BESTE ER PÅ TYPEKIT
Stunning skrifttyper fra kvalitets støperier. Inspirerende å bla, og enkel å bruke.
Bla gjennom alle skrifter
AW erobrer skåret
Typofonderie
Tilgjengelig i flere stiler, inkludert inline og "Carved", er AW Conqueror et multitalent titling ansikt hvis kromatiske komponenter reagerer kraftig til lagring.
Se: Lage kromatiske webfonter
Proxima Nova
Mark Simonson Studio
Proxima Nova kombinerer geometriske egenskaper med humanistiske proporsjoner, og arbeider over mange forskjellige sammenhenger takket være sitt mangfold av vekt og bredder.
Nyheter Gothic Std
Adobe
En klassiker for avisoverskrifter, reklame og emballasje, den originale News Gothic ble designet i 1908 og klær seg pent på nettet i dag.
Se: Skyggelegging med CSS
DET BESTE ER PÅ TYPEKIT
Aldri bekymre deg for kvaliteten på skrifttyper, kildene, lisensene. Skriften du vil, hvor som helst, når som helst.
Bla gjennom alle skrifter
Futura PT
para
Futura, den kvintessige geometriske sansen, har inspirert generasjoner av designere med sine dristige funksjoner, og har nå blitt faglig forberedt på nettet ved ParaType.
Brandon Grotesque
HVD Fonter
Brandon Grotesque er elegant og varm, med lange nedstigninger og avrundede strokeender - en flott utøver på skjermstørrelser, eller for iøynefallende kopi.
Kulturista Web
Kuffertype Foundry
Kulturista Web er en solid slab serif egnet for overskrifter, underrubrikker og navigasjon, tilgjengelig i fem vekter med kursiv.
Minion Pro
Adobe
Minion er et typografi fra Adobe Originals inspirert av klassisk design fra senerealasessen, en periode med elegant, vakker og svært lesbar type.
Se: Liste: Bra for longform
FF Meta Serif Web Pro
FontFont
FF Meta Serif er mager og lesbar, med utmerket balanse og sjarmerende idiosyncrasies. Den setter pent alene, eller med en rekke andre skrifttyper.
Se: Sammenkobling av skrifttyper
Klavika
Prosess Type Foundry
Tilgjengelig direkte fra Process Type Foundry, demonstrerer Klavika uendelig fleksibilitet og en blanding av humanistiske og geometriske påvirkninger.
Se: Ta med din egen lisens
Bortsett fra de obscured aktivitetsbibliotekets nettadresser (generert av Ruby on Rails-aktiveringsrørledningen), er oppføringen rett fremover. Her er et kondensert eksempel:
Overskriftselementet vises kun under 980px. Ved hjelp av en beholderbredde på 940px er blokkene 300x300 px firkanter. Ved hjelp av elementer for blokkene, kompensasjonen oppnås ved å legge til en margin-topp til
.blokker> ul.offset-halv margin-top: 150px; .blocks> ul.offset-full margin-top: 300px; .blocks> ul.offset-three-halves margin-top: 450px;
Det er også noen kompenserte klasser som trekker kolonnene ut av kanten av rutenettet.
.blokker> ul.overflow-venstre posisjon: absolutt; igjen: -280px;
Unntaket til dette er FAQ, som har fire kolonner i stedet for tre.
På mange av selve panelene ser vi bruken av et "gardin". Når du svever på varen, beveger et gardin enten eller vises, og avslører innhold som er relevant for selve panelet. Dette resulterer i et grensesnitt som inviterer leting og etterforskning. Disse interaksjonene stole på CSS-overganger utløst av svingende og helt posisjonerte elementer inne i relativt posisjonerte elementer.
La oss se på hvordan vi kan oppnå dette.
Vi har to grunnleggende typer gardiner: overleggsgardinet og lysbildeåpnet gardin.
Vi ser følgende oppslag for et enkelt panel av hver type.
Se: Liste: Bra for longform
Designerne på Paravel fokuserer på å bringe kvalitet responsivt design til kundens nettsteder med solid kode, dyp oppmerksomhet til visuell detalj og utmerket type.
Vi vil da sette opp våre forskjellige overganger på svinger.
/ * Slide Curtain * / #who li.paravel bakgrunnsbilde: url (/assets/newhome/who/paravel-ce782f6791c64eee5bf74b72986bceb9.jpg); #who li div høyde: 220px; tekst-Justering: venstre; bakgrunnsfarge: RGBA (0,0,0,0.8); filter: progid: DXImageTransform.Microsoft.Alpha (Opacity = 0); opacity: 0; -webkit-overgang: opacity .15s lineær; -moz-overgang: opacity .15s lineær; -o-overgang: opacity .15s lineær; overgang: opasitet .15s lineær; padding: 40px; #who li: svever div filter: progid: DXImageTransform.Microsoft.Alpha (Opacity = 100); opacity: 1; / * Fade Curtain * / #best li posisjon: relative; background-color: # 323232; flow: hidden; tekst-Justering: venstre; # best li img left: 0; stilling: absolutt; z-indeks: 1; -webkit-overgang: venstre .1s kubisk-bezier (0,0,0,4,1); -moz-overgang: venstre .1s kubisk-bezier (0,0,0,4,1); -o-overgang: venstre .1s kubisk-bezier (0,0,0,4,1); overgang: venstre .1s kubisk-bezier (0,0,0,4,1); # best li: svever img venstre: -280px;
Hovers på li panelelementene utløser overgangene på barnets elementer av selve li.
Ved mobilstørrelse endres oppsettet betydelig. Vi ser en liten endring i naven, og bringer Adobe-merket opp og slipper de primære elementene ned til den andre linjen slik at de kan bevege seg under Typekit-logoen. Vi mister sirkler i toppteksten, og i stedet blir de tre markedsføringspoengene som en underhode. Vi ser da innholdet vårt i seks separate seksjoner, inkludert bunnteksten. Disse seksjonene har hver en grønn header festet til dem, etterfulgt av det som tidligere var våre paneler. Panelene har nå blitt skiftet til en sideskrolleliste. Dette betyr selvsagt at den forskudde effekten ikke vises på mobilen.
Deretter skal vi se på hvordan CSS er skrevet for sideskjermen, i motsetning til de forskyvte panelene.
Husk at vi viser toppteksten på mobilen, og panelene selv skal rulle horisontalt. Vi oppnår dette med bare noen få linjer med CSS:
@media (maksimal bredde: 979px) delen # best .blocks width: 2700px; seksjonsoverskrift display: block; delen .container .blocks> ul float: left; margin-topp: 0! viktig; bredde: auto; section .container .blocks> ul> li float: left;
Dette mønsteret justerer i hovedsak alle blokkpanelene horisontalt, med en total bredde på 2700px for denne delen.
Vi setter også det inneholdende elementet (#innhold) å overflyte skjult.
#content overflow: hidden;
Dette gjør det mulig for .blokker elementet som er bredere enn skjermen uten at dokumentets kropp skal ekspandere forbi den naturlige 100% skjermbredden, slik at den horisontale rullingen skje diskret fra resten av siden.
På mobil- og bredde på nettbrett ser vi også en mer tradisjonell bunntekst som tar plass til paneldrevet.
Det er interessant å merke seg at det er knapt noen JavaScript som helst som kjører på siden. Størstedelen av JavaScript-kjøringen er relatert til Typekit-skrifttypene som brukes på siden.
Bryter fra et enormt antall markedsføringssider som har oppstått de siste årene, valgte Typekit å ikke bruke rulling for animasjonsutløsere eller parallax-lignende utløser. Selv om vi ikke kan spesifikt si hvorfor denne avgjørelsen ble gjort, kunne det signalere en retur til mindre opptatt samhandling basert på direkte musepeking og et skifte i en ny trend.
Overskrift font valg. Overskriften skrifter synes å være et rart valg, gitt valg av skrifttyper over hele resten av siden. Platen og de kursive skrifttypene er gjennomsyret av en betydelig mengde visningsegenskaper som man kan forvente å finne i en interaktiv opp-ed eller en filmfremmende side.
Å ha dem på toppen av Typekit er bare akseptabelt på grunn av arten av produktet Typekit tilbyr. Likevel, dette synes å være det mest tvilsomme designelementet.
Retina problemer. Mens mye av bildene vises skarpt, er sirkel-PNG-er i toppteksten meget tydelig pixelert på retina-skjermer. Dette gjør at produktet føler seg mindre raffinert enn det som forventes fra et Adobe-produkt, og er en påminnelse om at Adobes sen-til-spillet-adopsjon av retina grafikk for Photoshop og deres andre desktop-applikasjoner også. Ikonene i FAQ-seksjonen er en annen savnet mulighet for å bruke vektor, selv om dette er mye mindre merkbart.
Alt i alt er den nye Typekit destinasjonssiden en polert og unik utførelse av en oppdatering i tilstedeværelse på nettet som følger med et skifte i produkttilbud. Med en overbevisende innholdsstrøm og velekspert kunstnerisk retning, forbedrer enkelheten av samspillet for dette nettstedet effektiviteten av salgsstedet.
Hva syntes du å være spesielt overbevisende med denne siden? Hvilke deler av prosjektet vil du vite mer om? La oss diskutere det i kommentarene!
Accentsconagua