Meniul
AcasăBrowsere

Design plat: trecut, prezent și viitor. Design plat vs design material: care este diferența?

ÎN În ultima vreme Un stil specific în proiectarea site-urilor web și a interfețelor cu utilizatorul, care, datorită stilizării elementelor sale, a fost numit Flat, a câștigat o popularitate enormă.

Dacă vă uitați la un site web realizat conform regulilor Flat, nu veți vedea nicio tranziție de gradient, nicio umbră, nici cel mai mic indiciu de volum sau textură. Principiile de bază ale stilului plat sunt simplitatea, concizia și minimalismul. De bază trăsături distinctive- acestea sunt lucrurile pe care vă puteți concentra - culori strălucitoare neobișnuite, tipografie non-standard, primitive grafice.

Astăzi, din ce în ce mai mulți designeri folosesc această tendință în munca lor, dar stilul Flat a câștigat o popularitate deosebită odată cu răspândirea sistemelor de operare mobile moderne. Windows Phoneși iOS 7, deoarece sunt adepți ai acestei tendințe, deși nu o aderă pe deplin.

Compania noastră are deja experiență în crearea de site-uri web în stil Flat și vom fi bucuroși să vă ajutăm să creați un site web plat!

În acest articol, vom evidenția principiile de bază ale designului plat pe care ar trebui să le urmați dacă doriți să utilizați flat ca stil principal al proiectului dumneavoastră.

Mai jos vom analiza și da exemple de câteva site-uri care folosesc stilul plat.

1. Eliminați toate efectele

Principiul de bază al designului plat este crearea unei imagini bidimensionale care este deja plată în sine. În acest caz, trebuie să scăpați de toate elementele care pot adăuga cel puțin o anumită profunzime imaginii: degrade, tranziții netede, umbre, teșituri, volum, texturi și așa mai departe. Toate elementele imaginii au margini dure și, de asemenea, nu ies în evidență sau au adâncime în raport cu alte elemente ale imaginii.

În designul plat nu veți găsi elemente care încearcă să arate realiste (skeuomorfism), animație 3D, pictograme realiste etc. Cu toate acestea, designul în sine încearcă să rămână similar cu cel tradițional, dar acum etichetele, butoanele și navigarea vin în prim-plan.

La prima vedere, un site care folosește design plat poate părea prea simplu, deși, de fapt, acest stil se caracterizează printr-o ierarhie clară a elementelor, plasarea convenabilă a tuturor instrumentelor de interacțiune cu utilizatorul și, prin urmare, are un scor ridicat de utilizare.

2. Folosiți elemente simple

Pentru a-și atinge obiectivele în designul plat, designerii folosesc butoane și pictograme. Acestea ar trebui să fie cât mai intuitive și pe care se poate face clic. Ca toate celelalte elemente de interfață, acestea ar trebui să fie plate și simple, fără efecte suplimentare. Designerii folosesc adesea forme geometrice simple - dreptunghiuri, cercuri și pătrate, permițând fiecărei forme să fie un obiect separat.

3. Să ne concentrăm pe tipografie

Din moment ce conform principiul anteriorÎn timp ce grafica în design plat este simplă, un element extrem de important este tipografia - designul inscripțiilor. În designul plat, tipografia vine în prim-plan împreună cu butoanele.

Fonturile trebuie să fie lizibile și, desigur, să se potrivească cu designul, de când design simplu fonturile extrem de ornamentate vor arăta deplasate. Cu toate acestea, nu ar trebui să utilizați fonturi obișnuite, este mai bine să experimentați și să alegeți pe cel care va atrage atenția utilizatorului.

Ai putea lua în considerare combinarea unui font simplu sans-serif cu un font nou care va fi perceput ca un element de artă. Fonturile ar trebui să ajute designul să fie mai simplu și mai clar, în timp ce butoanele și alte elemente ar trebui să servească doar pentru a îmbunătăți interactivitatea.

4. Să atragem atenția prin culoare

Culoarea joacă aproape rolul principal în designul plat. Dacă studiezi cu atenție site-urile create pe baza acestui concept, primul lucru care îți atrage atenția este paleta de culori strălucitoare. De obicei este format din mai multe culori contrastante pure (fără nuanțe), două sau trei, deși acest număr poate ajunge până la opt. Mai mult, toate aceste culori sunt de obicei folosite în mod egal.

Cele mai populare culori sunt culorile primare și secundare. Adică culorile primare (cian, magenta, galben, negru) și cele obținute pe baza amestecării lor. De asemenea, foarte des, culorile retro sunt folosite în schema de culori atunci când se creează un design plat, cum ar fi somon, violet etc.

5. Minimalism

Design plat este simplu în natură și se potrivește bine cu o abordare minimalistă.

În designul general al site-ului, trebuie să evitați prea multe clopote și fluiere. Desigur, culorile și textul simple pot să nu fie suficiente. Prin urmare, dacă doriți să adăugați efecte vizuale, trebuie să alegeți fotografii simple. Unele site-uri de produse de vânzare cu amănuntul folosesc un design plat pentru a-și plasa produsele pe un fundal simplu, care nu distrag atenția.

Trebuie remarcat faptul că unele fotografii au adâncime naturală, dar în general se încadrează în planul general al designului

Care se dezvoltă aplicatii mobileși site-uri web, a scris o coloană pentru noi și a stabilit recordul în ceea ce privește designul plat și material.

De în general, diferența dintre designul plat ( Design plat) și designul materialului ( Design material) este abia perceptibilă. Pentru o persoană care nu are cunoștințe profunde despre design grafic, acestea pot părea într-adevăr foarte asemănătoare. În acest articol voi încerca să „fac lumină” asupra unora dintre diferențele dintre ele. Veți primi cunoștințe suplimentare care sunt atât de necesare pentru a nu răni accidental natura delicată a designerului.

Puțină istorie

Înainte de a începe să vorbim despre diferențele dintre cele mai populare două tendințe de design, haideți să aflăm de unde provin. Există o părere că designul materialului este creat pe baza unuia plat. Atunci de unde a venit designul plat?

Skeuomorfism

Când vine vorba de interfața cu utilizatorul și designul web, conceptul de skeuomorfism se referă la o abordare a cărei idee principală este imitația. Fără a intra în detalii, amintiți-vă înainte de interfețele Apple apariția iOS 7 cu „texturile lor realiste, lumini și efecte bombastice”.

O încercare de a face obiectele digitale să semene cu omologii lor digitale. lumea reala a fost justificată de necesitatea de a facilita interacțiunea utilizatorului cu dispozitivul. De fapt, tocmai din acest motiv au dominat toate interfețele cu texturi realiste lumea digitală pentru multi ani. Designul skeuomorphic face o treabă grozavă de a ajuta utilizatorii să tranziți fără probleme de la lumea reală la cea digitală.

Cu toate acestea, odată cu înflorirea tehnologii mobile treptat, este nevoie să ne concentrăm în primul rând pe confort și ușurință în utilizare. De acord, în acest domeniu este nevoie de a crea soluții mobile accesibile din diferite dispozitive, crește semnificativ. Și chiar în acest moment, simplitatea devine noul standard de design.

Notă: sub nicio formă nu credeți că skeuomorfismul a dispărut complet. Este utilizat pe scară largă în jocuri în care este necesar să se creeze o lume realistă și să-i ajute pe jucători să-și simtă caracterul pentru a se cufunda profund în procesul de joc.

Design plat

Acest stil este complet lipsit de orice obiecte tridimensionale. În linii mari, designului plat îi lipsesc elemente stilistice precum umbrele, texturile, degradeurile, dar acordă atenție jocului de fonturi, culori și pictograme. Dar de ce erau necesare toate acestea? Răspunsul este simplu.

În primul rând, designul plat reduce semnificativ timpul de încărcare a paginii. Absența detaliilor skeuomorfe „grele” (gândiți-vă: straturi, fonturi serif, gradienți) face ca elementele de design plate să fie „mai ușoare”, ceea ce, la rândul său, accelerează semnificativ timpii de încărcare. Mai mult, elementele plate arată la fel de atractiv pe ambele ecrane. Rezoluție înaltă, și cu scăzut.

În al doilea rând, imagini simple poate transmite ideea dvs. utilizatorilor mai rapid decât ilustrațiile detaliate: sunt schematice și, prin urmare, destul de ușor de înțeles.

Și, desigur, pictogramele plate cu un font relativ simplu pot îndrepta atenția utilizatorilor către conținut cu adevărat important.

Astăzi, designul plat a primit o recunoaștere binemeritată, dar încă are problemele sale. Cel mai evident exemplu de astfel de probleme a fost lansarea Windows 8 de către Microsoft. Acest sistem de operare este considerat un pionier al designului plat și susține conceptul de design Metro. Ceea ce a dus la probleme a fost faptul că compania a considerat necesar să acorde mai multă atenție tipografiei decât graficii în sine.

Rezultatele unui test de utilizare Windows 8 efectuat de NN Group au arătat că utilizatorii au avut dificultăți în a distinge obiectele pe care se poate face clic de cele pe care nu se poate face clic. Utilizatorii s-au plâns că obiectele care păreau statice erau de fapt pe care se poate face clic. Ca urmare, misiunea principală a companiei - de a ajuta utilizatorii să interpreteze corect sistemul - a eșuat.

O altă companie care este adesea asociată cu designul plat este Apple. S-au îndepărtat de elementele de design skeuomorfe din sala de operație mobilă sistem iOS 7, lansat în 2013. De data aceasta tranziția a fost primită puțin mai bine, în principal datorită faptului că compania nu a încercat să actualizeze complet conceptul interfața cu utilizatorul, dar tocmai a adăugat câteva modificări către designul plat. Acest lucru a permis utilizatorilor să utilizeze produsul bazându-se pe experiența lor anterioară cu sistemele de operare și site-urile web.

Design material

Să fim clari chiar acum: designul materialului este mai mult un produs de marcă decât o tendință de design spontană care a câștigat acceptare pe scară largă. Acesta este ceea ce îl deosebește în principal de designul său plat.

Numind un material de design „de marcă”, vreau să spun că are un întreg set de recomandări și principii clar definite pe care le urmează fiecare designer care se respectă. Este destul de evident de ce Google și-a introdus Material Design: a fost nevoie de unificarea designului, astfel încât aplicațiile să arate la fel pe orice multe Android dispozitive.

Deși destul de funcțional, designul plat este încă considerat greu de înțeles. Adevărul este că obiectele plate de pe ecran pot deruta utilizatorii (în special pe cei care nu au experiență în utilizarea interfețelor mobile și web). Prin urmare, designul materialului încearcă să readucă înapoi elementele skeuomorfismului, dar într-o formă mult simplificată. Imaginile par plate, mai ales când despre care vorbim despre culori, dar sunt încă multidimensionale datorită prezenței axei Z.

Cu alte cuvinte, designul material poate fi numit o versiune îmbunătățită a designului plat cu elemente de skeuomorfism - animație, umbre și straturi. În acest fel, puteți face produsul mai intuitiv în ceea ce privește navigarea și puteți evita complexitatea inutilă în stilul general.

Avantaje și dezavantaje ale designului plat

