Web Design and Animation

Tips dan Trik dalam Mendisain Web

 Sering kita temui website yang tipikal: “Welcome to my homepage,” animasi e-mail, background dengan tulisan miring (diagonal), animasi garis pembatas, tabel dengan border tiga-dimesi dan lain-lain. Hal ini terjadi akibat dari fasilitas Template yang disediakan oleh software pembuat web seperti: FrontpageT, Corel WebDesignerT, dan sebagainya yang ditujukan untuk mempermudah penggunanya dalam membangun website.

Jika anda puas dengan hasil kerja anda membangun website dengan fasilitas template, sudahlah cukup sampai disini. Tetapi jika anda tidak puas dengan apa yang anda buat, dan anda merasa ingin lebih baik, maka anda perlu mengetahui bagaimana Web Designer membangun suatu Website, terlepas anda punya bakat seni atau tidak.

  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.

Demikian beberapa aspek dan prinsip yang digunakan Web Designer dalam membuat website, selebihnya merupakan ekspresi dari pembuat website itu sendiri yang terwujud dalam penggayaan penyusunan website. 

Software-software pembuat suatu website

Desain : Untuk membuat desain suatu homepage biasanya para web designer dimulai dengan software ini sebagai tampilan sementara atau dalam membuat layout homepage.

  1. Adobe Photoshop : Desain berbasis titik ( bitmap )
  2. Adobe Image Ready : Memotong gambar-gambar ke dalam format html
  3. Adobe Illustrator : Desain berbasis vector
  4. CorelDraw : Desain berbasis vector
  5. Macromedia Freehand : Desain berbasis vector

Efek Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Seperti menambah efek cahaya, textur dan manipulasi teks.

  1. Macromedia Firework : Efek teks
  2. Painter : Memberikan efek lukisan
  3. Ulead Photo Impact : Efek frame dan merancangan icon yang cantik.
  4. Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai’s Power Tool dan Xenofex juga sangat mendukung untuk memberi efek desain sewaktu anda mendesain layout homepage di Photoshop.

Animasi : Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik dan hidup.

  1. 3D Studio Max : Untuk membuat objek dan animasi 3D.
  2. Gif Construction Set : Membuat animasi file gif
  3. Macromedia Flash : Menampilkan animasi berbasis vector yang berukuran kecil.
  4. Microsoft Gif Animator : Membuat animasi file gif
  5. Swift 3D : Merancang animasi 3D dengan format file FLASH.
  6. Swish : Membuat berbagai macam efek text dengan format file FLASH.
  7. Ulead Cool 3D : Membuat animasi efek text 3D.

Web Editor : Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa script.

  1. Alaire Homesite
  2. Cold Fusion
  3. Microsoft Frontpage
  4. Macromedia Dreamweaver
  5. Net Object Fusion

Programming : Hal ini dilakukan setelah sebagian besar desain homepage telah rampung. Programming bertugas sebagai akses database, form isian dan membuat web lebih interaktif. Contoh : Membuat guestbook, Form isian, Forum, Chatting, Portal, Lelang dan Iklanbaris.

  1. ASP ( Active Server Page )
  2. Borland Delphy
  3. CGI ( Common Gateway Interface )
  4. PHP
  5. Perl

Upload : File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruh dunia dapat melihat homepage kita.

  1. Bullet FTP
  2. Cute FTP
  3. WS-FTP
  4. Macromedia Dreamweaver : dengan fasilitas Site FTP
  5. Microsoft Frontpage : dengan fasilitas Publish

Sound Editor : Homepage kita belum hidup tanpa musik. Untuk mengedit file midi atau wav, perlu alat khusus untuk itu.

  1. Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan wav.
  2. Cakewalk : Mengedit dan menambah efek untuk file yang berformat midi

Banyak sekali memang software untuk membuat suatu homepage dan kita tidak perlu mempelajari semua software tersebut di atas. Tapi untuk mempermudah, bagi pemula lebih baik dimulai terlebih dulu dengan mempelajari software Microsoft Frontpage atau Macromedia Dreamweaver agar lebih mengenal aturan-aturan membuat homepage dan mengenal bahasa html. Setelah itu baru Adobe Photoshop yang dipakai kebanyakan para desainer.

Langkah-langkah Membuat Homepage

Bermacam-macam langkah yang digunakan profesi web kita untuk membuat suatu homepage. Berikut ini adalah proses secara umum yang dilakukan kebanyakan profesi web di Indonesia untuk membuat web.

  1. Membuat Sketsa Desain : Desainer bisa saja menuangkan ide dalam membuat interface suatu homepage dalam bentuk sketsa di kertas dahulu. Untuk kebanyakan orang, biasanya langkah ini dilewatkan dan langsung pada langkah membuat layout desain dengan menggunakan software.
  2. Membuat Layout Desain : Setelah sketsa sudah jadi, kita menggunakan software seperti Adobe Photoshop, Adobe Illustrator, Macromedia Fireworks dan Macromedia Freehand untuk memperhalus sketsa desain.
  3. Membagi gambar menjadi potongan kecil-kecil : Setelah layout desain homepage sudah jadi. File gambarb tersebut dipecah menjadi potongan kecil-kecil untuk mengoptimize waktu download. Untuk melakukan hal tersebut dapat menggunakan software Adobe Image Ready. Software ini dapat langsung memotong gambar yang besar tadi dan otomatis juga menjadikannya ke dalam format html. Langkah ini bisa saja dilewatkan bila ukuran gambar kita tidak terlalu besar.
  4. Membuat Animasi : Animasi diperlukan untuk menghidupkan homepage kita agar menarik pengunjung. Macromedia Flash dan Gif Construction Set dapat dipakai untuk melakukan hal tersebut.
  5. Membuat HTML : Setelah itu kita merapikan layout desain kita seperti menempatkan beberapa tombol dan gambar, menambah text, mengedit script HTML, membuat layout form ke dalam format HTML. Untuk itu kita perlu software HTML Editor seperti Macromedia Dreamweaver, Microsoft Frontpage dan Allaire Homesite.
  6. Programming dan Script : Untuk website e-commerce, iklan baris, lelang, database, membuat guestbook, counter dan forum diskusi. File HTML kita perlu programming untuk melakukan aktivitas semacam itu. Programming dan script ini bisa dibuat dengan menggunakan ASP, Borland Delphy, CGI, PHP, Visual Basic. Dan perlu diperhatikan bahwa programming dan script ini biasanya dilakukan setelah desain homepage kita telah jadi.
  7. Upload HTML : Setelah file kita telah menjadi html beserta gambar dan scriptnya. Kita perlu meng-upload file kita ke suatu tempat ( hosting ), agar semua orang di dunia dapat mengakses halaman html kita. Biasanya Macromedia Dreamweaver dengan fasilitas site FTP dan Microsoft Frontpage dengan Publishnya telah menyediakan fasilitas upload ini. Atau dapat menggunakan software seperti WS-FTP, Cute FTP, Bullet FTP.
  8. Homepage Pribadi : Untuk homepage pribadi atau yang sekedar ingin coba-coba biasanya setelah file html sudah jadi dapat hosting di tempat-tempat gratis, memakai guestbook dan counter gratis dan menambah macam-macam accesories dalam mempercantik homepage pribadi tersebut.

Memilih Warna pada Website

Warna merupakan pertimbangan emosional, karena variasi warna dapat menyebabkan
emosi yang berbeda pada tiap orang. Kita semua tahu bahwa hijau adalah
simbol uang (mata duitan), tapi apakah kita tahu juga bahwa hijau merupakan simbol
ketamakan, iri hati, dan kecemburuan? Pilihan warna akan mendapat efek langsung dari pengunjung tentang persepsi perusahaan atau produk kita tawarkan. Ini menjadi rumit dengan adanya fakta bahwa penggunaan warna pada web sekarang tak terbatas: perkembangan teknologi membolehkan kita membuat jutaan kombinasi warna.
Jadi bagaimana dengan pilihan kita? Artikel ini akan membantu mempermudah memahami dasar-dasar dari pemilihan warna.

