Platt design och the Zune legacy

Skeumorphisk design jämfört med platt design

Skeumorphisk design av Safari-ikonen jämfört med platt design från http://appicns.com/

Vi ska titta närmare på vad platt design är i den här artikeln. Vad finns det för samband mellan det latinska namnet för Schweiz, Berlin 1928 och Microsofts hånade iPod-kopia Zune. Platt design?

Med iOS7 och Windows 8 har den ”platta” trenden inom digital design blivit mainstream. Det här är förmodligen inte den första texten du läser om platt design, på engelska kallat ”flat design”. Men som alltid är det bra att sätta in saker i ett sammanhang för att bättre förstå dem genom att titta på den historiska bakgrunden. I bästa fall hjälper det dig att fatta bättre beslut om vilka designval du ska göra och i sämsta fall är det 10 minuters underhållande läsning.

Flat design UI Kit

Flat design UI Kit från http://www.webdesignerdepot.com/2013/05/flat-ui-kit-free-download/

Platt design kan tyckas vara ny och spännande och det är onekligen en stil som spritt sig snabbt. Men egentligen är platt design inget nytt om man blickar tillbaka genom designhistorien. Platt design har starka influenser från både det som kallas schweizisk typografisk stil och minimalismen. Stilen är i grund och botten en digital reinkarnation av dessa båda riktningar inom trycksaksdesign.

Var har platt design sitt ursprung?

Nästan allting vi ser på webben eller andra digitala medier har sitt ursprung i tryckta medier. Det är inte helt enkelt att avgöra i exakt vilken stil dagens platta design har sitt ursprung, men det finns ett par perioder av design och konst som framstår som extra tydliga förebilder och inspirationskällor.

Schweizisk typografisk stil

Tidskriften Neue Grafik från juli 1959

Tidskriften Neue Grafik från juli 1959. Källa: http://www.studyblue.com/notes/note/n/the-swiss-style–international-style-in-europe/deck/6859781

Kärt barn har många namn: Schweizisk typografisk stil (eng Swiss Style) kallas ibland även International Typographic Style och har i sin tur sitt ursprung i den rörelse som kallas den nya typografin som grundades av Jan Tschichold. Stilen manifesterades i boken med samma namn: Die neue Typographie, Ein Handbuch für zeitgemäss Schaffende, Berlin, Verlag des Bildungsverbandes der Deutschen Buchdrucker, 1928. Den nya typografin och den schweiziska typografiska stilen var dominerande under 1940- och 1950-talen. 

Typiskt exempel på schweizisk typografisk stil.

Typiskt exempel på schweizisk typografisk stil. Källa: http://www.studyblue.com/notes/note/n/the-swiss-style–international-style-in-europe/deck/6859781

Kännetecknande för stilen är konsekvent och sträng användning av rutnät med stora tomma utrymmen och groteska (moderna) teckensnitt. Exempel på grotesker från den här perioden är t ex Helvetica, Frutiger och Gill Sans. Den schweiziska typografiska stilen bygger ofta på kombinationen av en generöst tilltagen bild med enkel eller minimalistisk typografi.

Helvetica är det extremt spridda och populära teckensnittet från 1957 som användes på i princip allting hela tiden. Men ordet helvetica är även det latinska ordet för “schweizisk” eller schweizare. Antagligen är det ett av skälen till att stilen kallas schweizisk, även om den lika mycket härstammar från Tyskland. 

Minimalistisk Design

Minimalistisk deisgn på skivomslag från Command Records.

Minimalistisk design på skivomslag från Command Records. Källa: http://dhtinshakerheights.blogspot.se/2013/03/command-album-covers.html

En annan stilriktning som starkt influerat dagens platta design är minimalismen. Ibland kallas dagens platta design t o m för minimalism, men ordet betecknar en stilriktning som var populär långt innan webben fanns. Minimalism har sitt ursprung i arkitektur, bildkonst och design.

Minimalism har en lång historia inom olika uttrycksformer, men de delar av minimalismen som påverkat platt design är främst design och bildkonst. Kännetecknande för minimalism är att stilen skalar bort i princip allting och endast lämnar det mest nödvändiga. Stilen domineras av geometriska former, få element, starka färger och rena linjer.

Ett av minimalismen mest emblematiska konstverk är förmodligen Yves Kleins monokroma blå. 

Yves Klein: Blue

Yves Klein: Blue

Det är inget vågat påstående att säga att dagens platta design är starkt influerad av schweizisk typografisk stil och minimalism.

Platt designs framväxt i digitala medier

Historien upprepar sig som bekant, och detsamma gäller trenden med platt design som vi upplever just nu. Som vi sett ovan, så kan platt design spåras tillbaka till åtminstone 1920-talet och designstilar som påverkar vår nuvarande tillämpning av platt design.

Det finns säkert många designers som självständigt sökt sig fram till det här nya plattare formspråket när de skapat webbplatser och appar, men det är tydligt att Microsoft och Apple har haft stor betydelse för att göra platt design så populärt och dominerande de senaste åren.

Microsoft och Metro Design

Microsofts användning av platt design började med mediaspelaren Zune som släpptes i slutet av 2006 i ett försök att konkurrera med Apples populära iPod. Zune föll platt och var ett fiasko, men med det grafiska gränssnittet satte Microsoft en boll i rullning som leder fram till dagens platta och typografibaserade design.

Microsoft Zune

Microsoft Zune (2006) floppade som musikspelare, men det grafiska gränssnittet blev vinnande och stakade ut riktningen för Microsofts framtida produkter.

Det grafiska gränssnittet för Zune hade en för vid den tiden unik stil med fokus typografi och stora bilder. Texten bestod huvudsakligen gemener (små bokstäver) i relativt stora storlekar och det fanns ett generöst användande av tomrum i layouten. Den mjukvara som följde med spelaren för synkronisering med datorn följde samma designstil som spelaren, vilket gav en Zune en enhetlig användarupplevelse.

Designstilen för Zunes mjukvara skiljde sig dramatiskt från övrig mjukvara som Microsoft gjorde vid den tidpunkten. När Microsoft släppte Windows Phone 7 i oktober 2010 fortsatte man att använda sig av det som varit bra i Zune visuella formspråk och utvecklade det ytterligare. Känslan i Windows Phone 7:s mjukvara präglades av stora plattor i ett rutsystem, med klara färger  och enkel sans-serif typografi. Ikonerna var enkla, platta och saknade skuggning eller 3D-känsla. Stilen kallades Metro av Microsoft och blev väldigt populär.

Metro

Microsofts “Metro” gränssnitt (som inte längre kallas Metro av oklara skäl).

I Windows 8 fortsatte Microsoft att använda samma designprinciper: stränga rutmönster, raka kanter, klara färger, sans-serif-typografi och bakgrundsbilder. Stilen används numera av Microsoft i nästan alla produkter, exempelvis Xbox och Microsofts webbplats. 

Skeuomorphism (realistiska designinslag) dör

En tidig version av Mac OS. Med realistiska designinslag (skeumorphism) försökte man överbrygga glappet mellan människor och maskin.

En tidig version av Mac OS. Troligtvis från 1984. Med realistiska designinslag (skeumorphism) försökte man överbrygga glappet mellan människor och maskin.

Apple var bland de första att använda skeumorphism, en designteknik som försöker skapa element som påminner om den verkliga världen genom att likna ett verkligt material som läder eller metall, eller ett verkligt ting som t ex en kompass, ett frimärke eller en kalender. Hela metaforen för hur man interagerar med en dator stammar ur skeumorphism: mappar för att ha filer i, en papperskorg för att kasta filer och någon slags dokument med ett hundöra för en word-fil.

När den urpsrungliga iPhone:n lanserades var det en ny paradigm att lansera en produkt som i princip helt saknade knappar. För att få användarna att “våga” eller förstå att de skulle trycka på pekskärmens glas användes extrem skeumorphism. Med skuggning, gloss, läder och ikoner som liknande verkliga ting ville man göra ikonerna lättförståeliga och inbjudande. Under arbetet med iOS 7 ansåg man att användarna vid det här laget var förtrogna med konceptet att trycka på en glasskiva istället för fysiska knappar att de realistiska designinslagen inte längre behövdes.

Över en natt och som en shock för många användare övergav Apple skeumorphism helt och hållet med introduktionen av iOS 7 sommaren 2013.

iOS 6 jämfört med iOS 7

iOS 6 jämfört med iOS 7

Eftersom Apples användare är hängivna och en stor grupp är s k  ”early adaptors” gjorde iOS 7 platta design stilriktningen ännu populärare och mer spridd än den redan var nästan ögonblickligen.

