” John Moore Williams, șeful Strategiei de conținut la Webflow.

Sfârșitul anului în curs este aproape, și fiecare web designer și-a pus cel puțin o dată o întrebare importantă: ce va determina designul web în viitorul 2017? Am decis să găsesc răspunsul la această întrebare și i-am întrebat pe designerii WebFlow ce tendințe cred că vor predomina în următoarele 365 de zile. Le-am comentat și gândurile.

În primul rând, să obținem părerea designerului principal Webflow, Sergie Magdalin.

1. Design bazat pe conținut

„Dispunerea elementelor de proiectare într-o structură dată ar trebui să fie astfel încât cititorul să poată înțelege cu ușurință ideea principală fără a încetini viteza lor normală de citire” -german Zapf

În ultimii câțiva ani, a avut loc o schimbare dramatică a viziunilor cu privire la rolul designului în afaceri. Anterior, designul a fost văzut ca pasul final în procesul de creare a unui obiect: un designer vrăjitor vine la sfârșit și ne umple produsul cu praf de zână pentru a-l face mai bun decât concurența.

A fost foarte interesant să urmărim metamorfozele care au loc cu priorități de dezvoltare.

Iar cel mai frumos lucru din aceste metamorfoze a fost trecerea la model, când conținutul se ridică din nou în capul mesei. Designerii din întreaga lume și-au dat seama că utilizatorii vizitează site-urile în primul rând pentru conținut, fie că este vorba de tweet-uri scurte, articole de referință lungi sau meme-uri proaspete de pe internet. Rolul suprem al designului este de a arăta conținutul în cel mai atractiv și de înțeles mod și de a obține cel mai bun rezultat din acesta.

Acesta este unul dintre motivele trecerii de la designul „skeuomorf” (unde elementele sunt descrise cât mai asemănătoare cu omologii lor din lumea reală) la un design plat, minimalist. Cu aceste considerente, Google a creat Material Design.

Desigur, așa cum spune a treia lege a lui Newton, pentru fiecare acțiune există o reacție egală și opusă. Mulți designeri cred că tendința designului plat a ucis chiar spiritul designului. Ne așteptăm ca această dezbatere să continue și în anul care vine, dar accentul va rămâne pe conținut, baza oricărei lucrări de design.

2. Interacțiune de înaltă calitate între designeri și dezvoltatori și între designeri

Importanța designului în formarea unei afaceri este în creștere, așa că se acordă din ce în ce mai multă atenție modului în care designerii lucrează împreună cu colegii lor designeri și colegii lor dezvoltatori.

Această preocupare pentru interacțiunea cu designerii se datorează parțial masivității aplicațiilor mobile și web care sunt dezvoltate astăzi. Pe lângă faptul că astfel de corporații gigantice precum Google, Facebook, Twitter și LinkedIn necesită o muncă titanică a echipei de proiectare din părți complet diferite, designerii trebuie să fie întotdeauna pe aceeași lungime de undă unul cu celălalt. Aceasta înseamnă că este nevoie de o comunicare mai strânsă cu privire la proiect și de modalități de a lucra împreună cel mai eficient.

Au fost create multe instrumente pentru a face acest lucru mai ușor, de la șabloanele și panourile colaborative ale echipei Webflow la editorul de interfețe grafice în timp real Figma. Sunt sigur că în 2017 aceste platforme vor fi îmbunătățite și completate.

Când vine vorba de colaborarea dintre designeri și dezvoltatori, se pune mult accent pe procesul de transfer foarte important. De exemplu, în loc să trimită imagini statice grele și voluminoase, designerii pot acum să partajeze machete redate live datorită instrumentelor precum InVision, Marvel, UXPin.

Carson Miller a spus asta în recentul său articol TechCrunch „Viitorul designului frontal”:

„Mai devreme sau mai târziu, instrumentele de design și modelele de design vor înlocui complet dezvoltarea front-end. Veți putea crea cu ușurință o bază de înaltă calitate pentru oricare dintre cadrele dvs. fără a recurge la scrierea manuală a codului.”

3. Proces simplificat „de la designer la dezvoltator”

Instrumentele de proiectare și prototipare menționate mai sus facilitează vizualizarea diferitelor etape de colaborare prin vizualizare, de la fișiere animate Keynote până la site-uri web complet funcționale. Acest mod de partajare a materialului de lucru reduce timpul de răspuns în cadrul proiectului, crescând astfel calitatea designului, crescând viteza echipei de dezvoltare și reducând posibilitatea dezamăgirii de rezultat. De asemenea, îmbunătățește interacțiunea cu clienții. De exemplu, pentru mulți utilizatori WebFlow, întâlnirile cu clienții au devenit ateliere cu drepturi depline, unde designerii pot implementa rapid idei și toată lumea își poate testa ideile aproape imediat.

Tendințele de design web pentru anul viitor, potrivit designerului de produse Gadzhi Kharkharov:

4. Titlu mare, tare

Pe măsură ce lumea designului web începe să se concentreze asupra conținutului, devine din ce în ce mai frecvent ca site-urile web să vadă titluri inspiratoare în fonturi care sunt la fel de mari și îndrăznețe ca și conținutul lor.

Partenerii Heco #MadeInWebflow

După cum puteți vedea din exemple, „mare” și „aldin” se referă la mai mult decât doar descrierea unui font. Mai degrabă, înseamnă că o parte semnificativă a ecranului principal este dedicată unei declarații simple, dar puternice și autosuficiente despre un produs sau serviciu. Un astfel de titlu ar trebui să conțină esența și să fie ușor de înțeles pentru orice vizitator, evitând pompozitatea excesivă (bine, expresia „Design the impossible” poate suna prea tare).

În lumea aglomerată și supraîncărcată de informații de astăzi, aceste declarații scurte și puternice funcționează bine pentru orice marcă.

5. Markup sofisticat care provine din elementele de bază ale designului grafic

Dacă vrem să anticipăm dezvoltarea designului web (cel puțin latura sa vizuală), trebuie să ne uităm la istoria dezvoltării designului grafic.

În ultimii câțiva ani, aspectul paginii web a fost limitat la puterea CSS, dar noi module precum Flexbox și CSS Grid (în martie 2017) vor permite cele mai îndrăznețe idei în aspectul web.

Sarcina noastră principală acum este să înțelegem cum ar trebui să funcționeze noile caracteristici de aspect al grilei în cadrul designului responsive.

Iată câteva exemple de la ce să vă așteptați (atâta timp cât aveți un browser care acceptă CSS Grid, cum ar fi Firefox Nightly, Safari Technical Preview sau Chrome Canary, desigur):

Laborator de amenajare experimentală Jen Simmons

Acordați atenție stilului blocului principal - o referire clară la istoria designului grafic.

Grilă prin exemplu

Mai multe exemple puteți vedea pe site.

6. Mai multe SVG-uri

SVG (grafică vectorială scalabilă) are mai multe avantaje pentru designerii și dezvoltatorii web decât formatele de imagine tradiționale precum JPG, PNG sau GIF.

Principalele avantaje ale SVG sunt descrise chiar în numele formatului - acesta este scalabilitatea și vectorul. Spre deosebire de formatele bitmap și bazate pe pixeli, imaginile SVG sunt formate din vectori, descrieri matematice ale formei unui obiect. Aceasta înseamnă că SVG este independent de rezoluție, iar imaginile în acest format vor arăta grozav pe toate ecranele și dispozitivele. Nu este nevoie să vă faceți griji că imaginile sunt neclare pe retină.

Dar asta nu este tot. SVG este, de asemenea, renumit pentru că nu necesită trimiterea solicitărilor HTTP. Dacă ați testat vreodată viteza de încărcare a site-ului dvs., este posibil să fi observat că aceste solicitări HTTP vă pot încetini cu adevărat site-ul. Nu există o astfel de problemă cu SVG.

7. Instrumente de proiectare receptivă bazate pe reguli

Designul responsive a schimbat complet modul în care privim aplicațiile web și modul în care le construim.

Dar, în mod ciudat, principiul de funcționare a programelor pentru crearea designului nu s-a schimbat în niciun fel. Cele mai multe dintre aceste instrumente funcționează astfel: trebuie să creați aceeași pagină din nou și din nou pentru diferite dispozitive și rezoluții. Într-o industrie care necesită generare rapidă de idei, dezvoltare rapidă și lansare rapidă, această pierdere de timp este pur și simplu inacceptabilă.

Așteptați-vă la un nou val de instrumente de design (cum ar fi Figma) bazate pe „reguli” care ajustează modul în care arată site-urile web pe diferite ecrane și dispozitive, reducând astfel repetitivitatea designerilor. Astfel de instrumente se bazează pe relațiile spațiale ale elementelor, iar atunci când modificăm dimensiunea ecranului sau dispozitivul, ele tind să mențină aceste relații prin schimbarea dimensiunii elementelor și a umpluturii dintre ele.

Apropo, astăzi există instrumente similare pentru aspectul site-ului web nu numai pentru designeri, ci și pentru utilizatorii obișnuiți. De exemplu, TruVisibility.com - platforma adaptează designul creat exact după anumite reguli, conform cărora aspectul și dimensiunea elementelor se adaptează la dimensiunea ecranului. Rămâne doar să faceți câteva ajustări, astfel încât pagina web să arate așa cum ar trebui pe dispozitive. Utilizatorul nu trebuie să recreeze o versiune pentru dispozitive mobile, iar acest lucru îi economisește mult timp.

Tendințele de design în 2017 conform lui Ryan Morrison, designer grafic senior.

8. Culori mai vibrante

Când era minimalismului și brutalismului a început în designul web în 2016, designerii au încercat să aducă mai multă personalitate muncii lor, fără a depăși stilurile la modă. Și există cel puțin câteva cazuri în care culorile strălucitoare și îndrăznețe au fost folosite cu mare succes.

Aruncă o privire pe noul site al Asana cu o umplere de culori vibrante:

Noua pictogramă a aplicației Instagram a atras multe critici, dar această reproiectare a reîmprospătat cu siguranță marca:

Tot ceea ce face Stripe nu necesită o vizualizare separată:

După cum puteți vedea, acestea nu sunt doar culori strălucitoare și îndrăznețe. Degradeurile revin și ele în stil, îmbinând și estompând culorile în nuanțe care amintesc de cerul de la amiază sau de un apus de soare strălucitor. Este un fel de renaștere a naturalismului, cu culori vibrante și degrade îndrăzneți, și eu personal aștept cu nerăbdare să văd mai multe din asta în 2017.

Deși, poate că merită să reducă puțin luminozitatea? Te urmăm Asana.

9. Mai mult accent pe animație

Elementele animate au jucat de mult un rol cheie în interfața web, iar această tendință va continua și în 2017. De fapt, pe măsură ce designerii au acces la instrumentele pentru a crea animații captivante, vom vedea că aceste efecte devin mai vizibile și mai sofisticate.

Acest subiect este deosebit de important deoarece crearea animației devine mai ușoară în fiecare zi. La Conferința Design & Content din 2016, guru al animației Val Head a subliniat că atunci când proiectează elemente animate, designerii trebuie să țină cont de obiectivele și nevoile mărcii pentru a obține impactul pe care creatorii de conținut se așteaptă să-l vadă. Dacă acest sfat este respectat, animația va îndeplini sarcini care sunt semnificative pentru brand și nu doar să-i provoace o migrenă utilizatorului.

10. Markup neobișnuit

2016, ca și anii precedenți, este renumit pentru discuțiile nesfârșite conform cărora designul web fie moare, fie își pierde spiritul.

Cei care încearcă să convingă pe toată lumea de moartea designului web exagerează în mod clar. Mulți continuă să caute modalități de a prezenta conținutul utilizatorilor în moduri noi. Una dintre cele mai tentante moduri este de a sparge sistemul și de a ignora aranjamentul obișnuit al grilei de elemente dictat de regulile designului responsive.

Metoda de aranjare „ruptă” constă în elemente care se încadrează în afara granițelor unei grile aliniate meticulos. Astfel de tehnici pot părea uneori chiar neplăcute pentru ochi. De exemplu:

Texte și imagini suprapuse:

Texte și imagini împrăștiate (aparent) aleatoriu pe pagină:

Aceasta a fost prima parte a traducerii articolului „18 tendințe de design web în 2017”. Sunteți de acord cu opiniile experților Webflow? Ce web design crezi că va fi la modă în anul viitor?

Inițial, a fost planificat să postăm o traducere a unui articol în limba engleză despre tendințele designului web în 2017, dar după ce am studiat diverse surse, am decis să schimbăm ușor conceptul acestei note. Chestia este că, în ultima lună, pe internet au fost publicate destul de multe materiale tematice despre cele moderne, iar opiniile, după cum se spune, au divergent. Pe de o parte, acest lucru este logic, pentru că diferiți autori au propriile ipoteze despre ceea ce va fi relevant pentru site-uri în acest an. Pe de altă parte, aceste previziuni sunt foarte subiective.

În general, am adunat toate opțiunile și am compilat ceva de genul un rezumat al tendințelor de design web 2017. Să începem cu cele mai populare tendințe pe care mulți experți le notează și să trecem treptat la idei mai „unice”. Apropo, dacă aveți completări și păreri pe această temă, nu ezitați să le împărtășiți în comentarii. În plus, vă recomandăm să citiți despre - de asemenea, o postare utilă.

1. Design „abstract” non-standard

Grila pentru site-uri este considerată a fi un anumit concept de bază bine stabilit care ajută la organizarea competentă a spațiului unei pagini web. În același timp, ea a condus în special designerii creativi în anumite limite. Cu toate acestea, întotdeauna au existat temerari care creează soluții originale care nu sunt controlate de niciun fel de granițe rigide. Astfel de lucrări, de regulă, se găsesc în subiecte de imagine și creative, dar în 2017 această tendință de design de site-uri web se va răspândi la proiecte corporative stricte.

Aranjamentul non-standard al elementelor oferă oportunități mai interesante: vă permite să utilizați întregul spațiu al paginii, să adăugați stratificarea obiectelor și un sentiment de profunzime aspectului. Veți putea realiza un design care impresionează utilizatorii chiar și fără un videoclip sau animație colorat pe tot ecranul. Având în vedere sute de mii de machete clasice de pe web, soluțiile abstracte unice vor ieși aproape întotdeauna în evidență și vor atrage atenția vizitatorilor site-ului (cum ar fi factorul WOW). Și trebuie să-l folosești!

2. Noi opțiuni de navigare

Proiect non-standard - meniu avansat. Astăzi nu trebuie să pui unul orizontal în antet. Datorită popularității tot mai mari a layout-urilor responsive, mulți utilizatori s-au obișnuit cu pictograma meniului Hamburger (formată din trei dungi orizontale), care apare din ce în ce mai mult pe versiunile obișnuite ale site-urilor. Linia dintre designul mobil și cel desktop se estompează treptat. Anul acesta vom vedea o mulțime de experimente cu aspectul și forma meniului - aceasta poate deveni una dintre principalele tendințe de web design din 2017.

Astfel de soluții vă permit să utilizați spațiul paginii într-un mod diferit. Pe lângă derularea intuitivă în jos și în lateral, precum și un bloc de navigare vertical fix, vor fi populare diverse elemente în mișcare ascunse. Cu ajutorul lor, puteți plasa toate elementele necesare din submeniu pe un singur ecran. Într-un fel, acest lucru face navigarea pe site mai detaliată și mai utilă pentru utilizatori. Este important doar ca aceștia să poată face față soluției dvs. non-standard. Asigurați-vă că îi testați eficiența în practică.

3. Carduri în design

Cardurile sunt departe de a fi o nouă tendință în designul site-urilor web, dar în 2017 va continua să fie relevantă. Această soluție prezintă în mod eficient informații pe diferite platforme: de la aplicații mobile până la vizionare pe ecrane TV mari. Un astfel de format de organizare a datelor va permite utilizatorilor să concentreze toate informațiile pe obiecte cât mai convenabil posibil.

Această abordare este folosită de multe proiecte populare din rețea: Facebook, Pinterest, Netflix. Ultima opțiune este, în general, un exemplu excelent de implementare cu succes a cardurilor într-un design care combină minimalismul, navigarea și eficiența.

4. Împărțiți machetele cu ecran împărțit în 2 părți

Anul acesta vom vedea mai multe aspecte cu afișare pe ecran dublu a informațiilor. Această tendință de web design în 2017 va fi deosebit de activă pe paginile de start și. Vizual, implementarea arată grozav în modelele minimaliste cu fundaluri sau imagini contrastante.

Designerul va putea folosi diferite tehnici de design vizual în blocurile învecinate în cadrul aceluiași proiect web. Iar rezultatul va părea natural. Apropo, aspectele împărțite funcționează bine pentru Call to Action în paginile de destinație. Mai multe detalii despre metoda.

5. Tipografie mare și originală

Îmi amintesc că în 2009 am publicat , unde utilizarea de fonturi uriașe a fost una dintre tendințele promițătoare în designul site-urilor web. Același lucru se va întâmpla probabil în 2017 (cel puțin majoritatea designerilor o menționează). Motivul principal este, desigur, atragerea atenției: cineva trebuie să evidențieze anumite obiecte de pe pagină, cineva dorește să explice cum să folosească corect navigarea etc. Oricare ar fi cazul, tipografia devine din ce în ce mai groasă și mai mare. Când implementați, puteți găsi postări de blog despre și.

În același timp, multe site-uri scapă de fonturile standard ale sistemului, ceea ce le permite să își diversifice în mod semnificativ aspectul. Odată cu creșterea serviciilor gratuite de fonturi web originale (Google Fonts, Typekit), popularitatea acestora va crește și mai mult. Se pare că în 2017 așteptăm și experimente în domeniul tipografiei site-urilor. Principalul lucru în această chestiune este să nu exagerați - amintiți-vă că textul ar trebui să fie bine lizibil. Apropo, dacă lucrați cu WordPress, atunci articolul Cum să conectați un font în WordPress (inclusiv Fonturi Google) vă poate fi util.

6. Degrade și culori vibrante

O altă tendință de web design în 2017 este utilizarea paletelor de culori strălucitoare pentru degrade (și multe altele). Începutul erei designului plat a adus caracteristici interesante online, dar trebuie să lucrați în acest stil cu mare atenție, deoarece. poate contribui la depersonalizarea site-ului. Pentru a rezolva problema, unii experți au început să experimenteze culori strălucitoare și soluții de gradient. Anul acesta, tendința va continua să se dezvolte, și nu doar pe Web (cu siguranță, toată lumea a observat deja recenta actualizare a Instagram).

