Design plat: de ce designul a devenit plat

Flat - design (design plat) este un stil popular în proiectarea site-urilor web și a interfețelor, precum și a sistemelor de operare, trăsătură distinctivă care este simplitatea, rafinamentul și minimalismul. Designul plat a început să câștige popularitate în 2010, ca opusul skeuomorfismului.

Skeuomorfism- un ornament fizic sau un element de design care este copiat din forma altui obiect, dar realizat din materiale diferite sau folosind metode diferite. Exemplele includ ceramică decorată cu nituri de imitație pentru a semăna cu vase similare din metal sau un calendar de computer care imită aspect pagini de hârtie de legare calendar de birou(definiție din Wikipedia).

Popularizarea stilului plat în design a fost facilitată de lansarea sistemului de operare Windows 8 de la Microsoft în stilul Metro, precum și iOS 7, în care Compania Apple selectează și stilul plat. După aceasta începe adevărata eră a designului plat. În curând companiile mari vor trece și la Flat-design servicii de căutareși aplicații - Google, Youtube, apar multe site-uri care folosesc principiile stilului plat în designul lor. În ultimii ani, designul plat a fost lider în tendințele globale de design de site-uri web.

Beneficiile designului plat

Practicitate- utilizarea designului plat vă permite să minimizați numărul de stiluri, scripturi și animații, ceea ce permite site-ului să se încarce mai rapid.
Usor de adaptat- designul plat este suficient de ușor de adaptat la diferite rezoluții ale ecranului.
Ușurință în utilizare- datorita stilului simplificat, utilizatorilor le este mai usor sa perceapa informatiile de pe site.
frumuseţe- imparțialitatea externă și design-urile simple vă permit să vă concentrați pe un design care vă prinde cu adevărat.

5 principii ale designului de site web plat

Designul plat nu este deloc plictisitor, așa cum ar părea la prima vedere. Datorită purității și rafinamentului lor, soluțiile de design pot fi elegante și frumoase, fără zgomot inutil, permițându-vă să vă concentrați asupra produsului sau serviciului dvs.

1 - Utilizarea obiectelor 2D

Designul plat exclude utilizarea elementelor care dau profunzime și volum unui obiect: umbre, degrade, evidențieri, texturi, reflexii, animație. Când un obiect este fotografiat, sunt afișate doar contururile acestuia.

2 - Icoane și obiecte simple

Utilizarea pictogramelor plate și a formelor monosilabice cu contururi clare și aceeași culoare vă permite să simplificați cât mai mult posibil designul și să îl faceți mai ușor. Comenzile devin intuitive de înțeles utilizatoruluiși încurajează interacțiunea.

3 - Fonturi simple în stilul de design

Se acordă multă atenție tipografiei și fonturilor în design plat. Literele italice nu sunt folosite aici; fontul se încadrează armonios în designul site-ului, nu numai în conținut, ci și în navigare. Chiar și în tipurile de fonturi pentru site, stilul minimalist este încurajat.

4 - Jocul culorilor

Designul plat conține mai multe culori primare, care exclud utilizarea tranziții netedeși degrade, dar pot fi luminoase și contrastante între ele.

5 - Minimalism

Designul plat presupune utilizarea vizualizării elementelor, folosind întreaga lățime a ecranului și în același timp minimizând informațiile.

Există așa ceva ca un design aproape plat. Acesta este unul dintre conceptele de design plat pe care le utilizează elemente simpleși spațiul bidimensional. Un exemplu în acest sens ar putea fi fotografie de înaltă calitate, care se estompează în fundal sau întunecat. Acest lucru vă permite să creați adâncimea și perspectiva obiectului.

Exemple de design plat

Pe Internet, inclusiv în segmentul belarus, puteți găsi multe exemple de dezvoltare de site-uri web cu design plat în subiecte diferite, inclusiv resurse de știri, portaluri și chiar magazine online.

Î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, lumini ș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 anterioare Microsoft (Zune). Ulterior, inspirat de succes, Microsoft a lansat sistemul de operare sistem Windows 8, bazat pe același stil Metro plat.

La urma urmei, designul plat a atins apogeul în popularitate în 2013, când Apple a lansat iOS 7, cu un design complet 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 greu de imaginat lumea modernă tehnologii:

Designul Microsoft Metro

Design Apple iOS 7

de la Google Design material

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

Designul plat este aparent numit „plat” din cauza lipsei elementelor tridimensionale și efecte realiste precum: degrade, texturi, evidențieri, 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.

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

Referitor la program Adobe Illustrator, apoi folosește grafică vectorială, constând din curbe și linii numite vectori, care sunt specificate prin formule matematice.

Cândva, Adobe Illustrator nu era prea mult un program convenabil pentru a crea o grafică perfectă în pixeli. Vești bune este asta ultimele versiuni Oțel ilustrator 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.

Vorbim acum 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 design plat este obișnuit 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țe aplicatii mobile: design curat cu nasturi mari face uz dispozitive 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. Mai mult, așa culori pure faceți-l mai pozitiv, 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 efecte vizualeîngreunează procesul de creare a unei interfețe ușor de utilizat și, în general, face ca întregul design să nu răspundă. Nu toți utilizatorii se simt confortabil cu flat, deoarece poate fi dificil să găsești elemente pe o pagină web pe care trebuie să dai clic sau să apeși pe ecranul unui 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 flat ș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!

Cine dezvoltă aplicații mobile și site-uri web, a scris o rubrică pentru noi și a pus totul la locul lui în ceea ce privește designul plan și material.

De în general, diferența dintre Flat design și Material Design este subtilă. 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, Disponibil de la 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, icoane plate cu comparativ cu font simplu poate î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 Ediția Windows 8 de la 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 de interfață cu utilizatorul, ci pur și simplu a adăugat câteva modificări către un design plat. Acest lucru a oferit utilizatorilor posibilitatea de a utiliza produsul bazându-se pe experiența lor anterioară cu sisteme de operareși site-uri 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 oricare dintre multele dispozitive Android.

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. Interfata fara detalii inutile, care poate distrage atenția de la informații cu adevărat valoroase.
Arată la fel de bine diverse dispozitive, fie că este un browser pentru computer sau 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 Google, iar designul plat este rezultatul fuziunii mai multor practici de proiectare, 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ă!

Nu știm dacă ai observat sau nu, dar În ultima vreme(mai ales în ultimul an) a existat o tendință clară în designul web în întreaga lume către simplificare, minimalism robust și ușurare vizuală a ceea ce noi, ca utilizatori, interacționăm în fiecare zi. Mai simplu spus, designul a devenit „plat”: spre deosebire de icoanele convexe ale vremurilor de creștere rapidă retele socialeși web 2.0, acum suntem din ce în ce mai întâmpinați de pictograme simple ale noilor servicii. Toate acestea și-au luat numele - design plat. Nu apartament, ci apartament.

Odată cu prezentarea de ieri a noului sistem de operare mobil, iOS 7, Apple a confirmat în sfârșit creșterea rapidă a popularității acestei tendințe, încântând în mod tradițional unii dintre fanii săi, dar întâmpinând și nemulțumiri semnificative în rândul utilizatori experimentațiși designeri. Ce s-a întâmplat? La ce folosește acest design plat și are lumea într-adevăr nevoie de el? Am decis să apelăm la experți din Ucraina și din străinătate.

Le-am rugat să răspundă la trei întrebări principale:

de ce lumea a început să se îndrepte către design plat pe web și mobil și ce este acesta;
ce va oferi acest lucru Apple și iOS 7;
cum îi va afecta acest lucru pe designeri, pe de o parte, și utilizatorii, pe de altă parte.

Denis Sudilkovsky, Kiev
Specialist Interaction Design, producător Prodesign.in.ua

„Efectul de pendul” în prezicerea viitorului se manifestă prin faptul că, dacă există două extreme într-o anumită problemă, umanitatea se va balansa dintr-o parte în alta. Acest lucru este, fără îndoială, adevărat pentru proiectarea sistemelor interactive. Web-ul plat și neinteresant de primitiv s-a schimbat la un moment dat în butoane voluminoase bazate pe web. Vizualizările interfeței au atins apogeul realismului și pendulul zboară spre reversul- plat&simplu.

Ce va obține Apple din asta? Își va păstra locul în tendință și sute de mii de comentarii că iOS-ul lor devine foarte asemănător cu Android.

Designerii vor trebui să evolueze (și nu glumi despre când designul plat va ajunge la inginerie mecanică și ne va oferi mașini plate :). Când nu există decor, toată munca constă în crearea unei stări de spirit cu conținut pentru un anumit scenariu cu utilizatorul. Această profesie va avea din ce în ce mai multe în comun cu Regizorul decât cu Artistul. Utilizatorii, dimpotrivă, primesc experienta nouași noi impresii. Personal, am fost adept iPhone de 4 ani, dar în această primăvară mi-am schimbat telefonul pe Android din singurul motiv - m-am săturat de idealitatea monotonă a interfeței Apple.

Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se

În primul rând, aș dori să subliniez că nu îmi place termenul „design plat”. Majoritatea designului grafic de secole a fost „plat”. De asemenea, cred că îți limitează capacitatea de a face design remarcabil, când alegerea este între plat și altceva. Designul poate fi mult mai mult decât atât. Vesel, strălucitor, întunecat, pozitiv, minimalist - îl poți numi cum vrei. Dar astăzi rareori aud pe cineva să considere designul ca fiind ceva mai mult decât plat sau scleromorf. E puțin trist.

De ce web-ul și mobilul se îndreaptă lent către designul plat? După cum văd eu este că este doar o tendință. Nu am văzut niciodată articole despre beneficiile designului plat în interfețele utilizator și încă nu sunt convins de asta. Design simplu și clar - da, dar nu este același lucru cu „plat”. Uită-te la Google, de exemplu. Ei nu fac modele complet plate, ei - și împărtășesc acest punct - încă văd nevoia de profunzime și variație.

Am fost foarte surprins când Microsoft și-a ales această direcție în urmă cu câțiva ani, prezentând celebrul stil Metro. De fapt, au folosit design grafic pentru semne mari pe care oamenii le privesc de la anumite distanțe și nu interacționează niciodată cu mici ecrane cu un număr semnificativ de elemente. Arată frumos, dar au o utilizare bună?

Ceea ce am văzut de la Apple aseară a fost doar o copie proastă a mai multor desene interesante, care au apărut pe site-uri precum Dribbble și Behance anul trecut. Nu am văzut nimic nou - cu excepția faptului că este departe de a fi același " Apple vechi" Steve Jobs. Compania a arătat că nu este în fruntea designului interfețe mobile. Desigur, vom vedea fanii adoptând toate aceste modele albe și degrade creative în următoarele câteva luni, dar nu cred că acest aspect va fi la fel de impact precum închiderile recente ale Google. Dar, pe de altă parte, oricum ar fi, Apple a fost întotdeauna un trendsetter și o inspirație pentru mulți oameni, inclusiv pentru mine.

Cu privire la utilizatorii obișnuiți, atunci le plac culorile strălucitoare.

Ivan Klimenko, Kiev
designer de interfață mobilă, 5tak.com

ÎN într-o mare măsură Sunt pasionat de aceasta situatie stiluri plate putin filozofic. Nu este prima dată când designerii au devenit interesați de minimalism și materiale artificiale. Totul trece.

Epoca Bauhaus din anii 20-30 a adus o contribuție uriașă la design, dar totuși, etanșeitatea tonale și artificialitatea nu au putut rezista dorinței și îndemnului interior al oamenilor de a exista înconjurați de lucruri mai naturale.

Apoi, în anii 60, toată lumea a început să admire plasticul.

Mobilierul, vasele și chiar hainele sunt toate din plastic. Părea că aceasta era o nouă speranță pentru umanitate, dar din nou nu - oamenii s-au întors foarte repede la forme naturale sau la copii ale materialelor naturale.

Contrastul rigid de forme și grafica minimalistă au exprimat întotdeauna acumularea conflicte interne in cadrul societatii. Designul este doar o oglindă care arată lumea noastră interioară. Se întâmplă prea multe. Viața se accelerează foarte mult și pur și simplu nu avem timp să ne gândim și să ne gândim la nimic. De multe ori nu avem timp să trăim.

Minimalismul și toate aceste hardware electronice sunt doar un pas pe drumul către ceva mai natural și mai uman. Mai mult decât un alt computer. Sunt chiar trist că Apple, care a știut să privească profund, nu mai există.

Olesya Grichina, Kiev
Designer UI la Componentix, twitter: elendiel

Cred că designerii au fost foarte influențați un numar mare de gadget-uri cu marimi diferite ecran și rezoluție - pentru toată această varietate este mai ușor să creați un design fără texturi, umbre complexe, care țin cont corect de iluminare etc. Au început să se gândească mai mult în direcția „cum să-l facă mai convenabil pentru utilizator”, mai degrabă decât „cum să deseneze frumos”. Conținutul este principalul lucru, iar în munca noastră este important să-l prezentăm în cel mai bun mod posibil.

Mi se pare că modificări externe(interfață de utilizare plată, pictograme) în special nu am observat modificări serioase în ușurința în utilizare și modul în care oamenii înjură acest subiect. Când verifică dacă funcționează, va începe să spună: „Ohhh, cât de convenabil și de ce nu au făcut asta înainte?” Sper că acest lucru îi va influența pe designeri în așa fel încât aceștia să acorde mai multă atenție utilizării interfeței, mai degrabă decât texturilor și umbrelor. În final, va fi posibil să explicăm clienților că aceasta este o tendință :)

Cred că designul plat nu va afecta în mod deosebit utilizatorii - dacă le este convenabil să creeze și să consume conținut, vor fi mulți oameni mulțumiți. Dar icoanele pe Ecranul de start inca acid :)

Pavel Grozyan, Kiev
Designer de produs la MacPaw, grozyan

"Măr! A-ha-ha, oprește-te! - Designerii strigă. - Ura, a devenit mai ușor. - utilizatorii scandează." Înțeleg ambele puncte de vedere. Astăzi, după prezentarea de la WWDC2013, mulți dintre colegii mei s-au ridicat și au spus: „La naiba cu această meserie! Oricine poate desena o asemenea prostie acum. Și aceste icoane pentru 30 de dolari?!" Și la prima vedere, au dreptate, dar dacă sapi mai adânc, îți dai seama că există mii de obiecte care pentru o lungă perioadă de timp se deosebeau unul de altul doar prin scenariul de utilizare, apoi prin formă, apoi prin culoare și abia apoi prin detalii artistice. Îmi amintesc vremurile când toți acești tipi de pe profilurile LinkedIn care astăzi spun UX, UI Designer, copiau nervos efectul de umbră albă al literelor. Ca Apple. Apoi locuri de lumină și lumină. Ca Apple. Apoi interfețe bogate în texturi și realism. Ca Apple. Toată munca lor a constat în copiere, deoarece nu exista un concept de dezvoltare original, unificat și convenabil pentru toată lumea. Aceasta este exact problema pe care designul plat o rezolvă astăzi. Deși mi se pare greșit să o numesc așa. Este bine că Microsoft nu l-a inventat și s-a format cu zece ani înainte de era digitală, în domeniul publicării.

Plat - nu este pentru clicuri, este pentru clicuri, robinete, robinete. Nu îl puteți numi plat - absența texturilor „groase” și a umbrelor pe butoane îl face destul de simplificat și fără agresiune vizuală. Și nu te poți descurca fără degrade pentru butoane. Sustin acest trend. Dacă nu interferează cu calitatea experienței utilizatorului, va fi mai ușor pentru toată lumea să trăiască. În primul rând utilizatorului. În al doilea rând, pentru creator: va fi mai ușor implementare tehnică, mai convenabil pentru clic (sublinierea linkurilor - salut) și multi-platformă - combinând web, mobil și desktop într-o singură experiență unificată. Fără îndoială, aceasta este o mișcare îndrăzneață pentru Apple. Și numai ei pot decide în privința asta. Povestea lor are zeci de confirmări, așa că au șanse mai mari să reușească decât invers.

Designul plat este una dintre principalele tendințe de astăzi, atât în domeniul web design-ului, cât și al tehnologiilor de creație interfețe cu utilizatorul. Dintre exemplele recente, cel mai notabil ar fi: pasul decisiv Microsoftîn această direcție, cu Windows 8 și noul său Design Google, cu o demonstrație clară a dorinței de a pătrunde în minimalism.

Iată exemple de elemente care definesc .

Viața după Web 2.0

Sub formă de forme rotunjite de elemente cu tot felul de efecte - 3D, umbre, lumini și reflexii, degrade, embosing. Într-un cuvânt, tot ceea ce creează profunzime și volum. Comenzile mari, luminoase, luciul, texturile și alte expresii similare fac loc reprezentărilor simple, bidimensionale ale obiectelor vizuale.

Float Design

Tipografia în centrul stilului

Vă rugăm să rețineți că aceasta este baza pentru construirea unui site „plat”. Simplitatea elementelor de design Flat, precum și principiile minimalismului în sine, sporesc semnificația tipografiei. Este posibil, în principiu, să înlocuiți unele dintre graficele sau imaginile grele cu conținut text. Astăzi, pe multe site-uri web, tipografia a devenit design. Desigur, deoarece designul plat este adesea minimalist, natura fonturilor trebuie să fie în concordanță cu schema generala, stil și compoziție. De exemplu, literele mari sunt adesea folosite pentru elemente sau titluri.

Coderwall

Citeste si: 12 culori primare și exemple de percepție a acestora de către utilizatori

Paleta de culori cu design plat

Designul plat se îndreaptă, de asemenea, către o mai mare diversitate a culorilor. Designerii web folosesc din ce în ce mai mult paletele de culori pentru a implementa poate cel mai de bază principiu de design: un site web ar trebui să fie diferit de colegii săi.

Maimuță minimă

Spatiu liber, elemente mari

De la început până la sfârșit are o bază minimalistă, ceea ce înseamnă că își adoptă principiile de bază: blocuri mari de conținut, elemente mari, spatiu liber, lipsa tam-tamului inutil si pretentiozitate.

Design de barbă

Design plat de icoane, butoane, ilustrații

Butoanele, pictogramele, insignele și ilustrațiile capătă, de asemenea, un aspect 2D. Acestea trebuie să corespundă stilului specificat pe toate paginile site-ului, să transmită starea de spirit a site-ului în sine și să fie ușor de înțeles pentru orice utilizator.

Selectarea culorilor pentru pictograme, precum și a pictogramelor în sine - nu este o sarcină ușoară. Puteți folosi culori pure. În efortul de a decora designul, trebuie să vă gândiți cum să faceți site-ul ușor de utilizat. Pe de o parte, este important să nu încălcați stilul, dar, pe de altă parte, este necesar să faceți icoanele vizibile. În ilustrații ne străduim pentru minimalism, evitând efectele 3D populare anterior.

Citeste si: Peste 20 de site-uri web inspiratoare cu ilustrații plate în design