Dasar – Dasar Web Desain yang Baik

Dasar – Dasar Web Desain yang Baik

1.Website dengan loading yang cepat
Website dengan loading cepat ini adalah yang sangat perlu anda perhatikan. Website adalah semua hal tentang kecepatan; loading cepat, pencarian cepat, dan informasi yang dicari juga harus cepat.

Coba saja, jika anda menjadi user internet dan sedang mencari informasi yang cepat, jika anda membuka google dan mencari kata kuncinya, kemudian user menemukan website anda, sedangkan website anda mempunyai loading yang sangat lambat, user punakan menuju list yang ada di google lainnya, karena user membutuhkan informasi yang cepat.

Jadi untuk saran, gunakan sedikit gambar yang berukuran besar dan sebaiknya di-optimize terlebih dahulu. Gunakan sedikit multimedia auto-running seperti video maupun file multimedia lainnya. Cek kode yang ada di halaman website anda yang dapat mempengaruhi waktu loading halaman website anda.

2. Hindari penggunaan animasi website yang tidak terlalu berguna
Misal anda menjadi seorang user internet, apakah anda akan tertarik pada animasi yang tidak menginformasikan apapun pada halaman web sedangkan anda harus menunggu lama untuk membuka halaman web itu ? Pasti tidak, karena anda pasti membutuhkan informasi yang cepat. Saya tidak memungkiri penggunaan animasi juga dapat memperindah bentuk sebuah situs, saya juga menerapkan animasi pada header web saya. Untuk itu saya rekomendasikan, untuk menggunakan animasi dengan ukuran kecil yang akan ditempatkan pada halaman utama website anda. Ini akan menyebabkan loading yang lebih cepat dan user dapat melihat isi website anda dengan baik agar tidak menunggu lama untuk animasi yang ada di website anda selesai. Catatan saya yang terakhir, hindari penggunaan intro pada situs yang sebenarnya tidak terlalu berguna,seperti ”Enter Here” atau gambar yang akan membawa user kemana halaman website utama anda berada, lebih baik jangan gunakana seperti ini, karena hanya akan memperlihatkan anda seorang webmaster yang kurang profesional dalam mengerjakan situs. Selain itu, penerapan ini juga akan sangat membuang waktu user internet.

3. Hindari konten web yang membingungkan.
Jika sekarang anda sudah mempunyai pengunjung, hindari pengunjung tersebut untuk pergi dari website anda dengan cepat. Berikan isi konten yang menarik, tapi juga tidak membingungkan pengunjung. Jadi, jangan menggunakan sesuatu yang membingungkan pada halaman utama web anda. Seperti musik pada halaman web anda yang terlalu keras, sehingga pengunjung akan cepat mengecilkan volume di speaker-nya ataupun yang paling parah, pengunjung akan pergi dari website anda, karena kesmrawutan musik yang anda sajikan. Jangan menggunakan animasi flash ketika pengunjung sedang membaca artikel anda, jangan menggunakan popup,flyout ataupun iklan yang besar yang dapat menutupi keseluruhan website anda. Multimedia sangat bagus diletakkan pada website, tapi jangan memborbardir pengunjung dengan hal yang seperti itu terlebih dahulu, gunakanlah link untuk multimedia anda tersebut, sehingga pengunjung yang tidak terlalu suka dengan judul link anda tersebut, dapat menghindarinya.

4. Mempunyai tema web yang jelas.
Banyak website menggunakan niche yang tidak jelas. Ini jelas membuat pengunjung menebak apa sebenrny tema dari situs tersebut. Oleh karena itu, buat pengunjung dengan mudah menentukan apa sebenarnya tema maupun konten yang diberikan oleh website anda.Buat sebuah headline yang jelas, yangkemudian jika pengunjung suka, pengunjungpun akan memilih untuk melihat-lihat terlebih dahulu website anda secara keseluruhan.

