Šta je Flat dizajn? Poreklo, upotreba i primeri

Podelite:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Flat dizajn pruža odličan način za poboljšanje konverzija, poboljšanje brzine učitavanja i još mnogo toga. Otkrijte šta je flat dizajn i kako ga efikasno koristiti.

Bez obzira da li ste tek započeli posao sa web dizajnom ili godinama radite kao dizajner, verovatno ste primetili koliko se lice na mreži menja iz godine u godinu. Neki trendovi web dizajna su prilično suptilni, poput prelaska sa korišćenja jednobojnih pozadina na gradijente. Drugi, međutim, signaliziraju veliku promenu u načinu na koji dizajniramo web stranice. Jedan od najprepoznatljivijih primera ovoga dogodio se u ranom delu 2010-ih, kada su web sajtovi prešli sa skeuomorfizma (kada su objekti dizajnirani da podsećaju na njihove kolege iz stvarnog sveta) na flat dizajn i material dizajn inspirisan flat dizajnom. Flat dizajn se posebno pokazao korisnim ne samo u web dizajnu već i u grafičkom dizajnu. To je izuzetno efikasan način za dizajniranje zanimljivih interfejsa i brendiranja, što kao rezultat dovodi do većih stopa angažovanja i konverzija. Počnimo sa razumevanjem šta je tačno flat dizajn.

Šta je Flat dizajn?

Flat dizajn je stil modernog dizajna korisničkog interfejsa poznat po sledećim osobinama:

  • Moderna i digitalno prilagođena estetika
  • Minimalistički stil
  • Dovoljno praznog prostora
  • Simetrični rasporedi zasnovani na mreži
  • 2D elementi
  • Svetle boje sa visokim kontrastom
  • Hrabra, čitljiva tipografija
  • Simbolične ikone
  • Jednostavnost (dakle bez gradijenata, tekstura, apstraktnih formi)

Zbog svog fokusa na čistoću i red, flat dizajn stvara vrlo funkcionalne web stranice, gde je putovanje korisnika jasno postavljeno, a interfejs pruža malo ili nimalo distrakcija ili trenja.

Istorija Flat dizajna

Flat dizajn nastao je kao direktan odgovor na doba realizma skeuomorfizma. Evo primera sa Apple web stranice iz 2010. godine, sa preobiljem skeuomorfnih slika i ikona:

Jasno je da je trebalo nešto preduzeti kako bi se stvorio atraktivniji, intuitivniji i jednostavniji interfejs. Web sajt Apple iz 2020. godine savršen je primer kako to učiniti:

Izvor: Apple

Primetite kako je navigacija uređaja na vrhu slična onoj od deset godina ranije. Ali realizam je nestao i zamenjen je ravnim simbolima. Ne samo da je flat dizajn atraktivniji, već je i svesniji prostora.

Swiss stil

Sada, iako je tačno da su potrošači izgoreli od skeuomorfnog dizajna, flat dizajn nije stvoren samo da bude sušta suprotnost njegovom prethodniku. Zapravo je inspirisan švajcarskim stilom. Poznat i kao Međunarodni tipografski stil, švajcarski stil je bio vrsta grafičkog dizajna koja je postala popularna sredinom dvadesetog veka. Bilo je poznat po:

  • Minimalizmu
  • Rasporedu zasnovanom na mreži
  • Asimetričnom rasporedu
  • Čitljivosti
  • Širokoj upotrebi tipografije bez serifa
  • Pričanju priča kombinacijom fotografije i teksta
  • Funkcionalizamu

Primerak knjige iz 1950-ih za Neue Haas Grotesk (ili Helveticu, kakvu danas poznajemo) primer je Swiss stila:

Izvor: Istorija dizajna

Kao što vidite, mnoštvo onoga što sada koristimo u modernom (flat) dizajnu očigledno je inspirisano oštrim kontrastnim paletama boja, ravnim i sigurnim izborima tipografije i rasporedima zasnovanim na Swiss stajlu.

Microsoft i Flat dizajn

Kompanija koja je zaslužna za uvođenje flat dizajna u modernu digitalnu eru je Microsoft. Bilo je to početkom 2010. godine, kada je Microsoft počeo da prebacuje interfejse svojih proizvoda na potpuno ravno i intuitivnije korisničko iskustvo. Apple je na kraju usvojio trend 2013. A flat dizajn je nastao ubrzo nakon toga.

Flat dizajn postao je „it“ trend za sve vrste digitalnih iskustava:

  • Web sajtove
  • Aplikacije
  • Softverski interfejsi
  • Ilustracije
  • Oglasi
  • Logoi
  • Itd.

U vezi s tim, flat dizajn, kakav smo tada znali, pretrpeo je suptilan preokret poslednjih godina kako bi objasnio neke probleme sa upotrebljivošću.

Flat dizajn 2.0

Prema Nielsen Norman Group, ovo je najveće pitanje sa flat dizajnom: „Primetili smo da dugotrajna izloženost ovim flat elementima koji se mogu kliknuti, polako smanjuje efikasnost korisnika usložnjavanjem njihovog razumevanja šta se može kliknuti, a šta ne“.

