Website portfolio adalah suatu keharusan bagi semua desainer (baik yang freelance atau yang fulltime bekerja dengan orang lain). Maka dari itu, kali ini kita akan membahas beberapa elemen yang biasanya digunakan ketika mendesain website portfolio.

Inti dan tujuan dari website portfolio adalah untuk menunjukan hasil kerja/karya desain kita. Dengan begitu calon klien bisa melihat kemampuan kita dan jika cocok maka dia akan menggunakan jasa kita sebagai desainer. Hal lain yang juga penting adalah website portfolio harus mempunyai karakter tersendiri untuk membedakan website kita dari website portfolio lain.

Berikut adalah beberapa elemen yang saya pelajari dari website portfolio yang ada di luar sana.

1. Portfolio Berada di Halaman Depan

Ini sudah hampir menjadi template pada semua website portfolio dan memang cara ini sangat efektif. Apa yang kita harapkan kalau kita melihat web portfolio? tentu saja hasil karya desainernya kan?

Selain memudahkan pengunjung (dapat langsung ke inti website), elemen ini juga bisa menjadi daya tarik tersendiri untuk mengeksplor lebih jauh ke halaman lain di website kita, terlebih jika hasil karya nya sangat unik, menarik atau klien nya merupakan klien besar.

2. Presentasi Portfolio

Setelah melihat karya di Homepage, maka kita akan masuk ke detil tentang karya tersebut. Nah, bagian ini yang biasanya sering di lewatkan oleh kebanyakan desainer. Kita terbiasa hanya menyertakan screenshot, nama projek dan link ke website yang bersangkutan.

Seharusnya kita bisa menjelaskan lebih detil mengenai karya/projek tersebut. Dengan begitu pengunjung mempunyai nilai tambah terhadap kita, tidak hanya sebatas desainer visual saja. Kita bisa menulis beberapa paragraf tentang proses desain, konsep, masukan dari klien yang kita gunakan di desain kita, mengapa kita menggunakan desain dengan gaya tertentu dan lainnya.

Atau yang lebih menarik adalah kita bisa menceritakan seberapa efektif desain yang kita buat itu, misalnya, dalam 6 bulan website klien tersebut bisa mendapatkan 500.000 pengguna baru di karenakan kita menggunakan Sign Up form terselebung (coba dulu baru daftar). Saya yakin hal tersebut akan lebih informatif dan berguna bagi pengunjung atau calon klien kita.

3. Kalimat Pembuka yang Menarik

Kita biasa menyebutnya Tagline. Kalimat yang menarik bisa menjadi cerminan pribadi kita di dunia maya ini. Terlebih jika kalimat tersebut bisa menjadi semacam slogan bagi kita. Maka secara tidak langsung pengunjung akan mengingat kalimat tersebut dan otomatis mengingat website kita.

Walaupun elemen ini bersifat opsional, tetapi akan lebih bagus dan efektif jika kita meluangkan waktu memikirkan Tagline yang tepat untuk website portfolio kita sendiri.

4. Foto/Ilustrasi yang Menarik Perhatian

Gambar bisa menceritakan lebih banyak daripada kata-kata. Dan bila di sandingkan dengan kalimat pembuka (tagline) yang menarik maka kombinasi tersebut tidak akan terkalahkan.

Kita memang harus belajar sedikit bermetafora untuk mendapatkan hasil yang efektif. Tetapi percayalah jika kita bisa menggunakan cara ini maka website portfolio kita akan berhasil mendatangkan klien baru.

5. Posting Terbaru dari Blog

Bagi desainer yang suka menulis artikel atau senang membagikan pemikirannya pada orang lain, bisa menggunakan cara ini. Selain fungsi blog/artikel yang bisa membangun komunitas, kita juga secara bersamaan membangun personal brand. Menurut saya salah satu cara membangun personal brand adalah melalui konten pemikiran kita (yang biasanya di tuangkan dalam bentuk tulisan).

Bingung mau menulis topik apa? Coba gunakan beberapa ide simpel ini. Walaupun kamu merasa diri kamu murni desainer visual, ayo luangkan waktu untuk belajar menulis dan menuangkan kata-kata

6. Profil Pribadi / Studio

Halaman ini merupakan halaman terpenting kedua setelah portfolio. Harus dengan jelas dan jujur mendeskripsikan diri sendiri. Alasannya adalah alasan klasik, bagaimana klien mau berbisnis dengan seseorang yang identitasnya tidak jelas?

