[Tutorial] Desain Neumorphism - Tren Desain 2020

Beranda

...

All About Design
[Tutorial] Desain Neumorphism - Tren Desain 2020

rifaye

30-01-2020 06:56

[Tutorial] Desain Neumorphism - Tren Desain 2020

Udah pernah denger tentang Desain Neumorphism? Buat agan dan sista yang belum tau, konsep desain Neumorphism itu merupakan sebuah konsep desain hasil kombinasi antara desain Skeumorphism dan desain Flat. Neumorphism sendiri adalah paduan kata New dan Skeumorphism.

Spoiler for Tentang Desain Skeumorphism dan Flat:

Di awal mula desain digital modern kita diperkenalkan dengan konsep desain Skeumorphism, yaitu sebuah konsep desain digital yang mengadapsikan penggunaan bentuk dan fungsi yang disamakan dengan tampilan di dunia analog. Seperti contoh desain sebuah tombol yang bentuknya menyerupai tombol di dunia analog, yang bentuknya detail punya efek emboss, lengkap dengan elemen-elemen 3 dimensi lain seperti bayangan dan efek pencahayaan.
Contohnya pada desain-desain tampilan aplikasi di sistem operasi iOS 4 pada tahun 2010 ini.

Nah setelah masa skeumorphism, munculah trend desain setelahnya yaitu Flat Design. Flat Design mengusung konsep minimalis yang menghilangkan segala elemen 3 dimensi lainnya sehingga menjadi desain 2 dimensi.

Konsep desain flat inilah yang hingga kini ramai digunakan. Bahkan perusahaan-perusahaan besar di bidang teknologi sudah sangat umum menggunakan konsep desain ini. Kayak Google juga kan sampai buat desain guideline untuk penerapan design flat ini.

Nih buat jelasnya tentang tampilan desain Neumorpishm bisa cek langsung desain-desain berikut [Warning BWK] :

Spoiler for Neumorphism 1:

Spoiler for Neumorphism Dark Mode:

Spoiler for Neumorphism Colorful:

Nah gimana? Keren gak gan?
Pengen coba bikin beginian juga. Nih ane coba kasih tutorial konsepnya ya.
Silahkan pilih aplikasi design yang sering agan pakai, bisa pakai Sketch, Figma, Adobe Illustrator, Adobe XD dan yang lainnya yang menurut agan paling nyaman deh.
Kali ini ane bikinnya pakai aplikasi Sketch.

Langkah Pertama
Buat color pallete dengan warna yang mirip yang terdiri dari:
1. Light Color yang akan jadi warna Light Shadow
2. Mid Color yang akan menjadi warna Backgrounddan Element Color
3. Dark Color yang akan menjadi warna Dark Shadow

disini ane gunain:
Light Color: #FFFFFF
Mid Color: #F3F3F3
Dark Color: #D3D3D3

Spoiler for Cara Generate 3 Warna:

Ini cara ane biar dapet kombinasi warna yang cukup baik dan konsisten di desain neumorphism di aplikasi Sketch.

1. Persiapkan 3 Objek yang akan mewakili warna Light, Mid dan Dark
Kasih Warna Light di objek ke-1 dan Dark di objek ke-3

2. Buat Objek ke-4 dengan warna Light dan atur opacity jadi 75%

3. Tempatkan Objek ke-4 di atas objek ke-2
Pilih/Select Objek ke-2 lalu ubah warnanya dengan menggunakan color pick dari objek ke-2 yang tertutup objek ke-4

4. hapus objek ke-4

Voilaaa jadi deh tuh 3 warnanya emoticon-Jempol

Langkah Kedua
1. Buat artboard sesuaikan ukuran dengan yang agan mau, lalu ubah warna background jadi Mid Color #F3F3F3
2. Buat objek baru yang akan diberi efek neumorphism ini. Atur warna menjadi Mid Color #F3F3F3
3. Buat shadow pertama dengan spesifikasi Dark Color #D3D3D3opacity 60%, dengan nilai x: 7, y:7, dan blur: 16, spread 0
4. Buat shadow kedua dengan spesifikasi Light Color #FFFFFF opacity 60%, dengan nilai x: -7, y:-7, dan blur: 16, spread 0

Spoiler for Biar Lebih Jelas: