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.

Pada bagian ke 2 ini kita akan menyelesaikan 3 elemen dari BlogFolio tersebut, yaitu “posting terbaru” , “shelf portfolio” dan “footer”.

Bagi yang baru mengikuti tutorial ini, silakan lihat bagian 1 terlebih dulu. Ok, mari kita lanjut!

Langkah 9

Kita masuk ke “posting terbaru”. Buat area konten dengan menggunakan Rounded Rectangular Tool, atur roundness nya menjadi 2 pixel.

Langkah 10

Selanjutnya kita membuat icon tipe posting, untuk stock icon nya silakan gunakan Free Tool Bar icons dari Gentleface (gratis untuk kepentingan personal). Buat lingkaran dengan menggunakan Ellipse Tool, tetapi rubah settingnya menjadi “Paths” sehingga tidak langsung terisi warna. Setelah itu Klik Kanan dan pilih Stroke Path.

* sebelum memilih Stroke Path, ubah dulu jenis Brush yang akan kita gunakan untuk lingkaran ini.

Langkah 11

Tempatkan icon pencil yang sudah di unduh tadi ke dalam lingkaran. Dan setelah itu samakan warnanya antara lingkaran dan icon pencil dengan menggunakan Layer Styles > Color Overlay.

Atur besar icon dengan menggunakan Transform Tool (Ctrl + T) dan tempatkan di kiri atas area konten.

Berikan efek grunge pada icon dengan menggunakan Layer Masking. Caranya persis sama saat kita membuat garis grunge di navigasi utama.

Langkah 12

Ketik juduli posting, info dan paragraf deskripsi. Gunakan Bebas Neue untuk judul post, Arial untuk info dan Georgia untuk paragraf. Atur layoutnya hingga menjadi seperti gambar di bawah ini,

Langkah 13

Buat frame foto (post image frame) dengan menggunakan Rounded Rectangular Tool dan letakkan di sebelah kiri paragraf.

Buat lagi persegi dengan menggunakan Rectangular Tool, kali ini untuk tempat menaruh foto (post image). Saya merubah warna frame foto menjadi agak kekuningan dan memberikan sedikit efek Drop Shadow.

Langkah 14

Kita akan membuat kesan foto yang berkilap dengan menggunakan Pen Tool. Gambar segitiga berwarna putih di atas area foto.

Selagi shape segitiga yang baru kita buat itu terseleksi, tekan icon masking pada window layers (sama dengan metode masking). Setelah itu gunakan Gradient Tool berwarna hitam putih, dan drag dari atas ke bawah sehingga ada bagian yang hilang secara halus.

Hasilnya akan terlihat seperti gambar di bawah ini. Saya sudah menambahkan foto juga.

Langkah 15

Gunakan Pencil Tool (B) berwarna biru sebesar 1 pixel untuk membuat garis. Duplikasi dan posisikan sehingga berada di antara baris paragraf.

Hide dulu sementara foto beserta frame yang telah kita buat tadi. Dan lanjutkan dengan garis merah vertikal.

Langkah 16

Buat efek ujung pita pada konten area dengan menggunakan Polygon Tool 3 sisi. Caranya sama saat kita membuat status aktif pada navigasi utama.

Hasilnya akan terlihat seperti gambar di bawah ini,

Langkah 17

Kita akan membuat link “Read More” dengan garis seperti efek coretan tangan. Ketik “Read More”, letakkan di kanan bawah. Gunakan Splatter Brush berukuran kecil (4-6 point) dan coret brushnya (cara ini memang agak sedikit manual ).

Langkah 18

Supaya tidak polos, kita akan menambahkan tekstur pada area konten. Unduh gambar kertas dari Flickr dan masukkan kedalam dokumen. Atur Brightness/Contrast dan Hue/Saturation kertas tersebut.

Setelah itu Clipping Mask tekstur kertas ke dalam area konten dan berikan efek Noise.

Supaya grafik ini bisa di coding, maka kita hanya akan menggunakan bagian atas saja dari tekstur. Dengan begitu tidak akan ada masalah nanti jika kontennya (area text) menjadi panjang ke bawah. Gunakan Layer Masking dan Gradient Tool.

Hasil sementara akan terlihat seperti di bawah ini, saya merubah warna judul posting menjadi merah pastel agar terlihat lebih menonjol di banding elemen lain.

Langkah 19

