Avem nevoie de un design elegant în stil plat. Design plat: trecut, prezent și viitor. Spatiu liber, elemente mari
Flat - design (design plat) este un stil popular în proiectarea site-urilor web și a interfețelor, precum și a sistemelor de operare, ale căror semne distinctive sunt simplitatea, sofisticarea ș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ă aspectul paginilor capsate ale unui calendar de birou din hârtie (definiția 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, serviciile și aplicațiile mari de căutare - Google, Youtube - trec la Flat-design 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 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 care implică utilizarea elementelor simple și a spațiului bidimensional. Un exemplu în acest sens ar fi o fotografie de înaltă calitate care estompează fundalul sau este î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.
Î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 de design plat la 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ță cu utilizatorul și design grafic, caracterizat de minimalism. Designul plat se caracterizează prin utilizarea unui minim de elemente și absența diferitelor efecte de textură, umbră și lumină, de exemplu: culori mixte, degrade, evidențieri și așa mai departe.
Plat se opune skeuomorfismului( Skeuomorfismul este un principiu de proiectare atunci când unui produs i se dă aspectul altuia, adică. când diferite elemente de interfață sunt copiate din obiecte reale - cca. , precum și un 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 complexe, texturi și umbre. 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 eleganță și simplitate.
În 2010 Microsoft a lansat Windows Phone 7, care folosea un design plat cu margini ascuțite și grafică simplă moștenit de la unul dintre produsele sale anterioare. Microsoft (Zune). Mai târziu, inspirat de succes, Microsoft a lansat sistemul de operare 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. Apple a 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 sale și instrucțiunile pentru crearea diferitelor obiecte de design: pictograme, machete și așa mai departe.
De atunci, flat a devenit o tendință cheie în design web, făcând site-urile web, aplicațiile și elementele de interfață elegante, curate și stilate.
Astfel, există trei exemple globale de design plat de la companii fără de care este dificil să ne imaginăm lumea modernă a tehnologiei:
Designul Microsoft Metro
Design Apple iOS 7
Designul materialelor Google
3. Amintiți-vă să curățați
Designul plat este aparent numit „plat” din cauza lipsei elementelor tridimensionale și a efectelor realiste precum degrade, texturi, lumini, semitonuri, umbre. Amintiți-vă, stilul plat este un mod bidimensional (plat) de a reprezenta obiecte.
Mai mult, în designul plat, obiectele sunt descrise într-un mod foarte simplificat și stilizat.
Și uneori sunt folosite chiar și doar silueta sau contururile obiectului, de exemplu. doar suficient pentru a face obiectul ușor de recunoscut, dar să nu îl supraîncărcați cu detalii minore.
Minimalismul a devenit o tendință globală în aceste zile: simplitatea formelor și utilizarea marginilor ascuțite creează un design curat și plăcut. Formele simple sunt mai clare ș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. Mai mult, acest lucru se aplică atât graficelor raster, cât și graficelor vectoriale.
Adobe Photoshop este clar aici: funcționează cu grafică raster, care se bazează pe pixeli.
În ceea ce privește programul Adobe Illustrator, acesta folosește grafică vectorială constând din curbe și linii numite vectori, care sunt specificate prin formule matematice.
Pe vremuri, Adobe Illustrator nu era un program deosebit de convenabil pentru a crea grafică perfectă cu pixeli. Vestea bună este că cele mai recente versiuni de Illustrator au devenit un instrument excelent pentru a crea grafică bună.
Trebuie să spun că grafica vectorială implică în cea mai mare parte lucrul cu forme simple, plate, culori pure și grile. Adobe Illustrator este foarte flexibil în setările sale și vă permite să adaptați grila la nevoile dvs., să aliniați obiecte și să utilizați diferite tipuri de snapping. 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 acest articol: 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 interfață cu o bună înțelegere a paletelor de culori și că experimentați cu panoul de culori din Photoshop și Illustartor, amestecând culorile după cum doriți. 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 produsele 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 lucru. 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 o trăsătură caracteristică apartamentului.
Vorbim acum despre umbre lungi. Ele au câteva caracteristici tipice care fac acest efect de recunoscut, și anume: o pantă de 45 de grade și o dimensiune mare (umbra poate fi de câteva ori mai lungă decât subiectul în sine. Ca urmare, umbrele lungi conferă platului un anumit efect de profunzime.
Acest efect face obiectul mai tridimensional, dar în același timp păstrându-l în contextul designului plat.
7. Lucrul cu fonturi
Tipografia joacă un rol important în designul plat. Adesea textul devine elementul principal al compoziției.
Modelele plate folosesc de obicei stiluri de font simple, făcând întregul design curat și lizibil. Puteți găsi multe fonturi gratuite în Adobe Typekit dacă utilizați produse Adobe. Veți găsi, de asemenea, o mulțime de fonturi gratuite bune pe Font Squirrel. Dar nu uitați să citiți licența dacă intenționați să utilizați fontul în scopuri comerciale.
Cel mai adesea în designul plat se obișnuiește să se folosească majuscule și culori contrastante, acest lucru face textul mai lizibil.
Folosiți fonturile cu moderație, amintindu-vă că acestea ar trebui să completeze și să completeze designul, mai degrabă decât să apară ca un element separat. Acest lucru nu înseamnă că nu puteți utiliza fonturi serif sau scrise de mână. Nu uitați să fiți minim și să păstrați totul în echilibru. Cu toate acestea, flat încă folosește adesea fonturi sans-serif, deoarece arată mai strict și mai îngrijit.
8. Avantaje și dezavantaje ale designului plat
Chiar dacă designul plat a devenit atât de popular datorită numeroaselor sale avantaje, există încă unele dezavantaje cu care se confruntă designerii atunci când folosesc acest stil. Să ne uităm la argumentele pro și contra.
pro
Popularitate
Designul plat a devenit o tendință, câștigând din ce în ce mai multe recenzii pozitive de la designeri și web designeri și nu pare să-și piardă deloc poziția. Dimpotrivă, se răspândește din ce în ce mai mult, dobândind unele forme și caracteristici noi, devenind din ce în ce mai creativ.
Simplitate
Designul plat este simplu, minimalist și curat. Flat on web îi ajută pe utilizatori să se concentreze pe conținut, mai degrabă decât să fie distrași de elemente vizuale. Acest lucru funcționează și pentru interfețele aplicațiilor mobile: un design curat cu butoane mari face experiența mobilă perfectă.
Luminozitate
Culoarea este un alt plus cool în designul plat. Culorile strălucitoare și bogate arată atractiv și curat, iar lipsa degradeurilor face ca designul să fie elegant. În plus, astfel de culori pure îl fac mai pozitiv și mai prezentabil, designul plat creează o stare de spirit potrivită.
Defecte
Flat are mult mai multe avantaje, dar niciun design nu este perfect și nu îl putem idealiza. Iată câteva dezavantaje ale designului plat pe care trebuie să le menționăm:
Lipsa de răspuns
Uneori, lipsa detaliilor importante sau a efectelor vizuale îngreunează procesul de creare a unei interfețe ușor de utilizat și, în general, acest lucru face ca întregul design să nu răspundă. Nu toți utilizatorii se simt confortabil cu flat, deoarece poate fi dificil să gă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 de tipografie
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. Trebuie 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, palete de culori limitate ș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 din cauza deficiențelor sale menționate mai sus.
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 dau designului plat o oarecare profunzime, fără a fi prea detaliat precum 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ă ați obținut informații noi din acest articol sau cel puțin l-ați 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 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 fi, de asemenea, o soluție bună. 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!
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 ș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 lui și vă voi arăta câteva exemple excelente de design de site web plat care vă vor inspira cu siguranță să faceți lucruri grozave. Deci să mergem!
Totul a început cu skeuomorfism
Pentru cei care nu știu, skeuomorfismul nu este un cuvânt murdar, ci un alt stil de web design. Designul plat este adesea prezentat ca opusul skeuomorfismului, care, în opinia mea, nu este în întregime corect. Aceasta este mai degrabă o simplificare decât un antagonism.
Până în 2010, skeuomorfismul a fost stilul dominant în designul interfeței. El a afișat elemente așa cum au apărut în realitate, folosind activ texturi, umbre, reflexii și alte atribute ale unei imagini tridimensionale. Apple a depus eforturi deosebite în acest sens, copiend 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ă toate elementele decorative trebuie îndepărtate și ar trebui să rămână doar ceea ce este convenabil pentru utilizatorul final să interacționeze.
„Cel mai bun design este cât mai puțin design posibil”
Cum a privit Dieter Rams în apă - un designer industrial celebru care se opune designului intruziv, efectelor de animație etc. În iunie 2013, Apple Inc. a introdus revoluționarul iOS 7, care a primit toate atributele unui stil de design web plat. Cu toate acestea, avionul nu a „învins” imediat realismul și volumul.
Multă vreme, utilizatorii nu au putut uita magia lui Steve Jobs și pictogramele „pe care vrei să le lingi”. Mulți chiar și-au luat rămas bun de la „bietul șapte” și au trecut la „Android radiant”. Adăugarea de combustibil la foc a fost numărul mare de bug-uri prezente în iOS 7 și designul 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 mijloacelor vizuale. Interfață receptivă în stilul „nimic de prisos”, datorită căreia utilizatorii își dau seama rapid ce au vrut să le transmită;
accent pe o tipografie bună. Conținutul este pe primul loc, ceea ce este extrem de important în abundența actuală de informații;
dimensiune mai mică a paginilor web și performanță mai rapidă a site-ului datorită unui număr minim de efecte vizuale. Acest lucru este util mai ales atunci când creați versiuni adaptive, deoarece cu cât formularele sunt mai simple, cu atât sunt mai ușor de afișat pe ecranele mici ale dispozitivelor mobile.
Designul web plat are și dezavantajele sale:
limitând imaginația web designer-ului la culori simplificate, tipografie și iconografie. Prin urmare, riscul de a crea un site plictisitor și inexpresiv este mai mare;
lipsa tridimensionalității și a umbrelor face uneori dificil de înțeles dacă un element poate fi clicat sau nu;
lipsa unor reguli fixe specifice.
Dacă te-ai hotărât să folosești acest stil pe site-ul tău, felicitări - arată că îți pasă de experiența utilizatorului și ești la curent cu vremurile. Dacă abia începi ca designer web și nu știi cum să folosești în mod corespunzător designul plat pentru a face site-ul tău să arate relevant, fără a fi simplist, încearcă aceste sfaturi:
Uitați de „pereți de cărămidă” și fundaluri strălucitoare. Designul web plat tinde să folosească imagini simple, netede și moi pentru fundal.
Tendințe și abordări moderne în dezvoltarea web
Aflați algoritmul pentru creșterea rapidă de la zero în construirea site-ului web
Fără degrade, pictograme 3D, tranziții animate sau alte efecte speciale. Toate acestea vor face site-ul dvs. mai greu și vor adăuga agitație - aveți nevoie de el?
Utilizați pictograme plate cu contururi clare pentru a adăuga confort și funcționalitate.
Utilizați o paletă de culori strălucitoare și bogată. Acum tendința sunt tonurile din spectrul solar: galben deschis, roz și verde. Principalul lucru este să nu exagerați - nu ar trebui să existe mai mult de 3 culori pe pagină.
Concentrați-vă pe tipografie. În designul plat, se acordă preferință inscripțiilor luminoase și originale, care creează un îndemn la acțiune și oferă o navigare ușoară în jurul site-ului. Și aici este important să nu exagerați. Uitați de fonturile „scrise de mână” și alte fonturi fanteziste. Literele majuscule pot fi folosite pentru a evidenția titlurile.
Simțiți-vă liber să utilizați o varietate de forme geometrice. Pătratele, cercurile, liniile și alte forme nu numai că vor îmbunătăți structura unui site web, dar vor crea și o ierarhie clară și vor împărți conținutul. Utilizatorii vor aprecia acest lucru, credeți-mă.
Simplificați pe cât posibil meniul de navigare și alte elemente ale site-ului. Pentru butoane, utilizați dreptunghiuri obișnuite fără umbre sau evidențieri.
Astfel, de-a lungul anilor, site-urile cu design plat au devenit standardul acceptat de absolut toată lumea. Uită-te la majoritatea site-urilor web moderne - sunt plate până la bază.
În cele din urmă, voi da exemplele promise de design plat de succes, care vă pot servi drept inspirație pentru a vă crea propriile capodopere.
1. Site-ul web http://dunked.com.
O platformă populară pentru publicarea portofoliilor, destinată reprezentanților diferitelor profesii creative. Designul web plat minimalist evocă sentimentul unui serviciu fiabil și ușor de înțeles, care nu distrage atenția cu efecte speciale inutile.
2. Interfață Microsoft.
Microsoft este una dintre companiile care au făcut stilul plat atât de popular. Poate vă amintiți playerul Zune, un concurent al iPod-ului, pe care Microsoft l-a lansat la mijlocul anilor 2000? Deci, designul acestui produs a fost net diferit de majoritatea aplicațiilor din acea vreme, în mare parte datorită tipografiei mari, pictogramelor plate, formelor mari și luminoase.
Această interfață, care a fost numită Metro, a migrat ulterior către computerele personale (Windows 8 OS), interfața Xbox 360 și alte produse software Mircosoft.
3. Site-ul web http://www.vox.com.
Ei bine, ești inspirat? Jos estetica 3D pseudo-realistă!
Asta e tot. Abonați-vă și distribuiți articolele noastre prietenilor de pe rețelele sociale. Conversii mari pentru tine!
Tendințe și abordări moderne în dezvoltarea web
Aflați algoritmul pentru creșterea rapidă de la zero în construirea site-ului web
Ce este designul plat? Această direcție de design este una dintre cele mai discutate pe internet. Pe scurt, designul plat este un stil extrem de simplificat, ale cărui rădăcini se întorc la minimalism. Dar acesta nu este tocmai minimalism, deoarece acest stil poate lua multe forme diferite, în funcție de cerințele de design. Pentru a înțelege mai bine ce este designul plat, este mai bine să mergeți înapoi și să definiți ceea ce cu siguranță nu este.
Acesta nu este 3D. Grafica 3D în sine vă permite să obțineți imagini foarte realiste, dar în același timp bidimensionale. Spre deosebire de 3D, designul plat nu acordă prea multă atenție detaliilor care creează profunzime și dimensiune, cum ar fi umbrele, luminile și texturile.
Acesta nu este skeuomorfism. Designul plat a apărut ca o alternativă la elementele de design pseudo-volumetrice care imitau obiecte sau procese reale. Skeuomorfismul presupune utilizarea activă a diferitelor efecte: umbre, reflexii, reflexe și texturi realiste. Nu există nimic din toate acestea în designul plat și nu poate fi.
Oamenii au început să vorbească despre design plat în 2012-2013, când a apărut pentru prima dată acest stil. Tendința a fost foarte vizibilă și a provocat mult zgomot, deoarece Microsoft a fost unul dintre primii care a dezvoltat această direcție. Lansarea Windows 8 cu o nouă interfață a schimbat pentru totdeauna designul și a predeterminat în mare măsură vectorul de dezvoltare a web-ului, cel puțin componenta sa vizuală.
Nu a stat deoparte nici Apple, care a abandonat și elementele pseudo-volumice în designul interfețelor dispozitivelor sale. Microsoft și Apple au creat o nouă realitate în care site-urile cu design învechit nu aveau loc. În același timp, Apple nu a acționat la fel de radical ca eternul său competitor și a scăpat treptat de elementele de skeuomorfism.
Designul plat în sine nu este nici bun, nici rău, designerii web sunt cei care îl fac convenabil sau incomod. Dar să fim sinceri, în formele sale extreme, designul plat nu arată foarte plăcut din punct de vedere estetic. Probabil, zona de cea mai bună percepție în acest caz se află undeva la mijloc între elementele plate și pseudo-volumice.
Este foarte posibil ca tendința de simplificare extremă care a dominat în ultimii ani să fie înlocuită cu altceva. Există câteva condiții preliminare pentru aceasta - de exemplu, direcția Material Design, creată de designerii Google.
COMPATIBIL CU DESIGN ADAPTIV
Îndepărtarea Microsoft și Apple de la skeuomorfismul în designul interfeței a avut consecințe mari. Noul stil a fost adoptat aproape imediat ca o nouă abordare a UX. De atunci, designul plat a devenit o tendință dominantă care continuă să fie relevantă. Astăzi, elementele plate sunt omniprezente, le vedem pe site-uri web, în aplicații și pe display-urile diferitelor dispozitive.
Principiile designului plat se aplică unei game largi de categorii de design, dar grilele sale stricte și grafica simplificată sunt cel mai bine afișate pe dispozitive cu ecran de dimensiuni mici.
Tendința către minimalism a simplificat foarte mult munca designerilor - le-a devenit mai ușor să proiecteze interfețe care să se afișeze corect pe orice tip de dispozitiv. În cazul elementelor pseudo-volumice, totul nu a fost așa - uneori interfața, care arăta uimitor pe ecranul desktopului, se transforma în ceva de neînțeles pe un dispozitiv mobil.
Unul dintre principalele avantaje ale designului plat este scalabilitatea acestuia. Elementele plate arată bine, indiferent de dimensiune și, spre deosebire de designul perfect pentru pixeli, sunt mult mai ușor de lucrat cu ele.
PLATFORMĂ FLEXIBILĂ
Designul plat, în căutarea simplității, se caracterizează printr-o bună flexibilitate: toate elementele, de regulă, sunt create din forme geometrice omogene, ceea ce simplifică crearea unui aspect echilibrat, în care fiecare modul sau bloc își are locul. Toate elementele sunt ușor de distins și, important, în timpul funcționării, ele pot fi schimbate rapid fără a încălca setările originale.
Grilele au, de asemenea, o structură flexibilă care poate fi furnizată într-o varietate de configurații. Acest lucru le permite designerilor să creeze cele mai optime abordări care să prezinte cel mai bine conținutul la îndemână. Absența restricțiilor și necesitatea de a ajusta grila dacă sunt modificate sau adăugate elemente noi accelerează semnificativ fluxul de lucru.
TIPOGRAFIE CITIBILA
Designul plat a schimbat semnificativ modul în care designerii gândesc despre tipografie. Noul stil a necesitat o abordare diferită a alegerii fonturilor și a calității aspectului. Drept urmare, absența umbrelor și a diferitelor efecte au făcut textele mai ușor de citit.
Designul plat se caracterizează prin utilizarea pe scară largă a fonturilor sans-serif, cu toate acestea, acesta nu este akisoma și serif-urile pot arăta bine în combinație cu elemente plate. Fonturile serif vor fi destul de potrivite ca titlu și pot fi folosite și în textul principal, dacă tipografia nu încalcă unitatea compozițională.
MINUSURI
Poate părea că designul plat nu are dezavantaje, dar nu este așa. În încercarea lor de a sublinia liniile și formele curate, unii designeri cad în capcana concentrării pe estetică, neglijând în același timp capacitatea de utilizare. Un design simplu și frumos, în care nu este nimic de prisos, nu este întotdeauna convenabil, iar astfel de erori sunt deosebit de pronunțate atunci când utilizați dispozitive mobile.
În designul plat, este adesea dificil să se determine care element este interactiv și care nu. Totul este la fel, nu există diferențe evidente, toate elementele se află în același plan. În căutarea simplității, designerii pot ascunde sau ascunde fără să vrea caracteristici sau acțiuni importante, iar utilizatorul, nevăzând instrucțiunile obișnuite, își poate pierde orientarea pe site.
Să luăm ca exemplu acest site. Ce elemente din el sunt interactive. Toate? Sau doar unele? Neclar. Acest lucru poate fi descoperit doar la întâmplare, dar acestea sunt mișcări inutile, ceea ce este de nedorit.
PIERDEREA INDIVIDUALITATII
Pentru orice brand, afacere sau proiect de design, unicitatea este de cea mai mare importanță. Fie că este un site web, aplicație, broșură, poster sau carte de vizită, designul trebuie să fie original și bine recunoscut.
Unul dintre dezavantajele designului plat este stilul său vizual. Folosirea formelor geometrice simple poate duce adesea la două modele complet diferite care apar foarte asemănătoare unul cu celălalt. Designerii care folosesc elemente plate sunt limitate în opțiunile lor, deoarece nu au o selecție mare de opțiuni acceptabile la dispoziție. Recent, pe Internet puteți vedea multe site-uri de clone care nu sunt de fapt clone. Este doar o coincidență. Mai mult decât atât, coincidența este neplăcută, deoarece site-ul își pierde individualitatea atât de necesară, pierzându-se pe fundalul altor resurse cu un design similar.
Uneori devine amuzant. Privind aceste imagini, ați putea crede că ne uităm la diferite secțiuni ale aceleiași aplicații. Dar nu, designerii Marco La Mantia și Simone Lippolis au lucrat independent unul de celălalt. Formele geometrice de bază și un font alb sans-serif sunt folosite ca elemente principale de design - o decizie mai mult decât logică. Dar rezultatul este dezastruos - aceeași schemă de culori a lipsit complet designul de unicitatea sa. Și există o mulțime de astfel de cazuri.
VÂNDEREA MODEI
Designul plat va rămâne una dintre cele mai populare tendințe pentru o lungă perioadă de timp, pur și simplu pentru că arată bine pe ecranele dispozitivelor mobile. Dar mulți designeri aleg plat nu numai pentru că le permite să rezolve rapid majoritatea problemelor, ci și din cauza dorinței lor de a crea ceva modern și la modă.
Cu toate acestea, în căutarea modei, puteți face o greșeală gravă: dacă urmați fără minte toate tendințele, este foarte posibil să uitați de utilitatea designului. Un apartament poate fi foarte frumos, elegant și chiar grațios, dar alegerea designerului ar trebui să fie determinată de funcționalitate și nu de dorința de frumusețe. Uneori, dorința de a „împinge” ceva la modă într-un design îi dăunează doar, de exemplu, umbrele lungi, una dintre cele mai recunoscute caracteristici ale designului plat.
În fața noastră sunt lucrările designerilor Alexander Lototsky și Erik Malmskeld. Acestea sunt exemple tipice de utilizare a umbrelor lungi în design. Acum, acest lucru nu va surprinde pe nimeni, dar la un moment dat, și ambele lucrări au fost create în 2013, când designul plat tocmai intra în modă, noul stil vizual era foarte interesant și atractiv. Drept urmare, au apărut atât de multe icoane similare încât astăzi utilizarea umbrelor este o soluție formulă și neinteresantă. A fost cândva la modă, dar nu mai. Umbrele sunt ca umbrele. Nu au nicio semnificație în ele, nu îndeplinesc nicio funcție utilă.
ALEGEREA RĂUSTĂ DE FONT
Fiecare designer visează să creeze ceva frumos și în același timp funcțional. Dar în căutarea esteticii, puteți face alegeri proaste care afectează utilizarea. Un exemplu este nebunia pentru fonturile subțiri și ușoare. Acest tip de tipografie arată curat și ușor, dar este și greu de citit.
Uneori, alegerea unui font subțire este justificată - de exemplu, pentru utilizare în titluri. Dar atunci când textul principal este tastat în același font, este adesea imposibil să-l citiți. Astfel de erori sunt vizibile în special pe dispozitivele mobile - dimensiunea mică a ecranului reduce drastic lizibilitatea conținutului.
PLAT 2.0
În ultimii ani, designerii au experimentat cu elemente plate și au adus o mulțime de lucruri noi în designul plat. Stilul este complet format și, ca orice alt stil consacrat, are argumentele sale pro și contra.
În zorii apariției sale, plat se distingea printr-o simplitate vizuală strictă, nu exista niciun indiciu de umbre sau structuri. Nici măcar degradeurile nu au fost ținute la mare stimă, deși nu contrazic în niciun fel principiile designului plat.
Dar, treptat, designerii au început să se îndepărteze de soluțiile prea simple, încercând să găsească un fel de soluție de compromis între plat și skeuomorfism. Rezultatul este un stil nou pe care unii designeri îl numesc Flat 2.0. În elementele de design au început să apară treptat umbre, degrade și chiar structuri luminoase, aproape invizibile. Designul plat nu are în mod clar profunzime, iar designerii au început să folosească abordări hibride. De exemplu, aranjați vizual elementele la diferite niveluri, experimentați cu nuanțe și umbre. Un alt exemplu frecvent utilizat de abordare hibridă este utilizarea nu numai a pictogramelor și a ilustrațiilor vectoriale plate, ci și a fotografiilor.
Google a făcut multe pentru a promova Flat 2.0. Material Design Guideline este o încercare de a crea un nou limbaj vizual care combină elemente de design plate și tridimensionale. Recomandările Google sunt foarte detaliate și ușor de urmat. În același timp, Google nu insistă asupra respectării stricte a tuturor regulilor stabilite în ghid - designerii pot experimenta, creându-și propriile proiecte originale, care pot combina o varietate de elemente.
CONCLUZIE
Astăzi Flat 2.0 este în stadiul de formare, dar direcția în care se va dezvolta acest stil este deja destul de clară. Nu sunt de așteptat schimbări semnificative - creatorii de tendințe Google, Apple și Microsoft nu vor renunța definitiv. Dacă există modificări, acestea vor fi nesemnificative - vor apărea noi abordări, cineva va veni cu un „truc” interesant, încercările vor continua să ia tot ce este mai bun din skeuomorfism. Dar, într-un sens global, nu este nevoie să te aștepți la ceva cu adevărat nou - designul plat este o tendință pe termen lung și doar un stil care se potrivește cel mai bine noilor tehnologii care nu există încă îl poate înlocui din pozițiile sale cucerite.
Recent, un stil specific în proiectarea site-urilor web și a interfețelor cu utilizatorul a câștigat o popularitate enormă, care, datorită stilizării elementelor sale, se numește Flat.
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. Principalele caracteristici distinctive sunt acele lucruri 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 aderă la e complet.
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.
Ai putea lua în considerare combinarea unui font simplu sans-serif cu un font nou care va fi perceput ca un element de artă. Fonturile ar trebui să ajute designul să fie mai simplu și mai clar, în timp ce butoanele și alte elemente ar trebui să servească doar pentru a îmbunătăți interactivitatea.
4. Să atragem atenția prin culoare
Culoarea joacă aproape rolul principal în designul plat. Dacă studiezi cu atenție site-urile create pe baza acestui concept, primul lucru care îți atrage atenția este paleta de culori strălucitoare. De obicei este format din mai multe culori contrastante pure (fără nuanțe), două sau trei, deși acest număr poate ajunge până la opt. Mai mult, toate aceste culori sunt de obicei folosite în mod egal.
Cele mai populare culori sunt culorile primare și secundare. Adică culorile primare (cian, magenta, galben, negru) și cele obținute pe baza amestecării lor. De asemenea, foarte des, culorile retro sunt folosite în schema de culori atunci când se creează un design plat, cum ar fi somon, violet etc.
5. Minimalism
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 general al designului
