DESAIN DAN PROTOTIPE UIneumorphism dalam desain ui

Seperti apa neumorfisme dalam desain UI dan apa fungsinya untuk produk Anda? Kami sudah menyiapkan semuanya untuk Anda tentang tren baru ini!

Neumorphism lahir dari skeuomorphism dan kemudian menciptakan gaya UX baru. Desainer dari seluruh dunia telah melihat desain neumorfik yang menarik di Dribbble dan Behance – dan sekarang, ini menjadi tren tersendiri.Rancang prototipe datar atau neumorfik dengan Justinmind!Unduh gratis

Tetapi apakah neumorfisme itu? Bagaimana cara menerapkannya ke antarmuka? Apa pengaruh gaya ini terhadap rasa dan kegunaan antarmuka?

Kami siap untuk mendalami neumorfisme, mulai dari apa itu neumorfisme, apa artinya, dan mencantumkan beberapa perangkat UI yang bagus (dan gratis) untuk layar neumorfik. Anda akan sangat menyukainya, Anda pasti ingin alat pembuatan prototipe favorit Anda tetap terbuka dan mudah dijangkau!

Apa itu neumorfisme dalam desain UI

Neumorphism adalah pandangan baru pada desain skeuomorphic. Meski berkaitan dengan skeuomorphism, ada fokus baru pada keseluruhan gaya desain dengan neumorphism. Fokus ini tidak selalu pada kontras atau kesamaan antara dunia nyata dan digital, melainkan pada palet warna.

Ya, Anda membacanya dengan benar. Neumorphism adalah tentang warna seluruh layar, dan memberikan pengalaman yang sepenuhnya unik bagi pengguna.apa itu neumorfisme

Dari Filip Legierski .

Bayangkan antarmuka iOS atau Android klasik Anda untuk pemutar musik. Anda memiliki latar belakang, tempat kami menempatkan beberapa komponen, menambahkan lapisan dan menciptakan kedalaman. Dengan neumorphism, Anda akan membuat antarmuka yang lembut, di mana elemen UI tidak ditempatkan di latar belakang – tetapi di belakangnya .

Ini memberi kesan bahwa komponen seperti tombol atau kartu sebenarnya ada di dalam latar belakang, dan hanya terlihat karena menonjol dari dalam. Gaya umumnya adalah tentang warna solid, kontras rendah, dan permainan bayangan yang tepat.

Bagaimana neumorfisme berhubungan dengan skeuomorfisme?

Salah satu hal paling menarik tentang neumorfisme adalah bahwa ia berasal dari skeuomorfisme dan gaya populer masif lainnya, seperti desain datar. Ya, keduanya berlawanan satu sama lain – dan neumorfisme berada di antara keduanya.Jika Anda ingin lebih detail, lihat posting kami di Skeuomorphic Design dan Flat design .perbandingan antara neumorfisme dan skeuomofisme dan desain datar

Elemen kalkulator dari Mojimomo dan William Tapp .

Tren ini berfokus pada menghilangkan semua aspek mencolok dari antarmuka, menciptakan visual lembut yang tetap konsisten di seluruh produk. Itu tidak berfokus pada menciptakan kembali realitas di dunia digital, seperti skeuomorphism. Sebaliknya, ia mencoba menciptakan sesuatu yang benar-benar baru.

Seperti apa neumorfisme dalam desain UI

Neumorphism adalah tentang kontras halus dan warna solid. Tapi bagaimana kita bisa membuat antarmuka yang memberikan faktor wow tanpa elemen mencolok? Dalam neumorfisme, itu semua dalam penggunaan bayangan dan cahaya.

Dalam guratan luas, bahan utamanya adalah memastikan elemen dan latar belakang Anda memiliki warna yang sama persis. Ini agar kita kemudian dapat menciptakan kesan bahwa komponen-komponen ini keluar dari dalam latar belakang, menggunakan bayangan untuk menciptakan tampilan yang menonjol.Beberapa desainer mengambil pandangan yang sedikit berbeda tentang komponen UI, menampilkannya tidak seolah-olah menonjol ke luar, tetapi seolah-olah komponen tersebut telah tenggelam ke latar belakang! Kreativitas benar-benar tidak mengenal batas.

