Desain web

 Desain Web

 

• Warna

• Tipografi (font)

• Layout (desain tata letak)

• Content (Gambar, Audio, Video)

 

1.      Warna

·         Warna merupakan salah satu hal penting dalam desain sebuah web, membuat sebuah web menjadi lebih menarik/pemanis.

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

1.      Warna Primer

Ada merah, kuning dan biru.

2.      Warna Sekunder

Warna sekunder didapat dari gabungan warna primer

Yaitu ungu, oranye, dan hijau

3.      Warna Tersier

Warna tersier didapat dari gabungan warna primer dan sekunder

4.      Warna Netral.

Warna yang biasanya digunakan untuk background

 

a.       Palette Color

·         Dulu website banyak menggunakan warna primer. Berkembangnya waktu, warna pun menjadi beragam. Color palette adalah sekumpulan warna yang di mix and match sehingga menghasilkan kombinasi warna yang unik dan menarik.

·         Contoh: https://colorhunt.co

 

b.      RGB

·         Warna umum atau yang paling sering digunakan untuk website model RGB (Red, Green, Blue)

·         Kode RGB yang biasa digunakan untuk website, pokoknya digital . Kode ini menggunakan bilangan Hexadecimal

·         Hexadecimal basis 16

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

A= 10

.

.

.

F= 15

·         Contoh kode warna RGB:

#FFFFFF

Red Green Blue

Kalau rednya full, jadi merah. Kalau semuanya full jadi warna putih. Kalau 0 semua itu jadi hitam

Contohnya #160201

 

2.      Type Font

·         Serif menggunakan tips atau flag dekoratif

·         Serif biasanya digunakan untuk dokumen atau layer 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

 

a.       Tipografi

·         Judul (Heading). Berikut ukuran font secara formatnya:

o   H1

Untuk header biasanya

o   H2

Untuk judul biasanya

o   H3

Untuk sub-judul biasanya

o   H4

o   ...

Untuk SEO, kebanyaka heading dapat merugikan/bermasalah

·         Body (Paragraf)

Yang penting adalah:

o   Ketegasan dan keterbacaan

o   Nyaman untuk dibaca

o   Aksen (Penekanan). Digunakan jika diperlukan

§  Bold

§  Italic

§  Underline

 

b.      Pemilihan Font

Perlu dipahami

·         Pahami target pengunjung website

Contohnya jika targetnya untuk orang tua, fontnya jangan berlebihan

·         Perhatikan tingkat keterbacaan website

Walaupun tulisan latin cantik, namun jika pengunjung susah membaca. Akan sangat menyulitkan

·         Perhatikan type font (serif & sans serif)

·         Perhatikan style font (B, I, U)

·         Perhatikan lowercase atau UPPERCASE font

Header masih dibilang oke kalau uppercase semua. Namun untuk konten tidak direkomendasikan(menggunakan uppercase seperti mau marah)

·         Perhatikan pewarnaan font (Nyaman di lihat)

Paling tidak jelas, artinya nyaman nomor 1, keindahan nomor 2

Untuk tulisan bold hindari warna hitam, namun jika tidak hitam pilihan warna yang baik(untuk konten)

·         Tidak menggunakan terlalu banyak jenis font

(Rekomendasi 2 font berbeda)

Paling gak header beda dengan body nya. Header juga bolehlah aneh-aneh, namun selebihnya jangan

·         Perhatikan lisensi font (free atau tidak), disarankan font yang benar-benar gratis untuk apapun.

Jenis font yang free:

Free untuk individu

Free untuk komersil

Free total, contohnya font google.

 

3.      Jenis Layout Desain Website

Yang berkembang sekarang

·         Static - Desain web memiliki ukuran tetap pada semua resolusi browser (pixel). Contohnya portal unri.

·         Fluid - Desain web dapat menyesuaikan lebar layout sesuai dengan resolusi browser (%) artinya fleksibel namun belum responsive

·         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)

Kebanyakan untuk web sejarah, perjalanan karir dll

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

Kalau klik about, biasanya ke halaman baru. Namun ini diarahkan kebawah alias ke about tersebut.

 

a.       Format Layout Web

·         One Column

·         Two Columns

·         Three Columns

Sering ditemukan di web-web berita.

Secara umum yang paling bagus adalah yang memakai right sidebar (untuk tampilan). Enak dipakai untuk orang yang sering mamakai tangan kanan dan juga kiri.

 

4.      Content (Gambar, Audio, Video)

·         Ukuran gambar/audio/video sekecil mungkin dengan kualitas semaksimal mungkin (< 500 Kb). Kecuali video maupun audio. Karna realitanya jika kita masuk ke web, kita otomatis telah mendownload filenya namun masih di dalam browser

·         Resolusi gambar/audio/video disesuaikan dengan ukuran file gambar

Kalau resolusinya besar namun gambar kecil tidak masalah. Yang dihindari adalah resolusi yang kecil namun gambarnya besar.

·         GIF - Cocok untuk menambahkan animasi singkat, cara menarik untuk mengambil perhatian pembaca web

·         JPEG / JPG - Pas untuk ilustrasi yang kaya warna/foto.

·         PNG –Pilihan yang tepat untuk menampilkan logo, screenshot yang detail dan tipografi, desain dsb

·         Format audio MP3, OGG dan WAP

Yang paling untuk backsound adalah OGG, karna ukurannya kecil namun kualitasnya sama

MP3 ukurannya besar, bagusnya untuk meng-upload rekaman suara

·         Format video MP4, OGV(versi OGG) dan upload ke YouTube(lebih efisien dari segi ukuran karna tidak menuhin hosting dan youtube bisa menyesuaikan resolusi)