Forskelle i flade og materialedesign. Frirum, store elementer

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 hen imod modsatte side- flad og enkel.

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. Brugere modtager derimod ny oplevelse 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

Til at begynde med vil jeg gerne påpege, at jeg ikke bryder mig om udtrykket " fladt design" Flertal grafisk design har været "flade" i århundreder. Jeg tror også, det begrænser din evne til at gøre fremragende design, 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 går aftes, var bare en dårlig kopi af flere interessante designs, som er dukket op på sider som Dribbble og Behance i løbet af det seneste år. Jeg så ikke noget nyt - bortset fra at det langt fra er det samme " gamle æble" Steve Jobs. Virksomheden viste, at den ikke er på forkant med design mobile græ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 nyt håb menneskeheden, men igen nej - folk vendte meget hurtigt tilbage til naturlige former eller til 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 designerne var meget påvirkede et stort antal af gadgets med forskellige størrelser skærm og opløsning - for al denne variation er det lettere at skabe et design uden teksturer, komplekse skygger, der korrekt tager højde for belysning osv. 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 stadig sur :)

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 de adskilte sig kun fra hinanden i brugsscenariet, derefter i form, så i farve og først derefter i kunstneriske detaljer. Jeg husker de gange, hvor alle disse fyre på LinkedIn-profiler, som i dag siger UX, UI Designer, nervøst kopierede bogstavernes hvide skyggeeffekt. Ligesom Apple. Derefter lys og lys steder. Ligesom Apple. Derefter grænseflader rige på teksturer og realisme. Ligesom Apple. Alt deres arbejde bestod af kopiering, da der ikke var noget originalt, samlet og bekvemt udviklingskoncept for alle. Det er netop det problem, som 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 bliver lettere at teknisk implementering, mere bekvemt at klikke på (understregning af links - hej) og multi-platform - kombinere web, mobil og desktop til én samlet 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.

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 (fladt design) og materialedesign ( Materiale Design) er knapt mærkbar. 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.

Men med fremkomsten af ​​mobilteknologi er der efterhånden et 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 udbredt i spil, hvor det er nødvendigt at skabe en realistisk verden og hjælpe spillere med at mærke deres karakter for at fordybe sig dybt 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. Fraværet af "tunge" skeuomorfe detaljer (tænk: lag, serif-skrifttyper, gradienter) gør flade designelementer "lettere", hvilket igen fremskynder indlæsningstiderne betydeligt. Desuden ser flade elementer lige attraktive ud på begge skærme. høj opløsning, og med lav.

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

Og selvfølgelig flade ikoner med relativt 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 udgivelsen af ​​Windows 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 det mobile operativsystem iOS 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 konceptet fuldstændigt brugergrænseflade, men har lige tilføjet et par ændringer i retning af fladt design. Dette gjorde det muligt for brugere at bruge produktet ved at stole på deres tidligere erfaring med operativsystemer og websteder.

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 objekter 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 skeuomorfisme 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 styrkerne og svaghederne ved fladt design.

• Minimalisme og stil
• Intuitivitet. 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 sammensmeltningen af ​​flere designpraksis, som primært stræber efter overordnet enkelhed.

I virkeligheden har fladt design udviklet sig meget i de senere år, fra en helt "flad" stil til en "semi-flad" stil. 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!

Fra forfatteren: Hilsen, venner! I dag vil vi tale om, hvad fladt design er, eller fladt hjemmesidedesign. Dette udtryk har længe vundet webdesignernes hjerter og er stadig selvsikkert trending i dag. De største virksomheder (Google, YouTube, Microsoft, Apple Inc. osv.) bruger det til at designe deres hjemmesider og applikationer. Er du stadig ikke i sekten af ​​tilhængere af flade hjemmesidedesign? Så går vi til dig!

Hvad tror du er grunden til så vilde popularitet af fladt design? Jeg vil svare dig i en nøddeskal: det virker virkelig! I denne artikel vil jeg forklare dig, hvad denne stil er, fortælle dig om dens fordele og ulemper og vise dig nogle fremragende eksempler på fladt hjemmesidedesign, der helt sikkert vil inspirere dig til at gøre store ting. Så lad os gå!

