Kuasai minimalis dalam desain web

Pengarang: Lewis Jackson
Tanggal Pembuatan: 5 Boleh 2021
Tanggal Pembaruan: 8 Boleh 2024
Anonim
Essential Tips for Great Minimalist Web Design — Monday Masterclass
Video: Essential Tips for Great Minimalist Web Design — Monday Masterclass

Isi

Dalam hal desain antarmuka pengguna, istilah 'minimalis' masih menyebabkan banyak kebingungan. Apa itu? Bagaimana kita harus menggunakannya (jika ada) dan di mana letak spektrumnya bersama desain datar, datar 2.0, desain material dan sistem desain modern dan estetika visual lainnya?

Pertama, mari kita lihat minimalis. Apakah minimalis datar atau datar? Bisa jadi. Apakah minimalis putih? Bisa jadi. Apakah minimalis berarti lebih sedikit kekacauan? Itu bisa dilakukan. Minimalis dapat terlihat seperti banyak hal - lihat kumpulan desain situs web minimalis kami untuk berbagai contohnya. Namun, kita sering lupa tentang apa yang ingin dicapai, dan mengapa kita benar-benar membutuhkannya.

Pada dasarnya, desain minimalis mendukung kejelasan yang bercampur dengan niat; dengan kata lain 'tidak lebih dari apa yang dibutuhkan' untuk mengalihkan fokus pengguna ke aspek pengalaman yang paling berharga, sekaligus menghilangkan fokus pada aspek yang dapat mengalihkan perhatian pengguna. Dengan logika itu, semua desain harus minimal, tetapi hanya jika kita menggunakan minimalis dengan benar.


Jika Anda membuat sistem desain yang benar-benar baru untuk perombakan situs web minimalis Anda, pastikan Anda menyimpan file dengan aman agar dapat diakses oleh tim Anda dengan lancar. Opsi penyimpanan cloud terbaik akan membantu.

Tentu, desain minimalis mungkin terlihat bagus tetapi tidak boleh mengorbankan kejelasan - yaitu di mana desain menampilkan kualitas minimalis yang menonjol tetapi tanpa pemikiran sadar, menampilkan bentuk indah yang tidak memiliki fungsi atau kegunaan intuitif.

Mari kita bahas bagaimana Anda bisa mencapai minimalis, langkah demi langkah.

01. Batasi pilihan

Membatasi pilihan adalah salah satu cara untuk mengurangi kelebihan kognitif, yang pada gilirannya membantu pengguna membuat keputusan dengan lebih efisien. Namun, demi kegunaan, kami perlu menyertakan beberapa hal:

  • Pilihan yang relevan
  • Pilihan alternatif

Pilihan yang relevan

Memutuskan apa yang relevan bagi pengguna bergantung pada konteksnya. Misalnya, jika kami menampilkan daftar artikel blog baru, memutuskan beberapa artikel untuk ditampilkan mungkin bergantung pada apakah pengguna masuk atau tidak. Dengan yang pertama, kami dapat menggunakan kecerdasan buatan untuk menguraikan selera membaca pengguna. Dengan yang terakhir, kami tidak dapat menyesuaikan konten untuk pengguna tertentu, tetapi itu tidak berarti bahwa kami tidak memiliki data yang dapat kami gunakan. Kami masih dapat membuat daftar hasil berdasarkan data lalu lintas (layanan hosting web yang layak dapat menjalankan berbagai analitik untuk Anda).


Namun, itulah kontennya. Dalam hal UI, alat pelacakan seperti Google Analytics membantu kami mempelajari lebih lanjut tentang perilaku pengguna kami. Alat pengujian A / B seperti Crazy Egg dan Google Optimize dapat menguji versi alternatif dari tata letak kami. Peta panas juga dapat menunjukkan apa yang pengguna lakukan dan tidak pedulikan.

Atau, jika Anda membuat aplikasi atau situs web dari awal (mungkin dengan menggunakan pembuat situs web), merancang arsitektur informasi melalui pengujian kegunaan akan menjadi taktik yang lebih baik jika tidak ada data - penyortiran kartu terbuka dan tertutup atau pengujian arti-penting fungsional dilakukan untuk keberatan di sini.

Jadi seperti yang Anda lihat, ada banyak cara untuk mendapatkan data kualitatif dan kuantitatif dan menggabungkannya untuk membuat keputusan yang tepat.

Pilihan alternatif

Jika kami merancang arsitektur informasi kami dengan baik, kami akan menawarkan cara sederhana untuk mengakses opsi alternatif. Untuk konten, ini bisa menjadi tombol 'lihat semua' tetapi untuk navigasi, ini bisa menjadi menu hamburger (ya, menu hamburger tidak terlalu buruk!).


Meskipun lebih sedikit lebih baik dalam hal minimalis, itu tidak berarti kami perlu membatasi penawaran kami secara keseluruhan, hanya penawaran di muka kami. Kekacauan minimal = dampak maksimum!

Fakta menarik: ketika datang ke presentasi produk (yaitu konten), Steve Jobs terkenal bersumpah dengan aturan tiga.

02. Hapus kekacauan visual

Berbicara tentang kekacauan, kekacauan visual mengacu pada gaya kosmetik yang hanya menambah nilai emosional - yaitu terlihat keren tetapi tidak menawarkan banyak hal lain. Sekarang saya menyukai hal-hal yang terlihat bagus (bukan semua desainer?) Dan desain emosional sangat penting, terutama di industri berbasis konsumen, tetapi ada alasan mengapa hal itu disebut lapisan permukaan - ini diterapkan terakhir.

Sangat mudah untuk menjalankannya dengan angin saat sampai di lapisan permukaan - beberapa menyebutnya desain berlebihan. Jika ada sesuatu yang terasa tidak benar bagi Anda, Coco Chanel pernah berkata: "Saat aksesori, selalu lepas benda terakhir yang Anda kenakan".

Tetapi jika Anda benar-benar ingin mengambil pendekatan berdasarkan data yang lebih masuk akal, ada trik rapi yang saya suka gunakan yang melibatkan berbagi layar. Saat berbagi layar Anda, dapatkan beberapa pengguna dan minta mereka memutuskan gaya mana yang akan diaktifkan dan dinonaktifkan. Lanjutkan hingga pengguna puas dengan daya tarik visual dan kegunaannya.

Khusus untuk target ketuk (tombol, tautan, bidang masukan, dan sebagainya), pengujian kemampuan visual dapat mengungkapkan elemen mana yang tampak dapat diklik dan mana yang tidak. Anda mungkin menemukan bahwa teknik sebelumnya lebih berguna karena itu juga akan mengungkapkan solusi (yaitu gaya mana yang harus dihapus untuk mengurangi kekacauan visual).

03. Mengoptimalkan hierarki visual

Jadi, kami telah meminimalkan penawaran di muka dan mengoptimalkannya secara visual untuk mengurangi kelebihan kognitif, tetapi dapatkah kami mengambil langkah lebih jauh? Tentu saja, tetapi kita juga perlu ingat bahwa pengguna malas - sebelum pengguna membaca, mereka memindai.

Artinya, saat pengguna memindai sebentar UI dan konten kami secara holistik, bahkan gangguan visual sekecil apa pun dapat menjauhkan pengguna dari hal-hal yang benar-benar penting, membuat minimalisasi semakin penting dalam hal kemampuan pemindaian. Namun disamping itu, elemen-elemen yang tertinggal setelah minimisasi harus saling melengkapi dengan baik. Lebih sedikit hanya lebih jika kita membuatnya berbicara banyak.

Konten dan judul

Karena pengguna mengawali konten dengan memindai tajuknya, tajuk ini harus sangat informatif, tidak hanya memberi petunjuk tentang apa yang akan dijelaskan paragraf yang menyertainya tetapi cukup baik sehingga jika pengguna hanya membaca tajuk, mereka masih akan merasa puas - ini masih benar bahkan jika itu merugikan kami dalam hal nilai SEO. Lagi pula, apa gunanya akuisisi jika kami tidak dapat menawarkan pengalaman membaca yang layak setelah pengguna tiba?

Judul juga harus mendapatkan keuntungan dari hierarki tipografi yang jelas, membantu pengguna dalam upaya mereka untuk memahami bagaimana potongan konten individu membentuk badan informasi.

UI dan warna

Konsep serupa berlaku untuk UI dan warna. Warna tidak hanya membantu kontras tetapi juga membantu menyimpulkan makna, jadi ketika pengguna menemukan target ketuk ini, mereka secara otomatis memahami apa yang mereka lakukan atau ke mana tujuan mereka.

Mendapatkan tajuk dan warna yang tepat mungkin tidak ada hubungannya dengan minimalis secara langsung, tetapi ini memastikan bahwa elemen yang tidak ingin kami minimalkan seefektif mungkin. Jika tidak, kami berisiko mendesain berlebihan untuk mengimbanginya.

04. Jadikan lebih berarti lebih sedikit

'Taruh semuanya di satu layar. Ini lebih sederhana, bukan? 'Secara teori, ini terdengar seperti ide terbaik, tetapi ini bukanlah solusi yang berhasil di setiap kasus. Beberapa desain lebih kompleks dari yang lain dan, selain itu, sederhana untuk siapa? Anda harus memperhatikan implementasi yang lebih sederhana yang membingungkan (membuat segalanya lebih mudah bagi pengembang) dan UX yang lebih sederhana (membuat segalanya lebih mudah bagi pengguna).

Pertimbangkan memecah komponen UI-berat menjadi alur pengguna yang lebih kecil. Meskipun secara teknis ini menghasilkan lebih banyak, itu menciptakan ilusi yang lebih sedikit. Biasanya ini berarti memecah formulir panjang menjadi langkah-langkah logis, tetapi juga bisa berarti memecah artikel yang panjang dengan gambar.

Secara keseluruhan, minimalis adalah subjek yang rumit. Terkadang kami memaksudkannya sebagai estetika visual (UI datar, latar belakang putih, dll.), Di lain waktu kami menganggapnya hanya sebagai konsep atau bahkan gaya hidup. Dalam hal desain antarmuka pengguna, cara terbaik untuk memikirkannya adalah dengan mempertimbangkan dampaknya pada beban kognitif yang dimiliki setiap elemen.

Saat merancang untuk mengurangi beban kognitif, tanyakan pada diri Anda pertanyaan-pertanyaan ini untuk setiap gaya, aliran pengguna, interaksi, dan fitur:

  • Apakah itu dibutuhkan?
  • Apakah itu elemen bayangan yang lebih penting?
  • Apakah dibayangi oleh elemen yang tidak lebih penting?

Itu turun ke hierarki visual - menghilangkan kekacauan dan menggunakan desain untuk menunjukkan pentingnya. Terkadang itu berarti memindahkan sesuatu dari pandangan jika itu membantu pengguna fokus pada hal yang benar-benar penting.

Artikel ini pertama kali diterbitkan pada edisi 321 pada bersih, majalah terlaris di dunia untuk perancang dan pengembang web. Beli edisi 321 di sini atau berlangganan di sini.

Menarik Hari Ini
Bagaimana Netflix menangani pembuatan prototipe
Menemukan

Bagaimana Netflix menangani pembuatan prototipe

Prototipe Netflix David Aragon memberi kita tampilan ek klu if di balik layar pada karyanya untuk rak a a hiburan. eperti apa tim lang ung Anda? DA: aya berada di TV dan tim de ain itu , ber ama denga...
Bagaimana rasanya menggambar di Surface Pro 4
Menemukan

Bagaimana rasanya menggambar di Surface Pro 4

Baru-baru ini aya diundang ke acara di mana aya diberi ak e ke tablet Micro oft baru, urface Pro 4. aya haru menyatakan ejak awal bahwa aya bukan jurnali : aya pengembang perangkat lunak untuk alat ya...
Pratinjau kanvas Photoshop Anda dengan aplikasi iPhone ini
Menemukan

Pratinjau kanvas Photoshop Anda dengan aplikasi iPhone ini

ebuah aplika i iPhone baru telah diluncurkan yang memungkinkan Anda untuk melihat kanva Photo hop Anda ecara lang ung di iPhone Anda melalui WiFi. De ign Duet dirancang untuk membantu mereka yang ter...