Web Design yang Lucu (episode #2)

Melanjutkan tulisan episode #1 kita sudah mulai dengan “Modal Awal” untuk memulai membuat desain. Kondisikanlah sekarang kita hanya punya Modal Awal sebuah kartu nama, dimana disana sudah ada logo dari perusahaan client kita. Disini gwe akan pake logo FXTC yang barusan gwe buat. katakanlah kita tidak punya file asli dari logo tersebut kita hanya mendapatkannya dari hasil scan kartu nama, maka pertama yang kita lakukan adalah mengambil warna yang ada pada logo tersebut, menggunakan :

Color Picker

Pembaca Setiya : “Bagaimana kalau saya tidak punya photoshop, fireworks atau semua yang kamu sebut diatas?”

Desainer Jumawa : “Ohhhh… sangat gampang dik, coba kartu nama berlogo itu kamu bawa ke bagian foreksik poltabes di kotamu, dan tanyakan wahai pak polisi yang budiman tolong saya diberikan code Xecadecimal dari warna yang tertera di logo berikut…” *berpaling muka

Ok, sekarang mari kita ambil warna-warna utama dalam logo FXTC.

Sehingga mendapatkan satu set warna yang bisa disebut sebagai color paletts.

fxtc color paletts

Dari kiri ke kanan #301D77, #1F8E85, #949494, #006AB8

Oh ya warna-warna diatas tidak “Web Safe Colors” so feel free to convert to web save color. Mengenai web safe color silahkan dibaca di sini..

Horeee…sudah dapat warnanya! Seep! Nyalakan rokok dulu,…gimana…gimana? sudah berasa jadi desainer muda berbakat belom? WATHAAA! Not yet mordor! hihihihi

Dari warna yang kita dapet mungkin kita butuh another set of color paletts jangan sampai warna diatas membelengu imajinasi kita ketika men-design nantinya. So what do we do now?

Teori dasar tentang warna dapat kamu baca di artikel-artikel berikut:

http://www.liquisoft.com/colortheory.html
http://www.colormatters.com/colortheory.html

atau googling “color theory

coba juga Color Harmonies.

Jika kamu menggunakan munggunakan software Color Schemer sebenarnya kamu sudah bisa mendapatkan color paletts lain dengan memasukan salah satu warna sebagai warna dasar maka Color Schemer akan menampilkan warna-warna lain yang cocok sebagai pendamping warna utama tadi. Disitu kamu juga bisa mengatur gelap dan terang dari warna yang disarankan.

Sebagai alternatif kamu bisa pakai Color Schemer versi online di sini.

Belum juga pas untuk mendapatkan the look of corporate kamu bisa mempertimbangkan Color Paletts berikut oleh Adam Polselli : Part 1, Part 2, atau kamu bisa mencari color paletts lain yang sudah orang temukan di Colour Lover dibagian Search Palettes kemudian cari dengan keyword/tag “corporate” dan kamu akan dapet color paletts alternatif lainnya.

Untuk kebanyakan orang tidak terlalu menarik memang ketika sampai episode ini (about color), tapi perlu diingat faktor warna itu penting sekali untuk membuat sebuah web menjadi nyaman di mata pengunjungnya. (*tentunya tidak termasuk layout blog ini JEG SUBE JELASH THO! hahaha) .

I just like red, make me excited…terutama daster merah bunga-bunga itu…hiks…you look so gorgeous when you wear that honey…gonna keep call you honey.

Pembaca Setiya : “Mas saya khan buta warna?”

Desainer Jumawa : “KOPLOKKKKS!” eh tolong yah, petani di negeri ini makin berkurang…please deh kamu pulang ke desa saja jadi petani yah”
Desainer Jumawa : KENAPA NGGAK BILANG DARI KEMAREN SORE EKE CARI ITU LINK AMPE KRITING BIADAB TAUK!

Pembaca Setiya : “Eh nggak kok khan becanda, abis situ dari tadi ngoceh serius banged” *toel dikit ahk…

Desainer Jumawa : *mengasah gwolog (dalam hati : “Gwe mutilasi luw sekarang!“)

Web Design yang Lucu (episode #1)

Hore! mari membuat desain web yang “lucu“.

Yang saya tulis disini bukan aturan mutlak,…just base on my experience. Jadi kalau ada yang salah…nanti kita diskusi, ok brow! Akan ada banyak sekali kesalahan ketik/spelling/Fcuk Up EYD disini jadi maklum yah…it’s so me…hihihihi take it or leave it.

Modal awal.
Yah namanya juga mau ngerujak…harus ada ulekannya, terasi, gula jawa, asem, hasyah… [*serius mode on]Ketika memulai mendesain kita harus tanya kembali ke diri kita masing-masing “what do we have for start

Apa yang di provide pihak client kepada kita?

  • Visual Languge Guidelines (*this is make our live much easyer).
    Beberapa perusahaan (a well know company) biasanya memiliki “Visual Languge Guidelines” yang mejelaskan bagaimana perusahaan tersebut akan menterjemahkan profile mereka kedalam bentuk visual. Informasi ini biasanya sangat mendetail dari composisi warna, typography, logo, proposional, ukuran & penempatan, brand template, marque, photography, sampai “tone of voice” atau presentasi suara, yang terakhir nggak bakalan ngefek banyak kayaknya…kita mau menggambar kok disini bukan menyanyi hihihihi. Biasanya panduan ini sudah dalam berbentuk CD, PDF files, atau sebuah buku, they just there already. Jadi kalau kita sudah punya modal yang satu ini…so we can move on to the next step.
  • a Design/Creative brief.
    (panduan singkat kebutuhan desain)
    Yang ini, bisa kita peroleh dengan memberikan kuisioner kepada client dan mempelajari feedback yang diberikan, atau beberapa client tahu apa yang mereka inginkan jadi mereka memberikan panduannya kepada kita, seperti referensi, tujuan/goal dari desain, target audience, arah dari komunikasi desain.
    Ok berikut saya berikan beberapa contoh pertanyaan yang mungkin bisa membantu kita mendesain nantinya :
    Profile Perusahaan
    – Nama client
    – Nama Perusahaan/Perorangan/Organisasi?
    – Alamat Email
    – Nomor telpon
    – Kepada siapa kita saja kita akan melakukan korespondesi, misalkan orang-orang yang
    – Nama pemegang keputusan
    – Penjelasan singkat tentang perusahaan/perorangan/organisasi
    Informasi Project
    – Apakah sudah memiliki webiste online? url/alamat websitenya?
    – Product yang ingin dibuat? (website profile/aplikasi berbasis web/CMS/Online Catalog/dan lai lain)
    – Perusahaan Competitor, url/alamat websitenya?
    – Tanggal batas waktu serah terima webiste?
    – Kesan dari pengunjung website yang dinginkan (*contoh : “Wah melihat website kamu saya jadi pengen joging”)
    – Apakah anda sudah menyiapkan content dari website? (text, gambar pendukung, site-map, atau yang lainnya)
    – Apakah anda punya logo?
    – Berapa estimasi anggaran anda?* (we can’t desain a great ones unless you have the money hahahaha…just kidding).
    – Ada hal lain yang ingin anda tambahkan diluar pertanyaan kami?*Jangan sekali-kali berpikir bahwa finansial adalah batasan kita untuk kreatif sebab semua portfolio yang kita buat adalah track record.

Kita tidak bisa menjadi seorang desainer website yang berforma tidak stabil yang kadang membuat desain bagus, kadang bagus sekali, kadang biasa-biasa saja apalagi desain yang buruk. Kalau bisa jadilah web desainer yang selalu bagus…menurut kepuasan kita kalau pake batasan kepuasan orang lain mah…rancu. (idealnya begitu sir!).

Lanjut ke modal awal berikutnya…

  • “Saya cuma ada kartu nama”
    GUBRAK!!!
    But hey…they got the cash, so be it! hihihi… mulai dari kartu nama tuh di scan, menggambar ulang logo, mengambil warna dengan color-picker walupun meleset tapi sudah kelihatan agak sama, menebak jenis font, bah…you name it! kelebihan dari client seperti ini mereka biasanya “manutan”. Kita harus lebih sering berkomunikasi dengan mereka, gali hal-hal yang membantu sisi kreatifitas kita dari client.

Misalnya :
Desainer Jumawa : “Pak yang desain logonya dulu siapa?”
Client nan lugu : “Anak saya…”
Desainer Jumawa : “Umurnya berapa pak?
Client nan lugu : “Waktu dia bikin logo itu sih dia baru TK nol besar, saya sangat bangga sekali padanya”
Desainer Jumawa : *tiba-tiba mules
Desainer Jumawa : “Sekarang sudah kelas berapa anaknya?”
Client nan lugu : “Udah kuliah dan aktif di kegiatan modeling”
Desainer Jumawa : *blink…blink…tiba-tiba bersemangat berlebihan
Desainer Jumawa : “Ok, pak diskusi kita hari ini saya kira cukup, besok pagi saya bisa ke rumah bapak untuk memperlihatkan moke-up desainernya saya akan berikan tiga alternatif pilihan desain untuk awal project ini…’ *du…du…du…du

*waktunya bersolek…

bersambung ke episode #2