Să lăsăm în urmă istoria evoluției stilurilor și să trecem la ceva mai semnificativ - să enumerăm cei puternici și părțile slabe design plat.

  • Minimalism și stil
  • Intuitivitatea. Vă va fi mai ușor să transmiteți ideea dvs. utilizatorilor.
  • Economisirea de timp și resurse. Paginile se încarcă mult mai repede, cu un consum mai mic de lățime de bandă.
  • Concentrați-vă pe conținut. Interfața este lipsită de detalii inutile care pot distrage atenția de la informații cu adevărat valoroase.
  • Arată la fel de bine pe diverse dispozitive, fie că este vorba de un browser de PC sau de un smartphone.
  • Accelerează procesul de dezvoltare a designului site-ului web sau al aplicației eliminând atingerile inutile de design.
  • Stilul minimalist.
  • Destul de intuitiv la nivel intuitiv. Designul materialului va fi la fel de ușor de perceput atât pentru utilizatorii experimentați, cât și pentru începători.
  • Skeuomorfism moderat. Totul pare mai realist datorită utilizării axei Z (un concept unic Google).
  • Există un set de manuale care sunt actualizate constant. Prin urmare, orice designer poate apela întotdeauna la ei dacă apar dificultăți în timpul procesului de lucru.
  • Animația pentru soluții web este încurajată. Nu este nevoie să vă reamintim cât de mult le place oamenilor mișcarea. În plus, animația vă permite să faceți interfața mai clară și mai intuitivă.
  • Are un proprietar (compania Google). Prin urmare, orice întrebări și sugestii de îmbunătățire ar trebui adresate proprietarului.
  • Datorită axei Z, procesul de proiectare poate dura mai mult.
  • Elementele animate necesită mai multe resurse.
  • Respectarea strictă a liniilor directoare poate limita originalitatea unui design.

Rezuma

De fapt, una dintre abordările de proiectare luate în considerare nu ar trebui să fie considerată ca având un avantaj clar față de cealaltă, deoarece stilurile plate și materiale merg unul lângă altul. Ambele sunt incredibil de populare și ambele sunt lipsite de realism excesiv. Designul material este un succesor al designului plat, în timp ce designul plat în sine a fost o reacție la soluții prea grele și realiste. Designul material a adăugat ceva de care designul plat a încercat întotdeauna să se îndepărteze - puțin skeuomorfism. Deși un lucru va fi întotdeauna diferit între aceste abordări: designul materialului este un produs proprietar al Google, iar designul plat este rezultatul fuziunii mai multor practici de design care se străduiește în primul rând pentru simplitatea generală.

De fapt, designul plat a evoluat foarte mult în ultimii ani, de la un stil complet „plat” la unul „semi-plat”. Acum permite utilizarea straturilor și a umbrelor subtile pentru a permite obiectelor să apară mai adânc decât apăreau anterior. Deci, tu și cu mine suntem fericiți contemporani ai designului plat 2.0.

În cele din urmă, nimic nu vă împiedică să încercați să combinați aceste două abordări pentru a crea un produs cu adevărat funcțional și ușor de utilizat. Așadar, inspiră-te de la guru ai designului plat și material și apucă-te de treabă!

Astăzi ne vom concentra atenția asupra uneia dintre cele mai populare zone ale modernului design grafic, care se numește design plat.

Celebrul artist Edgar Degas a spus odată: „Arta nu este ceea ce vezi, ci ceea ce lași pe alții să vadă”. Acest lucru este valabil și pentru designul grafic, care poate fi definit și ca o artă care decide sarcina specifica. Designul grafic are capacitatea de a schimba starea de spirit și mesajul prin cele mai mici modificări de forme și nuanțe, litere și spațiere. Tendințe în acest domeniu care au devenit parte integrantă Viata de zi cu zi, deoarece influențează procesul de luare a deciziilor și rezolvă problemele de prezentare a unui produs modern și, de asemenea, modelează gusturile utilizatorilor.

Astăzi, termenul „design plat” este folosit în grafică pentru multe scopuri și sarcini care au caracteristici stilistice comune. Designul plat este o tendință care și-a găsit numeroase manifestări în domeniul produselor digitale, datorită utilizării laconice a mijloacelor expresive vizuale.

În zilele noastre, termenul este utilizat pe scară largă ca opusul „designului bogat” datorită simplității armonioase luate la baza acestei abordări. Cea mai notabilă caracteristică care dă numele acestei mișcări este utilizarea detaliilor vizuale plate, bidimensionale, spre deosebire de imaginile skeuomorfe extrem de realiste și detaliate. Designul plat s-a dezvoltat activ de-a lungul anilor. anii recenti, acoperind din ce in ce mai multe domenii ale designului grafic care gasesc aplicatii largi si variate in domeniul designului digital pentru web și mobil interfețe. Această abordare poate fi văzută ca un stil care promovează utilizarea și armonia vizuală în interfețele cu utilizatorul.


Istoria designului plat

Evident, designul plat nu a apărut din aer. Originea sa este de obicei considerată a fi stilul elvețian. Stilul elvețian, cunoscut și sub numele de International Typographic Style sau stil internațional pe scurt, este o mișcare care a luat naștere în anii 1920, dar a fost întâmpinată cu mari critici și apoi a avut o renaștere dramatică în designul grafic în Elveția în anii 1940 și 50, care a devenit o bază solidă a designului grafic de la mijlocul secolului al XX-lea în întreaga lume. Fondatorii acestei mișcări creative au fost Joseph Müller-Brockmann și Armin Hofmann.


