Saturday, January 16, 2010, 14:07

Step by Step Mendesain Website

Dalam sebuah tim web development sebuah website idealnya membutuhkan seorang web designer dan seorang programmer (dalam proses produksi). Tugas seorang web designer adalah merancang tampilan sebuah web dengan mempertimbangkan beberapa faktor, antara lain usability, visibility, flexibility, aesthetics dan tentu saja creativity. sedangkan seorang web program bertugas untuk coding dengan menggunakan bahasa pemrograman yang dibutuhkan dan dengan mempertimbahkan kecepatan akses juga.

Disini saya akan membahas bagaimana proses untuk mendesain website dari awal hingga bisa diserahkan kepada programmer untuk proses codingnya.

Hal pertama yang dibutuhkan adalah proses layout, proses seperti ini bisa dibuat dengan sketsa kasar disebuah kertas atau menggunakan software yang banyak tersedia di internet dengan lisensi free. dalam proses ini hal-hal seperti usability, visibility, flexibility, aesthetics sangat diperhitungkan, kita tidak ingin sebuah website itu bagus dari segi desain tapi user tidak bisa mengoperasikan dengan mudah dan dibuat bingung.

Ketika proses layout selesai proses selanjutnya adalah mendesain apa yang ada di layout tadi. Kita bisa menggunakan software Photoshop, Illustrator, fireworks dan software-software lain kesukaan kita. dalam proses desain ini hal yang perlu diperhatikan adalah proses kreatifitas, karena dalam proses layout tadi kita hanya menggambar dasar/kasar saja, bagaimana proses kreatifitas ketika membuat tombol, kotak, menu, dll. tentu juga masih memperhatikan mudah tidaknya sebuah elemen desain itu untuk user dan sesuai dengan konsep websitenya.

Bagus tidaknya sebuah desain itu relatif, hal yang paling utama adalah bagaimana kita membuat user merasa nyaman dan betah mengunjungi website. perilaku user seperti ini sudah diteliti, bagaimana user ketika melihat sebuah website itu men-scan website dengan mata berdasarkan tata letak elemen-elemen desain.

Proses selanjutnya adalah proses memotong-motong hasil desain (slicing). Proses slicing ini bisa dibilang gampang-gampang susah karena dalam proses slicing ini mudah tidaknya ditentukan oleh hasil desain itu sendiri, semakin simple sebuah desain akan mudah dalam slicing.

Setalah proses slicing selesai langkah selanjutnya adalah coding XHTML dan CSS. diusahakan dalam proses ini menggunakan hard coding maksudnya tidak menggunakan software-software visual seperti dreamweaver. kenapa saya bilang begitu? alasannya adalah supaya kita lebih mengerti bagaimana suatu tag-tag/code-code itu menghasilkan objek, jika kita menggunakan software seperti dreamweaver kemungkinan besar kita akan cuek terhadap tag-tag/code-code nya. tapi bagi pemula hal itu tidak masalah, karena dulu saya juga melakukan hal yang sama :) menggunakan dreamweaver, ketika saya memutuskan untuk meninggalkan software tersebut membutuhkan waktu yang lebih lama untuk proses coding ini, misalkan ketika menggunakan dreamweaver saya membutuhkan waktu 3 jam untuk CSS dan XHTML, lalu pindah ke teknik hard coding pertama kali saya kebingungan dan membutuhkan waktu hampir 2 hari untuk selesai :D

Tugas seorang webdesigner berakhir sampai disini, dari sini kita menyerahkan kepada programmer untuk tahap selanjutnya. tapi jika seorang web programming kebingungan dengan pekerjaan Anda hendaknya Anda harus turun tangan untuk membantunya :)

Postingan Terkait

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

12 komentar di “Step by Step Mendesain Website”

  1. hb2 said on Tuesday, January 19, 2010, 18:44

    mantap gan :D

  2. Andhika Wijaya Kurniawan said on Tuesday, January 26, 2010, 15:44

    Mantap Informasinya. :)

  3. Kurnia Adhiwibowo said on Thursday, January 28, 2010, 13:22

    like this
    sayang saya ndak bisa bikin design mas :D
    bisanya cuman buat garis lurus dan siku 90* :D

  4. Benny said on Friday, February 12, 2010, 21:13

    Mantap….

    baru merasakan proses web design step by step

  5. Arie Prasetyo said on Thursday, March 11, 2010, 13:32

    mantab gan….

  6. Yunus said on Thursday, April 8, 2010, 1:02

    Sekali-kali bikin contoh desain dan tahapan pembuatannya hingga selesai sampai di dreamweaver. Sorry bos kt pendatang baru

  7. zulkarnain said on Friday, April 9, 2010, 8:06

    @yunus : Sip sip.. usulan yg menarik. ditampung :)

  8. Dhanang Arfian said on Friday, August 27, 2010, 4:06

    Nah… ini dia yang saya butuhkan…

  9. Brian Arfi said on Saturday, August 28, 2010, 5:33

    Ikutan nulis juga dong kalo ilmunya bermanfaat :)

  10. NiaPnrg said on Sunday, August 29, 2010, 13:09

    Wah infonya menarik… ini yg sering dicari-dicari newbie … hehe :D
    pengen belajar bikin web…jadinya ^_^

  11. Fansi said on Friday, September 3, 2010, 8:27

    Masukan yang berarti :)

  12. @ariyanto said on Friday, September 3, 2010, 9:46

    wow ternyata postingnya pak jul….ya tinggal acungkan 2 jempol nih :)

Tinggalkan Komentar

zulkarnain
Telah Menulis 10.

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan hehe.. Online Portfolio zulsdesign studiomempunyai sebuah blog Follow me on twitter dan facebook



Recent Post

#StartupLokal Meetup V.5: Cara StartUps Peroleh Investasi

#StartupLokal Meetup V.5: Cara StartUps Peroleh Investasi

1 Sep 2010
Hidup dalam Kreatifitas. Bagaimana Caranya?

Hidup dalam Kreatifitas. Bagaimana Caranya?

31 Aug 2010
Tutorial Smooth Scroll dengan jQuery

Tutorial Smooth Scroll dengan jQuery

30 Aug 2010
Animasi Berfungsi Sebagai Wow! dalam Web | Kopdar SuWeC

Animasi Berfungsi Sebagai Wow! dalam Web | Kopdar SuWeC

27 Aug 2010
Cara memulai lomba atau kompetisi di komunitas anda

Cara memulai lomba atau kompetisi di komunitas anda

24 Aug 2010
FreSh Surabaya: Life with Creativity

FreSh Surabaya: Life with Creativity

20 Aug 2010
Script PHP untuk Mendeteksi Jika Web Diakses dengan Handphone

Script PHP untuk Mendeteksi Jika Web Diakses dengan Handphone

16 Aug 2010