Kulgram Desain IGD #9 - Belajar Trik Dasar Desain Web - Rio Purba

10:06 AM



Malem guys.. jadi kita perkenalan aja dulu kali ya..

biar agak nyantai dan gak terlalu serius

Pertama2 makasi buat Tuhan yang Maha Esa, udah ngasi kekuatan dan kesehatan sampai hari ini bisa masih bisa kumpul walopun via app dengan kalian para desainer2 tangguh Indonesia. Yang kedua makasi buat temen2 di IGD yang udah ngasi kesempatan aku untuk ngisi kulgram kali ini. Kulgram kita kali ini nyantai aja ya.. Dan kalo ada yang mau interupsi buat kasi masukan ataupun koreksi dari materi yang bakal kita bahas nnti, aku terbuka kok.. Karena pengetahuan kita berbeda2, mungkin ada yang aku tidak tahu tapi temen2 tahu.. jadi temen2 bebas kasi pendapat dan koreksinya nnti..

Aku mulai karir sebagai seorang freelance designer pertama kali di tahun 2012, fokus ku dulu adalah di design branding. DIsitu aku mulai ngontes di 99designs. Dan bulan agustus 2012 aku dapat client pertama dari situ. Bahkan aku dikontrak hampir satu tahun untuk membranding perusahaan client aku itu.. karena pada waktu itu perusahaan nya masih baru merintis. Dan sekarang perusahaannya sudah jauh berkembang, sudah ada beberapa cabang di Bedford Amerika. Nah, 2 tahun terakhir ini aku malah lebih banyak ngambil project UI/UX seperti desain website, mobile apps, web apps, dsb.. Hampir gak pernah lagi megang branding. Dan kali ini kita gak membahas mendalam tentang UI/UX, kita hanya ambil subtopiknya yaitu desain website, itu pun hanya trik dasarnya.. Mudah2n dengan sharing trik dasar ini, temen2 jadi termotivasi untuk lebih explore lagi mengenai desain website.

Ini adalah beberapa contoh kerjaan aku sekarang



Okay, sekarang kita masuk ke materi : Belajar Tips Dasar Desain Website



Banyak yang tanya ke aku, “bang kalo desain website itu harus belajar koding dulu ya?” jawabannya TIDAK. Gak harus. Kalo kita belajar koding dulu, baru belajar desain website, pasti bakalan gak jadi itu belajar desain websitenya. Karena kita udah pusing dibuat script2 kodingnya.. Memang menjadi suatu kelebihan apabila kita mengerti dasar2 dari script HTML, CSS, atau JS tersebut. Sehingga kita mengerti website seperti apa yang mau kita buat.. tapi itu tidak menjadi “keharusan" apabila kita masih dalam “tahap belajar”. Jadi solusinya? Kita cari tahu dengan learning by doing. Jadi sewaktu kita mendesain website, kita bertanya ke diri sendiri, "ini kenapa lebar kerangka websitenya harus 960px?” atau “body itu apa? atau header itu apa?” misalnya seperti itu.. jadi dari situ timbul rasa penasaran, terus kita cari tau di internet, nah ternyata website itu seperti ini, oh ternyata website itu punya grid system, oh ternyata begini.. nah dari situ pelan2 bakal mengerti dasar2 dari website, begitu sih..


Website itu punya grid system

Nah, sekarang ini beda dengan dulu.. kalo dulu orang mengakses internet itu hanya dari desktop aja. Nah sekarang jamannya udah beda.. Semua serba mobile. Orang mengakses internet dari genggaman mereka. yap dari sebuah smartphone atau tablet.. Hal ini tentu mempengaruhi dunia desain website dong.. Karena yang dulunya diakses dari layar yang lebar, sekarang malah website2 diakses dari layar yang kecil. Nah disinilah muncul istilah Responsive Website. Jadi ketika kita mendesain website yang responsive, kita butuh yang namanya GRID atau kolom. Kalo didesktop standardnya itu ada 12 grid kolom dengan lebar 960px (itu biasanya, ada juga yang 16 kolom). Jadi content2 website tersebut bakal kita susun berdasarkan kolom2 yang udah ada. Nah ketika kita mendesain di layar smartphone yang hanya 4 grid, kita tinggal susun tuh grid2nya.. Silakan lihat ilustrasi di bawah ini..


Nah ini contohnya. Disebelah kiri adalah grid pada desktop, di sebelah kanan ada grid untuk mobile

jadi disitu terlihat bahwa bukan ukuran contentnya yang dikecilin, tapi lebih kepada layouting aja.. Kalo di desktop kolomnya ada 12, sedangkan di smartphone ada 4, jadi tinggal kita atur aja posisinya.. Dan kolom ini hanya untuk memudahkan aja sih.. Ada juga temen2 senior aku yang gak pake 12 kolom. Dia hanya pake3 grid aja, di samping kiri kanan ada 2 garis dan di tengah ada 1 garis.. Itu tergantung desainernya aja sih. Pokoknya grid system ini hanya untuk memudahkan kita mendesain sebuah website yang responsive. Dan juga si developer atau programmer yang mendevelop desain website kita juga akan lebih terbantu..

Nah ini juga ada GIF menarik. Anggaplah kepala itu sebagai wrapper atau pembungkus kerangka website kita, dan mata, hidung, mulut itu sebagai content website kita.. jadi responsive itu hanya seperti mengubah tata letak content kita agar sesuai dengan ukurang layarnya.. BTW, Grid system ini bisa temen download kok. Googling aja dengan keyword “960 grid system” atau “1200px grid system”.


2. c Export Image dengan Save for Web

Nah, ini sering missing. Banyak diantara starter yang lupa akan hal ini. Kadang mereka save gambar atau object yang bakal ditampilin diwebsite dengan kapasitas/size yang besar. Hal ini akan membuat website kita (ketika sudah di develop oleh si developer atau programmer) karena nanti loading website kita jadi lama.. Karena size dari gambar kita terlalu besar.. Jadi kita harus kompres setiap gambar2 yang bakal kita tampilin diwebsite dengan cara Save for Web (di Photoshop) CTRL + ALT + SHIFT + S.

Kalo di Sketch App kita bisa atur kualitas gambarnya sewaktu kita export..

ok lanjut ya..


2. d. Font yang digunakan

Nah untuk ukuran body font yang digunakan pada website, itu sekitar 12pt - 16pt (berdasarkan pengalaman saya). Dan untuk judul atau Heading, temen2 bisa menaikkan ukurannya sesuka hati.. Tapi ada beberapa teori yang sering juga aku coba, yaitu ukuran body nya dikalikan angka golden ratio yaitu 1,618. Jadi misal kalo ukuran bodynya 14pt, maka headingnya 14pt *1,618 = berarti 22pt. Begitu selanjutnya.. Memang ini bukanlah hukum pasti, tapi aku sering coba di beberapa project aku hehe

Dan untuk situs2 download font yang aku rekomendasikan adalah google font dan fontsquirrel. Dan jangan lupa baca lisensi fontnya apakah bisa dipakai/dipasang untuk web dan applikasi atau tidak.

ok kita lanjut lagi..


2 e. Pewarnaan / Color Pallete

Nah untuk pewarnaan temen2 bisa lihat banyak referensi di dribbble, atau pinterest. Tapi kalo temen2 mau nentuin pewarnaan sendiri, silakan pakai tools Adobe Kuler. DIsitu temen2 bisa dibantu untuk membuat pewarnaan analog, monochromatic, atau complementary, dsb sesuai dengan style dari project temen2. Atau temen bisa coba juga colorblender.com . Di situs ini temen2 bisa nentuin satu warna utama, misalnya warna biru (R=56, G=128, B=244). Nah temen2 tinggal masukin tu nilai RGB nya, kemudian situs ini akan secara otomatis memberi saran warna2 yang sesuai dengan warna utama kita. Nah ada lagi situs yang lebih edan dari kedua situs di atas, yaitu coolors.co . Situs ini akan secara acak men-generate color pallete. Temen2 tinggal pilih aja color pallete sesuai dengan style project temen2.

PS. untuk adobe kuler, temen2 bisa langsung googling aja..

Okay,, itu tadi udah kita bahas ..
Bag. 1 - Perkenalan
Bag. 2 - Apa2 aja aturan dasar desain web..

Kita lanjut?

Ok kita lanjut ke bagian ketiga

a. Pertama, Sering2 liat inspirasi di dribbble, behance, dan pinterest.
Hal ini memang bener. Semakin sering kita melihat2 inspirasi desain2 website yang bagus dari situs2 tersebut, otak kita akan semakin terbiasa. Sehingga ketika kita mendesain, otak kita bekerja dengan apa yang biasa kita lihat tersebut.


3. Cara Cepat belajar Desain Web?

a. Pertama, Sering2 liat inspirasi di dribbble, behance, dan pinterest.
Hal ini memang bener. Semakin sering kita melihat2 inspirasi desain2 website yang bagus dari situs2 tersebut, otak kita akan semakin terbiasa. Sehingga ketika kita mendesain, otak kita bekerja dengan apa yang biasa kita lihat tersebut.

b. Follow akun Instagram inspirasi desain2 website
Nah sekarang banyak tuh akun2 instagram yang membagikan iinspirasi2 desain website. silakan follow aja beberapa.. Diantaranya ada uidesignpatterns, uitrends, thebeeest dll..

c. Plagiat desain2 yang udah ada
WHAATTTTT??? Gak bener nih ajaran si Rio. Eitttss tunggu dulu guys,, kita lihat konteks nya dulu.. Ini adalah untuk learning purpose.. untuk pembelajaran. Jadi kalo untuk pembelajaran, it’s fine.. silakan aja plagiat desain2 yang udah ada.. bisa juga plagiat situs2 besar seperti facebook, twitter.. Artinya, coba kita desain sendiri situs facebook.. nah kalau sudah mulai mahir, kita mulai tingkatin levelnya.. Coba buat situs Facebook yang menurut kita lebih baik dari versi sekarang, trus stylenya kita buat yang beda.. setelah itu kita upload ke portfolio kita di behance misalnya.. Siapa tahu kita bisa dapet project dari situ. Ya kan? 🙂

d. Buat Moodboard di Pinterest
Nah moodboard itu bisa dikatakan kumpulan referensi dan inspirasi tentang apa yang mau kita buat.. Jadi misalnya kita mau buat desain website portfolio pribadi misalnya.. Kita langsung ke pinterest, silakan cari referesi sebanyak mungkin tentang desain website portfolio, kumpulin semua ke dalam sebuah pinterest board. Nah setelah itu, dari semua inspirasi tersebut, coba kita buat sesuatu yang baru.. Gak masalah kalo kita gabung2kan antara style yang satu dengan yang lainnya.. itu SAH! Jadi misalnya dari inspirasi satu, kita ambil style headernya. Dari inspirasi yang lain kita ambil style slider nya, dan selanjutnya.. Ingat, style nya yang diambil, bukan 100% mentah2 bagian header atau footernya yang diambil.. Jangan disalah artikan ya guys 🙂

Okay, kita lanjut ke bagian 4..
pertanyaan seputar website..


4. Pertanyaan Seputar Website?

a). Ketika ngirim file desain web ke client, yang dikirim gambar desainnya aja? Atau sekalian kodingnya juga? Nah itu kembali ke temen2. Kalo aku sih pure sebagai desainer, dalam arti aku cuma buat konsep dan ngedesain website sesuai dengan kebutuhan client. Jadi yang aku kirim itu gambar desainnya (JPG/PNG) sekaligus source filenya PSD atau Sketch.
Dan itu juga tergantung kesepakatan awal dengan client. Kalo aku pasti di awal aku tekanin kalo aku hanya akan mengerjakan desainnya aja. Tapi kalo si client tetap minta

“website jadi” bukan hanya desainnya aja, aku bakal ajak join temen aku yang programmer atau aku pakai tools2 theme builder seperti Semplice dan Divi..
Dan pasti harganya bakal aku naikin dong..

PS. Semplice & Divi ini temen2 bisa googling nnti

itu adalah tools drag and drop untuk desainer untuk develop website berbasis wordpress

b). Desainer harus bisa koding? Udah dijawab di materi diatas..

ok lanjut ya...

c.) Kenapa terjun ke desain website?
Karena desain website sekarang sudah semakin simple. Trend nya sekarang adalah website sudah semakin sederhana. Contohnya di bawah ini


Didesain oleh Divan Raj

Jadi silakan pilih aliran temen2 masing2 , terus terapin di desain website.. Dan konsisten terus di style itu, aku yakin temen2 juga bakal gampang dapet project seperti itu nantinya..

misalnya temen2 selama ini berada di aliran ilustrasi, kenapa gak nyoba di website juga? Sebagai contohnya adalah website di atas..

jadi temen2 konsisten bermain di desain website dengan style2 ilustrasi begitu, aku yakin temen2 gampang naik nya kalo gitu

lanjut ya..

d). Software yang dipake untuk desain website? Nah pertanyaan seputar software ini serrrrrrriiiiiiiiiiiiiiiiiiing banget ni ditanyain.. Software itu seperti istri idaman.. Hanya kita yang tau wanita yang seperti apa yang kita idam2kan.. Maksudnya adalah, itu terserah temen2.. Mau pake software apa untuk ngedesain.. Tapi yang paling banyak dipakai adalah Adobe Photoshop (Win dan Mac), dan Sketch app (di Mac). Dan yang paling terbaru dan yang lagi hot2nya adalah Invision Studio, aku kurang tau kalo yang satu ini. Karena aku memang belum pernah coba. Mungkin mas Angga Rizky Setiawan bisa menjelaskan sedikit tentang ini. Karena saya liat di channel nya sudah ada tentang pembahasan Invision Studio hehe.

Kalo aku sendiri pake Sketch App. Karena powerful bangettttt dan harganya murahhh, tahun lalu sih harganya cuma $100. Dan paling penting, belinya itu cuma 1 kali (gak berlangganan, tapi bisa juga berlangganan), dan bisa dibayar pake paypal.

