Dalam bidang desain website (interface), memang ada beberapa hal yang akan ditemui dan berbeda dari desain print. Jika kita desainer grafis yang terbiasa dengan desain print lalu ingin mencoba di bidang desain website atau interface, kemungkinan akan menemukan hal-hal teknis yang tidak biasa. Salah satunya adalah teknik slicing pada desain interface.

Pengerjaannya masih sama-sama dikerjakan pada software grafis, bisa dari Adobe Illustrator, Corel Draw atau software kesayangan kita Adobe Photoshop. Dalam hal ini saya akan membahas slicing dengan Photoshop saja karena itulah yang selalu saya gunakan.

Apa itu slicing?

Slicing adalah sebuah teknik pemotongan gambar/desain pada website, memecahnya jadi beberapa bagian untuk kemudian disatukan kembali menggunakan kode CSS dan HTML. Mengapa harus dipecah? Website yang kita lihat ini bisa muncul terlihat utuh tidak seperti jika kita melihat sebuah brosur yang benar-benar mencetak hasil utuh dari sebuah desain.

Ini semua muncul dari hasil potongan-potongan image saat slicing. Bisa dilihat jika kita save as Web Complete akan ada folder yang isinya potongan-potongan image. Itulah hasil slicing. Teknik slicing tentu dapat mempercepat proses downloading website secara paralel namun jangan terlalu banyak juga bagian potongannya karena justru dapat memperlambat downloading karena keterbatasan jumlah download paralel pada browser.

1. Crop tool atau Slice tool

Setiap desainer punya cara dan jurus tersendiri dan berbeda-beda dalam mengerjakan proyeknya. Itu sah-sah sja, yang penting kerjaan beres dengan tepat waktu. Teknik slicing pada Photoshop bisa menggunakan Slice tool atau manual dengan Crop tool. Saya sendiri lebih menyukai crop tool. Jika menggunakan slice tool, kita memang bisa secara otomatis memotong beberapa bagian sekaligus dalam sekali ‘slice’ dan langsung save for web sekaligus dalam satu folder untuk semua file hasil potongan tersebut.

Namun ini akan menyulitkan kita jika filenya transparan dan menimpa sebuah background. Well, bisa saja itu tetap dikerjakan, namun akan lebih mempermudah programmer menyusun gambar  jika kita memisahkan file transparan tersebut dengan backgroundnya.

2. Slicing ujung dan tengah pada sebuah bidang

Pada bidang-bidang kotak, persegi panjang dan juga background ada teknik khusus dalam memotongnya. Kecuali jika background berupa foto atau image. Untuk menslicing sebuah bidang, misal pada background atau sebuah kotak yang ujungnya melengkung (dengan rounded rectangle) tentu ada caranya bagaimana memotong bidang –bidang tersebut. Jika yang akan kita potong adalah sebah bidang kotak, misal untuk background tulisan paragraf, namun ujungnya lancip maka kita cukup memotong tipis 1 bagian saja.

Sedangkan jika bidang yang dipotong berujung lengkung, kita akan memotong pada bagian ujung kiri-kanan atau atas bawah (tergantung arah efek gradasi jika ada) dan bagian tengah.

Mengapa kita hanya memotong tipis seperti itu saja dan atau hanya 3 bagian itu saja? Karena ketika nanti dibuat kode, jika tekstur bidangnya sama dan atau tanpa tekstur, proses kode akan menyatukannya dengan me-repeat hasil potongan bagian tengah tersebut entah itu arah vertical atau horizontal  Berbeda jika image nya berupa gambar atau tekstur yang tidak merata, tentu tidak bisa menggunakan kode ‘repeat’, yang ada hasilnya berantakan.

3. Menslicing bidang bergradasi

Seperti sempat dibahas di atas teknik slicing untuk bidang bergradasi tergantung seperti apa arah gradasinya. Horizontal atau Vertikal. Jika horizontal dengan ujung melengkung, maka yang kita potong bagian ujung kiri, tengah dan ujung kanan.

Tapi jika vertical dengan ujung melengkung yang kita potong adalah bagian ujung atas, tengah dan ujung bawah. Biarlah programmer me-repeat bagian tengahnya saja. Gambar di bawah ini contoh yang ujungnya lancip, jadi hanya sekali potong saja, programer akan me-repeatnya nanti.

4. Penamaan Folder

