Verden nådde toppen av designtrenden skeuomorfisme i 2012. En filosofi som brukes for å skape en gjenkjennelsesfaktor i produkter, slik som klikkelyden i mobilkameraet ditt, eller jukselommer på klær.
I programvare og på nettet, har skeuomorfisme tradisjonelt blitt brukt til å gi en kobling til den virkelige verdenen. Ikonene på skrivebordet ditt, slik som søppelbøtta, er et klassisk eksempel. Konseptet «skrivebordet» på datamaskiner er i seg selv et eksempel på skeuomorfisme.
Interaksjonsdesign, tjenestedesign, UX – hvorfor trenger vi alle begrepene?
Men det var ikke før iPhone og iPad dukket opp på midten av 2000-tallet at skeumorfisme virkelig nådde toppen. Med høyoppløste og fargerike skjermer kunne designere hos Apple og andre selskaper bade i inntrykk fra den virkelige verden. Notat-appen fikk en imitert skinn-innbinding, Newsstand-appen så ut som den hadde ekte trehyller med aviser og magasiner, og podkast-appen så ut som en radio.
Så kom flatt design året etter, i 2013, og rev ned hele skeuomorfismen. Nå skulle alt se flatt og digitalt ut. Apple byttet selv til flatt design i iOS 7 samme året, og selskap som Google og Facebook fulgte etter.
Skeumorfismestilen er nesten helt glemt, men heldigvis publiserte journalist Jessica Moon en liste over de 40 mest innovative UI-konseptene i 2012. Dette er et utvalg av de beste.
#1. Sidemenyer som kollapser
I 2012 var iPad platformen alle skulle bruke til internetting. Og du skulle helst jobbe i landsskapsmodus, selvsagt. Utfordringen var bare at skjermen på iPad ikke var så stor. De svære venstremenyene med ikon og tittel, som vi var vant til fra programmer på PC-ene, fikk rett og slett ikke plass.
Dialoggs - Collapsable Menu
The sidebar collapses with a click and will be sticky throughout the app :) Rolling over the icons while in collapsed mode will bring up a tooltip of sorts to tell you what section it is. Also, u'...
Derfor begynte designere å skissere sidemenyer som kunne kollapse, slik at bare ikonet var synlig.
En av dem var designeren Drew Wilson. 22. april i 2012 la han ut en ny skisse for tjenesten Dialoggs på nettsamfunnet for design; Dribbble.com.
Skru på mørk-modus med CSS
Nå kan nettsiden din arve innstillingene fra operativsystemet.
«The sidebar collapses with a click» forteller han.
«Freakin love it, can't wait until I can use it!!!» kommenterer brukeren Manolo under skissen.
Problemet med designet var derimot å lage ikoner som folk forstod. Nå var det nemlig ikke et navn ved siden av ikonet lenger.
Flatt design, som dukket opp året etter, gjorde ikke akkurat jobben lettere.
Og selv om nesten ingen bruker iPad lenger, annet enn pensjonister som leser nettavis på hytta og barn som strømmer Netflix, holder denne designtrenden fortsatt stand i enkelte produkter. Se for eksempel på Google Analytics, eller Bitbucket, som fortsatt insisterer på å støtte en supersmal venstremeny med uforståelige ikoner. Selv om det neppe er noen som bruker kollapsknappen i 2019.
Not picking on Ubiquiti in particular here, but flat design is bullshit. What do any of these represent? How long do I have to stare at them just to tell them apart? pic.twitter.com/ToxrmxngES
— James McDonald (@0xfce2) January 8, 2019
#2. Dra opp i kanten
I 2012 var vi ganske opptatt av at nettet skulle se ut som den virkelige verden. Alt kunne mekkes til med litt skygger her og der, og noen PNG-filer.
- Hva hvis man kunne skrelle eller dra tilbake en nettside som et ark, og finne noe kult under? tenkte visst designere i 2012.
Og hva man skulle finne under bretten? Tja, hva med noen dele- eller bokmerkeknapper? Eller kanskje bare neste side? Fordi internett er som en bok?
- Perfekt! jublet produktavdelingen.
Inside (first draft) - iPad - UI/UX/iOS
Guys, it was our first idea, but rejected as it's not so friendly to tear the photo :) So we publish this sketch just for fun.
12. april 2012 la designeren Cuberto ut sitt konsept for et fotoalbum på Dribbble.com. Albumet hadde mulighet for å dra en digital rift i hvert foto, som eksponerte et panel av knapper.
Da Henki Kolstad og Wenche Foss kunne fronte et datablad
«Holy shit», utbryter designer Corey Haggard i kommentarfeltet, tydelig imponert over innovasjonen.
Dessverre var gleden kortvarig for Corey.
- Folkens, dette var vår første idé. Men vi avslo den, da det ikke er så hyggelig å rive i fotoer, fortalte skaperen Cuberto.
Noen av konseptene fra «dra opp i kanten»-trenden lever likevel videre i moderne design. Når du drar til venstre eller høyre i mail-appen til iOS for å få knappevalg, gjør du nesten det samme. Bare at flatt design har fjerna rive-effekten.
#3. Brettbart som papir
I 2012 så vi for oss at alle sider egentlig bare var et papir som fløt rundt inni maskinene våre.
Vårt nye favoritt-rammeverk er 8-bit
Da var det selvsagt at de også hadde samme egenskapene som papir. Som at de kunne brettes sammen!
I løpet av 2012 dukket det opp flere rammeverk og CSS-teknikker som lovet å gjenskape papirbretting på din favorittside. En av de mest kjente var OriDomi; et JavaScript-rammeverk med hard binding til jQuery.
fold to unlock ios style
Great shot, gave me an idea of using the accordion fold on the lock screen. Also different direction, more native to iOS.
15. mai 2012 publiserte designer Anton Kudin konseptet Fold to unlock, iOS style på dribble.com.
«Sick concept! Now let's hope Apple will implement something like this» kommenterer designer Arturo E. Herrero under skissen.
Uheldigvis for Arturo snappet Apples iOS-sjef Scott Forstall aldri opp idéen. Året etter tok Jony Ive over, og lanserte iOS 7, med flatt design.
#4. Sprøe brytere
Vi var vanvittig inspirert av bryterne i iOS i 2012. Alle skulle bytte ut gammeldagse check-bokser og radio-knapper med stilige knapper som kunne skli fra venstre til høyre, og skru ting av og på.
Aller helst skulle de se ut som noe fra den virkelige verden, også. Hva med en lysbryter? Eller knappene på en Duffel-jakke?
Toggle Buttons
View on Dribbble
Nettopp det følte designer Onur Orhon var en god idé. Derfor publiserte han en skisse på Dribbble.com med den enkle tittelen Toggle Buttons. Men knappene var byttet ut med de sorte treknappene på en Duffel-jakke.
«Finally! Those toggle buttons were so boring. This is a really creative idea and greatly executed» utbryter designeren Paul i kommentarfeltet.
Heldigvis for oss, og uheldigvis for Onur, er vi ikke omgitt av Duffel-jakke-knapper som skal skrus av og på i 2019.
Tande P viste internett til Norge i 1994
#5. Sosiale knapper
- Hvordan skal vi få folk til å dele innholdet vårt i sosiale medier? spurte vi oss selv i 2012.
Løsningen? Rader med overdesignede knapper i topp, bunn og venstremarg av artiklene våre. Alle sosiale medier skulle med - til og med del.icio.us, digg og flickr. Selv om de færreste nordmenn brukte eller kjente til dem.
- Knapper for deling i sosiale medier viser at vi følger med i tiden, sa produktavdelingen.
- Jo fler jo bedre! Og gjør dem så fancy du kan!
En som virkelig tok dette budskapet til hjertet var designer Eddie Lobanovskiy. Med skissen Tweet this nådde han toppen av Mount Everest for sosial knappedesign. Med tredimensjonalt preg både inni og utenpå, og et Twitter-ikon som skled tilbake som en skyvedør fra broen på Star Trek, gikk kommentarfeltet på Dribbble.com av skaftet.
Slik lager du en gammel terminal i ren CSS
«GODDAMMIT MAN» ropte Andrea Cau.
«OMG. Jizzed in my pants... This turns me on! DAMNED!» utbrøt Maarten Dijk.
Skeumorfisme tilbake?
Tro det eller ei, men det er ting som kan tyde på at skeumorfisme kan gjøre comeback. I hvert fall hvis man skal tro Michael Flarup, designeren bak kalender- og notat-appen Opus One.
Opus One UI
Due to the strong reactions I got to this shot I posted some thoughts here: Bringing Back Skeuomorphic Design I recently got to work on some really old-school skeuomorphic stuff for the calendar a...
Skissen han nylig la ut på Dribbble.com, har en tydelig henvisning til filosofien som forsvant i 2012. Og skissen har blitt godt tatt i mot.
«Wow! Haven't seen this amount of skeumorphism on an iPhone X before. It works really well. Especially love the lighting on the side tabs. It gives it such a Neoprene texture to them. Really pops out!» kommenterer bruker Thuy Gia Nguyen.
«Really pops out!»
Begynner vi rett og slett å bli litt lei av det flate og kalde designet vi adopterte i 2013?
I følge Michael selv ville han skape et mer morsomt design, som skaper en minneverdig opplevelse for brukeren.
Med innførselen av designrammeverket Material Design beveget til og med Google seg et steg nærmere skeuomorfismen; med skygger, gløde-respons på knappetrykk og animasjoner.
Hvem tør ta neste steg?
