Tips Menarik buat Web Designer

Web site yang efektif dan efisien:
Gunakan halaman yang ‘hampir sama’ interface-nya tiap halaman agar pengunjung tetap merasa berada di lingkungan web site kita. Apabila kita ingin bereksperimen dengan menempatkan suatu halaman lain dari yang lain, maka bisa saja pengunjung akan merasa berada di suatu halaman asing dan tidak tahu lagi dimana ia berada, padahal masih di web site yang sama…

Gunakan menu bar yang sama dan tempatkan pada setiap halaman. Cara ini punya keuntungan, yaitu bila menu yang anda tempatkan itu berupa gambar, maka dapat dipastikan akan lebih efisien dalam hal loading karena pada saat pertama gambar diload, maka gambar -gambar tersebut akan disimpan dalam disk cache dan dapat dipakai lagi bila perlu. Nah kalau gambar sering sama dalam setiap halaman, maka dapat menghemat waktu dalam meload halaman web anda, so, hemat pulsa khan…

Gunakan warna seperlunya. Lebih baik lagi kalau warnanya hampir mirip dan serasi. Hindari penggunaan warna yang berlebihan dan ‘gado-gado’. Penggunaan warna yang gado-gado bisa membuat halaman menjadi hambar dan tidak menarik.

Gunakan gambar/image seperlunya
Mengoptimalkan gambar, kalau anda ingin mempunyai halaman web yang penuh dengan gambar-gambar, entah itu foto-foto atau gambar hiasan lainnya, anda harus mengoptimalkan gambar itu. Pengoptimalan di sini maksudnya, gambar tersebut harus sekecil mungkin dan sebaik mungkin kualitasnya.
Ada beberapa cara untuk meningkatkan kualitas gambar, yaitu:
Membuat gambar dalam format GIF yang teroptimized. Anda bisa menggunakan Adobe ImageReady untuk keperluan ini.
Membuat gambar tidak dalam ukuran besar, karena akan memperlambat waktu load.

Gambar sebaiknya menggunakan 256 warna kalaupun ingin yang lebih, pakai format JPG saja..
Gambar kecil tapi ukuran besar, maksudnya ukuran gambar anda kecil tapi bila dilihat di Windows Explorer atau aplikasi lainnya ukurannya bengkak tidak seperti ukuran gambar aslinya yang kecil. Hal ini mungkin disebabkan gambar yang anda buat memiliki format yang salah, misalnya format PSD, CPT, CDR, dan sebagainya. Kompres atau konversi gambar ini ke dalam bentuk format GIF supaya lebih kompak dan lebih kecil ukurannya. Caranya? Pakai Corel Photopaint trus pilih File | Export | Export atau tekan Ctrl + E trus pilih format GIF. Ikuti terus wizardnya terus OK. Jadi deh…Cara kedua, anda bisa pakai Adobe ImageReady tapi dalam mode slices trus save optimize, pilih nama gambarnya. Sim salabim ukuran gambar jadi kecil!

Halaman kecil yang hebat!
Buat halaman yang menggambarkan jati diri anda (kalau tipe halamannya personal/pribadi) atau tonjolkan kelebihan dan jati diri perusahaan anda. Gunakan gambar-gambar yang cocok dengan tema yang anda pakai, misalnya kalau perusahaannya adalah warung Bakso, maka carilah gambar yang berhubungan dengan makanan/bakso. Pemakaian logo juga membantu untuk mengingatkan pengunjung untuk mengenal keunikan perusahaan Anda.

Gunakan script untuk mempercantik halaman Anda, misalnya membuat link yang berkedip-kedip pada saat mouse lewat di atasnya atau dengan menggunakan cascading style sheet untuk membuat halaman Anda tidak monoton (tapi hanya memiliki satu jenis font atau satu jenis warna saja). Dan ingat, buat halaman yang seramping mungkin dan jangan terlalu menempatkan gambar yang tidak perlu.

Mengoptimalkan loading halaman
Cara mengoptimalkan loading halaman:
Buat gambar dalam format GIF dan JPG Usahkan tanpa dither 32 bit (paling kecil ukurannya tapi agak buruk tampilannya/tidak terlalu), kalo mau yang tengah-tengah, pakai dither 64 bit (direkomendasikan) atau no dither untuk ukuran gambar yang lebih kecil, dan yang boros ukurannya namun memiliki kualitas yang baik 128 bit dither.

Tips dan Trik dalam Mendesain 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.

 

Web Design Future

Apa saja yang harus saya siapkan untuk membuat web site?