Selanjutnya kita membuat shelf/rak untuk portfolio terbaru. Gunakan Rounded Rectangle Tool dengan roundness 2 pixel.

Berikan Layer Styles Inner Shadow dan Gradient Overlay dengan setting seperti gambar di bawah,

Hasilnya akan seperti di bawah ini,

Langkah 20

Gunakan Pen Tool untuk membuat efek 3d (dudukan rak). Nyalakan guide supaya ujungnya pas dan gunakan warna yang lebih gelap dari shelf yang pertama.

Berikan Layer Styles Gradient Overlay pada dudukan rak tersebut.

Hasilnya akan seperti gambar di bawah ini,

Langkah 21

Supaya lebih realistis, kita akan memberikan bayangan dan sedikit cahaya pada shelf ini. Caranya sangat mudah, hanya dengan Soft Brush dan Transform Tool untuk mengatur posisi dan besarnya. Atur juga Opacity layer brush tersebut supaya tidak terlalu ‘keras’.

Langkah 22

Untuk area thumbnail portfolio kita menggunakan Rectangle Tool.

Supaya thumbnail ini tidak terlalu polos nantinya, kita akan menggunakan efek Inner Shadow sebesar 1 pixel dan Gradient Overlay.

Langkah 23

Berikan efek bayangan thumbnail dengan menggunakan Soft Brush. Saya tidak menggunakan Layer Styles Drop Shadow karena kebutuhannya tidak cocok, kalau di paksakan maka bayangannya tidak akan terlihat natural.

Hasilnya akan terlihat seperti di bawah ini,

Untuk menyelesaikan bagian ini, gabungkan dulu semua layer thumbnail (thumb dan bayangan thumb) kedalam 1 folder dan duplikasi sebanyak 2 kali. Lalu atur posisinya hingga terlihat rapih.

Langkah 24

Tambahkan heading “Latest Works” dan gunakan garis yang sama pada main menu (copy paste). Namun kamu boleh saja membuat garis baru lagi untuk bagian ini.

Langkah 25

Gunakan logo yang sama pada bagian footer, tambahkan sedikit tulisan “All Rights Reserved” (opsional). Untuk thumbnail portfolio saya menggunakan 3 karya dari pool Jurus Grafis di Flickr (ini hanya untuk mensimulasikan saja). Ketiga karya yang saya pakai adalah karya Nur Cholis, Ilham Sul Putra dan Pramono Streetatmoshphere (ijin ya teman ).

Untuk mempermanis dan tetap 1 gaya secara keseluruhan, maka saya memutuskan untuk menambahkan efek kilapan di thumbnail. Dan kita sudah selesai!

Hasil Akhir

Untuk melihat versi yang lebih besar (ukuran sebenarnya), silakan klik tautan ini atau klik gambar di atas.

Kesimpulan

Hal terpenting dalam mendesain web adalah perencanaan (Sitemap dan Wireframe), setelah itu kita baru masuk ke hal yang bersifat visual. Desain website pada dasarnya adalah pengaturan informasi (Information Architecture), visual hanyalah elemen pendukung agar user lebih mudah, nyaman dan betah mengkonsumsi website kita.

Untuk mempelajari tutorial ini lebih dalam, kamu bisa mengunduh dokumen Photoshop BlogFolio (2,7 Mb) melalui tombol di bawah ini. Sekarang, ayo giliran kamu yang mulai mendesain Selamat mencoba!

Setiap desainer tentu harus mempunyai portfolio. Namun selain mempunyai portfolio, kita juga harus mempunyai tempat untuk memamerkannya. Dan untuk saat ini jalan yang paling efektif adalah mempunyai blog yang sekaligus berfungsi sebagai portfolio.

Kenapa Blog-Portfolio (BlogFolio) ?

Alasan yang paling umum adalah karena membuat blog sangat mudah. Kamu bisa mendaftar di Blogspot atau WordPress, lalu langsung menggunakan template yang ada. Selain karena kemudahannya, ada beberapa faktor yang saya anggap penting yaitu,

• Tempat mencurahkan ide & pemikiran. Dengan cara ini kita bisa lebih memposisikan personal brand kita dan tidak hanya berperan hanya sebagai desainer grafis saja.
• Memperlihatkan hasil karya. Ini salah satu syarat yang sangat dasar, klien akan menggunakan jasa desain kita berdasarkan apa yang telah mereka lihat dari portfolio kita sebelumnya.
• Mendapatkan koneksi baru. Website tipe BlogFolio adalah cara yang tepat karena biasanya mempunyai sistem komentar agar kita bisa berinteraksi dengan pengunjung.

