Langkah Menjadi Web Designer

Dalam mendesain sebuah website, diperlukan keterampilan dan kreatifitas yang tinggi. Disamping itu, untuk menjadi web designer, diperlukan kemampuan bahasa seperti html, css, php, sql, javascript dll. Perlengkapan dan peralatan web design juga harus memadai.

Bisa saya katakan bahwa bahasa html dan css adalah bahasa yang paling dasar, php dan sql merupakan bahasa penunjang, dan javascript adalah bahasa penghias. Biasanya html sering digunakan bersama css, php dengan sql, sedangkan javascript dengan jquery, namun tingkat bahasa jquery merupakan tingkat tinggi, sehingga sulit dipahami orang awam.

Langkah-langkahnya adalah :

  1. Niat (*yang ini kudu wajib dimiliki)
  2. Memiliki software desain web. Bisa gunakan notepad, notepad++, MS FrontPage atau Adobe DreamWeaver
  3. Pahami bahasa html->css->php->sql->javascript secara berurutan
  4. Belajar Blog dahulu
  5. Belajar dari Web lain
  6. Edit tema-tema yang sudah ada
  7. Jika sudah mahir, coba buat tema sendiri
  8. Aktif di forum-forum

Berikut penjelasannya masing-masing:

  1. Niat
    Yang ini gak usah dibahas ;), kalo udah ada niatan untuk belajar, insyaallah bisa betah sampai step terakhir.
  2. Memiliki software desain web
    Yang dimaksud dengan software desain web disini, adalah software coding editor dan software grafis.
    Untuk coding editor :

    • Notepad
    • Notepad++
    • MS FrontPage
    • Adobe DreamWeaver

    Aku rekomendasikan pake Notepad++, karena selain gratis, fungsinya juga lumayan lengkap buat pemula. Tapi kalo udah mahir bisa pake Adobe DreamWeaver.
    Untuk grafis :

    • GIMP
    • CorelDraw
    • Adobe Photoshop

    Saya biasa menggunakan CorelDraw, tapi saya sarankan gunakan Adobe Photoshop.

  3. Pahami bahasa html->css->php->sql->javascript secara berurutan
    Lakukan step ini bersama dengan step ke-4 dengan urut. Beberapa artikel berikut ini, saya ambil dari website lain, yang menurut saya enak dipahami.
    HTML

    CSS

    PHP

    SQL

    JavaSript

    Tutorial HTML, PHP, SQL, dan JavaScript beserta fungsi-fungsinya semuanya ada di W3Schools, sampai saat ini saya belajar dari sana. Dan untuk tutorial HTML, PHP, dan SQL dalam bahasa Indonesia bisa dilihat disini

  4. Belajar Blog dahulu
    Mengapa Blog? Belajar blog disini bukan untuk belajar menulis, melainkan belajar tentang penempatan kode-kode yang sudah anda pelajari sebelumnya, juga sebagai tempat latihan langsung tentang pengoprasian kode-kode tersebut. Mulailah dengan langkah yang mudah, dan maju sedikit demi sedikit. Banyak para Web Designer memulai karir mereka dengan nge-Blog. Saya sarankan buat blog anda dengan WordPress SelfHost. Cara pembuatannya bisa belajar dari sini lalu sana
  5. Belajar dari Web lain
    Inspirasi yang mendorong anda untuk berkreasi tak lepas dari pengaruh tampilan web milik orang lain. Inspirasi tampilan website yang mendorong saya untuk berkreasi adalah dari GoMediaZine dan Smashing Magazine
  6. Edit tema-tema yang sudah ada
    Edit tema pada blog anda sebelumnya, sesuai dengan inspirasi anda. Buatlah blog anda semenarik mungkin tanpa menggunakan plugin, menjadi tantangan bagi anda untuk mendalami kode-kode tadi.
    Jika belum puas, lakukan editing template yang sudah ada. Ini bertujuan untuk mempertajam kemampuan anda. Saya ijinkan anda untuk mengubah template gray_mixed yang saya buat hanya bermodal Notepad++. Atau jika masih belum puas, anda bisa mampir di :

  7. Jika sudah mahir, coba buat tema sendiri
    Ini merupakan tantangan yang sulit jika masih awal-awal. Berikut langkah ringkasnya :

    • Mencetuskan ide sketsa tentang rancangan tampilan
    • Gunakan software grafis untuk membuat rancangannya
    • Implantasikan rancangan tadi kedalam bahasa web
    • Tes tema yang telah dibuat, cek setiap baris kode

    Untuk membuat gambar rancangan dengan software, saya sarankan gunakan PhotoShop. Sedangkan untuk bahasa web, saya sarankan gunakan Adobe DreamWeaver.

  8. Aktif di forum-forum
    Ini merupakan langkah lanjutan, anda bisa memanfaatkan forum-forum berikut untuk menambah pengetahuan anda.