Potrivit site-ului web Design Is History, scurta descriere caracteristici cheie al acestui stil este următorul: „... stilul axat pe simplitate, lizibilitate și obiectivitate. Moștenirea acestui stil este utilizarea fonturilor sans-serif, a grilelor și a machetelor asimetrice. Fotografiile se remarcă și ca mijloc de comunicare vizuală. Principalele lucrări influente au fost concepute ca postere, care au fost considerate cele mai multe mijloace eficiente furnizeaza informatii."


Posterele prezentate ca exemple arată că adepților acestui stil le plăceau formele simple, îndrăznețe și fonturi stricte cu un grad ridicat de lizibilitate, combinații geometrice de detalii, ilustrații plate și o ierarhie vizuală clară. Designul elvețian a devenit rapid din ce în ce mai popular în tari diferiteși a primit o nouă viață în arta începutului de secol 21.

Deși acest stil a primit numeroase expresii în domeniul designului vizual pentru tipar: postere, ștampile, carduri, coperți de cărți, reviste etc., și-a extins foarte mult orizonturile în era designului digital, în special în domeniul designului interfeței cu utilizatorul. .

Site-urile web și aplicațiile mobile au deschis o perspectivă uimitoare și fructuoasă pentru acest minimalist și abordare funcțională pentru a proiecta soluții. Stilul a fost numit „design plat”, care a devenit imediat popular și a început o nouă direcție în designul grafic.

Primul pas către creșterea popularității interfeței de utilizator plată în produsele digitale a fost făcut de Microsoft, o mișcare care a început la începutul anilor 2000 și s-a dezvoltat pe scară largă în 2010 produse, în special în dezvoltare. interfețe mobile pentru Windows Phone 7. Caracteristici cheie ale designului plat, cum ar fi forme intuitive, simple, tipografie îndrăzneață, clară, vibrante culori contrastante, umbrele lungi, lipsa detaliilor și texturilor complexe, au prins bine rădăcini. Următorul salt în popularitatea designului plat a avut loc în 2013, când Apple a lansat iOS 7 bazat pe principiile graficii plate ca bază pentru intuitiv interfețe clare. Ați putea spune, de asemenea, că unele dintre principiile cheie ale designului plat și-au găsit drumul în Material Design de la Google.


Prin urmare, principalele caracteristici ale designului plat sunt:

  • simplitatea formelor și elementelor;
  • minimalism;
  • funcționalitate;
  • tipografie îndrăzneață și ușor de citit;
  • ierarhie vizuală clară și strictă;
  • o combinație de culori contrastante care oferă o percepție vizuală rapidă;
  • evitarea texturilor, gradientelor și formelor complexe;
  • aplicarea principiilor grilei, abordarea geometrică și echilibrul vizual.

Beneficiile designului plat

Designul Fdat are o serie de avantaje care îi determină popularitatea și diversitatea în designul digital. Printre cele mai semnificative:

  • lizibilitatea;
  • ierarhie vizuală clară folosind forme, culori și fonturi;
  • organizarea eficientă a navigării rapide și intuitive în interfețele web și mobile;
  • scalabilitate ușoară pentru design receptiv;
  • sarcină neglijabilă pentru un sistem digital.

Cu toate acestea spuse, designul plat oferă un câmp larg pentru explorare creativă și concepte stilistice.


Design plat - aplicare în practică

Varietatea de stiluri de design disponibile și care evoluează în zilele noastre se pretează bine pentru designul plat datorită flexibilității și libertății artistice.

Chiar și în stadiul inițial de planificare a aspectului general, a logicii și a tranzițiilor, pot fi aplicate principiile designului plat. Instrumente și software instrumentele de proiectare digitală utilizate în această etapă crucială le permit designerilor să prezinte clienților și echipelor un aspect consecvent al tuturor ecranelor aplicației sau paginilor web și chiar și acest lucru diagrama de baza are deja caracteristici cheie de vizualizare tipice designului plat. În această etapă este ideal pentru afișare rapidă și eficientă solutii de proiectare, prezentat într-o diagramă monocromă simplă.


Design interfață utilizator

Interfețele de utilizator au devenit cu siguranță un domeniu larg și favorabil pentru designul plat. Și-a găsit dezvoltarea atât în ​​concepte abstracte de interacțiune cu utilizatorul, cât și într-o varietate de interfețe, pictograme, elemente de interfață și ilustrații originale.


Aceste tipuri de ilustrații oferă suport suplimentar pentru produsele digitale și tind să fie mai complicate în ceea ce privește detaliile și satisfac nevoile estetice ale utilizatorilor, stabilind în același timp o conexiune cu un anumit subiect.


Ilustrații tipărite

Varietatea de scopuri ale designului plat modern și popularitatea în creștere în produsele digitale au influențat, de asemenea, alte domenii ale designului, în special designul pentru produse tipărite, cum ar fi postere și coperți de cărți, din care a pornit abordarea.

Branding

Designul mărcii în zilele noastre aplică, de asemenea, cu succes principiile designului plat datorită flexibilității sale, deoarece multe produse sunt prezentate pe dispozitive sau primesc suport digitalîn internet. Designul plat în branding este adesea reprezentat în logo-uri și pictograme de aplicații.


Toate faptele și beneficiile menționate despre designul plat cu siguranță nu înseamnă că acest stil a câștigat peste alte abordări de design. Orice stil și direcție de design are avantajele și dezavantajele sale. Cu toate acestea, designul plat a deschis noi perspective, mai ales în domeniul soluțiilor personalizate care prezintă un echilibru armonios între frumusețe și funcționalitate.

A scris:

Expert în design, dezvoltare, analiză web

De la autor: Salutări, prieteni! Astăzi vom vorbi despre ce este designul plat sau designul web plat. Acest termen a câștigat mult timp inimile web designerilor și este încă în tendințe astăzi. Cele mai mari companii(Google, YouTube, Microsoft, Apple Inc. etc.) îl folosesc pentru a-și proiecta site-urile web și aplicațiile. Încă nu ești în secta susținătorilor designului de site-uri web plate? Atunci mergem la tine!

Care crezi că este motivul unei astfel de popularități sălbatice? design plat? Îți voi răspunde pe scurt: chiar funcționează! În acest articol, vă voi explica ce este acest stil, vă voi spune despre avantajele și dezavantajele sale și vă voi arăta unele excelente exemple plate design de site web care cu siguranță te va inspira la fapte mărețe. Deci să mergem!

Totul a început cu skeuomorfism

Pentru cei care nu știu, skeuomorfismul nu este un cuvânt murdar, ci un alt stil de web design. Designul plat este adesea prezentat ca opusul skeuomorfismului, care, în opinia mea, nu este în întregime corect. Aceasta este mai degrabă o simplificare decât un antagonism.

Până în 2010, skeuomorfismul a fost stilul dominant în designul interfeței. El a afișat elemente așa cum au apărut în realitate, folosind activ texturi, umbre, reflexii și alte atribute ale unei imagini tridimensionale. M-am străduit mai ales în acest sens Compania Apple, care a copiat cu atenție majoritatea obiectelor software din obiecte din viața reală.

În curând, pictogramele pseudo-convexe au încetat să atragă majoritatea utilizatorilor și dezvoltatorilor web, ceea ce a marcat începutul erei designului site-urilor plate. Lumea a ajuns la concluzia că totul elemente decorative trebuie să-l eliminați și să lăsați doar ceea ce este convenabil pentru a interacționa Utilizator final.

„Cel mai bun design este cât mai puțin design posibil”

Cum a privit în apă Dieter Rams, un celebru designer industrial care se opune designului obsesiv, efecte de animație etc. În iunie 2013, Apple Inc. a introdus revoluționarul iOS 7, care a primit toate atributele unui stil de design web plat. Cu toate acestea, avionul nu a „învins” imediat realismul și volumul.

Multă vreme, utilizatorii nu au putut uita magia lui Steve Jobs și pictogramele „pe care vrei să le lingi”. Mulți chiar și-au luat rămas bun de la „bietul șapte” și au trecut la „Android radiant”. A adăugat combustibil la foc și un numar mare de bug-uri prezente în iOS 7 și un design albicios, translucid, cu paralaxă și animație „snot” la deschiderea aplicațiilor.

Cei care s-au resemnat cu realitatea inevitabilă și au rămas cu sistemul de operare Apple și-au dat seama în cele din urmă că designul web plat nu numai că arată interesant, dar aduce și ordine și un stil vizual unitar tuturor aplicațiilor.

Avantaje și dezavantaje ale designului plat

Avantajele utilizării acestui stil includ:

claritatea compoziției și concizia ajutoare vizuale. Interfață receptivă în stilul „nimic de prisos”, datorită căreia utilizatorii își dau seama rapid ce au vrut să le transmită;

accent pe o tipografie bună. Conținutul este pe primul loc, ceea ce este extrem de important în abundența actuală de informații;

dimensiune mai mică a paginilor web și performanță mai rapidă a site-ului datorită unui număr minim de efecte vizuale. Acest lucru este util în special atunci când creați versiuni adaptive, deoarece cu cât formularele sunt mai simple, cu atât este mai ușor să le afișați mici ecrane dispozitive mobile.

Designul web plat are și dezavantajele sale:

limitând imaginația web designer-ului la culori simplificate, tipografie și iconografie. Prin urmare, riscul de a crea un site plictisitor și inexpresiv este mai mare;

lipsa tridimensionalității și a umbrelor face uneori dificil de înțeles dacă un element poate fi clicat sau nu;

lipsa unor reguli fixe specifice.

Dacă te-ai hotărât să folosești acest stil pe site-ul tău, felicitări - arată că îți pasă de experiența utilizatorului și ești la curent cu vremurile. Dacă abia începi ca designer web și nu știi cum să folosești în mod corespunzător designul plat pentru a face site-ul tău să arate relevant, fără a fi simplist, încearcă aceste sfaturi:

Uitați de „pereți de cărămidă” și fundaluri strălucitoare. Designul web plat tinde să folosească imagini simple, netede și moi pentru fundal.

Tendințele moderneși abordări în dezvoltarea web

Aflați algoritmul pentru creșterea rapidă de la zero în construirea site-ului web

Fără degrade, pictograme 3D, tranziții animate sau alte efecte speciale. Toate acestea vor face site-ul dvs. mai greu și vor adăuga agitație - aveți nevoie de el?

Utilizați pictograme plate cu contururi clare pentru a adăuga confort și funcționalitate.

Utilizați o paletă de culori strălucitoare și bogată. Acum tendința sunt tonurile din spectrul solar: galben deschis, roz și verde. Principalul lucru este să nu exagerați - nu ar trebui să existe mai mult de 3 culori pe pagină.

Concentrați-vă pe tipografie. În designul plat, preferința este luminoasă, inscriptii originale care creează un apel la acțiune și oferă navigare convenabilă pe site. Și aici este important să nu exagerați. Uitați de fonturile „scrise de mână” și alte fonturi fanteziste. Literele majuscule pot fi folosite pentru a evidenția titlurile.

Simțiți-vă liber să utilizați o varietate de forme geometrice. Pătratele, cercurile, liniile și alte forme nu numai că vor îmbunătăți structura unui site web, dar vor crea și o ierarhie clară și vor împărți conținutul. Utilizatorii vor aprecia acest lucru, credeți-mă.

Simplificați cât mai mult posibil meniu de navigatieși alte elemente ale site-ului. Pentru butoane, utilizați dreptunghiuri obișnuite fără umbre sau evidențieri.

Astfel, de-a lungul anilor, site-urile cu design plat au devenit standardul acceptat de absolut toată lumea. Uită-te la majoritatea site-urilor web moderne - sunt plate până la bază.

În cele din urmă, voi da exemplele promise de design plat de succes, care vă pot servi drept inspirație pentru a vă crea propriile capodopere.

1. Site-ul web http://dunked.com.

O platformă populară pentru publicarea portofoliilor, destinată reprezentanților diferitelor profesii creative. Designul web plat minimalist evocă sentimentul unui serviciu fiabil și ușor de înțeles, care nu distrage atenția cu efecte speciale inutile.

2. Interfață Microsoft.

Microsoft este una dintre companiile care au făcut stilul plat atât de popular. Poate vă amintiți playerul Zune, un concurent al iPod-ului, pe care Microsoft l-a lansat la mijlocul anilor 2000? Deci, designul acestui produs a fost net diferit de majoritatea aplicațiilor din acea vreme, în mare parte datorită tipografiei mari, icoane plate, forme mari și luminoase.

Această interfață, care a fost numită Metro, a migrat mai târziu la calculatoare personale(Windows 8 OS), interfață Xbox 360 și altele produse software Microsoft.

3. Site-ul web http://www.vox.com.

Ei bine, ești inspirat? Jos estetica 3D pseudo-realistă!

Asta e tot. Abonați-vă și distribuiți articolele noastre prietenilor de pe rețelele sociale. Conversii mari pentru tine!

Tendințe și abordări moderne în dezvoltarea web

Aflați algoritmul pentru creșterea rapidă de la zero în construirea site-ului web

În acest articol vă voi vorbi despre designul plat. Probabil ați auzit deja ceva despre asta, deoarece flatul a devenit unul dintre tendințele de top pe web în ultimii ani.

Astăzi vom analiza ce este designul plat, cum a apărut și de ce aveți nevoie pentru a crea un design curat, luminos și receptiv.

puteți găsi exemple bune design plat pe site-ul http://market.envato.com/. Există o mulțime de machete, pictograme și șabloane care vă vor oferi o înțelegere clară a modului în care arată designul modern .

1. Ce este designul plat?

Designul plat este un stil modern de interfață de utilizator și design grafic, caracterizat de minimalism. Designul plat se caracterizează prin utilizarea unui minim de elemente și absența diferitelor efecte de textură, umbră și lumină, de exemplu: culori mixte, degrade, evidențieri și așa mai departe.

Plat se opune skeuomorfismului( Skeuomorfismul este un principiu de proiectare atunci când unui produs i se dă aspectul altuia, adică. atunci când diferite elemente de interfață sunt copiate din obiecte reale - aproximativ traducere.) , precum și design bogat. Cu toate acestea, merită să spunem că designul plat nu este deloc atât de simplu pe cât pare la prima vedere. Include câteva caracteristici ale skeuomorfismului, dar despre asta vom vorbi puțin mai târziu.

În general, flat ajută utilizatorul să se concentreze asupra conținutului, fără a fi distras de elementele vizuale. Designul plat subliniază simplitatea elementelor, făcând în același timp interfața mai receptivă, plăcută și ușor de utilizat.

2. Puțină istorie

Designul plat, după cum știți, a existat cu mult înainte de a deveni o tendință globală pe web. Designul plat a fost destul de popular în anii 80 datorită faptului că tehnologia la acea vreme nu era încă suficient de dezvoltată pentru a suporta efecte, texturi și umbre complexe. Cu toate acestea, chiar și atunci, designul tindea spre skeufomorfism, încercând să facă elementele de interfață cât mai realiste posibil.

Designul plat, în forma în care îl vedem acum, a început să câștige popularitate după ce Microsoft a început să producă produse în așa-numitul stil metrou. Metro este un design de interfață de utilizare de la Microsoft, care este izbitor prin stil și simplitate.

În 2010 Microsoft a lansat Windows Phone 7, care folosea un design plat cu margini ascuțite și grafică simplă moștenit de la unul dintre produsele sale anterioare. Microsoft (Zune). Mai târziu, inspirat de succes, Microsoft a lansat sistem de operare Windows 8, bazat pe același stil plat Metroul.

La urma urmei, designul plat a atins apogeul în popularitate în 2013, când Apple a lansat iOS 7 demonstrând fundamental design nou cu elemente de interfață cu utilizatorul complet reproiectate, inclusiv pictograme și fonturi. Compania Apple creată principiile vizuale ale UI și designul pictogramelor .

Curând după aceea, Google a început să folosească și stilul plat în aplicațiile și paginile sale web, numindu-l Design material. Google are chiar și o întreagă secțiune dedicată acestui stil, inclusiv o descriere a obiectivelor designului web, principiile și liniile directoare ale acestuia pentru crearea. diverse obiecte design: pictograme, machete și așa mai departe.

De atunci, flat a devenit o tendință cheie în design web, făcând site-urile web, aplicațiile și elementele de interfață elegante, curate și stilate.

Astfel, există trei exemple globale de design plat de la companii fără de care este dificil să ne imaginăm lumea modernă a tehnologiei:

Designul Microsoft Metro

Design Apple iOS 7

Designul materialelor Google

3. Amintiți-vă să fiți curat

Designul plat este aparent numit „plat” din cauza lipsei elementelor tridimensionale și a efectelor realiste precum degrade, texturi, lumini, semitonuri, umbre. Amintiți-vă, stilul plat este un mod bidimensional (plat) de a reprezenta obiecte.

Mai mult, în designul plat, obiectele sunt descrise într-un mod foarte simplificat și stilizat.

Și uneori sunt folosite chiar și doar silueta sau contururile obiectului, de exemplu. doar suficient pentru a face obiectul ușor de recunoscut, dar să nu îl supraîncărcați cu detalii minore.

Minimalismul a devenit o tendință globală în aceste zile: simplitatea formelor și utilizarea marginilor ascuțite creează un design curat și plăcut. Forme simple mai ușor de înțeles și mai ușor de înțeles. Acest lucru păstrează designul minimalist și curat, fără a-i oferi un aspect ocupat și aglomerat.

4. Aduceți-l la perfecțiune

Știți că atunci când vine vorba de crearea pictogramelor plate și a elementelor de UI, trebuie să le faceți să arate clare, îngrijite și perfecte în pixeli, de exemplu. cat mai mult posibil. În plus, acest lucru se aplică atât graficelor raster, cât și graficelor vectoriale.

Totul este clar aici cu Adobe Photoshop: funcționează cu grafică raster, care se bazează pe pixeli.

Cu privire la programe Adobe Illustrator folosește grafică vectorială formată din curbe și linii numite vectori, care sunt definite prin formule matematice.

Cândva, Adobe Illustrator nu era prea mult un program convenabil pentru a crea o grafică perfectă în pixeli. Vestea bună este că cele mai recente versiuni de Illustrator au devenit un instrument grozav pentru a crea o grafică bună.

Trebuie să spun că Grafică vectorială implică în principal lucrul cu simple, forme plate, culori pure și grile. Adobe Illustrator este foarte flexibil în setări și vă permite să adaptați grila la nevoile dvs., să aliniați obiectele și să utilizați Tipuri variate pocnind. Acest lucru facilitează crearea designului perfect care arată curat și elegant pe orice afișaj. Dacă doriți să învățați cum să creați o grafică perfectă, atunci ar trebui să citiți articolul: Cum să creați lucrări de artă perfecte cu pixeli folosind Adobe Illustrator .

5. Culoare

Una dintre cele mai specifice caracteristici ale designului plat, pe lângă umbre, este utilizarea culorii. Majoritatea culorilor pe care designul plat le folosește în elementele sale constau în doar câteva culori de bază.

Culoarea în designul plat este strălucitoare, bogată și bogată.Schema de culori plate nu se limitează la câteva culori speciale, conține multe nuanțe, iar alegerea lor depinde doar de ceea ce înfățișați, fie că este vorba de icoane de dulciuri sau de obiecte în stil retro într-o paletă retro sofisticată.

Să presupunem că sunteți un designer de UI și sunteți bine versat în paletele de culori, experimentați cu panoul de culori în programe Photoshopși Illusstartor, amestecând culorile după bunul plac. Cu toate acestea, acest proces este destul de complex și necesită o bună intuiție, experiență și abilități. Aici veți găsi câteva instrumente care vă pot ajuta să vă creați propria paletă de culori.

Unele dintre ele sunt potrivite pentru toate tipurile de design și ilustrație, nu doar pentru design plat. De exemplu, Adobe Color CC, mai cunoscut sub numele de Cooler. Astăzi există acces la acesta, atât prin intermediul site-ului web, cât și direct prin intermediul produse Adobe. Cooler este un instrument foarte flexibil care vă permite fie să vă creați propria paletă de culori, fie să alegeți dintr-o paletă personalizată dintr-o bibliotecă.

Un alt generator de palete de culori simplu și convenabil este Coolors. Doar apăsați bara de spațiu și programul va genera o paletă de culori, puteți ajusta culorile, există și o funcție de export.

Există câteva alte servicii similare cu palete personalizate care pot fi utile. Cu toate acestea, există un instrument creat special pentru designul plat. FlatUIColors.com de Designmodo - un serviciu cu un set de culori „plate”, foarte convenabil pentru muncă. Acest site a devenit foarte popular printre designerii care caută soluții bune de culoare pentru un design perfect. Incearca-l!

Și puteți găsi, de asemenea, o varietate mai mare de culori și palete Ghidul Google pentru design de materiale.

6. Umbre lungi

După cum am menționat mai sus, designul plat se caracterizează prin simplitate și mult spațiu liber - motiv pentru care designul plat respinge utilizarea oricăror efecte. Cu toate acestea, există un efect care este tipic pentru designul plat. Acest efect a devenit o tendință și trăsătură caracteristică flata.

