Tips menjadi web designer yang bagus

Oct 1 2011

Pernah beberapa kali saya menerima emel dari beberapa orang kenalan yang bertanya bagaimana untuk menjadi web designer yang bagus. Secara jujurnya, saya sendiri pun tak dapat memberikan jawapan yang memuaskan hati mereka, sebab saya masih mengganggap diri saya masih dalam proses belajar. Tiada satu cara yang khusus dan mudah untuk menjadi the best. Semuanya memerlukan masa dan juga kesabaran yang cukup tinggi, dan ditambah dengan sifat ingin tahu yang sentiasa membuak-buak di dalam dada. Tetapi, saya boleh berkongsi apakah keperluan dan kemahiran yang diperlukan untuk mencapai cita-cita itu. Di sini saya senaraikan beberapa benda penting yang anda perlukan jika anda ingin menjadi seorang web designer yang bagus.

1. Kuasai sepenuhnya HTML
Jangan sesekali pandang rendah kepada HTML kerana HTML merupakan kod-kod asas yang akan memaparkan output kepada pengguna melalui web browser. Tidak dinafikan ramai yang tidak mahir dengan HTML, tapi terus nak belajar server-side scripting seperti PHP dan ASP.NET. Itu salah! Tanpa HTML, output dari PHP atau ASP.NET hanya teks yang tiada format. HTML diperlukan untuk merangka struktur antaramuka laman web atau sistem kita. Anda boleh bayangkan HTML seperti rangka sebuah rumah. Dengan menggunakan markup tertentu, kita hasilkan tingkap dan pintu untuk rumah tersebut. Tanpa rangka, rumah itu tidak boleh disebut rumah, ia hanyalah sebidang tanah kosong dengan longgokan kayu-kayan sahaja. Sama konsepnya dengan antaramuka sistem atau laman Halaman 1

tambahkan imej menjadi background. Tidak kira apa jua aplikasi web yang anda ingin bangunkan. tidak kira apa jua server-side scripting yang akan anda gunakan. Dengan menggunakan CSS. bilik air. kita boleh tukar warna font kepada warna yang lebih menarik. W3Schools – HTML5 2. pengguna sistem pastinya bosan atau tak berminat langsung untuk menggunakannya. W3Schools – CSS3 3. Kuasai sepenuhnya CSS Jika HTML kita boleh anggap sebagai rangka rumah. CSS merupakan satu keperluan yang wajib dipelajari jika anda ingin menjadi seorang web designer. contohnya langsir. telah siap dicat. tetapi mereka tiada asas HTML. W3Schools – HTML 2. pasu bunga. sangkar kucing. Tanpa styling yang mencantikkan sistem tersebut. Jadi. CSS tetap diperlukan oleh aplikasi itu. Sama juga dengan sistem atau laman web yang kita ingin hasilkan. susun kedudukan elemen-elemen yang terdapat di dalam antaramuka sistem kita. dan lain lain elemen yang berfungsi mencantikkan rumah tersebut. tanpa HTML ia hanyalah longgokan teks yang tidak tersusun dan tidak mempunyai makna. Cuba anda bayangkan Sime Darby menjual rangka rumah kepada anda. adakah anda berminat membelinya? Sekurang-kurangnya rumah tersebut mestilah mempunyai tingkap. W3Schools – CSS 2. perabot. pintu. mahirkan diri anda dengan HTML sebelum anda mula belajar server-side scripting seperti PHP atau Ruby.web. Laman web untuk belajar: 1. Laman web untuk belajar: 1. CSS pula kita boleh anggap sebagai perhiasan untuk rumah tersebut. dan lain lain. Belajar tentang Javascript Halaman 2 . dan lain lain. Jika ada yang meminta saya mengajar PHP. saya akan suruh mereka kuasai HTML terlebih dahulu sebelum boleh belajar PHP. CSS berfungsi untuk memberikan style kepada HTML yang kita gunakan. tukarkan font asal kepada Comic Sans (yikes!).

menerima input dari pengguna. betul kan. Seterusnya.NET. seterusnya menterjemah request itu membentuk output yang diperlukan.. Proses yang berlaku disebalik link tersebut ialah web browser anda akan menghantar request kepada server Facebook yang memberitahu anda hendak Like gambar atau komen tersebut. tengok apa yang terjadi ketika anda tekan link Like pada gambar atau komen kawan-kawan anda. Server-side scripting ini berfungsi untuk membuat sambungan ke database. Inilah salah satu kegunaan utama Javascript.NET tidak bagus. cuma pada saya PHP lebih sesuai dengan cara saya (rasanya la. Form HTML ini akan menghantar request melalui method POST atau GET kepada server. Facebook juga menggunakan PHP untuk sistem mereka. W3Schools – PHP Halaman 3 . satu kod Javascript akan dijalankan untuk menukar link Like tadi kepada Unlike. Di sinilah anda perlu menumpukan fokus utama anda kerana ianya merupakan bahagian utama untuk sesuatu laman web atau sistem.Walaupun Javascript bukanlah satu keperluan utama. Laman web untuk belajar: 1. server akan merekodkannya dalam database dan kemudian menghantar maklumat itu kembali kepada web browser anda. Cuba anda lihat pada Facebook anda. Tetapi setiap request yang diterima dari pengguna antaranya melalui web browser. Pada web browser anda pula. Mahirkan diri dengan Server-side Scripting Server-side scripting yang popular pada ketika ini antaranya ialah PHP. Ruby dan ASP. Semuanya dilakukan oleh server-side scripting seperti PHP. Ini kerana pada masa ini. Tetapi ini tidak bermaksud . Pilihan saya ialah PHP dan saya tidak pernah menyesal bertukar dari . tetapi saya sangat menggalakkan anda mempelajarinya. Semua proses ini berlaku tanpa perlu buka halaman yang lain di dalam Facebook.NET ke PHP. contohnya menyimpan maklumat dari form itu ke dalam database.). menghasilkan output dinamik yang diperlukan dan lain lain lagi. dan akan menambah nama anda di dalam senarai pengguna lain. Laman web untuk belajar: 1. penggunaan Javascript untuk memanipulasi elemen DOM pada antaramuka sistem menjadi salah satu ciri tambahan yang sangat berguna. jadi kita tidak boleh cakap yang PHP itu tidak bagus. yang mana ianya memerlukan HTML untuk membentuk form. dan pengetahuan tentang language ini juga dapat membantu menaikkan nilai anda sebagai web designer atau web developer. W3Schools – Javascript 4.

anda perlu ingat ianya satu software pelbagai fungsi yang mempunyai pelbagai tools. Masking dan lain lain lagi. Jika anda lebih kearah fotografi. asalkan ianya memenuhi keperluan anda. Adobe Firework atau Pixelmator. Curve. dan ia juga boleh digunakan untuk membuat lakaran antaramuka sistem. pernahkah anda kaji semua elemen dan proses yang berlaku di dalam enjin kereta tu? Tentu tidak. Jadi anda kena tahu hala tuju pembelajaran anda. Tutorial 9 – Photoshop 3. Belajar menggunakan Framework Untuk mana-mana sistem yang saya perlu bangunkan untuk pelanggan saya. Laman web untuk belajar: 1. Ini kerana Photoshop untuk web design sangat berlainan caranya berbading Photoshop untuk fotografi. Anda juga boleh menggunakan software lain seperti Gimp (open source). Seterusnya kuasai teknik menguruskan layer anda kepada group yang bersesuaian. Ia boleh digunakan untuk membuat editing kepada gambar kahwin. Penggunaan framework sangat membantu mempercepatkan kerja pembangunan sistem dan banyak rujukan yang boleh kita dapatkan di Internet. saya tak nafikan. perkara pertama yang perlu saya fikirkan ialah apakah PHP framework yang sesuai. W3Schools – ASP. Kebiasaannya CodeIgniter mendapat tempat pertama dan CakePHP tempat kedua. PSHero – Free Photoshop Tutorial 6. adakah anda pernah cuba fikirkan apakah yang membuat kereta kita dapat bergerak di atas jalan. Ada yang tidak bersetuju dengan penggunaan framework ini atas alasan kita tak tahu apa proses yang berlaku di dalam framework. Tetapi cuba fikirkan pada dunia realiti kita. contohnya ialah menjaga aspect ratio semasa membesarkan atau mengecilkan imej. Kemudian. carilah guru yang boleh mengajar anda ke arah itu.NET 3. Belajar menggunakan Photoshop Saya rasa tidak perlulah saya kenalkan software ini kepada anda. ianya merupakan software yang sangat sangat sangat bagus yang berfungsi untuk membuat rekabentuk asas untuk sistem atau laman web.2. Clone Stamp. Biasakan diri dengan penggunaan Smart Object. PSD TUTS+ 2. Betul. tambahkan ilmu anda dengan teknik terbaik menggunakan perisian ini. Ruby Tutorial 5. bukan? Sama juga dengan Halaman 4 . Menyentuh tentang Photoshop.