Untuk penamaan folder file-file slicing yang telah kita potong, tidak bisa menggunakan spasi, misal kita akan menamakan image 05, kita harus menamainya dengan image05 atau image_05. Karena kode HTML tidak bisa membaca file dengan nama yang menggunakan spasi. Dan sebaiknya jika file tersebut sejenis atau berurutan gunakan penomeran atau urutan abjad agar memudahkan programmer saat membuka file. Semua pasti ada dalam 1 folder saja, tidak terpisah atau tidak berupa folder dalam folder.

Kesimpulan

Pada awalnya bagi desainer yang belum terbiasa slicing mungkin akan bingung mulai darimana atau apa saja yang harus dislicing. Namun untuk membiasakannya tidak akan memakan waktu lama asalkan bisa Photoshop atau software grafis lainnya tentu saja.

Jika ada kesulitan menentukan bagian slicing sebaiknya didiskusikan dengan programernya atau yang bagian codernya, karena dialah yang nanti menerima hasil slicing untuk disatukan jadi  halaman website utuh.

Silahkan para desainer interface dan programmer berkomentar, jika ada masukan atau ada yang kurang, dengan senang hati bisa ditambahkan di kolom komentar di bawah.

Kebanyakan orang menganggap sebuah website itu hanya di buat oleh satu orang saja, yaitu web designer. Tidak heran masih banyak desainer grafis lokal dengan basic print design yang mengira membuat website itu sulit.

Tahun lalu saya sempat menawarkan teman (seorang desainer grafis juga) untuk mencoba terjun ke dalam desain website, tetapi tanggapannya adalah “gue ga bisa code” , “ribet” dan lainnya yg sejenis. Ya, itulah sekilas potret mayoritas teman-teman desainer lokal saat ini.

Sangat disayangkan, karena menurut saya media yang akan paling banyak di gunakan dalam 2-3 tahun kedepan adalah media digital. Coba lihat iPad sudah bisa di order online dari website Apple, dengan harga mulai dari Rp.4,799,000. Sangat terjangkau sekali bukan? Dan ini baru awal, coba bayangkan kalau sudah menjamur.

Pembuatan produk digital (dalam hal ini saya ingin menitikberatkan pada website) melibatkan peran beberapa profesi. Website yang bagus biasanya di kerjakan oleh sekumpulan orang dengan spesialisasi yang berbeda namun saling bersinergi. Beberapa di antaranya adalah,

1. Web Interface Designer

Spesialisasi ini seharusnya bisa di adaptasi oleh teman-teman dengan basic print design. Memang butuh waktu untuk mempelajari cara kerja website, memahami cara kerja code dan developer, sampai dengan mengamati tren desain website terkini. But it’s worth it! Sekali kamu menyelami dunia interface design, kamu akan menyelam semakin dalam

Peran interface sama pentingnya dengan developer, ini sama saja seperti kita mendesain sebuah logo. Kita menggunakan elemen visual untuk menyampaikan pesan, menggunakan simbol untuk mempermudah pengguna berinteraksi.

Intinya tetap komunikasi, malah semakin kita mendalami interface kita akan lebih banyak mempelajari kebiasaan pengguna (usability), yang menurut saya, secara tidak langsung kita mempelajari psikologi orang lain (misalnya, reaksi pengguna terhadap warna tertentu, permainan tipografi dan lainnya).

2. Front End Developer

Kalau kamu sudah mengerti code dan kamu senang meng-coding desain yang sudah kamu buat sendiri, maka sebaiknya kamu memilih peran front end developer. Secara teknis, front end developer akan menghasilkan html dan css dari desain yang telah di buat di photoshop.

Front end developer yang baik mempunyai mata yang jeli dan biasanya juga mempunyai sense of art. Kalau basic nya memang desainer maka akan lebih baik lagi. Itu sebabnya banyak juga web interface designer yang bisa berperan sebagai front end developer juga.

3. Back End Developer

This is where the magic happens. Tampilan sudah bagus, sekarang tinggal memberikan ‘kemampuan’ pada website. Back End Developer ini bisa di bilang pekerja di belakang layar. Pengguna tidak melihat langsung tetapi bisa merasakan dan berinteraksi dengan website.

Misalnya saat kita mengupload foto ke facebook. Ini merupakan proses yang lumayan panjang. Tombol browse akan membuka window, menarik data dari komputer kita, lalu mengupload ke server, di display kembali di front end (page edit photo) sehingga user bisa melihat fotonya, memberikan deskripsi, tagging, dan yang terakhir publish.

Tetapi pengguna tidak merasakan proses yang panjang itu bukan? Itu karena interface dan fungsi bersinergi dengan baik.

4. Copywriter

