Share
Typografie is een van de belangrijkste vaardigheden die een ontwerper kan hebben? veteranen uit de industrie spenderen jaren aan het slijpen van hun techniek en je zou gemakkelijk jaren kunnen doorbrengen aan een universiteit die het onderwerp bestudeert; Maar waar is de beste plek om echt te beginnen? Tegenwoordig introduceren we in de nieuwste toevoeging aan onze Basix-serie typografie voor beginners door een eenvoudig ding uit te leggen: waarom typografie zo belangrijk is in webdesign.
Typografie is een oude discipline die het eenvoudigst kan worden uitgelegd als de kunst van het arrangeren en ontwerpen van het geschreven woord. De vroegste voorbeelden van typografie gaan terug tot 1800 B.C. met de oude Grieken, maar het moderne tijdperk van de typografie is verbonden met het midden van de 15e eeuw toen de drukpers werd uitgevonden.
Ik zal hier de geschiedenisles kort houden: typografie is om één reden belangrijk: omdat het de belangrijkste manier is waarop ontwerpers met lezers kunnen communiceren? Of het medium nu een boek, een gedrukte advertentie, een reclamebord of een televisieprogramma is, typografie is belangrijk omdat het de belichaming van de beeldtaal is.
96% van het internet bestaat uit geschreven informatie of tekst. Deze tekst is verdeeld in grote en kleine brokken informatie die is verspreid over verschillende pagina's met verschillende indelingen.
De opmaak van al deze geschreven informatie in het ontwerp van een website is wat we "Web Typography" noemen.
Typografie is het belangrijkste onderdeel van een webontwerp omdat het van invloed is op de manier waarop een website met lezers communiceert. Van grotere koppen en gedurfde blokken tot kleine letters, de verschillende manieren om tekst op het web te gebruiken, vormen de kern van de communicatiemethode? dus het is natuurlijk dat hoe een webontwerper beslist om het type op een webpagina in te delen cruciaal is voor de effectiviteit van die site.
We zien overal het gebruik ervan omdat alle websites afhankelijk zijn van typografie om hun boodschap over te brengen aan de lezers. Er zijn echter enkele webontwerpers die het onvermijdelijke belang van typografie overzien en zich alleen richten op het visuele of grafische deel van het webontwerp.
Het gebruik van typografie voor gedrukte media zoals brochures, folders, tijdschriften, boeken of buitenmedia zoals paalborden en reclameborden verschilt van het gebruik voor het computerscherm. Qua typografie is het scherm een heel ander medium? en zoals bij elk type ontwerp, moet u echt rekening houden met het medium waarop mensen uw ontwerp zullen bekijken. Beschouw de volgende twee afbeeldingen:
De bovenste afbeelding is een poster voor de band, The Black Keys. De onderste afbeelding is hun website. Dezelfde band, andere benadering van typografie. Waarom? Omdat het medium (en dus het bericht en de intentie) voor elk ontwerp anders is. De ene is om een concert te promoten, de andere is een portal voor allerlei informatie over de band.
Wanneer u typografie gebruikt in een afdrukontwerp voor zoiets als een boek, biedt het feit dat het van relatief dichtbij wordt bekeken, u de mogelijkheid om met de lettertypen te spelen, omdat het de leesbaarheid niet veel zal schaden. Als je typografie gebruikt voor communicatiemedia buitenshuis, zoals een billboard of poster, weet je dat de lezer slechts een fractie van de tijd heeft om het bord te bekijken en te consumeren wat er wordt gecommuniceerd, zodat je geen last hebt van de fijnafstemming van de typografie veel - in plaats daarvan kunt u zich richten op de eerste indruk van een leesbaarheid van het type.
Bij een website zijn er echter totaal andere doelstellingen voor ogen. Het ontwerpen van typografie voor computers en het web vereist dat de ontwerper veel informatie verdeelt in verschillende segmenten en deelsegmenten (micro- en macrotypografie). Ook is een webpagina niet constant omdat deze moet verschijnen in verschillende browsers, verschillende internettoegangsapparaten en met verschillende schermresoluties. Dus de webtypografie heeft te maken met een groot aantal problemen in vergelijking met andere media. Dus terwijl de typografie voor hun website wordt gekozen, moet een ontwerper rekening houden met de compatibiliteit en leesbaarheid tussen platformen. Dit zijn slechts enkele van de zorgen die een webontwerper in gedachten moet houden bij het benaderen van een website.
Als het op webdesign aankomt, beperkt typografie zich niet tot het kiezen van een lettertype en het uitleggen ervan; Het is de kunst om bundels informatie op te delen op een zodanige manier dat de lezer een goede kans heeft om te vinden wat voor hem van belang is? dit is waar typografie op het web meer op informatieontwerp lijkt.
Typografie op het web gaat net zoveel over het organiseren van type in effectieve, zinvolle lay-outs als het gaat om het gebruik van een goed lettertype.
De aandacht vestigen op een bepaald tekstblok, gebruikers helpen de inhoud te vinden waarnaar ze op zoek zijn of een grote verscheidenheid aan inhoud op één pagina plaatsen, gebeurt allemaal via typografische vaardigheden.
Het idee om het type te ontwerpen is meer dan alleen leesbaar, maar ook te zijn belangrijk maakt deel uit van wat veel mensen verwart over webtypografie. Iedereen kan een alinea uittypen; minder mensen kunnen dingen als letter-spacing, line-height en font-size gebruiken om het een gevoel van karakter te geven ;? maar de beste webontwerpers kunnen het type in een volledige lay-out ordenen op een manier die lezers betekenis verleent en hen helpt een volledige website te doorlopen.
Dit is wat we bedoelen met typografie als informatieontwerp.
Het is vaak handig om het typografische systeem voor een ontwerp te beginnen door het op te splitsen in twee verschillende segmenten:
Door eerst de macro-typografie te benaderen, kan het eenvoudig zijn om de "grotere afbeelding" -elementen van het type systeem in een ontwerp te schetsen. Waar zal de navigatie zijn? Hoe zal het type op de site worden uitgelegd? Eén kolom? Twee? Meer? Alle overkoepelende structuurregels moeten eerst worden gedefinieerd. Op dit punt kunt u zowat elk lettertype gebruiken dat u wilt? maar je kunt een idee krijgen van de grootte en de schaal van een ontwerp.
Zodra je het 'grote plaatje' hebt geschetst, is het tijd om Micro-typografie te benaderen. Dit is waar je echt begint met het verfijnen van je type systeem door stilistische elementen te definiëren zoals je primaire (en mogelijk secundaire) lettertype, hoe groot de grote krantenkoppen zullen zijn, de standaardgrootte van dingen zoals zijbalktitels, alineatekst, kleur koppelen, enz.
Als je net begint als een webdesigner, kan rondneuzen op alle wilde en gekke dingen die gebeuren met webtypografie ontmoedigend zijn. Je hebt mogelijk een aantal vragen, zoals: Waar te beginnen? Wat is goed en fout? Zijn er regels die ik moet volgen? Het goede nieuws is dat webtypografie inderdaad een paar consistente regels kent waarvan je op de hoogte moet zijn. Wat volgt zijn enkele nuttige tips die ik heb verzameld voor het maken van effectieve type systemen voor het web:
De hiërarchie van typografie is erg belangrijk in een webontwerp. Denk aan alle verschillende plaatsen waar u tekst op een website gebruikt: de navigatie, koppen, alinea's, bijschriften van afbeeldingen, zijbalken, enz.? De kans is groot dat er veel tekst is! Hoe ga je dit allemaal veranderen in een logisch type systeem? Door een typehiërarchie te ontwikkelen.
Een goed ontwikkelde hiërarchie stelt u in staat te weten waar te beginnen met lezen, hoe verder te gaan met lezen en het verschil tussen de belangrijkste en minder belangrijke informatie op een pagina. Met een effectieve typehiërarchie hoeft u niet meer te vertrouwen op tekstplaatsing om te benadrukken wat u wilt dat uw lezers eerst doormaken.
Lees meer over Understanding Hierarchy
Gebrek aan consistentie in typografie is een van de meest voorkomende en meest herhaalde fouten die webontwerpers tegenwoordig begaan. Een gedrukte ontwerper ontwerpt vaak elke letter op een pagina zorgvuldig? maar dat is niet nodig bij webdesign.
In plaats van te proberen elk type stuk op een site handmatig te ontwerpen, moet u het ontwerp met het idee van Cascading Style Sheets (CSS) in gedachten houden. Maak gebruik van de zegen van CSS en stel het lettertype, de grootte, kleur, regelafstand, hoogte en andere kenmerken van uw typografie in de hele website in.
Ik heb dit eerder vermeld, maar ik wil het graag benadrukken: geweldige webontwerpers doen meer dan alleen afbeeldingen plaatsen en tekst in een weblay-out plakken. Het vergt goede professionele gewoonten om een winnend website-ontwerp te maken; Een van de beste professionele gewoonten die een webontwerper zou moeten hebben, is Lees de tekst voordat u deze in de weblay-out plaatst. Als je toegang hebt tot de tekstinhoud die je gaat gebruiken, vermijd dan gewoon alles blindelings te plakken. Door de tekst door te lezen en te lezen, kunt u een betere verbinding maken tussen de inhoud en het ontwerp.
Als je klaar bent met het plaatsen van de tekst en andere elementen in het ontwerp, maak er dan ook een punt van om er opnieuw doorheen te gaan als een proefleerpraktijk om fouten te voorkomen of dingen weg te laten. Het is verbazingwekkend hoe vaak ontwerpers vergeten simpele dingen zoals lijsten met opsommingstekens te stijlen omdat ze de ontwerpfase doorliepen.
Voor een succesvol webontwerp moet een webontwerper aandacht besteden aan zowel macro- als microtypografie. Zelfs de beste lay-outs kunnen uit elkaar vallen als er dingen ontbreken aan de "micro" kant van de dingen? en zelfs de beste micro-typografie zal niet nuttig zijn voor lezers als deze niet is ingedeeld volgens de juiste macro-typografische principes. Beide zijn belangrijk!
Veel ontwerpers zijn vooral goed in het een of het ander? dus neem even de tijd om te overwegen wat je sterkste pak is: macro of micro? Doe dan je best om je vaardigheden (door oefening en aandacht voor detail!) Te versterken in je zwakkere skillset.
Dit is vanzelfsprekend voor veel ontwerpers, maar de kleur van tekst is een ander belangrijk ding om te overwegen. Er zijn honderden websites die dit als vanzelfsprekend beschouwen en lettertypekleuren gebruiken die:
U hoeft niet de hele regenboog over de pagina te spatten en u hoeft niet iets vreselijks te gebruiken zoals rode tekst op een groene achtergrond? gebruik gewoon een eenvoudige, verstandige kleurentheorie om kleuren te kiezen voor uw lettertypen die leesbaar en interessant zijn. Bedenk dat koppelingen in de meeste gevallen moeten worden gekleurd? het vertelt mensen dat ze erop kunnen klikken!
Lees meer over Web Design Color Theory.
Stop met het gebruik van Lorem Ipsum! Er is geen vervanging voor de eigenlijke tekst tijdens het ontwerpen van een website. Hoewel u dummy-tekst kunt gebruiken om een idee te krijgen van hoe de dingen eruit zullen zien in de lay-out, probeert u, zodra uw webontwerp voltooid is, de tekst te gebruiken die u of uw klant van plan bent te gebruiken in de live website. . Pas dan kunt u het ontwerp met de tekst synchroniseren en de impact bepalen van hoe de algemene website eruit zal zien? zelfs kleine vergissingen in dit proces kunnen leiden tot zwakke punten in een ontwerp, dus neem de tijd om livetekst te gebruiken voordat u een project 'compleet' noemt!
Het mooie van webtypografie is dat er verschillende manieren zijn om dit te benaderen - elke ontwerper heeft zijn of haar eigen stijl om dingen te doen, en er is echt geen enkele "juiste" manier van lay-outtype op de web. Type heeft persoonlijkheid, net zoals jij of de klant waarvoor je werkt, dus wees niet bang om met je eigen creatieve variaties te spelen als je eenmaal de basix van een site-ontwerp hebt gemaakt.
Lees meer over het kiezen van het juiste lettertype
Webdesign vereist dat je een aantal dingen onder de knie hebt om een geweldige lay-out te maken, en typografie is zeker een van deze dingen. Een webdesigner die echt het belang van typografie begrijpt, kan vaker de succesfactor raken dan niet? en het enige dat je echt hoeft te doen, is oefenen om je geest te trainen om de best mogelijke manier te vinden om een bepaald stuk van het type in kaart te brengen! Typografie is geen rocket science, maar het kost veel werk om de beste manier te vinden om dingen voor een bepaald project te doen.
Neem elke dag enige tijd om te oefenen - probeer een artikel te nemen dat je echt leuk vindt en ontwerp het opnieuw; Ontwerp je eigen cv, portfolio, wat je ook kunt vinden? gebruik gewoon de ideeën die je kunt gebruiken om te oefenen en je zult merken dat je beter wordt in een mum van tijd! Vertrouw me, zodra je de basis begrijpt, wordt het een fluitje van een cent!
Dit artikel is mede geschreven door Arfa Mizra en Brandon Jones. Bedankt voor het lezen!
Accentsconagua