Jadi aku sampe sekarang pake Sketch app

jadi untuk software itu kembali ke temen2 ya..
Bahkan dulu temen aku (udah senioran juga sekarang di bidang UI/UX), pertama kali dia belajar desain website, dia pake Corel lohh

bisa bayangin?

dia ikut kontes web design, pake corel, dan menang pulak

😂

ok kita masuk ke pertanyaan terakhir..


4. e) Cara cari uang dari desain web?

Nah, cara paling cepat cari uang dari desain web adalah ikut kontes. Sekaligus ini juga cara paling cepat belajar desain web. Ngontes..ngontes..ngontes..

temen2 disini mungkin sudah familiar dengan ngontes..

Cara yang lain adalah dengan menjual template desain website ke situs2 seperti UI8, envato, creativemarket, dll.. Jadi misalnya temen2 buat template2 Home sebuah website dengan 10 style yang berbeda.. Nah tinggal dijual di situs2 tersebut, dan nunggu earnings..

=========

Selanjutnya bila temen2 menguasai HTML dan CSS, temen2 punya kelebihan! Kebetulan aku ini adalah lulusan Technic Software Programming. Jadi kurang lebih aku tahu sedikitlah tentang hal itu. Jadi selain 2 cara di atas, aku juga nawarin langsung jasa pembuatan website kepada para salesman dan saleswoman.. Contohnya sales2 mobil. Karena mereka butuh website untuk mendongkrang penjualan mereka. Aku udah beberapa kali membuat website untuk sales2 seperti ini. Nah mungkin ada yang nanya “Trus cara koding websitenya gimana?”. Nah gampang, aku gunain yang namanya wordpress. Wordpress ini kan punya banyak theme2 kan ya? Ada yang gratis ada yang berbayar.. Terkadang aku juga ambil yang berbayar di themeforest, kalo client aku mau bayar agak mahal. Tapi kalo budget mereka terbatas, aku cari theme2 yang gratisan.. (Ingat harus teliti baca licensi tema nya ya), atau bisa langsung kontak author dari theme gratisan tersebut kira2 bisa gak kalo kita rombak theme nya.

Nah, setelah dapat theme yang kira2 cocok dengan penjualan mobil, selanjutnya aku kasi liat tu ke salesman mobilnya.. Aku kasi 3 contoh theme. Kalo dia udah pilih salah satu, selanjutnya aku mulai ngedesain website nya di Photoshop (dulu ya.. tpi sekarang aku pakai Sketch App). Dan desain yang akan aku buat ini bakal aku sesuain dengan grid2 dan layout dari theme gratisan yang udah aku download tadi. Setelah desian nya jadi, aku bakal tunjukin lagi ke client, dan kalo dia udah setuju, aku tinggal rombak aja theme wordpress yang udah didownload tadi sesuai dengan desain kita.. Jadi kita rombak bagian CSSnya agar theme ini terlihat benar2 seperti apa yang sudah kita desain sebelumnya. Jadi deh..

Nah jualan website wordpress ini kalo di Medan sih (berdasarkan pengalaman teman2 aku) itu harganya 500ribu.

Tapi aku jual service ini dengan harga 2 juta per 1 website yang kita buat. Modalnya hanya beli hosting dan domain seharga 200ribu, dan kasi tip ke author si pembuat theme wordpress sekitar $5-$10.. Sisanya adalah keuntungan kita..

Nah mungkin ada yang nanya, gimana cara aku naikin harga service ini dari 500ribu ke 2juta? Nah kalo masalah naikin harga service kita, temen2 bisa langsung tonton aja video2 ku di youtube

😜

=====
nah masih ada cara lain untuk cari duit dari desain website

Cara lain untuk mencari uang sebagai desainer website adalah dengan partneran ke software house. Aku beruntung punya banyak temen programmer, karena dulu sempat gabung di komunitas PHP Indonesia wilayah Sumut. Jadi di Medan aku kenal dengan beberapa temen yang punya software house. Biasanya kalo mereka dapet client yang idealisnya tinggi, dalam arti client itu banyak mintanya.. mereka mau desainnya harus seperti ini dan seperti itu.. Nah mereka di software house biasanya gak punya desainer. Saat itulah aku dipanggil buat partneran sama mereka. Kita bahas scoop projectnya, dan aku tentuin fee aku. Deal, dan kita garap sama2 tu projectnya..

Jadi itu aja mungkin kulgram kali ini. Semoga bermanfaat.

Join Channel Telegram Indonesian Graphic Designers (IGD) : https://t.me/weareigd

You Might Also Like

0 comments

Instagram