Digital Kreasi - IT Solution Provider
€COMPANY
€€€ € Home
€€€ € Clients
€€€ € About Us
€€€ € Contact Us
€PRODUCT & SERVICES
€€€ € WEBHOSTING
€€€€ €€ • Shared Hosting
€€€€ €€ • Reseller Hosting
€€€€ €€ • Registrasi
€€€€ €€ • Control Panel Features
€€€€ €€ • Control Panel Help
€€€€ €€ • Policy
€€€ € WEBDESIGN
€€€€ €€ • Static Web Design
€€€€ €€ • Dynamic Web Design
€€€€ €€ • Web Application
€€€ € NETWORKING
€€€€ €€ • Network Design
€€€€ €€ • VPN
€€€€ €€ • Bridge & Firewall
€€€€ €€ • Dialup Server
€€€€ €€ • Network Audit
€€€ € SERVER SOLUTION
€€€€ €€ • Linux Server
€€€€ €€ • Windows Server
€€€€ €€ • Maintenance
€€€ € MULTIMEDIA
€€€€ €€ • Video Profile
€€€€ €€ • SMS System
€€€ € LINUX SOLUTION
€€€€ €€ • Trainning
€€€€ €€ • Linux Distro
€€€ € SOFTWARE
€€€€ €€ • Antivirus Software
€€€ € HARDWARE
€€€€ €€ • SDSL Modem
€€€€ €€ • IP (LAN) Phone
€€€€ €€ • ITG
€SUPPORT
€€€ € FAQ
€€€ € Paper
€€€ € Download
€ dapat diperoleh dari Adobe.com, hal ini untuk mencegah
€ CD Linux
Dapatkan CD Linux dengan
€ membangun website suatu perusahaan, Web Designer selalu
bermacam-macam distribusi.
€€
file://D:\My%20File\tutorial\ergonomi\Digital%20Kreasi%20-%20IT%20Solution%20Pr... 14/02/2007
Page 1 of 6
Search
Live Support • HTML Editor • Control Panel Demo • Hosting Registration
€ CUSTOMER SATISFI
€ By Marta
Membangun Web Site untuk Pemula Terima kasih kepada D
Kreasi (DK) sebagai
€
ungkapan telah berhas
me Revisi Website
www.pps.unsri.ac.id B
€
Paket Training di Progr
Pascasarjana Universit
ACUAN DASAR Sriwijaya. Semoga DK
DALAM MEMBANGUN SEBUAH semakin maju dan dap
terus berkembang luas
€ WEB SITE €
Add Your Satisfied ...
LATEST FAQ
support@dk.co.id
Bagaimana memunculk
€ file pada direktori web
saya ? selalu tertulis :
Forbidden
"Welcome to my homepage," sepotong kalimat penyapa saat kita LATEST PAPER
Perangkat ICT Sebagai
browsing di url antah berantah sering menggelitik alam bawah €
Jalan TOL Menuju Pasa
sadar kita berstimulasi "mengapa saya belum juga punya situs ?". Global
Jika anda puas dengan dengan hanya melihat dan berdecak kagum €
pada hasil karya orang lain pembahasan kita cukupkan sampai € CBS Open Source
Released !! source cod
disini. Tetapi jika anda tidak puas dengan apa yang anda buat, dan
aplikasi kasir untuk pe
anda merasa ingin lebih baik, maka anda perlu mengetahui € retail komputer, yang
bagaimana Web Designer membangun suatu Website, terlepas dipaketkan pada Linux
anda punya bakat seni atau tidak. Ampera versi selanjutn
€€
1. Unik : Dalam membuat karya apapun seorang designer
Online Support
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
terjadinya dither pada image yang berformat GIF. Dalam
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
Digital Kreasi - IT Solution Provider Page 2 of 6

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

file://D:\My%20File\tutorial\ergonomi\Digital%20Kreasi%20-%20IT%20Solution%20Pr... 14/02/2007
Digital Kreasi - IT Solution Provider Page 3 of 6

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, merupakan paket dari Microsoft
4.Macromedia Dreamweaver
5.Net Object Fusion
6.Ultraedit 32, simple dan sederhana
7.Notepad, paling ringkas dan ringan cocok untuk yang
expert

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 ), mudah dipelajari

2. Borland Delphy
3. CGI ( Common Gateway Interface )
4. PHP, paling umum digunakan sekarang
5. Perl, gratis dan laris manis dengan struktur yang luar biasa

Upload : File html kita perlu di letakkan ( upload ) di suatu tempat

( hosting ) agar orang di seluruh dunia dapat melihat homepage
kita.

1. Macromedia Dreamweaver : dengan fasilitas Site FTP

2. Microsoft Frontpage atau yang lebih baik seperti aplikasi
WU-FTP di OS LINUX
3. WS-FTP, WINSCP, CUTE-FTP dll

file://D:\My%20File\tutorial\ergonomi\Digital%20Kreasi%20-%20IT%20Solution%20Pr... 14/02/2007
Digital Kreasi - IT Solution Provider Page 4 of 6

Contoh Tampilan
Situs Dengan Pewarnaan dan Disain yang Menarik

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
3. Coold Edit, Pegangan anak-anak Master Web dan Indo
flasher

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

file://D:\My%20File\tutorial\ergonomi\Digital%20Kreasi%20-%20IT%20Solution%20Pr... 14/02/2007
Digital Kreasi - IT Solution Provider Page 5 of 6

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 File : 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, WU FTP, WINSCP dll. Contoh tutorial pada masalah
permasalahan bagaimana melakukan Upload dapat di lihat disini
8. Homepage Pribadi : Untuk homepage pribadi atau yang
sekedar ingin coba-coba biasanya setelah file html sudah jadi
dapat hosting di tempat-tempat gratis seperti
http://www.geocities.com http://www.tripod.co.uk dan lain-
lain. Sedangkan apabila anda sudah merasa layak untuk
mempublikasikanya, silahkan coba fasilitas hosting yang
lengkap featuresnya dan terjangkau disini

Terakhir, ntuk memulai anda tidak harus menguasai semua sofware

yang disebutkan diatas. Pelajari dahulu saja perintah-perintah
HTML dasar dan nikmati sebagai suatu seni. DK berkeyakinan
dalam waktu singkat anda akan dapat melampirkan url homepage
pribadi anda pada email maupun kartu nama anda.

file://D:\My%20File\tutorial\ergonomi\Digital%20Kreasi%20-%20IT%20Solution%20Pr... 14/02/2007
Digital Kreasi - IT Solution Provider Page 6 of 6

Back to Previous Page

Back to Index Paper

Copyright © Digital Kreasi 2000 - 2006

file://D:\My%20File\tutorial\ergonomi\Digital%20Kreasi%20-%20IT%20Solution%20Pr... 14/02/2007