Hvad er fladt design og dets funktioner. Fladt design: fortid, nutid og fremtid

Revolutionen af ​​"fladt design" er fortsat med at tage fart, siden den blev introduceret på Windows Phone-platformen 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 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;
en klar struktur og skematiske visuals understreger sidens interne logik;
hurtig indlæsning af 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 af ​​hovedtrends i dag, både inden for webdesign og teknologier til at skabe brugergrænseflader. Blandt de seneste eksempler er de mest bemærkelsesværdige Microsofts afgørende skridt i denne retning med Windows 8 og Googles nye design, med en klar demonstration af dets ønske om at dykke dybere 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. Det er i princippet muligt at erstatte noget af den tunge grafik eller billeder med tekstindhold. I dag er typografi på mange hjemmesider blevet til design. Da fladt design ofte er minimalistisk, skal skrifttypernes natur være i overensstemmelse med det overordnede skema, 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 den et minimalistisk grundlag, hvilket betyder, at den overtager sine grundlæggende principper: store indholdsblokke, store elementer, ledig 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

Fladt design- en forholdsvis ny trend, som hele designmiljøet bliver ved med at tale om.

Nogle mennesker kan lide det, andre kan absolut ikke vænne sig til det og hader det endda.

Et godt design skal først og fremmest løse kundens forretningsproblem; hvordan dette opnås er et sekundært spørgsmål. Hvis designeren har valgt "fladt design" som stil eller værktøj - så skal det være! Men glem ikke, at denne stil ikke er egnet til alle projekter.

Så lad os analysere, hvad du skal huske, hvis du beslutter dig for at bukke under for modetrenden og arbejde i stilen "fladt design".

De grundlæggende principper for fladt design er:

1. Ingen effekter

2. simple elementer

3. Fokus på typografi

4. Fokus på farve

5. Minimalistisk tilgang

6. "Næsten" fladt design

Lad os nu se på hvert af principperne for fladt design mere detaljeret:

Ingen effekter

Fladt design bruger ofte ikke effekter som skygger, affasninger, prægning, gradienter eller andre teknikker, der tilføjer dybde og volumen. Ingen 3D-effekter eller overførsel af materialitet, i modsætning til den stilistiske modstander "Skemorphism". Hvert element skal forblive klart, det være sig et ikon, en navigationslinje eller en ramme, en knap osv.

Flad stil har et udtalt udseende uden yderligere funktioner og elementer. Den er afhængig af en klar følelse af kompositionshierarki og placering af elementer. Denne struktur gør designet lettere at opfatte og intuitivt for enhver bruger.

Simple elementer

Fladt design bruger ofte simple brugerfladeelementer som knapper og ikoner osv. Når designere opretter disse grænsefladeelementer, holder designere sig til simple former (rektangel, cirkel, firkant osv.) - dette gør det muligt for hver form at stå for sig selv.

Men enkle elementer må ikke forveksles med simpelt design; et fladt designkoncept kan være lige så komplekst som enhver stilistisk anderledes type designkoncept.


Fokus på typografi

Da fladt design er baseret på elementer af enkel form uden volumen, er typografi et ekstremt vigtigt element i flad komposition.

Fontens karakter skal svare til det overordnede skema og sammensætning - en alt for kompleks skrifttype kan se mærkelig og prætentiøs ud på en alt for forenklet designmodel. Det er at foretrække at bruge en simpel sans-serif skrifttype, fed eller fed. Teksten skal være i harmoni med enkle former.

Skrifttypen skal være et hjælpeværktøj, der hjælper brugerne med at interagere med vores grænseflade. Etiketter på knapper og andre elementer bør ikke være indviklede.


Vægt på farve

Farve er en vigtig del af design. Den flade designpalet er ofte meget lysere og mere farverig end andre designstile. Sammenlignet med et almindeligt design, der fokuserer på 2-3 farver, kan et fladt design indeholde 6 eller endda 8 farvenuancer.

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.

Introduktion til fladt design

På russisk oversættes fladt design som "fladt design", og det blev en absolut favorit, efter at Apple præsenterede 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. Tilbage er blot 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 et slående eksempel på en sådan 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 er det blevet dybere og mere komplekst, men det grundlæggende koncept er ikke overtrådt.

Vi ved ikke, om du har lagt mærke til det eller ej, men på det seneste (især i det sidste år) har der været en klar tendens i webdesign verden over i retning af forenkling, robust minimalisme og visuel forenkling af, hvad vi som brugere interagerer med hver dag. Kort sagt er designet blevet "fladt": I modsætning til de konvekse ikoner fra tiden med den hurtige vækst af sociale netværk og web 2.0, bliver vi nu i stigende grad mødt med enkle ikoner for nye tjenester. Alt dette har fået sit navn - fladt design. Ikke lejlighed, men flad.

