Exemple de design plat. Urmărind moda. Eliminați toate efectele

Revoluția „designului plat” continuă să câștige avânt de când a fost introdusă la Platforma Windows Telefon in 2010. Nu este greu de înțeles de ce: o interfață cu acest design pare mai intuitivă și este potrivită pentru elemente adaptative, cadre moderne și atunci când este executat corect arată atractiv.
Designul plat a început ca o contrapondere a stilului skeuomorf omniprezent, dar de atunci a devenit mult mai mult decât „Opțiunea B”.

Inițial, flat a fost exclusiv bidimensional, cu un accent total pe minimalism. Modern flat 2.o folosește umbre, degrade și alte elemente pentru a-l face să pară „aproape plat”.

5 componente caracteristice ale designului plat modern:

1. Umbre lungi
Umbrele lungi adaugă profunzime și dimensiune imaginilor fără a fi nevoie să sacrifice detaliile minimaliste ale pictogramelor care fac o interfață atractivă.

2. Culori dinamice
Completarea imaginilor rare este ușoară cu culori energice, în special nuanțe deschise.
Diferit fundal de culoare in contrast cu culoarea de bază elementele fac o pagină cu un meniu în mosaic mai animată.
Site-ul Flat UI Colors conține cele mai eficiente modele de culoare pentru plat.

3. Tipografie simplă
Alegerea fontului în beton se bazează pe un singur criteriu: lizibilitatea. În mod obișnuit, sunt utilizate fonturi sans serif cu o lățime constantă a cursei.

4. Buton transparent
Unul dintre elementele în tendințe în design web modern. Motivul este că nu atrage prea multă atenție, dar este clar recunoscut ca buton.

5. Minimalism
Plata și minimalismul merg mână în mână, folosind aceleași principii: simplitate și concentrare asupra conținutului.
Poate părea că folosirea designului plat este o soluție universală, dar minimalismul este dificil de implementat: cu cât sunt mai puține elemente de lucru, cu atât necesită mai multă atenție.

Oricât de excelentă ar părea soluția design plat, nu există nicio garanție că se va aplica în mod specific site-ului dvs. Verificați principalele sale avantaje pentru a vedea dacă merită să planificați o reproiectare globală.

Avantaje:
folosit in interfață adaptivă;
simplifică navigarea pentru utilizator;
structura clarași imaginile schematice subliniază logica internă a paginii;
încărcare rapidă pagini, datorită simplității graficii;
Tipografia familiară îmbunătățește lizibilitatea.

Designul plat se referă la simplitate și minimalism, ceea ce, pe de altă parte, face dificilă transmiterea de mesaje vizuale complexe. Prin urmare, înainte de a vă grăbi să simplificați interfața, ar trebui să luați în considerare cu atenție interacțiunea dintre site și utilizator.

Pe Baza web carte de design a tendințelor.

ÎN În ultima vreme Un stil specific în designul site-ului web a câștigat o popularitate enormă ș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. sisteme Windows Telefon ș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 plat, ș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.

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 strălucirea paleta de culori. 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. Desigur, culorile și textul simple pot să nu fie suficiente. Deci, dacă doriți să adăugați efecte vizuale, trebuie să alegi 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 ca „design plat” și a devenit un favorit absolut după Prezentări Apple OS 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ții design plat pot fi frumoase, sunt mai rafinate, mai pure, eliberate de redundanța a orice, 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 sunt alese suculente și strălucitoare, dar în același timp 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. Este despre despre designul „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, trendul anului 2017 a fost Semi Design plat- design semi-plat. Influențat Design material, 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.

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 oameni susțin că designul web plat este 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

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-a plăcut forme simple, curajos ș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 si primit viață nouăîn arta începutului de secol al XXI-lea.

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-uri web și aplicatii mobile, au deschis o perspectivă surprinzătoare ș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. Caracteristicile de bază ale designului plat, cum ar fi formele simple intuitive, tipografia îndrăzneață, clară, culorile contrastante strălucitoare, umbrele lungi și absența detaliilor și texturilor complexe, au prins bine. 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ă;
• combinaţie culori contrastante, oferind 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