Meniul
AcasăAvarii

Programe pentru web designeri anul acesta. Degrade și culori strălucitoare. Noi opțiuni de navigare

Să ne dăm seama ce înseamnă să fii popular, la modă și modern în design web în 2017. Pentru a face acest lucru, să ne uităm la 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 site-uri web. Acest lucru este legat în special de dezvoltare tehnologii mobile, canale de comunicare și îmbunătățiri ale dispozitivelor. De exemplu, o tendință precum mobilitatea site-ului a devenit obligatorie. Comercializarea Internetului dictează, de asemenea, condițiile stricte ale acestuia designerilor și dezvoltatorilor web. În același timp, unele 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 acestea au fost icoane cu umbră lungă obiecte reprezentate. Anul acesta modelele geometrice au devenit populare, ne vom uita și la ele. Deci, hai să o luăm î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 smartphone-uri mobileși tablete. Motoarele de căutare, de altfel, monitorizează foarte atent cât de bine este adaptat un site la diverse dispozitive și, pe baza acestuia, determină locul său î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, estetic - liniile frumoase, curbele și literele în sine sunt decor și element decorativ. Și, în al doilea rând, aceasta este funcționalitatea - cu ajutorul unui font mare puteți transmite fără ambiguitate și clar vizitatorului ideea principală.

3. Video cu ecran lat
Videoclipul pe ecran complet de pe fundalul site-ului ne captează, fără îndoială, imediat atenția. Acest bun venit pentru a interesa vizitatorul. Dezvoltare modernă tehnologia facilitează încorporarea videoclipurilor pe un site web, ceea ce înseamnă că designerii vor folosi din ce în ce mai mult această tehnică. Cu toate acestea, există o avertizare: vizionarea videoclipului este interesantă doar prima dată, a doua și a treia oară devine plictisitoare. Prin urmare, această tehnică este eficientă doar pentru vizitatorii noi.

5. Cinemagrafe
O alternativă bună la videoclipurile cu ecran lat și la fotografiile mari de fundal. Cinemagrafele sunt fotografii în care apar mișcări mici, repetitive. Ele sunt de obicei prezentate în format gif și oferă spectatorului iluzia de a viziona un videoclip. Mai multe despre cinemagraphs cu o cantitate mare exemple pot fi găsite în selecție

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

7. Microinteracțiune pe site
În zilele noastre, în designul web se acordă o mare atenție microinteracțiunii funcționalității și designului site-ului cu vizitatorul. Esența căruia este că vizitatorul poate vedea clar rezultatul acțiunii sale pe site, fie că este vorba despre o ajustare setari personalizate, urmărind un link, confirmând o operațiune, interacționând cu pictograme active, butoane, comutatoare, contoare și alte elemente.

8. Animarea obiectelor
Capacitățile html5 și css3 moderne vă permit să utilizați un arsenal mare efecte vizuale Pe net. 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, reacționând de obicei la mișcarea mouse-ului. Poate că vom vedea exemple de animație mai complexă.

9. Scheme de culori vibrante
Popular culori la modă 2017 preferă luminozitatea și saturația. Nuanțele originale interesante de stacojiu, muștar, galben, smarald, albastru intens, precum și 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 derularea site-ului este ideală pentru dispozitivele mobile, prezența acestuia va fi semnificativă î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 elemente de control simple cu derulare.

11. Efectul de paralaxă
Paralaxa este o schimbare a poziției aparente a unui obiect față de un fundal îndepărtat. În web design, acest efect este utilizat atunci când derulați un site, când obiectele și fundalul derulează cu la 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 o interfață de card constând din blocuri de înțeles autonome, a fost populară de ceva timp. Această tendință este foarte bună pentru dispozitivele mobile, deoarece blocurile se aliniază bine pentru orice rezoluție de ecran. Dar pe site-urile mari arată destul de la fel și sunt greu de ierarhizat și structurat.

13. O pagină
Site-urile web cu o singură pagină, paginile de destinație și paginile de destinație au devenit o 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 vor pune un accent sporit pe un buton 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 despre anul trecut și, cel mai probabil, tendința va continua și în 2017. Datorită comercializării Runetului și creșterii comerțului online, 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ă rezervați locuri, să transferați bani, să completați un formular sau să faceți un test - toate acestea se pot face online în câteva clicuri de mouse.

16. Infografice
Reprezentarea grafică sub formă de infografică este încă populară și solicitată. Acompaniament de text imagine frumoasă sau o pictogramă în combinație cu elemente stilate desenele fac infografica atractivă din punct de vedere estetic. Infograficele comparative sunt deosebit de clare și interesante din punct de vedere vizual - cum ar fi ceea ce s-a întâmplat, ce s-a întâmplat, da, nu, argumente pro și contra, ce s-a întâmplat și nu, etc. De asemenea, puteți folosi infografice pentru a spune o poveste pas cu pas sau pentru a prezenta în mod viu statistici plictisitoare.

17. Meniu de hamburger
Meniul Hamburger este o pictogramă vizuală cu trei dungi orizontale, de obicei în partea de sus în colțul site-ului, când se face clic, se deschide sau alunecă din lateral meniu complet. Mulți experți prevăd că această tendință se va estompa, din cauza faptului că majoritatea utilizatorilor neexperimentați pur și simplu nu înțeleg scopul acestei pictograme. Prin urmare, designerii web tind să favorizeze navigarea simplificată. Dar, cu toate acestea, meniul de hamburger îl vom vedea de mai multe ori 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 populare și preferate tendințe în rândul designerilor. Este suficient să plasați pictogramele tematice corespunzătoare lângă blocurile cu text - iar acum întregul text capătă ordine și structură logică și vizuală. Deci, în anul viitor vom continua să folosim activ pictogramele.

19. Stivuirea scrisorilor
Stivuirea scrisorilor este text într-un pătrat. De fapt, acesta este un exemplu de soluție 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
Pentru a economisi spațiu și spațiu pe dispozitivele mobile, în urmă cu ceva timp a apărut un buton gol - o inscripție mare cu un contur pătrat în jurul cuvântului. Un astfel de buton oferă o imagine de ansamblu asupra fundalului din spatele butonului și, în același timp, își păstrează funcționalitatea ca buton cu drepturi depline. În plus, ca element de design, un astfel de buton arată elegant și îngrijit.

21. Evitați fotografiile de stoc
Unii experți au observat că designerii încep să abandoneze fotografiile de stoc. Deoarece aparate moderne vă permit să faceți singur o fotografie rapid și eficient, apoi puteți evita impersonalitatea și uniformitatea stocului și puteți crea propria dvs fotografie unicăși creează-ți propriul design unic.

22. Unghiuri neobișnuite în fotografie
Găsirea unghiurilor interesante în fotografii a devenit disponibilă oricărui proprietar al unui smartphone cu cameră. În acest sens, creativitatea la crearea fotografiilor este în afara topurilor și putem decora site-ul imagine unică cu un unghi de vizualizare sau perspectivă 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 atunci când proiectați site-uri web. Folosind un glisor larg, este convenabil să rotiți știrile principale, precum și prezentul promotiile curente, colecții și alte informații relevante pe care vizitatorul le vede imediat după intrarea pe site.

24. Auto-redare audio și video
Dar această tendință este salutară din anii 2000. Îmi amintesc pe atunci că era la modă să redați un sunet când accesați un site web. Și acesta pentru mulți. 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 menține atenția vizitatorului în feed. Nu cea mai plăcută tendință, dar necesară din punct de vedere comercial.

25. Modele geometrice
Ei bine, vom încheia 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.

Infografică „Tendințe în design web 2017”
Vă ofer un infografic care prezintă clar toate tendințele și tendințele în web design. Descărcați poza în marime mare Puteți urma 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.

Ce aduce 2017 nou pe web? Care sunt principalele direcții și tendințe în design web la care ar trebui să ne așteptăm? Acum vom afla totul – în formatul unei recenzii succinte a celor mai izbitoare tendințe, folosind exemple de site-uri TRENDY.

Designul web este actualizat constant cu idei îndrăznețe, iar popularitatea a tot ceea ce este practic stimulează deja dezvoltarea tendințelor. La meniurile care glisează prin butonul hamburger și navigarea care se ascunde automat la derulare, se adaugă moda ecranelor divizate, împărțind paginile principale și celelalte în jumătate.

Citeste si: 8 tendințe web pentru 2019: layout-uri moderne

În ceea ce privește atractivitatea estetică, stilul plat a dominat WEB-ul timp de 3 ani la rând. Apoi Google a introdus designul de materiale, care ne-a scos puțin din abstracția vizuală. În 2017, designul web va face încă un pas înapoi spre realism. Fie că este vorba de forme, de alegerea culorii sau de funcționalitate – 2017 va fi anul hibrizilor în care realitățile lumii fizice și ale tehnologiei se intersectează. Drept urmare, vă puteți aștepta la o experiență mai bună de navigare pe web.

Iată nouă tendințe de design web care pot reduce decalajul.

1. Navigare pop-out

Astăzi când audienta mobila Deja bucurându-se de navigarea pe internet, importanța spațiului pe ecran este mai mare ca niciodată. Ascunzând funcționalitatea și navigarea până „până când este nevoie”, designerii web și agenții de marketing moderni se străduiesc să elibereze spațiu pe site-ul web pentru vânzarea imaginilor.

Meniul pop-out, creat special pentru smartphone-uri, îmbunătățește UX și ecrane mari. Destul de ciudat, meniul ascuns face o treabă mai bună de a sublinia ceea ce este important, încurajându-vă să vă concentrați pe un anumit obiectiv la un moment dat. Când deschideți meniul, acesta devine centrul atenției pe pagină și este, de asemenea, utilizat în mod activ în procesul de explorare a site-ului.

Avantaje:

  • Economisirea spațiului pe ecran
  • Concentrând atenția utilizatorilor asupra meniului, îmbunătățește navigarea pe site
  • Ascunderea elementelor de navigare vă ajută să vă concentrați asupra altor lucruri (cum ar fi obiectivele de conversie)
  • Îmbunătățit aspect primul ecran
  • Mai mult structura flexibila proiecta

Citeste si: 20 cele mai bune exemple proiecta pagina principala site-ul

Cele mai bune practici:

Design de culoare pentru a se potrivi cu paginile site-ului. Efect maxim Acest tip de simplificare a unei pagini web se realizează cu un fundal cu o singură culoare sau cu o structură de meniu glisant cu o singură culoare.
Nu distrageți atenția utilizatorului asupra navigării - este mai bine să lăsați caracteristicile și decorațiunile pentru paginile în sine. Desigur, un design modern frumos și un meniu elegant nu vor strica:

Tipografie simplă mare. Tipografia elegantă și curată adaugă varietate modelului de mai sus de design web „practic”. Fonturile mari/aldine, ușor de citit, îmbunătățesc eficiența navigării și umple spațiul.

Designerii urmează adesea această tendință folosind litere mari.

Pictograme hamburgeri cu o cruce pentru a deschide/închide meniul. Deoarece standardul permite, ar fi mai corect să le combinați într-o singură pictogramă pentru o mai mare claritate și vizibilitate.

Schimbați/suprapuneți conținutul la deschidere. Un meniu pop-up este rareori creat pentru a ocupa întregul ecran. În mod obișnuit, lăsând vizibil o parte din conținutul paginii, ceea ce facilitează revenirea la acesta pe un ecran mic. Pe desktop arată ca o „imitație mobilă” la modă.

2. Contrar paradigmelor de navigare – alternative

În zilele întunecate ale web-ului, existau două tipuri de navigare: Meniul de sus si lateral. Cu design responsive a apărut meniul hamburger, care acum este criticat pe scară largă pentru că face mai dificilă implicarea utilizatorului/dificil de descoperit/mai puțin eficient.

Avantajele navigației non-standard:

  • Design unic
  • Inovațiile atrag
  • Experiență îmbunătățită a utilizatorului (UX)
  • Pentru designeri - noi posibilități de proiectare a site-urilor web

Cele mai bune practici:

Citeste si: 11 site-uri web creative ale studiourilor interne de web design

Diverse experimente cu navigarea pe site. Cu o atitudine atât de ambiguă față de „burgeri”, în 2017 ar trebui să ne așteptăm la apariția unor inovații interesante în navigație.

Meniul unic al Hillsiderancho.com combină navigarea de sus, stânga, dreapta și derulare

Niciun meniu de navigare. Utilizatorul modern se confruntă cu mult conținut și nu trebuie să i se spună ce să facă în continuare. Sul! Natura organică a acestui comportament a fost deja remarcată în tendințele web anterioare (orizontală, defilare infinită, control de la tastatură, gesturi...). Unii designeri elimină cu totul meniurile, invitând vizitatorul să folosească/obțină o experiență „avansată” de cercetare a site-ului. Adaptarea site-urilor pentru dispozitive mobile și tablete schimbă, de asemenea, UX/interfețele în sine și deschide perspective pentru derularea orizontală.

Site-ul nu are meniu de navigare - vi se cere să derulați pentru a găsi conținut, puteți derula cu cursorul

Citeste si: Cele mai neobișnuite și originale site-uri

Meniu pop-up. Eram atât de pasionați de Drop-Down încât nici nu ne-am gândit la o alternativă simplă la navigarea Pop-UP. În exemplul de mai jos, meniul apare în centrul ecranului. În general, paginile web au suficient spațiu pentru a crea o navigare accesibilă și proeminentă, fără liste derulante.

Navigarea pop over este utilizată atunci când trecerea cursorului peste una dintre cele 6 secțiuni schimbă fundalul întregului meniu pe ecran

3. Carduri - inspirație din electronicele portabile

Așa cum utilizatorii de telefonie mobilă au schimbat designul site-urilor web moderne, dispozitivele portabile încep să le influențeze designul. Cu zeci de milioane de articole purtabile vândute din 2015, utilizatorii au învățat să prețuiască excelența rațională și în alte domenii. Economisind spațiu pe ecran, dispozitivele electronice portabile îi vor învăța pe designeri web să simplifice lucrurile vizual, iar agenții de marketing vor învăța să specifice și să oficializeze în continuare sarcinile site-ului. Principalele reguli ale designului web bazat pe principiul containerelor: elegant, concis și fără prea mult efort - ideologia „mai puțin este mai mult” nu se limitează la dimensiunile ecranului.

Avantaje:

  • Design UX optimizat
  • Mai puține ambiguități și distrageri
  • Minimalismul accelerează încărcarea site-ului

Cele mai bune practici:

Dale, principiul containerelor și blocurilor în structura paginilor web. Tendința se menține de mai bine de un an (2014 - 2016...) și probabil 2017 va continua această tendință. Modelele de gadgeturi populare și noi în prezent (ochelari inteligenți, ceasuri, brățări, agrafe de haine, senzori încorporați în haine...) sunt realizate într-un stil laconic și informează la fel de discret utilizatorul. De așteptat, tehnologia purtabilă va inspira viață nouăîn interfețe ușor de citit. Modelul de container al interfeței de utilizare a cardului este conceput pentru a fi autonom și se adaptează bine pentru ecrane mai mari.

Pictograme SVG mari. Pictograma are nevoie de scalabilitate, simplitate - astfel încât să arate pe dispozitivele HD și să fie observată printr-o privire rapidă.

Paletă de culori strictă. Schemele de culori la modă revin acum principii de baza. Designul site-ului web în două culori (duoton) sau designul alb-negru cu adăugarea unei singure culori devin din ce în ce mai popular.

Spațiu alb suficient. Pentru a asigura uniformitatea între diferite formate, ei adaugă „aer” paginilor site-ului. Acest lucru se numește minimalism extrem. Pe lângă estetică: o atmosferă sofisticat-casual, economisirea de spațiu pe pagini, oportunități de a atrage atenția etc.


4. Material Design Lite (MDL)

Citeste si: Cele mai bune modele de magazine online în stiluri Flat și Material

Material Design Lightweight (MDL) de la Google oferă o bibliotecă de șabloane, seturi de elemente (carduri, formulare, pictograme, butoane...) și este o interpretare a unui catalog de componente Polymer gata făcute.

Cu tutoriale despre șabloane preexistente și componente open-source, MDL face designul de materiale deschis pentru implementare pe orice site sau aplicație. Straturile pseudo-3D, umbrele, animațiile sunt elemente de interfață ale designului web clasic, care aduc uzul mai aproape de simularea lumii reale.

Avantaje:

  • MDL diferă în partea mai buna de la designul site-urilor web tradiționale, păstrând în același timp beneficiile originale ale designului web clasic
  • Ușor de înțeles datorită interfeței clare și realiste
  • Disponibilitate pe mai multe platforme pentru toate dispozitivele (fără legarea la JS)

Cele mai bune practici:

Mecanica lumii materiale. Tratați elementele stilistice ale MDL ca și cum ar fi obiecte fizice reale, și anume:

  • Umbrele ar trebui să arate ca și cum ar fi aruncate de o sursă de lumină naturală
  • Alegeți dimensiunea și grosimea elementelor ca pentru obiectele reale - în conformitate cu legile fizice
  • Mișcare – răspuns la interacțiunea utilizatorului

Personalizare. Profitați de biblioteca de componente MDL selectând ceea ce aveți nevoie în combinația potrivită.

Paletă de culori plată. Materialul în stil MDL este cel mai potrivit pentru culorile plate - combinații luminoase și îndrăznețe ale acestora. De obicei, sunt alese o culoare principală și o culoare de accent. Se potrivește, de asemenea, cu estetica minimalistă susținută de cele două tendințe anterioare.

Citeste si: Culori în web design: tendințe de culoare (culori strălucitoare)

5. Culori vintage

Tonurile de gri au dominat web-ul în ultimii doi ani: fundaluri gri deschis în loc de alb, text gri ardezie în loc de negru și umbre subtile de gri care creează profunzime într-un stil de design material. În 2017, nuanțele vintage superbe revin în sfârșit.

Magazinul online de încălțăminte folosește culori dezactivate precum sepia. Designul de culoare, imitând vintage cu fotografii vechi, subliniază calitatea înaltă a produsului (în cele mai bune tradiții ale brandului de familie)

Luand in considerare dezvoltare activă tehnologii, comunicarea noastră cu computerul devine din ce în ce mai firească, și apare posibilitatea comunicării interactive folosind vocea. Prin urmare viitorul este asistenți vocali, dar aceasta este următoarea generație de aplicații.

Un buton de apel la acțiune ar trebui să fie un element cheie pe orice pagină. În zilele noastre se folosesc adesea culori prea strălucitoare și iritante. Dar pentru a sublinia butonul CTA în 2017, acesta va fi din ce în ce mai folosit animație simplă, nu este atât de enervant, dar își îndeplinește perfect funcția de a atrage atenția.

Amintiți-vă că principalul lucru este să nu exagerați! Folosiți mișcări fluide în animație după câteva secunde; acestea atrag atenția fără a fi prea enervante. Vă recomandăm să adăugați un buton de îndemn la antetul site-ului dvs. la efect mai bun. Și nu numai pe site, adaugă astfel de butoane și în mailingurile tale!

Fotografiile mari, și mai ales videoclipurile, atrag întotdeauna atenția. Mai mult, intriga video în sine poate interesa cu adevărat vizitatorul.

Dacă aceasta video de fundal, atunci ai două într-unul - este atât o fotografie, cât și un videoclip. Deoarece videoclipurile sunt încă folosite relativ rar ca fundal, ele trezesc imediat interesul.

Încercați să creați videoclipuri PERSUASIVE. Oameni adevărați Videoclipul dvs. ar trebui să creeze un sentiment de autenticitate, sinceritate și autenticitate. Asigurați-vă că utilizați o varietate de tactici: recenzii ale clienților, răspunsuri motivate la potențialele obiecții și demonstrații ale produselor.

Cu ajutorul unor astfel de videoclipuri, vei putea depăși orice îndoieli ale clienților tăi mult mai rapid și vei încheia afacerea.

Tendința #4 pentru designul site-urilor web în 2017 – derularea ca tip principal de navigare

În 201, defilarea devenise deja larg răspândită. El a făcut informațiile mai semnificative. Acum utilizatorii vor derula cu bucurie texte lungi, în loc să urmăriți link-uri și să așteptați ca paginile să se reîncarce.

Informații importante din antetul site-ului, cum ar fi principalul meniu de navigatie, număr de telefon sau buton sună din nou este fix și întotdeauna disponibil fără acțiuni suplimentare.

Derularea ajută povestea să curgă lin interesanta poveste, arată o mulțime de fotografii și astfel depășește îndoielile utilizatorilor și încurajează conversia.

O pagină de destinație bine concepută îi duce pe clienți într-o călătorie atent concepută care duce la conversie, fără a-i obliga să se gândească de două ori la alegerea unei căi.

Legat de oferta si produse similare, precum și promoții profitabile în timpul procesului de comandă să crească factura medie. Produsele conexe din comerțul electronic reprezintă 10 până la 30% din venituri. Amintiți-vă că a vinde unui nou client este de zece ori mai dificil decât a vinde cuiva care este deja gata să plătească.

Cu ajutorul unei ferestre pop-up, puteți reține clientul atunci când este pe cale să părăsească site-ul. Dar simțul proporției este foarte important aici, deoarece mulți utilizatori au început să-i urască.

Dar dacă abordați creativ crearea unor astfel de notificări și nu cereți nimic în schimb, de exemplu, oferiți transport gratuit, notați un cod cupon sau descărcați o versiune de încercare gratuită, atunci această abordare provoacă iritare.

” de 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 defini web design-ul în viitorul 2017? Am decis să găsesc răspunsul la această întrebare și i-am întrebat pe designerii WebFlow ce tendințe credeau că vor domina în următoarele 365 de zile. Am dat și propriile mele comentarii la gândurile lor.

În primul rând, să obținem opinia liderului designerului Webflow, Sergie Magdalin.

1. Design bazat pe conținut

„Dispunerea elementelor de design într-o structură dată ar trebui să fie astfel încât cititorul să poată înțelege cu ușurință ideea principală fără a-și reduce viteza normala citind" -Hermann Zapf

În ultimii câțiva ani s-a înregistrat o schimbare dramatică în gândirea despre rolul designului în afaceri. Anterior, designul era văzut ca pasul final în procesul de creare a unui obiect: designerul-magicul vine la sfârșit și stropește praful magic pe produsul nostru pentru a-l face mai bun decât concurența.

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

Iar cel mai frumos lucru la aceste metamorfoze a fost trecerea la un model în care conținutul stă din nou în fruntea mesei. Designerii din întreaga lume și-au dat seama că utilizatorii vizitează site-urile web în primul rând pentru conținut, fie că este vorba de tweet-uri scurte, articole specializate de lungă durată sau cele mai recente meme-uri de pe Internet. Rolul suprem al designului este de a prezenta conținutul în modul cel mai atractiv și de înțeles și de a obține cele mai bune rezultate din acesta.

Acesta este unul dintre motivele tranziției de la designul „skeuomorf” (atunci când elementele sunt descrise cât mai asemănătoare cu omologii lor în lumea reala) la un design plat, minimalist. Din aceste considerente, Google a creat Material Design.

Desigur, după cum afirmă a treia lege a lui Newton, pentru fiecare acțiune există o reacție la fel de puternică. Mulți designeri cred că moda este design 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 proiectare.

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

Importanța designului în modelarea afacerilor este în creștere, așa că se pune tot mai mult accent pe designeri care lucrează împreună cu colegii lor designeri și colegii lor dezvoltatori.

Această preocupare pentru interacțiunea cu designerii a apărut în parte din cauza volumului masiv de aplicații 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ă munca titanică a unei echipe de design cu absolut laturi diferite, designerii trebuie să fie mereu pe aceeași pagină unii cu alții. Aceasta înseamnă că este necesară o mai bună comunicare despre proiect și despre cum să lucrăm împreună cel mai eficient.

Pentru a face această sarcină mai ușoară, au fost create multe instrumente, de la șabloane de echipă și panouri din Echipa Webflow la editor grafic Interfețe Figma care arată schimbări în timp real. Sunt sigur că în 2017 aceste platforme vor fi îmbunătățite și completate.

Dacă vorbim despre interacțiunea dintre designeri și dezvoltatori, se acordă multă atenție proces important transferul muncii. 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 analizat acest lucru în articolul său recent „The Future of Front-End Design” de pe TechCrunch:

„Mai devreme sau mai târziu, instrumentele pentru crearea de design și modele de design vor înlocui complet dezvoltarea front-end. Puteți crea cu ușurință o bază de înaltă calitate pentru oricare dintre cadrele dvs. fără a fi nevoie să scrieți codul manual.”

3. Proces simplificat de la designer la dezvoltator

Instrumentele de proiectare și prototipare menționate mai sus vă permit să vizualizați diferitele etape ale colaborării prin vizualizări care variază de la fișiere animate Keynote până la site-uri web complet funcționale. Această metodă 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 cu rezultatul. De asemenea, îmbunătățește interacțiunea cu clienții. De exemplu, pentru mulți utilizatori WebFlow, întâlnirile cu clienții s-au transformat în întâlniri de lucru cu drepturi depline, unde designerii pot implementa rapid idei și toată lumea își poate testa ideile aproape imediat.

Tendințele de design web în 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, este din ce în ce mai obișnuit să vedeți titluri inspiraționale pe site-uri web cu fonturi 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 „aldine” nu se referă doar la descrierea fontului. Mai repede, despre care vorbim că o parte semnificativă a ecranului de start este dedicată unei declarații simple, dar puternice și autonome despre produs sau serviciu. Un astfel de titlu ar trebui să conțină esența și să fie de înțeles pentru orice vizitator, evitând pompozitatea inutilă (bine, expresia „Proiectează imposibilul” poate suna prea tare).

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

5. Markup complex 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 designului grafic.

În ultimii câțiva ani, aspectul paginii web a fost limitat la CSS, dar noi module precum Flexbox și Grilă CSS(care va fi lansat în martie 2017), vă va permite să implementați cele mai îndrăznețe idei în markup web.

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

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

Laborator de amenajare experimentală Jen Simmons

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

Grilă după exemplu

Puteți vedea mai multe exemple pe site.

6. Mai multe SVG-uri

SVG (grafică vectorială scalabilă) Grafică vectorială) are mai multe beneficii pentru designeri și dezvoltatori web decât formatele de imagine tradiționale, cum ar fi JPG, PNG sau GIF.

Principalele avantaje ale SVG sunt descrise chiar în numele formatului - scalabilitate și vector. Spre deosebire de formatele bazate pe raster și 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 orice ecran și dispozitiv. 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 verificat vreodată viteza de încărcare a site-ului dvs. web, este posibil să fi observat că aceste solicitări HTTP pot încetini cu adevărat site-ul dvs. Nu există o astfel de problemă cu SVG.

7. Instrumente pentru proiectarea receptivă bazată pe reguli

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

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

Un nou val de instrumente de design (cum ar fi Figma) este de așteptat să se bazeze pe „reguli” care ajustează aspectul site-urilor pe diverse ecraneși dispozitive, reducând astfel numărul de acțiuni repetate ale designerului. Astfel de instrumente se bazează pe relațiile spațiale ale elementelor și, pe măsură ce schimbăm dimensiunea ecranului sau dispozitivul, ele se străduiesc să mențină aceste relații prin modificarea dimensiunilor 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 după anumite reguli, conform cărora aspectul și dimensiunile elementelor sunt ajustate la dimensiunea ecranului. Tot ce rămâne este să faceți câteva ajustări pentru a vă asigura că pagina web arată așa cum ar trebui pe dispozitive. Utilizatorul nu trebuie să recreeze versiunea pentru dispozitive mobile, iar acest lucru îi economisește în mod semnificativ timpul.

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

8. Mai multe culori luminoase

Când era minimalismului și brutalismului a început în designul web în 2016, designerii au încercat să adauge 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 la noul site Asana cu o pată de culoare:

Pictogramă nouă Aplicații Instagram a primit multe critici, dar această reproiectare a reîmprospătat, fără îndoială, marca:

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

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

Deși, poate merită să reduceți puțin luminozitatea? Te urmărim, Asana.

9. Mai mult accent pe animație

Elementele animate au fost redate de mult timp Rol cheieîn interfața web, iar această tendință va continua în 2017. De fapt, atâta timp cât designerii au acces la instrumente pentru a dezvolta animații convingătoare, vom vedea că aceste efecte devin mai vizibile și mai sofisticate.

Acest subiect este deosebit de important deoarece crearea animației devine din ce în ce 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 ar trebui să țină cont de obiectivele și nevoile mărcii pentru a obține efectul pe care creatorii de conținut se așteaptă. Dacă acest sfat este luat în considerare, animația va îndeplini sarcini care sunt semnificative pentru brand și nu doar să îi provoace o migrenă utilizatorului.

10. Marcaje neobișnuite

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 că designul web a murit, 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 aspectul obișnuit al grilei dictat de regulile designului responsive.

Metoda de marcare „ruptă” implică elemente care trec dincolo de grila aliniată meticulos. Astfel de tehnici pot părea uneori chiar neplăcute pentru ochi. De exemplu:

Texte și imagini care se ciocnesc unele de altele:

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 fel de web design crezi că va fi la modă în anul viitor?

Ryan McCready, editor de conținut pentru serviciul de infografică Venngage, vorbește despre tendințele în lume în acest moment. design grafic, și ce tehnici au trebuit să fie abandonate anul acesta.

Culori indraznete si vibrante

În ultimii câțiva ani, mulți lideri tehnologici au folosit culori dezactivate și ușor de citit. Așa că au încercat să creeze o schemă de design foarte clară și să arate că viitorul elegant și funcțional, care se arată de obicei în filmele științifico-fantastice, a sosit deja.

Această metodă a ajutat compania să treacă la o nouă etapă de dezvoltare și să-și unifice toate aplicațiile sub o singură culoare. Ca și în cazul Spotify, o utilizare atât de îndrăzneață culori deschise a făcut marca să fie recunoscută.

Moda pentru culori îndrăznețe și strălucitoare în design provine din principiile Google Material Design. Compania a ales plat, raționalizat și design intuitiv cu adăugarea de „culori neașteptate și energice, precum și fonturi și imagini funcționale și plăcute pentru ochi”.

În general, multe tendințe actuale ale anului 2017 au apărut sub influența principiilor Materialului Design Google.

Le-am folosit și pentru a realiza această imagine publicitară. e-carte. Drept urmare, imaginea a devenit incredibil de populară.

Dacă nu poți alege cele mai bune culori pentru designul dvs., citiți mai departe pentru câteva exemple grozave de palete de culori. Și nu vă fie teamă să folosiți culori care contrastează unele cu altele.

Font aldine

Fontul bold atrage atenția cititorilor. Involuntar acordați atenție inscripțiilor mari și atrăgătoare.

Exemplul meu preferat este Wired. Folosește diferite fonturi pentru a evidenția anumite titluri și pentru a menține o ordine ierarhică a informațiilor pe pagină.

Aruncă o privire:

Un alt exemplu bun de utilizare a fonturilor captivante este HubSpot. Textul este în prim plan și susținut de grafică:

HubSpot înțelege că în fiecare an timpul necesar pentru a absorbi informații dintr-un tweet tinde să scadă la zero. Prin urmare, pentru a atrage atenția cititorului, folosesc inscripții scurte și succinte cu litere aldine.

În plus, acum tot mai mulți oameni navighează pe internet cu telefoane mobile. Datorită ecranelor de înaltă definiție, există o nevoie din ce în ce mai mare de a folosi fonturi aldine. Deci, pentru a reține cititorii, trebuie să vă livrați conținutul în modul corect.

Buffer evidențiază titluri de-a lungul întregului articol, nu doar la început - facând articolele mai ușor de citit pe toate dispozitivele. Recomand să folosiți această abordare pentru articole lungi - în acest fel veți ajuta cititorii să le navigheze.

Am aplicat această metodă la crearea acestui infografic. Combinaţie îndrăzneţși soluțiile de culoare interesante atrag atenția:

Fonturi din Google Fonts

eu folosesc Fonturi Google de foarte mult timp, pentru că sunt universale. Dacă trebuie să vin cu un design pentru o publicație online și apoi să-l adaug la o prezentare, sunt sigur că toate fonturile vor funcționa bine împreună. Toate arată grozav pe orice platformă de blogging sau site web.

Apropo, toate cele 810 fonturi sunt absolut gratuite! Da, oamenilor le plac lucrurile gratuite. De asemenea, le plac lucrurile care sunt foarte ușor de utilizat. Iată un exemplu de combinare a mai multor fonturi populare de la Google:

Pe site-ul nostru folosim fonturile Roboto și Open Sans.

Fotografii originale

În fiecare an, cantitatea de conținut crește, la fel și nevoia imagini de înaltă calitate. Pentru ca fotografiile să reziste termen lung, autorii încearcă să le facă cât mai universale.

Există o singură problemă: cele mai bune imagini generice tind să devină învechite în timp. Dacă urmăriți știrile din domeniul tehnologiei și marketingului, atunci probabil că sunteți familiarizat cu această fotografie:

Este folosit în pagini de destinație, bloguri și chiar în postările de pe Instagram. Sincer să fiu, l-am luat chiar eu pentru un site la care am lucrat acum câțiva ani. Datorită popularității unor astfel de imagini stoc, originalitatea conținutului grafic a scăzut brusc.

Iar nevoia de a folosi fotografii clare și perfecte nu a făcut decât să înrăutățească situația.

Când un cititor vede aceeași poză pentru a suta oară, el crede că autorul articolului nu a încercat să fie măcar puțin original. Deci de ce să citești măcar un astfel de articol?

Acesta este motivul pentru care ar trebui să utilizați imagini originale. Nu mai faceți fotografii populare, începeți să vă faceți propriile fotografii.

Sunt sigur că toată lumea din echipa ta are un telefon cu cameră. De ce nu le folosești? Faceți fotografii cu biroul sau logo-ul dvs. și folosiți acele fotografii.

Află dacă printre colegii tăi există un fotograf aspirant. Oferă-i câteva zile să închirieze un birou - și vei avea suficiente fotografii pentru un an întreg!

Când am creat noul nostru site web, ne-am fotografiat angajații și am fost foarte mulțumiți de rezultat.

Imagini și pictograme desenate manual

Nu doar fotografiile trebuie să fie originale, ci și icoanele și desenele. Unele branduri și-au dat deja seama de acest lucru și încearcă să iasă în evidență din mulțime în acest fel. Această abordare adaugă un element personal și distractiv designului.

Unii spun că tendința pare neprofesională și copilărească, dar este totuși cu siguranță atrăgătoare. La fel ca majoritatea tendințelor din 2017, acesta acționează ca o alternativă la designul curat steril din ultimii ani.

Dropbox folosește ilustrații desenate manual. Au devenit parte a mărcii companiei și l-au făcut recunoscut.

Astfel de ilustrații creează o stare de spirit relaxată și încântă copilul care trăiește în sufletul fiecăruia dintre noi. Ele fac ca produsul să pară mai accesibil. Sunt deosebit de eficiente la marile companii de tehnologie precum Dropbox.

O alta bun exemplu Această abordare este compania de saltele Casper. Aproape întregul ei site este format din desene desenate manual. Iată una dintre ele:

Tendința a fost preluată și de serviciul MailChimp. În raportul din 2016, el arată și desene similare.

Moz, o companie care dezvoltă software de marketing, inserează ilustrații în antetul articolelor:

Uneori, dragostea noastră pentru desene se manifestă în alte proiecte:

Întoarcerea la rădăcinile minimalismului

Dacă vi s-ar cere să explicați unui străin, ce este minimalismul, probabil ai raspunde ca este atunci cand trebuie sa renunti la decorativitate in favoarea functionalitatii. Cel mai probabil, te vei gândi imediat la neutru paleta de culori, format din nuante de negru, gri si alb.

Se pare că adevăratul spirit al minimalismului a fost înlocuit de folosirea alb-negru plictisitor scheme de culori. Cred că asta a fost făcut intenționat pentru a compensa mărime mică ecran și putere redusă a dispozitivelor mobile.

Dar în 2017 totul se va schimba. Minimalismul va reveni în adevărata sa formă. Ceea ce înseamnă că va fi mai multă culoare. În timpul nostru dispozitive mobile Sunt la fel de puternice ca computerele, iar unele chiar au ecrane mai bune.

Exemplul meu preferat de design minimalist este logo-ul platformei Medium. Creatorii săi au reușit să combine mai multe culori diferite și să mențină în continuare un stil minimalist.

Google a realizat o altă reproiectare a logo-ului în favoarea minimalismului și a unei combinații de culori strălucitoare. Este de remarcat faptul că această companie a servit drept catalizator pentru apariția multor noi tendințe. Designerii au tăiat ușor stilul fontului și au prezentat noul fel un logo în formă de G care îmi place foarte mult.

Spiritul de minimalism se simte în toate acestea, dar presa nu a scris despre asta. Oamenii au uitat ce este adevăratul minimalism. Logo-ul nu era incolor și realizat într-o singură formă, așa că nimeni nu s-a gândit că este realizat într-un stil minimalist.

Noul logo a fost luminos și atrăgător - păstrând în același timp un aspect minimalist. După reproiectare, oamenii din jurul lor au început să imite Google, așa cum făcuseră înainte în alte aspecte.

Noi înșine am început să folosim un stil mai minimalist pentru designul blogurilor noastre.

Designul simplu al imaginii transmite cu ușurință informațiile necesare.

Folosind GIF-uri

Toată lumea (ei bine, aproape toată lumea) iubește GIF-urile. Ne ajută în conversație pentru că uneori pot transmite emoții mai bine decât textul.

În plus, pentru a le juca nu ai nevoie de niciunul programe speciale. GIF-urile sunt de obicei mici și pot fi încorporate aproape oriunde.

Sunt mai bune decât videoclipurile și imaginile, mai ales atunci când doriți să reduceți timpul de încărcare a paginii și traficul. Cred că datorită versatilității lor, GIF-urile vor deveni și mai multe element util proiecta.

Îmi place foarte mult să pun gif-uri în antetul unui articol. În loc să puneți acolo o imagine de stoc plictisitoare, luați câteva minute și faceți un GIF ca acesta.

Nu trebuie să faci eforturi creative speciale pentru a face acest lucru, dar cu siguranță va atrage atenția asupra postării tale pe rețelele sociale. Iată un alt exemplu bun de utilizare a GIF-urilor în antetul unui articol.

Imagini în două culori

Aceasta este o combinație de două culori, de obicei foarte luminoase sau contrastante, într-o singură imagine. Pentru a crea astfel de imagini, va trebui să vă activați abilitățile de design, dar merită.

Doar un designer foarte priceput poate realiza imagini atât de frumoase în două culori. Sunt sigur că nu pot crea așa ceva, dar asta nu înseamnă că ar trebui să tăiați această tehnică din planurile dvs. de design.