Selamat Datang

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.

Blueprint

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)

Git Branch

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.

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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

19 thoughts on “Tugas & Pekerjaan Seorang Web Designer

  1. ilham says:

    Artikel yang menarik!

    Sejak pertama terjun sebagai web programmer, saya mengalami kesulitan banyak dlm hal design. Teman yang lebih senior bilang, seharusnya coding dan design memang dipisah. Gak dicampur seperti yang saya kerjakan sekarang di kantor. Saya dituntut utk bisa semua (termasuk web design). Karena harus konsen di core nya, akhirnya saya pake twitter bootstrap. Tapi memang belum memuaskan. Sepertinya perlu ngelmu web designing lebih banyak di situs ini.

    Thanks ya..
    Artikel ini bikin saya jadi terinspirasi untuk belajar lebih dalam tentang web design :D

  2. Saya masih perlu banyak belajar mengenai web desaign. Untuk kali ini saya off dulu belajar mengenai PHP dan CSS, rumit banget Mas PHP.nya

  3. gerald says:

    Di tunggu om lanjutanya, menarik buat di baca, apalagi di indonesia masih banyak yang ga bisa bedain mana desain web dan web developer. kalau udah ada orang terlanjur bikin web design terus develop sendiri ya derita orang itu, tapi alhasil jadi nambah pengalaman :D

  4. Ya, awal mula saya bekerja memang sebagai web programmer (php), yang bisa membuat layout html secara kasar. Namun seiring berjalannya waktu, saya beralih menjadi website desainer (css, jquery, html) dan saya lebih memilih yang sekarang. Yang menurut saya kehidupan di desain lebih hidup. Saya bisa mengatakan ini, karena saya sudah menjalani kehidupan sebagai programmer :)

    Jadi menurut saya, sebaiknya memang bisa semua ya, baik program maupun desain. Begitu menurut saya.

  5. dirga says:

    menurut saya, untuk Merancang Konsep Layout (Wireframing) adalah pekerjaan orang product.
    Tambahan juga untuk yang user interaksi juga seharusnya adalah pekerjaan orang product, desaigner dan engineer nantinya cuma ‘menggoreng’ sebuah product yang telah ada rancangan design dan engineer akan membuatkan code.

    • Untuk di perusahaan sekala agak besar benar seperti itu mas dirga, tapi di nyatanya di negara kita semua agar bercampur aduk, mungkin kekurangan orang karena kekurangan modal :)

  6. Hahahaha artikel yang menarik…
    Sepnajang jalan karir saya selama 5 tahun lebih dalam web development di Indonesia ini semuanya itu dibutuhkan, pertama kali terjun sebagai web junior di perusahaan kecil, ya musti mockup, slicing, sampe coding dan marketing digital… Ya dari situ semua saya bisa semua deh hehehehe :D walaupun musti belajar lagi. 3 tahun lalu saya menjadi web programmer senior dengan CI, dan sekarang saya menjadi web designer / frontend developer dan bukan hanya slicing dan css aja web designer juga perlu client script lainya kaya JS, Coffe Script, Backbone dll, sampe animasi SVG wkwkwkwkw intinya adalah kita harus terus belajar terus!!

  7. Saya fikir tugas web designer yaitu membuat gambaran awal suatu website dan segera menvisualisasikan ke dalam html . Saya baru tahu ada orang perograman yang spesifik , Terimakasih buat kata “SLICING” saya lagi belajar hal itu saya cuman bisa sekedar mendesign :) saya mau belajar seluruhnya :)

  8. Kalo saya sendiri kerjaannya “tukang slicing PSD to HTML & CSS” itu.. Tapi tetep aja di sebutnya web designer.. Padahal saya kurang ahli dalam membuat mockup PSDnya di photoshop :v

  9. kalau perbedaan antara layout dan design apa,bang?

  10. Bams says:

    Wah ternyata berat juga ya tugas pekerjaan untuk seorang web designer, tapi sebandinglah dengan uang yang didapatkan :)

  11. […] – Baca juga: Tugas & Pekerjaan Seorang Web Designer […]

  12. Owalah, saya dulu mengira kalo web designer dan web programmer itu sama. Untuk artikel tentang tugas dan pekerjaan web programmer saya tunggu, lho.
    :-)

  13. Ridwan says:

    Ternya memiliki tugas dan fungsinya masing” ya dikirain web design bisa sekaligus menjadi programer web juga dari awal pengerjaan hingga akhir. informasi yang sangat bagus sekali terimakasih infonya..

  14. Putri says:

    Di tunggu om lanjutanya, menarik buat di baca, apalagi di indonesia masih banyak yang ga bisa bedain mana desain web dan web developer. kalau udah ada orang terlanjur bikin web design terus develop sendiri ya derita orang itu, tapi alhasil jadi nambah pengalaman :D

  15. sayadi kerjaan merangkap juga sebagai web desain gan , dan pekerjaan saya lebih banyak membuat editan gambar di PS , dan saya upload di fb , lalu saya di suruh membuat program kerja , apa saja yah ? saya bingung

  16. elang says:

    thanks cara dasar nya aku bisa tinggal ke konversi css nya aja

  17. Yadin says:

    jadi pengen belajar nih gan

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development