Tips

Website adalah jendela digital informasi yang terhubung dengan jaringan internet yang dapat di akses kapan saja dan dimana saja tanpa batasan waktu. Hal yang mendasar dari website adalah isi konten dan tampilan yang menarik, sehingga pengunjung website menjadi betah dan nyaman saat membaca informasi yang di sajikan.

Untuk membangun sebuah website yang menarik dan kreatif dibutuhkan beberapa hal yang mendasar salah satunya adalah desain konsep atau mockup, referensi desain material dan framework css. Ada sebagian developer web desain pemula yang ingin membangun sebuah website tanpa ada mockup atau coretan desain manual yang dibuat sehingga terjadi miss saat sudah tayang di internat mengakibatkan banyak ubahan ubahan yang terjadi saat live.

Berikut ini tips tahapan persiapan membangun sebuah website agar tampilan menarik dan kreatif

Desain Mockup

Desain mockup adalah tampilan website berupa gambar atau model yang dibuat melalui aplikasi photosop, gimp atau manual menggunakan pena dan pensil yang di gambar diatas kertas. Jika anda belum mahir mendesain menggunakan software, disarankan menggunakan pensil kemudian di tulis bagian bagian terpenting seperti bagian header, menu, body, konten, list, image dan bagian footer.

Ide mendesain mockup tidak harus sepenuhnya dari pemikiran kita, bisa saja berbagai contoh desain website yang sudah ada di internet untuk dijadikan tambahan informasi konsep yang akan dibuat. Perlu di ingat, sebelum mendesain mockup terlebih dahulu tentukan kategori website yang akan di buat, contohnya membuat mockup website berita seperti contoh di bawah ini :

Halaman Depan 

• List berita terbaru 
• Berita pilihan redaksi yang di tampilkan di timeline utama
• Kategori berita dengan menampilkan list beritanya
• List berita populer
• List berita trending
• Menu kategori berita
• Menu untuk login dan registrasi 
• Penempatan iklan yang sesuai
• Menambahkan list berita dengan mode thumbnail agar lebih menarik

Halaman Detail

• Menampilkan isi detail dengan menambahkan gambar
• Penempatan objek gambar detail dengan ukuran yang besar 
• Menampilkan list berita terkait
• Menambahkan komponen sosial media untuk kebutuhan share dan like
• Menambahkan komponen komentar 
• Menambahkan list berita lain yang relevan
• Penempatan iklan yang sesuai agar konten tidak terganggu

Pemilihan Framework CSS

Framework CSS merupakan salah satu program yang membantu untuk mendesain tampilan dengan berbagai komponen list, gambar, thumbnail, icon dan layout seperti Bootstrap, Uikit, Materialize dan masih banyak lagi. Framework CSS biasanya menyediakan dokumentasi mengenai kebutuhan tampilan dan fitur fitur css yang dapat digunakan. Gunakan framework css yang tepat sesuai dengan komponen layout yang dibutuhkan agar tidak menjadi mubazir.

Framewokrk CSS biasanya hanya sebatas komponen layout dan tampilan standard, biasanya bagi developer website menambahkan style sendiri untuk meruban dan menambah komponen serta pemilihan warna yang sesuai agar lebih menarik.

Uji Coba Tampilan

Setiap melakukan develop web desain yang dibuat jangan lupa menguji desain tampilan dengan berbagai jenis browser yang sering di gunakan seperti Mozilla Firefox atau Google Chrome, agar kita tahu apakah desain dan framework css serta style yang di gunakan berjalan sesuai harapan yang di inginkan.

Demikian informasi ini kami sajikan, Semoga bermanfaat