Această tendință poate fi folosită nu numai pentru fundal. Unul dintre trucurile populare este de a crea o tranziție între două culori și de a le suprapune pe imagine. Acest lucru vă permite să faceți fotografia mai interesantă și, în general, efectul pare neobișnuit. Culorile strălucitoare adaugă profunzime, dinamism și energie plăcută designului. Ele pot evidenția bine pagina și elementele de pe ea.

7. Animație și micro-interacțiuni

Animația în sine de pe site nu este nouă, dar în fiecare an designerii învață cum să o implementeze mai frumos și mai eficient. Efectele vizuale minore pentru imagini/obiecte/conținut pot nu numai să condimenteze proiectul, ci și să adauge un instrument suplimentar de feedback al utilizatorului. În interfețele moderne UI / UX, diverse micro-interacțiuni transformă procesele de rutină în moduri mai distractive de a obține informații + permit utilizatorului să vadă și să înțeleagă cum funcționează acest sau acel element de pagină (meniu, navigare, butoane).

8. Efectul de paralaxă

O altă tendință binecunoscută de design de site-uri web în 2017 ar trebui să se deschidă dintr-o nouă perspectivă. În sine, Parallax este implementat datorită vitezei diferite de mișcare a fundalului și a primului plan la defilare, ceea ce creează impresia de profunzime și dinamism imaginii. Anul acesta ne așteptăm la lucrări mult mai complexe, folosind mai multe straturi, direcții diferite de mișcare și aplicarea de efecte. Lucrați cu această tehnică cu atenție pentru a nu distrage atenția utilizatorilor de la conținutul paginii web. Mai jos veți găsi imagini cu link-uri către site-uri sursă.

9. Aproape realitate virtuală

VR este unul dintre cele mai relevante subiecte astăzi, în ciuda faptului că situația reală în acest domeniu este mai puțin optimistă decât multe previziuni. Desigur, această caracteristică nu putea să nu afecteze designerii. În unele aspecte, puteți găsi diferite tehnici care ar crea un „efect de prezență” pentru utilizator: videoclipuri și panorame la 360 de grade, inserții video „ca într-un film”, jocuri etc.

10. Design tactil, natural

Această tendință combină două direcții simultan - culori naturale și design tactil. Dependența excesivă de soluții plate a transformat multe proiecte web în layout-uri Bootstrap monotone fără chip. Acum unii designeri încearcă să se îndrepte către soluții mai naturale, de exemplu, postează fotografii și modele 3D realiste, astfel încât utilizatorul să aibă senzația că poate atinge și atinge obiecte de pe site. De asemenea, folosesc materiale naturale ca texturi, ilustrații și fundal + nuanțe naturale (verzi, maro, gri, metalice neutre).

11. Alte tendințe de design web 2017

În procesul de studiu a principalelor tendințe în designul site-urilor web în 2017, am întâlnit opinii diferite. V-ați familiarizat deja cu cele mai semnificative opțiuni, iar acum vom vorbi pe scurt despre câteva ipoteze care s-au dovedit a fi mai puțin populare. Unele dintre ele, apropo, au fost utilizate activ mai devreme, dar în acest an tendința va continua.

Puteți face fundalul și mai spectaculos adăugând animație sau videoclip. Datorită YouTube și proiectelor similare, conținutul video este acum foarte popular, poți folosi această funcție pe site-ul tău. Dacă adăugați sunet, nu îl activați în mod implicit, utilizatorul însuși ar trebui să facă acest lucru.

forme geometrice

Dacă te uiți cu atenție la capturile de ecran ale proiectelor web de mai sus, vei observa utilizarea diferitelor forme geometrice în multe dintre ele. Acestea sunt adesea forme pătrate/dreptunghiulare, dar se găsesc și curbe, triunghiuri și cercuri. Astfel de blocuri pot conține conținut sau pot fi folosite pentru a evidenția fundalul.

Ilustrații unice

Nu am găsit multe lucrări originale în selecție, dar această tendință de web design în 2017 va fi în continuare relevantă. În primul rând, ilustrațiile adaugă o notă personală proiectului dvs. (ceea ce este un mare plus în era layout-urilor Flat). În al doilea rând, metoda merge bine cu tipografia personalizată, permițându-vă să creați și mai multe machete unice. Aceasta poate include, de asemenea, tendința de a folosi fotografii reale în design/conținut în loc de imagini din stocurile de fotografii - originalitatea este întotdeauna la cerere.

Total

Am trecut în revistă primele 10 tendințe de design web pentru 2017, care vor fi acum utilizate în mod activ de către designeri în munca lor. De fapt, nu există atât de multe tehnici originale, o parte semnificativă a tendințelor se repetă din anii precedenți: felicitări, fundaluri strălucitoare, paralaxe, tipografie mare etc. În ceea ce privește fonturile și navigarea, probabil că vom vedea versiunile originale anul acesta. În afară de punctul cu realitatea virtuală, putem spune că tendința generală de simplificare a aspectului proiectelor online continuă, designerii continuă doar să caute cele mai eficiente și interesante modalități de implementare.

Să înțelegem ce înseamnă să fii popular, la modă și modern în design web în 2017. Pentru a face acest lucru, luați în considerare principalele tendințe în design web. Cei mai mulți dintre ei rătăcesc de la an la an și au devenit deja o parte integrantă a construcției moderne de șantier. Acest lucru se datorează în special dezvoltării tehnologiilor mobile, canalelor de comunicare și îmbunătățirii dispozitivelor. De exemplu, o astfel de tendință precum mobilitatea site-ului web a devenit obligatorie. Comercializarea Internetului impune, de asemenea, condițiile sale dure designerilor și dezvoltatorilor web. În același timp, unele dintre tendințe slăbesc și devin mai puțin populare, dar rămân încă destul de active. Apar și hobby-uri la modă, caracteristice unei perioade scurte. De exemplu, anul trecut au fost icoane cu o umbră lungă a obiectelor reprezentate. Modelele geometrice au devenit populare în acest an, de asemenea, le vom lua în considerare. Deci, să mergem în ordine.

1. Design mobil, receptiv
Astăzi, poate, cea mai importantă și obligatorie tendință. Site-ul ar trebui să arate la fel de bine pe toate rezoluțiile de monitoare, laptopuri, ecrane de smartphone-uri mobile și tablete. Motoarele de căutare, de altfel, monitorizează foarte atent cât de bine este adaptat site-ul la diverse dispozitive și pe baza acestuia determină locul în rezultatele căutării.

