Flat design

Flat design kod izrade web stranica

  • 6 min čitanja

Rating

Izrada web stranica (web development) je proces izrade web stranica ili web aplikacija (aplikacija).

Ako raščlanimo proces izrade web stranice, vidimo da se sastoji od dvije stvari:
  1. programiranja ili pisanja koda web stranice
  2. dizajna ili stvaranja izgleda web stranice i vizualnog identiteta.

Govorit ćemo o flat dizajnu kod izrade web stranice.

Nakon čitanja ovog članka znat ćete:
  • što je flat design
  • kako je korišten u izradi web stranica
  • koje su prakse najbolje za slijediti.
Dizajn je vrlo važan u izradi web stranica, a posebno tijekom izgradnje web stranica. Osim stvaranja vizualno privlačnih web stranice (budimo iskreni, nitko ne voli gledati ružne stvari), postoje i drugi aspekti koje ne bismo trebali zanemariti.

Dobar web dizajn može poboljšati optimizaciju tražilice (SEO) tako što će ljudi ostati duže na vašoj stranici. Također može poboljšati elemete korisničkog iskustva- user experienca (UX) vaše web stranice što ljude čine zadovoljnijima u interakciji s vašom web stranicom.  

Što je flat design?

Prema Interaction Design Foundation flat design je stil dizajna korisničkog sučelja koji koristi jednostavne, dvodimenzionalne lemele i svijetle boje. Često je u suprotnosti sa skeumorfnim stilom koji daje iluziju tri dimenzije kroz kopiranje stvarnih životnih svojstava.

Jednostavnija definicija je:

Flat design je minimalistički pristup dizajnu koji naglašava upotrebljivost.

Flat design sadrži:
  • čist, otvoren prostor,
  • oštre rubove,
  • svijetle boje i
  • dvodimenzionalne ilustracije.
Flat dizajn ima poseban izgled i pruža poseban osjećaj bez svih dodataka. Oslanja se na jasan smisao hijerarhije u oblikovanju i postavljanju elemenata kako bi korisnici mogli lakše razumjeti uspješne projekte i imali jednostavniju interakciju s njima.

Dok sve više i više web stranica koristi načela flat design-a, možemo reći da je možda čak još popularniji kod aplikacija i mobilnog dizajna. U slučaju korištenja manjih zaslona ima i manje gumba i opcija što čini flat sučelje prilično jednostavnim za korištenje.

U nastavku prikazan zaslon "Naruči" u mobilnoj aplikaciji s jednostavnom flat ilustracijom.  


Flat design

Food finder app by Shojol Islam

 

Što spada u flat design?

Dobra vijest je da je flat design prilično jednostavno za kreirati.

Dizajner se treba fokusirati na jednostavnost i pritom koristiti:
  • snažne, kontrastne boje koje dodaju naglasak na pojedinostima unutar ikona, ilustracija itd.
  • Sans serif tipografiju u velikim i lako čitljivim fontovima koji pružaju jasne naznake za ikonu ili ilustraciju
  • čiste UI elemente koji su lako vidljivi i lako ih je shvatiti.
Sve zajedno bi trebalo doprinijeti vizualno dosljednom i funkcionalnom dizajnu korisničkog sučelja.  

Načela Flat designa

U nastavku donosimo popis glavnih načela flat design-a:

Bez dodatnih efekta

Flat design je dobio ime po oblicima koje koristi. Koristi izrazito dvodimenzionalan stil koji je jednostavno flat (ravan).

Koncept radi bez uljepšavanja– ispušta sjene, kosine, reljef, gradijente ili druge alate koji dodaju dubinu. Svaki element ili okvir, od okvira slika do gumba za navigacijske alate je oštar i nema pernate rubove ili sjene.

Jednostavni efekti

Flat design koristi mnogo jednostavnih elementa korisničkog sučelja, kao što su gumbi i ikone. Dizajneri se često drže jednostavnih oblika, poput pravokutnika, krugova ili kvadrata i dopuštaju svakom obliku da stoji samostalno. Oblik ruba može biti savršeno kutni i kvadratni ili uključivati zakrivljenost.

Fokusirajte se na tipografju