Anda akan ingin memastikan latar belakang dan warna komponen Anda bekerja dengan baik dalam bentuk yang solid, karena Anda harus menerapkan warna yang sama di sekitar desain. Agar permainan bayangan berfungsi, latar belakang Anda tidak boleh sepenuhnya hitam atau putih polos.

Anda akan membutuhkan semacam warna, agar bayangan tersebut memberikan trik visual. Setelah Anda memiliki warna utama, Anda dapat mencari dua bayangan: bayangan gelap dan terang.

Ini adalah detail tambahan yang akan Anda terapkan pada semua komponen, menciptakan gaya seragam.pedoman untuk kartu neumorfik

Dari pria itu sendiri, Michal Malewicz .Jika Anda menginginkan cara yang lebih interaktif untuk menjelajahi seperti apa neumorfisme dan rasanya, coba-coba dengan generator CSS neumorfik ini . Cukup menyenangkan.

Itu saja untuk neumorfisme. Menggunakan ini sebagai dasar di mana Anda membangun desain produk, Anda juga dapat membentuknya agar sesuai dengan gaya Anda. Banyak desainer menambahkan sembulan warna di area strategis layar, baik sebagai cara untuk meningkatkan kegunaan, menambahkan suar, atau hanya mempertahankan merek.

Neumorphism: kartu dan tombol

Kartu Neumorphic berbeda dari gaya desain lain yang kita kenal seperti kartu di Desain Material, misalnya, karena tidak terlihat mengambang. Tidak ada bayangan untuk menciptakan efek mengambang itu, bahkan saat pengguna mengarahkan kursor ke atas kartu itu.

Itu karena mereka keluar dari latar belakang, menciptakan tampilan yang menonjol.

merancang kartu dan tombol dengan neumorfisme

Cara untuk mencapai ini adalah dengan mengambil bayangan terang dan gelap yang telah Anda tetapkan yang akan menyertai latar belakang, dan menggunakannya di sisi berlawanan dari kartu. Anda bisa bermain-main dengan positioning kedua bayangan tersebut, sehingga terasa seolah-olah kartu-kartu tersebut dilihat pada sudut tertentu oleh pengguna.

Naik turunnya neumorfisme dalam desain UX

Memang benar bahwa seperti semua gaya desain trendi, neumorfisme hadir dengan sisi baik dan buruk. Sisi baiknya, kami memiliki semua kegembiraan dan kesegaran dari sesuatu yang baru dan unik. Ini menarik sebagai gaya visual, banyak yang bisa dikatakan secara objektif. Tetapi jika neumorfisme sangat bagus, mengapa kita tidak melihatnya dalam produk nyata?

Untuk semua visual hebat yang dibawanya, neumorfisme memiliki titik lemah yang sangat besar: kegunaan.

Masalahnya adalah bahwa terdapat margin warna dan kontras yang sangat kecil di mana neumorfisme bekerja. Penyimpangan sekecil apa pun dalam saturasi dapat membuat seluruh efek yang ditinggikan, tempat neumorfisme dibangun, gagal diterapkan. Seperti efek domino, ini memiliki banyak konsekuensi teduh bagi neumorfisme.

Masalah tombol

Neumorphism adalah tentang perubahan halus pada kontras dan komponen UI yang bijaksana. Tetapi tidak peduli seberapa penting Anda menempatkan sisi visual prototipe atau desain umum Anda, semua desainer tahu untuk menempatkan kegunaan pada prioritas yang lebih tinggi daripada sekadar estetika. Dan tidak ada tempat yang lebih kuat dari masalah ini selain di tombol neumorfik.

masalah kegunaan di tombol dan neumorfisme