Det hele startede med skeuomorfisme

For dem, der ikke ved det, er skeuomorfisme ikke et beskidt ord, men en anden webdesignstil. Fladt design bliver ofte præsenteret som det modsatte af skeuomorfisme, hvilket efter min mening ikke er helt korrekt. Dette er snarere en forenkling end en antagonisme.

Indtil 2010 var skeuomorfisme den dominerende stil inden for interfacedesign. Han viste elementer, som de så ud i virkeligheden, ved aktivt at bruge teksturer, skygger, refleksioner og andre egenskaber tredimensionelle billeder. Apple gjorde en særlig indsats i denne henseende og kopierede omhyggeligt de fleste softwareobjekter fra virkelige objekter.

Snart holdt pseudo-konvekse ikoner op med at tiltrække flertallet af brugere og webudviklere, hvilket markerede begyndelsen på æraen med fladt webstedsdesign. Verden er kommet til den konklusion, at alt dekorative elementer skal fjernes, og kun det, der er tilbage, er det, der er praktisk for slutbrugeren at interagere med.

"Det bedste design er så lidt design som muligt"

Hvordan Dieter Rams så ud i vandet - en berømt industriel designer, der er imod påtrængende design, animationseffekter osv. I juni 2013, Apple Inc. introducerede den revolutionerende iOS 7, som modtog alle egenskaberne af en flad webdesignstil. Imidlertid "besejrede" flyet ikke umiddelbart realisme og volumen.

I lang tid kunne brugerne ikke glemme magien ved Steve Jobs og ikonerne "som du vil slikke." Mange sagde endda farvel til "de stakkels syv" og skiftede til "strålende Android". Tilføjelse af brændstof til ilden var det store antal fejl, der findes i iOS 7, og det hvidlige, gennemskinnelige design med parallakse og "snot"-animation, når du åbner applikationer.

De, der resignerede med den uundgåelige virkelighed og blev med Apple-operativsystemet, indså til sidst, at fladt webdesign ikke kun ser interessant ud, men også bringer orden og en samlet visuel stil til alle applikationer.

Fordele og ulemper ved fladt design

Fordelene ved at bruge denne stil omfatter:

klarhed i sammensætning og kortfattethed af visuelle hjælpemidler. Responsiv grænseflade i stilen "intet overflødigt", takket være hvilken brugere hurtigt indser, hvad de ønskede at formidle til dem;

vægt på god typografi. Indhold kommer først, hvilket er ekstremt vigtigt i nutidens overflod af information;

mindre størrelse af websider og hurtigere webstedsydelse på grund af det mindste antal visuelle effekter. Dette er især nyttigt, når du opretter adaptive versioner, for jo enklere formularerne er, jo nemmere er det at vise dem på små skærme mobile enheder.

Fladt webdesign har også sine ulemper:

begrænser webdesignerens fantasi til forenklede farver, typografi og ikonografi. Derfor er risikoen for at skabe en kedelig og uudtrykkelig hjemmeside højere;

manglen på tredimensionalitet og skygger gør det nogle gange vanskeligt at forstå, om et element er klikbart eller ej;

mangel på specifikke faste regler.

Hvis du har besluttet dig for at bruge denne stil på dit websted, tillykke - det viser, at du bekymrer dig om brugeroplevelsen og følger med tiden. Hvis du lige er startet som webdesigner og ikke ved, hvordan du bruger fladt design korrekt for at få dit websted til at se relevant ud uden at være forenklet, så prøv disse tips:

Glem alt om "murstensvægge" og lyse baggrunde. Fladt webdesign har en tendens til at bruge enkle, glatte, bløde billeder til baggrunden.

Moderne trends og tilgange inden for webudvikling

Lær algoritmen til hurtig vækst fra bunden i webstedsopbygning

Ingen gradienter, 3D-ikoner, animerede overgange eller andre specielle effekter. Alt dette vil gøre dit websted tungere og tilføje ballade - har du brug for det?