Zbog jednostavne prirode elemenata u flat dizajnu, tipografija je izuzetno važna. Ton tipografskih slova bi trebao odgovarati cjelokupnom pojednostavljenom dizajnu.

Fokusirajte se na boju

Boja je važan element flat dizajna. Dok se većina paleta boja pretežito usredotočuje na najviše dvije ili tri boje, flat design palete mogu jednako koristiti šest do osam boja. U nastavku je prikazan koncept dizajna Darka Vujića koji koristi principe dizajna kako bi stvorio lijepe ilustracije.  



Flat design

Izvor

 

Minimalistički pristup

Flat design dobro funkcionira s minimalističkim pristupom. Fokus bi trebao biti na jednostavnim bojama i fotografiji.  

Flat design na Švicarskom web-u

Flat design je prisutan na Švicarskom web-u, kao i na ostatku web-a. Pogledajmo neke primjere web stranica koje koriste flat dizajn kao svoj vizualni jezik za stvaranje jedinstvenog korisničkog iskustva.

Prvi primjer je web stranica RDT54. Oni su specijalizirani za upravljanje i koordinaciju projekata nekretnina. Vizualni sadržaji na web stranici su čisti i moderni. Web stranica se sastoji od flat ikona i oblika. Boje su podebljane i svijetle i koriste se za naglašavanje, te pomažu u razlikovanju usluga koje pružaju.  


Flat design

Izvor

 
Drugi primjer su microsite kampanje koje koriste jednostavne boje na slikama i flat (ravnim) ilustracijama kako bi na taj način ispričale priču. Uz obilje praznina i podebljanu tipografiju ovaj mikro site je učinkovit u postizanju svoje točke preko korisnika.  



Flat design

Izvor

 
Treći primjer koji donosimo je web stranica za putovanja koja omogućuje da istražite i rezervirate destinacije na koje želite otputovati na jednom mjestu. Početna stranica ima jednostavan layout. Svaka slika je ukrašena jednostavnim ilustracijama koje čine ovu web stranicu razigranom i jedinstvenom.

Flat design

Izvor


Švicarski dizajn je poznat širom svijeta zbog svoje jednostavnosti i učinkovitosti. On favorizira minimalizam i koristi teške tipografske rešetke i jednostavne geometrijske oblike. Sve te značajke se koriste u flat design-u pa je stoga flat design savršen za Švicarske domene.  

Flat design u 2019.

Flat design

Izvor


Ovaj stil dizajna je započeo kao još jedan trend, ali je tijekom godina postao standard za web design. Razlog uzdizanja flat design-a je potreba za brzim učitavanjem web stranica. Korisnici očekuju ugodno iskustvo pregledavanja web stranice na mobitelima i računalima. To se može promjeniti s porastom material design-a.

Od 2014. godine dizajn korisničkog iskustva se počeo kretati prema privlačnoj razini. Animacije, 3D ikone, značajke svjetla i sjenčanja i gradijenti postali su jedan od glavnih alata dizajna za pristup usmjeren na korisnika.

Od blagog minimalizma i oštrine flat designa pomaknuli smo se na živost, povećanu interaktivnost i prilagodjivost dizajna na različite uređaje i promjene.

Dok nas promjene dizajna polagano uvlače, neke značajke će i dalje biti korisne i prisutne. Strife za minimalizam i strukturu, te korištenje svjetlih boja i dalje će biti glavna načela odličnog web dizajna.

Primjer gore prikazuje web stranicu koja koristi flat web design s 3D efektima i animacijama.  

Zaključak

Flat design je minimalistički pristup dizajnu. Namijenjen je smanjenju složenosti dizajna i time nastoji poboljšati korisničko iskustvo.

Flat design ima sve ključne atribute koji čine web stranicu funkcionalnom onoliko koliko je lijepa. Ovaj dizajn nas dovodi korak bliže novoj paradigmi digitalnog dizajna, gdje su funkcionalnost i estetika u potpunoj ravnoteži i harmoniji.


STVORIMO NEŠTO NEVJEROJATNO ZAJEDNO!

Koliko je ovaj post bio koristan?

Kliknite na zvjezdicu da biste je ocijenili!

Prosječna ocjena / 5. Broj glasova:

Podijelite članak:

PRIJAVITE SE NA NAŠ Newsletter

Preporučeni