2. Tipografie activă
Este una dintre cele mai populare tendințe de câțiva ani. Fonturile mari și tipografia de pe site au două componente. În primul rând, estetica - liniile frumoase, curbele și literele sunt în sine un ornament și un element decorativ. Și în al doilea rând, aceasta este funcționalitatea - cu ajutorul unui font mare, puteți accentua fără ambiguitate ideea principală vizitatorului.

3. Video cu ecran lat
Un videoclip pe ecran complet în fundalul site-ului ne va atrage atenția imediat. Aceasta este o tehnică bună pentru a interesa vizitatorul. Dezvoltarea modernă a tehnologiei facilitează încorporarea videoclipurilor pe site, ceea ce înseamnă că designerii vor folosi din ce în ce mai mult această tehnică. Cu toate acestea, există o nuanță, este interesant să vizionați videoclipul doar prima dată, a doua și a treia oară este deja plictisitor. Prin urmare, această tehnică este eficientă doar pentru vizitatorii noi.

5. Cinemagraf
O alternativă bună la videoclipurile cu ecran lat și o fotografie mare de fundal. Cinemagrafele sunt fotografii în care apar ușoare mișcări repetitive. De obicei, acestea sunt prezentate în format gif și oferă spectatorului iluzia de a viziona un videoclip. Mai multe despre cinemagrafie cu un număr mare de exemple puteți găsi în selecție

6. Design plat
O altă tendință puternică din ultimii ani. Site-urile web cu culori plate tind să fie îngrijite și clare. Dar, recent, a apărut un nou tip de design plat - Semiplat. Acesta este momentul în care întregul design este realizat într-o culoare plată și doar un element are o umbră, un gradient sau o textură. De regulă, acest element este un buton, căruia i se dă volum sau umflătură pentru a atrage atenția vizitatorilor.

7. Microinteracțiune la fața locului
Acum multă atenție în web design se acordă microinteracțiunii funcționalității și designului site-ului cu vizitatorul. Esența căreia este ca vizitatorul să poată vedea clar rezultatul acțiunii sale pe site, fie că este ajustarea setărilor utilizatorului, urmărirea unui link, confirmarea unei operațiuni, interacțiunea cu pictogramele active, butoanele, comutatoarele, contoarele și alte elemente.

8. Animarea obiectelor
Posibilitățile html5 și css3 moderne vă permit să utilizați un arsenal mare de efecte vizuale pe site. Acest lucru face ca interacțiunea cu pagina să fie mai interesantă și interesantă pentru vizitator. Așa că în noul an vom vedea și cele mai neașteptate micro-mișcări interactive ale obiectelor, de obicei ca răspuns la mișcarea mouse-ului. Poate că vom vedea exemple de animație mai complexă.

9. Scheme de culori vibrante
Culorile populare la modă din 2017 favorizează luminozitatea și saturația. Nuanțele originale interesante de stacojiu, muștar, galben, smarald, albastru intens, precum și culorile roșu, liliac și ciocolată vor ajuta site-ul dvs. să iasă în evidență și să dobândească propriul stil unic.

10. Defilare pe site
Deoarece site-ul de derulare este ideal pentru dispozitive mobile, prezența sa va fi semnificativă și în 2017. Singurul lucru este că derularea nu lasă loc pentru interacțiunea utilizatorului și, prin urmare, există o anumită oboseală de la încărcarea nesfârșită a conținutului. Poate că tendința se va îndrepta către o combinație de comenzi simple cu defilare.

11. Efectul de paralaxă
Paralaxa este schimbarea poziției aparente a unui obiect față de un fundal îndepărtat. În web design, acest efect este folosit atunci când site-ul se derulează, când obiectele și fundalul se derulează cu viteze diferite, rezultând iluzia tridimensionalității. Tendința este destul de stabilă, așa că vom vedea site-uri cu paralaxă de mai multe ori.

12. Design modular
Designul modular sau interfața de card, constând din blocuri semantice autonome, a fost popular cu ceva timp în urmă. Această tendință este foarte bună pentru dispozitivele mobile, deoarece blocurile se aliniază bine pentru orice rezoluție de ecran. Dar pe site-urile mari, ele arată destul de la fel și sunt greu de ierarhizat și structurat.

13. O pagină
Site-urile cu o singură pagină, paginile de destinație, paginile de destinație au devenit parte integrantă a internetului modern. Puteți citi mai multe despre ce este o pagină de destinație în articol și. În 2017, paginile de destinație se vor concentra mai mult pe butonul care cheamă la acțiune — comandă, sună, înscrie-te etc. Orice altceva care distrage atenția unui potențial vizitator va fi întrerupt.

14. Publicitate grafică
De asemenea, aș dori să remarc un lucru de care îmi amintesc anul trecut și, cel mai probabil, tendința va continua și în 2017. În legătură cu comercializarea Runetului și creșterea comerțului pe internet, cererea de materiale promoționale grafice pentru publicitate și promovare a crescut semnificativ - bannere, teasere, felicitări, fluturași.

15. Automatizarea proceselor tipice
Toate soluțiile și procedurile standard de pe site sunt înlocuite treptat de procese automatizate, ceea ce elimină nevoia de a comunica cu serviciul de asistență sau consultanții online. În acest sens, popularitatea diverselor aplicații și extensii este în creștere. Acum puteți cumpăra un produs sau serviciu, să plasați o comandă, să faceți o programare, să vă rezervați un loc, să transferați bani, să completați un chestionar sau să faceți un test - toate acestea se pot face online cu câteva clicuri de mouse.

16. Infografic
Reprezentarea grafică sub formă de infografică este încă populară și solicitată. Textul care însoțește o imagine sau o pictogramă frumoasă, combinat cu elemente de design elegant, face infografica atractivă din punct de vedere estetic. Infograficele comparative sunt deosebit de ilustrative și interesante din punct de vedere vizual - așa cum a fost-a devenit, da-nu, pro-contra, nu se poate etc. Infografica poate fi folosită și pentru a spune o poveste pas cu pas sau pentru a prezenta în mod viu statistici plictisitoare.