5. Desain yang berkoordinasi dengan baik.
Untuk memberikan kesan yang baik pada pengunjung, gunakanlah theme,maupun layout website anda secara konsisten di setiap halaman, karena tidak jarang juga seorang webmaster menggunakan logo, theme maupun layout yang tidak konsisten di setiap halaman. Diperbolehkan website mempunyai kombinasi warna yang lain di setiap halaman, tapi jangan terlalu drastis, yang akan menyebabkan pengunjung merasa sudah berada di website yang lainnya.Ini akan memberikan kesan yang tidak baik pada website anda.

6.Navigasi situs yang mudah.
Penggunaan navigasi yang mudah ini akan menyebabkan pengunjung website anda dengan mudah pergi ke halaman yang lain dari website anda. Ini akan memberikan kemudahan pengunjung. Ada empat standard penempatan navigasi dalam situs anda, yaitu di atas( biasanya di bawah header), di samping kiri, di bawah, dan di samping kana website anda. Gunakanlah empat standard penempatan ini, jangan menggunakan Navigasi yang misterius seperti di dalam space(Spotarea) ataupun di dalam gambar yang tersembunyi dan kecil. Berikanlah kemudahan pada engunjung website anda.

7.Buatlah sebuah situs yang sudah ”benar-benar komplit”
Ini berarti anda harus menghindari mempublikasikan situs yang sebenarnya belum jadi ataupun ada link-link yang rusak ataupun juga ada halaman yang belum jadi yang akan bertuliskan ”Under Construction” atau apalah itu yang menunjukkan situs tersebut belum jadi. Sebaiknya anda hindari pengunaan kata-kata itu dalam situs anda. Ini akan membuat anda lebih profesional look dan yang pasti pengalaman yang bagus kepada pengunjung situs anda.

Tips Desain Web

1. Unik:
Dalam membuat karya apapun seorang designer mempunyai kesadaran untuk tidak meniru atau menggunakan karya orang lain. Begitu pula seorang Web Designer harus mempunyai budaya malu untuk menggunakan icon, animasi, button, dll, yang telah digunakan atau dibuat oleh orang lain.

2. Komposisi :
Seorang Web Designer selalu memperhatikan komposisi warna yang akan digunakan dalam website yang dibuatnya. Pergunakan selalu Palette 216 WebColor, yang dapat diperoleh dari Adobe.com, hal ini untuk mencegah terjadinya dither pada image yang berformat GIF. Dalam membangun website suatu perusahaan, Web Designer selalu menyesuaikan warna yang digunakan dengan Corporate Color perusahaan tersebut.

Sebagai contoh:
Telkom Corporate Color-nya adalah biru, Coca-Cola : merah dan putih, Standard-Chartered : hijau dan biru, dsb. Untuk kemudian warna-warna tadi digunakan sebagai warna dominan atau sebagai elemen pendukung (garis, background, button, dsb).

3. Simple :
Web Designer banyak yang menggunakan prinsip "Keep it Simple", hal ini ditujukan agar tampilan website tersebut terlihat rapi, bersih dan juga informatif.

4. Semiotik :
Semiotika adalah ilmu yang mempelajari tentang tanda-tanda. Dalam hal ini diharapkan dengan melihat tanda atau gambar, user/ audience dapat dengan mudah dan cepat mengerti. Sebagai contoh: Jangan membuat gambar/image yang berkesan tombol, padahal itu bukan tombol/ link.

5. Ergonomis :
Web Designer selalu memperhatikan aspek ergonomi. Ergonomi disini adalah dalam hal kenyamanan user dalam membaca dan kecepatan user dalam menelusuri website tersebut. Web Designer memilih ukuran Fonts yang tepat sehingga mudah dibaca, Web Designer menempatkan link sedemikian rupa sehingga mudah dan cepat untuk di akses dan lebih penting lagi adalah Informatif.