Coba ceritakan sedikit background pendidikan, pekerjaan sehari-hari, tinggal di kota mana (jika keberatan memberikan alamat lengkap) dan hal unik lain yang ada di diri kamu (misalnya, suka mengoleksi action figure dll). Intinya buatlah halaman About ini se-personal mungkin, karena ini merupakan “kartunama” kamu di dunia maya.

7. Informasi Kontak yang Jelas

Kalau pengunjung sudah sampai ke halaman ini, maka bisa di pastikan mereka sudah 75% tertarik dengan kamu. Jadi jangan sia-siakan kesempatan ini. Buatlah semudah dan seinformatif mungkin jika pengunjung mau menghubungi kita, baik itu hanya untuk berkenalan atau mau bekerjasama dalam suatu projek.

Tidak ada salahnya menyertakan alamat email, nomor handphone (jika tidak keberatan) dan alamat kantor/rumah. Ini untuk alasan kenyamanan bila klien bekerjasama dengan kita nantinya.

Salah satu trik yang saya anggap efektif adalah dengan menggunakan form yang bisa di pilih (mau berkenalan saja, mau memberikan projek atau memberikan saran). Cara ini akan memudahkan kita, karena masing-masing pilihan mempunyai subjek yang spesifik yang bisa kita pisahkan inbox emailnya (contoh, untuk berkenalan 1 inbox sendiri, untuk projek 1 inbox sendiri). Jadi kita tidak menerima berbagai macam email di 1 inbox.

8. Detail Harga

Ini masih menjadi perdebatan apakah etis untuk disertakan pada suatu website portfolio. Kalau menurut saya sah-sah saja, tergantung kepada masing-masing pribadi dan tipe bisnis yang kita jalankan.

Kelebihannya adalah kita tidak akan capai menjawab pertanyaan calon klien tentang harga (yang terkadang tidak berlanjut karena mungkin terlalu mahal). Dengan adanya informasi ini maka kita dapat sedikit memastikan bahwa kalau ada email dari klien baru maka kemungkinan dia akan menjadi klien kita.

Kalau masih ingin memberikan detil harga tetapi tidak secara langsung, kita bisa menggunakan kisaran harga, misalnya Rp.1juta – Rp.4juta atau Mulai dari Rp.3juta. Jadi tidak ada harga yang pasti, karena memang setiap projek mempunyai keunikan tersendiri.

9. Informasi Ketersediaan Menerima Projek Baru

Hal ini lumayan penting bagi para freelancer fulltime atau parttime. Calon klien jadi tahu kita available atau tidak pada waktu dia ingin menghubungi kita. Ini akan mempermudah kita dan klien. Jangan sampai sudah berdiskusi panjang lebar tapi ternyata waktu kita tidak ada yang kosong untuk menerima projek baru.

10. Testimonial

Sama seperti kita berjualan di Kaskus misalnya, testimonial memegang peranan yang penting. Jika tidak ada testimonial maka calon klien akan sedikit berspekulasi jika bekerjasama dengan kita. Mungkin klien hanya melihat dari portfolio kita yang “wah” saja.

Dengan adanya testimonial (apalagi dari nama yang lumayan terkenal), calon klien baru akan lebih yakin dengan kita. Jadi, jangan lupa meminta testimonial dari klien yang kita anggap mempunyai nama dan projek nya menarik

Kesimpulan

Elemen dan cara-cara di atas adalah elemen umum dalam desain website portfolio. Kita bisa menggunakan semuanya atau hanya beberapa saja. Yang pasti hasil kerja/karya kita, siapa kita dan kemudahan dalam menghubungi kita memegang peranan penting pada website jenis ini.

Seperti biasa, kalau ada yang elemen yang terlewat, silakan berkomentar di bawah!

Jangan sampai ketinggalan artikel menarik lainnya, ayo berlangganan dengan Email atau RSS. Ikuti juga Twitter Jurus Grafis dan temui Jurus Grafis di Facebook.

Mari kita berdiskusi tentang hal ini, tapi sebelumnya saya mau menyampaikan pendapat tentang “Apakah desainer web harus bisa coding?”. Jujur saja, saya jadi agak sedikit gatal setelah membaca salah satu artikel dan beberapa komentar dari Elliot Jay Stocks.

Harus Bisa?

Apakah desainer web harus bisa coding? Tidak selalu! Tetapi harus ‘mengerti’ bagaimana website itu nanti akan di coding. Yang artinya, semua elemen desain yang kita buat di Photoshop harus code-able. Coba intip sedikit tips tentang persiapan mendesain website.

Saya mengakui, saya tidak merasa nyaman melakukan coding sendiri. Jangan salah, bukan karena saya malas, saya pernah mencobanya dan bahkan beberapa hari yang lalu sempat belajar css basic karena melihat video tutorial dari Prakasa. (it’s a good one by the way!).