Acum vorbim despre umbre lungi. Ele au câteva caracteristici tipice care fac ca acest efect să fie recunoscut, și anume: o înclinare de 45 de grade și marime mare(umbra poate fi de câteva ori mai lungă decât subiectul însuși. Drept urmare, umbrele lungi dau apartamentului un anumit efect de profunzime.

Acest efect face obiectul mai tridimensional, dar în același timp păstrându-l în contextul designului plat.

7. Lucrul cu fonturi

Tipografia joacă un rol important în designul plat. Adesea textul devine elementul principal al compoziției.

Modelele plate folosesc de obicei stiluri de font simple, făcând întregul design curat și lizibil. Puteți găsi multe fonturi gratuiteîn Adobe Typekit dacă utilizați produse Adobe. Veți găsi, de asemenea, o mulțime de fonturi gratuite bune pe Font Squirrel. Dar nu uitați să citiți licența dacă intenționați să utilizați fontul în scopuri comerciale.

Cel mai adesea, în designul plat, se obișnuiește să se folosească majuscule și culori contrastante, acest lucru face textul mai lizibil.

Folosiți fonturile cu moderație, amintindu-vă că acestea ar trebui să completeze și să completeze designul, mai degrabă decât să apară ca un element separat. Acest lucru nu înseamnă că nu puteți utiliza fonturi serif sau scrise de mână. Nu uitați să fiți minim și să păstrați totul în echilibru. Cu toate acestea, flat încă folosește adesea fonturi sans-serif, deoarece arată mai strict și mai îngrijit.

8. Avantaje și dezavantaje ale designului plat

Chiar dacă designul plat a devenit atât de popular datorită numeroaselor sale avantaje, există încă unele dezavantaje cu care se confruntă designerii atunci când folosesc acest stil. Să ne uităm la argumentele pro și contra.

pro

Popularitate

Designul plat a devenit o tendință, câștigând din ce în ce mai multe recenzii pozitive de la designeri și web designeri și nu pare să-și piardă deloc poziția. Dimpotrivă, se răspândește din ce în ce mai mult, dobândind câteva forme și caracteristici noi, devenind din ce în ce mai creativ.

Simplitate

Designul plat este simplu, minimalist și curat. Flat on web îi ajută pe utilizatori să se concentreze pe conținut, mai degrabă decât să fie distrași de elemente vizuale. Acest lucru funcționează și pentru interfețele aplicațiilor mobile: design curat cu nasturi mari face utilizarea dispozitivelor mobile perfectă.

Luminozitate

Culoarea este un alt plus cool în designul plat. Luminoasă și culori bogate arată atractiv și curat, iar lipsa degradeurilor face ca designul să fie elegant. În plus, astfel de culori pure îl fac mai pozitiv și mai prezentabil; designul plat creează o stare de spirit potrivită.

Defecte

Flat are mult mai multe avantaje, dar niciun design nu este perfect și nu îl putem idealiza. Iată câteva dezavantaje ale designului plat pe care trebuie să le menționăm:

Lipsa de răspuns

Uneori, lipsa detaliilor importante sau a efectelor vizuale face ca procesul de creare a unei interfețe prietenoase cu utilizatorul să fie dificil și, în general, acest lucru face ca întregul design să nu răspundă. Nu toți utilizatorii se simt confortabil cu flat, deoarece poate fi dificil să găsiți elemente pe o pagină web pe care trebuie să faceți clic sau să atingeți pe ecran telefon mobil deoarece nu sunt interactive.

Probleme cu tipografia

După cum am menționat mai devreme, nu orice font poate fi potrivit pentru designul plat. Uneori, un font atât de bogat, cu margini ascuțite, arată cu adevărat echilibrat și elegant. Cu toate acestea, dacă fontul este ales incorect, acesta poate ruina întregul design. Ar trebui să aveți o senzație foarte bună pentru care fonturi sunt potrivite pentru plat și care nu. Lipsa de experiență face alegerea unui font foarte dificilă.

Vizual slab

Datorită limitărilor în utilizarea efectelor, culorilor și fonturilor, modelele plate pot părea prea simple și reci. Minimalismul său poate fi, de asemenea, principalul său dezavantaj - alte modele plate ajung să arate exact la fel ca ale tale. Prin urmare, este foarte dificil să faceți pictogramele sau paginile dvs. web să arate diferit de designul altcuiva, deoarece utilizați aceleași forme simplificate, limitate. palete de culoriși fonturi similare. Drept urmare, designul plat poate deveni plictisitor în timp.

9. Tendințele viitoare de design plat

Nu se poate spune că designul plat s-a format pe deplin și s-a oprit pe drum, poate din cauza deficiențelor sale menționate mai sus; designul plat tinde spre dezvoltare și schimbare, dobândind noi caracteristici și sporind expresivitatea vizuală.

Dacă te uiți cu atenție la ultimul exemplu de design plat, s-ar putea să observi că într-adevărse îndepărtează treptat de instrumentele sale stricte și începe să adauge efecte subtile, cum ar fi: degrade, umbre, iluminare și alte efecte vizuale.

Aceste mici atingeri conferă designului plat o oarecare profunzime, fără a fi prea detaliat, cum ar fi modelele skeuomorfe. Aceste îmbunătățiri subtile fac apartamentul mai receptiv și mai confortabil și, de asemenea, aduc un aspect proaspăt, făcând apartamentul mai flexibil și versatil.

Astfel, flatul nu își pierde caracteristicile, ci devine mai interesant și mai flexibil- chiar se face mai bine.

concluzii

Astfel, am discutat câteva fapte din istoria designului plat și am vorbit despre culori, forme și tipografie. Ne-am uitat la diferite puncte de vedere, ne-am concentrat pe avantajele și dezavantajele designului plat și am învățat câteva dintre principiile principale ale creării unui design bun.

Sper că ai învățat singur informație nouă din acest articol sau cel puțin l-a găsit interesant. Vă datorați să încercați să creați un design plat dacă nu ați făcut-o înainte.

La urma urmei, ce altceva este de menționat despre designul plat?

Dacă vă place foarte mult platul cu marginile sale ascuțite, culorile bogate și fonturile clare, curățenia și minimalismul, atunci mergeți la el!

Este la modă, dar ca în orice altceva stil grafic, nu te limita la o singură tehnică. Doar pentru că flatul este la modă nu înseamnă că nu poți folosi alte stiluri în proiectul tău. Skeuomorfismul, cu detaliile și texturile sale minuscule, poate deveni și el buna decizie. Principalul lucru este să ne amintim că designul este diferit pentru fiecare proiect, trebuie să-și exprime spiritul, scopul, esența, rămânând în același timp convenabil și funcțional. Redirecţiona!