Mendesain Blog Minimalis dengan Grid 960

Tutorial kali ini berdasarkan pada projek redesain situs DesainDigital. Kita akan menggunakan Photoshop untuk membuat desain situs minimalis dengan berbasiskan pada grid 960.gs. Kita akan memberikan cukup perhatian pada detail-detail kecil. Kita juga akan menjaga kesinambungan desain dengan mempertahankan gaya setiap elemen agar tampilannya tetap terasa menyatu.

[hr]

Preview

Sebelum memulai tutorial ini, lihat desain situs yang akan kita peroleh di bawah.

Mendesain Blog Minimalis dengan Grid 960

[hr]

Step 1

Untuk layout situs ini, kita menggunakan grid 960. Jadi, mulai dengan mengambil file layout yang tersedia di 960.gs. Di dalam file zip, buka file PSD di Photoshop. Dalam file telah tersedia beberapa guide dan group layer 12 Col Guide yang semuanya membentuk kolom-kolom. Inti dalam penggunaan guide adalah semua elemen harus berada dalam guide. Anda bisa membandingkannya dengan hasil desain yang kita peroleh di bawah. Semua elemen seperti kotak posting, logo, atau tweet semuanya berada dalam kolom.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 2

Isi Background dengan warna latar. Caranya dengan klik Edit > Fill dan pilih Color. Saya menggunakan #e9e6e1 di sini.

Mendesain Blog Minimalis dengan Grid 960

Step 3

Untuk bagian atas kita akan memberi ornamen unik. Mulai dengan membuat shape persegi di bagian paling atas. Gunakan warna #e9e4db. Di bawahnya, tambahkan path berbentuk lingkaran. Seleksi path lingkaran, tekan Ctrl + Alt + T untuk menduplikasinya. Geser beberapa pixel ke kanan dengan menekan tombol panah kanan. Ulangi proses transformasi dengan menekan Ctrl + Shift + Alt + T.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 4

Tambahkan layer style Drop Shadow.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 5

Sekarang kita akan menambahkan sedikit tekstur ke dalam shape. Buat layer baru di atas layer shape. Isi dengan putih. Klik Edit > Add Noise. Jangan gunakan terlalu banyak noise, cukup hingga terlihat ada titik-titik saja. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask. Ubah blend mode ke Multiply dan turunkan oapcity layer ke 70%.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 6

Tambahkan logo. Agar terlihat menonjol dibandingkan latarnya, kita tambahkan layer style Stroke pada logo.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 7

Buat seleksi ellipse di bawah logo. Isi dengan hitam dan haluskan dengan Gaussian Blur untuk memberi kesan bayangan pada logo.

Mendesain Blog Minimalis dengan Grid 960

Step 8

Di sisi kanan, buat sebuah shape rounded rectangle putih. Gambar juga path menggunakan tool pen untuk memberi tampilan bubble speech. Pastikan Anda memilih Add to Shape untuk menggabungkan kedua path.

Mendesain Blog Minimalis dengan Grid 960

Step 9

Tambahkan Inner Shadow, Inner Glow, dan Outer Glow. Ketiga styles ini memberi kesan emboss, seolah-olah latar menjorok ke dalam. Beri tulisan tweet terakhir.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 10

Masuk ke iconfinder dan cari ikon Twitter. Simpan ikon di bawah kotak tweet.

Mendesain Blog Minimalis dengan Grid 960

Step 11

Di bawah ikon Twitter, tambahkan navigasi halaman. Perhatikan bahwa penempatan elemen-elemen ini, teks tweet dan navigasi halaman, harus tetap mengikuti kolom.

Mendesain Blog Minimalis dengan Grid 960

Step 12

Sekarang kita akan membuat inset line. Cara membuatnya mudah saja, buat dua garis 1px berwarna hitam dan putih menggunakan tool pencil. Setiap garis berada di layer terpisah. Ubah opacity layer garis hitam menjadi 10% dan garis putih menjadi 50%.

Mendesain Blog Minimalis dengan Grid 960

Step 13

Dengan tool eraser lembut hapus kedua sisi garis hingga keduanya tepat berada di dalam kolom. Ini memberikan efek fading yang menarik di kedua sisi garis.

Mendesain Blog Minimalis dengan Grid 960

Step 14

Gandakan inset line dan simpan di bawah garis pertama.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 15

Tuliskan nama-nama kategori artikel untuk navigasi.

Mendesain Blog Minimalis dengan Grid 960

Step 16

Buat lagi garis-garis inset tipis memisahkan setiap kategori.

Mendesain Blog Minimalis dengan Grid 960

Step 17

Di sisi kanan, buat sebuah rounded rectangle putih. Di atasnya tambahkan tulisan Search… dengan warna abu-abu terang. Kita memilih warna ini agar tidak terlalu kontras karena bisa mengganggu fokus pada teks lainnya.

Mendesain Blog Minimalis dengan Grid 960

Step 18

Buat shape persegi dengan ukuran tepat 8 kolom. Isi artikel akan berada di kotak ini.

Mendesain Blog Minimalis dengan Grid 960

Step 19

Tambahkan layer style Drop Shadow.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 20

Kita tidak akan menggunakan drop shadow biasa, karena itu terlihat sangat jelek. Jika kita gunakan gunakan di sini, hasilnya akan sangat tidak unik. Kita akan memodifikasi bayangan ini.

Klik kanan daftar layer style di panel Layers dan pilih Create Layer. Langkah ini akan memisahkan bayangan ke dalam layernya sendiri. Tekan Ctrl + T lalu perkecil bayangan, klik kanan dan pilih Warp. Geser kotak di kanan bawah hingga kita peroleh sedikit bayangan yang keluar. Turunkan opacity bayangan ke 15%.

Bayangan seperti ini memberi efek seolah kotak mengelupas keluar dari latar. Unik dan tentunya jauh lebih baik dari Drop Shadow standard.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 20

Tambahkan layer style stroke 1px. Walaupun kecil, hanya 1px, ini cukup membantu untuk meningkatkan kontras antara kotak dengan latar.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 22

Tambahkan thumbnail artikel dengan ukuran 200×200 px ke dalam kotak. Pastikan Anda memberikan cukup banyak jarak ke sisi kiri dan kanan kotak. Jarak ini mempermudah mata ketika menscan gambar. Tambahkan juga efek Stroke 1px. Gunakan setting yang sama dengan stroke pada kotak artikel. Dengan efek yang sama, kita mempertahankan kesinambungan desain. Jika berbeda, misal warnanya beda atau ukurannya beda, ini berpotensi membingungkan pembaca.

Mendesain Blog Minimalis dengan Grid 960

Step 23

Sekarang kita tambahkan juga teks, seperti judul, isi artikel, data penulis, tanggal, dst. Saya tekankan lagi bahwa kita perlu mempertahankan kesinambungan desain. Usahakan agar semua link menggunakan warna yang sama.

Bersama dengan border 1 px pada kotak dan thumbnail, ini menghasilkan kesinambungan desain.

Mendesain Blog Minimalis dengan Grid 960

Step 24

Kumpulkan semua layer isi artikel ke dalam sebuah group layer. Ini akan mempermudah ketika kita ingin membuat post lain. Kita tinggal menggandakan group layer tersebut dan mengganti isinya.

Mendesain Blog Minimalis dengan Grid 960

Step 25

Buat juga kotak navigasi halaman di bagian akhir artikel. Untuk menjaga kesinambungan desain, gunakan style Stroke 1px yang sama.

Mendesain Blog Minimalis dengan Grid 960

Step 26: Sidebar

Buat kotak sidebar dengan ukuran tepat 4 kolom. Jaga kesinambungan desain dengan tetap menggunakan Stroke 1px. Warna teks biasa dan link harus disamakan juga dengan warna-warna yang sudah ada. Seperti saya katakan, ini akan menjaga kesinambungan desain.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 27: Footer

Untuk footer, kita tinggal menggandakan shape yang telah dibuat di Step 3. Putar 180 derajat dan perbesar shape rectangle hingga memenuhi seluruh area footer.

Mendesain Blog Minimalis dengan Grid 960

Step 28: Box Footer

Buat kotak footer dengan ukuran 4 kolom. Isi dengan judul kotak dan tulisan. Pastikan menggunakan warna teks yang sama.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 29: About Us

Saya ingin menonjolkan kotak About Us dengan menambahkan gambar profil saya. Tambahkan foto dan di sebelahnya tambahkan teks This is me dengan font Jellyka Hand Writing. Tulisan ini dipilih untuk memberi kesan personal.

Mendesain Blog Minimalis dengan Grid 960

Step 30

Aktifkan warp teks dan pilih Style Arc. Ini akan membuat teks sedikit melengkung dan memberi kesan alami.

Mendesain Blog Minimalis dengan Grid 960

Step 31

Tambahkan style Drop Shadow pada gambar profil. Seperti tadi, kita tidak ingin menggunakan drop shadow standar karena sangar buruk. Klik kanan style dan pilih Create Layer. Lakukan proses transformasi warp hingga sebagian bayangan mencuat ke bawah.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

[hr]

Hasil Akhir

Sampai sini, proses desain situs di Photoshop telah selesai. Langkah berikutnya adalah mengubah desain ke format yang ingin diinginkan, bisa berupa HTML dan CSS, atau dalam bentuk theme wordpress. Jika proses coding dilakukan pihak lain, pastikan untuk merapikan setiap layer terlebih dahulu. Namai setiap layer, kelompokkan ke dalam group layer, dan tambahkan data-data lain yang diperlukan.

Mendesain Blog Minimalis dengan Grid 960

Saya harap Anda belajar banyak dari tutorial ini. Jika ada pertanyaan silakan tuliskan dalam komentar di bawah.

Iklan

82 thoughts on “Mendesain Blog Minimalis dengan Grid 960

  1. Wih,ternyata tutorialnya udah ada. Pake studi kasus desain blog ini sendiri pula πŸ˜€

    Sedikit nanya. Dalam bikin mockup di photoshop sebagai desainer, perlu gak sih kita bikinnya pixel-perfect gitu? Yah setidaknya presisi lah, demi memudahkan programmer mengubahnya dalam bentuk HTML/CSS.. Selama ini saya belum pernah bikin desain untuk dikerjain programmer lain soalnya. Desain sendiri ya di-coding sendiri juga πŸ˜›

  2. Sebaiknya pixel perfect. Programmer yang baik tentunya akan memastikan agar hasil codingnya sama persis dengan mockup di Photoshop.

    Seperti yang Anda lihat di sini, hasil akhir theme situs ini tidak beda jauh dengan mockup PSD-nya. Berarti proses coding-nya berhasil.

  3. mantap bg! tutorialnya detail. sangat bermanfaat bg yg berminat menjadi web designer.

    Mungkin kedepannya bisa dilanjutkan dgn tutorial coding, msh sangat jarang di Indonesia! πŸ™‚

  4. Ya, memang sebaiknya para desainer web menguasai Photoshop juga.

    Fungsi Photoshop untuk membantu visualisasi desain web. Kalau langsung coding begitu saja, saya tidak yakin hasilnya akan bagus.

  5. terima kasih mas japrie….tutorial seperti ini sangat bermanfaat buat saya….di tunggu tutorial berikutnya…

  6. Ternyata cukup rumit juga untuk mendesain sebuah situs yang saya anggap cukup sederhana ini, Mas Jeprie. Jumlah 31 step ini masih belum ditambah lagi dengan satu proses lagi, yaitu proses konversi dari desain dengan format PSD ke format code-code web HTML dan CSS.

    Hem, kalau saya sudah nyerah, hehe….Mending saya serahkan ke ahlinya aja karena saya ndak mudeng blas kalau sudah bicara pemograman web. Saya hanya mengerti kode-kode HTML dasar saja.

  7. Kalau mau mengubah ke theme wordpress ada 3 tahap. Desain mockup di Photoshop, konversi ke HTML/CSS, lalu ke theme wp.

    Saya juga tidak bisa coding. Di projek redesain ini, proses coding diserahkan ke teman.

  8. Nice!
    BTW, saya sendiri memilih aliran “mockup in markup”. Jadi mockup dibuat langsung dalam dokumen HTML bukan PSD. Photoshop/GIMP digunakan untuk mengolah grafis/gambar pendukungnya saja.

    Mockup dengan photoshop mungkin lebih mudah dikerjakan — daripada dengan kode — tetapi memiliki kekurangan. Misalnya pada masalah pixel prefect, kita tahu browser tidak dapat merender font sebaik pada file gambar. Belum lagi masalah crossbrowser yang tidak terdeteksi sejak dini.

    Tetapi PhotoShop masih sangat populer digunakan untuk mendesain web hingga sekarang. Banyak website dengan tampilan menawan dibuat dengan photoshop. πŸ™‚

  9. Thanks David, nice to see you visit me here.

    Too bad I don’t have time to translate this to English. Just wait for my kick ass tut in Psdtuts+.

  10. Penggunaan Photoshop memang berfungsi hanya untuk memvisualisasikan desain akhir yang kita peroleh,

    Misal dalam kasus desain ini. Di desain ini, sebetulnya hanya ada empat gambar yang digunakan, logo, latar twitter, bayangan, dan this is me. Kalau saya hanya membuat empat gambar itu saja di Photoshop saya pikir akan sulit buat pemrogram untuk mengeksekusinya. Dengan menyerahkan hasil jadi seperti ini, proses komunikasinya pasti lebih mudah.

    Kekurangan-kekurangan itu saya rasa diatasi. Yang paling penting kita harus bisa menerima bahwa hasil render di semua browser tidak selalu sama. Saya bahkan tidak men-test desain ini di berbagai browser. Saya cuma nyoba di Chrome, Firefox 3, dan IE7 karena memang itu semua ada di komputer semua.

  11. Ah ya, bisa dikatakan mockup photoshop adalah blueprint yang menjadi konsumsi pihak desainer agar memudahkan proses koding. Untuk klien adalah dokumen HTML yang sudah jadi.

  12. Bahkan saya pernah baca artikel, sebaiknya desainer web tidak memberikan mockup desain dalam format PSD pada klien. Lebih aman jika memberikan dalam format HTML. Ini mencegah klien untuk melakukan perubahan-perubahan yang terlalu ekstrim dan berpotensi merusak.

    Jika sudah mengetahui teknik coding, saya rasa mendesain web di Photoshop tidak jadi masalah.

    Programmer web sebaiknya tahu Photoshop juga, walaupun sedikit. Besar kemungkinan ada tawaran coding dari PSD.

  13. Saya sealiran dengan Mas Ardianzzz, langsung hajar di HTML. Alasan utamanya: saya tidak begitu mahir menggunakan photoshop.

    Dulu sempat nyobba bikin di photoshop, ngikutin tutorialnya M. Khaled di PSDTuts. Setelah jadi ternyata masih dipusingkan juga dengan konversi ke HTML+CSS-nya.

    Tapi menurut saya seorang desainer web memang sebaiknya menguasai Photoshop juga. Paling nggak bikin mockup nya aja lah.

    BTW, saya belum sempat membaca semua tutorialnya. Besok aja deh, sekalian praktek. Kalau tutorial nggak dibarengin sama praktek susah masuk otak, maklum otak lemot πŸ˜€

  14. Memang sebaiknya desainer web bisa Photoshop juga, walaupun sedikit. Ini membantu proses visualisasi desain, terutama ketika bekerja dengan klien.

    M. Khaled juga tidak bisa coding. Desainnya yang di tutorial psdtuts+ di-coding oleh orang lain di nettuts+.

    Theme terbaru di woothemes, crisp, dibuat oleh desainer yang tidak bisa coding.

    Proses coding blog ini juga dilakukan oleh teman. Saya hanya membuat mockup di Photoshop saja.

  15. wah banyak ketinggalan nih, tiba-tiba desain digital kok makin mantep tampilannya..

    terlalu lama tidur di alam nyata jadinya alam maya ketinggalan nih.

    kepikiran juga buat ganti tampilan di situs saya, hmm bisa jadi bahan inspirasi saya tutorial ini mas, karena saya kurang perhatiin yang grid2 gituan jadi langsung hajar aja, biar yang coding yang pusing hehe..

    keren mas jep!!

    hayoo para coding jangan kalah buat tutorial codingnya..*berharap mode on.

  16. Nice!!! Saya berharap tutorial ini bahkan lebih lagi langsung ke proses pembuatan temanya. Hehehehe.. Komplit kan? πŸ˜€

    Anyway, apakah di Photoshop bisa langsung di export kata-kata yang digunakan menjadi teks biasa di HTML ya? Sekalian sama CSS nya juga? Could you tell me how to do this?

  17. Saya persilakan kalau ada yang bisa meneruskan tutorial ini hingga ke proses coding-nya. Saya sama sekali tidak mengerti masalah itu.

    Photoshop tidak bisa mengekspor teks ke format HTML, apalagi dengan CSS-nya. Paling dengan bantuan plugin, misalnya SiteGrinder. SiteGrinder katanya bisa secara otomatis mengubah desain di Photoshop menjadi HTML/CSS. Saya belum pernah nyoba jadi tidak bisa berkomentar banyak tentang kualitasnya.

  18. Kalau ada programmer web yang ingin meneruskan tutorial ini hingga ke proses coding, saya menyambut baik.

    Sayang sekali, saya tidak bisa meneruskan ke sana.

  19. Hm… butuh waktu juga untuk membuatnya mulai dari 0 ya?

    Saya sendiri berharap ada yang bersedia melanjutkannya. Dari kalangan pembuat tema WordPress. Richard Fang dari Jurus Grafis bisa tidak ya? πŸ˜€ Hehehe…

    Todong Richardnya saja Mas Jeprie. πŸ˜€ Hehehehe…

  20. Tepatnya untuk UI Designer.
    Desain web cukup kompleks, tidak menyangkut masalah User Interface saja — mungkn ada salah kaprah, yang dimaksud desainer web adalah mereka yang merancang tampilan muka (front end) pada sebuah web — tetapi menyangkut aksesibilitas, usabilitas, arsitektur UX, bahkan internet marketing & SEO. πŸ™‚

  21. Kalau berdasarkan definisi ini, contoh desainer web yang bagus siapa ya?

    Bukannya internet marketing dan SEO harus terkait dengan perjalanan situs? Jadi, desainer web di sini harus ikut aktif menjaga keberlangsungan situs.

  22. Mas Jeprie,
    Erm, butuh waktu lama bagi saya untuk menyelesaikan yang beginian. Hahahaa.. Saya kurang berbakat di sisi desain-desainan. πŸ˜€ Apalagi saya belum pernah mencoba CSS framework 960 itu. πŸ˜€

  23. Salam kenal mas Jeprie, tutorial dan designnya baik sekali membuat saya jadi pengen belajar..

    Tadi saya juga habis dari webnya mas Richard, sama designya webnya bagus sekali.

    Semoga ke-2 orang ini bisa jadi panutan saya buat belajar.. πŸ™‚

  24. Salam kenal juga.

    Tentu desain web Richard Fang lebih bagus karena dia memang ahlinya. Saya tidak mendalami desain web, hanya sekadar eksperimen saja.

  25. Salam kenal mas Jeprie. tutorialnya bagus mas, sepertinya belum ada buku dipasaran yang membahas pembuatan mockup, apalagi menggunakan grid960. Kebetulan saya lagi belajar penggunaan grid960.

    Ada rencana membuat bukunya mas, khusus pembuatan mockup ?. (saya belajar photoshop pertama kali lewat bukunya mas Jeprie)

  26. Ya, memang setahu saya belum ada buku Ps di Indonesia yang membahas pembuatan mockup situs. Rencana yang bagus.

    Saya sendiri sekarang sedang menulis buku desain ikon. Setahu saya, buku Ps yang membahas tentang ini belum ada.

  27. Mas,bikin donf tutorial membuat web dengan photoshop,yang bermodalkan blank page..
    Saya bingung bagaimana ketika file psd di save menjadi html,kemudian dibuka di dreamweaver dapat diberi link??

  28. thank bgt atas tutornya ..
    sxan mo nanya ne mas,lo disini kan tutor designnya y mas ada recomendasi khusus ga ne lo mo belajar coding mas,tmn mas gitu,.
    baru kali ne q nemuin tutor yang gratis,lengkap,bagus bgt pula designnya,,

    salam succes mas.

  29. Terima kasih. Sayangnya saya bukan coder. Skill saya hanya terbatas pada desain di Photoshop, tidak pada HTML dan CSS-nya. Jika ada yang tertarik meneruskan tutorial ini, saya persilakan.

  30. @Raksaka Indra: Ya, semua orang punya cara kerjanya sendiri. Tidak ada yang perlu disalahkan, bagi klien yang penting adalah hasil akhirnya bukan proses.

  31. waduh, setelah sekian lama browsing2.
    akhirnya dapat juga tutrial yang lengkap untuk pemula….
    mkasih ya mas…

    klu boleh request, cara konversinya ke CSS ya mas…. B-)

  32. Ini berlaku untuk semua jenis desain web yang menggunakan grid 960. Proses coding berikutnya yang menentukan hasilnya sebagai theme Blogspot, wordpress, atau HTML biasa.

  33. mas kalo gitu sekali-kali diajarin juga cara convert atau cara codingnya mas dari photoshop supaya bisa digunakan juga..
    atau mungkin ada teman-teman sebelumya yg tau link belajar buat tutorial coding bagi pemula seperti saya sehingga bisa mengubahnya ke css/html.. πŸ˜‰

  34. Salam kenal mas Jeprie..
    boleh saya minta file PSD nya ( ngarep mode ON ) sya pengen belajar dengan cara membandingkan hasil kerja saya dngan PSD mas Jeprie πŸ˜€

  35. Kalau setelah bikin desain blog di Photoshop, lalu cara merealisasikannya di web bagaiamana mas ? Maap saya newbie πŸ˜€

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s