Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Berbagai Macam Cara Memulai Desain Sebuah Website

Banyak sekali diantara teman-temanku yang berbeda-beda dalam hal tahap awal mendesain sebuah website. Tulisan ini menampung berbagai macam perbedaan yang ada diantara web desainer dalam mendesain sebuah website. Ada seorang web desainer yang mendesain dulu sketsanya di kertas, lalu langsung diimplementasikan ke HTML CSS & ada juga yang mendesain di Photoshop dulu, kemudian Slice PSD to HTML & CSS, ada juga yang menggunakan tool Dreamweaver, Arteester, MS Frontpage, & lain-lain.

Pertama-tama saya akan menjelaskan bagaimana saya sendiri mendesain sebuah website. Saya mulai rencanakan sebuah layout yang cocok untuk tema website yang akan dibuat. Misalkan saya akan membuat sebuah web toko online, saya gambarkan layoutnya pada kertas & pensil. Saya gambar kotak untuk header, sidebar, konten & footer. Setelah itu, saya langsung praktekkan dengan membuka text editor favorite saya "Sublime Text" & membuat sebuah file HTML & CSS untuk menerapkan layout tadi.

Unique Post WordPress Theme

Pertama-tama saya buat sebuah kotak-kotak kosong dengan menggunakan 960.gs. Setelah layout sudah dibuat, saya tentukan background, logo, icon, dan sebagainya. Mulai mengisi kotak-kotak tadi dengan header, sidebar, konten, & footer. Setelah konten terisi, tahap selanjutnya, saya hias tampilan web tersebut dengan CSS, jQuery, dan lain-lain. Jika saya membuat sebuah website dengan menggunakan CMS atau web dinamis dengan PHP & MySQL, Website yang sudah didesain tadi baru kita terapkan ke CMS seperti WordPress dan sebagainya.

Tahapan desain website yang kedua adalah cara beberapa teman saya yang menggunakan Dreamweaver. Memulai desain & penerapan programnya melalui tool tersebut. Kebanyakan mereka lebih dimanjakan dengan menggunakan tool-tool yang tersedia seperti membuat table denga klak-klik saja (Insert Table) tanpa menyentuh kode HTML lagi. Saya justru tidak merasa nyaman menggunakan cara seperti ini.

Tahapan desain website yang terakhir adalah dengan menggambarkan dulu semua rangkaian website menggunakan CorelDraw, Photoshop, Illustrator, dan sebagainya. Setelah itu, hasil desain di Photoshop tadi di Slice (Potong-potong) menjadi gambar. Kemudian dimasukkan kedalam HTML & CSS. Setelah itu sama tahapnya dengan menerapkannya ke dalam CMS atau program web yang dibuat. Menurut saya, ini pekerjaan yang sangat rumit & memakan waktu. Karena kita kerja dua kali, yaitu desain websitenya di Photoshop satu & satu laginya mendesain ulang hasil Slice Photoshop tadi kedalam HTML & CSS.

Demikianlah berbagai macam tahap mendesain sebuah website. Anda termasuk mendesain dengan cara bagaimana ? Itu semuanya tergantung selera & kebiasaan anda mendesain sebuah website.

46 Comments

  1. Intan SudibjoReply

    ternyata bukan pekerjaan yang mudah untuk menjadi seorang designer web, saya suka pengalamannya mas ILham, mantap! :)

    • Nurul ImamReply

      Yahhh jangan mas ilham donk :(

  2. AgriReply

    Banyak jga ya mas tahapannya.. Saya dulu smpat gunain artisteer.. cuman karna susunan elemennya yg tidak bsa saya mengerti, akhirnya saya main manual.. gunain notepad++ dan selalu mencari solusi di google..

    • Nurul ImamReply

      Memang dengan cara menulis kode manual itu menyenangkan :)

  3. Mizz AizaReply

    hebatnya anda kerana pandai design sebuah website.. saya kurang arif berkenaan code html itu.. blog saya terhasil dari mengambil design orang lain saja..

    • Nurul ImamReply

      Terimakasih ka :)

  4. Cara RirinReply

    Saya hanya bisa desain blog saja mas. Itupun kode nya copas semua hehe :D
    Kalau desain blog biar cakep, bukan cantik lho, gimana mas? hehe ^^

    • Nurul ImamReply

      Di bawa ke salon mbak blognya :p

  5. blogditter.comReply

    Wah, saya belum pernah mendesain web…. Kayaknya seru, ya…. Enak kalau punya keahlian ini, bisa dipakai untuk cari uang, hehe….

    • Nurul ImamReply

      Hehehe ujung-ujungnya dikomersilkan :D

  6. PemuncakReply

    saya juga sama mas, biasanya bikin coret2 dulu di kertas… setelah sketsanya dapet… baru buka notepad++ :D

    • Nurul ImamReply

      Sepikiran, saya rasa itu cara yang kreatif ;)

  7. PondokgueReply

    pengen banget juga bikin desain web..
    tapi kurang ulet dan telaten kalo sayaa.. :D

    • Nurul ImamReply

      Uletin dong mas bro :)

  8. OlPreneurReply

    Menurut ane sih yg paling penting dlm desain web it CSS nya gan..
    Abis bahasa it yg ngatur segala tampilan.

    CMIIW

    • Nurul ImamReply

      Benar sekali mas, tentunya ditambah dengan JavaScript biar lebih ciamik ;)

  9. SyakirurohmanReply

    waah, caranya mirip sekali dengan cara saya. Saya juga seperti itu mas. saya gak suka mendesain dengan menggunakan software/tools

    • Nurul ImamReply

      Desain pake tools sepertinya lebih ruwet karena kerja dua kali :D

  10. Main Game Dapat DuitReply

    klo bisa design2 bisa dijual keahliannya tuk design web, mantap kan?

    • Nurul ImamReply

      Manteppp donk :D

  11. Hanif MahaldiReply

    yg penting unik ya mas, soalnya sekarang design web rata2 mirip. fiturnya aja yg beda, tapi tampilan jadi 11 12 aja akhirnya. :D

    • Nurul ImamReply

      Ya biasalah karena susah dapet inspirasi buat bikin layout dan desainnya :)

  12. Rohis FacebookReply

    mau komen apa ya..??, soalx sy bukan sorg desain website.., hny pake templatex org lalu utak-atik *smile

    • Nurul ImamReply

      Utak atik sambil belajar mas :)

      • imamReply

        setuju mas,dengan memodifikasi pelajari script nya ubah design layout nya,nanti akan tercipta sesuatu karya baru dengan sendiri nya,karya yang baru tercipta hasil dari belajar dari pengalaman dan lihat2 contoh yang sudah ada :D

        • Nurul ImamReply

          Iya, klo langsung desain web dengan halaman kosong, langsung blank otaknya. Lebih bik pelajari dulu struktur layout atau template yang sudah ada.

  13. fahrurrozyReply

    satu kata ATM ( Amati – Tiru – Modifikasi)

    • Nurul ImamReply

      Tapi jangan berkelanjutan mas, nanti ga bisa bikin desain yang unik (desain sendiri) :D

  14. Kim EmbulReply

    Agak ruwet ngliat tulisan aja -_-

    • Nurul ImamReply

      Jangan diliat tapi dibaca :p

  15. ganggaReply

    manttaapppp gan ulasanya

    • Nurul ImamReply

      Terimakasih :)

  16. Abdul GhoniReply

    hemmm luar biasa,,,,
    untuk memahami sebuah kode saja aku butuh waktu lama,, apalagi nanti ketika menerapkannya, butuh keuletan, dan imajinasi tingkat tinggi,,
    terimakasih atas tulisan-tulisan di web ini.. sangat bermanfaat,,

    • Nurul ImamReply

      Betul banget, Sama-sama :)

  17. nisaReply

    hadeh mau mulai buat web tapi otak udah blank jadi iri sama yng sudah handal

    • Nurul ImamReply

      Iri buat belajar bagus lho :)

  18. AbsulscliquersReply

    web desain adalh slah satu mta pljaran di skolah sya.
    ohya mas, saya mw tnya tntang JavaScript nh. soal’y sya masih bingung.. :)

    • Nurul ImamReply

      Silahkan mas :)

  19. ariReply

    terimakasih bang

    • Nurul ImamReply

      Iya sama-sama :)

  20. Tan Pah KaaReply

    Baru mau belajar desain dengan CDR, tapi katanya itu pekerjaan sangat rumit & memakan waktu. Maaf newbie, belum bgitu ngerti masalah HTML & CSS.

    • Nurul ImamReply

      CorelDraw ? mendingan langsung ke Photoshop klo buat grafiknya

  21. itrainingReply

    Terimakasih

  22. esterReply

    buatin form tambah barang mobil,kredit,login,user,logout,upload foto mobil lewat data base,bunga

    • esterReply

      jangan lupa tampilan website yang menarik ya

  23. obat radang ginjalReply

    makasih banyak buat infonya gan,,,
    ijin share yaa

    http://toko-greenworld.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>