Share
Klaar voor de dosis webontwerp van deze maand typografische ontzagwekkendheid? Ik wed dat je bent! Connor neemt deze maand het voortouw met Brandon die back-upcuratie uitvoert - en we hebben een lijst met 17 sites die een aantal van de beste typografie weergeven voor jullie gasten om uit te checken. Deze maand hebben we zelfs een speciale sectie gewijd aan een aantal nieuwe (ish) webgebaseerde typografie- en lay-outtools om je leven een beetje gemakkelijker te maken. Laten we ingaan!
Over de technische regels van een goede typografie praten is geweldig? maar waar het rubber echt de weg raakt, is wanneer we kunnen beginnen met het bekijken van voorbeelden van typografie in actie en analyseren waarom het werkt. Een van de mooie dingen over typografie is dat, net zoals de talen die we gebruiken om met elkaar te communiceren, de manier waarop je het type in een ontwerp gebruikt, het een stem geeft. Je kunt schreeuwen en gillen of je kunt zachtjes fluisteren? het is allemaal aan jou en hoe je wilt dat je bericht wordt gehoord.
Elke maand kijken we tussen 10 en 20 voorbeelden van uitstekende typografie in webdesign? maar wat nog belangrijker is, we zullen ook analyseren waarom de typografie werkt. Laten we een duik nemen in het aanbod van deze maand:
SquareSpace heeft eigenlijk een geschiedenis van goed ontworpen typografie op hun sites, maar ze hebben alles uit de kast gehaald voor het SXSW-evenement van dit jaar. De inhoud van de site gaat over mensen die gekke foto's van het evenement posten, maar kijk nog eens goed hoe goed het is ingedeeld. Prachtig geplaatste krantenkoppen? veel variatie in de lay-out? en subtiele achtergrondafbeeldingen / texturen die verwijzen naar de typografie van weleer. De hippe, ultramoderne schedelillustratie doet ook geen pijn.
De site is niet groot, sommige SS's hebben er goed aan gedaan om alles fris en interessant te houden terwijl je de pagina afrolt. Als je oplet, is er echt geen vaste standaard voor de typografie (buiten dezelfde lettertypefamilies) - zijn de formaten overal en zo ook de plaatsing? Maar dat is in dit geval perfect aanvaardbaar, omdat elk afzonderlijk deel (dat wat op hetzelfde scherm op een scherm zichtbaar is) in harmonie met zichzelf werkt. De kleuren komen allemaal uit hetzelfde algemene palet en alles voelt aan als een scharnier op een raster, zelfs als je het niet helemaal kunt vastspijkeren.
Grip Limited is een van die sites die je af en toe tegenkomt die zo ongelooflijk out-of-the-box is dat je gewoon een beetje moet zitten om het een minuut of twee in te houden. Ik krijg het vreemde gevoel dat alleen al het kijken me een betere typograaf maakt. Het type variëteit is zo divers dat zonder het uniforme monochrome palet de site waarschijnlijk moeilijk te bekijken is. De meeste usability-experts zouden misschien kunnen zeggen dat dit zelfs in de huidige staat volkomen onzin is, maar ik beweer dat dit soort van leuke, "shotgun" -benadering van het type precies is wat webontwerpers nodig hebben om zich van tijd tot tijd te verwennen.
Gaat u deze lay-out steeds opnieuw gebruiken voor zakelijke of bedrijfsprojecten? Natuurlijk niet, maar gewoon een klein hapje nemen van deze site zou wonderen doen om een anders gewoon project op te peppen waar je misschien aan werkt. Bijvoorbeeld?
Burton is een soort / soort in het tegenovergestelde spectrum als de Grip Limited-site. Het is zeer georganiseerd, in een stijve bloklay-out en super eenvoudig in gebruik. Kijk echter goed en je kunt waarschijnlijk zien wat ik deze twee sites heb geplaatst in deze lijst. Hoewel de lay-out zelf redelijk goed is opgesloten in termen van structuur, is de werkelijke typografie op de site verre van wat u normaal op internet ziet - en veel meer van wat u in een snowboardmagazine of catalogus zou kunnen zien. Type wordt ingesteld in cirkels en andere ongebruikelijke webvormen om elke pagina de juiste hoeveelheid visuele interesse te geven. Ze zijn ook verspreid in infografieken en andere vereenvoudigde illustraties in enkele van de gewone rasterblokken om de monotonie en het ritme van elke pagina te doorbreken.
Deze versie van de Burton-site bestaat al een tijdje? en toch voelt het altijd nieuw en fris elke keer als ik het bekijk. Door eenvoudig foto's en de belangrijkste kleuren uit te wisselen, kunnen ze voor elk nieuw seizoen veel meer kilometers uit de site halen.
Impact Media gebruikt verschillende lettertypen, kleuren en grootten in de hoofdschuifregelaar en op hun website. Net als het lettertype - Impact - is de typografische keuze op deze specifieke site gewaagd, met grote lettertypen die veel contrasteren met hun achtergrond.
Ik ben dol op de huidige stijl van vetgedrukte scriptlettertypen op het internet en Impact Media gebruikt het in hun tweede regel om een mooi, verwelkomend effect te genereren.
Gaz Battersby is grafisch ontwerper gevestigd in Leeds, Verenigd Koninkrijk en de minimalistische site fungeert als zijn portfolio. De site gebruikt een serif-lettertype in zijn ontwerp, maar contrasteert elementen alleen door de tekenstijl (cursief) te wijzigen in plaats van een geheel nieuw lettertype. Dit resulteert in een eenvoudiger, schoner typografisch schema.
De site van Battersby maakt ook gebruik van kleur om een heirachy op te bouwen waarbij zijn koppen worden ingepakt in turquoise cirkels om de aandacht van de gebruiker te trekken.
Ik zal niet te veel over SURROUND zeggen, want er is niet veel te zeggen. Het is een herinnering dat soms een eenvoudige benadering van lay-out en typografie prima werkt. Geen overbodige franje, niets tussen de bezoeker en de inhoud. Gewoon simpele functioneringstechnieken die een boodschap overbrengen.
Invisible Creature is eigenlijk een van mijn favoriete studio's in de wereld? helemaal teruggaan naar toen ze samenwerkten als Asterik Studio. Lang verhaal kort: ze maken kickass-posters, albumillustraties en andere leuke dingen. Wat ik leuk vind aan deze site is de controle en discipline. Als toonaangevende "rock / metal" -studio konden ze net zo goed een site ontwerpen die zich toelegt op die kant van hun werk: wild, abrasief, chaotisch. In plaats daarvan hebben ze ervoor gekozen om strakke lijnen, eenvoudige kleuren en schreefloze lettertypen te gebruiken - waardoor hun werk uiteindelijk voor zichzelf spreekt.
Feed Me is een webpaginaontwerp van één pagina dat typografie gebruikt om op de pagina een helder kleurenschema te maken. Het contrast tussen het standaardlettertype en een stoutmoediger, penseelachtig exemplaar creëert een eenvoudige heirachy die de nadruk legt op belangrijke termen.
Feed Me heeft zijn eigen voordelen als een volledig webontwerp en de typografie is een belangrijk ingrediënt voor zijn succes. De gebogen groene lettertypen coördineren het natuurthema van het webontwerp waar ik van houd.
Het is moeilijk om de precieze reden aan te wijzen voor het effect dat door de site van deze grafisch ontwerper wordt gegenereerd, maar ik weet wel dat het een fantastisch exemplaar is!
Breng My Boss naar Noord-Kaap is een interessante website. Een Belgisch webontwerpbedrijf - namelijk Inventis - probeert een slopende 545km-cyclus te gebruiken om wat Facebook-likes te krijgen. De website zelf gebruikt een interessant bereik van typografie en gebruikt kleur om de belangrijkste delen van elke uitspraak te benadrukken (bijvoorbeeld "5000 likes" en "bike 545km").
De kleur van de tekst op deze pagina is in overeenstemming met de achtergrond waarop hij zich bevindt, zoals te zien is in de bruine tekst op de titelbordjes. Inventis gebruikt ook innerlijke schaduw om de tekst te onderscheiden van de achtergrond in gevallen waarin dit nodig is, maar niet waar het niet is (zoals de mijlpalen op het fietspad).
Net als de site van Gaz Battersby gebruikt Wes Bos weinig verschillende lettertypen in zijn ontwerp en kiest in plaats daarvan voor een lintachtergrond op zijn editors om zijn hiërarchie te creëren. Heel eenvoudig, ik hou van het contrast van het scriptlettertype tot het serif één en de nadruk op zijn functietitels.
Hoewel het geen nieuwe site is, is de HTML5-logo-site van W3C nog steeds een goed voorbeeld van goede typografie in het spel om een aantal redenen, waaronder het gebruik van een prachtig, vet gedrukt, versmald lettertype in titels dat overeenkomt met dat van de naamgenoot van de pagina..
De pargraphs op de pagina zijn ook op passende afstand geplaatst om de eindgebruiker gemakkelijker te kunnen lezen.
Zoals u waarschijnlijk kunt raden aan de hand van de schermafbeelding, is dit geen nieuwe site. Het bleef echter op zo'n grote frequentie verschijnen in andere typografie-razzia's dat ik het als een flagrante omissie zou beschouwen als ik zou proberen het niet op te nemen. Chrip was de officiële ontwikkelaarsconferentie van Twitter die vorig jaar rond deze tijd plaatsvond.
Ik heb ooit een vuistregel geleerd over typografie: gebruik niet meer dan drie lettertypen. Terwijl Chrip de indruk wekt van heel wat activiteit (iets dat je echt wilt creëren voor een conferentie), kan ik alleen drie verschillende lettertypen tellen als je het logo negeert.
Ik ben vooral dol op de titel in de portfolio van Jeremy Church. De nadruk op "de" ziet er geweldig uit, maar vestigt meer de aandacht op een hoofddoel: "ruis verminderen". Afgezien van zijn gedurfde, schaduwrijke titels, maakt de rest van het ontwerp gebruik van een zeer simplistisch, schreefloos lettertype dat meer aandacht trekt voor zijn belangrijkste contrast.
Black Ant Media maakt gebruik van een reeks zeer vloeiende gezichten die er geweldig uitzien, maar het is moeilijk te zeggen waarom. Black Ant Media kiest ervoor om hetzelfde lettertype te gebruiken in plaats van veel en alleen de grootte, kleur en het gewicht te variëren om onderscheid te maken tussen de protuberansen van verschillende elementen.
Zoals sommige van de andere voorbeelden hier, gebruiken Black Ant Media ook gekleurde achtergronden in plaats van schaal om titels in de visuele hiërarchie te stoten.
Premium Pixels is een WordPress-thema dat de lijst maakt dankzij de relevantie ervan voor sommige van de huidige typografische normen die worden besproken in het recente artikel van Brandon over typografie. De lawaaierige achtergrond staat in contrast met de tekst op de pagina dankzij een witte tekstschaduw die een gevoel van diepte biedt. Elk bericht op de pagina heeft ook een titel met een compact, vet lettertype.
Elk van de berichten in dit WordPress-thema heeft grote regelafstanden, dus het is een stuk makkelijker om te lezen en de ethiek van grote opvulling is duidelijk in elk element op de pagina.
Subtiel, er is ook een serif gezicht gegooid tussen de meta data van elke post.
Als een kanttekening, Orman Clark's nieuwste website herontwerp is ook vermeldenswaard op deze lijst, omdat het een aantal goede typografische lay-out principes illustreert. Schoon, eenvoudig en goed georganiseerd. hier zijn een paar screenshots:
Webontwerpers praten veel over het opnieuw creëren van "printesthetics" op het web? maar meestal beschouwen ontwerpers dat in de betekenis van simpelweg gebruik maken van rijke texturen, gekke ongestructureerde lay-outs en veel hoekschaduwen of trompe l'oeil bijwerkingen. Zelden herinneren ontwerpers zich nog echt dat print typografie vaak net zo gestructureerd is als het type op het web. Pelicanfly combineert het beste van beide werelden (naar mijn mening) door eenvoudige kolomstructuren, typografische symbolen en hedendaagse CSS-effecten te gebruiken om een site te maken die memorabel is. Ik vermoed dat het ook met tablets is ontworpen, omdat er een paar gevallen zijn waarbij je je scherm moet omdraaien om te lezen.
Gratis tool: Dit is een vrij nieuwe tool die ik onlangs tegenkwam. Hiermee kun je in essentie aan de basistypografie van een project sleutelen totdat je alles perfect hebt - dan spuugt het uit de CSS (3) die de styling genereert die je hebt gemaakt. Ik weet zeker dat er een handvol vergelijkbare web-apps zijn, maar deze vond ik een van de waardevollere gewoon vanwege de enorme hoeveelheid knutselen die je kunt doen en het gebruiksgemak.
Accentsconagua