5 Langkah Awal Sebelum Memulai Pengkodean Front-End Website.

Bagi temen-temen yang telah berkecimpung di dunia pengembangan website, front-end web development merupakan langkah yang tak bisa ditinggalkan dari pengembangan website. Sisi pengembangan ini punya posisi penting dalam pengembangan website dan diserahkan kepada orang yang benar-benar ingin menekuninya. Hal ini disebabkan front-end web development merupakan langkah awal bagaimana desain diubah menjadi halaman web. Sistem kerja website akan berpengaruh pada langkah ini, karena langkah yang diambil oleh pengembang sistem atau biasa disebut back-end developer akan melanjutkan apa yang sudah dikerjakan oleh front-end web developer.

Pekerjaan ini membutuhkan ketelitian dalam prosesnya agar halaman web yang dihasilkan sesuai dengan kebutuhan dan harapan. Langkah yang dibutuhkan untuk mengembangkan front-end website bergantung pada desain yang dibuat dan kebutuhan website. Untuk itu, kami merangkum 5 langkah awal secara umum sebelum anda mulai melakukan pengkodean.

1. Review semua desain website

Sebelum temen-temen mulai membuka code editor, lebih baik review semua desain yang telah didapatkan. Perhatikan baik-baik layout dari tiap-tiap desain yang ada, baik itu tema warna, teks, gambar, dan elemen-elemen lainnya. Catat tiap-tiap bagian yang menurut kalian perlu pengerjaan lebih teliti. Tanyakan kepada desainer jika memang ada hal yang tidak dipahami. Buatlah daftar elemen-elemen yang sama. Biasanya desainer akan membuat beberapa elemen memiliki style yang sama seperti pada paragraf, link, header, button, atau panel konten.

2. Pengaturan nama direktori

Memang tidak ada standarisasi dalam memberi nama pada direktori. Namun hal ini menjadi penting ketika kita akan mulai mengembangkan sebuah website, penamaan direktori yang terlalu panjang atau penggunaan karakter yang rumit akan menyusahkan dalam pengkodean. Hal ini dikarenakan link pada kode HTML anda sangat berpengaruh terhadap nama direktori yang anda buat. Saya memberikan tips bagi temen-temen dalam mengatur direktori seperti gambar dibawah ini.

Pada gambar diatas terdapat folder admin yang digunakan untuk menyimpan dokumen yang terkait dengan Admin area, folder css untuk menyimpan dokumen css, folder fonts untuk menyimpan webfont, folder images untuk menyimpan gambar, folder js untuk menyimpan dokumen javascript.

Khusus untuk folder image, saya memberikan tambahan tips untuk mengatur direktori seperti gambar dibawah ini.

3. Web Font

Font pada website memiliki sisi keunikan tersendiri karena terkadang tidak semua font dapat tampil dengan baik pada web browser. Untuk itu, kita letakkan beberapa format font pada direktori website kita. Format-format tersebut terdiri dari eot, woff, ttf, dan svg.

EOT (Embedded Open Type) merupakan format font yang dikembangkan oleh Microsoft yang digunakan pada halaman web, sehingga tipe ini digunakan pada Internet Explorer. TTF atau True Type Font adalah format font yang paling banyak digunakan baik pada sistem operasi maupun web browser. WOFF atau web open font format adalah format font kompresi dari tipe font TTF dan OTF, yang menjadi format paling baru, dan kini menjadi rekomendasi dari W3C. Terakhir adalah tipe SVG atau Scalable Vector Graphic adalah format yang menyimpan gambar vector sehingga sebenarnya bukan merupakan format khusus untuk font, namun kita perlu menggunakannya agar website kita dapat tampil dengan baik pada iOS Safari versi 4.1 ke bawah.

Sebelum kita memulai langkah berikutnya, terlebih dahulu format web font sesuai dengan jenis huruf yang digunakan pada desain. Bila kita tidak mempunyai font tersebut kita bisa mendapatkannya di beberapa situs penyedia font, seperti https://www.fontsquirrel.com/, www.dafont.com, www.1001fonts.com, atau meng-embed link font dari https://fonts.google.com/. Setelah itu, kita ubah menjadi web font melalui website https://www.web-font-generator.com atau situs lain yang bisa mengubah font kita menjadi web font.

4. Mengambil Gambar

Pengambilan gambar dari sebuah desain PSD memang keliatan sepele, namun jika salah mengambil gambar hasilnya tidak akan sesuai. Yang perlu diperhatikan dalam pengambilan gambar antara lain, ukuran gambar, efek yang diletakkan pada gambar (shadow, border, color overlay), dan dimana akan meletakkan gambar tersebut. Contoh dibawah ini merupakan salah satu teknik pengambilan gambar yang memiliki color overlay.

Pada box merah diatas, terlihat salah satu item gambar memiliki color overlay. Melalui hal tersebut, desainer memberikan petunjuk bahwa saat mouse-over akan muncul box berwarna hijau dan icon play.

Untuk mulai melakukan slicing pada gambar dengan color overlay, cari layer image tersebut pada panel “Layers” yang terletak disebelah kanan bawah jendela kerja Adobe Photoshop.

Perhatikan box merah pada gambar layer diatas, terlihat bahwa gambar tersebut dipotong menggunakan teknik Clipping Mask. Pada kasus ini, kita bisa menggunakan fitur “Convert to Smart Object” pada Adobe Photoshop. Klik kanan pada Grup Image kemudian pilih “Convert to Smart Object”

Setelah itu, lakukan double-click pada hasil “Convert to Smart Object”

Apabila muncul kotak dialog seperti dibawah ini, klik “Ok”

Jika sukses, maka akan muncul tab baru hasil slicing gambar seperti berikut.

Pada tampilan hasil slicing gambar tampak bahwa ukuran gambar lebih kecil dari ukuran canvas. Untuk itu kita akan melakukan “cropping” dengan cara tekan tombol “CTRL” pada keyboard kemudian klik pada layer Bg. Setelah itu tekan tombol “C” pada keyboard. Secara otomatis, fitur cropping akan menyeleksi gambar tersebut.

· Selanjutnya tekan tombol “ENTER” 2 kali. Hasilnya gambar akan terpotong secara akurat seperti gambar dibawah.

· Langkah berikutnya adalah menyimpan file gambar yang telah terpotong dengan fitur “Save for Web”. Untuk melakukan itu, tekan tombol “CTRL” + “SHIFT” + “ALT” + “S”. Setelah itu akan muncul kotak dialog seperti dibawah ini.

Kita bisa menyimpannya dalam bentuk file “JPEG”, PNG, GIF, atau WBMP. Khusus untuk kasus ini, kita save dalam bentuk file “JPEG” saja.

5. Penggunaan Front-End Framework

Ketika anda menjadi seorang front-end web developer, dengan pekerjaan yang banyak dan membutuhkan waktu cukup panjang, penggunaan framework tentu akan sangat membantu. Terlebih lagi bagi anda yang berkolaborasi dengan kawan kerja untuk menyelesaikan proyek pengembangan website. Dengan menggunakan framework, kita tidak perlu lagi melakukan setting layout dari awal, membuat resetter css, atau membuat komponen yang membutuhkan kombinasi CSS + Javascript. Framework telah menyediakan itu semua dan mengemasnya menjadi sebuah produk dengan dokumentasi yang lengkap. Bagaimana? Cukup menarik bukan?

Ada banyak framework yang beredar di dunia front-end. Saya memilih 3 framework yang banyak digunakan oleh kalangan web developer, antara lain :

• Bootstrap

Framework yang dikembangkan oleh Mark Otto dan Jacob ini merupakan framework yang paling laris dikalangan front-end web development. Anda bisa mengecek detailnya di http://getbootstrap.com/

• Materialize

Materialize yang mengusung tema css berdasarkan material design juga framework yang bisa membantu anda dalam pengembangan website. Untuk mencobanya anda bisa mengunjungi http://materializecss.com/

• Foundation

Framework yang kini sudah mencapai versi 6 ini juga bisa menjadi alternative bagi anda yang ingin menggunakan framework css. Silahkan buka https://foundation.zurb.com/ untuk melihat penjelasan lengkapnya.

Terimakasih telah membaca tulisan saya. Jika di rasa bermanfaat silahkan 👏 & share. Tulisan selanjutnya akan lebih menarik, See ya. 😉