Noi tendinţe în WebDesign pentru 2016

Noi tendinţe în WebDesign pentru 2016

Cine poate uita GIF-urile anilor '90, sau cine poate să se concentreze mai mult pe un design plat şi simplu?

Recent, am văzut o creștere în popularitate a webdesign-ului responsive, cel care face ca un site să se deschidă plăcut pe mai multe tipuri de ecrane şi din ce în ce mai multe site-uri se alătură tendinţei de a deveni "gata  pentru mobil", care este acum un aspect chiar mai important în urma actualizării Google Mobile Friendly.



Să examinăm câteva dintre cele mai populare aspecte pentru anul acesta.

 

1. Neproliferarea modelelor UI



Unul dintre efectele secundare ale design-ului responsive constă in faptul că o mulțime de site-uri arată similar. Cu toate acestea, design-ul responsive nu este singurul de vina. Creșterea numărului de site-uri de WordPress și piața temelor în plină expansiune, este de asemenea, o cauză în această situaţie.

Și unii oameni, care desenează site-uri, au ajuns să fie vinovaţi de faptul că doar replică acelasi look tuturor site-urilor pe care le realizează.

Dar, având un aspect similar, nu înseamnă că este neapărat un lucru rău. Asta pentru că noi ne-am schimbat modul în care consumăm web, schimbare care a dus la o mulțime de modele de design UI comune. Modelele de design s-au maturizat și, ca atare, a rămas puțin în modul de inovare, atunci când vine vorba de modele UI.

Cu alte cuvinte, un checkout va fi în continuare un checkout și ar trebui să funcționeze ca atare. La fel cu un modul de conectare. Nu există nici un motiv real să se reinventeze roata. Modelele UI trebuie să ghideze utilizatorii printr-o experienta placuta.

Iată câteva modele care ar trebui să fie deja cunoscute:

 

  •    Meniul hamburger:
    Meniul Hamburger
    Meniul Hamburger

    În timp ce unii critică utilizarea acestui model, nu există nici o îndoială că utilizarea pe scara larga a făcut ca acest buton să inspire o funcție ușor de recunoscut pentru utilizatori.

  •      Înregistrarea contului:

    Înregistrarea contului
    Înregistrarea contului

     

     

     

     

    Veți găsi acest model de fiecare dată când încercaţi să vă înregistraţi pe un site. S-ar putea fi un formular de completat sau un buton care va va permite să utilizați un cont existent în reţele sociale pentru a vă înscrie. Formularele cu paşi multiplii sunt, de asemenea, eficiente, deoarece ele taie din câmpurile necesare, reducând frustrarea și încurajeaza utilizatorii să parcurgă paşii mai uşor pentru acest proces.

 

 

  •      Derularea lungă:

     

    Derularea lungă
    Derularea lungă

     

     

    Plasarea tuturor elementelor importante mai sus este acum deja un mit bine-cunoscut. În plus, aproape toată lumea este obișnuită să facă scroll-uri (derulări) lungi, datorită dispozitivelor mobile. Tehnica functioneaza foarte bine pentru site-urile care doresc să atragă utilizatorii prin povestiri, și se poate imita chiar şi un site cu mai multe pagini prin tehnica de rupere a paginii în secțiuni clare.

 

 

    •  Aspect de carduri/blocuri:

      Aspect de carduri/blocuri
      Aspect de carduri/blocuri

 

 

  • Aspect introdus de Pinterest, cardurile sunt acum peste tot prin web, deoarece acestea prezintă informații în bucăți de dimensiuni perfecte pentru scanare. Fiecare bloc reprezintă un concept unic. Din moment ce acestea acționează ca şi "containere de conținut", forma lor dreptunghiulară sau pătrată le face mai ușor de re-aranjat pentru diferite modele de dispozitive.

 

 

    •  Imagini Hero:

       Imagini Hero
      Imagini Hero

       

 

 

  • Deoarece văzul este cel mai puternic simţ uman, imaginile Hero HD reprezintă unele dintre cele mai rapide moduri de a atrage atentia unui utilizator. Datorita progreselor in lățime de bandă și de compresie a datelor, utilizatorii nu vor sesiza încarcările lente care în trecut erau evidente. Un aspect comun pe care îl veţi observa este o imagine Hero in partea de sus, urmată de secțiuni în zig-zag sau un aranjament bazat pe carduri/blocuri.

 

2. Animatii bogate


Animațiile sunt utilizate din ce în ce mai mult pentru a spori povestirea unui site, ceea ce aduce o experiență mai interactivă și distractivă.

Cu toate acestea, nu se poate lipi animație oriunde într-un site. Luați în considerare cu atenție dacă se adaugă elemente tematice site-ului dvs. și elemente de personalitate. Animațiile pot fi gândite în termeni de două grupuri:

Animații la scară largă.

Acestea sunt folosite ca un instrument de interacțiune primar şi au un impact mai mare la utilizatorii finalii. Ele includ efecte cum ar fi defilare parallax și notificări de tip pop-up.

Animații la scară mică.

Acestea includ mişcări rotative, instrumente și bare de încărcare activate la trecerea hover, carei nu necesită nici o actiune din partea utilizatorului.

Vom descrie 7 dintre cele mai populare tehnici de animație:

  1. Animaţii ce reprezintă încărcarea

        Acestea sunt utilizate pentru a distra utilizatorii în timpul unei experiențe de altfel plictisitoare. Încărcarea animațiilor tind să fie populare pentru proiectele plate, minimaliste, portofolii și site-uri de o pagină.

    Animatii
    Animatii Webdesign

    Păstrați-le simple și evitaţi adăugarea de sunet. Acestea ar trebui să se potrivească cu personalitatea si paleta de culoare a site-ului.

  2. Navigație și meniuri (nonscrolling)

    Meniurile de navigare ascunse au devenit tot mai populare, mai ales ca acestea pot fi folosite pentru a economisi spațiu pe ecran. După cum se poate menţiona exemplul de mai sus în care este descris instrumentul meniu atunci când faceți clic pe un buton specific și pentru a preveni o tranziție discordantă (ca un sertar de navigare ascunse în spatele unui simbol hamburger).

  3. Animaţii Hover

    Efectele Hover dau un simţ mai intuitiv la un site în care utilizatorii plimbă mouse-ul peste conținut. Utilizatorii nesiguri despre o funcție au tendința de a trece peste ea în mod automat pentru feedback vizual instantaneu.

  4.  Galerii și slideshow-uri

    Galeriile și slideshow-urile sunt o modalitate eficientă de a prezenta mai multe imagini fără să încarce excesiv utilizatorii. Acestea sunt foarte bune pentru site-urile de fotografie, vitrine de produse, și portofolii.

  5.  Animație Motion

    Ochii noștri sunt în mod natural atrasi de miscare, ceea ce face instrumentul perfect pentru a atrage atenția unui utilizator. Propunerea poate ajuta, de asemenea, cu ierarhizare vizuală. Acest lucru poate ajuta pentru a adăuga interes la forme și elemente de meniu.

  6.  Scrolling

    Defilare netedă se bazează pe animație și oferă control în continuare pentru utilizator, care poate determina ritmul de modul se desfasoara o animație.

  7.  Animații de fundal / video

    Un fundal animat simplu poate adăuga vizibilitate la un site, dar ar trebui să fie utilizate cu moderație pentru că pot fi foarte acaparante pentru utilizator. Cheia este de a adauga animaţii în secțiuni individuale sau de a creea o mișcare ușoară de o întreagă imagine.

3. Micro-interacţiuni

Micro-interacţiunile se întâmplă peste tot în jurul nostru, de la oprirea alarmei pe telefonul mobil până la like-ul pe poza cu pisica de pe Facebook.

Fiecare o face fără ezitare. Este probabil ca ai inceput ziua cu un micro-interacțiune. Prin oprirea alarmei pe telefonul mobil, vă angajaţi cu o acţiune la o interfață de utilizator într-un singur moment. Și din ce în ce mai multe dintre acestea sunt preluate în aplicațiile și dispozitivele pe care le folosim.

Micro-interacţiunile au tendinţa de a face, sau a vă ajuta să faceţi, mai multe lucruri diferite:

  • Comunicaţi un statut sau oferiţi un feedback 
  • Vedeţi rezultatul unei acțiuni
  • Ajutaţi utilizatorul să manipuleze ceva


Micro-interacțiunile sunt o parte vitală a oricărei aplicații.

Așa cum probabil v-aţi dat seama veți dori să vă asiguraţi că aceste interactiuni se întâmplă aproape invizibil. Nu săriţi limita și păstrați-l simplu. Luați în considerare fiecare detaliu cu grijă, și să faceţi ca fiecare interacțiune sa reprezinte un simţ uman. Aceasta face ca site-ul sa aibe textul de conversație și nu robotizat.

Micro-interacțiunile sunt o parte importantă a aproape fiecarui proiect de design digital. Îţi va fi foarte greu să proiectezi un site web sau o aplicație mobilă care să nu includă un element, sau un moment, în care un utilizator să interacționeze.

Fiecare dintre aceste tipuri de interacțiune duce utilizatorii la o cale de design mai centrată pe om. Acest concept de a face dispozitive mai "umane" în accesarea lor este o cheie pentru adopție și funcţionalitate.

 

4. Material Design: o alternativa mai bogată la proiectele plate

Anul trecut, Google a lansat noul său stil de limbaj, Material Design. Se folosește efectul de umbră și conceptele de mișcare și adâncime, în scopul de a crea modele care par mai realiste pentru utilizator.

Scopul Material Design-ului este acela de a crea un design curat, modern care se concentreze pe UX. În timp ce estetica Google de design are detractori, a fost în cea mai mare parte descrisă ca un schimbător de reguli.

Material Design
Material Design


Cu aspectul său minimalist, Material Design are multe în comun cu o altă tendință de creștere - de design plat. Material Design, cu toate acestea, face uz de adâncime și umbre, care permite mai multă profunzime de design decât design-ul plat pur.

Până acum, am văzut cea mai mare parte a proiectelor de design Material limitate la design-ul de aplicaţii . Google a anunțat  Material Design Lite în luna iulie, care este mai potrivit pentru site-uri web. Cu toate acestea, Materialul Design are scopul de a oferi o mare experienţă UI și UX pe toate dispozitivele. Lite foloseste vanilla CSS, HTML și JavaScript și este destinat pentru a simplifica şi a adăuga aspect de Material Design site-urilor.

Material Design Lite nu se bazează pe nici un cadru special, astfel încât proiectanții pot folosi o mare varietate de instrumente de front-end pentru a creea site-urile lor. Este, de asemenea, ușor atunci când vine vorba de cod.

 

5. Proiectare Responsive

Web design-ul responsive a devenit incredibil de popular în ultimii ani, datorită creșterii de utilizare a Internetului mobil.

Este sigur să spun că proiectele responsive nu pleacă nicăieri în curând, deoarece reprezintă o modalitate relativ simplă și ieftină pentru întreprinderi pentru a construi un site mobile-friendly complet funcțional. Dar web design-ul responsive vine cu unele probleme în cazul în care nu desfășoară corect, cea mai importantă fiind performanța.

Design Responsive
Design Responsive



Pentru a se asigura că un proiect de design responsive este folosit la întreaga lui capacitate, designerii ar trebui să:

  1. Evite utilizarea JavaScript și încarcarea de imagini CSS cu ajutorul etichetei display: none. Aceasta descarcă încă imaginea în dispozitiv și adaugă greutate inutilă la o pagină.
  2. Utilizeze imagini sensibile, care sunt definite cu ajutorul unui procent
  3. Incarce condiționat de activarea JavaScript, deoarece foarte multe din componentele JavaScript folosite pe un site desktop nu vor fi folosite pe dispozitive mai mici. Acordați o atenție deosebită pentru a script-uri terțe, cum ar fi cele utilizate pentru partajarea socială, deoarece acestea de multe ori aduc un impact negativ și reduc performanțele.
  4. Utilizarea RESS - Responsive and Server Side
  5. Aplicați testele de performanţă în procesul implementării cu scopul de a măsura în mod eficient și de a optimiza fiecare site.

Performanța este importantă nu numai pentru UX, dar, de asemenea, la Google, datorită actualizării Mobile Friendly care a a fost lansată in aprilie 2015. Design-ul Responsive este, de asemenea, extrem de compatibil cu minimalismul, datorită necesității de a lungi pagina în jos. Este, de asemenea, minunat să lucrezi cu acele carduri si design responsive, deoarece acestea pot restructura site-ul cu ușurință pentru a se potrivi în orice punct de întrerupere sau ecran de dimensiuni (cum ar fi rearanjarea recipiente dreptunghiulare de conținut).

Web design-ul responsive se transformă  dintr-o tendință specifica într-o bună practică iar designerii au găsit deja modalități inteligente de a obține soluţii la orice probleme legate de viteză.

Nu există nici o îndoială că designul responsive a devenit util și versatil, dar, de asemenea ar trebui să fie şi extrem de rapid, în scopul de a oferi o mare experienţă UX.

 

6. Plat nu pleacă prea curând nicaieri

Designul plat a fost în jurul nostru de ceva timp și este compatibil cu alte tendințe, cum ar fi minimalism, web design responsive și material design.

Design PLAT
Design PLAT

Mergând mai departe, probabil că vom vedea următoarele tendințe suplimentare în design plat care vin în prim-plan:

  1. Umbre lungi. Acestea aduc mai multa profunzime design-ului plat.
  2. Scheme de culori vibrante. Popularele framework-uri UI și șabloanele existente au determinat pe mulți să înceapă utilizarea unor culori mai vii în proiectele lor.
  3. Tipografie simplă. Fonturile simple ajută în a ne asigura că textul rămâne lizibil și poate fi citit uşor în design-ul plat.
  4. Butoane fantomă. Acestea permit funcționalităţi fără a distrage atenția de la UX și sunt adesea reprezentate ca subliniate, link-uri care se schimba atunci când utilizatorul trece peste ele.
  5. Minimalism. Se pare că se reduc numărul de elemente, în scopul de a crea o interfață proaspătă, ordonată.

 

Observații suplimentare la Tendințe în WebDesign


Nu urmaţi tendințele doar pentru ele sunt "în vogă" în acest moment. Tendințele reprezintă tehnici populare pentru un motiv bun, dar asigurați-vă că cel mai bine este pentru utilizatorii finali. De exemplu, un site de e-commerce cu siguranță nu ar folosi o singură pagină pe care utilizatorul să o deruleze la nesfârşit.

Tendințe sunt nimic mai mult decât instrumente suplimentare în setul de instrumente de designer. Alegeţi întotdeauna cele corecte pentru ceea ce trebuie realizat.

 

Login Form

Despre

Solutiile pe care le oferim sunt combinate, personalizate pentru fiecare situaţie, pentru ca la urma urmei afacerea ta se afla in mediul online iar noi ne angajam sa tratam intotdeauna serios afacerea ta şi încercăm sa diversificam ofertele pentru a imbunatati fiabilitatea si calitatea serviciilor oferite.

Detalii Contact