Binus Hacker - Independent Hacking Community   Subscribe to BINUS HACKER Subscribe to BINUS HACKERSubscribe to BINUS HACKER FacebookSubscribe to BINUS HACKER Twitter

Tutorial Design Website

23 November 2008
Penulis:   · Kategori Artikel: Ebooks

BINUS HACKER Binus Hacker Is Not Criminal Banner





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.

=================================================

Ronni Purba – http://ronnipurba.co.cc  or http://amikmbp.page.tl

=================================================

Thx Buad Mas Ronni Yang Udah Nyumbang Artikel Buad BinusHacker
Approved by BinusHacker Team

=================================================

BINUS HACKER Binus Hacker Chat and Forum

Komentar

36 Komentar Untuk “Tutorial Design Website
Silahkan Berikan Tanggapan Anda Untuk Artikel Ini...

  1. neo pada 15 December 2008 9:17 am

    keren….tp gw msh bloom ngeh..dikit2 dl om y?

  2. fajar pada 15 December 2008 5:57 pm

    Maaf sebelumnya, ada ga ya kalo untuk tutorial yang pembuatannya dari awal buka file sampe publish untuk webnya yang sudah jadi??????? soalnya saya juga lagi maw belajar bikin web nih, semoga aja ada tutorialnya ya, makasih

  3. optimusprime pada 30 March 2009 5:20 am

    bikin blog itu enakan isinya apa yah saya msh bingung

  4. Alemoeddien Al tarakany pada 10 May 2009 7:29 am

    Wah inilah yg saya cari selama ini………………
    sekalian bos….cara buat layouts friendster…keren…

  5. Agung pada 2 July 2009 3:08 am

    kok mirip punya finderonly ya??????

  6. sena1992 pada 20 August 2009 7:45 am

    zzZZZzzZZZzZzZz

  7. dyze'chambers pada 25 September 2009 9:45 pm

    thx sobb infonya…

  8. No_limits16 pada 23 October 2009 5:57 am

    When an act is determined or recognized as discretionary, that branch, department, or official has immunity for those actions, otherwise they would never make decisions for fear of adverse actions. ,

  9. Andhika pada 1 November 2009 10:18 pm

    waduh aku masih belom paham kk…..

  10. alfan pada 25 November 2009 12:34 am

    bisa tidak mas dijelaskan cara’y yang lebih merinci…….

  11. [ `Kêép_Sm!Le´ ] pada 16 December 2009 11:18 pm

    «» Assallammu’allaikum «»

    bunG, [ Binus Hacker ] gak nGeLuarin Compilation CD or DVD Hacking YaCh…???
    Content-nya ya All About Hacking gitYu,,, meLipuTi Tutorial, Artikel Hacking, Video Hacking, Software, etc,,,

    Selain T-Shirt gak ada salah-nYa [ Binus Hacker ] nGeluaRin juga Compilation CD or DVD Hacking. Kan banYak niCh Community Hacking Cekarang lagi pada Heboh nGeluarin CD & DVD Hacking, gak ada salahnYa [ Binus Hacker ] nGasih kemudahan buat para member And para newbie-newbie Hacker unTuk saling share All About Hacking, kan kasihan mereka yang harus Download mati-matiAn dengan koneksi lEmot, And ada juga yang KompiNya Sepuh ( TUA ) wKwK..wKwK..

    Mungkin dengan adaNya Donasi untuk Paket Compilation CD or DVD Hacking, mereka sa belajar lebih semaNgat, tanpa Repot ini itu [ Kan Tinggal Order ke Binus Hacker deCh...] wKwK..wKwK..

    Saya Cuma nGasih Input aza niCh, gpp siCh kalo saran Kami (Mewakili Newbie Hacker suk0h4rdc0r3) gak bisa di reaLisasikan,,, wU!ch..wU!Ch…

    sampai disiNi aza yaCh…

    Salam hangat from:

    [ `Kêép_Sm!Le´ ] Newbie Hacker suk0h4rdc0r3

    Stay Dijalur Kalian Kawan…!!!

    Supported_By:

    [ IT-Térmiñåtor.Iñ¢ ]

  12. Ade Satria pada 12 March 2010 4:49 am

    Maaf nie mas saya kepingin bget video tutorial cara membuat WEB dengan Macromedia flash,,, apa si Mas ada,,, tolong d bagilah Mas, makasi ya mas sebelum’a,,,,

  13. yaya pada 12 March 2010 5:03 am

    kern bgt neh…????

  14. Yuwono pada 9 April 2010 7:54 am

    boss. ada gak sih software html editor yang freeware.
    di browser sea monkey ada kompozer, bisa buat bikin html , tapi waktu di upload gambarnya gak kebawa, jadi tulisannya aja yang muncul.
    gimana ya, saya cari2 tutorial edit html pake kompozer belum dapat,
    mau pake microsoft frontpage, mahal licensi nya

  15. enda pada 2 May 2010 3:23 am

    ty gan info na…..ane lg mw cb2 ni bikin web….bagi member binus jg bisa bergabung di member centralweb.co.cc hehe masih .co.cc …..maklum pemula

  16. sisil pada 9 June 2010 5:53 pm

    da gak tutorial web yg memulai langkh2 nya dri awal pmbuatn nya smpe selese,,,,,,

  17. ThinkCrunch pada 2 July 2010 7:37 pm

    mas punya tutorial buat bikin cms menggunakan dreamweaver gak mas…?

    thx

  18. locked pada 8 July 2010 6:35 am

    kk taw link torrent buat dongdot adobe ilistrator ga???

  19. coksy pada 8 July 2010 6:47 pm

    maksih a atas pelajaran saya jadi lebih paham tntang dunia maya…dan cita cita saya ingin jadi hacker yang handal ….a mau gak ngajarin saya…..?

  20. pipin pada 10 July 2010 10:07 pm

    g nngerti ommmmm

  21. herbet pada 18 September 2010 7:42 pm

    Bingung nih masih… membuat sebuah website
    ajarin donk???

  22. villas Seminyak Bali pada 22 September 2010 10:44 pm

    Thanks atas infonya. semoga info anda dapat berguna untuk para desainer web pemula maupun tingkat lanjut…

  23. Ryan Ventius T pada 19 November 2010 6:05 pm

    Thanks atas infonya ..

  24. erwin pada 27 November 2010 12:58 am

    salam kenal…

    halo buat mas roni,..

    bisa tolong qrim tutorial buat/desain web sampai ke publikasinya…soalx sy pemula utk kepingin buat web nich..please tolong yach..

    nnti qrim aja ke emailQ di : erwin.soekoenay@yahoo.com

  25. dann pada 16 December 2010 9:35 am

    terima kasih…

  26. AQUI pada 22 December 2010 12:14 am

    Mudaha-mudahan bisa sukses,tolong kirim kikrim tutorial yang lengkap ke mail saya.

    Thankyou………………..
    Good bye…………………….

  27. rahmat rustandi pada 8 May 2011 7:08 am

    bagi pemula n basicnya cuman nekad, gak ada pengetahuan net sama sekali kaya gue ni, apa yang harus diketahui untuk bisa berkembang?

  28. eko baba pada 11 August 2011 4:48 pm

    halo mas roni…..

    makasi bwt tips nya mas, tp kok masi jauh dri wawasan saya yah hehehe…

    tolong diksi yg lebih ringan dan simple beserta penjelasan2 dri istilah IT nya mas k

    e-mail ku,,,,,,

    Makasi skali lg mas moga ilmunya bisa bermanfaat. amin..

  29. wa ode putri handayani pada 2 December 2011 4:33 pm

    saya suka sama penjelasannya. singkat padat dan terinci. tapi gini, saya mau menyelenggarakan lomba yang berhubungan dengan desain web itu sendiri. saya mau tanya, sebagai penyelenggara, saya harus menentukan apa saja ? dan saya harus mempersiapkan apa saja ? kemudian, karena web yang dibuat tidak akan di upload ke internet semua, maka saya harus mengumpulkan website-website tersebut dalam bentuk file apa ? terima kasih.

  30. arief pada 27 January 2012 8:35 pm

    wah mantap nie bos!!!
    bisa pilih mana yang bagus bwt aq nie,,,,

  31. maven pada 28 April 2012 7:51 am

    kk bsa ga cra” beserta contohnya untuk mendesain sebuah web site dengan macromedia firewoks.

  32. ian pada 19 July 2012 8:00 am

    mantapbz..

  33. indra pada 31 December 2012 5:49 pm

    keren masbroo…
    cuma emg agak pnjang ya untuk yg baru mulai desain web..
    tapi ok banget infonya..
    salam sukses!

  34. irawan pada 4 January 2013 7:12 pm

    napa kok mudah buat web ea
    wkwkwk

  35. irawan pada 4 January 2013 7:12 pm

    napa buat web kok mudah ea

  36. totok pada 23 January 2013 5:26 am

    ada tutor buat epaper gak misal seperti http://epaper.banjarmasinpost.co.id

Silahkan Berikan Tanggapan Anda...