Secara ringkas, anda memulai dengan belajar bahasa web, kemudian dipraktekkan dalam blog, lalu edit tema yang terdapat disana, dan yang terakhir, buat tema anda sendiri. Jika anda bisa melakukan ke-4 aspek tersebut, selamat anda adalah seorang Web Designer :D

Category: Information, Website
44 tanggapan pada “Langkah Menjadi Web Designer” { + }
  1. ganda berkata

    As I know, a professional should or never use Frontpage or Dreamweaver. Wanna know why? Ask them!! Advance web designer not recommended to use those tools. Your reputation in web designer would be bad. :D

    And the second one, Why it must be PHP?

    • Dery berkata

      I know that I can’t be considered as a web designer. But in my knowledge, dreamweaver is easily and usefull. Or, maybe if we are using those tools, we will be spoiled..
      Why PHP? Actually not only PHP, there are still many other advence web programing languages. I wrote about php because php is widely used.

      Sorry if my knowladge about web designer is very bad, but I will try for the best :)
      Thank’s for your opinion..

    • ganda berkata

      Don’t use Dreamweaver/Front Page. I know it more useful than only text editor. But, using Dreamweaver, its like you create your own web layout without writing any code. You can do it with those two tools right?

      On professional webmaster forum(outside Indonesia), I found that none of them using Dreamweaver to design a Web, except they are need to use it for ColdFusion scripting languange editor.

      Maybe, the answer is, PHP is the easiest one to use. :D

    • Dery berkata

      Yes, I also think so..
      So, if we want to learning coding, we must be write with their own. Therefor, we can use simple editing word, like notepad and notepad++. Yes, I use those tool just to make complex template..

      So, what they used for scripting language like php or javascript? Whathever notepad? It’s very difficult..

    • ganda berkata

      Try Komodo Edit, I think you would fall in love with it. :)

    • Dery berkata

      Thanks, it’s free open source editor, but is very useful..
      I like it.. :)

    • ardianzzz berkata

      yeah, saya setuju. Justru waktu masih cupu dulu mengenal webdesain melalui frontpage dan dreamweaver. Saya rasa text editor adalah senjata utama untuk membuat desain XHTML dan bukan editor WYSYWYG.
      text editor favorit saya adalah Gedit tetapi karena menggunakan winXp, saya mengandalkan Aedix. Tetapi tidak adal yang lebih menyenangkan dari mengedit secara live dengan text ediror bawaan CMS :)

      Memulai dari blogging, saya sih setuju-setuju saja. Tetapi mengapa harus PHP? Memang benar, PHP sangat powerful dan populer. Tetapi perlu diingat bahwa ada banyak sekali pemrograman untuk web termasuk juga javascript. Kalau boleh menambahkan lagi, mengapa harus PHP? mengapa juga harus menggunakan WordPress?… heheh kidding :)

    • ganda berkata

      Saya tidak menyarankan menggunakan text editor bawaan CMS, seperti editor pada WP, atau akan berakhir seperti yang saya alami sebelumnya. HTTP connection can’t be trusted. PHP itu server side scripting, Javascript itu client side. PHP dan Javascript tidak disebut sebagai bahasa pemrograman, sebab kedua bahasa tersebut tidak dikompilasi, melainkan di interpret. PHP->Wordpress?? Tak harus wordpress, saya lebih suka Drupal.

    • Dery berkata

      Hehe..
      Saya masih belum mudeng yang kayak gitu, mungkin bisa jadi ilmu tambah bagi saya. Untuk belajar saya lebih suka WordPress karena lebih simple dan user friendly..
      Selama ini saya pernah sesekali menggunakan text editor bawaan CMS, tapi gak pernah dapet “HTTP connection can’t be trusted”. Memangnya kenapa mas kalo dapet pesan kayak gitu?

    • ganda berkata

      Bukan pesan. Tapi anjuran saya kepada mu. Jangan percaya koneksi http. Itu saja. Jangan percaya internet. Selalu waspada.

    • Dery berkata

      ohh.. saya malah gak tau mas :mrgreen:

    • Aldy berkata

      Hmmm. PHP Ninja urun rembuk juga ternyata ;)

    • Dery berkata

      :mrgreen:

    • Kurniawan berkata

      Beda Dreanweaver sama Notepad++ apa mas??

    • Dery berkata

      kalo dreamweaver, bisa lihat langsung design yang dibuat, dan juga memiliki fitur yang mudah digunakan. Kalo notepad++, cuma bisa buat coding editor doank..

    • ganda berkata

      Http connection is not secure. Don’t send your data in barely mode. Envelope it, encapsulate it, encrypt it, hash it, serialize it and send it. Don’t trust the world wide network.

    • Dery berkata

      Hmm.. memang benar kalo untuk belajar, mungkin harus dengan text editor dahulu..
      Mengapa PHP? Memang masih banyak bahasa pemrograman yang lain, akan tetapi, saya merasa untuk mendesain web PHP bisa menjadi pendukungnya.. Mengapa WordPress? Wahh, kritik lagi.. Memang bukan hanya WordPress, mungkin karena saya rasa WordPress paling simple dibanding dengan CMS yang lain.. :)

  2. rismaka berkata

    Bookmark dulu ya der. Ini berguna banget buat saya nantinya. Meski saya udah sering ke web2 tsb, tapi biasanya lupa. Dengan adanya postingan ini mudah2an tidak akan lupa lagi alamatnya :)

  3. iskandaria berkata

    Wah, panduannya sangat sistematis mas. Kebtulan saya juga punya cita-cita ingin mahir dalam hal pemrograman website. Saat ini saya ikutan kursus online HTML, PHP, dan MySQL. Selain kuliah TI juga. Makasih buat tips dan referensinya mas.

    • Dery berkata

      Terima kasih mas,, saya juga tertarik dengan program web seperti ini, makannya saya membuat artikel ini..
      Kayaknya seru tuh kursus online seperti itu.. Dimana mas kursus online nya? Kayaknya saya mau ikut deh.. :D

    • iskandaria berkata

      Link situs kursus onlinenya ada di atas judul posting blog saya mas (pada single page) :) Silakan kalo mau ikutan juga. Saya belum lama sih ikutnya. Masih pada tahap kelas PHP.

    • Dery berkata

      Saya udah ndaftar,, nyaman sekali cara belajarnya, juga tampilannya yang mendukung sekali..
      Saya malahan masih dalam kelas HTML.. Pingin belajar lagi dari awal.. :)

    • yuli berkata

      mas belajar kursus websitenya online nya dimana

  4. Jeprie berkata

    Sayangnya, saya sama sekali ga ada waktu untuk belajar coding. Mungkin suatu saat nanti di waktu yang tidak ditentukan. :)

    • Dery berkata

      belajar kapan aja gak masalah kan.. :)

    • Jeprie berkata

      Sekarang saya baru bisa coding theme situs secara sederhana dengan firebug. Lumayan daripada ga bisa sama sekali. :)

      Btw, saya sudah ganti favicon, sekarang sudah sedikit berbeda.

    • Dery berkata

      firebug itu program text editor juga ya mas? Kayaknya seru juga tuh..
      faviconnya gak usah diganti juga gpp,, yang pernting beda warnanya.. :)

  5. jumialely berkata

    Salam kenal mas, masih newbieeee mohon pencerahann :)

    salam dari kota medan

  6. jumialely berkata

    ijin pasang RSS di blog saya mas

    salam

    • Dery berkata

      Silahkan, terima kasih sudah dipasang..
      Mudah-mudahan bisa bermanfaat..

  7. jaka zulham berkata

    baru ini web yang mantap yang pernah saya temukan…
    lengkap cuy,,
    thank’s :)

  8. yohan berkata

    mantap, thanks atas sharingnya

  9. Kurniawan berkata

    Thanks ya der.. Lumayan, di kampus ada lomba design web..hehe…

  10. thanks ya kak,semoga saya lancar mendesign web,maklum baru belajar2.kebetulan sekolah ambil jurusan Ti programming.

    • Dery berkata

      wew, hebat..
      silahkan belajar, semoga mendapatkan ilmu baru dalam programing..

  11. sasang berkata

    Nice post, om..
    Keep Posting.. :)