Mesin kerja dari waktu ke waktu :’)

Sebagai front end / WordPress theme developer, umumnya klien gue adalah web desainer atau agency yang udah punya desain sendiri. Jadi mereka ngasih gue desain web dalam format .PSD yang lalu kemudian gue slice, tulis HTML-nya dan kalau yang bersangkutan butuh, gue jadiin WordPress theme biar bisa diintegrasiin ke WordPress. Selama dua tahun lebih berkutat seputar proses ini, ada dua masalah yang gue perhatiin sering kali muncul (FYI, kalo lu ngerasa asing dengan istilah ini ya wajar aja, dua istilah ini gue karang sendiri XD ):

1. Undesigned State

Nature web zaman sekarang udah komunikasi dua arah. Ada interaksi. Pengunjung web melakukan sesuatu, maka website-nya akan memberikan respon. Misalnya: pengunjung mem-posting komentar, melakukan pencarian, melakukan registrasi, dll. Yang sering terjadi: klien / web desainer hanya memberi desain dasarnya saja:

• Halaman home
• Halaman single article
• Halaman archive

Lah terus kalau button-nya di-hover bagaimana? Kalau link-nya diklik warnanya berubah jadi apa? Kalau melakukan registrasi tapi gagal bagaimana error message-nya harus ditampilkan? Kalau teks di-area tertentu panjang, bagaimana behaviornya?

Kalau interaksi-interaksi diatas ngga didesain, ya front end developer-nya jadi terpaksa ngarang dong. Pas diuji coba, baru muncul komplain eh kok yang ini tampilannya begini yah? Kok yang ini tampilannya begini ya? Dan kemudian gundukan revisi menanti :’)

Pesan moral untuk poin ini:

• Untuk klien yang nge-hire web desainer, jadilah lebih kritis. Begitu liat desain yang dikasih, coba bayangin bagaimana pengunjung akan berinteraksi dengan interface yang udah didesain. Lu udah bayar web designer mahal-mahal masa UI-nya ngga lengkap.
• Untuk web desainer, tolong interaksinya didesain juga dan buatlah hidup kami front end developer jadi lebih mudah :’)

2. Salah Desain

Poin kedua ini merujuk kepada desain yang ngga didesain pada tempatnya. Okelah secara visual desain webnya bagus, tapi kalo dipikir-pikir jatohnya lebih ke dekoratif dan secara fungsional tidak menyelesaikan masalah kan ngga oke juga. Beberapa contohnya:

• Desainnya bagus, tapi pas di-slice dan dibuat sprite-nya, ukuran dari gambarnya aja sampe 1 MB. Ya udah pasti lambat. Dan ketika kerasa lambat pas diujicoba, yang disalahin developer-nya *badummcessss*.
• Ngga hati-hati saat milih font. Sekarang implementasi @font-face udah lumrah sih, tapi perhatiin aspek legalitasnya ngga? FYI, selain legalitas beberapa font ngga siap dipake untuk @font-face. Ada yang kualitasnya jadi pecah lah, ada yang line-height-nya ngaco lah, dll.
• Ingin buat website yang support mobile browser tapi desainnya ngga mobile friendly. Contoh: clickable areanya terlalu kecil (Rekomendasi Apple untuk area untuk tap paling kecil itu 44 X 44 pixel. Coba baca Apple human interface guideline. ), lalu UI-nya terlalu bergantung pada kondisi hover sementara di touch interface ngga ada hover, dll.
• Ngebuat desain web ber-footer tapi kontennya make konsep infinite scrolling berdasarkan posisi window. Ya ngga akan bisa diakses footer-nya.

Mengenai masalah ini, gue pribadi sering menggunakan dalilnya Steve Jobs mengenai desain yang bagus: Design is about how thing works, not only about how thing looks.

***

Untuk saat ini baru dua hal itu aja yang cukup sering gue alami seputar front end web development. Ada yang punya pengalaman apa aja yang harus diperhatikan seputar front end development? I’d really love to hear that from you 😀