Share
Klar for denne månedens dose av webdesign typografisk awesomeness? Jeg vedder på at du er! Max tar måneden av, men han har gitt oss en liste over 15 nettsteder som viser noen av de beste typografiene for dere, som du kan sjekke ut. La oss grave inn!
Å snakke om de tekniske reglene for riktig typografi er flott ... men hvor gummiet virkelig treffer veien, er når vi kan begynne å se på eksempler på typografi i aksjon og analysere hvorfor det fungerer. En av de vakre tingene ved typografi er at, i likhet med språkene vi bruker til å kommunisere med hverandre, måten du bruker skriver i et design, gir det en stemme. Du kan rope og skrike, eller du kan hviske stille ... det er helt opp til deg og hvordan du vil at meldingen skal bli hørt.
Hver måned vil vi se på mellom 10 og 20 eksempler på utmerket typografi i webdesign ... men enda viktigere, Vi vil også analysere hvorfor typografien fungerer. La oss dykke inn i denne måneds tilbud:
Det er altfor sjeldent at jeg kommer over steder som dette ... ærlig. Det er en tilnærming som du pleier å se mye i utskriftsdesign, men sjelden hentet på nettet. Hva er komponentene?
Se på hvor enkelt designet er ... det er ikke et enkelt element som en designstudent fra første år ikke kan skape ... men hvor elegant og sofistikert gjør det føle på skjermen? Dette er hva vi snakker om når vi diskuterer inspirerende typografi. Ved å bruke en enkel, godt strukturert layout, klarer designeren å formulere en følelse av selvtillit og profesjonalitet før den besøkende selv leser teksten.
Noen ganger krever et design noe utenom det vanlige å ta tak i den besøkende oppmerksomhet. Dette er hva Amazee Labs-nettstedet gjør så bra. Amazee velger ikke bare å bruke standard webfonter, de blander også HTML-settetype sammen med bildebasert type for å levere et høyt nivå av kreativitet og spenning. På mange måter bryter Amazee reglene ... men det er hvordan de gjør det som gjør det skinnende:
Alt dette bidrar til å bevare ordningsfølelsen, selv når typevalg er over hele kartet.
Finch-nettstedet er overraskende minimal i det er bruk av typen. Ikke bli lurt av den store logoen på forsiden ... alt i dette designet er undervurdert (på en god måte).
Saken om å bruke type på en tom side er at når det er gjort riktig, føles siden som at den har mye mer på gang enn bare tekst.
Vi nevnte bildemekanikk i vårt Yearly Web Design Trends-innlegg, men det er verdt å ta opp igjen fordi det klipper. Konstruksjonen avviker fra standard UI navigasjonsparadigm ved å lage faktiske tekstblokker navigasjonen (i motsetning til enkle ord eller knapper). Dette trekker besøkende i, og påminner dem om at det er faktiske ideer bak hver lenke. Den faktiske kroppsinnholdet i designet er også utrolig godt designet - det føles nesten som et magasin med stor, fet skrifttekst, godt parrede illustrasjoner og subtile fargeendringer (ganske som spotfarger i en trykt zine). Jeg elsker også den store logotypen på siden "Meet the Makers"!
Ok, jeg innrømmer at jeg straks blir trukket inn av den store, sexy fargeskjærne illustrasjonen ... så mye at typografien kanskje til og med er fryktelig uten den (det er ikke), og jeg vil nok ikke merke det. Poenget jeg prøver å lage med dette er at riktig sammenkobling av bilde med type (gjennom størrelse, stil, farge osv.) Kan gjøre underverk for å skape et minneverdig nettsteddesign. Vil du gjøre et varig inntrykk? Ta noen notater om Kaleidoskopets dristige tilnærming.
Fe.rocious nettstedet er en forekomst hvor hver eneste del av nettstedet føles "designet". Det vil si at ingenting har blitt overlatt til standardinnstillingene for nettleseren til stil ... Dette kan ofte være en dårlig ting når det ikke er gjort riktig, men i hendene på de Fe.rocious designerne, føles det smart og stilig.
Jeg kommer ikke til å si for mye om dette designet fordi jeg tror det snakker ganske bra for seg selv. Layout og type bruk er ganske vanlig, men hvor det blir interessant er i de store bildene som brukes i glidebryteren. Husk at webtypografi kan eksistere i bilder også ... Å skape en tydelig visuell stil for bildebasert typografi kan gi mye til en ellers vanlig layout.
Jeg blir den første til å innrømme at jeg elsker Condensed Sans-Serif Typefaces ... men de kan gå oh-så-feil hvis de ikke brukes riktig. Her tar de midtpunktet som et kryss mellom en overskrift og aksentfont. Resultatet: akkurat riktig mengde skriking. Integrering av fancy script font bidrar til å bringe litt stil til de stive former av League Gothic ansiktet også. Legg merke til hvordan de to skriftene balanserer hverandre ut. Flink? Ja, det er flott.
Infinvision nettstedstrukturen er enkel og dempet ... som bidrar til å understreke og trekke oppmerksomhet til de fantastiske, små, typedrevne illustrasjonene som de bruker til å introdusere sitt firma. Hvit plass virker overraskende bra her, sa nuff.
King Size er den eneste mal på denne listen - Det jeg liker om det, er typografisk, at det ikke føles som et WordPress-tema i det hele tatt. Det store båndet, kombinert med laurbærdesignen, gjør denne følelsen sterk og romersk i estetisk ... noe som du ikke ofte ser (om i det hele tatt) i maledesigner som vanligvis føles stive og forutsigbare.
Logoen til Devins Himmel er flott, men det jeg virkelig liker om nettstedet er hvordan typen er lagt ut for blogginnleggene. Innledningspartiet er full bredde, og resten av innleggene går tilbake til standard 2-kolonne innhold / sidebar tilnærming. Det er så enkelt ... men at hele bredden intro-avsnittet gjør at du føler at hele siden er dedikert til den enkelte artikkelen. Hvor andre bloggoppsett føltes som maler som artikler enkelt passer inn i, føles dette som om alt handler om artikkelen først og fremst.
The Greater Dunnellon Historical Society nettstedet føles bare morsomt. Tenk først om formålet med nettstedet: å bevare Dennelons historie for samfunnet. Som sådan etterligner typografien på nettstedet mye av egenskapene til samfunnet de opprettholder. Det er ikke noe vill og galt ... men alt fra flere kolonner, nypapir inspirert kropps kopi til knappene, er ekte til historien (med noen moderne oppdateringer). Kronen molding, lunefull illustrasjoner og hyller legger til rette mengde dybde for å gjøre dette nettstedet virkelig føles som en mini-time-kapsel for dette fellesskapet.
Stuart Hobdays nettstedoppsett er et pust av frisk luft etter å ha sett på noen av disse svært illustrerende nettstedene. Den sterke minimalistiske tilnærmingen føles enkel og upretensiøs. Alt er plassert logisk og uten embellishment ... noen ganger hva en designer kan gjøre med mindre sier mye mer om hvor mye hans modenhet og disiplin. I en verden av ekstravagante porteføljer og hard konkurranse, tar det litt seriøs tillit og visjon å trekke av et diskret design som dette.
Vi har dekket Ryans nye nettsted i vår 2011 Web Trends-artikkel, men det er ærlig stort nok til å nevne igjen. Ryan blander type og illustrasjon sømløst i et vakkert vertikalt rulleområde. Den kombinerte effekten er en som skaper en følelse av eventyr og kreativ leting ... som fungerer perfekt som en metode for å fremme seg selv til potensielle kunder.
Pat Dryburghs nettsted står i kontrast til Ryan Scherfs ... men ikke på en dårlig måte. Pat bruker en stiv struktur, godt design struktur, sofistikert skriftutvalg og en interessant blanding av positiv og negativ plass for å skape en total estetikk som føles trygg og profesjonell. Jeg liker spesielt de store kolonnene av hvitrom igjen på venstre side av de store områdene av typen (under hovedbildet). Kunne han ha fylt den plassen med noe? Sikkert ... men det han har bestemt seg for å gå ut av designet, taler volumer til hans begrensning som designer.
Vel, det er den tiden på innlegget igjen. Vi har hatt litt latter, noen gråter, men sammen har vi gjort det til konklusjonen, og her må jeg forlate deg. Som jeg nevnte ovenfor, hvis jeg ikke har truffet din egen favoritt denne måneden, må du dele den nede i kommentarfeltet! Jeg vil være sikker på å sjekke det ut for innlegget neste måned!
Les mer om Web Typografi på mitt innlegg på Velge riktig skrift: En praktisk guide til typografi på nettet!
Vi har også startet en god liste med artikler i kategorien Webtypografi ... så sjekk dem ut også!
Accentsconagua