Anda sendiri pun pasti tahu. Tujuan utama belajar CMS ialah untuk belajar fungsi-fungsi lain seperti Access Control List. dengan bantuan dan kerjasama dari komuniti mereka. Drupal. Dengan membaca. Jika ada yang cakap mereka suka hasilkan sendiri framework mereka untuk setiap sistem yang dibangunkan. CodeIgniter CakePHP Fat-Free Framework Zend Framework 7. Modules. siapa yang akan tolong perhatikan dan buat testing pada kod tersebut? Adakah anda pasti kod itu selamat? Jadi. bergantung kepada keperluan pelanggan. Jadi kita boleh pejam mata pada isu keselamatan pada framework itu kerana ianya telah diuruskan oleh pengguna seluruh dunia. tetapi jangan putus asa. jika kita ingin belajar maka belajarlah dengan orang yang jauh lebih pandai dari diri kita sendiri. Tetapi adakalanya kos untuk belajar dengan Halaman 5 . Tujuan utama menggunakan framework ialah mempercepatkan kerja kita. 4. Tetapi tidak suka re-invent the wheel. saya tabik dan ucapkan tahniah atas usaha anda. mengubahsuai dan mengkaji kod yang diberikan kita akan dapat belajar dengan lebih mendalam lagi teknik dan ilmu pembangunan sistem. Baik gunakan yang dah siap sedia ada jual di kedai.framework. Takkan setiap kali tayar kereta saya botak. Components atau apa sahaja yang kita tidak pernah tahu sebelum ini. belajarlah gunakan framework yang tersedia yang boleh digunakan secara percuma. Tetapi. dengan menggunakan framework yang kita buat sendiri. 2. bukan membuat kajian proses yang berlaku setiap kali server menerima request dari pengguna sistem. Selongkar dan kaji CMS Seterusnya anda perlu belajar menggunakan CMS yang ada seperti Joomla!. Silverstripe dan lain lain lagi. 3. setiap isu yang terdapat di dalamnya akan diperbaiki secepat mungkin. WordPress. Plugins. adakah anda jauh lebih baik dari Google? Framework biasanya dibangunkan oleh developer dari serata dunia. ada sesetangah benda yang kita tidak perlu ambil tahu kerana ianya akan membuang masa kita. Cepat dan selamat. Walaupun adakalanya kod-kod yang terdapat di dalam CMS tersebut sukar untuk kita fahami. User Management. saya kena beli getah dan dawai untuk buat tayar sendiri. Gunakan Google untuk mencari maklumat lanjut tentang bahagian yang kita tidak faham. Google yang besar itu pun menggunakan jQuery (Javascript framework) untuk aplikasi mereka. sama ada Joomla! atau WordPress. Untuk projek laman web biasanya saya akan pilih CMS yang bersesuaian. Antaranya ialah: 1.

Internet merupakan gedung ilmu tanpa sempadan. Tetapi laman web yang menawarkan tutorial pula lain. Cara ini pada saya tidak betul. Netbeans dan lain lain lagi. Notepad++. dari scripting mIRC hinggalah ke PHP. 9. kita perlu mencari kesilapan kod aturcara kita secara manual. Drupal 3. 365 hari setahun. Ini kerana tiada siapa di dalam dunia ini yang mampu mengajar anda 24 jam sehari dan sentiasa ada di sisi anda ketika anda memerlukan bantuan. Vim dan lain lain. Selain daripada itu. Latih diri anda mengingati kod-kod yang anda perlukan. melalui kod-kod aturcara yang terdapat di dalam CMS ini. Baca tutorial Ramai yang masih belum tahu menggunakan Internet sepenuhnya. Cuba gunakan text editor yang lebih ringkas seperti PSPad. Cuma ianya memerlukan kesabaran yang sangat tinggi kerana adakalanya kod-kod ini sukar untuk kita fahami. Aptana Studio.mereka sangat mahal. mereka pastinya bersetuju bahawa belajar sendiri melalui tutorial dari laman web merupakan salah satu cara yang paling mudah dan murah untuk mencapai cita-cita anda. Saya sendiri belajar melalui Internet. Ramai yang mengharap tunjuk ajar sacara terus dari seseorang tanpa perlu membaca. ia juga dapat membiasakan kita menulis kod-kod aturcara tanpa bergantung kepada perisian tersebut. Eclipse. Gedit. semuanya saya dalami dari Internet. Geany. Sebab utama ialah dengan menggunakan text editor seperti yang saya senaraikan di atas ini. Textmate. dan hasilnya anda akan dapat menulis kod dengan lebih cepat dan di dalam masa yang sama kurang melakukan kesilapan. Elakkan menggunakan software seperti Adobe Dreamweaver. Ini dapat membantu menbentuk kemahiran problem solving tanpa kita sedari. WordPress 2. Elakkan menggunakan IDE Penggunaan IDE di dalam menulis kod aturcara sangat membantu kita dan dapat mengelakkan berlakunya kesilapan. ia sentiasa ada 24 jam sehari. Contoh CMS yang boleh anda gunakan: 1. Cuma anda perlu tahu. Joomla! 8. dan ia juga gudang dosa tanpa sempadan. jika berlaku sebarang masalah pada kod aturcara. Jadi kita boleh belajar dengan cara yang lebih mudah dan murah. Anda perlu fokus pada objektif anda untuk belajar dan Halaman 6 . Tetapi penggunan IDE juga melambatkan proses pembelajaran kita. Jika anda cuba temuramah mana-mana web designer atau web developer yang berjaya.

11. 5. Gunakan Google sebaiknya Saya pernah menjalankan training pada beberapa agensi kerajaan sebelum ini. Jadi. Antara laman web yang banyak menawarkan tutorial dan bahan bacaan yang bagus: 1. Menulis blog adakalanya dapat memberikan kepuasan jika betul gayanya. lebih banyak manfaat dan juga tawaran yang akan kita dapat. Cuba anda ingat balik. Mungkin ketawa kerana merasakan saya buat lawak. Anda tidak perlu jadi seperti blog-blog besar di luar sana. berapa kali anda cuba cari penyelesaian tentang masalah sistem anda di Google dan tidak mendapat jawapan langsung. cuma bukan jawapan 100% macam mana saya mahukan. pintu rezeki anda sentiasa akan terbuka jika anda suka berkongsi ilmu dengan orang lain.ag Naldz Graphics 10. kita kena kembangkan sendiri mengikut kesesuaian situasi yang kita hadapi. tetapi lebih kepada memberikan kita idea bagaimana untuk menyelesaikan masalah itu. Kita kena faham jawapan yang kita dapat dari Google itu bukan penyelesaian masalah. Jangan la harap orang suap terus masuk dalam mulut aje selalu. Bila dah dapat idea. Pada saya. tidak pernah. Jangan kedekut dengan ilmu yang dipinjamkan kepada kita.jangan cepat berputus asa. Kesimpulan Halaman 7 . Tuts+ Six Revisions Smashing Magazine Design M. Lebih banyak kita kongsi. Kongsi ilmu Jika anda rasa anda mempunyai sesuatu untuk dikongsi dengan orang lain. Hasilnya tidak akan datang dalam sekelip mata. Adakalanya setakat 30% sahaja. tetapi itupun sudah memadai. dan bila saya cakap kepada trainees supaya belajar gunakan Google. be creative. ataupun ketawa sebab terasa apa yang saya cakap itu sangat remeh. gunakanlah Google sebaiknya. 3. mereka ketawa. Kongsi ilmu anda dengan orang lain seperti yang ada pada blog saya. Setiap kali saya cari pastinya dapat jawapan. tapi insya Allah ianya sangat berbaloi. 2. Percayalah. 4. Cuba gunakan kombinasi keyword yang berlainan untuk mencari jawapan yang anda perlukan. cukuplah sekadar menjadi tempat anda berkongsi ilmu yang anda ada. mulalah dekatkan diri anda dengan blog.

Bukan senang hendak senang dan bukan senang untuk jadi pandai. dan kurangkan masa melepak sembang kosong kat mamak. banyakkan membaca blog-blog yang memberikan maklumat tentang bidang yang anda minat. Halaman 8 . tetapi ia tidak mustahil. Luangkan lebih masa anda untuk belajar benda yang baru. Gunakan masa yang berharga itu untuk menjadikan diri anda lebih baik dari hari ini.

Sign up to vote on this title
UsefulNot useful