Brug flade ikoner med klare konturer for at tilføje bekvemmelighed og funktionalitet.

Brug en lys, rig farvepalet. Nu er trenden toner af solspektret: lysegule, lyserøde og grønne. Det vigtigste er ikke at overdrive det - der bør ikke være mere end 3 farver på siden.

Fokus på typografi. I fladt design gives fortrinsret til lyse, originale inskriptioner, der skaber en opfordring til handling og giver nem navigation rundt på webstedet. Også her er det vigtigt ikke at overdrive. Glem alt om "håndskrevne" og andre smarte skrifttyper. For at fremhæve overskrifter kan du bruge store bogstaver.

Brug gerne en række forskellige geometriske former. Firkanter, cirkler, linjer og andre former vil ikke kun forbedre strukturen på et websted, men også skabe et klart hierarki og opdele indhold. Brugere vil sætte pris på dette, tro mig.

Forenkle så meget som muligt navigationsmenu og andre elementer på webstedet. Til knapper skal du bruge almindelige rektangler uden skygger eller fremhævning.

Således er fladdesignede hjemmesider i årenes løb blevet standarden accepteret af absolut alle. Se på de fleste moderne hjemmesider – de er flade ind til kernen.

Til sidst vil jeg give de lovede eksempler på vellykket fladt design, som kan tjene som inspiration for dig til at skabe dine egne mesterværker.

1. Hjemmeside http://dunked.com.

En populær platform til udgivelse af porteføljer, rettet mod repræsentanter for forskellige kreative erhverv. Minimalistisk fladt webdesign fremkalder en følelse af troværdighed og klar service, ikke distraherende med unødvendige specialeffekter.

2. Microsoft-grænseflade.

Microsoft er et af de virksomheder, der gjorde flad stil så populær. Måske husker du Zune-afspilleren, en konkurrent til iPod'en, som Microsoft udgav i midten af ​​2000'erne? Så designet af dette produkt var markant anderledes end de fleste applikationer på den tid, hovedsageligt på grund af den store typografi, flade ikoner, store og lyse former.

Denne grænseflade, som blev kaldt Metro, migrerede senere til personlige computere (Windows 8 OS), Xbox 360-grænsefladen og andre Mircosoft-softwareprodukter.

3. Hjemmeside http://www.vox.com.

Nå, er du inspireret? Ned med pseudo-realistisk 3D-æstetik!

Det er alt. Abonner og del vores artikler med dine venner på i sociale netværk. Høje konverteringer til dig!

Moderne trends og tilgange inden for webudvikling

Lær algoritmen til hurtig vækst fra bunden i webstedsopbygning

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 på fladt design på 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 er en moderne stil med brugergrænseflade og grafisk design, præget af minimalisme. Fladt design er kendetegnet ved brugen af ​​et minimum af elementer og fraværet af forskellige effekter af tekstur, skygge 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. Hvornår forskellige elementer interface er kopieret fra rigtige objekter - ca. oversættelse.) , samt rigt design. Det er dog værd at sige, at fladt design slet ikke er så simpelt, 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 brugeren med at fokusere på indholdet uden at blive distraheret af det visuelle. Fladt design understreger elementernes enkelhed, 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 allerede 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 metro-stil. 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, layout 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 formularer er mere klare og nemme 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 rastergrafik, som er baseret på pixels.

Angående programmet Adobe Illustrator, så bruger den vektorgrafik, bestående af kurver og linjer kaldet vektorer, som er specificeret af matematiske formler.

Engang var Adobe Illustrator ikke meget af en praktisk program at skabe pixel-perfekt grafik. Den gode nyhed er, at de nyeste versioner af Illustrator er blevet 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 artiklen: 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 med en god forståelse af farvepaletter, og du eksperimenterer med farvepanelet i Photoshop og Illustartor, og 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: FlatUIColors.com 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 et karakteristisk træk ved lejligheden.

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, og husk, at de skal komplementere og komplementere designet i stedet for at fremstå som et separat element. Det 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 fungerer også for mobile app-grænseflader: rent design med store knapper gør brugen af ​​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 gør manglen på vigtige detaljer eller visuelle effekter processen med at skabe en brugervenlig grænseflade vanskelig, og dette gør generelt hele designet ufølsomt. 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.Manglende erfaring gør det meget svært at vælge 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ænsede 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 skyldes det dets mangler nævnt ovenfor: fladt design stræber efter udvikling og forandring, tilegner sig nye funktioner og øger visuel udtryksevne.

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 lejligheden mere lydhør og komfortabel og giver også et frisk look, hvilket gør lejligheden 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 lejlighed 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!