17. Meniu de hamburger
Un meniu hamburger este o pictogramă vizuală formată din trei bare orizontale, de obicei în partea de sus, în colțul unui site, care, atunci când se face clic, deschide sau glisează în afara meniului complet din lateral. Mulți experți prevăd dispariția acestei tendințe, din cauza faptului că majoritatea utilizatorilor neexperimentați pur și simplu nu înțeleg scopul acestei pictograme. Prin urmare, designerii web înclină spre navigare simplificată. Dar, cu toate acestea, vom vedea în mod repetat meniul de hamburger pe site-urile nou create.

18. Icoane
Icoanele, ca modalitate de prezentare a informațiilor și instrument de vizualizare, au fost și rămân una dintre cele mai căutate și îndrăgite tendințe de către designeri. Este suficient să puneți pictogramele tematice corespunzătoare lângă blocuri cu text - iar acum întregul text capătă o ordine și o structură logică și vizuală. Deci, în anul care vine, vom continua să folosim activ pictogramele.

19. Scrisorile
Stivuirea scrisorilor este text într-un pătrat. De fapt, acesta este un exemplu de decizie creativă complexă - trebuie să prezentați un text lung într-un spațiu mic. În același timp, ar trebui să arate frumos și original. Anul acesta este și la modă.

20. Buton gol
Datorită economisirii de spațiu și spațiu, un buton gol a apărut pe dispozitivele mobile în urmă cu ceva timp - o inscripție mare cu o contur pătrat în jurul cuvântului. Un astfel de buton oferă o imagine de ansamblu asupra fundalului din spatele butonului, păstrând în același timp funcționalitatea acestuia ca buton complet. În plus, ca element de design, un astfel de buton arată elegant și îngrijit.

21. Evitarea fotografiilor de stoc
Unii experți observă că a existat un refuz al designerilor de la fotografiile de stoc. Deoarece dispozitivele moderne vă permit să faceți o fotografie rapid și precis, puteți evita impersonalitatea și uniformitatea stocului și puteți face propria fotografie unică și puteți crea propriul design unic.

22. Unghiuri neobișnuite în fotografie
Căutarea unghiurilor interesante în fotografii a devenit disponibilă oricărui proprietar al unui smartphone cu cameră. În acest sens, creativitatea la crearea unei fotografii iese din scară și putem decora site-ul cu o imagine unică cu un unghi sau unghi de vizualizare neobișnuit.

23. Carusel
Glisorul carusel, care a intrat în viața de design în urmă cu câțiva ani, este încă popular și relevant în designul site-urilor web. Cu ajutorul unui slider larg, este convenabil să rotiți știrile principale, precum și să prezentați promoțiile curente, colecțiile și alte informații relevante pe care vizitatorul le vede imediat când ajunge pe site.

24. Auto-redare audio și video
Dar această tendință este un salut din anii 2000. Îmi amintesc că pe atunci era la modă să redați un sunet când accesați un site. Și mulți acesta. Nu pot spune că acompaniamentul audio mă mulțumește, dar poate că o utilizare moderată va fi discretă. Ei bine, videoclipul care se redă singur este mai degrabă un tribut adus reclamei, ca și pentru mine. Ei bine, plus dorința de a păstra atenția vizitatorului în feed. Nu cea mai plăcută tendință, dar necesară din punct de vedere comercial.

25. Modele geometrice
Ei bine, vom termina recenzia noastră cu o tendință de modă pe termen scurt sub formă de diferite modele și modele geometrice. Au devenit neașteptat de populare la sfârșitul anului trecut. Ei bine, o altă modalitate de a vă face designul site-ului web să iasă în evidență și unic.

Web Design Trends 2017 Infografic
Vă ofer un infografic, care prezintă clar toate tendințele și tendințele în web design. Puteți descărca poza la dimensiune mare de la acest link pe DeviantArt. O pagină pe DeviantArt se va deschide într-o fereastră nouă. Acolo, faceți clic pe cuvântul Descărcare din dreapta imaginii și salvați imaginea pe computer.

Dacă intenționați să studiați design grafic în străinătate sau studiați deja, trebuie doar să înțelegeți tendințele actuale din industrie. 2016 a fost marcat de ascensiunea designului material, revenirea stilului retro modern, utilizarea spațiului negativ și stilul minimalist.

Care sunt cele mai vizibile tendințe de design grafic în 2017?

1. Anii 80 s-au întors
În ultimul deceniu, designerii au revăzut fără încetare și au adus înapoi cele mai bune tendințe de design grafic de altădată. Dacă în 2016 stilul retro „modern” a dominat, atunci în 2017 săgețile au avansat. Trăsăturile caracteristice ale stilului anilor 80 au intrat în modă: culori luminoase și neon, combinații imprevizibile de modele și desene, exprimarea liberă a poziției autorului și jocul cu compoziția.

Aruncă o privire mai atentă asupra lucrurilor, revistelor, cărților și reclamelor anilor 80, va deveni un flux nesfârșit de inspirație pentru lucrările moderne.

2. Individualismul
2017 a fost anul individualismului. Designul plat a fost principala tendință a anului precedent, Google a dezvoltat chiar și un ghid cu șabloane pentru a simplifica munca designerilor și programatorilor. Drept urmare, a început să fie folosit peste tot, iar unicitatea s-a pierdut.

Designul plat face o treabă grozavă de a îmbunătăți experiența utilizatorului pe site-uri web și aplicații și nu ar trebui abandonat. Prin urmare, noutatea în design grafic în 2017 este combinația dintre cele mai bune din design plat și artă: modele artistice, imprimeuri, desene unice. Motivele naturale sub formă de plante, marmură, copaci, pietre prețioase sunt comune, combinate cu o tipografie simplă.

Principala cerință a tendinței este autenticitatea. La imprimare, ar trebui folosite materiale și tehnici antice, cum ar fi serigrafia și amprentele. În același timp, culorile bomboane înlocuiesc marourile și griurile decolorate folosite în 2016, ceea ce aduce luminozitate și optimism designului.

Nu în ultimul rând, tendința de design grafic din 2017 este design low poly. Se caracterizează prin detalii reduse și stil de joc. Această tehnică este folosită pentru a crea machete pentru postere, fluturași și articole de papetărie, iar măștile realizate cu design low-poli au câștigat o mare popularitate în întreaga lume.

Îți place designul și vrei să devii un profesionist în acest domeniu? Începeți cu educația. Studiază la Școala de Design Marangoni în străinătate (din Milano) pe unul dintre programele de specialitate:

