În fiecare an ritmul vieții crește, iar odată cu el și cantitatea de informații crește. Utilizatorii petrec din ce în ce mai puțin timp studiind site-urile web, în ​​timp ce numărul de solicitări impuse acestora crește. Instrumentele de atragere a atenției care se aflau în vârf în urmă cu un an își pierd eficacitatea. Pentru a rămâne în tendințe și a crea site-uri web la cheie care să atragă clienți, designerii web ar trebui să țină cont de principalele tendințe din 2017 în timp ce lucrează. Cum vor fi? Să ne uităm la asta în acest articol.

Tendințe în design de site-uri web 2017:

• • Site-uri cu o singură pagină

Această tendință devine din ce în ce mai comună datorită dispozitive mobile. Toate informațiile sunt plasate pe o singură pagină, ceea ce este convenabil să derulați pe telefon sau tabletă fără a utiliza clicuri.

• • Derulare

Încă o soluție excelentă pentru site-uri cu același tip de conținut. Dar nu uitați că dă greutate paginii și complică căutarea printre materialele deja acoperite, așa că nu este recomandat pentru crearea de magazine online. Pentru a optimiza munca, puteți utiliza o combinație de navigare clasică și derulare.

• • Design minimalist

Mare fotografii de înaltă calitate, un fundal plat sau un model care folosește text minim cu echilibrul potrivit adaugă un aspect concis și aerisit unei pagini web. Principalul lucru aici este să nu exagerați.

• • Culori deschise

Popularitatea culorilor strălucitoare este în creștere. Folosește mai multe palete și nuanțe dacă vrei să ții pasul cu moda. Pentru a crea libertate de spațiu și o senzație de aer, puteți folosi nuanțe contrastante. Diferite nuanțe și degrade de culori te vor ajuta să diferențiezi mai bine conținutul pe care îl evidențiază.

• • Tipografie

Fonturile sunt încă un element grafic puternic și joacă unul dintre rolurile principale în crearea esteticii unei pagini web, înlocuind alte elemente. Un titlu bun colorat arată grozav și pe tablete și smartphone-uri și ajută la transmitere Anunţ până la utilizator.

• • Animaţie

Mic elemente de animațieși designul interactiv atrag atenția, fac site-ul mai interesant și îmbunătățesc experiența utilizatorului cu acesta. Iar dezvoltarea bibliotecilor JavaScript facilitează crearea unor astfel de pagini.

• • Video

Fotografiile de fundal cu ecran lat sunt înlocuite cu videoclipuri cu ecran lat. La fel ca animația, nu numai că creează interes din partea utilizatorului, dar vă permite și să dați viață paginii. Principalul lucru aici este să utilizați o imagine de înaltă calitate, care să se potrivească cu stilul general al site-ului. Videoclipul ajută nu numai să atragă atenția spectatorului, ci face și posibilă transmiterea unui mesaj informațional către acesta, de exemplu, vorbirea despre companie.

Infografice vii despre căile de dezvoltare ale unui dezvoltator web modern și tehnologiile de care trebuie să învețe pentru a deveni front-end, back-end sau devops în 2017.

Introducere

Sarcina principală este de a determina profilul dezvoltării ulterioare. Încercați, studiați, încercați să înțelegeți ce este mai aproape de dvs. - frontend, backend, devops sau poate fullstack?

Calea Frontenderului

În orice domeniu al dezvoltării web, stăpânirea elementelor de bază este în prim plan. Pentru un începător, evident sarcina numărul unu este învăţarea HTML, CSS și JavaScript (+jQuery). Pe măsură ce vă dezvoltați abilitățile de bază și vă extindeți experiența teoretică, puteți trece la lucruri mai specializate.

Există multe cadre și biblioteci JavaScript care fac viața mult mai ușoară unui dezvoltator web. Printre acestea, puteți alege cel mai convenabil și potrivit pentru un anumit programator. manager de pachete, un instrument de testare și construcție, un manager de activități și multe altele pentru fiecare gust și gamă de nevoi.

Astăzi, domeniul dezvoltării front-end se dezvoltă ca nimeni altul. Cadrele și instrumentele apar și se îmbunătățesc în mod constant, se nasc noi metodologii și modele, însăși ideologia frontend-ului a depășit de mult limitele layout-ului. Prin urmare, una dintre sarcinile principale ale unui dezvoltator web este să rămână pe linia de plutire, să fie conștient tendinte moderne dezvoltarea acestei zone.

Calea Backender

Dezvoltarea backend-ului a cunoscut, de asemenea, schimbări mari în ultimii ani. PHP nu a mai fost de multă vreme un monopolist pe piața tehnologiei backend, deși este ultima versiune, PHP 7 este mai mult decât demn de atenție. Node.js, Ruby și Go au apărut în scenă. Tehnologii moderne fac posibilă dezvoltarea unei logici de afaceri complexe și obținerea unor performanțe ridicate.

Modul devops

Munca Devops este una foarte responsabilă. O aplicație web modernă este un organism uriaș și complex, iar misiunea devopilor este să o mențină să funcționeze corect. Monitorizarea proceselor, lucrul în cloud, containerele web, integrarea continuă - acestea sunt doar o mică parte din tehnologia web care permite unei aplicații web să existe în ansamblu și să își îndeplinească funcțiile.

În 2016, multe companii și-au reproiectat site-urile web, reducând numărul de opțiuni de navigare. Această tendință va continua și în 2017.

