Share
Klar för den här månadens dos av webdesign typografisk awesomeness? Jag slår vad om att du är! Max tar månaden av, men han har gett oss en lista med 15 sidor som visar upp några av de bästa typografierna för ni nalsals att kolla in. Låt oss gräva in!
Att prata om de tekniska reglerna för korrekt typografi är bra ... men där gummit verkligen träffar vägen är när vi kan börja titta på exempel på typografi i aktion och analysera varför det fungerar. En av de vackra sakerna om typografi är att, precis som de språk som vi använder för att kommunicera med varandra, sättet du använder typ i en design ger det en röst. Du kan skrika och skrika eller du kan viska lugnt ... det är allt upp till dig och hur du vill att ditt meddelande ska höras.
Varje månad tittar vi på mellan 10 och 20 exempel på utmärkt typografi i webbdesign ... men ännu viktigare, Vi analyserar också varför typografi fungerar. Låt oss dyka in i månadens erbjudande:
Det är alldeles för sällsynt att jag stöter på webbplatser så här ... ärligt talat. Det är ett tillvägagångssätt som du tenderar att se mycket i utskriftsdesign, men sällan förts till webben. Vad är komponenterna?
Titta på hur enkelt designen är ... Det finns inte ett enda element som en designstudent från första året inte kan skapa ... men hur elegant och sofistikerat gör det känna på skärmen? Det här är vad vi pratar om när vi diskuterar inspirerande typografi. Genom att använda en enkel, välstrukturerad layout lyckas konstruktören att formulera en känsla av förtroende och professionalism innan besökaren läser texten även.
Ibland kräver en design något vanligt för att ta tag i besökarens uppmärksamhet. Det här gör Amazee Labs-webbplatsen så bra. Amazee väljer inte bara att använda vanliga webbsidor, de blandar också HTML-uppsättningstyp tillsammans med bildbaserad typ för att ge en hög grad av kreativitet och spänning. På många sätt bryter Amazee reglerna ... men det är hur de gör det som gör det klart:
Allt detta bidrar till att bevara ordningsföljden, även när typvalet är över hela kartan.
Finch-webbplatsen är förvånansvärt minimal i det är typanvändning. Låt dig inte luras av den stora logotypen på framsidan ... allt i denna design är underdimensionerad (på ett bra sätt).
Saken med att använda typ på en tom sida är att när det är gjort ordentligt känns sidan som att den har mycket mer på gång än bara text.
Vi nämnde bildmekanik i vår årliga Web Design Trends-post, men det är värt att uppfostra igen för att det stenar. Konstruktionen avviker från standard UI-navigationsparadigm genom att göra faktiska block av text navigeringen (i motsats till enkla ord eller knappar). Detta drar besökaren på, påminna dem om att det finns faktiska idéer bakom varje länk. Den faktiska kroppsinnehållet i designen är också väldigt bra designad - det känns nästan som en tidning, med stor fetstilhuvudtext, välparrade illustrationer och subtila färgförändringar (ungefär som spotfärger i en skrivbordszon). Jag älskar också den stora logotypen på sidan "Meet the Makers"!
Okej, jag ska erkänna att jag omedelbart dras in av den enorma, sexiga färghjulsvärlden illustrationen ... så mycket så att typografi kanske kan vara hemskt utan det (det är inte), och jag märker nog inte. Poängen jag försöker göra med den här är att det är korrekt att para bild med typ (genom storlek, stil, färg etc.) kan göra underverk för att skapa en minnesvärd webbplatsdesign. Vill du göra ett bestående intryck? Ta några noter om Kaleidoskops djärva inställning.
Den Fe.rocious webbplatsen är en förekomst där varje del av webbplatsen känns "designad". Det vill säga att ingenting har lämnats till standardinställningarna för webbläsare för att stil ... Det kan ofta vara en dålig sak när det inte är gjort rätt, men i händerna på de Fe.rocious designersna känns det smart och snyggt.
Jag kommer inte att säga för mycket om denna design eftersom jag tycker att det talar ganska bra för sig själv. Layouten och typanvändningen är ganska vanlig, men där det blir intressant är i de stora bilderna som används i reglaget. Kom ihåg att webbtypografi kan finnas i bilder också ... skapa en distinkt visuell stil för bildbaserad typografi kan ge mycket till en annars vanlig layout.
Jag kommer att vara den första att erkänna att jag älskar Condensed Sans-Serif Typefaces ... men de kan gå oh-så-fel om de inte används ordentligt. Här tar de mittfas som ett kors mellan en rubrik och en accentfont. Resultatet: Bara rätt mängd rop. Integrering av fancy script-fonten bidrar också till att få lite stil till de styva formerna av League Gothic Face. Lägg märke till hur de två tecknen balanserar varandra. Bra? Ja, det är bra.
Infinvisions webbplatsstruktur är enkel och dämpad ... vilket hjälper till att betona och uppmärksamma de fantastiska lilla typdrivna illustrationerna som de använder för att presentera sitt företag. White space fungerar förvånansvärt bra här - sade nuff.
King Size är den enda mallen på den här listan - Vad jag tycker om typografiskt är att det inte känns som ett WordPress-tema alls. Det stora bandet, kombinerat med laureldesignen, gör att denna känner sig stark och romersk i estetiska ... något som du inte ofta ser (om alls) i malldesigner som brukar känna sig styva och förutsägbara.
Logotypen för Devin's Heaven är bra, men det jag verkligen tycker om webbplatsen är hur typen är placerad för blogginlägg. Inledning stycket är full bredd, och resten av inläggen återgår till standard 2-kolumn innehåll / sidobar tillvägagångssätt. Det är så enkelt ... men den fullständiga bredden intro stycket får dig att känna att hela sidan är dedikerad till den enda artikeln. Om andra blogg layouter känns som mallar som artiklar enkelt passar in, känns det som om det handlar om artikeln först och främst.
Greater Dunnellon Historical Society webbplats känns bara kul. Tänk först på webbplatsens syfte: att bevara Dennelons historia för samhället. Som sådan efterliknar typografi på webbplatsen mycket av egenskaperna hos det samhälle som de bevarar. Det finns inte något vildt och galet ... men allt från multikolumnerna, nypapperinspirerad kroppskopia till knapparna känns autentiska till historien (med några moderna uppdateringar). Kronformning, nyckfulla illustrationer och hyllor ger rätt mängd djup så att den här webbplatsen verkligen känns som en mini-kapsel för det här samhället.
Stuart Hobdays webbplatslayout är en andning av frisk luft efter att ha tittat på några av dessa mycket illustrativa platser. Dess starka minimalistiska inställning känns enkel och opretentiös. Allt läggs logiskt och utan utsmyckning ... ibland vad en designer kan göra med mindre säger mycket mer om hur mycket hans mognad och disciplin. I en värld av extravaganta portföljer och hård konkurrens tar det lite seriöst förtroende och syn att dra av en diskret design som denna.
Vi har täckt Ryans nya sajt i vår 2011 Web Trends artikel, men det är ärligt tillräckligt stort för att nämna igen. Ryan blandar typ och illustration sömlöst i en vacker vertikal rullningsplats. Den kombinerade effekten är en som skapar en känsla av äventyr och kreativ utforskning ... som fungerar perfekt som en metod att främja sig för potentiella kunder.
Pat Dryburghs webbplats står i kontrast till Ryan Scherfs ... men inte på ett dåligt sätt. Pat använder en styv strukturell layout med bra konstruktion, sofistikerat typsnitt, och en intressant blandning av positivt och negativt utrymme för att skapa en övergripande estetik som känns trygg och professionell. Jag gillar särskilt de stora kolumnerna av vitrum kvar på vänster sida av de stora områdena av typen (under huvudbilden). Kunde han ha fyllt det med något? Visst ... men vad han bestämt sig för att gå ur designen talar volymer till hans begränsning som designer.
Tja, det är den tiden på posten igen. Vi har haft lite skratt, vissa gråter, men tillsammans har vi gjort det till slutsatsen, och här måste jag lämna dig. Som jag nämnde ovan, om jag inte träffade din egen favorit den här månaden, var noga med att dela den ner nedan i kommentarfältet! Jag är säker på att kolla in det för inlägget nästa månad!
Läs mer om Web Typografi på mitt inlägg på Välja rätt typsnitt: En praktisk guide till typografi på webben!
Vi har också startat en bra lista med artiklar i kategorin Webtypografi ... så kolla in dem också!
Accentsconagua