Tips Rekabentuk Web Yang Ideal

[code7]

Di sini saya akan listkan beberapa ciri web design yg ideal :

1. Loading faster
Web design yg mudah loading merupakan salah satu faktor utama pengunjung suka surfing. Contohnya google & yahoo.. layout designnya simple saja dan mmg sebegitu krn ia hanya mementingkan maklumat/info yg cpt dan mudah dilayari.

2. Appropriate Colour, Theme & Concept design
Sstgh web yg bagus ada tema dia... ada penggunaan color yg seimbang dan concept yang tepat. Contohnya web berkaitan education ada imej/grafik berkenaan education, buku, pelajar dan bukan mengenai kereta kebal atau jet pejuang. Colour dia seimbang, kebanyakan tone colour ada maksudnya tersendiri... warna silver, putih & color cerah lebih nampak corporate.. manakala black dan colour gelap lebih sesuai utk web personal... Concept design pula terpulang pada anda nak wat corporate, personal atau season template mcm tahun baru, world cup etc... Kalo perlu audio & motion graphic kita guna flash.. buat sehabis baik mungkin dan berikan option utk skip.. Sbb sstgh user maybe ada prob connection dan tak mahu lambat tgk flash animation.. Sbb itu bila ada concept dan berjaya memanipulasikannya adalah satu kejayaan yg ideal..

3. Less is more
Ini konsep saya... lebih simple graphic lebih banyak cantik.. kita tak perlu menyerabutkan kepala dgn teori2 ilham design yang terlalu banyak. Cukup dgn penggunaan colour dan concept yg betul ia sudah memadai... Tak semua user suka graphic kita, sbb itu biar nampak minimum tapi modern. Jgn terlalu obses graphic sehingga menyerabutkan design anda. Kreativiti perlu disertai dgn strategi content management. Barulah org nampak tersusun, sistematik & tidak serabut.

4. Compatible with all web browser & screen resolution
Ini satu cabaran wat webmaster.. tak seme web design kita support browser dan screen resolution. Kenkadang byk 'jawa'script , dhtml, css dll tak disupport oleh browser lain. Wat masa ni dunia masih popular dgn Internet Explorer & Mozilla Firefox. Kita cuba buat web kita compatible dgn 2 browser ini. Jgn bagi nampak cacat dgn kedua-dua browser ini, ia mmg cukup mencabar jika kita mmg jenis suka guna css, dhtml, jawascript krn ada byk pro & cons dalam browser yg berlainan. Dan satu lagi ialah screen resolution. Kita perlu pastikan web design kita support 800x600 dan 1024x768.. kalo lebih dari itu lagi bagus... Sbbnya ia nampak stable & reasonable bila dalam screen yg berlainan, susunan graphic table tak lari, imej tak senget atau cacat dalam reso yg berlainan.. Ia juga satu cabaran buat kita bina web yang bebetul ideal dgn byk browser & resolution.

[code7]

5. Navigasi button yg tersusun & elakkan typing error
Masa design web pastikan konsep navigation button anda telah disusunkemas mengikut keperluan page... Contoh konsep navigation button ada 3 jenis bagi saya yg boleh diikuti...

a. Link text biasa : Mcm di Komuniti SoftHands http://community.softhands.com.my menu nya link text di atas header dan kiri
b. Link image : Mcm di PIDS 2003 - 2004 ada navigation button image.
c. hierarchy menu : Mcm di YPEIM ada turunan link button guna dhtml

Konsep navigation button ni penting sekiranya anda ada byk link page yg perlu dicombine dalam satu website.. Buat ia jelas dan tak mengelirukan. Kemudian elakkan typing error krn ia akan menyusahkan user....

6. Kurangkan guna FRAME gantikan dgn IFRAME
Seeloknya kita guna page biasa dan elakkan guna frame. Ini kerana frame ada byk kerenah yg tak bisa kita counter dalam byk aspek. Terutamanya loading yg lambat krn ia perlu load 2 atau lebih page dalam satu masa. Kalo perlu guna pun gantikan ia dgn IFRAME code dia sebegini :

<iframe width=137 height=126 name=iframe scrolling=no border=0 frameborder=0 src=news.htm></iframe>

width dan height boleh disetting ikut kesesuaian.. manakala page yg anda ingin view dalam iframe spt news.htm juga boleh diubah ikut kesukaan hati anda.

Contoh iframe yg saya guna ialah di YPEIM di bahagian info terkini....

7. Optimize Graphic & HTML anda.
Ni taktik yg saya slalu buat bagi nak melajukan web anda walau ada kandungan graphic berat dan html yg banyak... Pertamanya optimize dgn graphic optimizer yg ada di dalam photoshop bagi format jpeg atau GIF.. jpeg lebih sesuai utk pic/photo yang kompleks, gif pula utk imej yg simple ada 2/3 colour utama, logo dan lelain yang tidak kompleks... Dalam photoshop ada fungsi Save For Web (Alt+Ctrl+Shift+S) kite leh optimize mengikut kualiti rendah, sederhana atau tinggi... biasanya saya buat sederhana/rendah bila imej tu kurang penting. Dgn ini ia kecil size dan cpt loading.

HTML Optimizer pula boleh dicompresskan coding html jadi satu line atau beberapa kecil krn ia buang tag yg tak diperlukan. Anda boleh guna Absolute HTML Compressor utk optimizekan HTML tag anda. contoh web yang saya telah optimizekan tag html dia ialah di YPEIM .. sila lihat source code dia utk lihat kelainan.... terlalu compress dan padat .... mmg mana2 web client saya suka compress HTML,biar ia kecil dan bley load faster...

8. Keep learning....
ada byk lagi tips... tapi saya maybe tak dapat senaraikan semuanya, but boleh teruskan pembelajaran dan pertanyaan jika ada... bagi yg nak tahu tips2 design bley download free ebook ttg tutorial web design di bahagian Download Softhands http://download.softhands.com.my atau download terus di link ini.... 100 Do's and Don'ts in Web Design

--
Code7, Webmaster SoftHands.Com.My

[AE86]

"I do"
Terima kasih. Susah2 je bagi tips..
Amat berguna!!!

[taiping_online]

Saya suka artikel anda. Tolong beri komen mengenai penyusunan dalam blog saya. Saya harap, saya akan menjadi salah satu contoh, untuk artikel anda.

[syia]

syia bukan la pakar bab2 web ideal ni tapi kalau dr segi blogkan syia sarankan pakai wordpress dan kalau leh biar layout atau theme nampak professional. kalau boleh luangkan masa pilih theme yg jarang digunakan, lepas tu try modify sikit. kalau rajin, gune google found out cam mana org modify theme tersebut. biar atlesat header atau kaler lain dr yg original.

yg ideal la bagi syia, kalau syia nk buat blog syia akan lakarkan dulu kat kertas A4. apa nk taruk, link2 kat mana, iklan kat mana, flickr kat mana.. bagi nampak kemas dan menarik ++ professional

[code7]

aik.. camner topik ni leh terkeluar ? bukan ke dah terpadam sejak berrtukar ke versi vBulletin ?

[anas88]

Originally Posted by code7

[size=3
7. Optimize Graphic & HTML anda.
Ni taktik yg saya slalu buat bagi nak melajukan web anda walau ada kandungan graphic berat dan html yg banyak... Pertamanya optimize dgn graphic optimizer yg ada di dalam photoshop bagi format jpeg atau GIF.. jpeg lebih sesuai utk pic/photo yang kompleks, gif pula utk imej yg simple ada 2/3 colour utama, logo dan lelain yang tidak kompleks... Dalam photoshop ada fungsi Save For Web (Alt+Ctrl+Shift+S) kite leh optimize mengikut kualiti rendah, sederhana atau tinggi... biasanya saya buat sederhana/rendah bila imej tu kurang penting. Dgn ini ia kecil size dan cpt loading.[/size]

Kalo JPEG.... Standard kalo nak kecikkan photoshop quality berapa % aaaa?

[alang]

good info, thread stuck. Walaupun dah lama, ni first time saya membacanya dan saya rasa info ni amat berguna untuk semua yang nak buat laman web

[zuraidi]

info yang patut dibaca. good job

[batagolek]

bagus info ni, leh buat ebook compilation dan offer di download section sbg koleksi warga WC...