Puteți afla mai multe despre studiul designului în străinătate cu ajutorul programelor Istituto Marangoni gratuit de la specialiștii STUDIES&CAREERS.

” John Moore Williams, șeful Strategiei de conținut la Webflow.

Sfârșitul anului în curs este aproape, și fiecare web designer și-a pus cel puțin o dată o întrebare importantă: ce va determina designul web în viitorul 2017? Am decis să găsesc răspunsul la această întrebare și i-am întrebat pe designerii WebFlow ce tendințe cred că vor predomina în următoarele 365 de zile. Le-am comentat și gândurile.

În primul rând, să obținem părerea designerului principal Webflow, Sergie Magdalin.

1. Design bazat pe conținut

„Dispunerea elementelor de proiectare într-o structură dată ar trebui să fie astfel încât cititorul să poată înțelege cu ușurință ideea principală fără a încetini viteza lor normală de citire” -german Zapf

În ultimii câțiva ani, a avut loc o schimbare dramatică a viziunilor cu privire la rolul designului în afaceri. Anterior, designul a fost văzut ca pasul final în procesul de creare a unui obiect: un designer vrăjitor vine la sfârșit și ne umple produsul cu praf de zână pentru a-l face mai bun decât concurența.

A fost foarte interesant să urmărim metamorfozele care au loc cu priorități de dezvoltare.

Iar cel mai frumos lucru din aceste metamorfoze a fost trecerea la model, când conținutul se ridică din nou în capul mesei. Designerii din întreaga lume și-au dat seama că utilizatorii vizitează site-urile în primul rând pentru conținut, fie că este vorba de tweet-uri scurte, articole de referință lungi sau meme-uri proaspete de pe internet. Rolul suprem al designului este de a arăta conținutul în cel mai atractiv și de înțeles mod și de a obține cel mai bun rezultat din acesta.

Acesta este unul dintre motivele trecerii de la designul „skeuomorf” (unde elementele sunt descrise cât mai asemănătoare cu omologii lor din lumea reală) la un design plat, minimalist. Cu aceste considerente, Google a creat Material Design.

Desigur, așa cum spune a treia lege a lui Newton, pentru fiecare acțiune există o reacție egală și opusă. Mulți designeri cred că tendința designului plat a ucis chiar spiritul designului. Ne așteptăm ca această dezbatere să continue și în anul care vine, dar accentul va rămâne pe conținut, baza oricărei lucrări de design.

2. Interacțiune de înaltă calitate între designeri și dezvoltatori și între designeri

Importanța designului în formarea unei afaceri este în creștere, așa că se acordă din ce în ce mai multă atenție modului în care designerii lucrează împreună cu colegii lor designeri și colegii lor dezvoltatori.

Această preocupare pentru interacțiunea cu designerii se datorează parțial masivității aplicațiilor mobile și web care sunt dezvoltate astăzi. Pe lângă faptul că astfel de corporații gigantice precum Google, Facebook, Twitter și LinkedIn necesită o muncă titanică a echipei de proiectare din părți complet diferite, designerii trebuie să fie întotdeauna pe aceeași lungime de undă unul cu celălalt. Aceasta înseamnă că este nevoie de o comunicare mai strânsă cu privire la proiect și de modalități de a lucra împreună cel mai eficient.

Au fost create multe instrumente pentru a face acest lucru mai ușor, de la șabloanele și panourile colaborative ale echipei Webflow la editorul de interfețe grafice în timp real Figma. Sunt sigur că în 2017 aceste platforme vor fi îmbunătățite și completate.

Când vine vorba de colaborarea dintre designeri și dezvoltatori, se pune mult accent pe procesul de transfer foarte important. De exemplu, în loc să trimită imagini statice grele și voluminoase, designerii pot acum să partajeze machete redate live datorită instrumentelor precum InVision, Marvel, UXPin.

Carson Miller a spus asta în recentul său articol TechCrunch „Viitorul designului frontal”:

„Mai devreme sau mai târziu, instrumentele de design și modelele de design vor înlocui complet dezvoltarea front-end. Veți putea crea cu ușurință o bază de înaltă calitate pentru oricare dintre cadrele dvs. fără a recurge la scrierea manuală a codului.”

3. Proces simplificat „de la designer la dezvoltator”

Instrumentele de proiectare și prototipare menționate mai sus facilitează vizualizarea diferitelor etape de colaborare prin vizualizare, de la fișiere animate Keynote până la site-uri web complet funcționale. Acest mod de partajare a materialului de lucru reduce timpul de răspuns în cadrul proiectului, crescând astfel calitatea designului, crescând viteza echipei de dezvoltare și reducând posibilitatea dezamăgirii de rezultat. De asemenea, îmbunătățește interacțiunea cu clienții. De exemplu, pentru mulți utilizatori WebFlow, întâlnirile cu clienții au devenit ateliere cu drepturi depline, unde designerii pot implementa rapid idei și toată lumea își poate testa ideile aproape imediat.

Tendințele de design web pentru anul viitor, potrivit designerului de produse Gadzhi Kharkharov:

4. Titlu mare, tare

Pe măsură ce lumea designului web începe să se concentreze asupra conținutului, devine din ce în ce mai frecvent ca site-urile web să vadă titluri inspiratoare în fonturi care sunt la fel de mari și îndrăznețe ca și conținutul lor.

Partenerii Heco #MadeInWebflow

După cum puteți vedea din exemple, „mare” și „aldin” se referă la mai mult decât doar descrierea unui font. Mai degrabă, înseamnă că o parte semnificativă a ecranului principal este dedicată unei declarații simple, dar puternice și autosuficiente despre un produs sau serviciu. Un astfel de titlu ar trebui să conțină esența și să fie ușor de înțeles pentru orice vizitator, evitând pompozitatea excesivă (bine, expresia „Design the impossible” poate suna prea tare).

În lumea aglomerată și supraîncărcată de informații de astăzi, aceste declarații scurte și puternice funcționează bine pentru orice marcă.

5. Markup sofisticat care provine din elementele de bază ale designului grafic

Dacă vrem să anticipăm dezvoltarea designului web (cel puțin latura sa vizuală), trebuie să ne uităm la istoria dezvoltării designului grafic.

În ultimii câțiva ani, aspectul paginii web a fost limitat la puterea CSS, dar noi module precum Flexbox și CSS Grid (în martie 2017) vor permite cele mai îndrăznețe idei în aspectul web.

