Hvad er fladt design? Dårligt tegnede ikoner

I denne artikel vil jeg fortælle dig om fladt design. Det har du sikkert allerede hørt noget om, da flat er blevet en af ​​de førende trends på nettet gennem de seneste år.

I dag skal vi se på, hvad fladt design er, hvordan det opstod, og hvad du skal bruge for at skabe et rent, lyst og responsivt design.

du kan finde gode eksempler fladt design på hjemmesiden http://market.envato.com/. Der er tonsvis af layouts, ikoner og skabeloner, der vil give dig en klar forståelse af, hvordan moderne design ser ud .

1. Hvad er fladt design?

Fladt design - moderne stil brugergrænseflade, samt grafisk design, præget af minimalisme. Fladt design er kendetegnet ved brugen af ​​et minimum af elementer og fraværet forskellige effekter teksturer, skygger og lys, for eksempel: blandede farver, gradienter, højlys og så videre.

Flat er imod skeuomorfisme( Skeuomorfisme er et designprincip, når et produkt får udseende af et andet, dvs. når forskellige grænsefladeelementer kopieres fra rigtige objekter - ca. , samt rigt design Det er dog værd at sige, at fladt design slet ikke er så enkelt, som det ser ud ved første øjekast. Det indeholder nogle træk ved skeuomorfisme, men vi vil tale om dette lidt senere.

Generelt hjælper flad med at fokusere brugeren på indholdet, uden at blive distraheret af visuelle effekter. Fladt design understreger enkeltheden af ​​elementer, samtidig med at brugerfladen bliver mere responsiv, behagelig og nem at bruge.

2. Lidt historie

Fladt design eksisterede som bekendt længe før det blev en global trend på nettet. Fladt design var ret populært i 80'erne på grund af det faktum, at teknologien på det tidspunkt endnu ikke var udviklet nok til at understøtte komplekse effekter, teksturer og skygger. Men selv dengang stræbte designet efter skeuphomorfisme og forsøgte at gøre grænsefladeelementerne så realistiske som muligt.

Fladt design, i den form vi ser det nu, begyndte at vinde popularitet, efter at Microsoft begyndte at producere produkter i den såkaldte metrostil. Metro er et UI-design fra Microsoft, der er slående i sin stil og enkelhed.

I 2010 Microsoft frigivet Windows telefon 7, som brugte et fladt design med skarpe kanter og enkel grafik arvet fra et af de tidligere produkter Microsoft (Zune). Senere, inspireret af succesen, udgav Microsoft styresystemet Windows system 8, baseret på den samme flade Metro-stil.

Fladt design nåede trods alt sit højdepunkt i popularitet i 2013, da Apple udgav iOS 7 demonstrerer fundamentalt nyt design med fuldstændigt redesignede brugergrænsefladeelementer, inklusive ikoner og skrifttyper. Apple selskab oprettet visuelle principper for UI og ikondesign .

Kort efter begyndte Google også at bruge den flade stil i sine applikationer og websider, kaldet den Materiale Design. Google har endda en hel sektion dedikeret til denne stil, inklusive en beskrivelse af målene for webdesign, dets principper og instruktioner til at skabe forskellige designobjekter: ikoner, layouts og så videre.

Siden da er lejlighed blevet en nøgletrend inden for webdesign, hvilket gør hjemmesider, applikationer og interfaceelementer elegante, rene og stilfulde.

Der er således tre globale eksempler på fladt design fra virksomheder, som det er svært at forestille sig uden moderne verden teknologier:

Microsofts Metro-design

Apple iOS 7 design

Googles materialedesign

3. Husk at være ren

Fladt design kaldes tilsyneladende "fladt" på grund af manglen på tredimensionelle elementer og realistiske effekter såsom gradienter, teksturer, højlys, halvtoner, skygger. Husk, flad stil er en todimensionel (flad) måde at afbilde objekter på.

Desuden er objekter i fladt design afbildet på en meget forenklet og stiliseret måde.

Og nogle gange bruges endda kun silhuetten eller konturerne af objektet, dvs. lige nok til at gøre objektet genkendeligt, men ikke overbelaste det med mindre detaljer.

Minimalisme er blevet en global trend i disse dage: enkelhed af former og brug af skarpe kanter skaber et rent og behageligt design. Simple former mere forståeligt og lettere at forstå. Dette holder designet minimalistisk og rent uden at give det et travlt, rodet look.

4. Bring det til perfektion

Ved, at når det kommer til at skabe flade ikoner og UI-elementer, skal du få dem til at se sprøde, pæne og pixel-perfekte ud, dvs. så meget som muligt. Det gælder desuden både raster- og vektorgrafik.

Med programmet Adobe Photoshop alt er klart her: det fungerer med raster grafik, som er pixel-baseret.

Vedrørende Adobe programmer Illustrator bruger vektorgrafik, der består af kurver og linjer kaldet vektorer, som er defineret af matematiske formler.

Der var engang Adobe Illustrator var ikke meget praktisk program at skabe pixel-perfekt grafik. Den gode nyhed er, at seneste versioner Illustrator stål fantastisk værktøj at skabe god grafik.

Det må jeg sige Vektorgrafik går grundlæggende ud på at arbejde med enkle, flade former, rene farver og gitter Adobe Illustrator er meget fleksibel i indstillinger og giver dig mulighed for at tilpasse gitteret til dine behov, justere objekter og bruge Forskellige typer snapper. Dette gør det nemmere at skabe det perfekte design, der ser rent og stilfuldt ud på enhver skærm. Hvis du vil lære at skabe perfekt grafik, så bør du læse denne artikel: Sådan opretter du pixel-perfekt illustration ved hjælp af Adobe Illustrator .

5. Farve

En af de mest specifikke funktioner fladt design, ud over skygger, er brugen af ​​farve. De fleste af de farver, som fladt design bruger i sine elementer, består af blot nogle få grundfarver.

Farven i fladt design er lys, rig og rig.Det flade farveskema er ikke begrænset til nogle få specielle farver. Det indeholder mange nuancer, og deres valg afhænger kun af, hvad du afbilder, det være sig ikoner af slik eller retro-stilobjekter i en sofistikeret retro-palet.

Lad os sige, at du er en UI-designer og er velbevandret i farvepaletter, du eksperimenterer med farvepanelet i Photoshop programmer og Illusstartor, der blander farver som du vil. Denne proces er dog ret kompleks og kræver god intuition, erfaring og færdigheder. Her finder du nogle værktøjer, der kan hjælpe dig med at skabe din egen farvepalet.

Nogle af dem er velegnede til alle typer design og illustration, ikke kun fladt design. For eksempel Adobe Color CC, bedre kendt som Cooler. I dag er der adgang til det, både via hjemmesiden og direkte gennem Adobe-produkter. Cooler er et meget fleksibelt værktøj, der giver dig mulighed for enten at oprette din egen farvepalet eller vælge fra en brugerdefineret palet fra et bibliotek.

En anden enkel og praktisk farvepaletgenerator er Coolors. Tryk blot på mellemrumstasten og programmet genererer en farvepalet, du kan justere farverne, der er også en eksportfunktion.

Der er flere andre lignende tjenester med brugerdefinerede paletter, der kan være nyttige. Der er dog et værktøj skabt specielt til fladt design af Designmodo - en tjeneste med et sæt "flade" farver, meget praktisk til arbejdet. Denne side er blevet meget populær blandt designere, der leder efter gode farveløsninger til et perfekt design. Prøv det!

Og du kan også finde et større udvalg af farver og paletter i Googles materialedesignguide.

6. Lange skygger

Som nævnt ovenfor er fladt design kendetegnet ved enkelhed og meget ledig plads – hvorfor fladt design afviser brugen af ​​eventuelle effekter. Der er dog én effekt, der er typisk for fladt design. Denne effekt er blevet en trend og karakteristisk træk flata.

Vi taler om lange skygger nu. De har nogle typiske egenskaber, der gør denne effekt genkendelig, nemlig: en 45-graders hældning og stor størrelse(skyggen kan være flere gange længere end selve motivet. Som følge heraf giver lange skygger den flade en vis dybdeeffekt.

Denne effekt gør objektet mere tredimensionelt, men holder det samtidig i sammenhæng med fladt design.

7. Arbejde med skrifttyper

Typografi spiller en stor rolle i fladt design. Ofte bliver teksten hovedelementet i kompositionen.

Flade designs bruger typisk enkle skrifttyper, hvilket gør hele designet rent og læsbart. Du kan finde mange gratis skrifttyper i Adobe Typekit, hvis du bruger Adobe-produkter. Du finder også en masse gode gratis skrifttyper på Font Squirrel. Men glem ikke at læse licensen, hvis du har til hensigt at bruge skrifttypen til kommercielle formål.

Oftest i fladt design er det sædvanligt at bruge store bogstaver og kontrastfarver, dette gør teksten mere læselig.

Brug skrifttyper sparsomt, husk at de skal komplementere og komplementere designet i stedet for at fremstå som et separat element. Dette betyder ikke, at du ikke kan bruge serif eller håndskrevne komplekse skrifttyper. Bare husk at være minimal og hold alt i balance. Flat bruger dog stadig ofte sans-serif-skrifttyper, da de ser mere stringente og pæne ud.

8. Fordele og ulemper ved fladt design

Selvom fladt design er blevet så populært på grund af dets mange fordele, er der stadig nogle ulemper, som designere står over for, når de bruger denne stil. Lad os se på fordele og ulemper.

fordele

Popularitet

Fladt design er blevet en trend, der får flere og flere positive anmeldelser fra designere og webdesignere, og det ser slet ikke ud til at miste sin position. Tværtimod breder det sig mere og mere, får nogle nye former og funktioner, bliver mere og mere kreativt.

Enkelhed

Fladt design er enkelt, minimalistisk og rent. Flad på nettet hjælper brugerne med at fokusere på indholdet i stedet for at blive distraheret af det visuelle. Dette virker også for grænseflader mobile applikationer: rent design med store knapper gør brug mobile enheder Perfekt.

Lysstyrke

Farve er et andet cool plus i fladt design. Lyse og rige farver ser attraktive og rene ud, og manglen på gradienter gør designet stilfuldt. Desuden gør sådanne rene farver det mere positivt og præsentabelt fladt design skaber den rigtige stemning.

Fejl

Flat har mange flere fordele, men intet design er perfekt, og vi kan ikke idealisere det. Her er nogle ulemper ved fladt design, som vi skal nævne:

Udeblivelse

Nogle gange fravær vigtige detaljer eller visuelle effekter gør processen med at skabe en brugervenlig grænseflade vanskelig, og det gør generelt, at hele designet ikke reagerer. Ikke alle brugere føler sig trygge ved flad, fordi det kan være svært at finde elementer på en webside, som du skal klikke eller trykke på skærmen mobiltelefon fordi de ikke er interaktive.

Problemer med typografi

Som tidligere nævnt kan ikke alle skrifttyper være egnede til fladt design. Nogle gange ser sådan en rig skrifttype med skarpe kanter virkelig afbalanceret og stilfuld ud. Men hvis skrifttypen er valgt forkert, kan det ødelægge hele designet. Du skal have en rigtig god fornemmelse for, hvilke skrifttyper der egner sig til flade, og hvilke der ikke er, gør det meget svært at vælge en skrifttype.

Svagt billede

På grund af begrænsninger i brugen af ​​effekter, farver og skrifttyper kan flade designs se for enkle og kolde ud. Dens minimalisme kan også være dens største ulempe - andre flade designs ender med at se præcis det samme ud som dine. Så det er meget svært at få dine ikoner eller websider til at se anderledes ud end andres design, fordi du bruger de samme forenklede former, begrænset farvepaletter og lignende skrifttyper. Som et resultat kan fladt design blive kedeligt med tiden.

9. Fremtidige flade designtrends

Det kan ikke siges, at fladt design har dannet sig fuldt ud og stoppet i sine spor. Måske er det på grund af dets mangler, der er nævnt ovenfor.

Hvis man ser godt efter sidste eksempel fladt design, kan du mærke, at det virkeliggradvist væk fra dets strenge værktøjer og begynder at tilføje subtile effekter såsom: gradienter, skygger, belysning og andre visuelle effekter.

Disse små detaljer giver det flade design en vis dybde uden at være alt for detaljeret som skeuomorfe designs. Disse subtile forbedringer gør den flade mere lydhør og komfortabel, og giver også et frisk look, hvilket gør den flade mere fleksibel og alsidig.

Således mister flad ikke sine funktioner, men bliver mere interessant og fleksibel- han bliver virkelig bedre.

konklusioner

Derfor diskuterede vi nogle fakta fra flad designs historie og talte om farver, former og typografi. Vi så på forskellige synspunkter, fokuserede på fordele og ulemper ved fladt design og lærte nogle af hovedprincipperne for at skabe et godt design.

Jeg håber, at du selv har lært nye oplysninger fra denne artikel eller i det mindste fandt det interessant. Du skylder dig selv at prøve at skabe et fladt design, hvis du ikke har gjort det før.

Når alt kommer til alt, hvad er der ellers at nævne om fladt design?

Hvis du virkelig kan lide flad med dens skarpe kanter, rige farver og sprøde skrifttyper, dens renlighed og minimalisme, så gå efter det!

Det er trendy, men som med enhver grafisk stil skal du ikke begrænse dig til kun én teknik. Bare fordi flad er trendy, betyder det ikke, at du ikke kan bruge andre stilarter i dit projekt. Skeuomorphism, med dens bittesmå detaljer og teksturer, kan også blive god beslutning. Det vigtigste er at huske, at designet er forskelligt for hvert projekt, det skal udtrykke sin ånd, formål, essens, mens det forbliver praktisk og funktionelt. Frem!

"Flat design"-revolutionen fortsætter med at tage fart, siden den blev introduceret kl Windows platform Telefon i 2010. Det er ikke svært at forstå hvorfor: en grænseflade med dette design virker mere intuitiv, er velegnet til adaptive elementer, moderne rammer og ser attraktiv ud, når den udføres korrekt.
Fladt design begyndte at eksistere som en modvægt til den allestedsnærværende skeuomorfe stil, men er siden blevet meget mere end blot "Option B".

I starten var flad udelukkende todimensionel med total fokus på minimalisme. Modern flat 2.o bruger skygger, gradienter og andre elementer for at få det til at se "næsten fladt ud".

5 karakteristiske komponenter i moderne fladt design:

1. Lange skygger
Lange skygger tilføjer dybde og dimension til billeder uden at skulle ofre de minimalistiske ikondetaljer, der gør en grænseflade attraktiv.

2. Dynamiske farver
Det er nemt at komplementere sparsomme billeder med energiske farver, især lyse nuancer.
Forskellige baggrundsfarver i kontrast til grundfarven på elementerne gør siden med en flisebelagt menu mere livlig.
Flat UI Colors-webstedet indeholder de mest effektive farvemønstre til flade.

3. Simpel typografi
Valget af skrifttype i flad er baseret på ét kriterium: læsbarhed. Sans serif-skrifttyper med konstant stregbredde bruges typisk.

4. Gennemsigtig knap
Et af trendelementerne i moderne webdesign. Årsagen er, at den ikke vækker for meget opmærksomhed, men tydeligt er genkendelig som en knap.

5. Minimalisme
Flad og minimalisme går hånd i hånd med de samme principper: enkelhed og indholdsfokus.
Det kan se ud til, at brug af fladt design er en universel løsning, men minimalisme er vanskelig at implementere: jo færre arbejdselementer, jo mere opmærksomhed kræver de.

Uanset hvor flot fladt design kan virke, er der ingen garanti for, at det vil fungere for dit websted. Tjek dens vigtigste fordele for at se, om det er værd at planlægge et globalt redesign.

Fordele:
bruges i en responsiv grænseflade;
forenkler navigationen for brugeren;
klar struktur og skematisk visuals understrege sidens interne logik;
hurtig indlæsning sider, på grund af grafikkens enkelhed;
Velkendt typografi forbedrer læsbarheden.

Fladt design handler om enkelhed og minimalisme, hvilket på den anden side gør det svært at formidle visuelt komplekse budskaber. Derfor, før du skynder dig hovedkulds ud i at forenkle grænsefladen, bør du nøje overveje interaktionen mellem webstedet og brugeren.

Baseret på webdesign bog over trends.

Fladt design er en nøgleretning inden for design for de kommende år, så vi inviterer dig til at lære det bedre at kende og lære de 5 grundlæggende principper, der ligger til grund for det.

Lære at kende fladt design ohm

På russisk er fladt design oversat til "fladt design", og det blev en absolut favorit efter Apple præsentationer iOS OS. Fokus var på en minimalistisk tilgang til usability design. Fokus er på brugerkomfort. Dette er en udtalt protest mod "squeformism" (visualisering af objekter som i virkeligheden). Valget faldt på mere forenklede og samtidig simplere æstetiske løsninger. Brugere, der var trætte af realistiske visualiseringer, hilste denne retning med glæde, og flere og flere webprojekter flytter til dette format.

Jeg vil gerne bemærke, at "flad" ikke betyder "kedeligt". Flade designløsninger kan være smukke, de er mere sofistikerede, rene, fri for redundans og forvandles til en "roens ø." De gør endelig indholdet forståeligt. Det er tilbage at lære de grundlæggende principper for at anvende dem i praksis.

Princip nr. 1: Ingen unødvendige effekter

"Flat" design stræber ikke efter at formidle volumener, så det er baseret på todimensionel visualisering. Det betyder, at du ikke vil se nogen skygger, refleksioner eller højlys med teksturer (med undtagelse af lange skygger). Kun overførsel af konturer, og intet mere.

Princip #2: Jo enklere jo bedre

Det anbefales at bruge monosyllabiske figurer i designet, samt at overvåge konturernes klarhed, som er beregnet til at understrege lethed og vægtløshed. Derudover imiterer sådanne lakoniske elementer en sensor godt, hvilket genererer et ønske om at interagere med objektet (en invitation til at trykke, røre). Enkeltheden af ​​elementerne er dog ikke lig med enkelheden i designet som helhed - dette gælder kun konturerne. Som et resultat er alt, hvad brugeren ser, klart for ham, og han kan nemt bruge det.

Princip #3: Typografi og dens betydning

Fladt design kræver ekstrem forsigtighed, når du arbejder med skrifttyper. Det vil sige, at deres karakter skal supplere designskemaet uden at modsige det. Desuden er skrifttypen i fladt design også et vigtigt navigationselement.

Princip #4: Farveaccenter

Ikke kun skrifttype, men også farve er en væsentlig del af "flade" design. Langt de fleste paletter er baseret på 2-3 farver, selvom der selvfølgelig er undtagelser. Normalt rige og lyse, men samtidig rene farver vælges. Som nævnt er der ingen gradienter eller unødvendige overgange.

Princip nr. 5: at vælge minimalisme

Fladt design er lysende eksempel sådan en global trend som minimalisme. Designere nægter unødvendige klokker og fløjter, bevæger sig væk fra komplekse og implicitte tilgange til visualisering, som bærer frugt i form af brugeraktivitet.

Flad eller næsten flad? Vi leder efter et kompromis!

Afslutningsvis vil jeg bemærke, at der i dag er en synergi mellem fladt og ikke-fladt design. Vi taler om et "næsten fladt" design. Dette er den mest almindelige anvendelse af det beskrevne koncept, når designere sammen med enkle og kortfattede elementer og todimensionelt rum bruger 1-2 teknikker til dybde og perspektiv.

Også en trend i 2017 var Semi Flat Design - semi-flat design. Påvirket af Material Design er det blevet lidt mere rumligt. Der opstår lyse skygger, der får designet til at fremstå semi-fladt. Fladt design er stadig relevant i dag på grund af skygger, det er blevet dybere og mere komplekst, men det grundlæggende koncept er ikke overtrådt.

Fladt design er en af ​​hovedtrends i dag, både inden for webdesign og teknologier til at skabe brugergrænseflader. Blandt de seneste eksempler vil det mest bemærkelsesværdige være: Microsofts afgørende skridt i denne retning med dets Windows 8 og det nye Google design, med en klar demonstration af et ønske om at dykke ned i minimalisme.

Her er eksempler på elementer, der definerer .

Livet efter Web 2.0

I form af afrundede former af elementer med alle mulige effekter - 3D, skygger, højlys og refleksioner, gradienter, prægning. Kort sagt alt det, der skaber dybde og volumen. Store, lyse kontroller, glans, teksturer og andre lignende udtryk giver plads til enkle, todimensionelle repræsentationer af visuelle objekter.

Float Design

Typografi i hjertet af stilen

Bemærk venligst, at dette er grundlaget for at bygge en "flad" grund. Enkelheden af ​​flade designelementer såvel som principperne for minimalisme selv øger betydningen af ​​typografi. Tekstindhold det er i princippet muligt at erstatte noget af den tunge grafik eller billeder. I dag er typografi på mange hjemmesider blevet til design. Da fladt design ofte er minimalistisk, skal skrifttypernes natur være i overensstemmelse med almindelig ordning, stil og komposition. For eksempel bruges store bogstaver ofte til elementer eller overskrifter.

Coderwall

Læs også: 12 primære farver og eksempler på deres opfattelse af brugere

Flad design farvepalet

Fladt design bevæger sig også mod større farvediversitet. Webdesignere bruger i stigende grad farvepaletter til at implementere det måske mest grundlæggende designprincip: et websted skal være anderledes end dets jævnaldrende.

Minimal abe

Frirum, store elementer

Fra start til slut har det et minimalistisk grundlag, hvilket betyder, at det vedtager sine grundlæggende principper: store indholdsblokke, store elementer, Fri plads, mangel på unødvendig ballade og prætentiøsitet.

Skæg design

Fladt design af ikoner, knapper, illustrationer

Knapper, ikoner, badges og illustrationer får også et 2D-udseende. De skal svare til den angivne stil på alle sider på siden, formidle stemningen på selve siden og være lette at forstå for enhver bruger.

At vælge farver til ikoner, ligesom selve ikonerne, er ikke en nem opgave. Du kan bruge rene farver. I et forsøg på at dekorere designet skal du tænke over, hvordan du gør siden nem at bruge. På den ene side er det vigtigt ikke at overtræde stilen, men på den anden side er det nødvendigt at gøre ikonerne mærkbare. I illustrationer stræber vi efter minimalisme og undgår de tidligere populære 3D-effekter.

Læs også: 20+ inspirerende websteder med flade illustrationer i design

Eksempler på hjemmesideskabeloner med fladt design Flat UI

Eksempler på hjemmesider i flad designstil

Identitet

83 Designkollektiv

Frunatisk

Paraplygruppen

Slcl Fonden

Min filt

Behzad

Atlant

Simpel som mælk

Familien Weranda

Som udvikler mobile applikationer og hjemmesider, skrev en klumme til os og satte alt på sin plads vedrørende fladt og materiale design.

I det store og hele er forskellen mellem fladt design og materialedesign subtil. For en person, der ikke har dyb viden om grafisk design, kan de faktisk virke meget ens. I denne artikel vil jeg forsøge at "belyse" nogle af forskellene mellem dem. Du vil modtage yderligere viden, der er så nødvendig for ikke at komme til at skade designerens sarte natur.

Lidt historie

Inden vi begynder at tale om forskellene mellem de to mest populære designtrends, lad os finde ud af, hvor de kommer fra. Der er en opfattelse af, at materialedesignet er skabt på basis af et fladt. Hvor kom fladt design så fra?

Skeuomorfisme

Når det kommer til brugergrænseflade og webdesign, refererer begrebet skeuomorphism til en tilgang, hvis hovedidé er efterligning. Uden at gå for meget i detaljer, lad os bare huske Apples pre-iOS 7-grænseflader med deres "realistiske teksturer, belysning og bombastiske effekter."

Forsøger at gøre digitale objekter svarende til deres modparter i den virkelige verden var begrundet i behovet for at lette brugerinteraktion med enheden. Faktisk er det af denne grund, at alle grænseflader med realistiske teksturer dominerede digitale verden i mange år. Skeuomorphic design gør et godt stykke arbejde med at hjælpe brugerne med at skifte problemfrit fra den virkelige verden til den digitale.

Dog med blomstringen mobile teknologier efterhånden er der behov for primært at fokusere på bekvemmelighed og brugervenlighed. Enig, på dette område er der behov for at skabe mobile løsninger, ledig fra forskellige enheder, stiger markant. Og i dette øjeblik bliver enkelhed den nye designstandard.

Bemærk: Tro under ingen omstændigheder, at skeuomorfi er helt forsvundet. Det er meget brugt i spil, hvor det er nødvendigt at skabe en realistisk verden og hjælpe spillere med at mærke deres karakter for at dybt fordybe sig i spilprocessen.

Fladt design

Denne stil er fuldstændig blottet for tredimensionelle objekter. Groft sagt mangler fladt design sådanne stilistiske elementer som skygger, teksturer, gradienter, men lægger vægt på spillet af skrifttyper og farver og ikoner. Men hvorfor var alt dette nødvendigt? Svaret er enkelt.

For det første reducerer fladt design betydeligt sideindlæsningstiden. Manglen på "tunge" skeuomorfe detaljer (tænk: lag, serif-skrifttyper, gradienter) gør flade elementer"lettere" design, hvilket igen fremskynder læssetiden markant. Desuden ser flade elementer lige attraktive ud på begge skærme. høj opløsning, og med lav.

For det andet simple billeder kan formidle din idé til brugerne hurtigere end detaljerede illustrationer: de er skematiske og derfor ret nemme at forstå.

Og selvfølgelig, flade ikoner med forholdsvis i enkel skrifttype kan rette brugernes opmærksomhed mod virkelig vigtigt indhold.

I dag har fladt design fået en velfortjent anerkendelse, men det har stadig sine problemer. Det mest åbenlyse eksempel på sådanne problemer var Windows udgave 8 af Microsoft. Dette operativsystem betragtes som en pioner inden for fladt design og understøtter konceptet Metro design. Det, der førte til problemerne, var, at virksomheden fandt det nødvendigt at være mere opmærksom på typografien end selve grafikken.

Resultater fra en Windows 8 usability-test udført af NN Group viste, at brugere havde svært ved at skelne klikbare objekter fra ikke-klikbare. Brugere klagede over, at objekter, der virkede statiske, faktisk var klikbare. Som følge heraf mislykkedes virksomhedens hovedmission - at hjælpe brugerne med at fortolke systemet korrekt.

Et andet firma, der ofte forbindes med fladt design, er Apple. De bevægede sig væk fra skeuomorfe designelementer i den mobile operationsstue iOS system 7, udgivet i 2013. Denne gang blev overgangen modtaget lidt bedre, primært på grund af det faktum, at virksomheden ikke forsøgte at opdatere brugergrænsefladekonceptet fuldstændigt, men blot tilføjede et par ændringer i retning af et fladt design. Dette gav brugerne mulighed for at bruge produktet ved at stole på deres tidligere erfaringer med operativsystemer og hjemmesider.

Materiale design

Lad os være klare lige nu: Materialedesign er mere et mærkevareprodukt end en spontan designtrend, der har vundet bred accept. Det er det, der hovedsageligt adskiller den fra dens flade design.

Ved at kalde et designmateriale "branded" mener jeg, at det har et helt sæt klart definerede anbefalinger og principper, som enhver designer med respekt for sig selv følger. Det er helt indlysende, hvorfor Google introducerede sit Material Design: Der var et behov for at forene designet, så applikationer så ens ud på alle de mange Android-enheder.

Selvom det er ret funktionelt, anses fladt design stadig for at være svært at forstå. Sandheden er, at flade genstande på skærmen kan forvirre brugere (især dem, der ikke har erfaring med at bruge mobil- og webgrænseflader). Derfor forsøger materialedesign at bringe elementerne af skeuomorphism tilbage, men i en meget forenklet form. Billeder ser flade ud, især når det kommer til farver, men er stadig multidimensionelle takket være tilstedeværelsen af ​​Z-aksen.

Med andre ord kan materialedesign kaldes en forbedret version af fladt design med elementer af skeuomorfisme - animation, skygger og lag. På denne måde kan du gøre produktet mere intuitivt i forhold til navigation, og undgå unødig kompleksitet inden for den overordnede stil.

Fordele og ulemper ved fladt design

Lad os efterlade historien om udviklingen af ​​stilarter og gå videre til noget mere betydningsfuldt - lad os liste de stærke og svage sider fladt design.

• Minimalisme og stil
• Intuition. Det bliver nemmere for dig at formidle din idé til brugerne.
• Sparer tid og ressourcer. Sider indlæses meget hurtigere med mindre båndbreddeforbrug.
• Fokus på indhold. Grænsefladen er fri for unødvendige detaljer, der kan distrahere fra virkelig værdifuld information.
• Ser lige så godt ud forskellige enheder, det være sig en pc- eller smartphone-browser.
• Fremskynder udviklingsprocessen for webstedet eller appdesignet ved at eliminere unødvendige designdetaljer.

• Minimalistisk stil.
• Ganske intuitivt på et intuitivt niveau. Materialedesignet vil være lige så let at opfatte som erfarne brugere, og for begyndere.
• Moderat skeuomorfisme. Alt ser mere realistisk ud takket være brugen af ​​Z-aksen (et unikt Google-koncept).
• Der er et sæt manualer, der løbende opdateres. Derfor kan enhver designer altid henvende sig til dem, hvis der opstår vanskeligheder under arbejdsprocessen.
• Animation til webløsninger tilskyndes. Der er ingen grund til at minde dig om, hvor meget folk elsker bevægelse. Derudover giver animation dig mulighed for at gøre grænsefladen mere klar og intuitiv.

• Har en ejer (Google-virksomhed). Derfor bør eventuelle spørgsmål og forslag til forbedringer rettes til ejeren.
• På grund af Z-aksen kan designprocessen tage længere tid at fuldføre.
• Animerede elementer kræver flere ressourcer.
• Stiv overholdelse af retningslinjer kan begrænse originaliteten af ​​et design.

Sammenfatte

Faktisk bør en af ​​de overvejede designtilgange ikke anses for at have en klar fordel frem for den anden, da flade og materielle stilarter går side om side. De er begge utrolig populære og begge er blottet for overdreven realisme. Materialedesign er en efterfølger til fladt design, mens fladt design i sig selv var en reaktion på løsninger, der var for tunge og realistiske. Materialedesign tilføjede noget, som fladt design altid har forsøgt at bevæge sig væk fra - lidt skeuomorfisme. Selvom én ting altid vil være anderledes mellem disse tilgange: materialedesign er et proprietært produkt Google, og fladt design er resultatet af en sammensmeltning af flere designpraksis, der primært stræber efter overordnet enkelhed.

I virkeligheden har fladt design udviklet sig meget gennem årene. de sidste år: Fra helt “flad” stil til “semi-flad”. Det giver nu mulighed for brug af lag og subtile skygger for at tillade objekter at fremstå dybere, end de tidligere så ud. Så du og jeg er glade samtidige med fladt design 2.0.

Endelig er der intet, der forhindrer dig i at forsøge at kombinere disse to tilgange for at skabe et virkelig funktionelt og brugervenligt produkt. Så tag inspiration fra guruerne inden for fladt og materiale design og kom i gang!