Myjayvyn.com

Cara membuat Landing Page: Menggambar Layout

13  |  1983 Views

Oke walaupun sepertinya komen belum banyak yang masuk, saya buka artikel lanjutan dengan judul cara membuat landing page: menggambar layout. Langkah awal sebelum kita pusing ngutak ngatik coding di style.css dan index.html adalah menggambar, lho kok menggambar? Yup ambil kertas dan pensil warna lalu silakan anda gambar pemandangan seperti contoh dibawah ini…

Gambar Pemandangan

Gambar Pemandangan

 

Ups salah Hehe… ya iyyalah masa gambar pemandangan… tapi kalo anda sudah terlanjur menggambarkan pemandangan tidak usah berkecil hati, pasang saja gambar tersebut di pintu kamar anda yaa…

Yang saya maksud adalah menggambarkan layout landing page, tujuannya nanti sebagai panduan kita dalam menentukan bagian-bagian yang perlu dibuat saat coding. Cukup kotrat kotret di kertas buramlah,  tapi untuk sekarang landing page yang akan kita buat adalah seperti dibawah ini…

Layout Landing Page

Layout Landing Page

  • Bagian A: Header, nanti akan kita pasangkan gambar background dibagian ini.
  • Bagian B: Text content, mulai dari sekarang anda siapkan kira-kira tulisan apa yang akan ditampilkan di 3 bagian tersebut.
  • Bagian C: Image content, kita akan sisipkan 3 gambar diposisi tersebut.
  • Bagian D: Form content, semacam submit form atau bisa juga banner gabung untuk mendapatkan data dari pengunjung.
  • Bagian E: Footer, informasi pemilik web atau disclaimer bisa dituliskan disini.

Kalo dilihat dari layoutnya, ini sih ga sederhana karena ada form submitnya segala hihi…
Okelah sementara anda renungkan dan pahami dulu mengenai desain layout diatas, karena artikel berikutnya akan masuk pada penulisan coding. Udah mulai serem nih kayaknya hehe… Kita akan menuangkan coding kedalam berkas style.css dan index.html silih berganti, coding inilah nanti yang berjasa mewujudkan layout landing page seperti diatas.

Bersambung…

Author: Agie

Semoga bermanfaat 🙂

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

13 Comments

  1. ade alfay

    hahaha untung ga kejebak gambar pemandangan….
    baru tahap 2 udah mulai lieur nih…
    tapi tetap semangat… 🙂

  2. Tini Sah

    waaaah, ternyata ada ilmu baru nich………,
    Jadi tertinggal……
    belajar…………….ah…., Thank ilmunya ya Pak Agi

So, what do you think ?