Web designer

Kebetulan ada rekan di salah satu milis yang saya ikuti (komputer teknologi)

mengutarakan niatnya:

Selamat siang..

Saya berniat atau tertarik untuk belajar web design tapi karena bermacam2
software / program yang dipergunakan saat ini, maka saya mohon saran untuk
pemula seperti saya ini program apa yang cocok dipergunakan dan didownload
dimana???

Terima kasih

Salam,

Adhy.

Kemudian sebagai anggota milis yang bertanggung jawab, saya berniat sedikit memberi pencerahan kepada mas Adhy, saya coba share pengalaman saya. Berikut jawaban saya:

Halo mas Adhy...

sekedar sharing dari saya semoga dapat memberi sedikit pencerahan,

Untuk belajar web design saat ini sudah cukup banyak resourcenya di internet yang bisa diambil gratis.

Suatu website biasanya ada yang sifatnya:

1. Statis (Content tidak berubah. Tidak ada interaksi dengan user / database seperti input komentar)
2. Dynamic (Biasanya content dapat berubah otomatis/manual, terdapat engine untuk berinteraksi dengan user / database dll)

Web application development secara umum dibagi menjadi 2 bagian tim implementasi (ini tergantung scope aplikasi yang ingin dibangun ya).

1. Tim Web Designer (art/creative director, web designer sediri, animator, illustrator, multimedia designer) yang bertanggung jawab atas hubungan suatu websitenya dengan usernya
   
2. Tim Web Developer (software/web architect, web developer/programmer, database developer) yang bertanggung jawab atas hubungan suatu website dengan content, database, system dll
   

Umumnya,

Untuk website static, dapat dihandle oleh web designer saja.

Untuk website application yang dynamic butuh web developer.

Sedikit cerita,

pada jaman sekarang, web designer sudah mengalami evolosi yang cukup signifikan. Pada jaman dulu modal web designer adalah bisa photoshop dan html. Ada kasus web designer yang hanya memberikan mockup berupa file jpg yang merupakan tampilan web yang sangat bagus dan artistik kepada web developernya. File tersebut membuat sang web developer bingung, karena dimana ia akan mengintegrasikan program yang telah ia buat. Akibatnya ia harus memotong-motong dulu image yang diperlukan dan dibuat halaman htmlnya.

Hal itu kurang baik, karena pekerjaan web designer seperti itu tidak beda dengan graphic designer. Web designer diharapkan dapat menghasilkan sesuatu yang dapat langsung digunakan oleh web developer. Oleh karena itu hasil akhir suatu web designer adalah sebuah halaman web html yang sebaiknya terlihat sama pada beberapa web browser (firefox, internet explorer dll). Sehingga web developer langsung dapat mengintegrasikan engine web yang telah didevelop dengan cara menyisipkan kode-kode pemrogramannya pada html yang telah dibuat web designer.

Kemudian evolusi mulai berlanjut dengan munculnya istilah seperti web2.0, web standard accessibility & usabillity, css, microformat, SEO, online validator, web browser compatibility, machine readable, xhtml, doctype version, tableless web layout dll

Nah, untuk tim web designer.

Biasanya yang dilakukan pada saat implementasi adalah:

1. Membuat mockup web page design sesuai arahan art directornya (termasuk halaman apa saja, logonya seperti apa, color pallete, typography, layout tiap halaman, document version dll)
   
2. Implementasi semua kebutuhan multimedia seperti still image, icon, animation, audio, video.
   
3. Membuat (x)html + css sesuai standard spesifikasi dari mockup halaman yang telah dibuat
4. Validasi dokumen sesuai standarisasi dari W3C
5. Menerapkan web accessibility sesuai kebutuhan
6. Menerapkan semantik web dengan SEO (Search Engine Optimization)
7. Selanjutnya dapat diserahkan ke web developer untuk diintegrasikan dengan engine / database dll. Disini web designer perlu mendampingi web developer agar integrasi dapat berlangsung dengan baik, dan jika ada penyesuaian terhadap engine dari web developer juga dapat langsung ditangani

Sekali lagi saya ingatkan, hal ini disesuaikan dengan kondisi proyeknya, SDM, finansial, cakupan system, dll. Tidak semua projek dapat diberlakukan seperti hal diatas.

Tools umumnya:

1. Membuat mockup dapat dibantu dengan adobe photoshop / fireworks / gimp
2. Untuk bantuan membuat vector image bisa dengan adobe illustrator / corel draw / freehand
3. Untuk membuat animasi bisa menggunakan adobe flash / Xara 3D / Adobe photoshop - image ready.
4. Untuk membuat html, css, javascript dapat dengan text editor manapun, seperti adobe dreamweaver, editplus, bluefish, notepad
5. Untuk validasi dokumen secara online ada di site validator w3

Untuk mendownload beberapa tools dapat dilihat disini::

Web authoring tool1
Web authoring tool2

Open source web design toolbox

Nah ini, untuk best practicenya.

Mas Adhy dapat memulai dengan mempelajari web graphic design dan HTML.

Materi selanjutnya (web standard,css,javascript,SEO,ajax) dapat mas Adhy pelajari pelan-pelan sambil jalan.

Mas Adhy bisa mulai belajar HTML.

Materi yang saya lihat cukup baik untuk belajar 

ada disini http://www.w3schools.com/

(toolsnya saya sarankan adobe dreamweaver / editplus)

dan tentunya web browser (Firefox, Internet Explorer, Opera, Safari)

Untuk mendalami graphic design pada media web,

(toolsnya saya sarankan adobe photoshop)

ada beberapa situs yang dapat memberi inspirasi.

Salah satunya ini:

http://bestwebgallery.com/

Jika dua ini sudah beres, anda bisa memperdalamnya dengan melihat

ebook html/web design atau tutorial di internet yang lebih praktis

seperti http://www.photoshopsupport.com/tutorials/jennifer/web-template.html

dan http://www.pegaweb.com/tutorials/aurora/aurora.htm

Untuk bacaan beberapa tulisan saya diatas dapat dilihat disini:

Web Standard 

Web Standard Project

Web Accessibility

SEO.

HTML 4.01 specification by W3C

terima kasih, semoga dapat memeberi sedikit pencerahan.

Mohon koreksi dari rekan-rekan yang lain jika tulisan saya ada yang salah,

Selamat Belajar mas Adhy :)

regards,

Thomas Satrio