Mediedesign grund MTA VT17 Inlämningsuppgift Grafiskt designdokument Emma Lindell hej@emmalindell.com
INNEHÅLLSFÖRTECKNING 1. GRAFISKT DESIGNEXEMPEL 1. Grafiskt designexempel 3 1.1 Fungerande designexempel 3 1.2 Icke fungerande designexempel 4 2. Typografi 5 2.1 Synlig och osynlig typografi 5 2.2 Typografiska begrepp 6 2.3 Typografi enligt Bo Bergström 7 3. Bild och färg 8 3.1 Funktionell och icke-funktionell 8 3.2 Funktionell färg 9 4. Typografi och layout 10 4.1 Förbättrad läsbarhet 11 5. Layout 12 5.1 Publiceringskanaler 12 6. Typografi och layout i designdokumentet 13 6.1 Tillämpning av layout 13 6.2 Typsnitt i designdokument 14 1.1 Fungerande designexempel Jag har valt ett fungerande designexempel i form av ett informationsblad från Södertörns Feministiska Forum. Till min hjälp har jag använt mig av The Non-Designer s Design Book av Robin Williams och Effektiv Visuell Kommunikation av Bo Bergström. Anledningen till att detta är ett bättre designexempel är av flera anledningar. Till att börja med använder sig formgivaren av repetition. Överst på bladet används upprepad grafik av samma motiv som ramar in den större centrerade logotypen. Grafiken på bägge sidor av logotypen har samma mönster och färger vilket gör det enhetligt (Williams 2015, s. 88). Texten har bra och tydlig styckesindelning vilket ökar läsbarheten. Det sista stycket är kortare än de ovan vilket underlättar för ögat (Bergström 2012, s. 136). Brödtexten är också vänsterställd vilket skapar en osynlig linje som är lättare för ögat att läsa. Vårt öga dras till varma toner framför kalla toner (Williams 2015, s. 208). Både den rosa bakgrunden och grafiken är en varm rosa färg men i olika nyanser som passar varandra. Den rosa tonen i logotyperna överst på bilden är mörkare än bakgrunden vilket skapar en kontrast som intresserar läsaren. Rubriken och brödtexten är av två olika typsnitt och rubriken endast av versaler vilket skapar ytterligare kontrast i bilden, som i sin tur förstärker budskapet ytterligare (Williams 2015, s. 85-89). Figur 1: Egen bild. 7. Referenslista 15 7.1 Bildkällor 15 7.2 Litteratur 16 3
2. TYPOGRAFI 1.2 Icke fungerande designexempel På mitt icke-fungerande exempel har jag valt ett informationsblad från Södertörns Förenade Ekonomer. Till att börja med är det alldeles för mycket text på bladet. Det krävs mycket av läsaren att förstå budskapet och struktur saknas. Även färgerna i bilden är för många och en del text är också placerad ovanpå de tre mindre bilderna högst upp på bladet. Figur 1: Egen bild. I bakgrunden gömmer sig en suddig blå bild som inte går att urskilja vad den föreställer. Formgivaren har valt att använda tre olika typer av grafik i olika logotyper för att framställa Södertörn högskolas byggnad på olika sätt, vilket kan förvirra läsaren. Något man som läsare också kan ha svårt för är placeringen av elementen i bilden. Detta tar Williams upp i The Non-Designer s Design Book. Han nämner att läsaren kan ha svårt att veta när den tolkat budskapet korrekt, då det inte finns någon tydlig ordning var i bilden man börjar och slutar läsa (2015, s. 16-17). Han menar även på att om vi grupperar element som tillhör varandra blir det lättare för läsaren att tolka rätt budskap från början (2015, s. 86). Formgivaren har även valt att använda sig av flertalet sponsorer i form av logotyper längre ner i bilden som är av olika färger och typsnitt. Detta ger bilden ytterligare kontrast och gör helheten plottrigare. 2.1 Synlig och osynlig typografi Bo Bergström förklarar begreppen synlig typografi samt osynlig typografi i Effektiv Visuell Kommunikation (2012, s. 118-121). Nedan har jag sammanfattat kort vad han tagit upp i boken samt lagt till illustrationer till bägge begreppen för att förtydliga det hela. Bergström menar på att synlig typografi också kan kallas för berättande typografi. Detta är då bokstäverna blir delar av en bild som tillsammans förmedlar och förstärker ett budskap. De kan förekomma på många olika sätt, precis som vi människor. Bokstäver är bra på att skapa stämning och berättar något genom att de uppträder i olika karaktärer. De kan vara tjocka, smala, knottriga, fluffiga, osäkra och tillgjorda. Eller trevande, rediga, eleganta och enkla. Valet av typografi bör göras utifrån de kommunikativa kraven. Enligt Bergström gör sig synlig typografi bäst i uttrycksfulla och fria sammanhang. Osynlig typografi förklarar Bergström som att förmedla något utan att tydligt behöva skriva ut det. Osynlig typografi gör sig bäst i pedagogiska, informativa och litterära sammanhang. När man använder sig av denna typ av typografi strävar man efter att utförandet inte skall ta uppmärksamhet från innehållet. Då skapar formgivaren en länk mellan avsändare och mottagare i tysthet. Ett tydligt exempel på detta skulle kunna vara en sida i en skönlitterär bok, då syftet med den osynliga typografin är att bilder skall förmedlas till läsaren och inte förekomma på boksidan. Bergström tar även upp att det kan vara bra att blanda både synlig och osynlig typografi i en och samma produktion. Ibland kan det krävas att båda ingår för ett bättre utförande (2012, s. 121-122). 4 1. Synlig typografi. (Pixabay.com) 5 2. Osynlig typografi. (Pixabay.com)
Onsequatus, sequi ut mo con rest, cus poruptis ex ea voluptate volenvoluptate sinctotatur, qui volorec eaquas ment, nisim utatur as nest ni odignie nienimi, untias exerest, sa tota cullecus per. Widow. Orphan. Cus, exerrum autet eum ernam faciti con nosam ad endae maio eosam recto tem rem. Itaturi bearumquo quos sum experuntendae. 2.2 Typografiska begrepp När det kommer till layout och design är läsbarheten viktig och små ändringar kan göra stor skillnad. I boken The Non-Designer s Design Book förklarar Robin Williams begreppen orphan och widow som traditionella typografiska termer. Dessa menar Williams skall undvikas i texter för att underlätta för läsaren. Jag har illustrerat båda begreppen ovan och markerat orden med fetstil för att förtydliga. Widow är då ett ord som ofta är färre än sju bokstäver hamnar ensam på sista raden i ett stycke. Vad som klassas ännu värre är då ett ord är uppdelat i två ord med bindestreck emellan, och den sista delen av ordet bildar en ensam rad i slutet av stycket. Det kallar Williams för en värre widow och försvårar det ytterligare för läsaren att tolka texten. Då ett ord eller en del av ett ord i en mening hamnar på nästa kolumn eller sida i en text kallas för orphan. Williams menar på att både widow och orphan skall undvikas. Om du som skribent råkat få en widow eller orphan i din text finns det flera sätt att lösa detta på. Du kan försöka skriva om din text, ta bort ett par ord eller ändra avståndet mellan orden. Om inte det fungerar kan du prova att justera bredden på dina mariginaler för att placera orden på en och samma rad. Många blandar ihop begreppen widow och orphan och menar att det syftar på samma sak. De är rätt lika i praktiken men 2.3 Typografi enligt Bo Bergström Typografi är läran om bokstavsformerna, hur de används och var de förekommer. Bokstäver som bildar ord och meningar uppträder på många olika sätt och förmedlar bland annat tankar och känslor. Trots att vi endast har 29 bokstäver i alfabetet går de att använda i tusentals kombinationer och tillsammans bildar de ord och meningar. För att ta reda på hur bokstäverna skapades från första början behöver vi gå flera tusen år tillbaka i tiden. Enkla bilder har hittats i form av bland annat solar och djur i utgrävningar på olika platser i världen. Dessa bilder blev en start för att kunna identifiera föremålen, som sedermera blev stavelser och kunde uttalas. I denna revolutionerade utveckling var kilskrift och hieroglyfer en viktig del. Man hittade sätt att föra vidare kunskap på genom att anteckna tankar och observationer på bland annat papyrus och andra underlag. Genom detta kunde man alltid gå tillbaka till det som tidigare antecknats och således lära ut kunskap till sina barn. Det första skriftspråket uppkom i Fenicien cirka 1500 år före Kristus. Det var helt alfabetiskt och byggde på ljud. Alfabetet utvecklades därefter vidare av de gamla grekerna. Vokaler tillfördes och man införde bruket att läsa från vänster till höger. Skriftspråket har genomgått flera utvecklingsfaser och under dessa århundranden har ett flertal skrifter fötts. Några av dem är romersk kapitalskrift, uncialskrift, halvuncialskrift, humanistskrift samt gotisk skrift. Idag, cirka 500 år senare, används skrift i princip överallt. Den digitala tekniken har tagit fart och vi hittar nu bokstäver var vi än vänder oss (Bergström 2012, s. 122-123). Bergström tar även upp stark typografi som handlar om hur man förstärker ord eller avsnitt. Det kan göras genom olika typografiska uttrycksmedel som innefattar rubriker, optisk utjämning och mellanrubriker. Man kan exempelvis använda sig av en mellanrubrik av större storlek än den som finns i brödtexten för att förstärka budskapet. Viktigt att komma ihåg är att inte förstärka för många avsnitt då det kan bli svårt för läsaren om fokus ligger på för många delar av texten (2012, s. 136). 6 7
3. BILD OCH FÄRG 3.1 Funktionell och icke-funktionell I Effektiv Visuell Kommunikation förklarar Bergström skillnaden mellan funktionell och icke-funktionell färg. Designern skulle uttrycka det som att funktionell färg förbättrar och stöder produktens kommunikativa och fysiska funktioner. Varumärken kan såklart inte ta patent på en viss färg för det skulle aldrig fungera. Coca-Cola har en klar röd färg och det är ett av världens starkaste varumärken. Oavsett om ett konkurrerande företag skulle använda sig av samma röda färg skulle de ha svårt att kriga om den marknadsledande förstaplatsen. I läskedrycksbranschen är röd en funktionell färg, men om den skulle förekomma i exempelvis en tidskrift så signalerar den istället viktiga nyheter eller bokslutsrapporter (Bergström 2012, s. 256). Om man vill skapa stämning med en färg kan man välja att använda sig av varma eller kalla färger. Det går också att använda funktionell färg då man vill informera, strukturera eller pedagogisera ett budskap (Bergström 2012, s. 263). En icke-funktionell färg är till skillnad från en funktionell färg ett kosmetiskt tillägg för att förföra. När detta används blir mottagaren ofta förvirrad av fel färgsignaler (Bergström 2012, s. 256). 3.2 Funktionell färg 1. Attrahera För att attrahera mottagaren i en bild kan färger användas, exempelvis genom större grafiska element i avvikande färger. Dessa är lätta att uppmärksamma och förmedlar en känsla. En gul färg strålar ut över alla gränser och blå drar sig undan. Röd är en livlig och målmedveten färg, medan grön är passiv och rofylld (Bergström 2012, s. 257). 2. Skapa stämning Vi kan skapa stämning i en bild på olika sätt. Detta kan vi göra genom att välja rätt färger. Rött och gult är lätta färger som skapar en upprymd stämning i en bild, medan mörka blåa eller gröna färger förmedlar andra känslor. Färg kan också ha en symbolisk betydelse. Många förknippar röd färg med passion och kärlek. Vad som dock är viktigt att veta är att färgers betydelser skiljer sig mellan olika kulturer (Bergström 2012, s. 257). 3. Informera Färg används också för att förmedla information i olika sammanhang. Det röda mjölkpaketet varnar för den höga fetthalten, eller när bullarna i ugnen blir gyllenbruna är det dags för fika. På sjukhus har färgerna lite annan innebörd. Där betyder rött att något är smutsigt. Gult innebär infektion och blått indikerar att något är rent (Bergström 2012, s. 257). 4. Strukturera Genom att strukturera en text kan färg används på flera sätt. Formgivaren kan använda färg på olika avsnitt i exempelvis en årsredovisning eller en krönika genom att ge utvalda element enhetliga färger. I en tidskrift används färg ofta så att läsaren ska hitta rätt. Röd färg signalerar till exempel att det handlar om en krönika, gul om livsstil och blå om reportage (Bergström 2012, s. 257). 1. Attrahera (Pixabay.com) 2. Skapa stämning (Pixabay.com) 3. Informera (Pixabay.com) 4. Strukturera (Pixabay.com) 8 5. Pedagogisera Det finns många bra anledningar att använda sig av färg. En av dem kan vara när man vill pedagogisera. Möjligheten att lära ut ökar avsevärt då färg tillsätts. Det inbjuder till läsning och färgaccenter förtydligar, understryker och särskiljer delar av innehållet (Bergström 2012, s. 257). 9 5. Pedagogisera (Pixabay.com)
4. TYPOGRAFI OCH LAYOUT 4.1 Förbättrad läsbarhet Jag har valt att ändra om annonsen på flera sätt. Till att börja med har jag använt mig av en ljusorange bakgrund. Typsnittet jag har valt att använda är Arial Black i rubriken och Arial i resten av brödtexten. Detta eftersom jag väljer att förstärka endast vissa avsnitt för att inte förvirra läsaren. I annonsen har jag valt att använda mig av färgen lila i kombination med den varma orangea bakgrunden. För att öka skapa starkare kontraster i bilden har jag valt helt andra färger än de som fanns i den ursprungliga bilden. Figur 1. Herr Musa Spåman interation marabout Spåman, medium och spirituell healer Jag kan hjälpa till att lösa alla typer av problem T.ex. kärlek, hälsa, familjeproblem, affär, juridiska frågor, finansiella transaktioner. Du får veta hur du skyddar dig själv och din familj från fienden och hur du får dina nära och kära tillbaka in i ditt liv. Talar svenska och engelska. Ring och boka ett möte! Tel: 01-2345678 Mobil: 070-123456789 För att göra bilden mer enhetlig har jag använt mig av repetition i form av grafik i de diagonala hörnen. De är formade som ovala och runda ringar i olika toner av lila. Det har jag gjort eftersom jag inte vill röra till det för läsaren med för mycket intryck (Williams 2015, s. 88). Jag har ändrat placeringen på texten så att den är vänsterställd istället för att ha den centrerad. Detta för att bilda en osynlig linje längsmed texten så att den blir lättare för ögat att följa (Williams 2015, s. 87). Jag har även delat in texten i olika stycken för att skapa mer luft i bilden och för att skapa läsbarheten. Figur 2. 10 11
5. LAYOUT 6. TYPOGRAFI OCH LAYOUT I DESIGNDOKUMENTET Figur 1. Illustration webbsida. 5.1 Publiceringskanaler Figur 2. Illustration mobil webbsida. Jag har valt att titta närmre på skillnader och likheter mellan webbsida på dator (figur 1) och mobil webbsida från min smartphone (figur 2). Den hemsidan jag analyserat är startsidan på dn.se. När jag tittar på webbsidan via dator kan jag direkt se att sidans bilder är bredare för att de skall passa enheten korrekt. För att undvika tomrum på sidan och för att kunna öka läsbarheten använder sig DN:s utvecklare och formgivare av bra placering av text och bild. Genom att hålla sig till raka linjer ökar läsbarheten för mottagaren och budskapet når lättare fram. Detta är något Williams tar upp i The Non-Designer s Design Book. All text på sidan är vänsterställd och det underlättar för ögat att ha osynliga linjer att förhålla sig till (2015, s. 87). 6.1 Tillämpning av layout I mitt arbete har jag tillämpat layouten i Nordic Design Impact på flera sätt. Till att börja med har jag använt mig av samma tunna sofistikerade streck på sidorna av dokumentet. Dessa har jag valt att ha med på samtliga sidor, då repetition utgör ett enhetligt arbete. För att efterlikna layouten i Nordic Design Impact har jag även använt mig av överensstämmande mått på alla marginaler. Detta har jag gjort för att öka läsbarheten och för att få ett luftigare intryck i min design. Jag har genomgående använt mig av den ljusgröna färgen på grafik, bakgrunder, strecken som markerar sidans marginaler samt runt utvalda bildramar. De ljusgröna bakgrundsboxarna har jag också inspirerats av från layouten i Nordic Design Impact och lagt bakom vissa delar av min text. För att inte låta dessa ligga och sväva på den vita bakgrunden har jag även emellanåt applicerat ett kortare grönt streck mot marginalen. Detta förstärker sambandet med helheten av arbetet då avsnitt som är placerade nära varandra indikerar att de håller ihop (Williams 2015, s. 86). Jag har även valt att använda mig av endast versaler i mina underrubriker för att märka ut dessa avsnitt, precis som formgivaren använder sig av i layouten från Nordic Design Impact. På mitt försättsblad har jag också valt att ha med de två ljusgröna strecken för att markera ut förstasidans rubrik. När jag sedan jämför webbsidan via dator med en mobil hemsida via min smartphone (figur 2) ser jag att både bild och text anpassar sig efter den lilla skärmen. All text och bild har nu anpassat sig efter den mindre enheten och blivit både smalare och mindre. Något som fortfarande är sig likt är designen. Formgivarna har behållit sig av samtliga typsnitt, färger och bilder. Till skillnad från hemsidan via dator finns nu endast ett urval av innehållet med på den lilla skärmen. Detta eftersom man har tvingats anpassa hemsidan efter en liten skärm och då prioriteras den absolut viktigaste informationen (Wroblewski 2011, s. 19). På den mobila enheten finns heller inte lika många länkar eller reklamannonser att klicka på. 12 13
7. REFERENSER 6.2 Typsnitt i designdokument Försättsblad Arial, Regular, 20pt. Radavstånd 36. Rubrik på samtliga sidor Arial, Regular, 16pt, Radavstånd 19,2. Innehållsförteckning Arial, Regular, 14pt, Radavstånd 24. Underrubrik Times New Roman, Regular, 14pt, Radavstånd 16,8. Skriven i versaler. Brödtext Times New Roman, Regular, 11pt, Radavstånd 15 pt. Bildtext Times New Roman, Regular, 10pt, Radavstånd 12pt. Jag har valt att använda mig av max två typsnitt för att inte lägga för mycket fokus vid det. För att få arbetet enhetligt har jag genomgående använt mig av endast Arial och Times New Roman i olika storlekar. Jag har valt dessa typsnitt eftersom de är vanliga i annonser, böcker och tidningar och upplevs som lätta att läsa (Bergström 2012, s. 130). Då läsbarhet var ett nyckelord i denna uppgift har jag fokuserat på att hålla typsnittet så enkelt och rent som möjligt. Gällande radavståndet har jag använt mig av de automatiska inställningarna i Indesign, förutom i innehållsförteckningen där jag ville öka läsbarheten ytterligare. 7.1 Bildkällor S. 3 Figur 1: Egen bild, framsida Södertörns Feministiska Forum, upphovsrätt för bildens innehåll okänt, Stockholm 170305. S. 4 Figur 1: Egen bild, framsida Södertörns Förenade Ekonomer, upphovsrätt för bildens innehåll okänt, Stockholm 170305. S. 5 Figur 1: https://pixabay.com/sv/ja-nej-typografi- typ-textord-2069852/. Gordon Johnson. Public Domain. Figur 2: Pixabay. https://pixabay.com/sv/tidningen-pap per-skriv-ut-tryck-37782/. Upphovsman saknas. Public Domain. S. 9 Figur 1: https://pixabay.com/sv/ballonger-barnfärg-ballonger-1869790/. Upphovsman saknas. Public Domain. Figur 2: https://pixabay.com/sv/rose-röd-blommavictor-hugo-sommar-776966/. Patricia York. Public Domain. Figur 3: https://pixabay.com/en/hand-to-do-listcheck-strategy-565588/. Upphovsman saknas. Public Domain. Figur 4: https://pixabay.com/sv/digital-marknads föring-emarketing-1725340/. WDNet Studio. Upphovsman saknas. Public Domain. Figur 5: https://pixabay.com/sv/abakus-flervariabe lanalys-1866497/. Upphovsman saknas. Public Domain. S. 10 Figur 1: Original. Figur 2: Egen bild. S. 12 Figur 1: Egen illustration från DN.se förstasida, webbversion, 170310 Figur 2: Egen illustration från DN.se förstasida, mobil webbvesion, 170310 14 15
7.2 Litteratur Bergström, Bo. (2012). Effektiv Visuell Kommunikation: om nyheter, reklam och profilering i vår visuella kultur. 8. uppl. Stockholm: Carlsson Bokförlag. Williams, Robin. (2015.) The Non-Designer s Design Book. Design and typographic principles for the visual novice. Fourth Edition. San Francisco: Peachpit Press. Wroblewski, Luke. (2011). Mobile First. Sixth Edition. New York: A Book Apart. 16