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

Branding in 2024

Brandingul este despre optimism si incredere si orice antreprenor cu un business de 30 de ani, de 10 ani sau cu un start-up simte mai mult ca oricand nevoia sa-i dea brandului atentie. Vremurile grele [...]

Read More... from Web Design Trends: Neuomorphism

Citeste tot articolul

INOVEO a scris

Evaluarea brandului

Stiu, e perioada Galelor, a Premiilor, a Bilanturilor de final de an, a Petrecerilor de Craciun… dar scriu ce ma inspira din munca mea de zi cu zi… Dupa filmarile de saptamana trecuta la INOVEO, [...]

Read More... from Web Design Trends: Neuomorphism

Citeste tot articolul

INOVEO a scris

Comunicarea fluenta dintre departamentele de Marketing si Financiar

Adesea ni se intampla sa avem nevoie de limbi straine… Sau limbaj strain in cadrul aceleiasi limbi, daca vorbim de business. Da, in bugetare e nevoie sa fii poliglot. Comunicarea fluenta dintre departamentele de Marketing [...]

Read More... from Web Design Trends: Neuomorphism

Citeste tot articolul