Share
Klaar voor de dosis webontwerp van deze maand typografische ontzagwekkendheid? Ik wed dat je bent! Max neemt de maand vrij, maar hij heeft ons een lijst met 15 sites gegeven die laten zien wat de beste typografie voor jullie is. Laten we ingaan!
Praten over de technische regels van de juiste typografie is geweldig ... maar waar het rubber echt op weg is, 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:
Het is veel te zeldzaam dat ik sites als deze tegenkom ... eerlijk gezegd. Het is een aanpak die u vaak ziet in printontwerp, maar die u zelden op internet brengt. Wat zijn de componenten?
Kijk hoe eenvoudig het ontwerp is ... er is geen enkel element dat een eerstejaars ontwerpstudent niet kan maken ... maar hoe elegant en verfijnd het is voelen op het scherm? Dit is waar we het over hebben wanneer we inspirerende typografie bespreken. Door een eenvoudige, goed gestructureerde lay-out te gebruiken, slaagt de ontwerper erin om een gevoel een vertrouwen en professionaliteit te articuleren voordat de bezoeker zelfs de tekst leest.
Soms heeft een ontwerp iets buitengewoons nodig om de aandacht van de bezoeker te trekken. Dit is wat de Amazee Labs-site zo goed doet. Amazee kiest er niet alleen voor om geen standaard weblettertypen te gebruiken, maar mengt ook het HTML-settype naast het beeldgebaseerde type om een hoge mate van creativiteit en enthousiasme te leveren. In veel opzichten overtreedt Amazee de regels ... maar het is hoe ze het doen waardoor het schijnen:
Dit alles helpt om het gevoel van orde te behouden, zelfs wanneer de lettertypekeuze overal op de kaart staat.
De Finch-site is verrassend minimaal in zijn type gebruik. Laat u niet misleiden door het enorme logo op de voorpagina ... alles in dit ontwerp is ingetogen (op een goede manier).
Het ding over het gebruik van het type op een lege pagina is dat, wanneer goed gedaan, de pagina voelt alsof het veel meer aan de hand is dan alleen tekst.
We noemden Image Mechanics in onze Yearly Web Design Trends-post, maar het is de moeite waard om terug te komen omdat het rockt. Het ontwerp wijkt af van het standaard UI-navigatieparadigma door feitelijke tekstblokken de navigatie te maken (in tegenstelling tot afzonderlijke woorden of knoppen). Dit trekt de bezoeker naar binnen en herinnert hen eraan dat er daadwerkelijke ideeën achter elke link zitten. De daadwerkelijke inhoud van het lichaam is ook opmerkelijk goed ontworpen - het voelt bijna als een tijdschrift, met grote, gedurfde koptekst, goed gepaarde illustraties en subtiele kleurveranderingen (een beetje zoals steunkleuren in een drukzine). Ik ben ook dol op het enorme logo op hun pagina "Meet the Makers"!
Oké, ik moet toegeven dat ik meteen wordt aangetrokken door de enorme, sexy, op kleurenwiel gebaseerde illustratie ... zozeer zelfs dat de typografie zonder de film zelfs verschrikkelijk kan zijn (dat is het niet), en ik zou het waarschijnlijk niet merken. Het punt dat ik hiermee probeer te maken, is dat het goed combineren van afbeeldingen met type (door middel van grootte, stijl, kleur, enz.) Wonderen kan doen om een gedenkwaardig siteontwerp te creëren. Wil je een blijvende indruk maken? Maak wat aantekeningen over de gedurfde aanpak van Kaleidoscope.
De Fe.rocious-site is een instantie waarbij elk onderdeel van de site 'ontworpen' voelt. Dat wil zeggen dat er niets is overgelaten aan de standaardinstellingen van de browser om te stylen ... Dit kan vaak een slechte zaak zijn wanneer het niet goed wordt gedaan, maar in de handen van de Fe.rocious ontwerpers voelt het slim en stijlvol.
Ik ga niet teveel zeggen over dit ontwerp, omdat ik vind dat het vrij goed voor zichzelf spreekt. Het gebruik van de lay-out en het type is vrij gewoon, maar waar het interessant wordt is in de grote afbeeldingen die in de schuifregelaar worden gebruikt. Vergeet niet dat webtypografie ook in afbeeldingen kan bestaan ... het creëren van een aparte visuele stijl voor typografie op basis van afbeeldingen kan veel opleveren voor een anders gebruikelijke lay-out.
Ik zal de eerste zijn om toe te geven dat ik hou van Condensed Sans-Serif lettertypen ... maar ze kunnen fout gaan als ze niet goed worden gebruikt. Hier staan ze centraal als een kruising tussen een kop en een accentlettertype. Het resultaat: precies de juiste hoeveelheid geschreeuw. Het integreren van het sjieke scriptlettertype helpt ook om de stijve vormen van het League Gothic-gezicht een beetje stijl te geven. Merk op hoe de twee lettertypen elkaar in balans brengen. Goed? Ja, het is geweldig.
De websitestructuur van Infinvision is eenvoudig en ingetogen ... wat de nadruk legt en de aandacht vestigt op de fantastische kleine typegedreven illustraties waarmee ze hun bedrijf introduceren. Witte ruimte werkt verrassend goed hier - zei Nuff.
King Size is de enige sjabloon in deze lijst - Wat ik er typografisch leuk aan vind, is dat het helemaal geen WordPress-thema is. Het grote lint, in combinatie met het laurierontwerp, doet dit voelen als grimmig en Romeins in esthetische ... iets dat je niet vaak (of helemaal niet) ziet in sjabloonontwerpen die gewoonlijk stijf en voorspelbaar aanvoelen.
Het logo voor Devin's Heaven is geweldig, maar wat ik echt leuk vind aan de site, is hoe het type is ingedeeld voor de blogposts. De intro-paragraaf is de volledige breedte en de rest van de berichten worden teruggezet naar de standaard 2-koloms inhoud / zijbalkbenadering. Het is zo eenvoudig ... maar met die intro-alinea van volledige breedte voel je je alsof de hele pagina aan dat ene artikel is gewijd. Waar andere blog-opmaken aanvoelen als sjablonen waar artikelen eenvoudig in passen, voelt deze alsof het in de eerste plaats om het artikel gaat.
De site van de Greater Dunnellon Historical Society voelt gewoon leuk. Overweeg eerst het doel van de site: om de geschiedenis van Dennelon voor de gemeenschap te bewaren. Als zodanig bootst de typografie binnen de site veel van de kenmerken van de samenleving na die ze bewaren. Er is niets wild en gek ... maar alles, van de multi-columns, de op newpaper geïnspireerde body-copy tot de knoppen, voelt authentiek aan in de geschiedenis (met een paar moderne updates). De kroonlijst, grillige illustraties en rekken voegen de juiste hoeveelheid diepte toe om deze site echt als een mini-tijdcapsule voor deze community te laten voelen.
De lay-out van de site van Stuart Hobday is een frisse neus na enkele van deze zeer illustratieve sites te hebben bekeken. Zijn grimmige minimalistische benadering voelt eenvoudig en pretentieloos. Alles wordt logisch geplaatst en zonder verfraaiing ... soms wat een ontwerper kan doen minder zegt veel meer over zijn volwassenheid en discipline. In een wereld van extravagante portfolio's en harde concurrentie, heeft het enige serieuze vertrouwen en visie nodig om een ingetogen ontwerp als dit te creëren.
We hebben de nieuwe site van Ryan besproken in ons artikel over de webtrend van 2011, maar het is echt geweldig genoeg om nog een keer te noemen. Ryan combineert type en illustratie naadloos in een prachtige verticale scroll-site. Het gecombineerde effect zorgt voor een gevoel van avontuur en creatieve ontdekking ... wat perfect werkt als een methode om zichzelf te promoten bij potentiële klanten.
De site van Pat Dryburgh staat in contrast met Ryan Scherf's ... maar niet op een slechte manier. Pat maakt gebruik van een stijve, goed ontworpen structurele lay-out, verfijnde lettertype-selectie en een interessante combinatie van positieve en negatieve ruimte om een algehele esthetiek te creëren die zelfverzekerd en professioneel aanvoelt. Ik hou vooral van de grote kolommen met witte ruimte links aan de linkerkant van de grote gebieden van het type (onder de hoofdafbeelding). Zou hij die ruimte met iets gevuld kunnen hebben? Zeker ... maar wat hij heeft besloten om uit het ontwerp te blijven spreekt boekdelen voor zijn dwang als ontwerper.
Welnu, het is weer die tijd van de post. We hebben gelachen, een beetje gehuild, maar samen zijn we tot de conclusie gekomen, en hier moet ik je verlaten. Zoals ik hierboven heb genoemd, als ik deze maand je eigen favoriet niet heb geraakt, deel deze dan hieronder in de sectie Reacties! Ik zal het zeker volgende maand controleren op het bericht!
Lees meer over Web Typography in mijn bericht over Het juiste lettertype kiezen: een praktische gids voor typografie op het web!
We hebben ook een geweldige lijst met artikelen in de categorie Webtypografie gestart ... dus bekijk ze ook!
Accentsconagua