Selamat Datang

Web Design Workflow: Inilah 4 Tahap Pembuatan Website Yang Tepat

Workflow (alur kerja) dalam pembuatan website merupakan hal yang penting yang harus kita tahu dan pahami, khususnya untuk  saya sendiri yang merupakan salah satu pengelola DaduWEB.com yaitu perusahaan yang mengerjakan jasa pembuatan website yang berlokasi di Jakarta.

Selain menggunakan berbagai template yang tersedia kami pun mengerjakan pesanan web custom atau pembuatan website dari 0 dan untuk menyesuaikannya kami  hampir selalu menggunakan 4 tahapan pembuatan website ini.

Mungkin Anda semua pernah atau sudah bisa membuat website sendiri atau melayani permintaan client dalam menangani berbagai website. Namun untuk lebih memperluas wawasan tak ada salahnya membaca ini untuk lebih mendalami bagaimana tahapan yang tepat dalam alur kerja dan dalam  pembuatan website yang benar, saya sendiri terinspirasi untuk menulis artikel ini dari sebuah postingan disebuah group facebook Web Designers Indonesia dari mas Bagus salah satu member disana.

Dan berikut ini adalah workflow yang harus Anda ketahui sebagai web designer !

SKETCH  / WIREFRAME WEBSITE

Sketch Dasar Website

Wireframe : Gambar merupakan dokumentasi penulis

Jika Anda ingin menjadi web designer yang berkualitas baik maka point ini penting bagi Anda. Point pertama ini terkadang terlewatkan bagi para designer web indonesia, namun hal ini sangat penting karena sketsa atau istilah lainnya wireframe merupakan titik acuan dan ide awal website ini di bentuk.

Sketch dasar disini bisa menggunakan media kertas dan alat tulis, namun tidak jarang ada beberapa web designer yang langsung menggunakan beberapa peralatan untuk menentukan sketsa dasar website yang tepat

Terkadang ada banyak klien yang masih belum mempunyai gambaran website yang nantinya akan dibuat, salah satu tipsnya Anda dapat membuat beberapa sketsa atau contoh-contoh website lain yang sesuai dengan permintaan klien tersebut.

Visualisasikan Sketch

web desing di photoshop

Visualiasikan Sketch : Gambar merupakan dokumentasi penulis

Setelah Anda membuat sketch dasar dan bagaimana website itu di bentuk, sekarang saatnya memvisualisasikannya ke media software pengolah gambar, contohnya photoshop .

Di sini Anda dapat mengimajikan bagaimana tampilan website Anda nantinya, design gambar  dan pemberian warna juga dapat di implementasikan dalam tahap ini.

Code It !

coding website

Coding Website : Gambar merupakan dokumentasi penulis

Tahap coding merupakan tahapan yang mendebarkan :D , pasti nanti ada beberapa hal yang harus Anda sesuaikan, error sudah pasti nanti Anda rasakan. Namun hal itu wajar dan bahkan saya sendiri yang merupakan penyedia jasa pembuatan website pernah melakukan bug and fixing begitu juga semua web designer handal pasti mempunyai bug dan error dan harus melalui proses beta launching website untuk mengecek apakah coding dan penataan website telah tertampil dengan benar di browser.

Coding sendiri bisa menggunakan berbagai software pembuat website salah satunya Anda bisa membuat website dengan Dreamweaver dari Adobe .

Penyesuaian Browser

Cek Browser Support :  : Gambar merupakan dokumentasi penulis

Cek Browser Support : : Gambar merupakan dokumentasi penulis

Para netizen saat ini hanya mengenal beberapa browser website seperti Google Chrome, Firefox dan Opera.  Nah di tahap ini Anda melakukan beta testing tentang bagaimana tampilan Anda di berbagai browser ini, karena tiap browser memiliki pengaturan yang berbeda tentang tampilan laman website Anda. Jadi sesuaikan dengan kembali ke tahap coding agar hasilnya tampilan website Anda benar-benar sempurna .

Tadaa!! Sekarang sebuah website sudah siap disajikan, tinggal bagaimana Anda mengelolanya dan mengisi berbagai konten di dalamnya. Oke, itulah dia workflow yang tepat bagi para web designer, semoga artikel ini membantu Anda. Terima Kasih.





Penulis :

I'm Just Gamer's, Blogger, Web Search Engine Optimizer & Web Designer in Jakarta ^^~ View all posts by Iqbal Maulana

Comments

34 thoughts on “Web Design Workflow: Inilah 4 Tahap Pembuatan Website Yang Tepat

  1. Shu Galih says:

    trims untuk infonya.

  2. Ahmad Karlam says:

    Maaf mau nanya master , kalo bikin sketsa nya itu gmna ? bisa di tutorialin sedikit ngga hehe , terima kasih infonya :D

  3. Hai Mas @ahmad Karlam .

    Buat sketsa sepertinya agak kurang tepat jika di buat tutorial, karena sketsa itu berdasarkan brief client , atau berdasarkan imajinasi si web designer tersebut .

    dalam sketch bisa berbentuk abstrak yang penting menjadi bahan dasar pembuatan website selanjutnya :)

  4. ada yang kurang mas: test and debug.

    jadi, test bukan hanya untuk masalah cross-browser compatibility saja, tapi juga untuk yang lainnya, mulai dari bug di backend ataupun masalah keamanan.

    dan, tak tahu kenapa, sepertinya masih banyak yang menggunakan Dreamweaver. menurut saya, dreamweaver sama rasanya menggunakan IE, banyak batasannya, hehe saya lebih suka pake Sublime, dan setau saya kebanyakan dev luar juga lebih merekomendasikan Sublime :)

    • Mungkin dreamweaver lebih enak di gunakan karena ada auto codenya apapun itu istilahnya, yang menampilakn urutan code yg sesuai dengan huruf yg diketikan pertama kali. pada Sublime memang sih ada, tp tdk sebagus DW, apa lg yg cs 6 hehehe

  5. dzulmaregg says:

    Wew! Haha! Sebenarnya bagian pertama itulah yang paling sering saya lewatkan. Tetapi, yaah. mungkin masih bisa dibilang ‘bagus’

  6. Kadang hal inilah yang sering dilewatkan oleh para web design. Terlalu banyak konsep sampai lupa untuk mencoba menuangkannya dalam sketsa. :)

  7. […] Iqbal Maulana May 24th, 2013 Tips & Tricks, Web Design 9 Comments […]

  8. perjaka says:

    adminny pakai software ps dan dreamwaever bajakan ato original?

  9. Min saya mau tanya…saya bermain CSS di dreamweaver. tapi saat saya preview index.html-nya di browser, kok semua desainnya berada di kiri yah ? Bagaimana caranya agar desainnya berada di tengah ?
    terimakasih :)

  10. Nurul Imam says:

    Keren coretannya :D

  11. Manggale says:

    Sketsa memang harus yang pertama kali dilakukan.
    Berguna sekali buat kita2 yang lagi belajar web design
    thankiu gan

  12. diar seonubi says:

    ada lagi tahap yang disebut slicing yaitu layout web design dipecah menggunakan photoshop oleh web programmer kemudian disusun ulang menggunakan coding untuk menjadi web.

  13. pairinpay says:

    Keren ni master, pengen bisa buat begituan. Bisa desain web sendiri :D

  14. A Mahfuda says:

    setelah koding selesai… formatnya file.nya jdi apa ya.. ?

  15. Artikel-artikel anda sangat membantu sekali bagi para Blogger pemula saperti saya, terima kasih banyak atas informasi yang diberikan dan sangat membantu saya dalam mengembangkan web yang saya kelola.

  16. Keren niyh tutorial, cocok bagi yang lagi belajar membuat website.

  17. agit says:

    kak, saya mau tanya kalau mau bikin web program apa aja yg harus di kuasai ….

  18. Yoga says:

    Mas, apakah didalam website itu terdapat database untuk artikel? kalo misalkan ada tolong dikasih tutorialnya mas. Terimakasih

  19. Kayaknya ada yang kurang satu, yaitu merancang desain buat tampilan hape. Aku banyak sekali menemukan web yang aslinya bagus di Mozilla tapi begitu di Opera Mini, hancur. Menurutku, tampilan web di hape yang bagus baru facebook, twitter, ma muslimdaily.

  20. Nova says:

    wah..kadang ane nglewatin salah satu tahapan ituh, jadi kudu di rubah lagi nih cara mainnya.

  21. panji says:

    thanks gan artikelnya keren. cuma ane masih sedikit bingung aja sama tutorial2 nya, maklum masih nebie dan masih harus banyak belajar. thanks mastah

  22. Ninja Cyber says:

    wah expert bener neh artikelnya… jadi tambah puyeng di codingnya… thanks for sharing.

  23. wah bagus gan tutorialnya, ini njih yg saya cari..thanks

  24. Jasa website says:

    saya rencananya pengen buka jasa website..tapi masih newbie banget…bisa ga ya

  25. cream anisa says:

    Terima kasih tutornya, ini sangat berguna bagi pemula seperti saya,

  26. jasa web says:

    trimakasih atas sharingnya gan

  27. creatingpro says:

    harus ada konsep merancang desain buat tampilan mobile friendly. saya banyak sekali menemukan web yang aslinya bagus di Mozilla tapi begitu di Opera Mini jelek. Menurutku, tampilan web di hape yang bagus baru facebook, twitter dll

Leave a Comment

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


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development