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.

Melanjutkan posting sebelumnya tentang bedah desain blog, kali ini kita akan menikmati beberapa tren dan contoh desain blog yang sedang populer di tahun 2010.

Tampaknya penggunaan layout yang minimalis, whitespace yang lumayan luas, dan pengaturan tipografi menjadi beberapa poin penting dalam mendesain blog saat ini. Kata orang, melihat secara langsung akan lebih baik daripada hanya berkata-kata, jadi silakan menikmati

Alonso

Yang menarik dari desain blog ini adalah elemen kecil yang “menabrak” layout. Seperti pada tag “by” dan kotak search di sebelah kanan yang melewati area konten.

The Design Cubicle

Bagi yang pernah melihat blog Brian Hoff ini pasti tidak lupa dengan styling archives nya di sidebar kanan. Selain itu area konten yang sengaja di buat lebih kecil dari blog lain juga menjadi satu ciri khas.

Christoph Zillgens

Penempatan icon di sebelah kiri yang melambangkan tipe setiap posting terbilang unik. Tipe seperti ini biasanya menggunakan platform Tumblr (yang memang sudah dari sananya seperti itu). Detil garis pembatas di setiap akhir posting juga memberikan detil yang kecil namun berdampak besar.

Fresh 01

Wow! Itu kata yang saya ucapkan sendiri pada waktu pertama kali melihat blog ini. Di lihat dari layout nya sih biasa saja, tapi kalau kamu sudah mulai scrolling, disitulah trik yang membuat blog ini menjadi favorit saya pribadi.

Jay Hollywood

Penggunaan gambar yang besar pada header membuat blog ini mudah di kenali, walaupun dampak negatif nya adalah mengganggu navigasi utama di atas. Ini merupakan salah satu contoh layout dasar biasa saja bisa terlihat bagus jika di padukan dengan gambar yang menarik.

Morphix Blog

Desain blog ini membuktikan kalau grid dan ilustrasi bisa juga berkolaborasi menghasilkan desain yang bersahabat (fun) namun tetap terlihat bersih dan modern.

Particle Lab

Saya tidak tahan melihat tipografi pada heading nya, sangat besar sekali! tapi itulah yang menjadi ciri khas blog ini. Perpaduan warna yang kalem dan warna-warni menghasilkan satu desain yang sedap di pandang. Mereka juga punya selera humor tersendiri dengan membuat lingkaran di header bisa bergerak (bukan dengan flash).

Thomas Maier

Simplisitas maksimum. Itu kesan pertama yang saya dapat. Elemen grafis yang menonjol hanya ada pada pita merah di kanan atas. Selebih nya semua visual lebih di utamakan kepada fungsi. Yang saya agak bingung, apa tujuan panah di samping menu links? Mungkin ada yang bisa berspekulasi? silakan berkomentar

Trent Walton

Sekali lagi contoh perkawinan layout sederhana dan visualisasi yang kuat akan menghasilkan desain yang powerful. Header yang digunakan adalah gambar utama posting, sehingga setiap kali ada posting baru, maka header akan ikut berganti. Ide yang bagus!

Veerle Duoh

Saya suka detil tekstur pada background blog ini, hampir tidak terlihat tapi kita bisa merasakannya. Kombinasi warna blog ini juga unik, feminin tapi juga tidak terlalu feminin, pas! Cara pengaturan layout juga tidak seperti blog kebanyakan, banyak yang bisa di pelajari dari blog Veerle ini.

Ardian Trimurti

Sejak pertama kali melihat langsung suka. Memang dari segi visual tidak ada yang menonjol di blog Ardian ini. Tetapi pegaturan tipografi yang sangat baik dan penggunaan whitespace yang maksimal membuat blog sederhana itu tidak terlihat sederhana. Yang menjadi nilai tambah adalah status visited link di kanan atas (akan ada icon checklist). Saya baru pertama kali melihat yang seperti itu.

Working Library

Bagi sebagian orang tampilan blog yang satu ini akan di anggap membosankan. Mungkin karena terlalu sederhana?. Namun yang pasti dari sisi fungsionalitas desain tipe ini sangat baik, heading yang besar, di bantu dengan sedikit deskripsi tentang posting. Saya merasa seperti membaca sebuah buku.

Information Architects

Hampir sama dengan blog Trent Walton di atas, tipe ini sangat sederhana. Mengedepankan konten daripada visual. Pengaturan font pada heading dan body text sangat baik, sehingga membuat blog iA ini nyaman di baca dalam waktu yang lama.

Bagaimana menurut kamu inspirasi blog di atas? Ada blog favorit yang ingin kamu tambahkan? silakan berkomentar.

Tinjauan Desain by Request

Atas saran Ardian saya membuka kesempatan bagi teman-teman yang ingin desain blog/website nya di review di jurusgrafis. Kamu bisa mengirimkan link dan deskripsi singkat tentang website kamu ke jurusgrafis@gmail.com

Selain memperoleh exposure, secara tidak langsung kamu akan mendapatkan feedback (dari komunitas jurus grafis juga melalui komentar), yang mudah-mudahan bisa di gunakan untuk mengembangkan website kamu. So, jangan ragu-ragu!

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!

Menu navigasi adalah salah satu komponen penting dalam sebuah website, menu navigasi memberikan jendela kedalam kemampuan kreatifitas web desainer untuk menghasilkan elemen fungsional yang sangat penting didalam sebuah website.

Karena nilai tersebut, menu navigasi diletakkan ditempat yang paling mudah terlihat sehingga memudahkan pengguna untuk menjelajahi website tersebut, dan hal tersebut dapat memberikan penilaian awal terhadap website tersebut.

Desain menu navigasi saat ini telah mencapai level ketertarikan pengguna. Meskipun terdapat pribahasa “Konten adalah Raja” namun untuk mengakses konten tersebut tentu dibutuhkan menu navigasi. Didalam artikel ini, kita akan menjelajahi beberapa tren dalam mendesain menu navigasi.

Navigasi 3 Dimensi

Delibar

Area konten dari website Delibar terlihat seperti kertas yang ditumpuk menjadi dua, dengan menu navigasi yang seperti menyambungkan keduanya. Navigasi tersebut juga memiliki efek JavaScript yang bergerak keatas bila kita menunjukkan cursor kita ke navigasi tersebut.

Blue Door Baby

Navigasi Blue Door Baby mempunya style seperti pita yang yang menjadi satu di atas feature area. Item menu yang ada menggunakan gambar yang berisi text yang memiliki efek subtle-inset-text.

Contoh Lain Navigasi 3D

Balon Percakapan

Mendesain menu seperti bentuk balon percakapan sepertinya merupakan tren populer lainnya. Ini adalah hal yang hebat untuk keluar dari menu berbentuk kotak yang konvesional

Alexarts

Dengan latar sebuah kota. Navigasinya merupakan balon percakapan yang besar yang menunjukkan ke beberapa poin yang berbeda didalam latar.

Kingpin Social

Menu utama dari Kingpin Social ini sangatlah saya untuk dilewatkan, dengan ukuran yang besar, ujung yang tumpul, dan apabila menu tersebut aktif maka akan ada efek highlight warna merah dengan bentuk balon percakapan.

Contoh Lain Balon Percakapan

Ujung Yang Tumpul (Rounded Corner)

Rounded Corners biasanya digunakan untuk memperhalus bentuk dari bentuk kotak, berikut ini tren – tren penggunaan rounded corners kedalam website.

Meta lab

Rounded Corner dengan tambahan icon disebelah kiri membuat menu navigasi website ini terlihat istimewa!

Gugafit

Dengan Rounded Corner dan beberapa efek seperti ketika kita mengarahkan kursor kita ke menu tersebut maka menu tersebut akan berubah menjadi hijau, dan bila menu tersebut aktif maka akan muncul efek seperti tombol tersebut sedang ditekan.

Contoh Lain Rounded Corner

Penggunaan Ikon Dalam Navigasi

Biasanya di gunakan untuk memperkuat penamaan di tiap menu. Misalnya menu “Home” selalu di sandingkan dengan ikon bergambar rumah dan lainnya. Fungsi yang lain adalah untuk mempermudah pengguna/pengunjung dalam mengidentifikasi menu tanpa harus membaca menu tersebut.

Source Bits

Source bits menggunakan ikon untuk item menu dan item sub menunya.

Dreamling.ca

Website Dreamling.ca menggunakan ikon dan teks yang terlihat dibuat dengan style sketsa tangan dengan bolpen tinta hitam. Desain dengan style seperti ini memberikan cita rasa yang sangat personal (artsy).

Contoh Lain Penggunaan Ikon pada Navigasi

Kesimpulan

Banyak tren – tren desain menu navigasi yang bisa dijadikan referensi ataupun inspirasi, tuangkan semua kreatifitas yang anda miliki kedalam menu navigasi website/blog anda, mungkin saja anda bisa menemukan tren desain navigasi baru Btw, termasuk jenis apakah desain navigasi anda?

Update

Artikel ini adalah saduran dari Smashing Magazine. Showcase of Modern Navigation Design Trends. Thanks untuk anonymous yang sudah memberi link aslinya via kolom komentar. Saya akan lebih berhati-hati lagi menerima postingan kontributor sekarang

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

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.

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.