Comunitatea de web designeri cauta tot timpul lucruri noi pe care le pot folosi in constructia de aplicatii web si website-uri.

Unul din trendurile de UI cele mai noi si mai discutate in 2019 si 2020 este Neuomorphism-ul. Acesta este o combinatie intre Skeuomorphism, un design care incearca sa reproduca elementele grafice (butoane, iconite, etc) intr-o forma cat mai realista, folosita in special de catre Apple inainte mortii lui Steve Jobs si Material Design, un limbaj grafic dezvoltat de Google pentru Android si aplicatiile sale, recunoscut prin simplicitate si design-ul foarte plat cu doar umbrele oferind cateva urme de efecte 3D.

Desi nu cred ca vom vedea o adoptie ridicata de Neuomorphism in viitorul apropriat, tendinta de a ne indeparta de design-ul plat „lipsit de viata” catre unul putin mai apropriat de realism este din ce in ce mai vizibila. Apple a facut aceasta schimbare in iOS 13 unde a reusit sa dea un efect 3D fara texturi elementelor grafice.

Acest trend a inceput printr-o postare facuta de catre Alexander Plyuto pe Dribble cu cateva concepte de UI care a devenit virala foarte rapid castigand mii de like-uri. Dupa aceasta postare, o adevarata explozie de concepte similare au aparut pe internet.

Mai jos sunt cateva exemple scrise de mine de carduri animate create cu design Neumorphic in gand. Spre deosebire de cele facute folosind design-ul Material, care creaza o suprafata ce pluteste peste background si lasa o umbra, card-urile neuomorphice incearca sa imite forme geometrice care se ridica din background, in general folosind acelasi material ca background-ul. Efectul este realizat folosind doua umbre, una deschisa la culoare (pozitiva) si una inchisa la culoare (negativa). Pentru a obtine acest efect, background-ul nu trebuie sa fie alb sau negru, umbrele fiind necesare sa fie vizibile pe acesta si sa dea impresia de un punct de lumina care deschide si inchide o parte a cardului (pentru animatii faceti hover cu mouse-ul sau apasati cu degetul pe ecran).

Folosind aceleasi principii putem crea elemente grafice care imita obiecte reale 3D fara sa deviem mult de la idea de design plat. Mai jos avem un design simplu de calculator, dar formele create pot fi mult mai complexe daca este necesar, cu conditia sa fie in continuare curat si usor de inteles.

Pentru a vedea codul pentru exemplele de mai sus accesati urmatorul link.

Ca orice alt design exista si probleme de care trebuie sa tinem cont atunci cand il folosim sa creeam un UI. Dupa cum se poate observa mai sus, elementele grafice nu au un contrast puternic si daca vrei sa creezi butoane vei fi fortat sa adaugi culori care ofera un contrast mult mai puternic in interior (fie schimband background-ul, iconita/textul din buton sau adaugand border/underline). Trebuie sa ne asiguram ca este functional si usor de vazut.

Odata cu popularitatea Neuomorphism-ului, comunitatea de design UI/UX a fost reinvigorata si a readus placerea de experimentare si explorare a unor tipuri noi de design. Lumea nu mai vrea ca toate lucrurile sa arate identic si in fiecare zi sunt postate noi concepte de UI. Nu stim care va urmatorul trend in voga, dar cu siguranta nu va fi unul plictisitor.