Gambar Grid 1200 px

Ukuran: px

Mulai penontonan dengan halaman:

Download "Gambar Grid 1200 px"

Sukarno Wibowo
6 tahun lalu
Tontonan:

1 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 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.

2 32 Gambar 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 Font Enriqueta Bold Body copy pada website ini mengaplikasikan font Lato untuk memberikan kesan simple dan modern. Gambar Font Lato Regular

33 5.3 Warna Warna yang digunakan untuk website bertujuan untuk memberikan kesan hangat berdasarkan konteks teh.

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 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.

4 34 Gambar 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 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.

5 Gambar Home / Index dengan Landing Page 35

6 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 Landing Page Berupa Menu Masing-masing sub-menu pada landing page memiliki ilustrasi icon yang merepresentasikan sub-konten tersebut diikuti dengan penjelasan pendek.

7 Gambar Halaman penuh konten utama 37

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

8 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 Sub-konten Teh Hijau Dengan Background Berbeda

dokumen-dokumen yang mirip

BAB 4 KONSEP DESAIN. 4.1 Landasan Teori Teori Publikasi

BAB 4 KONSEP DESAIN. 4.1 Landasan Teori Teori Publikasi 16 BAB 4 KONSEP DESAIN 4.1 Landasan Teori 4.1.1 Teori Publikasi Timothy Samara (2005:10) menyatakan publikasi merupakan sebuah perluasan aplikasi dari dua unsur yaitu teks dan gambar. Perluasan aplikasi