80% tampilan website adalah text dan mayoritas pengguna pasti membaca text untuk mendapatkan informasi. Disinilah peran copywriter sangat di perlukan. Selain penampilan yang bagus, sebuah website harus mempunyai ‘cara/gaya berbicara’ yang mudah di mengerti dan khas sesuai dengan market masing-masing.

Peran copywriter ini terkadang bisa menjadi faktor x. Coba lihat bagaimana Twitter mengubah “What are you doing now” menjadi “What’s Happening”. Sangat terasa perbedaannya. Hanya dengan mengubah kalimat, Twitter bertransformasi menjadi sumber berita bagi seluruh dunia.

Kesimpulan

Sebuah website bukan di buat hanya seorang web designer (istilah web designer menjadi rancu sekarang ini). Minimal membutuhkan 2 peran, interface designer dan front / back end developer. Jadi, kalau kamu mempunyai basic sebagai print designer, saya harap kamu mau meluangkan waktu mengenal dan mempelajari desain website (setidaknya kamu bisa menjadi interface designer).

Percayalah ini merupakan masa depan dunia dan website baru permulaan saja. Nantinya tidak menutup kemungkinan kita akan menggunakan platform yang berbeda (aplikasi misalnya), tetapi dasar nya akan tetap sama, keempat peran ini tidak akan terpisahkan.

Bagaimana dengan kamu? Ada peran yang terlewatkan? silakan berkomentar

Website corporate / perusahaan merupakan perpanjangan tangan secara online dari sebuah perusahaan. Selain fungsinya untuk memberikan informasi, tak jarang juga banyak perusahaan menggunakan websitenya untuk mendapatkan klien baru.

Pada kesempatan ini kita akan membahas beberapa elemen penting yang biasanya / wajib terdapat pada desain website corporate. Ok, langsung saja kita mulai.

1. Tagline / Slogan Perusahaan

Bisa bagian dari logo, bisa juga tidak. Yang pasti fungsi tagline adalah meringkas produk / jasa yang di tawarkan perusahaan kepada konsumen. Sehingga dalam sekejab saja pengunjung sudah tahu secara garis besar tentang perusahaan tersebut. Biasanya mulai dari 2 kata hingga 1-2 kalimat pendek, Kalau sudah lebih dari itu sudah bukan tagline lagi.

2. Informasi Perusahaan & Kontak

Ini jelas mutlak ada di website corporate, pengunjung jadi bisa mengetahui latar belakang perusahaan, jasa yang di tawarkan bahkan sampai ke jajaran direksi jika perlu. Yang tak kalah penting adalah info kontak, mulai dari nomor telepon, email dan alamat yang jelas. Untuk alamat bisa juga di bantu dengan menambahkan peta (bisa di buat ilustrasi peta sendiri atau dengan menggunakan google maps).

3. Jasa / Produk yang Di Tawarkan + Foto

Info produk harus bisa di komunikasikan dengan mudah sehingga pengunjung dapat dengan cepat menangkap tujuan perusahaan ini dan apa keuntungannya untuk konsumen. Lebih baik lagi jika di perkuat dengan foto produk. Kalau produk fisik mutlak di foto dengan baik, kalau perlu gunakan jasa fotografer profesional dan highlight elemen penting yang ada pada produk.

Kalau produk tak berwujud (jasa / digital goods), maka gunakan gambar produk yang sebenarnya. Bisa berupa portfolio, foto event yang sedang di selenggarakan (untuk event organizer misalnya). Intinya tampilkan sejelas mungkin produk yang di tawarkan.

4. Call to Action

Biasanya berupa tombol dengan kata-kata seperti “Pesan Sekarang – Dapatkan Potongan Harga 35%” atau yang sejenisnya. Bisa juga semudah “Hubungi Kami Hari Ini Juga!”. Tujuannya untuk mengubah pengunjung menjadi klien potensial yang bisa kita hubungi dan akhirnya bisa menjadi klien kita. Pada akhirnya tujuan semua website komersial memang untuk konversi bukan?

5. Blog / News

Bagian yang satu ini biasanya di jadikan anak tiri pada website corporate. Namun kalau di gunakan secara benar blog bisa menjadi salah satu media marketing yang efektif tanpa harus membuang biaya yang besar. Gunakan blog / news untuk memberikan info menarik yang berkaitan dengan produk / jasa perusahaan, selain sebagai media press release perusahaan.

Inspirasi Desain Website Corporate

Berikut ini beberapa contoh website corporate yang terlihat sedikit berbeda dari biasanya, tetapi tetap terasa aura profesionalnya. Dan yang paling penting mereka tetap dapat dengan jelas memberikan informasi “mereka itu siapa” dengan mudah kepada pengunjung.

