Hal - Hal Wajib yang Harus Disiapkan Sebelum Mendesain Sebuah Website

Hal penting sebelum desain website

Hal - Hal Wajib yang Harus Disiapkan Sebelum Mendesain Sebuah Website - Website seakan sudah menjadi dunia kedua kita setiap hari. Kita sering menghabiskan banyak waktu kita untuk mencari dan menggali informasi pada sebuah website. Selain itu kita juga bisa mencari hiburan dengan adanya website ini.

Tapi, pernahkan kamu terpikir untuk memiliki website sendiri ? Hal yang menurut Wikipedia adalah suatu halaman web yang saling berhubungan yang umumnya berada pada peladen yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi ini, selalu bertambah jumlahnya setiap hari.

Oleh karena itu peluang untuk menjadi seorang web designer begitu luas karena tingginya permintaan dengan jumlah pekerja yang minim. Oleh karena itu saya yang juga belajar bagaimana untuk mendesain sebuah website, akan memberi tahu sobat Otak Keren sekalian tentang Hal - Hal Wajib yang Harus Disiapkan Sebelum Mendesain Sebuah Website.

LANGKAH AWAL UNTUK MENDESAIN WEBSITE

Langkah yang harus kita ambil saat awal atau pertama kali setiap ingin mendesain sebuah website adalah kita harus memiliki ide. Yap, ide ! Ide kita nantinya akan mempengaruhi hasil bagaimana web kita nantinya.

Ide disini dibagi menjadi 2 kubu. Pertama adalah ide pokok. Ide pokok ini adalah ide yang mendasari tujuan website yang akan kita buat desainnya. Misalnya, saya ingin membuat website untuk dokumentasi hal menyenangkan di hidup saya. Itulah yang dinamakan ide pokok atau sederhananya adalah tujuan dibuatnya desain website kita.

Kedua adalah ide desain. Ide desain ini tentunya harus berhubungan dengan ide pokok tadi. Misalnya ide pokok saya seperti contoh diatas, maka tentunya ide desain saya adalah website yang penuh warna bahagia, warna cerah, bukannya justru berwarna gelap dan terkesan kelam.

LANGKAH SELANJUTNYA DALAM MENDESAIN WEBSITE

Jika langkah awal yaitu penentuan tema blog dan ide desain kita. Maka di langkah selanjutnya ini kita akan mulai memasuki tahap pengerjaan. Kamu bisa mendesain terlebih dahulu bagaimana tampilan dari website yang akan kamu desain.

Mendesain website ini bisa kamu lakukan menggunakan Photoshop atau Illustrator. Caranya adalah kamu setting bingkai atau canvasnya berukuran 1280 x 800 pixel dengan resolusi sesukamu untuk Photoshop. Atau di Illustrator kamu akan langsung diberi berbagai pilihan ukuran sebuah website, pilih saja yang paling besar agar proses pengerjaannya akan tampak nyata jika diimplementasikan kedalam barisan code.

Ngomong - ngomong soal code, Photoshop dan Illustrator sama - sama menawarkan kemudahan dalam hal mendesain website. Pertama adalah file PSD hasil desain website kamu di Photoshop bisa langsung diekstrak langsung code CSS nya menggunakan Dreamweaver. Tapi, hasilnya kurang sependapat karena adanya perbedaan container antara hasil dan maksud kita.

Baca Juga: Cara Menjadi Web Developer

Buat kamu yang tidak punya Dreamweaver, kita bisa juga mengekstrak code CSS dari gambar yang kita buat di Illustrator. Hal ini tentunya lebih nyaman karena aplikasi tidak langsung menghubungkan dengan container kita pada HTML, Illustrator hanya memberi code CSS saja, jadi penempatannya pada HTML masih bisa kita atur.

MENYUSUN CODE UNTUK MENDESAIN WEBSITE

Nah, jika kamu sudah selesai mendesain maka langkah selanjutnya adalah kita akan menyusun code untuk HTML dan CSS kita untuk desainnya. Sementara di postingan ini akan kita bahas HTML dan CSS saja, karena hanya berhubungan dengan Desain Website bukan fungsi komponen website.

Langkah paling awal agar mudah mendesain website nantinya adalah code HTML yang terstruktur. Maksud terstruktur disini adalah kamu buat terlebih dahulu 3 komponen utama website dalam masing masing <div>, 3 komponen utama tersebut adalah Header, Body dan Footer.

Kamu bisa menggunakan id sebagai penanda mereka ber tiga, atau kita bisa manfaatkan fitur tag baru HTML5 yaitu <header> , <article> , dan <footer> . Kamu juga bisa tambahkan <aside> nantinya jika komponen yang kamu buat terasa kurang.

Susun komponen dasar tersebut berurutan dari yang paling atas yaitu Header sampai paling bawah yaitu Footer. Kemudian setiap kamu menambahkan elemen pada div tersebut janga lupa berilah tab diawal. Fungsinya indentasi ini agar kamu mengerti letak tag buka dan tag tutup container agar tidak ada salah posisi dalam penempatan elemen. Contohnya adalah seperti gambar ini, gambar ini adalah code saya sendiri.

Penulisan HTML yang rapi

Gimana sob, HTML kamu sudah rapi ? Sekarang waktunya membuat file CSS nya ! Buat file CSS baru dan <link> ke HTML yang sudah kamu buat tadi. Selanjutnya kita akan buat CSS kita menjadi rapi lagi dan tentunya mudah dicari dan gak bikin pusing.

Baca Juga: Membuat Tabel Responsif dengan HTML dan CSS

Pertama, kamu susun selector pada CSS untuk setiap bagian HTML kamu. Susun dengan urut dan biarkan atributnya kosong. Setelah selesai maka kamu sudah bisa langsung memasukkan code styling CSS kamu, Jangan lupa setiap tanda semicolon tertulis, tekan Enter untuk membuat garis baru dan mencegah pikiranmu pusing mencari atribut jika ada ketidak sesuian. Contohnya seperti milik saya ini.

Penulisan CSS yang rapi

KESIMPULAN

Beberapa Hal Wajib yang Harus Disiapkan Sebelum Mendesain Sebuah Website yang telah saya tuliskan diatas cukup ampuh untuk menghindari pusing saat coding.

Memang penulisan yang rapi akan membawa programmer seperti membaca buku fabel ketimbang membaca code yg tidak rapi, maka akan terasa seperti membaca fabel di tengah proyek pembuatan bangunan. Dengan kata lain codenya menyenangkan tapi si programmer merasa kesulitan.

Contoh Layout dan Positioning HTML dan CSS

Jangan lupa dipraktekkan ya cara saya dalam mendesain sebuah website. Gambar diatas adalah hasil kerja saya seharian ini. Postingan ini ditujukan terutama buat kamu yang baru, iya kamu sobat Otak Keren.

Otak Keren