Ini penting untuk dimengerti bahwa setiap warna ditentukan positif dan negatif dari
emosi yang menghubungkannya dgn itu, mungkin bisa disebut dengan ‘makna warna’. Maksudnya adalah bahwa warna akan mempengaruhi emosional customer bagi perusahan, merek atau produk yang ditawarkan. Jadi ketika memilih skema warna untuk website, atau tipe media lain, anda perlu yakin dengan pemberian warna pada perusahaan atau produk dengan warna-warna yang mengajak audiens untuk selalu memilih web perusahaan atau produk kita
Mari beristirahat sejenak dan melihat ruang makan, kulkas,atau lemari kaca dapur
yang berisi produk yang kita beli dari toko sembako. Warna apa yang kebanyakan kita
lihat? Kebanyakan, dari yang terlihat adalah merah, dan banyak yang lain diantaranya.
Hanya sekilas terlihat dilemari kaca, sekarang apakah kita tahu apa yang terlihat di
dalamnya itu,produk yang penuh dng warna merah.Chef Boyardee,Kellogg’s,Lipton,Carnation, Ragu, aunt Jemima,Betty Crocker,Orville Redenbacher’s, Heinz, Pam, semua merek ini menggunakan label merah. Mengapa? Merah Adalah suatu warna” panas”, dan sangat emosional juga. Didalam studi, merah benar-benar mempunyai suatu phisik mempengaruhi orang-orang, meningkan jantung dan menyebabkan tekanan darah untuk naik, menarik perhatian kita, tindakan keributan.
dan suatu warna yang sangat kuat untuk produk pembungkus.

Semua warna yang pas/cocok dimasukkan ke dalam tiga kategori; sejuk, hangat
dan netral. Sedangkan kita bisa memilih semua warna yang kita suka dari kategori
yang sama,itu mungkin sering mencapai efek yang lebih sangat kuat dengan memperkenalkan warna dari satu di antara kelompok yang lain. Mari kita liat pandangan/persepsi sekarang bagaimana warna-warna bekerja bersama dan masing2 warna berarti bagi yang melihatnya.

Merancang Navigasi Website

Navigasi pada sebuah website yang tertampil pada menu dan links adalah petunjuk bagi pengunjung terhadap halaman – halaman yang terdapat dalam website. Pengunjung akan semakin mudah menemukan halaman – halaman dalam website Anda jika menu – menu dan link yang ada tampil secara terstruktur. Sudah pasti pengunjung akan kesal apabila tidak mendapatkan halaman website yang ia cari gara – gara navigasi yang ruwet.

Rencanakan dengan Baik
Hal yang mutlak dilakukan sebelum mulai membuat sebuah web tentunya adalah pembuatan konsep dari website itu sendiri. Konsep tersebut akan memuat navigasi dasar dalam bentuk “tree view” (bercabang dan beranting) dari mulai konten yang bersifat umum hingga konten yang bersifat mendetail. Inilah garis besar navigasi dari situs yang akan dibuat.

Dimana Navigasi diletakkan
Seperti telah dikemukakan di atas, bahwa navigasi akan membawa pengunjung dari hal – hal yang bersifat umum hingga hal – hal yang bersifat mendetail. Halaman utama (index) tentu saja akan memuat menu – menu pokok yang bersifat umum. Percabangan dari menu – menu inti tersebut dapat di letakkan pada halaman – halaman cabang dari index.
Alternatif lain, Anda dapat menggunakan javascript untuk menampilkan menu dan sub-menu sekaligus.

Konsisten
Sebisa mungkin jangan merubah letak menu pada setiap halaman web sehingga pengunjung lebih mudah menemukan menu – menu tersebut. Misalnya menu utama berada di atas, setelah itu pada halaman – halaman yang terdapat dalam menu utama dapat ditampilkan sub-menu di sebelah kiri atau kanan halaman.

Spotty!
Buatlah menu dengan menonjol sehingga pengunjung mudah mengenalinya. Hal ini tentu saja harus di gabungkan dengan unsur estetika sehingga menu – menu tersebut dapat sejalan dengan konsep desain web yang dibuat.

Singkat & Deskriptif
Kata – kata yang terdapat dalam menu harus mampu memberikan petunjuk yang jelas dan singkat tentang halaman website di bawah menu tersebut. Gunakan istilah – istilah yang lazim, singkat, dan mudah dipahami.

Berikan Petunjuk pada Pengunjung
Akan lebih baik jika pada halaman website memuat strukur singkat halaman web yang sedang di tampilkan. Misal : Tentang Kami >> Visi & Misi >>

Berikan Link ke Halaman Utama
Jangan lupa untuk memberikan link ke halaman utama atau link ke halaman dalam “parent topic”. Ini akan memudahkan pengunjung jika situs Anda di bangun dalam struktur menu dan submenu yang cukup kompleks.

Sitemap
Buatlah sitemap yang linknya berada di setiap halaman web. Ini akan semakin memudahkan dan mempersingkat proses pencarian halaman – halaman website oleh pengunjung.

Jika pengujung merasa nyaman dalam mengunjungi website Anda, maka akan semakin baik pula content website dapat diterima oleh pengunjung.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s