Meniurile de antet de pagină care includeau anterior 5-7 opțiuni vor oferi acum 3-4 opțiuni.

Mai puține opțiuni facilitează căutarea utilizatorului informatie necesarași evită situația de „paralizie a alegerii”.

Un bun exemplu de abordare nouă este Ikea. În capturile de ecran de mai jos puteți compara vechiul și versiune noua Site-ul companiei.

Versiune veche:

Noua versiune lansata in 2016:

1. Refuzul meniului de hamburger

Un meniu hamburger nu oferă utilizatorului nicio idee despre profunzimea site-ului sau a aplicației. Ca urmare, el rămâne dezorientat.

Spotify a abandonat deja meniul de hamburger din aplicația sa. Mai multe companii îi vor urma exemplul în 2017.

1. Duotonuri

Utilizarea duotonurilor face ca designul site-ului web să fie minimalist și vă permite să păstrați atenția utilizatorului asupra mesajului sau navigației principale.

În 2017, mai mult de utilizare activă duotonuri în loc de fundaluri pline de culoare.

1. Design tactil

Dezavantajul defilării cu paralaxă este că încetinește viteza de încărcare a paginii.

În 2016, animația a fost văzută ca o tendință promițătoare. Anul acesta însă, dezvoltatorii se concentrează pe performanță. Din acest punct de vedere, defilarea cu paralaxă nu este cea mai optimă soluție.

1. Acțiune semnificativă

Unul dintre principiile de bază ale designului materialului este „acțiunea semnificativă”. Google crede asta „acțiunea trebuie să fie semnificative și adecvate, servesc la atragerea atenției și la menținerea continuității".

aplicația Tumblr - bun exemplu implementarea acestui principiu. A câștigat un premiu în 2016 Design material pentru animație.

1. Evitați imaginile de stoc de calitate scăzută

Site-urile web ale companiei ar trebui să invite utilizatorii să interacționeze și să reflecte valorile afacerii. Nu mai este loc pentru imagini de stoc de calitate scăzută și plictisitoare. Ca aceasta:

1. Mai puține aplicații, mai multe PWA

Tehnologia PWA (Progresiv Aplicații web) permite site-ului să funcționeze ca o aplicație. Inclusiv offline. Este deja folosit de publicații și companii atât de mari precum The Washington Post, Airberlin și Flipkart. Anul acesta, popularitatea tehnologiei va crește.

1. Fonturi Google

Google a creat o bibliotecă de fonturi cu sursă deschisă cod sursaîn anul 2010. În 2016, lucrăm în continuare design material, compania și-a îmbunătățit și serviciul Google Fonts. Ca rezultat, previzualizările fonturilor au devenit mai rapide și personalizarea lor mai ușoară. Secțiunea Featured conține fonturi care se potrivesc bine cu designul materialului.

În 2017, chiar mai mulți designeri web vor lucra cu fonturile Google.

1. Minimalism

Această tendință combină multe alte tendințe menționate mai sus. Minimalismul înseamnă un accent pe performanță (viteză) și utilizare. În această abordare, tipografia, contrastul și spațiul joacă un rol important.

Având în vedere dezvoltarea activă a tehnologiei, 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! Utilizaț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 diferite tactici: recenzii ale clienților, răspunsuri motivate la posibile 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.

Bine planificat pagina de destinație duce clienții î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.

Oferiți produse similare și similare, precum și promoții profitabile în timpul procesului de finalizare a comenzii pentru a crește media cecului. Produsele conexe din comerțul electronic reprezintă 10 până la 30% din venituri. Amintiți-vă că a vinde unui client nou 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 acesta 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, notează codul de cupon sau descarcă unul gratuit versiune de încercare, atunci această abordare provoacă iritare.

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

Sfârșitul anului curent este chiar după colț și fiecare web designer s-a întrebat măcar o dată problema importanta: Ce va defini designul web în 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 cel mai atractiv și de înțeles mod și de a obține cele mai bune rezultate 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. 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 nevoie de o mai bună comunicare asupra proiectului și a modului în care să se facă cel mai eficient colaborare.

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ă modifică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 diverse etape colaborare prin vizualizare - aceasta poate varia 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 de dezamăgire față 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 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 (de către macar, latura sa vizuală), trebuie să ne întoarcem la istoria dezvoltării designului grafic.

În ultimii câțiva ani, aspectul paginii web a fost limitat la CSS, dar noi module precum Flexbox și CSS Grid (care apar în martie 2017) vă vor permite să vă realizați cele mai nebunești idei de aspect web.

Al nostru sarcina principală acum - pentru a înțelege cum ar trebui să funcționeze noile capacități de aranjare a rețelei ale blocurilor în cadrul design adaptiv.

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

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 diverse dispozitive si permisiuni. Într-o industrie în care este necesar generație rapidă idei, dezvoltare rapidăȘi pornire rapidă, o astfel de pierdere de timp este pur și simplu inacceptabilă.

Așteptat nou val instrumente de proiectare (cum ar fi Figma) bazate 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 exact 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 și asta îi economisește mult timp.

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. Acesta este un fel de renaștere a naturalismului cu culori deschiseși degrade îndrăzneți și personal aștept cu nerăbdare să văd mai multe din acest tip de lucrări î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 jucat de mult un rol cheie în interfața web, iar această tendință va continua și î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 pentru că 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 respectat, 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?