Designul plat a devenit popular recent pentru aplicații și site-uri web. Acest lucru nu înseamnă că toată lumea iubește acest stil, dar cu siguranță nu este potrivit pentru toate aplicațiile și site-urile. Dacă există multe avantaje ale unui design plat, cum ar fi simplitatea și minimalismul, făcându-l mai ușor de utilizat. Pentru unele aplicații, designul plat poate fi prea simplu. Adică, merită să adăugați niște umbre sau degrade pentru a-l face să arate mai bine.

Mulți susțin că designul web plat este un design eficient. Ei spun că aceasta este o modalitate de a face proiectul cât mai ușor de utilizat. Iată câteva exemple inspiratoare de proiecte de design plat. Această selecție din diverse portofolii este excelentă pentru a înțelege modelele plate care funcționează de fapt.

ISSLlandul

Ianuarie Creative

Maimuță minimă

Ce este designul plat?

• Designul plat se concentrează pe utilizator
• Designul plat este simplu
• Design plat - mai puține degrade
• Designul plat include linii drepte și colțuri pătrate
• Utilizați de obicei un contrast puternic de culoare
• Designul plat nu are umbre, teșituri, texturi sau orice altceva care arată 3D
• Designul plat există doar în 2 dimensiuni
• Design plat - o tendință spre simplitate și minimalism
• Design plat - nu utilizați efecte suplimentare
• Nu există plusuri
• Design plat - mai puține butoane și truse pentru caroserie
• Designul plat înseamnă concentrarea pe fonturi
• Combinațiile de culori, culorile contrastante și variațiile interesante de culoare sunt componente importante ale designului plat.
• Designul plat este unul dintre multele modele. Este potrivit pentru unele proiecte, dar nu pentru altele.

Ce nu este designul plat?

• Designul plat nu este skeuomorfism sau design care emulează forma și contururile „realității”.
• Designul plat nu include nasturi strălucitori
• Designul plat nu include decorațiuni
• În designul plat, nu veți găsi idei tradiționale despre „adâncime”
• Designul plat nu se potrivește tuturor proiectelor

Este designul plat doar un design eficient?

Unii oameni consideră că designul plat este un design eficient în sine. Adică simplifică utilizarea site-urilor și aplicațiilor, vă permite să găsiți informatie necesara fără a fi distras. Desigur, designul plat nu este singurul care face informațiile mai ușor de găsit. Dacă totul este făcut bine, atunci utilizatorii nu vor avea probleme. Proiectul ar trebui să fie simplu și ușor pentru cei care îl pot folosi. Unii oameni preferă să folosească designul plat, în timp ce alții preferă un stil diferit de design.

Elemente pentru design plat

Îți place designul plat? Iată câteva elemente care pot fi folosite pentru un design „plat”.

Pachet de pictograme plat

Flat - design (design plat) este un stil popular în designul site-ului web și al interfeței, precum și sisteme de operare, ale căror semne distinctive sunt 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 fixarea paginilor unui calendar de birou de hârtie (definiție de la 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

1. 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.
2. Usor de adaptat- designul plat este suficient de ușor de adaptat la diferite rezoluții ale ecranului.
3. Ușurință în utilizare- datorita stilului simplificat, utilizatorilor le este mai usor sa perceapa informatiile de pe site.
4. 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 pentru utilizator ș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țiilor și gradienților netede, dar pot fi strălucitoare ș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 fi o fotografie de înaltă calitate care este neclară 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 a site-urilor web cu design plat pe diverse subiecte, inclusiv resurse de știri, portaluri și chiar magazine online.

Nu știm dacă ați observat sau nu, dar în ultima perioadă (mai ales în ultimul an) a existat o tendință clară în designul web în întreaga lume către simplificare, minimalism robust și simplificare vizuală a ceea ce noi, ca utilizatori, interacționăm cu 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 primit 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ă în direcția opusă - plat&simple.

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 noi experiențe ș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 scoate în evidență un design atunci 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 designul 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 slabă a mai multor modele interesante care au apărut pe site-uri precum Dribbble și Behance în ultimul an. Nu am văzut nimic nou - cu excepția faptului că acesta este departe de același „vechi Apple” al lui Steve Jobs. Compania a demonstrat că nu este în fruntea designului interfeței 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 mare măsură, sunt puțin filozofic în ceea ce privește această situație de fascinație a stilului plat. 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 dur de forme și grafica minimalistă au exprimat întotdeauna acumularea de conflicte interne în cadrul societății. 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 de numărul mare de gadgeturi 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ă în spatele modificărilor externe (interfața de utilizare plată, pictograme), ei mai ales nu au observat modificări serioase în ușurința în utilizare și cum î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 simplu în implementare tehnică, mai convenabil pentru clic (sublinierea linkurilor - salut) și multi-platformă - combinând web, mobil și desktop într-o singură experiență. 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.

Recent, un stil specific în designul site-ului web și interfețe cu utilizatorul, care se numește Flat datorită stilizării elementelor sale.

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 același timp, 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 o rată de utilizare ridicată.

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

Deoarece, conform principiului anterior, 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 ar trebui să fie lizibile și, bineînțeles, în concordanță cu designul, ca și în cazul unui design simplu, fonturile extrem de ornamentate vor părea 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.

Ar putea fi luată în considerare o combinație 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

Designul 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. Cu siguranță, flori simple iar textul poate să nu fie suficient. 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

Designul plat este o direcție cheie în design pentru următorii ani, așa că vă invităm să îl cunoașteți mai bine și să învățați cele 5 principii fundamentale care stau la baza acestuia.

Introducere în designul plat

În rusă, designul plat este tradus prin „design plat” și a devenit un favorit absolut după ce Apple a prezentat sistemul de operare iOS. Accentul s-a pus pe o abordare minimalistă a designului de utilizare. Accentul este pus pe confortul utilizatorului. Acesta este un protest pronunțat împotriva „squeformismului” (vizualizarea obiectelor ca în realitate). Alegerea a căzut pe soluții estetice mai simplificate și în același timp mai simple. Utilizatorii, sătui de vizualizări realiste, au întâmpinat această direcție cu încântare, iar tot mai multe proiecte web trec în acest format.

Aș dori să notez că „plat” nu înseamnă „plictisitor”. Soluțiile de design plat pot fi frumoase, sunt mai sofisticate, curate, lipsite de redundanță, transformându-se într-o „insulă a calmului”. În cele din urmă, fac conținutul de înțeles. Tot ce rămâne este să înveți principiile de bază pentru a le aplica în practică.

Designul „plat” nu se străduiește să transmită volume, așa că se bazează pe vizualizare bidimensională. Aceasta înseamnă că nu veți vedea umbre, reflexii sau evidențieri cu texturi (cu excepția umbrelor lungi). Doar transferul de contururi și nimic mai mult.

Se recomandă utilizarea figurilor monosilabice în design, precum și pentru a monitoriza claritatea contururilor, care are scopul de a sublinia ușurința și imponderabilitate. În plus, astfel de elemente laconice imită bine un senzor, generând dorința de a interacționa cu obiectul (o invitație la apăsare, atingere). Cu toate acestea, simplitatea elementelor nu este egală cu simplitatea designului în ansamblu - acest lucru se aplică doar contururilor. Drept urmare, tot ceea ce vede utilizatorul este clar pentru el și îl poate folosi cu ușurință.

Designul plat necesită prudență extremă atunci când lucrați cu fonturi. Adică, caracterul lor trebuie să completeze schema de design fără a o contrazice. Mai mult, în designul plat, fontul este, de asemenea, un element cheie de navigare.

Nu numai fontul, ci și culoarea este o parte esențială a designului „plat”. Marea majoritate a paletelor se bazează pe 2-3 culori, deși, desigur, există și excepții. De obicei, bogate și strălucitoare, dar în același timp sunt alese culori pure. După cum sa menționat, nu există gradienți sau tranziții inutile.

Designul plat este un exemplu izbitor de tendință globală precum minimalismul. Designerii refuză clopotele inutile, se îndepărtează de abordările complexe și implicite ale vizualizării, care dă roade sub forma activității utilizatorului.

Plat sau aproape plat? Căutăm un compromis!

În concluzie, aș dori să remarc că astăzi există o sinergie între designul plat și cel non-plat. Vorbim despre un design „aproape plat”. Aceasta este cea mai comună aplicație a conceptului descris, când, împreună cu elemente simple și concise și spațiu bidimensional, designerii folosesc 1-2 tehnici pentru profunzime și perspectivă.

De asemenea, o tendință în 2017 a fost Semi Flat Design - design semi-plat. Influențat de Material Design, a devenit puțin mai spațial. Apar umbre ușoare care fac ca designul să pară semi-plat. Designul plat este încă relevant astăzi; din cauza umbrelor, a devenit mai profund și mai complex, dar conceptul de bază nu este încălcat.