Det som Apple gör har ofta en stark inverkan på designers. Så när Apple övergick till platt design, blev skeumorphism nästan ögonblickligen nattstånden och massvis av webbplatser och appar som använde realistiska designinslag skaffade sig en ny design snabbt.

Det märks tydligast i alla de olika iPhone-appar som med kort varsel fick ett nytt utseende för att harmoniera bättre med iOS 7 – alla följer den platta design som präglar resten systemet.

Responsive design

En viktig faktor till varför platt design har blivit så populärt senaste åren är framväxten av responsive design. I takt med att de enheter som används för att konsumera webbinnehåll blir fler och mer varierande i skärmstorlek fungerar traditionell webbdesign allt sämre. Webbdesign med fasta bredder, bakgrundsmönster, skuggningar och fasta bildformat fungerar inte särskilt väl när designen behöver anpassas till olika format som en telefon eller en widescreen-TV.

Med platt design fungerar en webbdesign oftast effektivare eftersom det innebär att det blir lättare att skala och omdisponera elementen i en layout. En layout som bygger på typografi och strikta rutsystem är lättare att omdisponera än en som bygger på bitmapbilder med textur och skuggningar. Dessutom blir innehållet lättare och kan laddas snabbare, vilket är en viktig faktor för mobila enheter. 

Eftersom skärmarna i allmänhet även får allt högre upplösning och kräver skarpare bilder blir det lättare att åstadkomma ett bra resultat (kort laddningstid) genom att använda ett formspråk som bygger på typografi, färger och geometriska former, än med ett skeumorphiskt formspråk som försöker emulera verkliga ting. För att göra skeumorphiska stilelement behövs i allmänhet bilder skapade i Photoshop eller liknande program. En platt design kan i allt väsentligt skapas med HTML, CSS och webfonts vilket kräver färre resurser och ger mindre datamängd.

Platt design

Platt design “Flat UI Kit PSD #1” av http://dribbble.com/rikitanone

Framtiden för platt design?

Fashions fade, style is eternal.
Yves Saint Laurent

Trender och stilar inom design kommer och går. Först är de nya och fräscha, sedan får de en uppgång och spridning så att de blir dominerande och sedan faller de gradvis undan och ersätts av något nytt. Design är alltid en pendelrörelse mellan komplexitet och enkelhet. 

Det finns uppenbara problem och brister med platt design. Ett sådant problem är t ex om skillnaden på klickbara och ej klickbara element försvinner helt eller blir för liten. 

Är platt design dåligt för användbarheten? Folk är vana vid de klichéartade visuella metaforerna från traditionella skeumorphiska gränssnitt. 

Även de för vilka man inte behöver berätta att man kan ’trycka’ på saker på en webbsida kan få svårigheter ibland. En platt rektangel berättar inte ’tryck på mig’ på samma sätt som en tredimensionell knapp.
VanseoDesign.com (författarens övers.)

Men djup är inte det enda sättet att berätta att något är tredimensionellt. Färg, form och placering är andra metoder att underlätta användbarheten. Men om platt design görs på fel sätt, hjälper det inte att kompensera med färger eller former.

Users have come to expect actionable items in the design to look different to static items.  In other words, something that they can click, toggle or slide should look different to something that they can’t.
KatherineBarrow.com

"Long shadow" design

“Long shadow” design är en trend i kölvattnet på platt design, som börjar utforska “långa skuggor” som ett sätt att få tillbaka djupet i platt design. Pendeln rör sig åt andra hållet igen. http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/

Använt på rätt sätt är platt design och sträng typografi uppfriskande, men innebär det att användandet av bakgrundsskuggor och övertoningar helt kommer att försvinna? Nej, de bästa exemplen på fungerande “platt design” balanserar det helt platta med försiktig användning av skuggor och övertoningar. Platt design är inte en lösning för allt – ingen stil är det. Allteftersom designers fortsätter experimentera och utveckla stilen kommer något nytt att växa fram och ersätta platt design.

Källor:
http://de.wikipedia.org/wiki/Jan_Tschichold
http://www.pragermicrosystems.com/blog/web-design/flat-design/
http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/
http://thenextweb.com/dd/2014/03/19/history-flat-design-efficiency-minimalism-made-digital-world-flat/1/
http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/
http://www.hongkiat.com/blog/flat-design-resources/