BAB 5 PROSES DESAIN DAN PERANCANGAN
5.1 Format
Website menggunakan grid dengan lebar 1200 px ke samping dan panjang ke bawah menyesuaikan. Dengan grid 1200 px, sebagian besar konten dari website akan menggunakan grid 1020 px, menyisakan margin 90 px pada masing- masing sisi.
Gambar 5.1.1 Grid 1200 px
5.2 Tipografi
Font yang digunakan untuk judul utama dan logo adalah Leckerli One. Font dekoratif handwritten ini digunakan untuk memberikan kesan santai, hangat dan friendly pada website.
31
32
Gambar 5.2.1 Font Leckerli One
Untuk beberapa judul dan sub-judul, font yang digunakan adalah Enriqueta Bold. Font slab serif memberikan kesan hangat dan klasik dari teh sebagai konteks utama.
Gambar 5.2.2 Font Enriqueta Bold
Body copy pada website ini mengaplikasikan font Lato untuk memberikan kesan simple dan modern.
Gambar 5.2.3 Font Lato Regular
33 5.3 Warna
Warna yang digunakan untuk website bertujuan untuk memberikan kesan hangat berdasarkan konteks teh. Warna krem kekuningan merupakan warna utama dan dominan pada website ini dan digunakan sebagian besar untuk sejumlah background. Warna gelap yang digunakan untuk mengisi warna body copy, outline ilustrasi dan elemen-elemen gelap lainnya adalah abu-abu tua untuk mempertahankan rasa santai dan hangat yang diberikan.
Masing-masing
halaman memiliki aksen warna masing-masing pada garis pembatas judul untuk membedakan antara segmen dalam website.
Gambar 5.3.1 Warna Utama yang Digunakan
5.4 Ilustrasi
Ilustrasi pada website ini bertema flat-style dengan aplikasi outline untuk memperkuat objek tersebut. Outline pada ilustrasi juga memperkuat appearance pada ilustrasi tersebut dan menjadikannya ciri khas dalam website ini.
34
Gambar 5.4.1 Ilustrasi Flat-Style dengan Outline
Background yang berbasis ilustrasi mengaplikasikan ilustrasi flat-style tanpa outline untuk menjadikannya elemen sekunder atau pendukung dari satu kesatuan tampilan.
Gambar 5.4.2 Ilustrasi Flat-Style Tanpa Outline untuk Background
5.5 Tampilan Website
Tampilan atau UI (User Interface) website Ngeteh Yuk mengaplikasikan model website infografik, dimana secara dominan masing-masing segmen pada website tersebut berbentuk single-page website yang menggunakan ilustrasi sebagai salah satu elemen utama.
35
Gambar 5.5.1 Home / Index dengan Landing Page
36 Masing-masing halaman memiliki elemen-elemen yang berbeda sesuai dengan kontennya. Home tidak memiliki header navigation karena menu utama website akan ditunjukkan sebagai konten dalam home tersebut. Untuk masing-masing konten utama dalam website itu sendiri, masing-masing memiliki landing page yang berupa menu yang menunjukkan sub-konten masing-masing konten utama. Header navigation muncul dan terletak di sisi paling atas website sebagai menu yang terus muncul agar pengunjung dapat langsung memilih menu yang ingin dituju tanpa harus scroll ke bagian atas website.
Gambar 5.5.2 Landing Page Berupa Menu
Masing-masing sub-menu pada landing page memiliki ilustrasi icon yang merepresentasikan sub-konten tersebut diikuti dengan penjelasan pendek.
37
Gambar 5.5.3 Halaman penuh konten utama
38 Landing page mengaplikasikan background berwarna kuning, mirip seperti landing page pada home dengan gambar berpola yang berwarna sangat tipis untuk memperkuat mood dan feel yang friendly dan hangat. Background dari sub-konten menggunakan warna krem yang lebih terang sebagai perbedaan dengan landing page dan memfokuskan pengunjung pada konten yang dipaparkan. Gambar berpola dengan warna yang tipis juga diaplikasikan pada halaman sub-konten.
Untuk sub-konten dari halaman Jenis dan Variasi Teh, halaman sub-konten terpisah dari landing page karena jumlah yang banyak dan untuk memberikan feel yang berbeda kepada masing-masing jenis teh. Sub-konten jenis teh memiliki background sesuai dengan warna teh tersebut.
Gambar 5.5.4 Sub-konten Teh Hijau Dengan Background Berbeda