Jika anda hendak memasak, apa saja yang harus anda siapkan? Tentu tergantung jenis masakannya! Membuat web site tidak jauh beda. Apa yang harus anda siapkan tergantung dari tujuan pembuatan web site.
Jika anda hendak memasak, apa saja yang harus anda siapkan? Tentu tergantung jenis masakannya! Kalau anda hendak membuat mie goreng, mungkin anda akan menyiapkan mie, minyak goreng, sayur, ayam, lain-lain. Anda juga butuh wajan untuk menggoreng. Kalau hendak membuat soto ayam, anda tidak perlu mie dan minyak goreng. Anda juga menggunakan panci, bukan wajan, untuk memasak soto. Namun untuk hampir semua jenis masakan, anda memerlukan garam, dan juga kompor!Membuat web site tidak jauh beda. Apa yang harus anda siapkan tergantung dari tujuan pembuatan web site. Jika anda menginginkan web site berfungsi sebagai tempat untuk transaksi, misalnya toko buku online, maka anda harus menyiapkan daftar harga, rekening bank untuk menerima pembayaran, tabel ongkos kirim, atau bahkan software yang terintegrasi agar stok bisa ter-update setiap saat. Jika anda menginginkan web site berfungsi sebagai katalog produk online, maka anda harus menyiapkan foto-foto produk, spesifikasi produk, dan sebagainya. Namun pada intinya, hampir semua web site juga memerlukan ‘garam’ berupa foto-foto dan penjelasan mengenai bidang kerja, serta ‘kompor’ berupa layanan hosting dan domain.

Foto-foto
Foto-foto yang harus disiapkan adalah foto produk yang ingin ditampilkan (untuk perusahaan barang) atau fasilitas yang dijadikan unggulan (untuk perusahaan jasa). Sebagai pelengkap, diperlukan juga foto-foto pendukung, misalnya untuk menunjukkan eksterior kantor. suasana kerja, dan sebagainya.
Semakin banyak foto yang disiapkan, semakin bagus. Walaupun nantinya tidak semua foto dimuat, akan lebih baik jika anda memberikan foto sebanyak-banyaknya pada desainer web. Jumlah foto mempengaruhi kualitas web site yang dibuat, karena dengan semakin banyaknya pilihan foto, desainer web akan semakin leluasa memilih foto yang cocok dengan konsep desain yang dibuat. Jika jumlah foto terbatas, desainer web terpaksa mengkompromikan konsep desain dengan foto yang tersedia, sehingga kadangkala desain terasa sedikit ‘memaksa’.

Penjelasan mengenai bidang kerja
Tulisan yang berisi penjelasan mengenai bidang kerja serta penjelasan lain yang terkait juga harus disiapkan. Bagaimanapun, andalah yang paling mengerti mengenai produk dan layanan anda, dan bukan desainer web. Desainer web tidak mungkin mempunyai ‘product knowledge’ sebaik anda.
Jika anda sudah pernah membuat company profile, brosur, atau publikasi lainnya, akan lebih baik jika disertakan bersamaan dengan materi lainnya.

Hosting
Agar web site dapat diakses, maka file-file yang dibuat harus tersedia di komputer yang on dan terhubung ke internet selama 24 jam dengan kecepatan tinggi. Menyediakan sendiri komputer seperti itu akan sangat memakan biaya karena biaya hardware dan biaya koneksi internet berkecepatan tinggi selama 24 jam. Untuk itu dibutuhkan layanan hosting, yang tak lain adalah layanan penyewaan komputer yang on dan terhubung ke internet selama 24 jam dengan kecepatan tinggi.

Domain
Domain adalah alamat internet untuk mengakses web site anda (misalnya www.fiesto.com). Lebih lanjut mengenai domain dapat anda baca di artikel lainnya.
Di luar ‘garam’ dan ‘kompor’ di atas, anda sendiri yang tahu materi apa saja yang tepat untuk dipublikasikan kepada pengunjung agar web site memperoleh hasil yang maksimal dan tidak sekedar ada.

 

  

Skill Desainer Web

Pada dasarnya desain Web sama seperti desain perwajahan lainnya. Hal yang membedakan adalah media yang dipergunakan. Dalam hal kemampuan (skill) pun demikian, hingga banyak orang yang menyimpulkan bahwa desain Web itu sama dengan desain Grafis.Untuk menjadi seorang desainer Web, hal-hal yang harus Anda kuasai dan pahami adalah:

HTML
HTML adalah bahasa pergaulan yang dipergunakan untuk melayout sebuah halaman Web. Jadi jelaslah bahwa pengetahuan Anda tentang HTML mutlak diperlukan. Terlepas kini terdapat Editor HTML WYSIWYG atau Editor HTML Visual, pengetahuan tentang dasar dan prinsip penggunaan HTML akan sangat diperlukan. Software: Dreamweaver, Frontpage, GoLive, HTMLDog, dan lain-lain.

CSS
CSS adalah alat untuk memformat halaman Web, berbeda dengan HTML, CSS lebih memfokuskan kepada “bagaimana HTML itu ditampilkan”.
Software: Dreamweaver, Frontpage, dll.

Editor Grafis
Dalam membuat sebuah situs Web, kita tidak terlepas dari pengolahan grafis untuk membuat sebuah halaman Web yang sesuai dengan keinginan. Pengolahan gambar, bahkan elemen desain lainnya dapat Anda buat dengan editor grafis. Dengan menguasai program editor grafis, Anda bahkan dapat membuat sketsa desain sebelm diiumplementasikan ke dalam HTML.
Software: Photoshop, Fireworks, Paint Shop Pro, The GIMP, dll.

Animasi Web
Animasi Web sangat diperlukan ketika Anda membuat sebuah banner atau animasi lainnya.
Software: Flash, Image Ready, Fireworks.
Anda tidak perlu menguasai semua software yang tertera diatas, cukup satu software saja setiap kemampuan yang ingin Anda kembangkan.

 

web interfaces