Warna

Warna merupakan hal penting dalam desain sebuah web, membuat sebuah web menjadi lebih menarik

Menurut teori Brewster, untuk menyederhanakan warna yang ada di alam, warna dibagi menjadi 4 kelompok, yaitu:

• Warna Primer

• Warna Sekunder

• Warna Tersier

• Warna Netral

Psikologi Warna

Psikologi warna dapat kita pahami salah satunya dengan mengetahui perlambangan warna. Warna memiliki pengaruh yang kuat terhadap sikap dan emosi.

Memahami psikologi warna akan membantumu merancang antarmuka yang efektif dan tepat sasaran.

Warna Yang Disukai Wanita

Dalam survei tentang warna dan gender:

• 35% wanita suka warna biru
• 23% wanita suka warna ungu
• 14% wanita suka warna hijau
• 33% wanita tidak suka warna oranye
• 33% wanita tidak suka warna coklat
• 17% wanita tidak suka warna abu-abu

Warna Yang Disukai Pria

• Pria menyukai biru
• Pria menyukai hijau
• Pria menyukai hitam
• Pria tidak menyukai ungu
• Pria tidak menyukai orange
• Pria tidak menyukai coklat

Palette Warna

Color palette adalah sekumpulan warna yang di mix and match sehingga menghasilkan kombinasi warna yang unik dan menarik. Contoh: https://colorhunt.co.

RGB

Warna umum yang digunakan untuk website model RGB

Kode RGB menggunakan bilangan Hexadecimal basis 16

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Contoh kode warna RGB:

Type Font

Serif menggunakan tips atau flag dekoratif. Serif biasanya digunakan untuk dokumen atau layar yang mengandung banyak text

Sans Serif tidak menggunakan tips atau flag dekoratif. Sans Serif biasanya digunakan untuk komputer karena dianggap memiliki kontras yang lebih tajam

Pemilihan Font

• Pahami target pengunjung website
• Perhatikan tingkat keterbacaan website
• Perhatikan type font (serif & sans serif)
• Perhatikan style font (B, I, U)
• Perhatikan lowercase atau UPPERCASE font
• Perhatikan pewarnaan font (Nyaman di lihat)
• Tidak menggunakan terlalu banyak jenis font(Rekomendasi 2 font berbeda)
• Perhatikan lisensi font (free atau tidak), disarankan font yang benar-benar gratis untuk apapun.

Tipografi

1. Judul (Heading)

• H1
• H2
• H3
• H4
• ...

2. Body (Paragraf)

• Ketegasan dan keterbacaan
• Nyaman untuk dibaca

3. Aksen (Penekanan)

• Bold
• Italic
• Underline

Metode Pembuatan Desain UI Website

Ada 3 prinsip dalam mendesain sebuah website menurut Veen’s design principles, yaitu bisa menjawab pertanyaan:

1. Di mana saya?

2. Kemana saya bisa pergi?

3. Ada apa di sini?

Veen’s Design Principles

1. Menggambarkan websiteharus memiliki header yang menjelaskan website apa (Di mana saya?)

2. Menggambarkan adanya navigasi yang diposisikan di sidebar (Kemana saya bisa pergi?)

3. Menggambarkan konten dari website (Ada apa di sini?)

Jenis Layout Desain Website

• Static - Desain web memiliki ukuran tetap pada semua resolusi browser (pixel)

• Fluid - Desain web dapat menyesuaikan lebar layout sesuai dengan resolusi browser (%)

• Responsive – Desain web dapat berganti layout pada resolusi tertentu (desktop&mobile)

• Responsive fluid – Gabungan Responsive & Fluid (%)

• Horizontal Scrolling -Desain web dengan menampilkan konten Horizontal atau menyamping)

• Parallax Scrolling- Desain web dengan layer atau hanya 1 halaman (one page/single page)

Responsive Web Design

2010 Ethan Marcotte memperkenalkan istilah Responsive Web Design yaitu sebuah metode untuk mengoptimalkan pengalaman pengguna melakukan surfing internet di berbagai perangkat, baik mobile, tablet, maupun desktop.