Tips Untuk Desainer Grafis Terjun

ke Dunia Web
Mereka yang kerkecimpung di dunia web sebagai web
designer tidak sedikt berasal dari profesi graphic
designer sebelumnya. Web designer yang memiliki pengetahuan
dan skill seperti yang dimiliki graphic designer tentu akan sangat
menunjang pekerjaan yang bersangkutan.
Walaupun pengetahuan dan skill yang dimaksud tidak perlu
sedalam pengetahuan dan skill yang dibutuhkan seorang graphic
designer dalam menyelesaikan pekerjaannya karena web dan print
mediamemang dua hal yang berbeda.
Namun karena prinsip prinsip desain pun applicable di
dunia web sehingga pengetahuan dan skilldesain seorang graphic
designer bisa sebagai bekal berharga untuk terjun ke dunia web
design.
Di artikel ini penulis mencoba berbagi sedikit wawasan tentang halhal yang perlu diketahui graphic designer yang tertarik terjun ke
dunia web.

Image

Image adalah elemen yang penting, image bisa menjadi bagian dari
informasi yg hendak disampaikan,image pun bisa sebagai ilustrasi
dari informasi yang disampaikan. Namun
kebutuhanimage pada website tidak sebagaimana di dunia graphic
design. Tidak membutuhkan image dengan resolusi tinggi,
hanya image dengan resolusi 72ppi dengan ukuran lebar optimal
kurang dari 1000px.

image resolusition untuk website

Ukuran file sebuah image menjadi pertimbangan penting di web
design, karena halaman web beserta image di dalamnya harus
di download terlebih dulu sebelum sampai dan terlihat di layar
komputer. Ukuran file yang kecil tentu akan membutuhkan
waktu download lebih singkat daripada ukuran fileyang lebih besar.
Dengan demikian image file yang kurang dari 100kB adalah pilihan
logis bagi web designer untuk memangkas waktu download.

Berbeda dengan graphic design yang berorientasi pada hasil desain

yang bagus, artistik, resolusi tinggi 300ppi, hasil cetak yang tajam.
Hal ini tentu menuntut file size besar, sebuah pamflet berukuran
15cm X 20cm yang dibuat di Photoshop file sizenya mencapai
puluhan megabyte adalah hal biasa.

Display
Di dunia graphic design output yang dihasilkan adalah untuk dicetak
(print media). Brosur, pamflet, poster, spanduk, papan iklan yang
mereka desain berakhir di mesin cetak/printer.
Sedangkan imageyang ada di website akan dilihat di layar
komputer, tablet, smartphone atau device lain yang bisa terhubung
ke internet.

Komputer, Tablet dan Smartphone

Website Layout

Ukuran artwork yang di tetapkan seorang graphic designer di

Photoshop atau aplikasi lainnya saat memulai proses desain akan
dicetak dengan ukuran yang sama. Sebuah artwork brosur dengan
ukuran A4 yang dibuat di Photoshop akan dicetak dan
menghasilkan brosur dengan ukuran A4 juga.

layout halaman web dilihat dari browser

Bagaimana dengan website? Karena website akan ditampilkan di
layar komputer, tablet atausmartphone dimana unit ukuran layar
dihitung berdasarkan pixel maka tidak ada ukuran absolut yang
didapatkan sebagaimana ukuran media cetak. Ukuran
halaman website yang dilihat di layar komputer adalah ukuran relatif
terhadap resolusi layaran komputer dimana halaman web tersebut
ditampilkan. Ukuran halaman web yang dibuat 1024px X 500px
maka akan tampak berbeda di satu layar komputer dengan layar
komputer lainnya, karena sangat tergantung dari berapa resolusi
layar komputer yang digunakan :

resolusi 1280px X 720px atau lebih : maka yang tampak di layar

komputer adalah halaman websitedengan bagian kanan kiri halaman
tampak kosong

resolusi 1024px X 768px : maka yang tampak di layar komputer

adalah halaman website full screen, halaman web tampak besar dan tak
ada ruang kosong di kiri-kanan

resolusi 800px X 600px : maka yang tampak di layar komputer

adalah halaman website yang terpotong di sisi kanan layar, karena lebar
layar 800px tak mampu menampung halaman web yang hendak
ditampilkan dengan lebar 1024px, untuk
itu browser menampilkan horizontal scroll di bagian bawah layar

HTML, CSS
Graphic designer dalam men desain artwork berhadapan dengan
kanvas yang ada di aplikasi yang mereka gunakan, katakanlah
Photoshop. Mereka bisa melakukan apapun di kanvas ini dalam hal
ide ide desain. Bagaimana dengan desain halaman web?
Seorang web designer akan berhadapan dengan kode
kode HTML, CSS. Mereka akan menyusun kode HTML terlebih dulu
sebagai konstruksi halamanweb, menyusun dan membangun
kode CSS untuk mengatur layout, warna, teks, font, image yang
akan ditampilkan di halaman web. Mereka mendesainnya melalui
kode HTML dan CSS. Artinya cara web

designer mendesain artwork di Photoshop akan banyak berbeda

dalam hal teknis maupun prosedurnya saat mendesain
halaman web nantinya.

kode HTML

Interaktif
Website adalah media interaktif, terjadi interaksi antara user
dan website berupa klik atau scrollingdalam pemanfaatannya.
Berbeda dengan print media, semua informasi disajikan dalam satu
halaman dan berusaha menarik perhatian khalayak lewat desain di
halaman tersebut dan tentu tanpa interaksi. Sementara mendesain
halaman web tidak hanya mendesain satu halaman web itu saja
tapi satuwebsite secara keseluruhan. Web designer pun harus
memikirkan cara bagaimana agar user tetap betah berada di
halaman web tersebut, menjalin semua informasi yang ada di
halaman web yang berbeda-beda tapi tetap utuh dalam

satu website, memastikan user akan kemudahan beralih dari satu

halaman web ke halaman web lainnya. Harus juga memikirkan
agar user tidak bingung dengan struktur halaman web yang ada.

user click (ilustrasi oleh intraktive.com)

Dengan demikian graphic designer harus terbiasa dengan kondisi
ini, yang tadinya biasa dengan satu halaman artwork beralih ke
sekumpulan halaman web di dalam suatu website.