Template Gratis Tidak Akan Cukup

Inilah yang menjadi permasalahan. Kalau kita mau tampil unik maka kita harus mengubah template yang ada, bisa dari warna, layout, tipografi dan lainnya. Tetapi sebaiknya kita mendesain website BlogFolio kita dari nol. Dengan begitu kita akan memegang kontrol penuh atas semua elemen desainnya. Sudah siap? mari mulai!

Semua Berawal dari Sitemap

Setiap website, se-simple apapun tetap membutuhkan sitemap. Ini di perlukan untuk mengetahui halaman yang kita perlukan dan tidak kita perlukan. Biasanya fitur-fitur website (seperti latest comment, popular posts, dll) juga akan kita pikirkan disini. Sebagai contoh, saya membuat sitemap BlogFolio seperti di bawah ini,

Perancangan Wireframe

Tahap selanjutnya adalah wireframe. Wireframe bisa di bilang sketsa/gambaran kasar dari website yang akan kita desain. Biasanya saya hanya menggunakan kertas dan bolpen untuk menggambar cepat letak-letak elemen website. Setelah kita dapat sketsa kasarnya, selanjutnya kita mencoba di Photoshop. Wireframe yang saya rancang terlihat seperti di bawah ini,

Dengan membuat wireframe, maka pemikiran kita akan di fokuskan kepada fungsi terlebih dulu. Lupakan sejenak gaya visual, karena di tahap inilah kita bisa memikirkan elemen mana yang paling penting, dimana kita akan meletakkan elemen itu dan bagaimana mempresentasikan konten.

Saatnya Mendesain!

Ok, kita sudah merencanakan semuanya. Sekaranglah saatnya bergulat dengan photoshop. Kita bisa mulai memikirkan elemen yang benar-benar visual. Mulai dari warna, font, finishing, gaya desain dan lainnya.

Seperti biasa kita akan menggunakan 960 Grid System, silakan diunduh. Sedangkan font Bebas Neue akan menjadi pilihan yang tepat untuk Logo dan Headline.

Langkah 1

Buka template 960 Grid 12 kolom yang sudah di unduh tadi di Photoshop.

Untuk menyesuaikan dengan resolusi monitor mayoritas saat ini (widescreen) maka sebaiknya kita juga mendesain dalam bentuk widescreen.

Langkah 2

Kita mulai dengan membuat background terlebih dulu dengan menggunakan Rectangle Tool.

Gunakan warna coklat (agak pucat) untuk background BlogFolio ini. Setelah itu tambahkan tekstur dengan menggunakan efek filter Noise.

Supaya efek noisenya tidak terlalu berlebihan, gunakan maksimum 2 % saja. Sekarang ini saya menggunakan 1.2 %.

Langkah 3

Gunakan font Bebas Neue untuk logo. Font ini sangat cocok untuk headline dan memberikan kesan bold yang elegan. Atur posisinya sehingga berada di tengah-tengah dokumen. Gunakan guide ( Ctrl + ; ) supaya pas dengan grid yang kita gunakan.

Langkah 4

Berikan efek Letterpress pada logo ini. Tutorial Letterpress pernah di tulis Jurus Grafis sebelumnya. Atau beri layer style dengan mengikuti setting seperti gambar di bawah ini,

Selanjutnya tambahkan tagline di bawah logo. Langkah ini opsional, tetapi biasanya setiap website mempunyai tagline . Saya menggunakan font Georgia Italic untuk tagline ini.

Langkah 5

Kita akan membuat navigasi utama yang terdiri dari Home, Blog, Portfolio dan Contact. Gunakan font Bebas Neue untuk navigasi agar tetap satu irama dengan keseluruhan website nantinya.

Buat garis yang agak tebal dengan menggunakan Rectangle Tool dan letakkan di atas dan di bawah navigasi utama.

Langkah 6

Supaya tidak terlalu polos, maka kita akan memberikan sedikit efek grunge pada garis tersebut. Pilih salah satu layer garis, lalu tekan icon masking yang ada di bawah window layer.

Setelah itu pilih splatter brush (ada di default brush) dan mulailah “menghapus” garis tersebut. Maka akan tercipta efek “rusak” atau “grunge” tanpa merubah bentuk asli layer garis tersebut. Lebih jelas tentang teknik masking dasar.

Hasilnya akan terlihat seperti di bawah ini,

Langkah 7

Supaya lebih jelas user sedang berada di halaman tertentu, kita akan membuat status halaman yang aktif pada navigasi utama. Gunakan Rectangle Tool lagi, dan posisikan di bawah Home.

Buat kesan seperti pita dengan menggunakan bentuk segitiga yang di atur secara berderet.

Hasil sementara bentuk pita terlihat seperti gambar di bawah ini,

Langkah 8

Selanjutnya kita akan menambahkan beberapa efek layer styles pada pita tersebut agar tidak terlalu “datar”.

Khusus untuk efek Pattern Overlay, saya sudah mempunyai bentuk pattern seperti gambar di bawah ini. Kamu juga bisa bereksperimen dengan pattern yang lain.

Inilah hasil efek pada pita setelah semua efek layer styles di gunakan.

Bersambung

Supaya tidak terlalu panjang, tutorial ini saya bagi menjadi 2. Lihat kelanjutannya.

Fungsi sebuah blog sudah bergeser dari yang tadinya hanya sebatas tempat curhatan sang penulis, sekarang menjadi media publikasi bagi orang banyak (istilah keren nya, Citizen Journalism). Pada posting ini kita akan membahas beberapa elemen visual yang menjadikan desain sebuah blog menjadi efektif.

Sinergi Desain & Konten

Inti dari blog memang ada pada konten blog itu sendiri, tetapi seperti diskusi kita terdahulu, konten yang bagus jika tidak didukung dengan desain yang efektif maka tidak akan berhasil. Sebagian mungkin bisa bertahan karena faktor senioritas atau konten yang tidak dapat di temukan di blog lain. Tapi bagaimana dengan blogger junior yang walaupun mempunyai konten yang bagus tetapi kurang/belum memperhatikan desain blognya sendiri?

Lagipula, apa salahnya memanjakan pembaca dengan presentasi desain yang nikmat di mata? Selain membuat pembaca lebih betah berlama-lama di blog kita, manfaat lain tentu membuat pesan yang ingin kita sampaikan lebih mudah di tangkap.

Berikut adalah beberapa poin/tips yang bisa di gunakan untuk membuat desain blog menjadi lebih efektif.

Tata Letak Kolom Konten

Dari hasil pengamatan saya, ada 5 macam jenis tata letak kolom yang sering digunakan pada desain blog. Masing-masing tata letak mempunyai kelebihan dan kekurangan, namun kita bisa menentukan yang terbaik bagi keperluan blog yang akan kita desain.

1. Menurun Single (1 kolom)

Jenis ini merupakan tata letak yang standard dan hampir semua blog menggunakan metode ini. Dikarenakan sistem dokumentasi dan penanggalan blog yang berdasarkan hari, maka posting terbaru akan di letakkan di paling atas.

Kelebihan :

• Pembaca sudah familiar dengan tata letak ini
• Mudah menemukan posting terbaru
• Ruang untuk konten lumayan luas

Kekurangan :

• Dari segi visual terlihat biasa saja
• Pembaca akan mengalami sedikit kesulitan bila ingin melihat posting terdahulu

2. Menurun Paralel (2 kolom)

Sama dengan tipe menurun yang pertama, perbedaannya hanya pada kolom konten yang di bagi menjadi 2, sehingga dapat memuat lebih banyak konten di dalam satu halaman.

Kelebihan :

• Pembaca dapat dengan mudah melihat beberapa posting terbaru
• Memberikan pilihan kepada pembaca
• Blog terasa lebih kaya akan konten

Kekurangan :

• Layout secara keseluruhan akan terlihat penuh
• Kalau pengaturan masing-masing kolom tidak di perhatikan (tinggi kolom), akan terlihat berantakan
• Beberapa pembaca akan bingung mana yang mau di baca terlebih dulu

3. Grid (4-6 kolom)

Sesuai dengan namanya, tata letak ini menggunakan sistem grid untuk mengatur tata letak kolom kontennya. Desainer bebas menentukan akan menggunakan berapa kolom, tergantung dengan kebutuhan dan jenis konten (lebih banyak gambar atau tulisan).

Kelebihan :

• Secara visual terlihat menarik
• Semua posting dapat tampil dalam satu halaman

Kekurangan :

• Akan membingungkan pembaca
• Dari sisi layout ada kemungkinan akan terlihat berantakan

4. Full Width

Tipe yang satu ini tidak menggunakan kolom, tetapi menggunakan seluruh lebar halaman yang ada. Bahkan bagian sidebar kanan atau kiri tidak di gunakan, namun ada juga beberapa yang tetap menggunakan sidebar tetapi dengan porsi yang sangat minim.

Kelebihan :

• Konten menjadi sorotan utama
• Terlihat unik karena belum banyak yang menggunakan
• Lebih nyaman di baca
• Pembaca akan fokus kepada posting tanpa ada gangguan banner atau widget lain

Kekurangan :

• Terlihat “sepi”
• Agak sulit menampilkan posting-posting sebelumnya
• Butuh strategi khusus untuk menempatkan banner iklan atau widget lain

5. Custom Posting

Kalau kamu mempunyai keahlian di bidang coding, pilihan ini mungkin bisa kamu pertimbangkan. Tipe ini merupakan tipe “break the rules” karena sama sekali tidak menggunakan template yang sama pada setiap posting. Melainkan menyesuaikan desain dengan konten dalam arti yang sebenarnya. Konsep nya sama seperti majalah yang melayout setiap artikel nya secara personal.

Kelebihan :

• Sudah pasti terlihat unik
• Sinergi konten dan desain sangat dapat dirasakan
• Pembaca akan melihat seluruh posting karena penasaran akan tampilan visualnya

Kekurangan :

• Butuh waktu yang lumayan lama untuk membuat 1 posting saja
• Tidak semua orang menguasai coding

Pengaturan Font

Konten adalah jiwa dari sebuah blog karenanya kita harus memperhatikan cara kita menggunakan dan menampilkan text dengan baik. Tujuannya tak lain adalah agar nyaman di baca. Berikut ini beberapa hal yang harus di perhatikan,

1. Jenis Font

Di dalam blog pasti ada 2 jenis font yang harus di gunakan, yang satu sebagai heading, dan yang lain sebagai body text. Untuk bagian heading kita bisa menggunakan font yang jarang di pakai oleh desainer lain atau disesuaikan dengan kebutuhan dasar headline itu sendiri, yaitu untuk menjadi pusat perhatian.

Pada bagian heading kamu bisa menggunakan font yang tebal atau mencari font dengan bentuk yang unik (namun tetap terbaca). Penggunaan font yang tidak biasa pada heading juga bisa menjadi pembetukan karakter desain sebuah blog.

Yang kedua adalah font untuk body text. Di bagian ini sebaiknya kita menggunakan font standard yang memang di fungsikan untuk body text, alasan utamanya adalah agar text dapat di tampilkan dengan baik di semua monitor pembaca.

2. Ukuran Font

Yang akan lebih di bahas di sini adalah ukuran font pada body text. Karena perkembangan resolusi monitor saat ini, ukuran 12 point adalah ukuran standard. Tapi kalau kamu mau lebih meningkatkan kenyamanan dalam membaca bisa menggunakan 14 – 16 point, ukuran ini tergantung kepada jenis font yang kamu gunakan.

3. Line Spacing

Bagian ini sangat kecil, namun penting untuk menjaga kenyamanan saat kita membaca artikel. Rumus yang biasa di gunakan adalah besar font yang di gunakan, di tambah 4 point. Misalnya, kamu menggunakan font 14 point, maka line spacing yang ideal adalah 18 point.

Namun pengaturan line spacing harus di coba secara langsung, terkadang bisa juga line spacing 20 point (dengan besar font 14 point) lebih nyaman di baca karena bentuk dan jenis font juga mempengaruhi.

Desain Header & Logo

Sesimpel apapun desain header dan logo yang kamu buat haruslah menarik. Ibaratnya, header dan logo adalah wajah seseorang. Karena ini desain untuk blog, maka logo mungkin tidak menjadi keharusan, tetapi akan lebih baik jika kamu mempunyai logo walaupun hanya berbentuk tipografi (logotype). Desain logo yang unik akan menjadi identitas blog.

Desain header dapat disesuaikan dengan “feel” keseluruhan blog yang ingin kamu dapatkan. Kamu bisa bereksplorasi dengan ilustrasi, texture, atau bahkan bermain dengan white space.

Inspirasi Desain Header Blog

Styling Image

Sebenarnya trik ini sangat simpel, hanya menambahkan border di sekitar image/photo yang kita gunakan pada posting. Dengan cara ini image akan tampil lebih menarik walaupun efek nya tidak terlalu terlihat. Akan terasa perbedaanya antara yang menggunakan dan tidak menggunakan styling image.

Contoh Penerapan Border Pada Gambar

Optimasi Sidebar

Mayoritas blog mempunyai sidebar, tapi terkadang kita suka bingung ingin menaruh fitur/widget apa di bagian ini. Sebelum kamu menambahkan widget dengan membabi buta, lebih baik pikirkan dulu hal selain konten yang ingin kamu sampaikan kepada pembaca.

Untuk optimasi sidebar ini tidak ada tips yang baku, semuanya kembali lagi kepada kamu. Dari hasil pengamatan saya, sidebar pada blog biasanya di gunakan untuk,

• Komentar Terkini
• Posting Pilihan (Featured)
• Posting Terpopuler
• Banner Iklan
• Twitter / Facebook Page stream
• Icon Social Media
• Flickr Gallery
• Kategori Posting
• Archives
• Voting Widget (menampilkan voting atau hasil voting)
• Peringkat Komentator
• ( Kemungkinan lain, silakan beritahu saya melalui kolom komentar )

Inspirasi Sidebar

Kolom Komentar

Bagian yang ini memang sudah menjadi default dari semua blog engine yang ada dan tujuan nya semua sama, yaitu untuk menciptakan komunikasi 2 arah antara penulis dan pembaca.

Banyak cara untuk menjadikan kolom komentar menjadi menarik, selain dari segi visual, penggunaan kata-kata yang unik juga menjadi faktor tambahan supaya pembaca mau menulis komentarnya. Agar pembaca nyaman menulis komentar, sebaiknya bagian field komentar di buat lebih lebar dan agak tinggi, ini akan berguna bagi pembaca yang ingin menulis komentar yang lumayan panjang.

Inspirasi Kolom Komentar

Optimasi Footer

Trend Big Footer sepertinya masih akan berlangsung lama karena fungsinya sebagai area pemberhentian kedua setelah area konten yang berada di paling atas.

Ada 2 tujuan dasar mendesain big footer pada blog,

1. Untuk meletakan fitur tambahan yang tidak cocok (tidak muat) di letakan di sidebar atas.
2. Membuat pembaca lebih mendalami konten blog (misalnya, dengan menaruh widget “Most Discussed Articles”)

Yang pasti footer bukan lagi ruang yang di anak-tiri kan lagi, malah bisa mendukung keseluruhan konten blog.

Inspirasi Footer Efektif

Kesimpulan

Blog dengan konten yang bagus akan menjadi lebih bagus lagi jika menggunakan desain yang efektif dan cantik. Konten dan desain tidak lagi menjadi hal yang terpisah, melainkan bersinergi menghasilkan suatu blog yang memukau dan berguna bagi banyak orang.

Sudah siap mendesain (atau me-redesain) kamu? Atau ada elemen yang tertinggal? Mari berkomentar!

Walaupun secara visual kehadirannya sering terabaikan, tetapi bagi desainer yang teliti dan mengejar detail pada karyanya, 1 pixel itu kegunaannya sangat penting sekali. Terkadang pengunaan garis 1 pixel secara tepat bisa menjadi salah satu hal yang membedakan desainer baik dan desainer terbaik.

Desain website modern sekarang ini banyak menggunakan trik 1 pixel. Kegunaannya bisa bermacam-macam, selain untuk memberikan detail visual yang tidak terlalu berlebihan, garis 1 pixel juga bisa menambah faktor kenyamanan pengguna. Berikut beberapa contoh penggunaan garis 1 pixel pada desain website.

Memperjelas Batas

Yang ini sudah jelas fungsinya, yaitu untuk memberikan jarak antar konten satu dengan yang lain supaya pengguna mendapat ruang yang lebih nyaman dalam membaca.  Biasanya di gunakan untuk memisahkan beberapa kelompok text/paragraf (contoh: Twitter Stream, News Feed, dll).

Trik untuk membuat efek pembatas seperti gambar di atas adalah dengan menggunakan 2 garis masing-masing berukuran 1 pixel. Lalu buat warna garis yang satu lebih terang dari warna yang lainnya, dan tempatkan keduanya saling berdempetan.

Mempertajam Bidang

Garis tipis 1 pixel juga bisa di gunakan untuk memoles garis luar bidang, sehingga hasil akhirnya akan terlihat lebih tajam dan berbeda. Efek ini memang tidak terlalu jelas kelihatan, tetapi bila di bedakan antara yang memakai dan yang tidak, baru akan terlihat mana yang lebih nyaman di mata.

Memberikan Detail Visual

Tombol yang simpel dapat terlihat menarik kalau kita menggunakan outline 1 pixel dengan warna yang tepat. Dan tentu saja tombol yang efektif adalah tombol yang lebih ‘mengundang’ pengguna untuk mengklik.

Contoh & Inspirasi

Kesimpulan

1 pixel memang kecil, namun memegang peranan penting terhadap hasil akhir suatu desain website. Dengan penggunaan dan trik yang tepat kita bisa menciptakan detail yang akan memberikan dampak signifikan.

Jadi, kalau sekarang kamu sudah selesai mendesain website, coba cermati kembali supaya hasilnya adalah sebuah desain website yang ‘matang’.

Apakah kamu sering menggunakan trik ini juga? Atau ada trik detail yang lain? Silakan berbagi di kolom komentar

Jangan lupa bergabung di Grup Flickr Jurus Grafis untuk memamerkan karya kamu, temui juga Jurus Grafis di Twitter dan Facebook. Mari berlangganan Jurus Grafis melalui Email atau RSS.

Ya kamu tidak salah membaca, kita akan merancang desain website kartunama. Sekarang ini sedang tren di luar sana karena gaya visual nya yang biasanya minimalis dan to the point. Sehingga waktu loading yang di butuhkan lebih cepat di banding website portfolio biasa.

Sebelum kita memulai mendesain untuk website (jenis apa saja, tidak hanya web kartunama ini) kita perlu mengunduh template grid yang sudah menjadi standar jaman sekarang, yaitu 960 Grid System. Dengan menggunakan grid ini kita di bantu, karena ukuran lebar website kita pasti aman di resolusi monitor manapun (dari 1024 x 768 ke atas), dan juga untuk mempermudah proses pengkodingan nantinya.

Mengapa website kartunama? well, selain tren, cara penggunaan website ini juga mudah, tidak banyak embel-embel sana sini dan konsep bentuk nya yang mini sangat menarik dan berbeda, seperti kartunama tetapi online. Biasanya hanya terdiri dari 3-4 menu utama saja, walaupun ada juga yang hanya 1 menu (halaman about saja). Ok, jika sudah siap semua, mari kita mulai!

Langkah 1

Buka template 960 gs yang sudah kamu unduh tadi di photoshop. Untuk website jenis ini, saya menggunakan tipe 12 kolom.

Langkah 2

Buat background dengan menggunakan Rectangle Tool (U). Sisakan bagian atas tetap kosong, karena kita akan membuat 2 bidang background.

Duplikasi layer ‘back1′ sehingga menghasilkan layer ‘back1 copy’, ubah nama layer nya menjadi ‘back2′. Lalu pindahkan ke bawah layer ‘back1′ dan geser ke atas sehingga menghasilkan bidang background yang kedua.

Langkah 3

Gunakan Rectangle Tool lagi dan buat bidang berwarna putih sebagai dasar konten web ini. Atur supaya bidang ini pas berada di tengah dokumen. (caranya mudah tinggal menghitung grid kiri dan kanan lalu samakan jumlahnya). Perhatikan juga pengorganisasian layer kamu, gunakan folder dan namakan setiap layer. Ingat, mungkin saja bukan kamu nantinya yang melakukan proses koding, jadi lebih baik buat dokumen ini mudah di mengerti.

Selanjutnya membuat bagian bawah bidang konten dengan Rounded Corner. Tetap gunakan Rectangle Tool, tekan icon Rectangle Tool sampai muncul list bentuk-bentuk yang bisa kita gunakan, lalu pilih Rounded Rectangle.

Sengaja saya buat terpisah supaya nanti jika konten nya banyak (memanjang ke bawah), maka kita tinggal mengatur shape Rounded Rectangle saja yang masih bersifat vektor dengan sangat mudah.

Langkah 4

Kita akan membuat efek seperti kertas berlipat dari dalam background. Buat bidang diantara layer ‘back1′ dan ‘back2′ dengan menggunakan Rounded Rectangle Tool.

Lalu buat bayangan lipatan nya, masih dengan menggunakan Rounded Rectangle Tool, setelah itu lakukan Masking pada layer tersebut. Cara Masking adalah pilih layer yang mau di masking > klik kanan > Create Clipping Mask.

Buat juga bayangan untuk sisi kanan dengan teknik yang sama, sehingga hasil yang kamu dapat akan menjadi seperti dibawah ini.

Langkah 5

Supaya tidak terlihat kaku, maka kita akan memberikan efek dimensi di dalam bayangan tersebut. Dobel klik layer bayangan tersebut dan berikan Style Gradient Overlay. Aplikasikan juga pada sisi bayangan yang satu lagi, jangan lupa merubah arah gradient nya sehingga terlihat natural.

Langkah 6

Selanjutnya kita membuat bayangan untuk bidang putih, yang perlu di perhatikan adalah intensitas bayangan, jangan terlalu terlihat sekali, cukup sedikit saja dengan pengaturan Opacity. Jadi efek yang di hasilkan akan terlihat lebih lembut dan natural.

Gunakan Soft Brush (B) karena lebih mudah di kontrol dan tidak kaku, daripada langsung memberikan efek Drop Shadow biasa.

Langkah 7

Berikan dimensi pada background dengan menggunakan Soft Brush. Buat layer baru, lalu langsung masking di atas layer ‘back1′. Setelah itu kamu tinggal mem-brush dari kiri ke kanan.

Langkah 8

Sekarang background yang kedua, di bidang ini kita akan memberikan efek cahaya seolah-olah ada di belakang area konten. Caranya masih sama dengan langkah 7.

Langkah 9

Buat tombol menu utama. Untuk saat ini saya menggunakan 3 menu saja, yaitu About, Works dan Contact. Gunakan Rounded Rectangle Tool dan atur posisi nya sehingga jarak setiap tombol sama persis.

Langkah 10

Berikan Layer Style pada ketiga tombol tersebut. Yang pertama kita akan menggunakan Gradient Overlay, untuk menghasilkan dimensi (supaya tidak flat), dan yang kedua kita menambahkan Stroke, agar tombol terlihat lebih tajam. Ikuti pengaturan di bawah ini, lalu Copy Layer Style (caranya : pilih layer tombol > klik kanan) ke setiap tombol.

Saya memutuskan untuk mengatur ulang bentuk tombol menjadi seperti di bawah ini. Menggunakan warna merah pada tombol yang sedang aktif dan warna abu-abu muda untuk yang tidak aktif.

Langkah 11

Namakan tombol tersebut dengan Type Tool, saya menggunakan font Georgia Bold Italic dan setelah itu beri efek Drop Shadow supaya lebih jelas.

Langkah 12

Buat dimensi pada bagian konten area dengan menggunakan Rounded Rectangle Tool, lalu Masking Shape tersebut dengan Gradient.

Langkah 13

Sekarang saatnya kita mengisi bagian konten tersebut, saya menggunakan gaya yang minimal saja. Gunakan foto atau avatar kamu, lalu atur tata letak tulisan.

Yang perlu di ingat adalah ukuran font pada body text, sekarang ini standar nya adalah 14 point, memang 12 point masih terbaca, tetapi saya tidak mau menyulitkan orang yang melihat website kartunama ini.

Hasil Akhir

Selanjutnya tinggal membereskan tiap bagian, saya berusaha membuat nya se-simpel mungkin. Untuk bagian Works, langsung menampilkan portfolio, jika di klik akan muncul LightBox lengkap dengan judul projek. Dan yang terakhir bagian Contact, langsung menampilkan form kontak.

Kamu bisa mengganti bagian Contact, dengan icon social media, seperti Facebook, Twitter dan lain nya untuk memudahkan orang mengontak dan berteman dengan kamu.

Yak! kita sudah selesai, tinggal merapihkan dokumen (menamakan layer dan mengatur folder) lalu siap untuk di berikan ke web developer/programmer, atau lebih baik lagi kalau kamu bisa melakukan pemrograman sendiri.

Bagi yang berbaik hati ingin mengkoding website kartunama ini silakan, tolong beritahu saya dan kita bisa bagikan gratis kepada para pembaca Jurus Grafis, mau sekalian di buat tutorial koding nya di blog kamu juga boleh. Dapatkan dokumen ini (1 Mb) dengan menggunakan tombol unduh di akhir posting.

* Update – Ikuti juga tutorial konversi PSD menjadi CSS/Html desain web kartunama ini di VisualMagz

Tautan Terkait :
32 Contoh Tren Web Design Seperti Kartunama