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)
Image by Eddie Lobanovskiy
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.
Image by Paresh Khatri
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
Image by Joshua Blankenship
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.
Image by Chris Bannister
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)
Image by Drew Neil
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.
Sumber :
http://www.tutorial-webdesign.com/tugas-pekerjaan-seorang-web-designer/
