Technology

Bagaimana Mendesain Template Website (Bagian 2)

 

Loading...

Nah jagFamily, kali ini kita akan melanjutkan eksperimen desain template yang sudah dipraktekkan kemarin. Lengkapnya bisa dibaca di sini: Bagaimana Mendesain Template Website (Bagian 1). Jadi, silakan buka lagi Photoshop anda, kemudian open project yang sudah anda simpan kemarin.

Langkah 17. Ayo kita ulas sejenak. Praktek desain website pada kanvas 1020 x 1725 kita yang lalu telah menghasilkan tampilan seperti pada gambar berikut.

Langkah 18. Maka berikutnya kita tinggal lengkapi bagian yang masih kosong. Kami memilih untuk mengisinya dengan bagian pelengkap, yaitu Article Update. Kenapa? karena jika kita mengingat salah satu syarat SEO (Search Engine Optimization) yaitu konten tulisan yang fresh, maka Article Update merupakan solusi yang paling pas. Maksud kami, konten apalagi yang lebih fresh dibandingkan dengan Article Update yang bisa dirilis setiap hari? Jadi mari kita mulai dengan membuat tulisan “Article Update” seperti gambar di bawah ini. Gunakan jenis huruf BebasNeue 36px dengan warna #2d2d2dSeperti biasa, jenis huruf ini bisa di download dulu di situs DaFont.com. Kemudian buat garis 1 px pada bagian kiri kanan dengan Line Tool.

Langkah 19. Bagian “Article Update” sendiri rencananya akan terdiri dari judul, separuh konten artikel, gambar, dan tanggal artikel tersebut dibuat. Jadi sekarang kita buat dulu desain judul artikel dengan font Arial Bold 20px warna pink (#c73047). Kemudian untuk konten artikel, gunakan font Arial Regular 12px warna abu-abu gelap (#333333).

Langkah 20. Kemudian tambahkan gambar untuk ilustrasi konten artikel pada “Article Update”. Dan terakhir, tambahkan “Date Post” untuk menunjukkan waktu artikel tersebut di rilis. Untuk elemen tanggal, gunakan font Georgia Italic 55px warna abu-abu gelap (#333333). Untuk bulan dan tahun gunakan font Georgia Regular ukuran 20px dengan warna abu-abu yang lebih terang (#666666). Posisikan semuanya seperti Gambar di bawah ini.

Langkah 21. Tambahkan 3 lingkaran kecil di bawah Article Update. Gunakan Ellipse Tool dan beri warna abu-abu gelap (#2d2d2d). Lingkaran kecil ini berfungsi untuk memberitahu pada programmer bahwa anda ingin menambah JavaScript pada website. Jadi jika bagian lingkaran kecil ini diklik, maka akan muncul artikel selengkapnya melalui teknik JavaScript.

Langkah 22. Kemudian tambahkan desain untuk tombol “See All Article” dengan Rounded Rectangle Tool (U). Tambahkan efek Layer Style berupa Gradient Overlay dengan warna 1 #d9d9d9 dan warna 2 #e5e5e5, dan efek Layer Style “Stroke” dengan size 1 px dan beri warna abu-abu (#bfbfbf).

 

Langkah 23. Selanjutnya, kita buat bagian lain yang tidak kalah penting dari “Article Update”. Yaitu “Event&Contact”. Di dalamnya  akan diisi informasi tentang Event Update, Contact, dan icon-icon akun jejaring sosial. Prosedurnya sama seperti Langkah 18. Bikin dulu teks judul “Event&Contact” sama seperti membuat teks “Article Update”.

Langkah 24. Pada gambar di atas anda bisa melihat ada sebuah desain dropcap tanggal. Caranya, gunakan Ellips Tool (U) untuk membuat sebuah lingkaran berwana pink (#c73047). Jenis huruf bisa kita gunakan BebasNeue 30px. Sedangkan untuk nama bulan, kita gunakan font Arial Bold 10px. Beri warna putih (#ffffff) untuk keduanya dengan tambahan Layer Style berupa Drop Shadow warna hitam (#000000), Opacity 30%, Angle 90%, dan Distance 1px.

Langkah 25. Duplikat dua desain dropcap tanggal. Kemudian tambahkan teks untuk tempat dan alamat Event. Gunakan font Arial Bold 14px untuk tempat event dan Arial Regular 12px untuk alamat event. Berikan warna abu-abu gelap (#272727) untuk keduanya. Terakhir, tambahkan tombol abu-abu sama seperti Langkah 22. Namun kali ini tulisannya “See All Event”.

Langkah 26. Dapatkan ikon “Pin” dan “Telephone” di IconFinder.com. Kemudian styling kedua icon tersebut dengan Color Overlay warna #c6c6c6. Tambahkan beberapa teks untuk informasi contact. Untuk teks judul gunakan Arial Bold 14px warna pink dan Arial Bold 12px warna abu-abu tua sebagai teks di bawahnya.

Langkah 27. Tambahkan screen shot Google Maps, kemudian styling dengan Layer Style berupa Stroke dan Outer Glow.

Langkah 28. Langkah selanjutnya adalah menambahkan Icon Social Network. Dengan Ellipse Tool (U), buatlah 6 lingkaran dengan ukuran yang sama. Lima dari enam lingkaran tersebut beri warna abu-abu. Untuk yang satu lingkaran tersisa berikan warna pink, hal ini akan memberitahukan programmer agar menggunakan efek “Hover” pada CSS website.

Langkah 29. Terakhir, tambahkan informasi Copyright dengan font Georgia Italic 12px. Beri warna putih (#ffffff). Sedangkan untuk background footer, gunakan Rectangle Tool dan beri warna abu-abu gelap (#2d2d2d) dengan tinggi 70 px dari bagian paling bawah halaman.

Langkah 30. Selesai! Seperti apa desain kita jadinya, bisa dilihat pada Gambar di bawah ini. anda bisa klik untuk memperbesar.

Langkah yang terakhir sebagai desainer, anda tinggal berikan desain tersebut ke programmer anda untuk dilakukan proses slicing dan coding website. Nah, untuk artikel – artikel selanjutnya, tim programmer JagoanWeb.com kami akan menunjukkan seperti apa langkah-langkahnya. Jadi jangan lewatkan ya ;-)

Loading...

4 komentar

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *