Begyndervejledningen til fladt design

Burger King-mærke
(Billedkredit: Burger King Corporation)

Tidligere satte webdesignere særligt fokus på at vise deres færdigheder og porteføljer ved at pakke websteder med prangende illustrationer og animationer, der angiveligt imponerede deres besøgende. Derefter kom et skift mod skeuomorf design, som forsøgte at bringe det virkelige liv på skærmen med faux-realistiske teksturer, drop-skygger og virkelige objektegenskaber.

Det gav plads til fladt design, der modsatte sig alle disse 'kunstige' designteknikker til fordel for en mere forenklet, klassisk digital æstetik. Og mens denne brugercentrerede webdesignstil har eksisteret i mange år nu, er den stadig så relevant og populær som nogensinde og ser en genopblussen i logo design , også. Så hvis du stadig ikke er sikker på, hvad det hele handler om, kan denne guide være lige hvad du har brug for ...

Hvad er fladt design?

Hvad er fladt design?



Windows 8 var i spidsen for den flade designtrend

Fladt design er en minimalistisk designtilgang, der understreger anvendelighed. Det har rent, åbent rum, skarpe kanter, lyse farver og todimensionelle illustrationer.

Microsoft var en af ​​de første til at anvende denne designstil på sin grænseflade, set af nogle som en tilbageslag mod det populære skeuomorfe design, som Apple startede med sin iOS-grænseflade. I stedet for at konvertere et virkeligt objekt, såsom en kalender, til en lille realistisk illustration, identificerer talsmænd for fladt design apps med enkle, ikonlignende billeder.

I stedet for at bringe aspekter af det virkelige liv til en grænseflade illustrerer dette en klar adskillelse mellem teknologi og taktile objekter.

Minimalistisk betyder ikke kedeligt

I fladt design betragtes dekorative elementer som unødvendigt rod. Hvis et aspekt ikke tjener noget funktionelt formål, er det en distraktion for brugeren. Dette er grunden til den minimalistiske karakter af fladt design.

Men bare fordi det mangler noget prangende design, betyder det ikke, at denne stil er kedelig. Lyse, kontrasterende farver får illustrationer og knapper til at komme fra baggrunde, fanger let opmærksomhed og styrer brugerens øje. Formålet med minimalistiske billeder bidrager også til fladt designs funktionelle karakter.

Fladt design er forenklet

appikoner

Fladt design har bestemt et øjeblik - er det gået for langt?(Billedkredit: Tobias van Schneider)

Enkle billeder formidler meddelelser hurtigere end detaljerede illustrationer. Billeder som ikoner kan indikere universelle handlinger eller formål, så alle let kan forstå dem.

Det er let at se en øjeblikkelig forskel mellem et skeuomorft og et fladt design. Læg mærke til, hvordan større, ensfarvede farveblokke er mere opmærksomme, og betydningen af ​​ikonerne hurtigt kan opfattes.

Ikonerne ovenfor viser kun nogle af de ikoner, der var i brug i 2021, inklusive sidste års kontroversielle Google-ikon-ommærkning. Faren her er, at fordi de alle følger den flade designtrend og bruger lyse farver til at hæve deres design, bliver de næsten for ens (som vi udforskede i dette stykke ). Dette viser bare, at der er en fin linje mellem at følge trends som fladt design og at skille sig ud fra mængden.

Hvad du kan lære af fladt design

Fladt design vender tilbage til det grundlæggende i design som et funktionelt værktøj. Et websted er designet og bedømt efter hvor godt det fungerer i modsætning til hvordan det ser ud.

Denne rå funktionalitet tvinger et websteds fokus til at være på brugeroplevelse, så websteder, der med succes bruger denne designstil, vil sandsynligvis modtage positiv feedback som brugervenlige.

Sådan oprettes fladt design

For at designe et effektivt fladt sted skal alle designelementer være centreret om denne idé om enkelhed. Solide, levende farver giver aspekter den vægt, der er nødvendig for at skelne dem i stedet for illustrative detaljer; sans-serif typografi giver et rent, skarpt supplement til illustrationer; teksten er kortfattet og til-punktet; UI-elementer som knapper og links er tydelige og mærkbare.

Alt skal designes med det samme mål for øje at skabe et sammenhængende visuelt og funktionelt webdesign. Nedenfor er nogle gode eksempler på fladt design ...

Eksempler på fladt design: Tripfinder

Eksempler på fladt design: Tripfinder

Farver og ikoner hjælper med at gøre mening klar med minimal kopi

Det her tur planlægning app design af indonesisk designer af brugergrænseflader Bady gør det ekstremt nemt at booke en flyrejse baseret på pakker og budgetter. Alt er klart og forståeligt, og designet er mest afhængig af farver og ikoner for at give mening. Kopien er kortfattet, og UI-aspektet ved at søge efter en ideel flyvning er indlysende.

Eksempler på fladt design: Burger King-websted

fladt design Burger King-websted

Burger Kings hjemmeside er i tråd med dets nylige rebranding(Billedkredit: Burger King)

Burger King omdøbt i starten af ​​2021 til meget anerkendelse, og dets nye logo er en mesterklasse af fladt design. Dens hjemmeside er blevet redesignet til at matche, og bruger enkle illustrationer og ikoner til at guide brugerne rundt på siden. Appen anvender også en lignende strømlinet tilgang.

Eksempler på fladt design: Vejr-app

Eksempler på fladt design: Vejr-app

Fladt design afhænger ikke af lys farve

Det her vejr-app UI-design viser, at fladt design kan være vellykket, selv uden brug af lyse farver. Den skarpe ikonografi og den store typografi henleder opmærksomheden på de vigtigste aspekter af vejret, hvilket er hvad brugeren leder efter.

Når du udforsker fladt design i dit arbejde, skal du sørge for at designe hvert aspekt med et minimalistisk og brugercentreret perspektiv for at sikre en samlet grænseflade. Når du har gjort det med succes, vil dine brugere sætte pris på den funktionelle karakter af dit websted.

Relaterede artikler: