Ce este designul plat? Design plat: de ce a devenit designul plat? Ce nu este designul plat?

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 credeți că este motivul pentru o astfel de popularitate sălbatică a designului 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. Design plat 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 arătau în realitate, folosind activ texturi, umbre, reflexii și alte atribute ale unei imagini tridimensionale. Am incercat mai ales in 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 designer industrial celebru care se opune designului intruziv, efecte de animație etc În iunie 2013 Mărul anului 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ă pagini web și accelerarea site-ului datorită numărului minim de efecte vizuale. Acest lucru este util în special atunci când creați versiuni adaptive, la urma urmei, decât forme 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 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 o creștere 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 spectrului 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. Pentru a evidenția titluri, puteți utiliza litere mari.

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, în ultimii ani, site-uri cu design plat au devenit un standard 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 diverselor 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, pictogramelor plate, formelor 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. Abonează-te și distribuie articolele noastre prietenilor tăi în rețelele sociale. Conversii mari pentru tine!

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

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

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 design nou 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, spațiu liber, lipsă de agitație inutilă și pretenție.

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ă. Poate fi folosit 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

Exemple de șabloane de site-uri web cu interfață plată cu design plat

Exemple de site-uri web în stilul Flat design

Identitate

83 Design Collective

Frunatic

Grupul Umbrela

Fundația Slcl

Simtul meu

Behzad

Atlant

Simplu ca laptele

Familia Weranda

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 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 Apple alege și un stil plat. După aceasta începe adevărata eră a designului plat. În curând și companiile mari vor trece 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 anul trecut Designul în stil plat este 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

Utilizare icoane plateși figurile monosilabice cu contururi clare și aceeași culoare vă permit să simplificați cât mai mult 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 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 Î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 Stilul 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 oarecare 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. Ele 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. 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 de proiectare general