I dag vil vi fokusere vores opmærksomhed på et af de mest populære områder inden for moderne grafisk design, som kaldes fladt design.

Den berømte kunstner Edgar Degas sagde engang: "Kunst er ikke, hvad du ser, men hvad du lader andre se." Det gælder også grafisk design, som også kan defineres som en kunst, der løser et konkret problem. Grafisk design har evnen til at ændre stemning og budskab gennem de mindste ændringer i former og nuancer, bogstaver og mellemrum. Tendenser på dette område, der er blevet en integreret del Hverdagen, da de påvirker beslutningsprocessen og løser problemer med at præsentere et moderne produkt, og også former brugernes smag.

I dag bruges udtrykket "fladt design" i grafik til mange formål og opgaver, der har fælles stiltræk. Fladt design er en trend, der har fundet mange manifestationer inden for digitale produkter, takket være den lakoniske brug af visuelle udtryksfulde midler.

I dag er udtrykket meget brugt som det modsatte af "rigt design" på grund af den harmoniske enkelhed, der tages som grundlag for denne tilgang. Det mest bemærkelsesværdige træk, der giver denne bevægelse sit navn, er brugen af ​​flade, todimensionelle visuelle detaljer, i modsætning til meget realistiske og detaljerede skeuomorfe billeder. Fladt design har været aktivt i udvikling gennem de seneste år og dækker flere og flere områder inden for grafisk design, som finder brede og varierede anvendelser på området digitalt design Til web og mobil grænseflader. Denne tilgang kan ses som en stil, der fremmer brugervenlighed og visuel harmoni i brugergrænseflader.

Fladt designs historie

Det er klart, at fladt design ikke kom ud af den blå luft. Dens oprindelse anses normalt for at være den schweiziske stil. Swiss Style, også kendt som International Typographic Style eller international style for korte, er en bevægelse, der opstod i 1920'erne, men blev mødt med stor kritik og derefter fik en dramatisk genfødsel i grafisk design i Schweiz i 1940'erne og 50'erne år, som blev et stærkt grundlag for grafisk design fra midten af ​​det 20. århundrede i hele verden. Grundlæggerne af denne kreative bevægelse var Joseph Müller-Brockmann og Armin Hofmann.

Ifølge hjemmesiden Design Is History, Kort beskrivelse Nøgletræk ved denne stil er som følger: "... stilen fokuseret på enkelhed, læsbarhed og objektivitet. Arven efter denne stil er brugen af ​​sans-serif-skrifttyper, gitter og asymmetriske layouts. Fotografier skiller sig også ud som et middel til visuel kommunikation. De vigtigste indflydelsesrige værker blev udformet som plakater, som blev anset for at være de mest effektive midler at give oplysninger."

Plakaterne præsenteret som eksempler viser, at tilhængere af denne stil kunne lide simple former, fed og strenge skrifttyper med høj grad læsbarhed, geometriske kombinationer af detaljer, flade illustrationer og tydelige visuelt hierarki. Schweizisk design blev hurtigt mere og mere populært i forskellige lande og fik nyt liv i kunsten i det tidlige 21. århundrede.

Selvom denne stil har fået mange udtryk på området visuelt design til tryk: plakater, frimærker, kort, bogomslag, magasiner osv. har han udvidet sin horisont i høj grad i den digitale design-æra, især inden for brugerfladedesign.

Hjemmesider og mobile applikationer, har åbnet et overraskende og frugtbart perspektiv for denne minimalistiske og funktionelle tilgang til designløsninger. Stilen blev kaldt "flat design", som straks blev populær og begyndte en ny retning inden for grafisk design.