Sarcina noastră principală acum este să înțelegem cum ar trebui să funcționeze noile caracteristici de aspect al grilei în cadrul designului responsive.

Iată câteva exemple de la ce să vă așteptați (atâta timp cât aveți un browser care acceptă CSS Grid, cum ar fi Firefox Nightly, Safari Technical Preview sau Chrome Canary, desigur):

Laborator de amenajare experimentală Jen Simmons

Acordați atenție stilului blocului principal - o referire clară la istoria designului grafic.

Grilă prin exemplu

Mai multe exemple puteți vedea pe site.

6. Mai multe SVG-uri

SVG (grafică vectorială scalabilă) are mai multe avantaje pentru designerii și dezvoltatorii web decât formatele de imagine tradiționale precum JPG, PNG sau GIF.

Principalele avantaje ale SVG sunt descrise chiar în numele formatului - acesta este scalabilitatea și vectorul. Spre deosebire de formatele bitmap și bazate pe pixeli, imaginile SVG sunt formate din vectori, descrieri matematice ale formei unui obiect. Aceasta înseamnă că SVG este independent de rezoluție, iar imaginile în acest format vor arăta grozav pe toate ecranele și dispozitivele. Nu este nevoie să vă faceți griji că imaginile sunt neclare pe retină.

Dar asta nu este tot. SVG este, de asemenea, renumit pentru că nu necesită trimiterea solicitărilor HTTP. Dacă ați testat vreodată viteza de încărcare a site-ului dvs., este posibil să fi observat că aceste solicitări HTTP vă pot încetini cu adevărat site-ul. Nu există o astfel de problemă cu SVG.

7. Instrumente de proiectare receptivă bazate pe reguli

Designul responsive a schimbat complet modul în care privim aplicațiile web și modul în care le construim.

Dar, în mod ciudat, principiul de funcționare a programelor pentru crearea designului nu s-a schimbat în niciun fel. Cele mai multe dintre aceste instrumente funcționează astfel: trebuie să creați aceeași pagină din nou și din nou pentru diferite dispozitive și rezoluții. Într-o industrie care necesită generare rapidă de idei, dezvoltare rapidă și lansare rapidă, această pierdere de timp este pur și simplu inacceptabilă.

Așteptați-vă la un nou val de instrumente de design (cum ar fi Figma) bazate pe „reguli” care ajustează modul în care arată site-urile web pe diferite ecrane și dispozitive, reducând astfel repetitivitatea designerilor. Astfel de instrumente se bazează pe relațiile spațiale ale elementelor, iar atunci când modificăm dimensiunea ecranului sau dispozitivul, ele tind să mențină aceste relații prin schimbarea dimensiunii elementelor și a umpluturii dintre ele.

Apropo, astăzi există instrumente similare pentru aspectul site-ului web nu numai pentru designeri, ci și pentru utilizatorii obișnuiți. De exemplu, TruVisibility.com - platforma adaptează designul creat exact după anumite reguli, conform cărora aspectul și dimensiunea elementelor se adaptează la dimensiunea ecranului. Rămâne doar să faceți câteva ajustări, astfel încât pagina web să arate așa cum ar trebui pe dispozitive. Utilizatorul nu trebuie să recreeze o versiune pentru dispozitive mobile, iar acest lucru îi economisește mult timp.

Tendințele de design în 2017 conform lui Ryan Morrison, designer grafic senior.

8. Culori mai vibrante

Când era minimalismului și brutalismului a început în designul web în 2016, designerii au încercat să aducă mai multă personalitate muncii lor, fără a depăși stilurile la modă. Și există cel puțin câteva cazuri în care culorile strălucitoare și îndrăznețe au fost folosite cu mare succes.

Aruncă o privire pe noul site al Asana cu o umplere de culori vibrante:

Noua pictogramă a aplicației Instagram a atras multe critici, dar această reproiectare a reîmprospătat cu siguranță marca:

Tot ceea ce face Stripe nu necesită o vizualizare separată:

După cum puteți vedea, acestea nu sunt doar culori strălucitoare și îndrăznețe. Degradeurile revin și ele în stil, îmbinând și estompând culorile în nuanțe care amintesc de cerul de la amiază sau de un apus de soare strălucitor. Este un fel de renaștere a naturalismului, cu culori vibrante și degrade îndrăzneți, și eu personal aștept cu nerăbdare să văd mai multe din asta în 2017.

Deși, poate că merită să reducă puțin luminozitatea? Te urmăm Asana.

9. Mai mult accent pe animație

Elementele animate au jucat de mult un rol cheie în interfața web, iar această tendință va continua și în 2017. De fapt, pe măsură ce designerii au acces la instrumentele pentru a crea animații captivante, vom vedea că aceste efecte devin mai vizibile și mai sofisticate.

Acest subiect este deosebit de important deoarece crearea animației devine mai ușoară în fiecare zi. La Conferința Design & Content din 2016, guru al animației Val Head a subliniat că atunci când proiectează elemente animate, designerii trebuie să țină cont de obiectivele și nevoile mărcii pentru a obține impactul pe care creatorii de conținut se așteaptă să-l vadă. Dacă acest sfat este respectat, animația va îndeplini sarcini care sunt semnificative pentru brand și nu doar să-i provoace o migrenă utilizatorului.

10. Markup neobișnuit

2016, ca și anii precedenți, este renumit pentru discuțiile nesfârșite conform cărora designul web fie moare, fie își pierde spiritul.

Cei care încearcă să convingă pe toată lumea de moartea designului web exagerează în mod clar. Mulți continuă să caute modalități de a prezenta conținutul utilizatorilor în moduri noi. Una dintre cele mai tentante moduri este de a sparge sistemul și de a ignora aranjamentul obișnuit al grilei de elemente dictat de regulile designului responsive.

Metoda de aranjare „ruptă” constă în elemente care se încadrează în afara granițelor unei grile aliniate meticulos. Astfel de tehnici pot părea uneori chiar neplăcute pentru ochi. De exemplu:

Texte și imagini suprapuse:

Texte și imagini împrăștiate (aparent) aleatoriu pe pagină:

Aceasta a fost prima parte a traducerii articolului „18 tendințe de design web în 2017”. Sunteți de acord cu opiniile experților Webflow? Ce web design crezi că va fi la modă în anul viitor?