Tombol adalah komponen UI utama dalam antarmuka apa pun. Mereka harus sangat terlihat, dan perlu mengubah status tombol saat pengguna berinteraksi dengannya. Pengguna tidak hanya harus dapat melihat tombol dalam waktu kurang dari sepersekian detik, tetapi juga perlu mengubah warna – dengan cara, mereka berkomunikasi dengan pengguna.

Namun, karakteristik tombol yang sederhana dalam neumorfisme ini menjadi bermasalah. Michal Malewicz, salah satu pencipta neumorphism, melihat masalah ini dengan segera. Anda memiliki gaya yang sangat jelas yang didasarkan pada margin tipis dalam efek bayangan. Ini adalah jendela sempit ke dalam neumorfisme, dan mungkin sulit untuk menyesuaikan status tombol melalui jendela kecil itu.Anda dapat melihat semua alasan mengapa Malewicz percaya neumorfisme tidak akan menjadi tren utama di posnya.

Lalu, ada masalah CTA

Neumorphism dimaksudkan agar lembut di mata. Ini membutuhkan kontras warna minimal dan sedikit warna muncul. Logikanya, desainer bebas untuk menerapkan neumorphism dalam tingkat apa pun yang mereka inginkan – tidak harus menerapkan gaya secara keseluruhan. Banyak yang memilih untuk menerapkan neumorfisme ke kartu mereka, tetapi tetap menggunakan tombol klasik.

Namun, jika kita membuat layar yang secara eksklusif terdiri dari desain neumorfik, bagaimana CTA akan terlihat?

Gaya ini membutuhkan warna yang semuanya bercampur satu sama lain, bertentangan dengan apa yang kita semua ketahui tentang CTA: warnanya harus mencolok. Hal terakhir yang Anda inginkan setelah menginvestasikan begitu banyak waktu dan usaha ke dalam suatu produk, adalah melihatnya berkinerja buruk karena sesuatu yang konyol, seperti pengguna yang tidak berhasil menemukan CTA.

Dan terakhir, masalah aksesibilitas

Dan ke masalah lain yang berpotensi besar untuk desain neumorfik. Gaya ini terlihat bagus, tapi bagaimana tampilannya bagi pengguna dengan gangguan penglihatan? Kemungkinannya adalah itu akan menjadi masalah nyata, dengan hal-hal penting menghilang ke latar belakang, menjadi tidak dapat digunakan.

Dan pengguna yang membutuhkan kontras besar untuk melihat antarmuka dengan jelas bukanlah satu-satunya yang mungkin menderita. Neumorphism adalah tentang UI yang lembut … mungkin, terlalu lembut. Perbedaan warna yang membedakan elemen dan komponen sangat halus. Sangat mungkin bahwa pengguna dengan layar berkualitas rendah akan melewatkan detail kecil yang membuat desain ini.pengujian aksesibilitas bisa menjadi masalah dengan antarmuka neumorfik

Dari Antonio Hristovski .

Jika Anda ingin mendapatkan kesan yang lebih realistis jika Anda dapat menerapkan neumorfisme ke produk Anda dan masih mencentang kotak aksesibilitas yang tepat, coba baca panduan kami untuk pengujian aksesibilitas . Coba bayangkan jika antarmuka neumorfik akan lulus tes dan standar yang dijelaskan!

Kit UI gratis untuk neumorfisme

Ini semua adalah grup komponen UI gratis yang mengikuti gaya neumorfik. Kami menemukan ini di kedalaman internet, tetapi pahlawan sebenarnya adalah para desainer yang mempostingnya di tempat pertama! Mari kita periksa.

1. Aplikasi Pos Rusia

Gratis ini terdiri dari aplikasi seluler yang dibuat oleh Sans Famillie. Anda ditawarkan versi terang dan gelap dari desain, mengikuti garis neumorfik sepenuhnya.

kit ui gratis untuk neumorfisme

Aplikasi Pos Rusia hadir dengan 3 layar aplikasi: dasbor, formulir login, dan layar penerima di mana kita dapat melihat informasi keuangan. Elemen UI beralih dari kartu ke grafik.

2. Unsur neumorfik

Kit UI ini hadir dengan beberapa komponen UI terbesar dalam gaya neumorfik, yang biasa kita semua. Ini termasuk tombol radio, tombol biasa, tab, bilah pencarian, bilah volume dan juga beberapa lainnya.

elemen neumorfik kit ui gratis

Hal keren tentang elemen neumorfik adalah tidak ada dalam file PSD atau Sketch. Seluruh kit tersedia dalam HTML di tempat.

3. Kit UI Neumorph

Kit UI hebat lainnya yang membuat hidup mudah, dengan menawarkan komponen langsung dalam kode. Dalam Neumorph UI kit , komponen sudah hadir dengan beberapa interaksi dasar seperti menu dropdown yang meluas.

kit neumorph ui gratis

Kami suka desain umumnya yang terasa sederhana, menghasilkan desain neumorfik klasik. Komponen UI mencakup hal-hal seperti radio dan tombol sakelar, serta bidang masukan dan tombol. Semua dasar, tercakup!

4. Elemen UI neumorfik

Elemen UI Neumorphic sederhana tetapi terkadang, sederhana berfungsi paling baik. Seluruh kit UI mengelilingi konsep pemutar musik, termasuk komponen seperti tombol putar dan maju cepat, serta bilah perkembangan, tombol radio, dan kotak centang.

kit ui gratis dari elemen neumorfik

Kami senang bahwa skema warna berfokus pada warna abu-abu terang dengan kilatan merah. Ini menangkap gagasan bahwa neumorfisme juga dapat memberikan ruang untuk warna mencolok di tengah-tengah semua warna latar belakang yang solid!

5. Elemen UI / UX

Elemen UI / UX adalah kit UI lain yang menikmati palet warna yang bagus. Ini semua tentang latar belakang terang, menggunakan biru untuk menyorot dan memandu mata. Kami senang bahwa kit ini hadir dengan elemen skeuomorphic (seperti kompas kehidupan nyata!) Dan neumorfik.

kit ui gratis untuk pengalaman pengguna neumorfik

Di antara elemen UI, Anda akan menemukan tombol, tombol radio, bilah pencarian, bidang masukan, tombol sakelar, tarik-turun, dan banyak lagi.

Penutupan tentang neumorfisme

Ini memang saat yang menarik, dan neumorfisme mencerminkan fakta itu dengan sempurna. Itu lahir dari skeuomorfisme dan minimalis, tetapi bertujuan untuk memberikan pengalaman yang belum pernah dialami pengguna.

Akankah kita melihat lebih banyak gaya ini di produk yang akan datang? Apakah ini desain material baru? Yang benar adalah bahwa neumorfisme hadir dengan serangkaian kekurangan yang mewakili masalah nyata. Seperti sekarang, masalah kegunaan yang ditimbulkannya terlalu besar bagi produk apa pun untuk mengambil risiko.

Tapi inilah hal terbaik tentang desain UX: neumorphism, seperti banyak gaya lainnya, hanyalah blok bangunan masa depan yang sederhana. Di sini, di Justinmind, kami senang melihat ke mana arah jalan neumorfisme mengarah, dan perubahan apa yang dibuat pada gaya khusus ini di sepanjang jalan.

No Comments
Comments to: Neumorphism: mengapa itu semua hype dalam desain UI

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

Good Reads

Apa makna Mei bagi Anda? Tentu saja beragam! Namun, bagi Starbucks, Mei adalah bulan berbagi. Sebab, di bulan ini, Starbucks merayakan Global Month of Service (GMOS), sebuah inisiatif Starbucks yang memberikan manfaat terhadap lingkungan dan masyarakat sekitar. Di Indonesia, perayaan tersebut mengejewantah dalam sebuah aktivitas mengajar yang dilakukan para pegawai Starbucks kepada anak Sekolah Menengah Kejuruan […]
Apakah Lorem Ipsum itu? Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak Share Tweet Share Linked In Google + Source link bisnis BiznetGio dan Entrepreneurship Majalah Marketeers marketing online Support Test halodesainer […]

