TUTORIAL DESIGN WEBSITE

tutorial desain website ini terbagi dalam beberapa bagian, dan pada bagian pertama ini akan membahas mengenai cara membuat website dari segi desain.

Hi sahabat Warong-Hacker ,

Apakah Warong-Hacker pernah mengalami kesulitan untuk menemukan tutorial desain website yang menyajikan cara-cara membuat website secara lengkap? Memang, ada ribuan – bahkan jutaan – artikel desain yang menyajikan tutorial desain website. Namun, rata-rata hanya menyajikan sebagian saja, entah itu bagian perancangan layout ataupun bagian codingnya saja.

Nah, makanya Warong-Hacker sengaja memilihkan tutorial desain website yang lengkap, yang akan menginformasikan secara detil cara-cara membuat website mulai dari nol hingga selesai. kami akan mengantarkan anda memasuki dunia desain website, mulai dari membuat wireframe hingga mendesain laman secara full (sebanyak 5 laman template). Lalu, kami juga akan mengajarkan sekelumit cara untuk coding, hingga akhirnya menjadi theme XHTML yang bisa diaplikasikan langsung ke WordPress. Yahud kan?

Tapi, tentunya kami ngga langsung menayangkan semuanya secara bersamaan ya, karena pastinya akan butuh banyaaaak sekali waktu dan konsentrasi. Jadi, kami akan memecahnya menjadi beberapa post.

Nah, kalau anda mau lihat, seperti apa sih hasil dari tutorial desain website ini, berikut kami tampilkan screenshotnya ya:

Dan,  tampilan beberapa spesifikasi yang dibutuhkan:

- Program yang digunakan: Adobe Photoshop

- Versi: CS4+

- Tingkat kesulitan: Pemula

- Estimasi waktu pengerjaan: 1.5 – 2 jam

Yang dicapai dari proyek ini:

Sasaran kita adalah untuk mendesain dan mengembangkan sebuah desain website yang simple dengan tampilan yang modern, yang dapat diaplikasikan ke sistem-sistem CMS, seperti WordPress. Tutorial ini tidak mengikutsertakan efek-efek desain website yang rumit dan terlalu membingungkan, karena tujuannya adalah untuk menciptakan desain layout yang sederhana, namun akan mengupas tuntas semua tahapan desain website secara menyeluruh, mulai dari awal hingga akhir. Dalam tutorial ini, juga akan disajikan cara penempatan (layout), dan penggunaan margin serta padding yang tepat.

Tutorial ini akan menggunakan 960 grid system dari awal hingga akhir. Jadi, kalau selama ini kami penasaran ingin mencoba mengaplikasikan sistem tersebut, inilah saat yang tepat untuk mencoba!  Tentunya, ada beberapa penyesuaian yang akan dilakukan dari sistem standar, namun pada dasarnya 960gs akan menjadi patokan, baik dalam fase desain maupun coding.

Buat Warong-Hacker yang ingin menambahkan sentuhan pribadi, boleh lho untuk bereksperimen dan bermain-main dengan jenis font, warna, gaya dan tekstur yang sesuai dengan gaya desain kami. Yang perlu diingat adalah, tutorial ini hanya menyajikan proses awalnya saja, dan selebihnya kami bebas mengekspresikan diri dengan mengubah tampilan desainnya.

Sebagai panduan, kami akan menghadirkan tutorial cara membuat website ini dalam beberapa sesi/bagian, sebagai berikut:

- Fase Desain

1. Sesi 1: Persiapan Desain hingga Mendesain Laman Muka

2. Sesi 2: Mendesain Laman-laman Dalam (terbit bulan depan)

- Fase Coding

1. Sesi 3: Slicing dan XHTML Coding (coming soon)

2. Sesi 4: Konversi menjadi Theme WordPress (coming soon)

Lalu, sumber-sumber yang akan kita gunakan pada tutorial ini adalah:

1. Image: Lil Rhody Dan, Flickr

2. Photo Merry Christmas: dari PSDTuts Flickr group

3. Social icons: WeFunction.com

4. Twitter Bird: WebTreats

5. Panduan warna font untuk:

- Heading: 0f5193

- Text: 7c7c7c

- Link: eaa000

Tweet