Tugas & Pekerjaan Seorang Web Designer

Masih banyak yang mempermasalahkan lingkup pekerjaan web designer dan web developer, khususnya yang saya amati yaitu di negara kita Indonesia. Di forum, di kehidupan nyata baik itu dikantor atau di warung-warung atau cafe saat para pekerja web sedang berbincang-bincang, topik tentang skup kerja seorang web designer dan apa tugas web developer masih jadi perbincangan seru.

Permasalahan utamanya sebenarnya hanya satu, web designer hanya mau membuat desain di Photoshop dan tidak mau menyentuh hal-hal berbau kode, sedangkan programmer hanya mau menyentuh kode dan tidak mau tau urusan desain, buat programmer yang penting sediakan template nya nanti digabungkan dengan koding back-end nya baik dengan PHP, Ruby on Rails atau Java.

Web designer tidak mau menyentuh web editor, Web programmer tidak mau menyentuh aplikasi seperti Photoshop?

LALU SOLUSINYA BAGAIMANA?

Kalau sama-sama tidak mau mengalah seperti itu bagaimana kalau kita tambah saja satu istilah pekerjaan lagi di dunia web ini, kita sebut saja:

TUKANG SLICING PSD ke HTML & CSS

Jadi dia yang menjembatani antara web designer dan developer yang sama-sama egois itu. HAHAHA Terlalu naif rasanya. Sangat berlebihan jika melakukan slicing saja harus ada orang lain lagi, mengingat istilah web designer itu sebenarnya sudah sangat jelas.

Sebagian web designer biasanya membatasi pekerjaannya hanya untuk fokus pada pembuatan desain. Desain apa? desain web atau desain layout untuk brosur, poster, spanduk, pamflet, kartu undangan atau kartu nama? yang semuanya nanti akan di cetak?

Padahal sebenarnya skup pekerjaanya sudah jelas, wikipedia menulis seperti ini

The web designers are responsible for the visual aspect, which includes the layout, coloring and typography of a web page. Web designers will also have a working knowledge of using a variety of languages such as HTML, CSS, JavaScript, PHP and Flash to create a site, although the extent of their knowledge will differ from one web designer to another ~ Wikipedia

TUGAS-TUGAS WEB DESIGNER

Kalau berbicara soal web designer, maka jelas pekerjaannya adalah membuat desain sebuah website, desain tersebut akan dibuka atau dinikmati pada sebuah layar seperti layar komputer, layar handphone, layar tablet, desain web bukan desain yang nantinya akan dicetak seperti brosur, poster, banner, atau cover majalah karena itu pekerjaan seorang graphic designer. Tentunya ini sangat berbeda, dari medianya pun sangat berbeda, graphic designer pekerjaannya lebih dominan ke pembuatan desain untuk media cetak, sedangkan web designer hasil pekerjaanya akan di buka di sebuah layar monitor.

Merancang Konsep Layout (Wireframing)

Tugas pertama web designer adalah membuat rancangan layout website, rancangan layout ini bermacam-macam, ada yang sekedar membuat wireframe dengan coret-coret di kertas atau dengan tools untuk membuat wireframe lainya seperti balsamiq atau Mockingbird, ada yang cukup membayangkan di otak dan langsung membuatnya di photoshop, ada yang langsung di browser.

Merancang Layout Secara Visual

Setelah membuat rancangan layout dalam bentuk wireframe, selanjutnya tentunya membuat bentuk visualnya, bisa di photoshop, firework atau gimp.

Disini web designer bisa menyalurkan ide-idenya dalam membuat setiap elemen yang ada di website, memberi warna, menempatkan gambar dan lainya.

Web designer tentunya harus punya penjelasan-penjelasan tentang desain yang dia buat, biasanya ini terdokumentasi lengkap, kenapa memilih warna tertentu, font apa yang digunakan, dan lain sebagainya.

Konversi Layout Visual ke HTML dan CSS

Tampilan visual saja belum cukup, untuk bisa dibilang sebagai desain sebuah website maka tampilan visual tersebut harus bisa dijalankan dan harus berfungsi dengan baik jika dibuka pada sebuah web browser. Untuk itu tentunya dibutuhkan proses konversi dari file Photoshop, Firework atau Gimp kedalam bentuk HTML dan CSS agar bisa dijalankan dengan baik di Web Browser. Biasanya dikenal istilah Slicing, karena sebagain besar desain web dibuat dengan photoshop.

Pada bagian ini web designer memotong-motong desain visual yang sudah dibuat menjadi potongan-potongan gambar. Gunanya tentu agar gambar yang digunakan pada website nantinya tidak besar dan memberatkan, selain itu kegunaan memotong-motong gambar yaitu agar bisa menentukan bagian mana saja baik tulisan atau gambar yang nantinya bisa dibuat dinamis dan bagian mana yang hanya statis.

Membuat Susunan Markup (HTML)

Tugas web designer setelah proses slicing tersebut adalah mengatur tata letak elemen-elemen yang ada di sebuah website sesuai dengan bentuk visual yang sudah dibuat sebelumnya, untuk mengatur tata letak tentunya dibutuhkan pengetahuan akan bahasa markup, yaitu HTML (Hypertext Markup Langugage) jadi web designer harus mengerti HTML, sekarang bahkan sudah HTML5.

Kenapa harus mengerti bahasa markup? sekali lagi karena desain yang dibuat itu nanti akan dibuka disebuah layar monitor dengan menggunakan web browser, bukan untuk di cetak. Jadi web designer harus bertanggung jawab memastikan desain yang dibuatnya bisa tampil baik di browser tersebut, bukan hanya satu browser, tapi ada banyak browser yang digunakan, jadi kompatibilitas tampilan di setiap browser juga menjadi tanggung jawab web designer, jadi web designer harus paham juga istilah web standard, pemahaman akan web standard ini tentunya akan sangat membantu ketika dia merancang web secara visual di photoshop, dengan paham kompatibilitas browser dia akan sangat berhati-hati dalam membuat desain, jangan sampai apa yang dibuat ternyata menimbulkan hasil yang berbeda jika dilihat di browser yang berbeda.

Kenapa web designer yang menyusun markup? karena web designer lah yang paling mengerti bagaimana seharusnya desainnya bekerja pada sebuah web browser.

Mempercantik Markup Dengan CSS

Mengatur tata letak tidak cukup dengan HTML karena nanti jadinya sangat monoton, seorang web designer bertugas juga untuk mempercantik tampilan markup tersebut, tentunya untuk mempercantiknya dibutuhkan CSS (Cascading Stylesheet) yang memang pasangannya HTML, jadi web designer juga harus memahami CSS, karena dengan CSS lah nanti semua elemen yang ada di website akan diatur, seperti warna backround, bentuk teks, ukuran teks, lebar layout, jumlah kolom, dan lainnya. Tujuan akhirnya yaitu agar desain yang dibuat secara visual di Photoshop dapat serupa dengan tampilan di browser dalam bentuk HTML dan CSS.

Memberi Efek Tambahan Yang Diperlukan

Di zaman sekarang teknologi website semakin berkembang dengan hadirnya HTML5, CSS3, SVG, Jquery, dan teknologi lainnya. Semua teknologi itu tentunya untuk menunjang tampilan website, siapakah yang bertugas atas tampilan sebuah website? tentunya web designer, jadi web designer juga harus menguasai itu semua karena itu semua sangat penting untuk menunjang tampilan sebuah website.

Siapa yang bertanggung jawab berapa lama waktu delay dari sebuah slideshow? tentunya web designer, jadi web designer lah yang akan menentukan berapa waktu delay (jeda) munculnya slide pertama dan slide kedua.

Siapa yang bertanggung jawab atas tampilan website pada sebuah layar handphone? tentunya web designer, jadi dia harus mengerti penggunaan Media Query di CSS kalau mau websitenya tampil responsive. Atau dia harus mengerti istilah Fluid Layout jika websitenya ingin ada versi mobile tersendiri.

Memastikan kode sudah benar (Validation)

Tentunya kualitas kode juga harus diperhatikan, apakah kode yang dibuat sudah memenuhi standar atau belum, jadi kode-kode HTML yang sudah dibuat harus di validasi dengan tools yang ada seperti W3 Validator (http://validator.w3.org).

Revisi atau Update (Version Control | GIT)

Kadang saat tampilan sudah jadi dan sudah dikerjakan oleh web programmer, eh ternyata desainya ada yang kurang sempurna, ada kesalahan. Dan web designer harus membetulkan desain tersebut. Untuk kolaborasi antara web designer dan web programmer biasanya sebuah tim menggunakan software seperti Git,  jadi perubahan-perubahan yang sudah dilakukan oleh designer di push dengan Git, agar nanti jika terjadi kesalahan lagi tidak sulit untuk mengelolanya. Jadi web designer juga harus memahami penggunaan software seperti Git.

Selesai…

Setelah menjadi sebuah template HTML dan CSS secara utuh, lengkap dengan efek-efek yang digunakan seperti slideshow, dropdown menu barulah selanjutnya diserankan kepada web developer untuk diproses menjadi sebuah website yang dinamis hingga nanti website yang tadinya hanya beberapa halaman HTML akhirnya bisa menjadi sebuah website berskala besar yang memiliki ribuan sampai jutaan halaman.

Jadi sudah jelas pekerjaan web designer adalah membuat desain layout untuk sebuah website dan layout itu harus bisa bekerja dengan baik jika dijalankan pada sebuah web browser, semua pekerjaan diatas tidak harus dilakukan semuanya, kadang ada yang memulai dari wireframe, ada juga yang langsung mulai dari photoshop tanpa membuat wireframe karena semua ide sudah ada di otak, bahkan ada yang langsung membuat desain dari browser (design in browser) tanpa harus mendesain di photoshop karena teknologi web seperti CSS dan HTML sekarang sudah semakin canggih, semuanya sah-sah saja, dari manapun memulainya, intinya adalah pekerjaan tersebut harus bisa dijalankan pada sebuah web browser. Namun tentu akan lebih baik jika tahap-tahap tersebut diikuti dengan benar.

Pada pembahasan selanjutnya kita akan bahas Pekerjaan dan Tugas-tugas Web Programmer…