Namun saya masih merasa kesulitan mengulang pelajaran video tutorial itu dari awal (jika tidak melihat contoh/videonya), mungkin itu karena keterbatasan saya? (sering lupa code yang sudah di pakai). Yang terpenting adalah sekarang saya ‘mengerti’ cara meng-coding sebuah website dan hal ini tentu saja akan menambah dasar pemikiran saya pada saat mendesain website di Photoshop.

Pertimbangan Kemampuan, Waktu dan Kesempatan

Kenapa saya tidak meng-coding website (personal dan komersial) saya sendiri?

Pertama, karena saya merasa kemampuan saya bukan di coding, dan lebih banyak teman yang sangat berkompetensi sekali dalam hal coding, yang bisa di ajak berkerjasama dalam suatu projek website.

Kedua, waktu yang di perlukan untuk coding cukup lama, jadi saya lebih baik melimpahkan bagian code ke seseorang yang bisa di percaya, dan saya bisa melanjutkan ke projek lainnya (yang artinya perputaran projek akan lebih menguntungkan dan sistem kerja menjadi lebih efisien dan efektif).

Ketiga, belum banyak web desainer yang mengkhususkan diri pada bagian interface dan pengaturan alur informasi pada website. Hal tersebut sedikit sekali berhubungan dengan coding, ini merupakan konsep awal sebuah website. Dan menurut saya bagian ini sama pentingnya dengan code. Percuma website berfitur canggih, efek jquery mencengangkan, tetapi desainnya sungguh menyakitkan hati.

Akhirnya…

Sebagai kesimpulan, seorang desainer web harus ‘mengerti’ coding tetapi tidak harus ‘bisa’ meng-coding. Tentu saja akan lebih bagus jika ‘bisa mengerjakan’ code desainnya sendiri. Dan yang terpenting kita harus menyadari kemampuan kita yang sebenarnya berada di bagian mana.

Seperti yang kita tahu, website jaman sekarang sudah melibatkan banyak elemen, mulai dari interface (desain), code, copywriting, SEO bahkan sampai ke teknik marketing online. Apakah menurut kamu satu orang bisa memberikan semua itu?. Website bukan sekedar PSD to CSS/Html, website lebih dari itu.

Sekarang giliran kamu silakan berkomentar! atau bila berkomentar tidak cukup, kamu bisa membuat posting sendiri di blog kamu dan link balik ke posting ini supaya teman-teman yang lain bisa tetap mengikuti topik hangat ini

Jangan sampai ketinggalan artikel menarik lainnya, ayo berlangganan dengan Email atau RSS. Ikuti juga Twitter Jurus Grafis dan temui Jurus Grafis di Facebook.

Untuk mengimbangi kepopuleran bidang desain website pada tahun 2010 ini, maka ada baiknya saya menulis tentang persiapan apa saja yang perlu kita lakukan sebelum mendesain website.

Mungkin banyak teman-teman pembaca setia Jurus Grafis yang belum familiar dengan cara kerja mendesain website, karena terbiasa dengan desain cetak (seperti saya dulu).

Dalam desain website, kita sebagai desainer tidak diharuskan bisa mem-program desain yang telah kita buat. Tapi tentu saja akan lebih baik jika kita bisa sekaligus mem-program desain kita sendiri, tapi kalau di rasa mem-program sebuah website itu merupakan pekerjaan berat, lebih baik kita berfokus pada interface dan konsep desain terlebih dulu.

Yang patut kita tahu adalah cara berpikir programmer, agar desain yang kita buat masuk akal untuk di wujudkan dalam code. Misalnya, salah satu cara programmer bekerja adalah dengan membuat bagian background terlebih dulu, karena itu desain yang kita buat harus tertata rapih di dalam folder (Photoshop) yang spesifik.

Baiklah, mari kita mulai saja langkah persiapan mendesain website.

1. Tujuan / Goal Website

Setiap desain harus mempunyai tujuan yang jelas dan goal apa yang ingin di raih melalui website tersebut. Jika itu website portfolio, tentukan tujuan nya, apakah untuk mendapatkan projek baru? , melakukan personal branding atau untuk menjadi semacam katalog online hasil kerja kita?

Dengan tujuan yang jelas maka kita akan dengan mudah menemukan konsep dan gaya desain yang pas. Hindari tujuan untuk ‘tampil keren’ di awal pemikiran, karena desain yang kita anggap keren itu mungkin hanya bertahan dalam waktu 1 bulan saja, sehingga dalam waktu singkat kita merasa harus mendesain kembali website kita. “Keren” itu hanya “kulit” nya, yang terpenting adalah fungsi dan tujuan website tersebut.

