Designtrender: Flat Design 2.0
Plattformen har tagit designvärlden med storm i de få år som den har funnits, men ingen designrörelse stannar någonsin 100% ren till sina rötter och idealer. Det är just vad som händer med platt design: Det ses gradvis subtila men meningsfulla förändringar i dess ursprungliga iteration.
Dessa ändringar var tillräckliga för att få tittare och experter dubba den nya iterationen som Flat Design 2.0. 2.0 är väldigt intressant eftersom det uppnår en bra balans mellan bara tillräckligt stora ändringar för att ändra användarupplevelsen och hålla sig till sin ursprungliga principer.
Utvecklingen av Flat in 2.0 var oundviklig, dock: Eftersom designers blev mer bekväma med Flat kunde de se att för all dess popularitet, vissa frågor behandlades inte korrekt . Och nu har vi 2,0 för att ta itu med några av dessa brister.
Ursprung av plattdesign
Titta på platt design som ett slags uppror mot den då populära designstilen av skeuomorphism . Den förlitade sig på 3D-effekter för att kopiera 3D-objektens verkliga egenskaper som ett sätt att använda förtrogenhet för att hjälpa användarupplevelsen. Till exempel, i initiala iterationer av Amazons Kindle Fire, fanns en 3D-bokhylla i bakgrunden för att förstärka syftet med tabletten för läsning.
När Apple, en stor förespråkare av skeuomorphic design, bestämde sig för att överge skeuomorphism i 2012, var det en full gång till platt, som har varit mycket populär under de senaste åren. Dess betoning på minimalism har också bidragit till att driva den till sin nuvarande ubiquity.
Flat kännetecknas av att den saknar:
- upphöjda element som innebär att användarna kan klickas på
- ihåliga eller sjunkna element som innebär att användarna kan fyllas (tänk sökfält och andra inmatningsfält).
Övergång till 2,0
Trots plattans framgång började vissa designers märka legitima brister som inte togs upp i designgemenskapen. Medan platt fick mycket ånga på grund av sin välkomna minimalism gick det lite för långt i den stränga riktningen. Egenskaperna hos vissa 3D-effekter visade sig vara överdrivna och negativt påverkat användarupplevelsen.
Således var det oundvikligt att en annan förändring skulle inträffa. Det är där vi är idag med början av platt design 2.0.
Flat Design är användbarhetsproblem
Alla plattans användbarhetsproblem kan sammanfattas i följande uttalande: Flat brukar handla i användarens behov av höftestetik.
Med andra ord kommer designers som designar för att ett gränssnitt ska vara "platt", lägga större vikt på att hålla sakerna minimala, icke-3D och vibrerande / djärva istället för att lägga användarupplevelsen först. Det är vanligtvis där alla dåliga saker i designvärlden börjar, och det är därför platt har utvecklats till 2,0.
Här är de vanliga användbarhetsproblemen med platt:
- frånvaro av alla viktiga signifikatorer (gradienter, skuggor, understrykning, etc.);
- frånvaro av välbekanta mönster (blå, understruken text för länkar etc.);
- frånvaro av kontextuella indikationer (CTA-placering, handlingsbar kopia etc.).
Kanske det mest berömda exemplet i det senaste minnet av alla plattans användbarhetsproblem var Microsofts release av Windows 8 med sitt så kallade Metro UI. Den här designen var epitomen av platt eftersom allt var platt till extremt.
De Användarupplevelsen var så dålig eftersom en helt platt design innebär att användarna inte får de ledtrådar som krävs för att berätta för dem vad som kan klickas och vad som inte kan vara på ett gränssnitt. Som ett resultat är användarna naturligtvis tvungna att tillbringa extra tid att räkna ut detta genom experiment eller, värre än, utföra handlingar ur fel som de inte vill ha i första hand!
Som du kan se är Windows 8-skärmen så platt att det är omöjligt för folk att berätta vad du ska klicka och vad du inte klickar på. Även om användarna redan är bekanta med grundläggande sidnavigering betyder det inte att det är en bra idé att ta bort alla signifikanter (ledtrådar som berättar användarna att de kan interagera med sidelement) och tips om rådgivning (indikationer på hur användarna kan interagera med sidelement).
Bra exempel på Flat Design 2.0
2,0 är en subtil förändring eller förbättring över platta, så det kan ta mer koncentration för att hitta sann 2,0 på webbplatser och gränssnitt. Därför ska vi gå igenom några nuvarande, stora exempel på 2.0 som redan är i full drift.
Dropbox Guide
Dropboxens guide kan först se väldigt platt, men om du tittar närmare ser du 3D-förslag som tydligt kommunicerar med användarna om att vissa element höjdes över andra. Detta framgår framför allt av bilder på pojkens huvud (på vänster sida) och skruvmejslarna (på höger sida). Båda bilderna har starka, men subtila, svarta gränser, som kommunicerar djup och intrycket att de sitter ovanpå bakgrunden istället för att blanda sig med det.
Tolia Ice Cream
Tolias webbplats är full av subtila, upplysta effekter som ger ett distinkt intryck av 3D, medan den övergripande designen fortfarande är platt och minimal. Det upphöjda intrycket finns i rubriken, underrubriken och beskrivningen (dvs. sidkopian). Den är också närvarande i Call-Action-knappen och CTA-kopian inuti knappen. Du kan tacka den subtila användningen av fina skuggor runt kanterna av dessa element för att ge detta upphöjda intryck.
Google Santa Tracker
Inte överraskande är Google på 2.0-vagnen och dess Santa Tracker sidan visar hur man kan integrera 2.0 på ett roligt och användbart sätt. Subtiliteterna på 2,0 är överflödiga på sidan i allt från gradienterna och skuggorna på de olika byggnaderna och popup-bubblorna (när användarna svävar på vilken byggnad som helst) till rubrikens 3D-intryck högst upp på sidan.
Publicis Groupe
Publicis Groupe s 90-årsjubileumssidan har 2,0 inflytande på ett ganska uppenbart sätt. Om du tittar på den vänstra sidan av sidan ser du kombinationen av skuggor och gradienter kommer ner och strålar utåt från den bleka cirkeln och på den blå sektionen under den. Den starka minimalismen indikerar också att dess designestetik fortfarande är starkt rotad i rent plan.
Jumeirah
Denna sajt för ett lyxhotell i Förenade Arabemiraten domineras mestadels av jätte video i bakgrunden, men låt inte det distrahera dig från att ta del av sin 2.0-premie. "Jumeirah Inside" -rubriken har oh-så-subtil skuggning som framgångsrikt ger intryck av 3D samtidigt som den fortfarande håller den övergripande, platta utseendet.
En utveckling efterfrågan
I designvärlden förändras saker vanligtvis eftersom det finns en efterfrågan på det. Någon kommer att märka att något saknas och hitta ett sätt att förbättra saker, eller någon annan kommer att ta ett koncept och ta det till en annan nivå som logiskt bygger på ett visst koncept.
Så långt som 2,0 går, är det definitivt en kombination av båda, eftersom plattans användbarhetsbrister fixas genom att utvidga det ursprungliga konceptet på ett sätt som fortfarande hedrar principerna om minimalism som plattan definieras av.