Med gårsdagens præsentation af det nye mobile OS, iOS 7, bekræftede Apple endelig den hurtige vækst i popularitet af denne trend, som traditionelt glædede nogle af sine fans, men stødte også på betydelig utilfredshed blandt erfarne brugere og designere. Hvad er der galt? Hvad er brugen af ​​dette flade design, og har verden virkelig brug for det? Vi besluttede at henvende os til eksperter fra Ukraine og i udlandet.

Vi bad dem besvare tre hovedspørgsmål:

  • hvorfor verden begyndte at bevæge sig mod fladt design på nettet og mobilen, og hvad det er;
  • hvad dette vil give til Apple og iOS 7;
  • hvordan dette vil påvirke designere på den ene side og brugere på den anden.

Denis Sudilkovsky, Kiev
Interaction Design specialist, producent Prodesign.in.ua

"Penduleffekten" ved at forudsige fremtiden kommer til udtryk i det faktum, at hvis der er to yderpunkter i et eller andet spørgsmål, vil menneskeheden svinge fra den ene side til den anden. Dette gælder uden tvivl for design af interaktive systemer. Det flade og uinteressant primitive web ændrede sig på et tidspunkt til voluminøse webbaserede knapper. Interfacevisualiseringer har nået deres højdepunkt af realisme, og pendulet flyver i den modsatte retning - fladt og enkelt.

Hvad får Apple ud af dette? Det vil bevare sin plads i trenden og hundredtusindvis af kommentarer om, at deres iOS er ved at blive meget lig Android.

Designere bliver nødt til at udvikle sig (og spøg ikke med, hvornår fladt design kommer til maskinteknik og giver os flade biler :). Når der ikke er dekoration, består alt arbejdet i at skabe en stemning med indhold til et specifikt scenarie hos brugeren. Denne profession vil have mere og mere til fælles med Direktøren end med Kunstneren. Brugerne får tværtimod nye oplevelser og nye indtryk. Personligt var jeg iPhone-tilhænger i 4 år, men i foråret skiftede jeg min telefon til Android af den eneste grund - jeg var træt af Apple-grænsefladens monotone idealitet.

Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se

Først og fremmest vil jeg gerne påpege, at jeg ikke bryder mig om udtrykket "fladt design". Det meste grafisk design i århundreder har været "fladt". Jeg synes også, det begrænser din mulighed for at få et design til at skille sig ud, når valget står mellem fladt og noget andet. Design kan være meget mere end dette. Munter, lyst, mørkt, positivt, minimalistisk – du kan kalde det, hvad du vil. Men i dag hører jeg sjældent nogen anser design for at være andet end fladt eller skleromorft. Det er lidt trist.

Hvorfor er web og mobil langsomme til at bevæge sig mod fladt design? Sådan som jeg ser det, er det bare en trend. Jeg har aldrig set artikler om fordelene ved fladt design i brugergrænseflader og er stadig ikke overbevist om det. Enkelt og klart design - ja, men det er ikke det samme som "flad". Se for eksempel på Google. De laver ikke helt flade designs, de - og jeg deler denne pointe - ser stadig behovet for lidt dybde og variation.

Jeg var meget overrasket, da Microsoft valgte denne retning for sig selv for et par år siden, og præsenterede den berømte Metro-stil. Faktisk brugte de grafisk design til store skilte, som folk ser på fra bestemte afstande og aldrig interagerer med små skærme med et betydeligt antal elementer. De ser pæne ud, men har de god anvendelighed?

Det, jeg så fra Apple i aftes, var bare en dårlig kopi af flere interessante designs, der er dukket op på sider som Dribbble og Behance i løbet af det sidste år. Jeg så ikke noget nyt – bortset fra at dette langt fra er det samme "gamle Apple" af Steve Jobs. Virksomheden har vist, at den ikke er på forkant med design af mobilgrænseflader. Selvfølgelig vil vi se fans adoptere alle disse hvide designs og kreative gradienter i løbet af de næste par måneder, men jeg tror ikke, at det aspekt vil være lige så virkningsfuldt som Googles seneste nedlukninger. Men på den anden side, uanset hvad, så har Apple altid været en trendsætter og en inspiration for mange mennesker, inklusive mig.

Hvad angår almindelige brugere, kan de lide lyse farver.

Ivan Klimenko, Kiev
mobil interface designer, 5tak.com

I høj grad er jeg lidt filosofisk omkring denne flade styling-fascinationssituation. Det er ikke første gang, at designere interesserer sig for minimalisme og kunstige materialer. Alt passerer.

