Share
Klar for denne månedens dose av webdesign typografisk awesomeness? Jeg vedder på at du er! Connor tar ledelsen denne måneden med Brandon å gjøre noen sikkerhetskopiering - og vi har en liste over 17 nettsteder som viser noen av de beste typografiene for dere n 'gals å sjekke ut. Denne måneden har vi selv en spesiell seksjon dedikert til noen nye (ish) webbaserte typografi og layoutverktøy for å gjøre livet ditt lettere. 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, vil vi også analysere hvorfor typografien fungerer. La oss dykke inn i denne måneds tilbud:
SquareSpace har faktisk en historie med godt utformet typografi på sine nettsteder, men de trukket ut alle stopp for årets SXSW-arrangement. Området innhold handler om folk som sender whacky bilder fra arrangementet, men ta en titt på hvor godt det er lagt ut. Vakkert sett overskrifter? masse variasjon i layoutet? og subtil bakgrunnsbilde / teksturer som refererer til gammel typografi. Den hippe, ultra moderne skalleillustrasjonen gjør ikke vondt heller.
Nettstedet er ikke stort, noen SS har gjort det bra for å holde ting friskt og interessant som du ruller nedover siden. Hvis du legger merke til det, er det egentlig ingen standard for typografien (utover de samme skriftfamiliene) - størrelser er over alt, og så er plasseringen? Men det er helt akseptabelt i dette tilfellet fordi hver enkelt seksjon (det som er synlig på en skjerm på samme punkt) virker i harmoni med seg selv. Fargene er alle fra samme generelle palett, og alt føles som om det er hengslet på et rutenett, selv om du ikke kan spik det helt nede.
Grip Limited er et av de nettstedene du kjører over hver gang en stund, som er så utrolig ute av boksen at du bare må sitte og ta den inn i et minutt eller to. Jeg får den rare følelsen at bare å se på det, får jeg en bedre typograf. Typesortimentet er så mangfoldig at stedet uten den samlende monokrome paletten, sannsynligvis vil være vanskelig å se på. Heck, de fleste brukbarhetseksperter kan si at dette er absolutt søppel selv i sin nåværende tilstand, men jeg vil hevde at denne typen morsom "haglgevær" tilnærming til type er akkurat hva nettdesignere trenger å hengi fra tid til annen.
Vil du bli resirkulert denne utformingen om og om igjen for forretnings- eller bedriftsprosjekter? Selvfølgelig ikke, men bare å ta en liten bit av typen av dette nettstedet ville gjøre underverk for å spice opp et ellers vanlig prosjekt som du kanskje jobber med. For eksempel?
Burton er ganske / sorta på motsatt spekter som Grip Limited-siden. Det er svært organisert, satt i et stivt blokkoppsett, og super duper lett å bruke. Ta en nærmere titt selv, og du kan sikkert se hva jeg har plassert disse to sidene sammen i denne listen. Mens selve oppsettet er ganske godt låst i form av struktur, er den faktiske typografien på tvers av nettstedet langt fra det du vanligvis ser på nettet - og mye mer som det du ser i et snowboardmagasin eller katalog. Type er satt i kretser og andre uvanlige webformer for å gi hver side riktig mengde visuell interesse. De har også spredt seg i info-grafikk og andre forenklede illustrasjoner i noen av de vanlige gitterblokkene for å bryte opp monotonyen og rytmen til hver side.
Denne versjonen av Burton-siden har eksistert en stund? og likevel føles det alltid nytt og friskt hver gang jeg sjekker det ut. Ved å bytte ut bilder og nøkkelfargene, kan de få mye mer kjørelengde ut av nettstedet for hver ny sesong.
Impact Media bruker forskjellige skrifttyper, farger og størrelser i hovedskyteren og i hele deres nettsted. Som skrifttypen - Impact - valget av typografi i hele dette nettstedet er fet, store skrifttyper som kontrast mye med bakgrunnen deres.
Jeg elsker den nåværende stilen med dristige skriptfonter på nettet akkurat nå, og Impact Media bruker den i sin andre linje for å generere en nydelig, innbydende effekt.
Gaz Battersby er en grafisk designer basert i Leeds, Storbritannia, som er minimalistisk nettsted som sin portefølje. Nettstedet bruker en serif skrifttype gjennom hele designet, men kontrasterer kun elementer ved å endre skrifttypestil (til kursiv) i stedet for en helt ny skrift. Dette resulterer i en enklere, renere typografi.
Battersbys nettsted bruker også farge for å bygge opp en heirachy med overskriftene som er innkapslet i turkise sirkler for å fange brukerens oppmerksomhet.
Jeg vil ikke si for mye om SURROUND fordi det er ikke så mye å si. Det er en påminnelse om at noen ganger, en enkel tilnærming til layout og typografi virker helt fint. Ingen unødvendig frills, ingenting mellom besøkende og innholdet. Bare enkle fungerende teknikker som leverer en melding.
Invisible Creature er faktisk en av mine favorittstudioer i verden? går helt tilbake til da de ble samlet sammen som Asterik Studio. Lang historie kort: de lager kickass plakater, album kunstverk og andre morsomme ting. Det jeg liker om dette nettstedet er det er kontroll og disiplin. Som et ledende "rock / metal" -studio kunne de like lett utvikle et nettsted som passer til den siden av sitt arbeid: vill, slitende, kaotisk. I stedet har de valgt å bruke rene linjer, enkle farger og sans-serif-fonter - som til slutt lar sitt arbeid tale for seg selv.
Feed Me er et en-siders webdesign som bruker typografi for å lage et rent fargevalg på tvers av siden. Kontrasten mellom den vanlige skrifttypen og en sterkere, børstestil en skaper en enkel heirachy som legger vekt på nøkkelord.
Feed Me har sine egne fordeler som et helt webdesign og typografien er en viktig ingrediens for den suksessen. De buede grønne skrifttyper samordner med naturtemaet til webdesignet som jeg elsker.
Det er vanskelig å påpeke den eksakte grunnen til effekten som genereres av denne grafiske designerens nettsted, men jeg vet at det er en flott en!
Få min chef til Nordkappen er en interessant nettside. Et belgisk webdesignfirma - nemlig Inventis - forsøker å utnytte en gruleing 545km syklus for å få litt tillegg Facebook liker. Nettstedet bruker et interessant utvalg av typografi og bruker farge for å understreke de viktigste delene av hver setning (for eksempel "5000 liker" og "sykkel 545km").
Fargen på teksten på denne siden koordinerer med bakgrunnen den ligger på som vist i den brune teksten som brukes på tittelskiltet. Inventis bruker også indre skygging for å skille teksten fra bakgrunnen i tilfeller der dette er nødvendig, men ikke hvor det ikke er (som milepæler på sykkelbanen).
I likhet med Gaz Battersbys nettsted bruker Wes Bos få forskjellige skrifttyper i hans design og velger i stedet å bruke båndbakgrunn på redaktørene for å lage sitt hierarki. Svært enkelt, jeg elsker kontrast fra skriptfonten til serif-en og all-caps-vekten på hans jobbtitler.
Selv om det ikke er et nytt nettsted, er W3Cs HTML5-logoside fortsatt et godt eksempel på god typografi i spill av flere grunner, inkludert bruk av en nydelig fet, kondensert skrift i titler som samsvarer med sidenes navnevennskap.
Pargraphene på siden er også fordelt på riktig måte for lettere lesing for sluttbrukeren.
Som du sikkert kan gjette fra skjermbildet, er dette ikke et nytt nettsted. Det ble imidlertid vist på andre typografi-roundups med så stor frekvens, jeg ville tenke på det som en skarp forsømmelse, hvis jeg skulle velge å ikke inkludere den. Chrip var Twitters offisielle utviklerkonferanse som skjedde om denne tiden i fjor.
Jeg har en gang lært en tommelfingerregel om typografi: bruk ikke mer enn tre skrifttyper. Mens Chrip gir inntrykk av mye aktivitet (noe du virkelig ønsker å lage for en konferanse), kan jeg bare telle tre forskjellige skrifttyper brukt hvis man ignorerer logoen.
Jeg elsker spesielt tittelen i Jeremy Churchs portefølje. Betraktningen på "The" ser fantastisk ut, men legger mer oppmerksomhet til et hovedmål for å "redusere støy". Bortsett fra de dristige, skyggefulle titlene, bruker resten av designet en svært forenklet, sans-serif-skrift som trekker mer oppmerksomhet mot hovedkontrast.
Black Ant Media bruker en rekke veldig glatte ansikter som ser fantastisk ut, men det er vanskelig å poinpoint hvorfor. Black Ant Media velger å bruke samme skrifttype i stedet for mange og bare variere størrelse, farge og vekt for å skille mellom ulike elementets fremtredende.
Som i noen av de andre eksemplene på dette, bruker Black Ant Media også fargede bakgrunner i stedet for å skalere for å støte på titler oppe i det visuelle hierarkiet.
Premium Pixels er et WordPress-tema som gjør listen takket være dens relevans for noen av de gjeldende typografistandardene som diskuteres i Brandons siste artikkel om typografi. Den støyende bakgrunnen er i motsetning til teksten på siden takket være en hvit tekstskygge som gir en følelse av dybde. Hvert innlegg på siden er også betegnet med en kompakt, fet skrift.
Hvert av innleggene i dette WordPress-temaet har stor linjeavstand, så det er mye lettere på øyet å lese og etikket med stor polstring er tydelig på tvers av hvert element på siden.
Subtly, det er også et serif ansikt kastet mellom hvert innleggs metadata.
Som en side notat, er Orman Clarks nyeste nettside redesign også verdt å nevne på denne listen, som eksemplifiserer noen gode typografiske layoutprinsipper. Rent, enkelt og godt organisert. her er noen skjermbilder:
Webdesignere snakker mye om å gjenskape "print-estetikk" på nettet? men vanligvis tar designere det å bety bare ved å bruke rike teksturer, ulykkelige ustrukturerte layouter, og mange hjørneskygger eller trompe l'oeil effekter. Sjeldent husker designere virkelig at utskriftstypografi ofte er like strukturert som typen på nettet. Pelicanfly slår sammen det beste fra begge verdener (etter min mening), ved å bruke enkle kolonnestrukturer, typografiske symboler og moderne CSS-effekter for å skape et nettsted som er minneverdig. Jeg kommer til å gjette at den er designet med tabletter i tankene også, fordi det er noen få tilfeller der du må flippe skjermen for å lese.
Gratis verktøy: Dette er et ganske nytt verktøy som jeg kjørte over den andre dagen. Det gjør at du i utgangspunktet kan tinker med base typografi for et prosjekt til du får alt perfekt - da spytter det ut CSS (3) som genererer stylingen du opprettet. Jeg er sikker på at det finnes en håndfull liknende web-apps der ute, men denne slo meg som en av de mer verdifulle rett og slett på grunn av den enorme mengden tinkering som du kan gjøre, og det er brukervennlighet.
Accentsconagua