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 200x200 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.