De Designer's Guide to Visual Punctuation
Leestekens zijn meer dan alleen punten en uitroeptekens. Qua ontwerp kan interpunctie alles zijn waardoor een lezer of gebruiker stopt of pauzeert. Het kan gebeuren tijdens het lezen van tekst of als het oog van het ene element naar het andere beweegt. Deze stukjes visuele interpunctie zijn overal en zijn essentiële onderdelen van elk ontwerpconcept.
De belangrijkste elementen van visuele interpunctie zijn veelvoorkomende leesbare leestekens, maar ook spatie, lijnen, regels, pictogrammen en kleur.
Verken Envato Elements
Wat is visuele interpunctie?
Visuele interpunctie heeft twee primaire vormen: markeringen die ervoor zorgen dat u stopt tijdens het lezen of elementen die een pauze veroorzaken wanneer u van het ene object naar het andere kijkt. Beide soorten interpunctie zijn even belangrijk, en hoewel contextuele interpunctie redelijk bekend en gebruikelijk is, denkt niet iedereen vaak aan andere visuele aanwijzingen.
Visuele interpunctie is belangrijk omdat het ervoor kan zorgen dat mensen naar een ontwerp blijven kijken en vermoeidheid voorkomen bij het lezen of kijken naar een ontwerp. Natuurlijke pauzes maken deel uit van de menselijke natuur en door ze te ontwerpen, creëer je stops die plaatsvinden waar en wanneer je ze wilt. Het helpt om context en visuele stroom toe te voegen.
Het maakt uw ontwerp ook gemakkelijker te verteren voor een gebruiker / lezer. Wanneer het "werk" voor hen is gedaan, kan het bekijken van een ontwerp gemakkelijker zijn en minder inspanning of gedachte vergen. (En we weten allemaal dat het in de drukke wereld van vandaag beter is om mensen die naar onze ontwerpen kijken, gemakkelijker te maken.)
In een notendop: visuele interpunctie is alles wat de ontwerper gebruikt om elementen, foto's of woorden in een ontwerp te scheiden, groeperen of benadrukken. Opzettelijk of niet, visuele interpunctie zorgt ervoor dat iemand stopt en naar een bepaald deel van het canvas kijkt.
Leesbare (tekst) leestekens
Het meest bekende type interpunctie is… nou ja… daadwerkelijke interpunctie. Alle markeringen in tekst die ervoor zorgen dat u tijdens het lezen stopt, worden beschouwd als leestekens.
Veelvoorkomende symbolen zijn de punt, vraagteken, uitroepteken, sterretje, em-streepje, puntkomma, haakjes, haakjes, ellips, aanhalingstekens, dubbele punt, koppelteken, apostrof en de komma. De merken kunnen worden gebruikt in de context van het schrijven of vormen van zinnen, maar worden ook vaak voor visuele doeleinden gebruikt.
Soms worden deze karakters gebruikt als onderdeel van een logo of in de kunst van een ontwerp om betekenis of nadruk over te brengen. Vanwege hun gemeenschappelijke karakter en vaak goed begrepen betekenissen, zijn deze symbolen op verschillende manieren gemakkelijk te gebruiken.
Ruimte
Het gebruik van ruimte als vorm van visuele interpunctie komt ook van tekst en schrijven. Spatie wordt gebruikt om niet het begin van een nieuwe alinea in een tekstblok of zelfs maar het begin van een nieuw hoofdstuk in een boek te starten. Ruimte kan functioneren op een manier die duidelijk is zoals een periode of op een meer vloeiende manier zoals een em-streepje.
Ruimte wordt ook gebruikt om visuele starts en stops te creëren en een richting voor je ogen te creëren om te reizen. De hoeveelheid ruimte die tussen elementen wordt gebruikt, kan aangeven hoe dicht of ver uit elkaar ze staan ten opzichte van de andere inhoud. Ruimte kan ook ruimte creëren om u onafhankelijk op meerdere elementen te concentreren.
Bekijk de afbeelding hierboven van United Strands. Er is veel ruimte tussen de stapel overhemden en de simpele tekst. De ruimte geeft de gebruiker de tijd om naar elk item te kijken en het afzonderlijk te verwerken en vervolgens als een eenheid. Ruimte dient als herinnering om te vertragen en als een manier om de elementen op het scherm met elkaar te verbinden.
Ruimte zorgt voor een ander resultaat op de Nice en Serious pagina hierboven. Vanwege de consistente afstand tussen vier vergelijkbare, maar verschillende items in de rode cirkels, groepeert u de elementen natuurlijk als één afbeelding. De ruimte tussen elk element is vrij krap en consistent van het ene item naar het volgende, waardoor ze als een enkel element 'voelen'.
Lijnen en regels
Lijnen zijn regels die een duidelijke scheiding tussen objecten creëren. (Je kunt hetzelfde effect ook bereiken met bokselementen.) De lijn geeft aan waar het ene eindigt en het andere begint; het lijkt veel op een punt aan het einde van elke zin in een alinea.
Lijnen worden vaak gebruikt in combinatie met ruimte, maar dat is niet altijd het geval. Lijnen die dicht bij elkaar staan of geen ruimte hebben, kunnen bijdragen aan een gevoel van benauwdheid of kunnen soms items over die scheiding heen verbinden.
In de bovenstaande voorbeelden worden lijnen op twee manieren gebruikt. Op de Square-pagina worden meerdere regels gebruikt om een denkbeeldige of 'spook'-knop te vormen. Lijnen stellen het klikbare deel van de pagina apart van de rest. Op de Agra Culture Kitchen & Press-pagina worden lijnen op twee manieren gebruikt: om het oog van element naar element te laten bewegen en om de aandacht te vestigen op specifieke inhoud die van belang is, zoals het logo, de hoofdtekst en de call for action-knop op de startpagina .
Pictogrammen en ontwerpelementen
Hoewel het gebruik van pictogrammen en andere elementen (en gebruikersinterfacetools voor digitale projecten) het resultaat zijn van functie, bieden ze ook ontwerprichting. Deze tools vertellen gebruikers waar ze heen moeten in het ontwerp, hoe ze met de inhoud kunnen omgaan en helpen bij het vormgeven van de algemene acties die een gebruiker zal ondernemen bij interactie met een specifiek item.
In printprojecten worden bijvoorbeeld vaak Facebook- en Twitter-logo's gebruikt om gebruikers te vertellen dat bedrijven pagina's hebben die ze leuk kunnen vinden of kunnen volgen. Pictogrammen in plaats van langere of moeilijkere URL's worden de norm. Deze zelfde pictogrammen worden vaak gebruikt in digitale projecten als een klikbare link naar deze sites of die gebruikers naar opties voor het delen binnen deze sociale mediasites brengen.
Pictogrammen en ontwerpelementen kunnen ook voor andere doeleinden worden gebruikt. Ze dienen als visuele divots in het vertelproces en kunnen worden gebruikt om lezers te verleiden via tekst of van het ene item naar het volgende op het canvas. (Zie ze bijna als komma's, waarmee je kunt pauzeren, maar niet kunt stoppen met bewegen langs het pad.) Octopus gebruikt bijvoorbeeld grote pictogrammen als links in de gekleurde vakken en als visuele navigatie-elementen in de opsommingstekens hieronder. Openbox gebruikt pictogrammen op een vergelijkbare manier, variërende ontwerpen van driehoeken om gebruikers te helpen door de inhoud op de site te bladeren. (De + of x, afhankelijk van de oriëntatie, doet hetzelfde.) Een ander opmerkelijk element hier zijn de punten onder de hoofdtekst, die fungeren als regel en navigatietool.
Kleur
Kleur kan een leuke flair toevoegen wanneer u op zoek bent naar scheiding van elementen in het ontwerp. En er zijn tal van manieren om dit te bereiken. Van kleur versus zwart-wit tot scherpe contrasten tot thematische kleurenschema's of kleurpanelen, het gebruik van verschillende tinten is een gemakkelijke manier om op een interessante manier aandacht te besteden aan specifieke delen van het ontwerp.
De bovenstaande voorbeelden tonen twee sterk verschillende manieren om kleur te gebruiken om een pauze te creëren. Op de P'unk Ave-pagina zwemt een felrood pictogram in de ruimte tegen een achtergrond met één kleur. Het zorgt voor onmiddellijke visuele impact en verbinding. (Beschouw het als een soort uitroepteken.)
De Zuid-Australische pagina gebruikt kleur op een heel andere manier. Elke verschillende inhoudssectie (en coördinatiescherm in het parallax-raamwerk) gebruikt een ander kleurenscherm. Dit helpt u te weten welk gedeelte u leest en welke andere inhoud er komt. Deze visuele "puntkomma's" geven je de tijd om een gedachte af te maken terwijl je naar de volgende gaat.
Gevolgtrekking
Visuele interpunctie is overal. Het is in het begin misschien niet zo duidelijk als de kleine letters met dezelfde naam in tekst, maar het is net zo belangrijk. Visuele interpunctie helpt bij het creëren van flow, richting en voorkomt vermoeidheid van lezer (en gebruiker).
Het helpt harmonie en visuele harmonie te creëren. De grotere vraag is niet of je het gebruikt, maar als je erover nadenkt in het ontwerpproces. Zien u visuele leestekens gewoon voor, of plant u ze uit? We zouden graag meer weten over uw ontwerpproces in de opmerkingen.
