Punctuation är mer än bara perioder och utropstecken. När det gäller design kan skiljetecken vara allt som gör att en läsare eller användare stoppar eller pausar. Det kan hända när du läser text eller när ögat flyttar från ett element till ett annat. Dessa bitar av visuell skillnad är överallt och är viktiga delar av något konceptkoncept.
De viktigaste elementen i visuella interpunktion inkluderar vanliga läsbara skiljetecken samt utrymme, rader, regler, ikoner och färg.
Vad är Visual Punctuation?
Visuell skiljetecken kommer i två primära former - märken som gör att du slutar läsa eller element som skapar en paus när man tittar från ett objekt till ett annat. Båda typer av skiljetecken är lika viktiga, och medan kontextuell interpunktion är ganska känd och vanlig, tänker inte alla ofta på andra visuella signaler.
Visuell skillnad är viktigt eftersom det kan hålla människor tittar på en designförlovad och förhindrar trötthet när man läser eller tittar på en design. Naturliga pauser är en del av mänsklig natur och genom att designa dem skapar du stopp som uppstår när och var du vill ha dem. Det hjälper till att lägga till kontext och visuellt flöde.
Det gör också din design enklare för en användare / läsare att smälta. När jobbet? är gjort för dem, att titta på en design kan vara enklare och kräver mindre ansträngning eller tanke. (Och vi vet alla att i dagens upptagna värld gör det lättare för dem som tittar på våra mönster är bättre.)
I ett nötskal är visuell skillnad något som konstruktören använder för att skilja, gruppera eller betona element, foton eller ord inom en design. Avsiktligt eller inte, visuell skillnad kommer att få någon att sluta och titta på en viss del av duken.
Läsbart (Text) Punctuation
Den vanligaste typen av skiljetecken är? väl? aktuell skiljetecken. Alla de märken som visas i texten som får dig att stanna när du läser betraktas som skiljetecken.
Vanliga symboler inkluderar perioden, frågetecken, utropstecken, asterisk, em dash, semikolon, parenteser, parenteser, ellipser, citattecken, kolon, bindestreck, apostrof och komma. Märkena kan användas i samband med att skriva eller formulera meningar, men används ofta också för visuella ändamål.
Ibland används dessa tecken som en del av en logotyp eller en designkonst för att förmedla mening eller betoning. På grund av deras gemensamma natur och ofta välförståda betydelser är dessa symboler lätta att använda på olika sätt.
Rymden
Användningen av rymden som en form av visuell skillnad kommer också från text och skrivning. Rymden brukar inte vara början på en ny paragraf i ett textblock, eller till och med början på ett nytt kapitel i en bok. Utrymme kan fungera på ett sätt som är distinkt som en period eller på ett mer flytande sätt, som en em dash.
Rymden används också för att skapa visuella start och stopp och skapa en riktning för dina ögon att resa. Mängden utrymme som används mellan element kan representera hur nära eller långt de är i förhållande till det andra innehållet. Rymden kan också skapa utrymme för att du kan fokusera på flera element oberoende.
Titta på bilden ovan från United Strands. Det finns mycket utrymme mellan stapeln av skjortor och den enkla texten. Utrymmet ger användartiden att titta på varje objekt och smälta det själv och sedan som en enhet. Rymden tjänar som en påminnelse att sakta ner och som ett sätt att ansluta elementen på skärmen.
Utrymmet ger ett annat resultat i Nice och Serious-sidan ovan. På grund av konsekvent avstånd mellan fyra liknande men olika objekt i de röda cirklarna grupperar du naturligtvis elementen som en enda bild. Utrymmet mellan varje element är ganska tätt och konsekvent från ett objekt till det andra, vilket gör dem? Känna? som ett enda element.
Linjer och Regler
Linjer är regler skapar distinkt separation mellan objekt. (Du kan också uppnå samma effekt med boxningselement.) Linjen avgränsar där en sak slutar och en annan börjar; Det är ungefär som en period i slutet av varje mening i en paragraf.
Linjer används ofta i samband med rymden, men det är inte alltid fallet. Linjer som är nära varandra eller saknar avstånd kan bidra till en känsla av tightness eller kan ibland länka objekt över den separationen.
I exemplen ovan används linjer på två sätt. På fyrkantssidan används flera linjer för att bilda en imaginär eller? Spöke? knapp. Linjer ställer in den klickbara delen av sidan bortsett från resten. På Agra Culture Kitchen & Press-sidan används linjer på två sätt: För att hålla ögat rörligt från element till element och att uppmärksamma specifikt viktigt innehåll, till exempel logotypen, huvudtexten och anropsknappen på hemsidan .
Ikoner och designelement
Medan användningen av ikoner och andra element (och användargränssnittsverktyg för digitala projekt) är resultatet av funktion, ger de också designriktning. Dessa verktyg anger användarna vart man ska gå i designen, hur man interagerar med innehållet och hjälper till att forma de övergripande åtgärder som en användare kommer att vidta vid samspel med ett visst objekt.
I utskriftsprojekt används exempelvis Facebook och Twitter-logotyper för att berätta för användarna att företag har sidor som de kan gilla eller följa. Ikoner snarare än längre eller svårare webbadresser blir norm. Dessa samma ikoner används ofta i digitala projekt som en klickbar länk till dessa webbplatser eller som tar användarna till delningsalternativ inom dessa sociala medier.
Ikoner och designelement kan också ha annan användning. De fungerar som visuella divots i storytelling processen och kan användas för att locka läsare genom text eller från ett objekt till nästa på duken.(Tänk på dem nästan som kommatecken, vilket gör att du kan pausa men inte sluta röra sig längs vägen.) Bläckfisk använder till exempel stora ikoner som länkar i de färgade rutorna och som visuella navigeringselement i punkterna nedan. Openbox använder ikoner på ett liknande sätt, varierande utformningar av trianglar för att hjälpa användare att flytta igenom innehållet på webbplatsen. (+ Eller x, beroende på orientering, gör samma sak.) Ett annat element i noten här är punkterna under huvudtexten, som vanligtvis fungerar som navigeringsverktyg.
Färg
Färg kan lägga till en rolig stil när du letar efter att skapa separering av element i designen. Och det finns många sätt att uppnå det. Från färg kontra svart och vitt till skarpa kontrast till tematiska färgscheman eller färgpaneler, med olika färgtoner, är det enkelt att ta del av specifika delar av designen på intressanta sätt.
Exemplen ovan visar två skarpt olika sätt att använda färg för att skapa paus. På sidan P'unk Ave simmar en ljus röd ikon i rymden mot enfärgad bakgrund. Det ger omedelbar visuell påverkan och anslutning. (Tänk på ett utropstecken av olika slag.)
South Australia-sidan använder färg på ett helt annat sätt. Varje olika innehållsavsnitt (och samordningsskärmen i parallaxramen) använder en annan färgskärm. Detta hjälper dig att veta vilken sektion du läser och vilket annat innehåll som ska komma. Dessa visuella? Semikolon? ge dig tid att avsluta en tanke medan du flyttar till nästa.
Slutsats
Visuell skiljetecken är överallt. Det kanske inte är så uppenbart först som de små bokstäverna med samma namn i text, men det är lika viktigt. Visuell interpunktion hjälper till att skapa flöde, riktning och förhindrar läsare (och användare) trötthet.
Det bidrar till att skapa harmoni och visuell harmoni. Den större frågan är inte om du använder det, men om du tänker på det i designprocessen. Visstår du visuella skiljetecken, eller planerar du dem? Vi skulle gärna veta mer om din designprocess i kommentarerna.