Det første skridt mod at øge populariteten af ​​flad brugergrænseflade i digitale produkter blev lavet af Microsoft, denne bevægelse begyndte i begyndelsen af ​​2000'erne og udviklede sig bredt inden for produkter i 2010, især i udviklingen af ​​mobile grænseflader til Windows Phone 7. Nøglefunktioner ved flad design såsom intuitive enkle former, fed, klar typografi, klare kontrastfarver, lange skygger, mangel på komplekse detaljer og teksturer, slog godt rod. Den næste stigning i popularitet af fladt design fandt sted i 2013, da Apple udgav iOS 7 ved at bruge principperne for flad grafik som grundlag for praktiske, intuitive grænseflader. Man kan også sige, at nogle nøgleprincipper fladt design fandt sit udtryk i Googles Material Design.

Så hovedtræk ved fladt design er:

• enkelhed af former og elementer;
• minimalisme;
• funktionalitet;
• fed og letlæselig typografi;
• klart og strengt visuelt hierarki;
• en kombination af kontrasterende farver, der giver hurtig visuel opfattelse;
• undgå teksturer, gradienter og komplekse former;
• anvendelse af grid-principper, geometrisk tilgang og visuel balance.

Fordele ved fladt design

Fdat design har en række fordele, der bestemmer dets popularitet og mangfoldighed inden for digitalt design. Blandt de mest betydningsfulde:

• læsbarhed;
• klart visuelt hierarki ved hjælp af former, farver og skrifttyper;
• effektiv organisering af hurtig og intuitiv navigation i web- og mobilgrænseflader;
• nem skalerbarhed for responsivt design;
• ubetydelig belastning for et digitalt system.

Med alt det sagt giver fladt design et bredt felt for kreativ udforskning og stilistiske koncepter.

Fladt design - anvendelse i praksis

De mange forskellige designstilarter, der er tilgængelige og udvikler sig i disse dage, egner sig godt til fladt design på grund af dets fleksibilitet og kunstneriske frihed.

Selv på indledende fase Når du planlægger det overordnede layout, logik og overgange, kan flade designprincipper anvendes. Værktøj og software digitale designværktøjer, der bruges på dette afgørende trin, giver designere mulighed for at præsentere kunder og teams med et ensartet layout af alle appskærme eller websider, og selv denne grundlæggende diagram har allerede vigtige visualiseringsfunktioner, der er typiske for fladt design. På dette tidspunkt er den ideel til hurtigt og effektivt at vise designløsninger i et enkelt monokromt layout.

Brugergrænseflade design

Brugergrænseflader er absolut blevet et bredt og gunstigt felt for fladt design. Det har fundet sin udvikling både i abstrakte koncepter for brugerinteraktion og i en række originale grænseflader, ikoner, grænsefladeelementer og illustrationer.

Disse typer illustrationer giver yderligere støtte til digitale produkter og har en tendens til at være mere indviklede med hensyn til detaljer og tilfredsstille brugernes æstetiske behov, samtidig med at de øjeblikkeligt etablerer en forbindelse til et specifikt emne.

Trykte illustrationer

De mange forskellige formål med moderne fladt design og dets voksende popularitet inden for digitale produkter har også påvirket andre designområder, især designet til trykte produkter såsom plakater og bogomslag, som tilgangen stammer fra.

Branding

I disse dage har branddesign også med succes anvendt principperne for fladt design på grund af dets fleksibilitet, hvor mange produkter præsenteres på enheder eller modtager digital support online. Fladt design i branding er ofte repræsenteret i logoer og applikationsikoner.

Alle de nævnte fakta og fordele om fladt design betyder bestemt ikke, at denne stil har vundet over andre designtilgange. Enhver stil og retning af design har sine fordele og ulemper. Fladt design har dog åbnet nye perspektiver, især inden for skræddersyede løsninger, der præsenterer en harmonisk balance mellem skønhed og funktionalitet.

skrev:

Ekspert i design, udvikling, webanalyse