Iako je interfejs flat dizajna bio čišći i lakši za navigaciju, uklonio je ključne označitelje koji su korisnicima stvorili poverenje u klikove. Na primer:

  • Podignuta dugmad
  • Podvučene i živopisne hiperveze
  • Aktivan tekst uz ikone ili dugmad

U početku je stvoren Materijalni dizajn da bi se rešio ovaj problem. Ali čak ni to nije bilo savršeno rešenje i bilo je potrebno samostalno popravljanje. Zbog toga je danas flat dizajn 2.0 (ili polu-flat dizajn) stil dizajna koji vidimo mnogo više. Potreban je pristup najboljeg iz oba sveta, kombinujući flat dizajn i dizajn materijala da bi izgledao otprilike ovako:

Jednostavni, ali smeli sans-serifi, oštro kontrastne boje i tone belog prostora i dalje dominiraju u korisničkom interfejsu flat dizajna. Međutim, vratili smo deo senčenja i slojeva kako bismo poboljšali upotrebljivost.

Prednosti Flat dizajna

Evo nekoliko razloga zbog kojih web sajtovi koje koriste principe flat dizajna imaju toliko dobru publiku:

  • Raspored zasnovan na mreži flat dizajna sam po sebi odgovara.
  • Ima stvarnu moć zadržavanja, što omogućava dizajnerima da kreiraju više web sajtova zaštićenih u budućnosti.
  • Možete da koristite flat dizajn bez obzira na to u kojoj se dizajnerskoj niši nalazite.
  • Težnja ka ravnoj, neutralnoj tipografiji i obilnom prostoru dovodi do veće čitljivosti i čitkosti.
  • Jednostavno dizajnirani elementi lakši su i brži za shvatanje od super detaljnih grafika.
  • Prepoznatljive ikone efikasno vode posetioce kroz korisnički interfejs, istovremeno štedeći prostor.
  • Intuitivni interfejsi bez ometanja poboljšavaju navigaciju na vweb sajtu.
  • Strateška upotreba boja, kontrasta i hijerarhije dovodi do boljeg angažovanja i konverzije posetilaca.
  • Mnoga njegova svojstva (npr. Minimalni korisnički interfejs, jednostavan stil fonta, boje sa visokim kontrastom) korisna su u dizajniranju pristupačnih interfejsa.
  • Minimalno dizajnirane web stranice imaju tendenciju da smanjuju opterećenje na serveru, poboljšavajući time brzinu učitavanja.

Kritike Flat dizajna

Pored gore pomenutih kritika u vezi sa flat dizajnom 2.0, flat dizajn takođe je optužen za „prekomerni minimalizam“, tj. njegov naglasak na jednostavnosti otežava razliku između grafike i vizuelnih znakova.

Ova grafika koju je na Twitteru delio Killed by Google je sjajan primer:

Izvor: Killed by Google

Google je nedavno redizajnirao sve logotipe za svoj paket proizvoda. Umesto da im dozvole da budu jedinstveno dizajnirani (i dalje su pod robnom markom), oni sada koriste istu paletu boja i geometrijske oblike. Ovo je oblik minimalizma doveden do krajnosti i nije dobar. Već žrtvujete puno finih detalja na grafici ili ikoni kada je izravnate. Ako ne pronađete jedinstveni način da razlikujete grafike koje imaju različita značenja i namene, stvorićete ogromne probleme za posetioce. Originalni flat dizajn može biti dovoljno teško dešifrovati bez vizuelnih znakova koje posetioci moraju znati kada da krenu u akciju. Poslednje što želite je da se kognitivno preopterećenje pogorša jer sve izgleda isto.

Kada treba da koristite Flat dizajn?

Kao što smo već videli, postoji univerzalna privlačnost flat dizajna. Ali nije stvar samo u tome na koem web sajtu da je koristite. Flat dizajn možete koristiti kada kreirate sledeće:

  • Setovi ikona
  • Prilagođena tipografija
  • Mobilni elementi za navigaciju (poput menija za hamburgere ili lepljivih traka)
  • UI interakcije
  • Ilustracije
  • Maskote
  • Animirani video snimci sa objašnjenjima
  • Logoi
  • Infografika
  • Grafika društvenih medija
  • Digitalni oglasi

Takođe možete koristiti principe flat dizajna u strategiji i fazama implementacije svojih projekata. Konkretno, flat dizajn je koristan u kreiranju žičanih okvira web sajtova, kao i vodiča za stil web dizajna.

Kako poboljšati Flat dizajn

Prvo prvo, obavezno koristite flat dizajn 2.0 umesto flat dizajna. Iako je potpuno flat interfejs možda u redu za neke vaše posetioce, ukupna upotrebljivost stranice će se poboljšati ako dodate određenu dubinu i kontekst oblastima sajata sa kojima želite da posetioci komuniciraju. Treba imati na umu da flat dizajn ne znači dosadno ili beživotno. I dalje možete da koristite animacije – velike ili male – da biste pružili povratne informacije, zabavili posetioce tokom utovara ili jednostavno dodali dodatnu ličnost i život u iskustvo.

Budite oprezni sa izborom boja. Iako su podebljane boje deo formule flat dizajna, one možda neće imati smisla za stil vašeg brenda. Umesto toga, obavezno odaberite paletu boja sa jakim kontrastom. To je sve što vam zaista treba da biste pojedine elemente korisničkog interfejsa istakli više od drugih.

Flat dizajn nije samo za ilustrovane web sajtove ili logotipe. Obično, kada vidimo primere flat dizajna na delu, gledamo ikone, ilustracije i druge elemente grafičkog dizajna. Međutim, flat dizajn i fotografija se međusobno ne isključuju. Možete da koristite oboje na web sajtu, sve dok se posvetite jednoj vrsti slika (npr. Ilustracije naspram fotografije).

Flat UI Kit

UI Kits mogu biti dragocen alat za dizajn kada radite sa flat dizajnom, a Envato ima nekoliko sjajnih primera za inspiraciju, poput ovog iz DeoThemes-a:

Flat UI Kit by DeoThemes

5 inspirativnih primera Flat dizajna

Previše je primera flat dizajna širom Weba. Dakle, ono što ćemo vam u nastavku pokazati je pet posebno zvezdanih primera kompanija koje su iskoristile prednosti flat dizajna za svoje web sajtove i brendiranje:

Tripadvisor

Izvor: Tripadvisor

Sa web sajtom kao što je Tripadvisor, uvek postoji rizik da sama količina dostupnog sadržaja preoptereti dizajn. Međutim, pogled na početnu stranicu samo vam pokazuje koliko je efekat flat dizajna usmeravanje posetilaca kroz složeni niz sadržaja. Osim logotipa, jedini deo gornjeg dela koji ima bilo koju boju je hero slika. A oštar kontrast između šarene slike (sjajne, ali ne i premoćne) i minimalno dizajniranog web sajta omogućava posetiocima da se usredsrede na primarnu akciju.

Netflix

Izvor: Netfilx

Web sajt Netflix je sjajan primer flat ikona na delu. Za početak, „Play“ i „More Info“ prate ikone. Ovo nije samo mala pažnja prema detaljima, ovi vizuelni znaci imaju za cilj da ubrzaju proces pronalaženja nečega za gledanje. Ne zanemarujmo ni boje dugmeta za poziv na reprodukciju „Reprodukuj“. Oštro belo dugme nasuprot ostatku mračne teme ističe se jasno kao dan. Ovo se odnosi na dugme pored preporučenog izbora (na vrhu), kao i na dugme koje se pojavljuje pri prelasku mišem (poput Abstract: Umetnost dizajna na gornjem snimku ekrana).

Anne Klein

Izvor: Anne Klein

Web sajt za e-trgovinu za Anne Klein prelepo se služi mrežom, prazninom i simetrijom za stvaranje lako navigacione prodavnice. Takođe se ima mnogo toga reći za čisti izbor dizajna – od elegantne tipografije do potpuno bele pozadine – koji zaista omogućavaju iskakanje šarenih slika.

Creative Dreams

Izvor: Creative Dreams

Ako želite da vidite primer kako da koristite flat dizajn u animaciji, posetite web sajt Creative Dreams. Snimak ekrana koji vidimo gore dovoljan je dokaz koliko je ovaj studio uspešno primenio flat dizajn. Pojedinačni žuti prozor za olovku. Pažnja do detalja u animiranom dvojcu. Veliki, čitljivi fontovi. Ovde se ima mnogo čemu za čuditi.

Visit Québec City

Izvor: Québec City

Ovo je isečak sa početne stranice turističkog web sajta grada Kvebek. Sve na ovom web sajtu vrišti flat dizajnom 2.0. Imate jake kontrastne boje, ali nisu previše svetle. Dugmad postoje na istom 2D sloju kao i sve ostalo, ali imaju vizuelne znakove (poput ikone na snimku ekrana ili animiranih strelica u drugim delovima web sajta) koji posetiocima daju do znanja da ih je moguće kliknuti. I premda svaki deo stranice živi na strogoj i predvidljivoj mreži, prelepa mešavina slika i teksta priča zadivljujuću priču.

Poboljšajte svoj web sajt Flat dizajnom

Flat dizajn možda ima svoje korene u dizajnerskom stilu od pre skoro 70 godina, ali dokazano je da ima stvarnu moć zadržavanja u digitalnom dobu. To je zato što se flat dizajn fokusira na zaista dobar izbor dizajna koji koristi našim korisnicima:

  • Čisti, otvoreni prostori za lakšu vidljivost
  • Svetli šareni markeri za jasan put do konverzije
  • Jednostavni fontovi izbalansirani sa prelepim fotografijama za efikasnije i zanimljivije pripovedanje priča
  • Dvodimenzionalni interfejsi koji pružaju putovanje kroz sadržaj bez trenja
  • Itd.

Ako je vaš cilj povećati angažman i stopu konverzije na vašem web sajtui, univerzalni Flat Design je sjajan način da se to postigne.