2. Sitemap

Sitemap merupakan bagian yang sangat vital,  karena akan menjadi gambaran alur informasi yang jelas mengenai website yang akan kita buat. Tentukan navigasi dan fitur yang di perlukan di tahap ini dan buang fitur yang tidak efektif.

Kalau tujuan website sudah jelas, maka kita bisa berfokus pada tujuan itu dan tidak memasukkan fitur yang kurang penting, seperti chat box atau ruang iklan banner misalnya (sungguh aneh kalau di web portfolio ada banner iklan).

3. Sketsa / Wireframe

Supaya tidak tersesat di kanvas kosong Photoshop, lebih baik kita merancang terlebih dulu di atas kertas. Langkah ini perlu untuk menghindari kerja dua kali di Photoshop. Bisa di bayangkan waktu yang terbuang ketika membuat background atau tombol terlihat bercahaya dan web 2.0 banget!, tapi ternyata letak dan ukurannya kurang tepat.

Tahap ini sangat perlu, terlebih jika kita berurusan dengan website yang mempunyai alur informasi yang kompleks. Dengan sketsa kita dapat menciptakan berbagai kemungkinan layout dengan cepat. Dan kalau kita bekerja dengan klien, mereka lebih senang kalau kita memulai projek dan memperlihatkan hasil sketsa kita sebelum melangkah ke tahap finishing di Photoshop. Ini bisa menjadi jalan untuk melibatkan klien secara aktif di dalam projek tanpa membuat kita kesal (karena untuk merubah hanya perlu menghapus sketsa saja).

4. Resolusi 72 Dpi & Warna RGB

72 Dpi adalah resolusi standar untuk tampilan di monitor (jangan pernah membuat desain website di resolusi 100 dpi sekalipun, karena ukuran asli nya akan menjadi besar juga). Dan gunakan warna RGB yang memang di khususkan untuk monitor.

Well, langkah ini adalah langkah dasar yang tidak boleh di langgar, jadi jangan lupa teman

5. Lebar Konten Website Maksimal 960 Pixel

Seheboh apapun desain yang kamu buat, jaga area konten (teks, foto dll) agar jangan melebihi lebar 960 Pixel. Ini karena standar monitor orang awam masih berkisar di resolusi 1024 x 768. Untuk bagian background image mungkin perlu untuk melebihi lebar 960 pixel ini dengan tujuan supaya background terlihat rapih dan tidak terpotong jika di buka di monitor yang lebar seperti 1360 x 768 pixel atau lebih.

6. Gunakan Grid System

Grid bukanlah suatu pembatasan kreatifitas terhadap desain. Grid di ciptakan untuk mempermudah kita menjaga konsistensi layout dari halaman satu ke halaman yang lain. Selain itu gird juga membantu programmer yang akan menslicing desain kita di photoshop.

Saya biasa menggunakan 960 Grid System, karena sudah merupakan standar di jaman sekarang ini. Jika kamu tidak mau menggunakan grid yang sudah ada, silakan gunakan grid kamu sendiri. Yang terpenting lebar area konten tidak boleh melebihi 960 pixel.

7. Manajemen Folder & Layer di Photoshop

Biasakan untuk membuat folder di bagian-bagian penting sebuah website, misalnya, folder header, folder body, folder sidebar, folder footer. Sebenarnya nama folder nya bisa terserah kamu, yang penting di namakan dan masing-masing layer yang termasuk ke dalam satu bagian/section di satukan ke dalam satu folder.

Jangan lupa juga untuk menamakan setiap layer, sehingga akan mudah jika kita ingin mengedit desain kita nanti dan tentu saja ini sangat menolong programmer yang bekerjasama dengan kita.

Kesimpulan

7 langkah di atas adalah langkah awal supaya kita terbiasa mendesain dalam keadaan yang terorganisir (khususnya desain website). Karena kita tahu terkadang kita tidak bisa menyelesaikan suatu projek sendirian, dalam hal ini mungkin kita butuh teman programmer, jadi supaya code yang di hasilkan juga rapih, kita sebagai desainer juga harus memberikan “file mentah” yang rapih.

Sudah siap beralih menjadi web desainer? Atau mungkin ada langkah yang tertinggal? Ayo berbagi pendapat di kolom komentar!

Tautan Terkait
Merancang Desain Website seperti Kartunama

Jangan sampai ketinggalan artikel menarik lainnya, ayo berlangganan dengan Email atau RSS. Ikuti juga Twitter Jurus Grafis dan temui Jurus Grafis di Facebook.