Designtendenser: Flat Design 2.0
Flade design har taget designverdenen med storm i de få år, den har eksisteret, men ingen designbevægelse forbliver 100% ren til sine rødder og idealer. Det er præcis hvad der sker med fladt design: Det ses efterhånden subtile men meningsfulde ændringer til dets originale iteration.
Disse ændringer var nok til at få seere og eksperter dubbe den nye iteration som Flat Design 2.0. 2.0 er meget interessant, fordi det finder den fine balance mellem lige nok ændringer for at ændre brugeroplevelsen og holde sig i overensstemmelse med dets oprindelige principper.
Udviklingen af Flat i 2.0 var uundgåelig, selvom: Da designere blev mere komfortable med Flat, kunne de se det for hele sin popularitet, nogle problemer blev ikke behandlet ordentligt . Og nu har vi 2,0 til at løse nogle af disse mangler.
Oprindelse af fladt design
Se på fladt design som en slags oprør mod den så populære design stil af skeuomorphism . Det stod på 3D-effekter til at kopiere 3D-objekter i real-egenskaber som en måde at bruge bekendtskab på for at hjælpe brugeroplevelsen. For eksempel var der i første iterationer af Amazonas Kindle Fire en 3D bogreol i baggrunden for at forstærke formålet med tabletten til læsning.
Da Apple, en stor fortaler af skeuomorphic design, i 2012 besluttede at opgive skeuomorphism, der herskede en sving til flad, som har været meget populær i de sidste par år. Dens vægt på minimalisme har også bidraget til at fremdrive det til dets nuværende ubiquity.
Flat er kendetegnet ved dets fravær af:
- hævede elementer, der betyder for brugerne, at de kan klikkes
- hule eller sunkne elementer, der indikerer til brugerne, at de kan udfyldes (tænk søgefelter og andre inputfelter).
Overgang til 2,0
På trods af fladens succes begyndte nogle designere at mærke legitime fejl, der ikke blev behandlet i designsamfundet. Mens fladt fik en masse damp på grund af sin velkomne minimalisme, gik det lidt for langt i den stramme retning. Egenskaberne ved nogle 3D-effekter viste sig at være for store og påvirket brugeroplevelsen negativt.
Således var det uundgåeligt, at der ville ske en anden forandring. Det er her, vi er i dag med daggry af flad design 2.0.
Flat Design's brugervenlighedsproblemer
Alle fladens brugervenlighedsproblemer kan opsummeres i følgende erklæring: Fladt handler typisk i brugernes behov for hofte æstetik.
Med andre ord vil designere, der designer for at en grænseflade skal være "flad", lægge større vægt på at holde tingene minimal, ikke-3D og levende / fed i stedet for at sætte brugeroplevelsen først. Det er normalt, hvor alle dårlige ting i designverdenen starter, og derfor har fladt udviklet sig til 2,0.
Her er de almindelige anvendelsesproblemer med flad:
- Manglende vigtige signifikanter (gradienter, skygger, understreger osv.);
- fravær af velkendte mønstre (blå, understreget tekst til links osv.);
- fravær af kontekstuelle indikationer (CTA-placering, handlingsbar kopi osv.).
Måske er det mest berygtede eksempel i den seneste hukommelse af alle de flade problemer med brugervenlighed Microsofts udgivelse af Windows 8 med sit såkaldte Metro UI. Det design var indbegrebet af flad, fordi alt var fladt til ekstreme.
Det Brugeroplevelsen var så dårlig fordi et helt fladt design betyder, at brugerne ikke får de nødvendige spor til at fortælle dem, hvad der kan klikkes, og hvad der ikke kan være på en grænseflade. Som følge heraf er brugerne naturligvis tvunget til at bruge ekstra tid på at finde ud af dette ved forsøg eller, værre stadig, udføre handlinger ud af fejl, som de ikke ønskede i første omgang!
Som du kan se, er Windows 8-skærmen så flad, at det er umuligt for folk at fortælle, hvad de skal klikke og hvad de ikke skal klikke på. Selvom brugerne allerede er bekendt med grundlæggende navigation på stedet, betyder det ikke, at det er en god ide at fjerne alle signifikanter (spor, der fortæller brugerne, at de kan interagere med sideelementer) og tips om rådgivning (indikationer på, hvordan brugerne kan interagere med sideelementer).
Store eksempler på Flat Design 2.0
2.0 er en subtil ændring eller forbedring over flad, så det kan tage mere koncentration at spotte sande 2,0 på hjemmesider og grænseflader. Derfor går vi igennem nogle aktuelle, store eksempler på 2,0, der allerede er i fuld drift.
Dropbox Guide
Dropbox's guide kan i første omgang se rigtig fladt ud, men hvis du ser nærmere ud, kan du se 3D-forslag, der klart kommunikerer til brugerne, at nogle elementer hæves over andre. Dette er primært tydeligt i billeder af drengens hoved (på venstre side) og skruetrækkerne (på højre side). Begge billeder har stærke, men subtile, sorte grænser, som kommunikerer dybde og indtryk af, at de sidder oven på baggrunden i stedet for at blande sig ind i det.
Tolia Ice Cream
Tolias websted er fuld af subtile, hævede effekter, der giver det tydelige indtryk af 3D, mens det overordnede design stadig er fladt og minimalt. Det hævede indtryk er til stede i overskriften, underoverskriften og beskrivelsen (dvs. sideeksemplaret). Den er også til stede i call to action-knappen og CTA-kopien inde i knappen. Du kan takke den subtile brug af fine skygger rundt om kanterne af disse elementer for at give dette hævede indtryk.
Google Santa Tracker
Det er overraskende, at Google er på 2.0-vognen, og dens Santa Tracker side viser, hvordan man kan integrere 2,0 på en sjov og nyttig måde. Finesserne på 2,0 er overflødige på siden i alt fra gradienter og skygger på de forskellige bygninger og popup-bobler (når brugerne svæver på en bygning) til overskriftens 3D-indtryk øverst på siden.
Publicis Groupe
Publicis Groupe s 90 års jubilæumsside har 2,0 indflydelse på en ret indlysende måde. Hvis du ser på venstre side af siden, ser du kombinationen af skygger og gradienter kommer ned og udstråler udad fra den blege cirkel og den blå sektion under den. Den stærke minimalisme indikerer også, at dens design æstetik stadig er stærkt forankret i ren flad.
Jumeirah
Denne side for et luksushotel i De Forenede Arabiske Emirater domineres for det meste af gigantisk video i baggrunden, men lad det ikke distrahere dig fra at tage i subtiliteten af dens 2,0 bidrag. "Jumeirah Inside" -overskriften har oh-så-subtile skygger, der med succes giver 3D-indtryk, mens du stadig beholder det overordnede, fladt udseende.
En udvikling ved efterspørgsel
I designverdenen ændres tingene normalt, fordi der er en efterspørgsel efter det. Nogen vil bemærke, at noget mangler og finde en måde at forbedre ting på, eller en anden vil tage et koncept og tage det til et andet niveau, der logisk bygger på et bestemt begreb.
Så vidt 2,0 går, er det helt sikkert en kombination af begge, da flatens brugervenlighedstab er fastgjort ved at udvide det oprindelige koncept på en måde, der stadig anerkender principperne om minimalisme, som den flade er defineret af.