Designmallar, processen

Min slutprodukt är tre olika mallar man kan använda sig av då man designar en tidlös design. Jag har valt att göra en säljande mall, en informativ mall och en portfoliomall.

Då jag har designat och byggt upp dessa mallar har jag tänkt på många av Dieter Rams punkter. Jag har valt att satsa mest på att få mina mallar användbara och långvariga. När jag tänkte på dessa punkter ville jag att mina mallar skall vara så lätta som möjligt för vem som helst annat att använda sig av, det enda man måste göra är att sätta in sin egen

26

text och bilder i mallen och strukturen hålls den samma. Mina mallar är designade att de är estetiska och att man skall bli intresserad av mallen.

För att en design skall fungera måste användaren förstå syftet med mallen. Både använ-daren och designern skall veta hur man navigerar sig fram på hemsidan och vad målet är.

Jag kommer självklart inte kunna bevisa om mallarna blir tidlösa och långvariga, men målet med mallarna är den. Med långvarig tänker jag att själva grunden på mallarna skall vara densamma genom tiden men att man kan justera småsaker under tidens gång. Till sist tänkte jag även på det Dieter Rams sa om att ”en bra design är så lite design som möjligt”. Jag har varit noga med att inte lägga till element som inte är nödvändiga för mina mallar.

Förutom att jag haft Dieter Rams tio punkter i bakhuvudet har jag även tänkt på det jag lärt mig om minimalistisk design och simpel design. Från de minimalistiska tankarna har jag tänkt mycket på de blanka utrymmena, som texten om ämnet säger så är det viktigt att ha mellanrum mellan de olika elementen i designen. Läsaren skall förstå vad ögat skall fokusera på och hemsidan skall inte se ut att ha för mycket information. (Kapitel 2.2) Förutom att jag har fokuserat på de blanka mellanrummen har jag även tänkt på att inte ha för många olika färger med i mallarna, utan jag har hållit mig till max tre olika. (Kapitel 2.3)

Det som jag också anser vara väldigt viktigt och en gemensam nämnare är att alla mal-larna fokuserar mycket på bilder. Bilder säger mer än tusen ord! Till sist vill jag påpeka att även om jag har valt att använda mig av vissa färger och typsnitt är det lätt för andra designers att byta ut färgerna och typsnitten till något som faller dem mera i smaken.

Jag tänker även att man lätt kan byte ut syftet i mallarna. Jag har till exempel valt att designa en informativ hemsida där studeranden kan ansöka om finansiellt stöd, men sidan kan även användas till andra syften.

27 4.1.1 Hur mallarna skiljer sig från varandra

Portfolio mall: Då jag designade denna mall använde jag mig av färgerna gul, vit, och svart som huvudfärger. Jag ville ha gul som bakgrundsfärg eftersom den färgen kopplas till nyfikenhet och spänning. (Kapitel 2.3) I mallen fokuserar jag mest på att man skall presentera sina arbeten och sina kunskaper, och till sist kommer information om personen i fråga. Landningssidan har en gul bakgrund och en centrerad svart text. Jag valde att designade hemsidan på det viset eftersom besökaren då direkt får ett hum om vem perso-nen bakom desigperso-nen är.

Följande del av hemsidan är en sammanfattning av personens kunskaper och erfarenheter.

Efter det kommer en sektion med 50/50 bild och text bredvid varandra, och de kommer tre gånger efter varandra. Dessa tre kolumner är till för att visa läsaren ens bästa arbeten.

Man kan klicka vidare sig på det man finner mest intressant. Jag har även designat hem-sidan så att man kan se vem/vilka företag personen i fråga har samarbetat med tidigare.

Till sist har jag valt att ha med presentation av designer och hur man kan få kontakt med den personen. Jag designade sidan så att det inte finns menyer utan i slutet av hemsidan har jag med en fotnot istället. Det kändes inte nödvändigt att ha med en meny eftersom sidan inte är lång och jag ville ha landningssidan stilren.

Figur 3: Skärmdump av Portfolio mallen.

28

Informativ mall: För att väcka läsarens intresse börjar sidan med en stor bild som passar till målgruppen för hemsidan, målgruppen i detta fall är studeranden. I denna mall har jag valt att inkludera en meny eftersom det kommer att finnas mer information här än i port-folio mallen. Jag anser då att man behöver kunna navigera sig lättare fram och tillbaka på sidan, på så sätt blir sidan mera användarvänlig. (Kapitel 2.2)

Efter det kommer det en kolumn med viktig information om vad hemsidan erbjuder. Den svarar på vad målet med hemsidan är och följande sektion svarar på vem som är målgrup-pen för hemsidan. Sidan kommer att avslutas med att man får se vad andra personer haft för åsikter och tankar om hemsidan. Där tänkte jag på vad Dieter Rams sagt om att sidan skall vara ärlig, man får fram personers ärliga åsikter. (Kapitel 2.1)

Figur 4: Skärmdump av Informativa mallen.

Säljande mall: I denna mall har jag använt mig av väldigt naturliga och harmoniska fär-ger, och med grått som huvudfärg. Jag ansåg att färgerna passade in i mallen eftersom färgen grå anses vara en professionell färg. (Kapitel 2.3) Fokus ligger på att sälja produk-ter och därför är bilderna väldigt stora och skarpa. Bilderna är viktigare än själva texten, vill man veta mera om produkten kan man klicka sig vidare.

Den första delen av hemsidan kommer att vara någonting som man vill framhäva, som till exempel säsongens nyheter. I följande sektion har jag satt till 1+3 bilder och där tänkte

29

jag på att även om bilderna är stora så har jag använt mig av blanka utrymmen mellan bilderna så att inte sidan skall se för ihop tryckt ut. (Kapitel 2.2) Efter bilderna har jag en fullbredd 50/50 sektion med stor bild och text om företaget. På slutet har jag satt till en prenumerationsknapp var man kan prenumererar på nyhetsbrev. Hemsidan avslutas med en fotnot med diskret kontaktinformation till företaget.

Figur 5: Skärmdump av Säljande mallen.

30 5 DISKUSSION

I början av arbetet presenterar jag min forskningsfråga som lyder ”Hur designa mallar till hemsidor med tidlös designprinciper som huvudtema?” Svaret på den frågan är att man skall tänka på Dieter Rams tio punkter. Där skriver han att man ska en innovativ design, sidan skall vara användbar, den skall även vara estetisk, förståbar, abstrakt, ärlig, långva-rig, genomtänkt, miljövänlig och till slut skall det vara så lite design som möjligt. Man skall inte tillägga onödiga element till sin design som till exempel animationer och GIFs.

Jag har kommit fram till att mina mallar passar bäst till startup företag eller små företag, eftersom de är designade med en simpel och minimalistisk design. Självklart kan stora företag som till exempel H&M och Apple använda sig av dem men det blir en utmaning att hålla sig till en minimalistisk design när de har så mycket innehåll på sina sidor. Det skulle bli ett allt för stort projekt för mig att ha dem som min målgrupp.

31 6 SLUTSATSER

Jag skulle egentligen börjat skriva mitt examensarbete under tiden som jag var på min 6 månaders praktik i Stockholm. Jag praktiserade på en webbyrå som fokuserar på att de-signa hemsidor till små och mellanstora företag. Därifrån hade jag fått in en vana att an-vända mig av företagets mallar och skapade hemsidor i snabb takt. Eftersom allt gick på löpande band där kanske jag inte hade tänkt mig att det skulle ta så lång tid att designa egna mallar nu när jag skulle göra allting på egen hand. På min praktikplats hade jag tillgång till alla mallarna och behövde bara fylla i dem med ny information som skulle passa till olika kunder. Under min praktik blev jag van att man skulle ha med många olika element på hemsidorna som skulle göra hemsidorna intressanta. Nu när jag har varit ”bun-den” till vissa regler har det varit en utmaning att ändra mitt tankesätt. Jag har varit tvungen att ha en debatt i mitt huvud om vad som verkligen är viktigt och vad som skall lämnas bort för att mina mallar skall vara tidlösa, minimalistiska och simpla.

Nu såhär i efterhand kan jag säga att jag inte hur mycket jobb det ligger bakom att designa en mall. Det är en stor utmaning och kräver mycket tid och eftertanke. Jag känner att jag gjorde lite fel i början av processen med att först försöka designa mallarna utan att ha tänkt igenom vad jag skulle ha med och varför jag skulle ha med vissa element. Det var frustrerande att sen komma fram till att jag måste radera stora delar av texten för de hade inget syfte och passade verkligen inte in i mitt examensarbete.