6. Fokus :
Tentukan hirarki prioritas dari pesan yang akan disampaikan, misalnya: Judul harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul yang berukuran hampir sama. Hal ini akan membingungkan user/audience untuk menentukan pesan mana yang harus lebih dahulu dibaca/ dilihat.

7. Konsisten :
Tentukan font apa yang akan digunakan sebagai Body-text, Judul, Sub Judul dan sebagainya, sehingga website tersebut akan terlihat disiplin dan rapi. Sesuaikan jenis huruf yang digunakan dengan misi dan visi website tersebut, misalnya: hindari menggunakan font Comic dalam membangun website suatu perusahaan resmi.

1.

Prinsip Dasar Desain

Prinsip Dasar Desain

Kontras (Contrast)
Maksud prinsip kontras adalah menghindari elemen desain dalam halaman yg tampak serupa. Apabila elemen (jenis tulisan, warna, ukuran, tebal tulisan, spasi, etc) tidak diingkan serupa maka buat elemen desain tsb saling membedakan. Kadang, dalam sebuah halaman, kontras menjadi visualisasi yg paling menarik perhatian. Kontras adalah penyebab awal pembaca membaca halaman tsb.

Repetisi (Repetition)
Elemen visual yg berulang dalam sebuah desain. Kamu dapat mengulang ulang warna, bentuk, teksture, ketebalan garis, jenis tulisan, ukuran, konsep grapis, etc. Pengulangan eleme visual ini mengembangkan komposisi dan memperkuat desain dalam kesatuan komposisi.

Alignment
Jangan meletakkan elemen desain apapun tanpa sebab. Setiap elemen visual harus memiliki hubungan dengan elemen visual lain yg berada dalam halaman. Penggunaan alignmen yg tepat akan melahirkan efek tampilan bersih, berkelas, dan segar.

Kedekatan (Proximity)
Setiap elemen desain yg saling berhubung seharusnya dikelompokkan bersama sama. Saat elemen desain saling berdekatan, mereka lebih terlihat sebagai satu unit visual daripada unit visual terpisah. Penggunaan promity yg tepat akan mengorganisasikan informasi, mengurangi kekacauan, dan memberikan pembaca struktur tampilan yg jelas.

contoh web desain















Prinsip Desain

Desain Website Bagi Semua Browser
Sebagian kecil web designer memegang dogma web ideal dimanadesain situs harus bisa diakses semua browser tanpa kecuali. Untuk mencapai standar ideal tsb, webdesigner harus memastikan layout halaman yg didesain bekerja sempurna pada setiap browser, termasuk lynx, webtv, firefox, opera, netscape, dan lainnya. Layout Template website tsb juga harus bekerja sempurna pada versi minor browser tsb (yg kadang kadang memiliki metode parsing HTML yg berbeda dengan anak anak versi mayor / minor lainnya).

Sekarang Standar ideal desain tsb tidak lagi mutlak. Tidak perlu memaksakan diri mewujudkan cetak biru desain website apabila klien tidak menginginkannya. Terlebih lagi, ada keputusan penting berada di luar kendali webdesigner yg bisa mempengaruhi output akhir, seperti release terbaru browser.

Terbayangkan seandainya perusahaan firefox merelease versi baru, maka kita pun harus mendesain ulang (redesain) website agar sesuai dengan bagaimana versi baru tsb memparsing kode html situs sambil tetap berusaha membuat layout situs compatible. Wow, melihat panjanganya masa desain, testing, dan developing web, bisa dikatakan kalau pembuatan website telah berubah menjadi website developing derita yang mirip perumpamaan menguras air laut dengan gayung mandi. Website Developing menghabiskan terlalu banyak waktu, tenaga, dan akal sehat jadi lebih baik dihentikan sebelum semua orang yg berhubungan dalam pembuatan websites menjadi gila hahaha..

Seandainya (masih) ada manusia yg berniat menjadi designer web jenis ini maka ada baiknya pemakaian teknologi web sekunder seperti javascript, java, CSS, dan DHTML sedikit dikurangi. Ada baiknya ketergantungan terhadap teknologi selain HTML dikurangi karena selain bukan kunci sukses komunikasi dunia maya, penggunaan Bahasa Scripting non HTML adalah penyumbang terbesar masalah kompabilitas (terutama saat perusahaan seperti firefox melakukan release versi baru).

Dengan memahami bagaimana elemen situs mengalami degradasi, kamu dapat menyusun halaman situs yang akan tetap tampil fantastis pada browser terkini. Halaman situs tsb juga tidak akan mengusir pengunjung website yg menggunakan versi jadul browser

Desain Website Bagi Semua Orang
Pendekatan desain lain, yg cukup sukses, adalah membuat bermacam versi situs yg didesain demi kebutuhan bermacam tingkat user. Satu versi situs bisa bekerja dengan javascript. Sementara yang lain, berupa solid HTML 3.0 namun tanpa elemen aksesoris lain. Kemudian Dibuat juga versi text-only yg diperuntukkan bagi para pengguna Lynx, browser nonvisual, dan browser sederhana lainnay. Seandainya kamu banyak waktu luang, maka kamu bisa membuat versi situs flash. Namun pada dasarnya, 2 versi situs saja sudah lebih dari cukup.

Pengembangan metode pendekatan ini adalah dengan memasukkan snippet kode pengecek jenis versi browser yg dipakai pengunjung websites. Kemudian seandainya info tsb sudah didapat, maka server akan menampilkan halaman situs yg sesuai browser pemanggilan HTTP request. Tentu saja metode ini membutuhkan lebih menyita waktu dan juga pengetahuan teknis coding lumayan, namun layak untuk ditempuh seandainya kamu ingin pengalaman pengunjung optimal disebabka hasil desain terbaik.


Langkah demi langkah desain website :

1. Membuat sketsa desain di kertas

2. Membuat layout desain denagn photosop atau coreldraw
Setelah sketsa sudah jadi, softwareyang digunakan seperti Adobe Phothosop, Adobe Illustrator, Macromedia Fireworks dan lain-lain

3. Membagi gambar menjadi potongan kecil (slicing)
setelah layout desain hompagesudah jadi, file gambar tersebut dipecah menjadi potongan kecil-kecil untuk mengoptimizewaktu download.

Untuk melakukan hal tersebut dapat menggunakan softwareAdobe Photshop CS3. Softwareini dapat langsung memotong gambar yang besar dan otomatis juga menjadikannya kedalam halaman html. Langkah ini bisa saja dilewatkan jika saja ukuran gambar tidak terlalu besar.

4. Membuat animasi dengan Flash atau gif construction set

5. Membuat html
setelah itu dalam merapikan layout desainkita seperti menempatkan beberapa tombol dan gambar, menambah text, mengedit scripthtml, membuat layoutformke dalam format html. Untuk hal ini dapat dilakukan dengan softwarehtml editor seperti macromedia dreamweaver.

6. Programing dan scrip
untuk website e-commerce, iklan baris, lelang, database, membuat guestbook, counterdan forum diskusi. File html kita perlu programminguntuk melakukan aktivitas semacam itu. Programming dan script ini bisa dibuat dengan menggunakan bahasa ASP, Borland Delphi, CGI, PHP, Visual Basic. Dan yang perlu kita perhatikan bahwa programmingdan scriptbiasanya
dilakukan setelah desain homepagekita telah jadi.

7. Upload html
setelah file kita telah menjadi html beserta gambar dan scriptnya. Kita perlu meng-uploadnya kita perlu meng-upload file kita ke suatu tempat (hosting),

Agar semua orang didunia dapat mengakses halaman html kita. Biasanya macromedia dreamweaver dengan fasilitas site FTP dan microsoft Frontpage dengan Publishnya telah menyediakan fasilitas uploadini. Atau dapat menggunkan softwareseperti WS-FTP, Cute FTP, Filezila dan lain-lain.