Worlwide

David Ofiare Mengenai segala sesuatu yang menarik dan baru, saya cenderung mendekati setiap tulisan seperti yang dilakukan anak-anak, oleh karena itu saya SELALU tergoda untuk menumbuk informasi tentang subjek tertentu dalam satu karya daripada serangkaian artikel terpisah yang memecahkan topik dengan menarik. bit. Manfaatkan setiap kesempatan yang Anda miliki untuk menghukum saya dengan benar di bagian […]
Apa makna Mei bagi Anda? Tentu saja beragam! Namun, bagi Starbucks, Mei adalah bulan berbagi. Sebab, di bulan ini, Starbucks merayakan Global Month of Service (GMOS), sebuah inisiatif Starbucks yang memberikan manfaat terhadap lingkungan dan masyarakat sekitar. Di Indonesia, perayaan tersebut mengejewantah dalam sebuah aktivitas mengajar yang dilakukan para pegawai Starbucks kepada anak Sekolah Menengah Kejuruan […]
Apakah Lorem Ipsum itu? Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak Share Tweet Share Linked In Google + Source link bisnis BiznetGio dan Entrepreneurship Majalah Marketeers marketing online Support Test halodesainer […]
Artikel ini ditulis oleh Mia Santosa, Vice President Commercial & Business Development Visinema Group Keberadaan produk dan brand dalam film telah menjadi hal yang lumrah sejak kali pertama sebuah brand diintegrasikan dalam film Wings di tahun 1927, bahkan hingga sekarang integrasi brand dalam film menjadi salah satu strategi marketing yang efektif. Praktik beriklan dalam film […]

Trending

Sangat mudah untuk mengabaikan pentingnya riset pemasaran. Lagi pula, ketika Anda pertama kali memikirkan ide bisnis, menghabiskan waktu berjam-jam untuk riset pasar adalah hal terakhir yang ada di pikiran Anda. Sebagian besar dari kita lebih suka mulai membuat dan menjual produk daripada memikirkan nilai riset pemasaran. Tetapi untuk semua jenis bisnis, ada kebutuhan nyata untuk riset pasar. Ini […]
Pernahkah Anda bertanya-tanya apa kesamaan emotikon dan emoji, atau bagaimana mereka muncul? Yah, karena kami suka memberdayakan pembaca dengan pengetahuan, kami meluangkan waktu dan menyusun artikel mendalam yang seharusnya meruntuhkan dua cara komunikasi modern yang telah mengubah hidup kita sedemikian besar. Sejak masa awal kemanusiaan, kemampuan kita untuk berkomunikasi telah memainkan faktor kunci dalam sepenuhnya membentuk […]
Pernahkah Anda bertanya-tanya apa yang terjadi pada penciptaan karya desain yang sukses? Berikut adalah beberapa alat visual yang dapat membantu Anda menyusun komposisi desain Anda. Pada artikel ini, saya akan menunjukkan kepada Anda definisi dan pentingnya prinsip-prinsip desain. Perangkat visual ini dapat membantu Anda membuat struktur yang terorganisir untuk menyampaikan pesan yang jelas. Prinsip-prinsip ini juga diterapkan dalam […]
Apakah Anda seorang pemula atau desainer yang berpengalaman, kedua konsep ini penting untuk diketahui jika Anda mengatur teks secara teratur. Font monospace dan proporsional adalah istilah yang tidak banyak desainer tahu kecuali mereka ingin mengasah keterampilan mereka. Kedua jenis font ini hanya memiliki satu hal yang berbeda — lebar karakter. Mari kita lihat arti dan beberapa contohnya.  Apa […]

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Titles

Categories

Tag

Login

Selamat datang di Halodesainer

Orientasi singkat dan ramah adalah hal pertama yang dilihat pengguna baru dalam tema.
Join Typer
Registration is closed.