Beberapa hal yang perlu diingat:
- Setiap desain memecahkan masalah
Berhentilah memikirkan desain dalam hal "Bagaimana cara membuat ini cantik?" dan mulai memikirkannya dalam istilah "Bagaimana cara membuat ini semudah mungkin untuk digunakan secara manusiawi?"
Ketika Anda membuat situs web, ini berarti bahwa, dalam arti luas, Anda sedang memecahkan masalah bisnis .
Ada situs web untuk mewujudkan tujuan bisnis .
Para pengguna situs web juga memikirkan tujuan mereka sendiri — mereka mungkin ingin membeli sesuatu, membandingkan produk, membaca topik, dll.
Adalah tugas Anda sebagai perancang untuk membantu bisnis dengan memastikan bahwa sebanyak mungkin pengguna memenuhi tujuan bisnis dan membantu pengguna menavigasi situs web sehingga mereka dapat memenuhi tujuan mereka sendiri.
Misalnya, Anda merancang toko e-commerce: Tujuan bisnis di sini adalah menjual produk. Dan tujuan pengguna adalah untuk menemukan apa yang ingin mereka beli, secepat mungkin dan memeriksa, secepat mungkin.
Sebagian besar dari proses desain digunakan untuk mencari tahu masalah, membangun profil pengguna, memikirkan cara mewujudkan tujuan bisnis, dll.
Warna, font, tata letak, setiap keputusan desain yang Anda buat harus ditentukan oleh tujuan situs web .
- Ini pengulangan yang membuat segalanya terlihat cantik .
Tentang itulah konsistensi.
Misalnya, pemasangan font. Font dipasangkan berdasarkan pada sifat yang serupa, pada pengulangan detail.
Ini pertandingannya: Farnham dan Benton Sans.
Menurut posting ini di sini 2 kedua font ini cocok karena:
[...] wajah-wajah itu sama dalam squatness dari huruf kecil mereka, yang memiliki ascenders dan descenders yang jelas pendek. [...] Huruf kecil keduanya lebar.
Pengulangan sifat-sifat tertentu membuat 2 font ini bekerja sama dengan baik. Anda dapat melihatnya di halaman web di sini 3 .
Pengulangan membawa harmoni dalam desain. Dan harmoni membuat desain terlihat indah.
Tetapi, seperti yang Anda lihat, Farnham dan Benton Sans juga kontras —Farnham adalah font serif dan Benton adalah sans serif.
Mengapa perlu ada perbedaan? Kami ingin memperkenalkan persamaan dalam desain, bukan?
Ya, tapi pengulangan yang terlalu banyak membuat desain Anda kusam dan sulit digunakan .
Obatnya kontras.
- Kontras membantu pengguna menemukan jalannya
Ini membantu mereka membedakan elemen yang berbeda satu sama lain. Ini membantu mereka menemukan elemen kunci seperti heading, navigasi, tombol.
Semakin penting elemen, semakin kontras dengan lingkungannya.
Gunakan pengulangan untuk membuat desain Anda konsisten. Seperti yang dikatakan orang lain — 2 font palet warna terbatas, dll.
Gunakan kontras saat Anda benar-benar perlu memisahkan elemen dari elemen lainnya.
Semua itu menyenangkan untuk diketahui, tetapi ... masih tidak membantu Anda mendesain situs web berikutnya, bukan?
Yah, saya punya solusi untuk itu juga.
Langkah 1 untuk menjadi lebih baik di desain web adalah mengamati dan menyerap karya orang lain. Banyak sekali. Dari situlah "inspirasi" berasal.
Lihatlah seratus desain yang Anda sukai, analisis, dan Anda akan mulai melihat pola. Otak Anda akan membantu Anda menggabungkan pola-pola ini ke dalam desain Anda sendiri yang akan menjadi variasi dari semua desain serupa yang Anda lihat. Anda tidak perlu membuat sesuatu yang "unik".
Ringkasan: Lain kali Anda mulai merancang untuk proyek sampingan Anda
Telusuri selusin situs web / aplikasi web serupa dan buat sketsa cepat desain mereka. Perhatikan alur kerja apa yang mereka gunakan. Mengapa mereka menggunakannya? Perhatikan bentuk, warna, dan font apa yang mereka gunakan.
Kemudian lakukan proses ini untuk membuat desain Anda sendiri:
Tentukan proyek. Benamkan diri Anda ke dalam proyek & kenal lebih banyak tentang:
1. Tujuannya, hasil yang dimaksudkan
- Pengguna (masa depan)
- Pengalaman yang dimaksud untuk para pengguna / pengunjung
- Pencitraan di balik proyek
- Dapatkan sumber daya yang dibutuhkan. Dapatkan konten (sampel) dari Anda (pinjam dari situs serupa)
Berikan bentuk pada konten
- Pilih jenis huruf untuk mengeset konten (pilih satu yang sesuai dengan suasana hati dan pesan situs)
- Pilih ukuran font untuk salinan tubuh
- Hasilkan skala modular (tabel dimensi harmonik proporsional) dari ukuran font salinan tubuh (menggunakan Skala Jenis - Kalkulator Visual)
- Buat sketsa tata letak yang berbeda berdasarkan persyaratan proyek
- Bangun tata letak (dalam HTML & CSS) dengan bantuan skala modular: lebar kolom, tinggi garis, ukuran tajuk, margin bawah, kolom (jika perlu)
- Oleskan warna sesuai dengan pedoman merek
Anda dapat membaca lebih lanjut tentang setiap langkah dari proses ini di sini .