Web Design Trends: Neuomorphism

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.

2020
0
1
2
3

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.

Mai multe articole

INOVEO a scris

Importanta designului sustenabil in branding

Daca toata lumea vorbeste despre sustenabilitate, nu putem sa nu vorbim si noi, din perspectiva brandingului. Constientizarea ecologica a fost dintotdeauna o tendinta in crestere. Acum, mai mult ca niciodata, brandurile se afla sub presiunea [...]

Citeste tot articolul from Web Design Trends: Neuomorphism

Citeste tot articolul

INOVEO a scris

Fonturile sans serif „ciudate”: Trendul anului 2024

Evolutia si schimbarile tendintelor de la un sezon la altul sunt cele mai pregnante atunci cand vine vorba de design. In ceea de priveste designul grafic, printre altele, anul acesta ne aduce in prim-plan o [...]

Citeste tot articolul from Web Design Trends: Neuomorphism

Citeste tot articolul

INOVEO a scris

Cat de complex trebuie sa fie website-ul tau?

Este clar ca website-urile devin din ce in ce mai mari si complexe si de vina sunt atat programatorii, cat si clientii. Programatorii vor sa arate ca pot face lucuri complicate, iar clientii vor website-uri [...]

Citeste tot articolul from Web Design Trends: Neuomorphism

Citeste tot articolul

INOVEO a scris

INOVEO raspunde intrebarilor Anuarului ZF Branduri Romanesti 2024

Care e reteta pentru crearea unui brand? De cat timp ai nevoie ca sa il construiesti? Cat costa? De unde incepi si unde termini? Care sunt ingredientele-cheie? De ce te poti lipsi, de ce nu? [...]

Citeste tot articolul from Web Design Trends: Neuomorphism

Citeste tot articolul