Tips dan Trik dalam Mendisain Web

Author: BRIYAN IMUTZ

28 May

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.

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.

1. 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).
2. Simple : Web Designer banyak yang menggunakan prinsip “Keep it Simple”, hal ini ditujukan agar tampilan website tersebut terlihat rapi, bersih dan juga informatif.
3. 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.
4. 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.

Fokus : Tentukan hirarki prioritas dari pesan yang akan disampaikan, misalnya: Judul harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul

1. yang berukuran hampir sama. Hal ini akan membingungkan user/audience untuk menentukan pesan mana yang harus lebih dahulu dibaca/ dilihat.
2. 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.

Apa YA

Buat Tengkorak Turun (Patak tibo:)

Gambar ini (seperti ini) aku lihat diblog seseorang, bagus banget... ada icon-nya berjatuhan... woow itu pertama yang aku pikirkan, awalnya aku pengen tanya ma orang yang bersangkutan (sebenarnya aku lupa nama blog nya :-P he3). trus waktu aku liat2 di CD Mastering CMS, eeehh aku dapat berhasil berhasil trus copy paste deh :-). Nih scriptnya

<script language="JavaScript1.2"><br /><br /><!-- Begin var no = 10; // snow number var speed = 30; // smaller number moves the snow faster var snowflake = "http://photos1.blogger.com/x/blogger2/5525/1116037800993338/570/z/915556/gse_multipart6482.png"; var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } else { doc_width = self.innerWidth; doc_height = self.innerHeight; } // if dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i < i ="=" name="\" left="\" top="\" visibility="\"><img src="\" border="\" /></layer>");<br /><br />} else {<br /><br />document.write("<layer name="\" left="\" top="\" visibility="\"><img src="\" border="\" /></layer>");<br /><br />}<br /><br />} else {<br /><br />if (i == 0) {<br /><br />document.write("<div id="\" style="\"><img src="\" border="\" /></div>");<br /><br />} else {<br /><br />document.write("<div id="\" style="\"><img src="\" border="\" /></div>");<br /><br />}<br /><br />}<br /><br />}<br /><br />function snowNS() { // Netscape main animation function<br /><br />for (i = 0; i <> doc_height-50) {<br /><br />xp[i] = Math.random()*(doc_width-am[i]-30);<br /><br />yp[i] = 0;<br /><br />stx[i] = 0.02 + Math.random()/10;<br /><br />sty[i] = 0.7 + Math.random();<br /><br />doc_width = self.innerWidth;<br /><br />doc_height = self.innerHeight;<br /><br />}<br /><br />dx[i] += stx[i];<br /><br />document.layers["dot"+i].top = yp[i];<br /><br />document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);<br /><br />}<br /><br />setTimeout("snowNS()", speed);<br /><br />}<br /><br />function snowIE() { // IE main animation function<br /><br />for (i = 0; i <> doc_height-50) {<br /><br /> xp[i] = Math.random()*(doc_width-am[i]-30);<br /><br /> yp[i] = 0;<br /><br /> stx[i] = 0.02 + Math.random()/10;<br /><br /> sty[i] = 0.7 + Math.random();<br /><br /> doc_width = document.body.clientWidth;<br /><br /> doc_height = document.body.clientHeight;<br /><br />}<br /><br />dx[i] += stx[i];<br /><br />document.all["dot"+i].style.pixelTop = yp[i];<br /><br />document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);<br /><br />}<br /><br />setTimeout("snowIE()", speed);<br /><br />}<br /><br />function snowOther() {<br /><br />for (i = 0; i <> doc_height-50) {<br /><br /> xp[i] = Math.random()*(doc_width-am[i]-30);<br /><br /> yp[i] = 0;<br /><br /> stx[i] = 0.02 + Math.random()/10;<br /><br /> sty[i] = 0.7 + Math.random();<br /><br />}<br /><br />dx[i] += stx[i];<br /><br />document.getElementById("dot"+i).style.top = yp[i]+'px';<br /><br />document.getElementById("dot"+i).style.left = (xp[i] + am[i]*Math.sin(dx[i]))+'px';<br /><br />}<br /><br />setTimeout("snowOther()", speed);<br /><br />}<br /><br />if (ns4up) {<br /><br />snowNS();<br /><br />} else if (ie4up) {<br /><br />snowIE();<br /><br />} else {<br /><br />snowOther();<br /><br />}<br /><br />// End --><br /><br /></script>
link diatas itu link gambar yang harus kamu ganti, because kalo gak diganti ya... sama keluarnya tengkorak :-)
aku ga' tau kenapa ndak mau dipost, banyak
dihapus saja dulu sebelum dimasukkan. cari saja dengan Mr. Google ato email aku.
@CopyPaste is The Best

Sorry semua, mulai sekarang info yang aku buat aku tempel link-nya juga.

Thank4All

my profil

aq anak kudus asli pastinya!!sekarang aq tinggal di jetak kedungdowo (kudus).perjalanan aq sebagai seorang pelajar diawali dari:sd 2 purwosari,smp 1 kudus,n yang terakhir ni di smk muhammadiyah kudus tercinta.prestasi yang aq raih selama aq belajar yaitu:juara 2 lomba kaligrafi (tingkat sd sekabupaten kudus),juara 1 lomba sepak bola (tingkat smp sekabupaten kudus),juara 2 lomba animasi (tingkat smk sekabupaten kudus).

trik cepat menguasai cara membuat animasi

Yang pertama adalah perkenalan kepada progam yang akan digunakan untuk membuat animasi,yaitu "macromadia flash 8".Setelah anda begitu mengenal jauh tentang progam itu maka,cobalah untuk menjalankan progam tersebut.Setelah masuk progam nya,cobalah untuk memberi objek pada lembar kerja anda dan kemudian cobalah jalankan objek tersebut dengan cara "tween motion,frame by frame,motion guide".selamat mencoba!!!!

konichiwa

ku tatap langgit,ku temukan lg rasi bintang itu.ku tunggu saat nya satu bintang jatuh,dengan satu harapan agar aq tetap jadi sahabat terbaikmu,untuk saat ini sampai akhir nanti.