Bauhaus-æraen i 20-30'erne gav et stort bidrag til design, men alligevel kunne den tonale stramhed og kunstighed ikke modstå folks lyst og indre trang til at eksistere omgivet af mere naturlige ting.

Så i 60'erne begyndte alle at beundre plastik.

Møbler, tallerkener og endda tøj er alle lavet af plastik. Det så ud til, at dette var et nyt håb for menneskeheden, men igen nej - folk vendte meget hurtigt tilbage til naturlige former eller kopier af naturlige materialer.

Den barske kontrast mellem former og minimalistisk grafik har altid udtrykt ophobningen af ​​interne konflikter i samfundet. Design er blot et spejl, der viser vores indre verden. Der sker for meget. Livet accelererer meget, og vi har simpelthen ikke tid til at tænke og overveje noget. Vi har ofte ikke tid til bare at leve.

Minimalisme og al denne elektroniske hardware er blot et skridt på vejen til noget mere naturligt og menneskeligt. Mere end bare en anden computer. Jeg er endda ked af, at Apple, som vidste, hvordan man kiggede dybt, ikke længere eksisterer.

Olesya Grichina, Kiev
UI designer hos Componentix, twitter: elendiel

Jeg tror, ​​at designere er blevet meget påvirket af det store antal gadgets med forskellige skærmstørrelser og opløsninger - for al denne mangfoldighed er det nemmere at skabe et design uden teksturer, komplekse skygger, der korrekt tager højde for belysning mv. De begyndte at tænke mere i retning af "hvordan man gør det mere bekvemt for brugeren," snarere end "hvordan man tegner smukt." Indhold er hovedsagen, og i vores arbejde er det vigtigt at præsentere det bedst muligt.

Det forekommer mig, at bag de eksterne ændringer (flad brugergrænseflade, ikoner), bemærkede de især ikke alvorlige ændringer i brugervenlighed, og hvordan de bander om dette emne. Når de tjekker, at det virker, begynder det at sige: "Åhhh, hvor bekvemt, og hvorfor gjorde de det ikke før?" Jeg håber, at dette vil påvirke designere på en sådan måde, at de vil være mere opmærksomme på brugerfladen i stedet for teksturer og skygger. I sidste ende vil det være muligt at forklare kunderne, at det er en trend :)

Jeg tror, ​​at fladt design ikke vil påvirke brugerne specielt – hvis det er bekvemt for dem at skabe og forbruge indhold, vil der være mange tilfredse mennesker. Men ikonerne på startskærmen er stadig sure :)

Pavel Grozyan, Kiev
Produktdesigner hos MacPaw, grozyan

"Æble! A-ha-ha, stop det! - Designerne råber. - Hurra, det blev nemmere. - brugere chanter." Jeg forstår begge synspunkter. I dag, efter præsentationen fra WWDC2013, rejste mange af mine kolleger sig og sagde: "Spil det her fag! Enhver kan tegne sådan en dumhed nu. Og disse ikoner for $30?!" Og ved første øjekast har de ret. Men hvis du graver dybere, indser du, at der er tusindvis af genstande, som i lang tid kun adskilte sig fra hinanden i brugsscenariet, derefter i form, derefter i farve og først derefter i kunstneriske detaljer. Jeg husker de gange, hvor alle disse fyre på deres LinkedIn-profiler i dag, som siger UX, UI Designer, nervøst kopierede bogstavernes hvide skyggeeffekt. Som Apple. Derefter lette og lette hjemmesider. Som Apple. Derefter rige grænseflader i teksturer og realisme. Som Apple. Alt deres arbejde var kopiering, da der ikke var noget originalt, samlet og praktisk udviklingskoncept for alle. Det er denne opgave, fladt design løser i dag. Selvom det forekommer mig forkert at kalde det sådan. Det er godt, at Microsoft ikke opfandt det, og det blev dannet over ti år før den digitale æra inden for publicering.

Flad - det er ikke til klik, det er til klik, tryk, tryk. Du kan ikke kalde det fladt - fraværet af "tykke" teksturer og skygger på knapperne gør det ret forenklet og uden visuel aggression. Og du kan ikke undvære gradienter til knapper. Jeg støtter denne tendens. Hvis det ikke forstyrrer kvaliteten af ​​brugeroplevelsen, bliver det nemmere for alle at leve med. Først og fremmest til brugeren. For det andet for skaberen: det vil være enklere i teknisk implementering, mere bekvemt at klikke (understrege links - hej) og multi-platform - at kombinere web, mobil og desktop i én enkelt oplevelse. Uden tvivl er dette et modigt træk for Apple. Og det er kun de, der kan tage stilling til det. Deres historie har snesevis af bekræftelser, så de er mere tilbøjelige til at lykkes end omvendt.