Hamburg/Odense Introturopgave!

Arbejdsbeskrivelse: På en gåtur rundt i byen (Hamburg eller Odense), skal I finde 3 unikke eksempler på typografi der ikke fungerer i samspillet med budskabet, virksomheden eller en tredje grund. De 3 eksempler skal uploades på jeres procesportfolio, med ​faglige​ begrundelser for jeres konstruktive kritik, samt forslag til forbedringer.

Jeg vil først fortælle lidt om de forskellige trin man kan anvende, når man snakker om typografi og dernæst vil mine 3 eksempler komme.

Hvis man ønsker at se mine eksempler med det samme, anbefales det at rulle ned til afsnittet, ‘Mit første eksempel’.

Typografi; Når man snakker typografi snakker man fonts,- (altså skrifttyper), stil, tekstens udseende og opsætning. Det kan også referer til kunsten at arbejde med tekst.Typografi er overalt, i bøger vi læser, på hjemmesider vi besøger og kreerer, selv i hverdagslivet, på skilte vi går forbi og selv på morgenmads produkter.

Serif/Sans Serif;  De to hoved kategorier for fonts er Serif og sans serif. De kan kombineres sammen for at skabe kontrast i teksten.

  • Serif; er de ornamentale/dekorative streger for enden af bogstaverne, som alle serif fonts har. Serif fonts er bedst til tunge tekst bøger, fordi de hurtigt guider deres læsers øjne fra bogstav til bogstav.
  • Sans serif; betyder uden serif, altså det modsatte af serif,- ingen derkorative streger for enden. Sans serif er den bedste tekst til online/web tekst, fordi den kan blende i pixelsne på skærmen, dog kan sidens titel være en undtagelse, da den typisk har en større font størelse og det kan serif nogle gange vise bedre.

Typografi kan inddeles i 5 grupper; Hierarchy, Weight, Tracking, Leading og Kerning.

  • Hierarchy; Det er vigtigt at finde ud af hvordan strukturen skal være hele vejen igennem. Tænke over hvad det første bruger skal få øje på, om headlineren skal være stor eller bare almindelig. Man skal sørge for billeder og tekst ikke konkurrere med hinanden og fjerne fokus. Hvis man laver et logisk hierarki i sit design, bliver det automatisk nemt for brugeren at scanne og læse det.
  • Weight; kan komme i forskellige former som, lys, tynd, normal, medium, dristig, tung eller sort. Hver af disse refererer til tykkelsen af bogstaverne. Hvis man kombinere dem rigtig vil det også kunne hjælpe på hierarkiet i designet.
  • Tracking; er rummet imellem bogstaverne i et stykke tekst og kan beskrives som enten, løs eller tæt. Løst tracking er når der er meget mellemrum imellem bogstaverne. Tæt tracking er når bogstaverne står tæt sammen. Man burde kigge på hele billedet/siden når man skal beslutte sig for hvilken type man vil gå med.
  • Leading; Er hvor hurtigt man vil lede brugen igennem teksten. Hvis der er meget hvidt/mellemrum omkring teksten kan det nedsætte farten på brugerens læsehastighed, når teksten står mere kompakt og der er mindre hvidt/mellemrum imellem teksten kan det får brugeren til at læse det hurtigt igennem,
  • Kerning; er selve mellemrummet imellem bogstaverne, tal og andre tegn. Har man brugt den rigtig mængde kern, kan det få brugerens øjne til at scanne produktet og flyve nemt igennem det uden at blive distraheret, irriteret eller forvirret over designet.

Mit første eksempel; er menukortet fra; Stjerne Pizzari&Grill. Her kigger vi specielt på deres logo. Selve fonten pizzariaet har valgt skifter efter Stjerne Pizza, og har ikke længere det samme hak i sig fra, ria&Grill. Samtidig har de valgt en grøn farve som skyggefarven på bogstaverne, og den skaber ikke nok kontrast til at brugeren forstår hvad der skal stå. Det ligner også at de har kopiret det ind to gange ovenpå hinanden og det virker mere forvirrende end noget andet. De to røde streger der er lagt både oven og under logoet virker sammentrykt. Den leading der er blevet brugt skulle have til formål, at få brugeren til at scanne det hurtigt igennem. Men ved at den er blevet tæt istedet for løs og deres brug af kern, altså mellemrummet imellem bogstaverne, gør at der ikke rigtig er plads til det enkelte bogstav og det hele bliver for sammentrykt. Hverken deres burg af kontrast eller repetition gør det let for brugeren/læseren at komme igennem deres produkt.

Jeg har taget et billede for at demonstrere, hvordan deres menu kort ser ud, i forhold til deres flyers. Deres logo fungere bedre på menu kortet da kontrasten står stærkere, end på flyeren, hvor det forsvinder væk og bliver forvirrende at kigge på. Men problemet er der stadig på begge.

Løsningforslaget; lyder på at ændre deres font, det kunne eventuelt være fonten Milonga og ændre på deres weight, traking og kern. Giv deres bogstaver mere plads, og lad bogstaverne fremstå enkle. Skab større kontrast, eventuelt lad den grønne farve, (skygge/baggrundsfarven) om til sort.

Mit andet eksempel; er menukortet fra; Onkel´s Pizza. Problemet jeg vil hentyde til her, er deres brug af hierarki og tracking. I bunden af menukortet ser det ud som om facebook logoet og restaurantens information omkring, “Der tages forbehold for trykfejl og prisændringer”, kæmper om pladsen. Menukortet er i forvejen tæt pakket med en masse fonts, så deres leading (også kaldet letter spacing) er lavet som om man skal speed-reade igennem. Det vil sige du kan hurtig miste overblikket og miste lysten til at læse videre. Kontrasten imellem hvid og sort kommer ikke stærkt igennem, den hvide domminere og den sorte bliver ulæselig.

Løsningsforslag; ændre på hierarkiet Så hverken billed eller tekst skal kæmpe om pladsen. Minimere facebook logoet, så den ikke fjerner fokus fra hovedoverskrifterne, eventuelt flytte “trykfejl”-sætning, ned i footeren i det hvide felt. Skab bedre tracking, så hele menukortet ikke står så tæt, det vil sige gøre det mere rumligt og overskueligt. Sørge for der er forskellig weight igennem fonten, så navne og ingredienser ikke står så kompakt.

Mit tredje eksempel; er menukortet fra; Choice Spisehus. Her er der blevet gjort brug af alt for mange forskellige fonts. De kører for det meste med right alignment, det vil sige tesketen starter altid ud fra venstre, men hvis vi kigger på deres åbningstider, er det pludselig placeret i en center alignment med alt for meget tracking imellem mandag og lukket. Det virker forvirrende og distraherer læseren øjne. Billederne bag ‘menukort’ provokere læserens øjne, farvevalget på bogstaverne giver ikke kontrast nok. Den sorte farve forsvinder væk i billederne og det fremstår alt for gnideret og uoverskueligt.

Løsningsforslag; Vælge et billede der skal komplimentere deres valg af font på forsiden. Skær ned på brugen af forskellige font, så der kun er to forskellige der kan give god kontrast til hinanden. Farve valget kommer også til at blive skåret ned til 3, sort, rød og hvid. Altså gøre brug af repetiton så deres image fremstår stærkt og ikke lige så rodet. Til sidst sørge for deres åbningstider information står samlet, gøre brug af jusitied alignment og skære ned på brugen af tracking, så det hele står skarpt.

Skriv et svar

Luk menu