Aol

Duchy Originals

Dyson UK

Goldman Sachs

GreenHill SAVP

IDC – Industrial Door Contractors

Intel

Scout

Sustain Ability

Trek Bikes

Kesimpulan

Desain website corporate tidak harus selamanya membosankan. Untuk dapat menghasilkan desain seperti contoh di atas kita harus mendalami dulu visi, budaya, produk dan nilai perusahaan. Dari sana kita baru bisa memutuskan akan menonjolkan bagian mana dari perusahaan, setelah itu baru kita masuk ke tahap desain yang bisa mendukung visi, budaya, produk dan nilai perusahaan tersebut tanpa melupakan unsur komunikasi yang mudah di terima oleh pengunjung.

Bagaimana menurut kamu? Apakah desain website corporate itu selamanya harus membosankan? Atau ada cara lain agar website perusahaan bisa menjadi pusat perhatian di kalangan Netizen?

Sekarang ini mulai banyak website baru buatan lokal muncul, dan ini merupakan indikasi yang bagus untuk industri desain website lokal. Maka dari itu Jurus Grafis membuat ‘rubrik’ baru yaitu Tinjauan Desain (Design Review), yang pada saat ini membahas desain website sebuah majalah online bernama Whiteboard Journal.

Pengenalan Singkat

Whiteboard Journal adalah media publikasi online yang membahas bidang fashion, desain, hiburan dan seni. Kalau melihat materi yang di sampaikan tentu ini di tujukan untuk pembaca Internasional dan Lokal (menggunakan bahasa inggris).

Mempunyai fitur yang menarik seperti “Round Table” yang berisi wawancara dan diskusi (podcast) dengan narasumber dan topik yang sedang hangat. Fitur “Column” dan “Focus” dengan artikel dan insight yang mendalam, tidak lupa juga “W-Music” dan “City Guide” sebagai pelengkap yang menyenangkan.

Minimalis, Aksen dan Detail

Desain homepage Whiteboard Journal sangat rapih, bersih dan tidak banyak basa basi. Sesuai dengan tagline mereka, A Concise Publication, publikasi yang ringkas. Di tunjukan dengan menggunakan slideshow di bagian atas (above the fold) untuk meng-emphasis artikel dan konten inti terbaru yang ada di website ini.

Lalu di lanjutkan dengan lembut  ke berita terbaru di bawah slideshow. Yang menarik dari news feed ini adalah icon yang di gunakan pada masing-masing kategori berita, seperti penggunaan icon pensil untuk kategori Art & Design, icon gantungan baju untuk Fashion, dan lainnya. Cara ini memberikan detil yang membantu para pembaca untuk menemukan kategori yang sesuai dengan minat mereka.

Di bagian sidebar kanan sebenarnya biasa saja, karena kebanyakan hanya iklan yang di taruh disana. Tapi ada satu yang menarik perhatian saya yaitu sebuah widget “Latest Feature” yang menggunakan metode tabbed browsing untuk mengakomodasi konten yang lumayan beragam. Dan menurut saya cara ini sangat efektif sekali untuk website tipe majalah.

Dan ditutup dengan rapih oleh footer yang informatif, berisi semua kategori berita dan fitur website, termasuk tautan ke online store Whiteboard Journal. Tak lupa juga bagian footer di jadikan area monetisasi untuk menaruh banner iklan.

Sedikit permasalahan usability di header adalah logo Whiteboard tidak bisa di klik untuk kembali ke homepage. Saya rasa ini sudah menjadi standard pada semua website kalau logo itu jika di klik harus kembali ke homepage.

Halaman Berita

Penggunaan foto dengan lebar yang sesuai dengan area konten membuat bagian ini tetap rapih, walaupun menurut saya besar font nya masih terlalu kecil, coba bayangkan orang yang membaca dengan resolusi 1440  ke atas, mereka pasti sedikit kesulitan.

Saya tidak mengerti mengapa tidak ada kolom komentar di akhir posting, rasanya ini bisa menjadi masukan. Atau memang sengaja tidak menggunakan kolom komentar?. Ini membuat kesan percakapan satu arah yang sudah tidak jaman lagi sekarang ini.

Halaman Fitur yang Unik

Kalau kita masuk ke salah satu fitur seperti “Round Table” maka layout yang di tampilkan menjadi agak berbeda. Sidebar di hilangkan sehingga area besar di tengah menjadi fokus. Kolom di bagi 2 sehingga kita merasa seperti membaca majalah cetak.

Yang menjadi masalah disini adalah flow membaca artikel, pertama karena tidak ada Drop Cap pada paragraf pertama, kedua karena tidak menggunakan H2 untuk huruf text yang lebih besar sebagai penanda dan ketiga tidak ada petunjuk kemana kita harus membaca selanjutnya, ke bawah atau ke kanan. Tipografi harus di perhatikan lagi di bagian ini yang menurut saya sangat krusial.

Terakhir adalah pagination yang sangat terlalu kecil, kalau pembaca kurang jeli mungkin mereka melewatkan dan selesai membaca dengan bingung karena artikel belum selesai tetapi tidak ada lanjutannya lagi. Solusi nya adalah memperbesar angka pagination di bawah, dan berikan petunjuk yang jelas kita sekarang berada di halaman berapa.

Salah Satu Contoh Layout Toko Online yang Baik

Saya merasa bagian ini sangat baik, semua produk Whiteboard bisa langsung di lihat dengan mudah. Di tunjang dengan informasi ketersediaan barang pada setiap foto.

Yang kurang hanya tidak ada informasi harga sampai kita masuk ke dalam halaman detail produk. Tombol ‘Buy’ yang terlalu kecil dan kurang kontras (ini berpengaruh kepada psikologi kita untuk mengklik atau tidak), dan terlalu di ulang-ulang sampai 3 kali. Saya rasa cukup dengan 1 tombol yang lumayan besar, warna kontras (kuning atau hitam pekat?) dan di tempatkan di samping harga atau di akhir informasi.

Kesimpulan

Whiteboard Journal bisa di jadikan standard yang sangat baik untuk desain website bertipe majalah yang berisi kategori beragam. Walaupun ada beberapa masalah usability di sana sini, namun saya rasa itu masih dapat di maklumi dan hanya masalah minor saja.

Menurut kamu bagaimana desain interface website Whiteboard Journal? Yuk berdiskusi di kolom komentar

Dan kalau kamu tertarik website kamu di bahas di sini silakan kirimkan email ke,
hello [at] jurusgrafis.com atau jurusgrafis [at] gmail.com

Ayo berlangganan Jurus Grafis melalui Email dan RSS, supaya kamu tidak ketinggalan artikel menarik berikutnya!. Temui juga Jurus Grafis di Facebook dan ikuti Twitter Jurus Grafis untuk berita tambahan seputar desain.

Wireframe/sketsa pada saat mendesain website sangat di perlukan supaya kita tidak bekerja 2 kali di komputer. Dan juga penting untuk menentukan gambaran awal desain website yang akan kita buat nantinya. Dengan dokumen gratisan ini, kamu bisa mulai mendesain menggunakan 960 Grid System pada kertas!

Permasalahan

Beberapa waktu lalu saya masih menggunakan kertas kosong untuk mulai mensketsa, tapi lama kelamaan karena di Photoshop saya bekerja dengan 960 Grid System, terkadang desain yang saya buat di sketsa tidak cocok (kelebihan/kekurangan ukurannya) jika di implementasikan kedalam sistem grid tersebut.

Solusi

Jadi saya berpikiran kenapa tidak di buat saja 960 Grid System pada kertas? Caranya yaitu dengan memindahkan grid di Photoshop lalu tinggal mencetaknya dengan printer! (kenapa tidak terpikir dari dulu!).

Ide ini muncul ketika saya melihat buku sketsa khusus developer/desainer IPhone. Pada buku sketsa tersebut ada gambar rangka IPhone. Ini tentu sangat memudahkan dalam mendesain, kita jadi tahu kira-kira akan terlihat seperti apa desain yang kita buat pada IPhone nanti.

Yes! Berhasil!

Saya sudah mencoba membuat sketsa menggunakan cara tersebut, dan hasilnya sungguh cepat, dan yang pasti ukuran perbandingan nya sudah pasti sama jika nanti saya memindahkan sketsa tersebut ke Photoshop.

Jadi, kalau kamu sering mendesain website atau ingin belajar mendesain website, silakan gunakan sketsa grid ini. Bisa di unduh pada tombol di akhir posting, tersedia dalam grid 12 kolom dan 16 kolom (55Kb). Tinggal buka dokumen ini di Photoshop, print di kertas A4 dan mulailah berimajinasi!

Info: Ternyata sudah ada yang membuat buku sketsa khusus desain web, hanya tidak ada gridnya.

Jangan sampai ketinggalan gratisan berguna seperti ini, ayo berlangganan dengan Email dan RSS. Temui juga Jurus Grafis di Facebook dan ikuti Twitter Jurus Grafis.

Sketsa 960 Grid System pada Kertas (1285)