Det finns en del saker jag önskar jag skulle ha skrivit om och tagit reda på till detta arbete.

Till exempel kunde jag ha intervjuat etablerade designers och frågat dem deras åsikter om mina mallar. Vad fungerar och vad fungerar inte? Jag skulle även gärna ha gjort en gallup och se vem som skulle ha varit intresserade av mina mallar, skulle något företag ens vara intresserade av att köpa någon av mina mallar?

KÄLLOR

Anders., 2017, The Life and Works of Dieter Rams, Tillgänglig: https://www.an-dersnoren.se/themes/sullivan/the-life-and-works-of-dieter-rams/ Hämtad: 10.5.2020.

Axlid, H., 2005, Tidlös design oslagbar, Tillgänglig: https://www.gu.se/omuniversite-

tet/aktuellt/nyheter/detalj/kronikan---om-enkla--effektiva-och-sakra-produk-ter.cid118833 Hämtad 19.3.2020.

Bank, C., 2014, A quick trick to test your site´s visual hierarchy, Tillgänglig:

https://www.creativebloq.com/netmag/quick-trick-test-your-sites-visual-hierarchy-121413515 Hämtad: 21.5.2020.

Barry, P., 2020, Deconstructing Dieter Rams´ten principles for good design – part , Till-gänglig: https://uxdesign.cc/deconstructing-dieter-rams-ten-principles-for-good-design-part-1-1fc5bc2d1e51 Hämtad 26.4.2020.

Brunnström, L., 2018, Swedish design: a history, Bloomsbury Publishing, 91-96 s.

Candy, L., 2006, Practice Based Research: A Guide, Tillgänglig: https://www.re-

searchgate.net/profile/Linda_Candy/publication/257944497_Practice_Based_Re- search_A_Guide/links/004635266b7c4d1591000000/Practice-Based-Research-A-Guide.pdf Hämtad: 10.5.2020.

Cao, J., 2018, Taking Full Advantage of Minimalism in Web Design, Tillgänglig:

https://speckyboy.com/minimalism-web-design/ Hämtad: 9.4.2020.

Colborne, G., 2017, Simple and Usable Web, Mobile, and Interaction Design, Pearson, Kap 1, 7/17

Ellis, M., 2018, A brief history of graphic design, Tillgänglig: https://99de-signs.com/blog/design-history-movements/history-graphic-design/ Hämtad: 6.5.2020.

Finney, N., 2014, Timeless design, Tillgänglig: https://www.designindaba.com/ar-ticles/point-view/timeless-design Hämtad 19.3.2020.

Forsberg, C & Wengström Y., 2016, Att göra systematiska litteraturstudier: värdering analys och present, Natur Kultur Akademisk, 25-26 s.

Hustwit, G., 2015, Dieter Rams: If I could Do It Again, “I Would Not Want To Be A Designer, Tillgänglig: https://www.fastcompany.com/3043815/dieter-rams-if-i-could-do-it-again-i-would-not-want-to-be-a-designer Hämtad 25.4.2020.

Jones., S., 2014, The Psychological Benefits of Simple Design: Why Less Really is More, Tillgänglig: https://www.searchenginejournal.com/psychological-benefits-simple-de-sign-less-really/118906/ Hämtad: 24.5.2020.

Kotoric., The Past Is Still Present – An Overview of Timeless Design, Tillgänglig:

https://www.toptal.com/designers/ux/timeless-design Hämtad: 24.5.2020.

Kraynak, J. & Brannan A., 2010, Web design, second edition, Edinburgh gate, 14-16 s.

Moore, B., 2016, Timeless Design, Tillgänglig: https://medium.com/graphic-language/ti-meless-design-6dee7b6ba04a Hämtad: 6.5.2020.

Moran, K,. 2015, The Roots of Minimalism in Web Design, Tillgänglig:

https://www.nngroup.com/articles/roots-minimalism-web-design/ Hämtad: 24.5.2020.

Sean., 2018, Why Simple Website Design is the Best Website Design, Tillgänglig:

https://www.lyfemarketing.com/blog/simple-website-design/ Hämtad 7.5.2020.

SteelKiwi Inc, 2018, Best Practices for Minimalist Website Design, Tillgänglig:

https://medium.muz.li/best-practices-for-minimalist-website-design-9e8ea07e17c2 Hämtad: 5.5.2020.