Share
Typekit heeft onlangs hun homepage opnieuw ontworpen met een aantal nieuwe services in gedachten. Toen Typekit bij Adobe kwam, wilden ze ons een nieuwe manier bieden om lettertypen op het web te verwerken. Ze hebben niet alleen een vrij eenvoudige manier gecreëerd om lettertypen in het web te integreren, maar ze hebben nu officieel een synchronisatie-optie op het bureaublad gelanceerd, waarmee Creative Cloud-abonnees lettertypen rechtstreeks vanuit Typekit met hun computer kunnen synchroniseren. Dit is al een tijdje in bètavorm en biedt een veel eenvoudigere route naar lokale lettertypen dan ze elders te vinden!
Disclaimer: dit artikel werd op geen enkele manier onderschreven door Adobe of de leden van het Typekit-team (we hopen nog steeds dat ze het wel leuk vinden).
Dit artikel gaat uitsluitend over de nieuwe Typekit-startpagina en geeft u enkele details over de implementatie die is gebruikt om de marketingelementen te maken.
Zoals geldt voor de cursus in onze How They Did It-serie, zullen we ook wat commentaar geven over de artistieke en technologische beslissingen, en het gesprek openen voor een constructief kritisch gesprek.
We zullen ook proberen elke alliteratie te vermijden.
Typekit bestaat al een tijdje en was redelijk op tijd voor een update. Hier is hoe het er eerder uitzag:
Hoewel dit een prima startpagina is, was deze enigszins verouderd. Met het nieuwe ontwerp gebruikt Typekit een grafisch gecentreerde context om lettertypen weer te geven naast de mensen en bedrijven die de service gebruiken. Met behulp van mediaquery's behoudt de bestemmingspagina grotendeels de meeste primaire ontwerp- en inhoudselementen tot en met mobiel. Hier is hoe het er nu uitziet.
Een paar belangrijke ontwerpbeslissingen karakteriseren de desktopversie van dit ontwerp. Het resulterende effect biedt bezoekers het gevoel dat het ontwerp, letterlijk, uit de doos is. We zien dit op de hele site.
Ten eerste zien we de schermafbeeldingen van de app in de kop van de pagina onder de kop "Elk lettertype dat u nodig hebt. Overal waar u het nodig hebt." (Overigens zullen we later over die kop praten.) De cirkelpngs geven ons drie marketingpunten die rechtstreeks verband houden met de service: "Duizenden lettertypen", "Bezorgd door Creative Cloud", "Kies uw medium". Deze drie ideeën zijn onmiddellijk toegankelijk voor de meeste ontwerpers, aangezien de meeste ontwerpers inmiddels bekend zijn met de Creative Cloud en zeker alle ontwerpers zijn bekend met lettertypen en apparaten.
De keuze van cirkels bepaalt onmiddellijk het vermijden van een boxy-interface. De cirkels worden van links naar rechts groter en geven een gevoel van beweging en vooruitgang. Geen van de cirkels is uitvoerbaar. Er moet ook worden opgemerkt dat dit ook de enige aanwezigheid is van cirkels als grafische vorm op de pagina.
Er zijn dit jaar veel trends te volgen en het gebruik van panels is daar een van. We zagen de opkomst van deze interface toen plug-ins als jQuery Masonry de scène raakten, en toen Pinterest deze populair maakte als een primair interactief element. Typekit gebruikt panelen in zes verschillende "clusters" op de pagina, waarbij elk cluster zijn eigen inhoud heeft.
Het eerste cluster pronkt met de lettertypen zelf en het tweede cluster toont klanten die Typekit gebruiken:
Het derde cluster laat zien met wat voor soort werk je Typekit kunt gebruiken nu je kunt synchroniseren met je lokale bureaublad.
Het vierde cluster geeft uitleg over de prijs van Typekit.
De vijfde cluster bevat eigenlijk een FAQ-selectie van panelen die geen achtergrondkleur gebruiken en in plaats daarvan alleen typografie en iconografie gebruiken.
Ten slotte fungeert het zesde cluster als de 'voettekst' van de website, met copyrightinformatie en links naar algemene bestemmingen gerelateerd aan Typekit.
Deze clusters vormen de primaire interesseobjecten voor de lay-out en hebben een unieke versprongen uitlijning die duidelijkheid en scheiding tussen beide biedt, terwijl ze ook de afschaffing bevorderen van een meer algemene lay-out die bestaat uit elementen die natuurlijk verticaal zijn uitgelijnd. Alle panelen met een achtergrond worden met de helft van de hoogte van een paneel versprongen met een voorspelbare symmetrie. (De enige uitzondering op dit verbluffende is het prijscluster, dat een + -vorm vormt.) Deze voorspelbaarheid functioneert om deze blokken een vorm te laten vormen; bijvoorbeeld, de eerste set blokken vormt een diamant, terwijl de derde set een diagonale lijn vormt van linksboven naar rechtsonder.
Laten we eens kijken hoe dit specifieke effect wordt bereikt.
Dit is de opmaak voor het eerste cluster:
DE BESTE ZIJN OP TYPEKIT
Verbluffende lettertypen van kwaliteitsgieterijen. Inspirerend om te bladeren en gemakkelijk te gebruiken.
Blader door alle lettertypen
AW Veroveraar Gesneden
Typofonderie
Verkrijgbaar in meerdere stijlen, inclusief inline en "Carved", is AW Conqueror een veelzijdige titel voor titels waarvan de chromatische componenten krachtig reageren op gelaagdheid.
Zie: Chromatische weblettertypen in lagen aanbrengen
Proxima Nova
Mark Simonson Studio
Door geometrische eigenschappen te combineren met humanistische proporties, werkt Proxima Nova in veel verschillende contexten dankzij zijn verschillende gewichten en breedtes.
Nieuws Gothic Std
Adobe
De originele nieuwgotiek is een klassieker voor krantenkoppen, advertenties en verpakkingen en werd ontworpen in 1908 - en wordt vandaag netjes op het web gekleefd.
Zie: arcering met CSS
DE BESTE ZIJN OP TYPEKIT
Nooit zorgen te maken over de kwaliteit van lettertypen, de bronnen, licenties. Het lettertype dat u wilt, altijd en overal.
Blader door alle lettertypen
Futura PT
ParaType
Futura, de typische geometrische sans, heeft generaties ontwerpers geïnspireerd met zijn gewaagde functies en is nu vakkundig voorbereid op het web door ParaType.
Brandon Grotesque
HVD-lettertypen
Brandon Grotesque is elegant en warm, met lange afstrijkers en afgeronde aanslaguiteinden - een prima uitvoerder bij weergaveformaten, of voor een opvallende kopie.
Kulturista Web
Koffer Type Gieterij
Kulturista Web is een stevige schijfserif die geschikt is voor koppen, subkoppen en navigatie, beschikbaar in vijf gewichten met cursief.
Minion Pro
Adobe
Minion is een Adobe Originals-lettertype geïnspireerd op klassieke ontwerpen uit de late renaissance, een periode van elegant, mooi en zeer leesbaar type.
Zie: Lijst: goed voor longform
FF Meta Serif Web Pro
FontFont
FF Meta Serif is slank en leesbaar, met uitstekende balans en charmante eigenaardigheden. Het zet mooi alleen, of met een verscheidenheid van andere lettertypen.
Zie: Letters vergelijken met lettertypen
Klavika
Proces type gieterij
Direct beschikbaar van Process Type Foundry, Klavika toont oneindige flexibiliteit en een mix van humanistische en geometrische invloeden.
Zie: Neem uw eigen licentie mee
Afgezien van de URL's van de verborgen bibliotheek (gegenereerd door de pijplijn van de Ruby on Rails-activa), is de opmaak redelijk eenvoudig. Hier is een gecomprimeerd voorbeeld:
Het header-element verschijnt alleen onder de 980px. Met een containerdikte van 940 px zijn de blokken vierkantjes van 300x300 px. Gebruik makend van elementen voor de blokken, de offset wordt bereikt door een marge-top toe te voegen aan de
.blokken> ul.offset-half margin-top: 150px; .blocks> ul.offset-full margin-top: 300px; .blocks> ul.offset-three-helften margin-top: 450px;
Er zijn ook een paar offsetklassen die de kolommen van de rand van het raster halen.
.blokken> ul.overflow-left position: absolute; links: -280 px;
De uitzondering hierop is de FAQ, die vier kolommen heeft in plaats van drie.
Op veel van de daadwerkelijke panelen zelf, zien we het gebruik van een "gordijn". Bij het zweven op het item, beweegt of verschuift een gordijn, waarbij inhoud zichtbaar wordt die relevant is voor het paneel zelf. Dit resulteert in een interface die verkenning en onderzoek uitnodigt. Deze interacties zijn afhankelijk van CSS-overgangen die worden geactiveerd door zwevende en absoluut gepositioneerde elementen in relatief gepositioneerde elementen.
Laten we kijken hoe we dit kunnen bereiken.
We hebben twee basissoorten gordijnen: het overlay-gordijn en het slide-reveal-gordijn.
We zien de volgende markup voor een enkel paneel van elke soort.
Zie: Lijst: goed voor longform
De ontwerpers van Paravel richten zich op het brengen van kwaliteitsgevoelig ontwerp op de websites van hun klanten met solide code, diepgaande aandacht voor visuele details en uitstekend type.
Vervolgens zetten we onze verschillende overgangen in op zweeftekst.
/ * Slide Curtain * / #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); Filter: progid: DXImageTransform.Microsoft.Alpha (Opacity = 0); ondoorzichtigheid: 0; -webkit-overgang: opacity .15s lineair; -moz-overgang: opacity .15s lineair; -o-overgang: opaciteit .15s lineair; overgang: ondoorzichtigheid .15s lineair; padding: 40px; #who li: hover div filter: progid: DXImageTransform.Microsoft.Alpha (Dekking = 100); opaciteit: 1; / * Fade Curtain * / #best li position: relative; background-color: # 323232; overloop verborgen; text-align: left; #best li img links: 0; positie: absoluut; z-index: 1; -webkit-overgang: links .1s kubieke bezier (0,0,0.4,1); -moz-overgang: links .1 kubieke bezier (0,0,0.4,1); -o-overgang: linker .1s kubieke bezier (0,0,0.4,1); overgang: links .1s kubieke bezier (0,0,0.4,1); #best li: hover img left: -280px;
De zweeftekens op de elementen van het li-paneel activeren de overgangen op onderliggende elementen van de li zelf.
Op mobiele grootte verandert de lay-out aanzienlijk. We zien een kleine wijziging in de nav, waardoor de Adobe-badge omhoog komt en de primaire elementen naar de tweede balk vallen om ze onder het Typekit-logo te laten bewegen. We verliezen de kringen in de koptekst en blijven in plaats daarvan met de drie marketingpunten als subkop. Vervolgens zien we onze inhoud opgedeeld in zes afzonderlijke secties, inclusief de voettekst. Deze secties hebben elk een groene koptekst eraan, gevolgd door wat eerder onze panelen waren. De panelen zijn nu verschoven naar een zijwaarts scrollende lijst. Dit betekent natuurlijk dat het gespreide effect niet op mobiel wordt weergegeven.
Vervolgens bekijken we hoe de CSS is geschreven voor de zijwaarts verschuivende panelen, in tegenstelling tot de versprongen panelen.
Vergeet niet dat we de koptekst op mobiel weergeven en dat de panelen zelf horizontaal moeten scrollen. We bereiken dit met slechts enkele regels CSS:
@media (max-width: 979px) sectie # beste .blocks width: 2700px; sectiekop display: block; sectie .container .blocks> ul float: left; margin-top: 0! belangrijk; breedte: auto; sectie .container .blocks> ul> li float: left;
Dit patroon lijnt in wezen alle blokpanelen horizontaal uit, met een totale breedte van 2700px voor deze sectie.
We plaatsen ook het bevattende element (#inhoud) om verborgen te overlopen.
#content overflow: verborgen;
Dit zorgt voor de .blokken element dat breder is dan het scherm zonder dat de body van het document voorbij de natuurlijke 100% schermbreedte komt, waardoor het horizontale scrollen discreet gebeurt vanaf de rest van de pagina.
Op mobiel en op tablet-breedtes zien we ook een meer traditionele voettekst die de plaats inneemt van de paneel-station voettekst.
Het is interessant om op te merken dat er nauwelijks JavaScript op de pagina draait. Het grootste deel van het actieve JavaScript is gerelateerd aan de Typekit-lettertypen die op de pagina worden gebruikt.
Brekend van een groot aantal marketingpagina's die de afgelopen jaren zijn opgedoken, heeft Typekit ervoor gekozen om scrollen niet te gebruiken voor animatietriggers of parallax-achtige triggering. Hoewel we niet specifiek kunnen zeggen waarom deze beslissing is genomen, kan dit duiden op een terugkeer naar minder drukke interactie op basis van directe muisaanwijzer en een verschuiving naar een nieuwe trend.
De lettertype-keuzelijst. De koplettertypen lijken een vreemde keuze, gezien de keuze van lettertypen op de rest van de pagina. De lettertypen en cursieve lettertypen zijn doordrenkt met een aanzienlijk aantal weergavekenmerken die men zou verwachten te vinden in een interactieve promotie-site of een filmpromotiesite.
Het hebben van deze aan de bovenkant van Typekit is alleen acceptabel vanwege de aard van het product dat Typekit biedt. Toch lijkt dit het meest twijfelachtige ontwerpelement te zijn.
Retinakwesties. Hoewel veel van de afbeeldingen scherp lijken, zijn de cirkel-PNG's in de kop heel duidelijk gepixeld op netvliesschermen. Hierdoor voelt het product minder verfijnd aan dan verwacht zou worden van een Adobe-product, en herinnert het Adobe aan de recente adoptie van retina-graphics voor Photoshop en hun andere desktopapplicaties. De pictogrammen in de sectie Veelgestelde vragen vormen nog een gemiste kans voor het gebruik van vector, hoewel dit veel minder opvalt.
Al met al is de nieuwe Landekit-bestemmingspagina een gepolijste en unieke uitvoering van een vernieuwing van de aanwezigheid op het web die gepaard gaat met een verschuiving in productaanbiedingen. Met een boeiende inhoudsstroom en goed uitgevoerde artistieke richting, verbetert de eenvoud van de interacties voor deze site de effectiviteit van het verkooppraatje.
Wat vond u bijzonder aantrekkelijk op deze pagina? Over welke delen van het project zou je meer willen weten? Laten we het bespreken in de opmerkingen!
Accentsconagua