DESAIN GRAFIS DAN WEB

ISNAINI NOR RAHMADHANI

 DEFINISI DESAIN GRAFIS
 Desain grafis adalah suatu bentuk komunikasi visual
yang menggunakan gambar untuk menyampaikan
informasi atau pesan seefektif mungkin. Dalam disain
grafis, teks juga dianggap gambar karena merupakan
hasil abstraksi simbol-simbol yang bisa dibunyikan.
disain grafis diterapkan dalam disain komunikasi dan
fine art. Seperti jenis disain lainnya, disain grafis
dapat merujuk kepada proses pembuatan, metoda
merancang, produk yang dihasilkan (rancangan), atau
pun disiplin ilmu yang digunakan (disain).
 KATEGORI DESAIN GRAFIS
 Printing (Percetakan) yang memuat desain buku,
majalah, poster, booklet, leaflet, flyer, pamflet,
periklanan, dan publikasi lain yang sejenis.
 Web Desain: desain untuk halaman web.
 Film termasuk CD, DVD, CD multimedia untuk
promosi.
 Identifikasi (Logo), EGD (Environmental Graphic
Design) : merupakan desain profesional yang mencakup
desain grafis, desain arsitek, desain industri, dan arsitek
taman.
 Desain Produk, Pemaketan dan sejenisnya.
 MACAM-MACAM DESAIN
GRAFIS
 3D
3D merupakan proses penciptaan, display, dan
manipulasi obyek di komputer dalam bentuk tiga
dimensi. Kelebihan 3D adalah obyeknya dapat
dirotasi, dilihat dari segala sudut, serta dapat diskala
lebih besar atau lebih kecil. Program-program 3D
CAD dan 3D Graphics memungkinkan obyek-obyek
diciptakan dalam skala X-Y-Z (lebar, tinggi,
kedalaman). Program-program ini juga
memungkinkan pencahayaan diterapkan secara
otomatis di tahap pengubahan
 MACAM-MACAM DESAIN
GRAFIS
 Vektor
Gambar vektor merupakan gambar digital berdasarkan
persamaan matematis yang menggabungkan titik-titik garis
untuk menjadi sebuah obyek sehingga gambar tidak menjadi
pecah walaupun diperbesar atau diperkecil. Itu sebabnya,
vektor banyak digunakan untuk mendesain logo. Versi lain
menyebutkan, dalam komputer grafis, sebuah garis ditandakan
oleh titik akhirnya. Ketika sebuah lingkaran digambar,
lingkaran tersebut terdiri dari banyak vektor-vektor kecil.
Gambar vektor umumnya berukuran lebih kecil bila
dibandingkan dengan gambar bitmap. Beberapa format gambar
vektor di antaranya adalah SVG, EPS, CDR, AI, atau SWF.
 Website
Sebuah situs web (sering pula disingkat menjadi situs atau
website) adalah sebutan bagi sekelompok halaman web (web
page) yang umumnya merupakan bagian dari suatu nama
domain atau subdomain di world wide web (WWW) di
internet. WWW terdiri dari seluruh situs web yang tersedia
kepada publik. Halaman-halaman sebuah situs web diakses
dari sebuah URL yang menjadi akar yang disebut homepage
(halaman induk) dan biasanya disimpan dalam server yang
sama. Halaman-halaman web, yaitu dokumen berkode HTML
(hyper text markup language), terhubung satu sama lain—dan
sering kali antar-halaman-halaman di situs web lainnya.
 E-zine
E-zine (electronic magazine) adalah sebuah majalah
atau koran yang dipublikasikan secara online yang
berisi artikel, wawancara, atau macam-macam bentuk
berita lainnya. E-zine bisa berbentuk website html biasa,
flash, downloadable flash, pdf, atau downloadable pdf.
Online graphic design magazine buatan anak Indonesia
yang sudah cukup dikenal adalah creativebehavior.com,
Vektorika Magazine, atau DesignFlip. Proses membuat
e-zine ini tidaklah semudah yang dibayangkan. Serba
teliti. Kalau tidak teliti, semua halamannya bisa buyar.
 Animasi
Animasi disebut peragaan grafik atau file yang
data-datanya mampu menghasilkan gambar 2
dimensi atau 3 dimensi yang bergerak. Misalnya
adalah animasi gif yang mampu diubah-ubah
dengan menggunakan perangkat lunak GIF
animator. Di dalam sebuah halaman web, animasi
bisa digabungkan dengan informasi lainnya dengan
menggunakan teknik penyuntingan HTML, JAVA,
Animasi GIF, Shockwave, maupun Flash.
 Motion Graphic
Motion graphics adalah grafis yang menggunakan teknologi
video atau animasi untuk menciptakan ilusi sebuah penampakan
bergerak atau berubah. Motion graphics biasanya digabungkan
dengan suara untuk proyek-proyek multimedia, dengan kata lain
ditampilkan melalui teknologi media elektronik, tapi dapat juga
ditampilkan memakai teknologi manual. Istilah ini berguna
untuk membedakan grafis diam dengan grafis yang dapat
berubah-ubah. Dasar program ini adalah pixel. Dalam film
bioskop dikenal istilah frame by frame, satu detik 32 gambar. Di
motion graphic komputer juga sama, gambarnya hasil dari pixel.
Misalnya, 20 foto disatukan sehingga menjadi gambar bergerak.
 Digital imaging
Digital imaging atau digital image acquisition lebih dikenal
dengan istilah olah digital atau metode mengedit gambar
yang biasanya merupakan modifikasi dari obyek fisik.
Suatu gambar digital bisa dibuat menggunakan kamera
digital atau alat semacamnya. Bisa juga menggunakan
media analog (atau gambar), kemudian ditransfer melalui
pemindai atau media semacamnya menjadi informasi
digital dalam bentuk pixel yang dapat dibaca dan
dimanipulasi oleh komputer, dan kemudian dibentuk
kembali sebagai gambar yang dapat dilihat mata.
 Virtual world (second life)
Virtual world adalah lingkungan simulasi komputer yang
ditujukan agar para pemakainya mendiami dan berinteraksi
melalui avatar. Beberapa virtual world, tetapi tidak semua,
memungkinkan adanya berbagai pengguna. Biasanya, kalau
seseorang setiap hari menggunakan internet minimal 1-2 jam,
bisa dipastikan ia memiliki virtual world/second life. Contoh
dari virtual world/second life adalah situs jaringan sosial
semacam Friendster, Mypace, atau multiply. Bahkan, chatting
juga termasuk dalam virtual world/second life. Bagaimana
memulai belajar Desain Grafis? Memang itu sebuah
pertanyaan yang sangat mendasar bagi seorang desiner pemula.
 PROGRAM PENGOLAH
GRAFIS
 Aplikasi Pengolah Tata Letak (Layout)
Program ini sering digunakan untuk keperluan
pembuatan brosur, pamflet, booklet, poster, dan
lain yang sejenis. Program ini mampu mengatur
penempatan teks dan gambar yang diambil dari
program lain (seperti Adobe Photoshop). Yang
termasuk dalam kelompok ini adalah:
 Adobe FrameMaker
 Adobe In Design
 Adobe PageMaker
 Corel Ventura
 Microsoft Publisher
 Quark Xpress
Aplikasi Pengolah 3D
 3D StudioMax
 Maya
 AutoCad
 Google SketchUp
 Light Wave
 Blender
 Softimage
 Aplikasi Pengolah Vektor/Garis
Program yang termasuk dalam kelompok ini
dapat digunakan untuk membuat gambar dalam
bentuk vektor/garis sehingga sering disebut
sebagai Illustrator Program. Seluruh objek yang
dihasilkan berupa kombinasi beberapa garis, baik
berupa garis lurus maupun lengkung. Aplikasi
yang termasuk dalam kelompok ini adalah:
 Adobe Illustrator
 Beneba Canvas
 CorelDraw
 Macromedia Freehand
 Metacreations Expression
 Micrografx Designer
 Aplikasi Pengolah Pixel/Gambar

 Adobe Photoshop
 Corel Photo Paint
 Macromedia Xres
 Metacreations Painter
 Metacreations Live Picture
 Micrografx Picture Publisher
 Microsoft Photo Editor
 QFX
 Wright Image
 Aplikasi Pengolah Film/Video
Program yang termasuk dalam kelompok ini
dapat dimanfaatkan untuk mengolah film dalam
berbagai macam format. Pemberian judul teks
(seperti karaoke, teks terjemahan, dll) juga dapat
diolah menggunakan program ini. Umumnya,
pemberian efek khusus (special effect) seperti
suara ledakan, desingan peluru, ombak, dan lain-
lain juga dapat dibuat menggunakan aplikasi ini.
Yang termasuk dalam kategori ini adalah:
 Adobe After Effect
 Power Director
 Show Biz DVD
 Ulead Video Studio
 Element Premier
 Easy Media Creator
 Pinnacle Studio Plus
 WinDVD Creater
 Nero Ultra Edition
 Adobe Premiere
 Vegas Pro
 Aplikasi Pengolah Multimedia
Program yang termasuk dalam kelompok ini
biasanya digunakan untuk membuat sebuah karya
dalam bentuk Multimedia berisi promosi, profil
perusahaan, maupun yang sejenisnya dan dikemas
dalam bentuk CD maupun DVD. Multimedia
tersebut dapat berisi film/movie, animasi, teks,
gambar, dan suara yang dirancan sedemikian rupa
sehingga pesan yang disampaikan lebih interktif dan
menarik. Yang termasuk dalam kelompok ini adalah:
 Macromedia Authorware
 Macromedia Director
 Macromedia Flash
 Multimedia Builder
 Ezedia
 Hyper Studio
 Ovation Studio Pro
 APLIKASI MULTIMEDIA
 VLC Media Player
 Songbird
 Foobar2000
 KMPlayer
 Media Player Classic
 GOM Player
 WinAmp
 JENIS-JENIS DESAIN GRAFIS
 Drafter
Desainer khusus untuk membuat arsitektur dan
rancang bangun yang simetris dan digunakan
untuk keperluan pembuatan sesuatu yang
memerlukan ketelitian tinggi dan rancangan.
Membutuhkan orang orang yang ahli di software
(Autocad, Archicad, 3d revit architecture). Sangat
dibutuhkan di dunia arsitektur dan industri.
 Editor
Desainer khusus untuk membuat kover, sampul,
banner, dsb. Dan juga membuat karya karya
desain grafis misalnya: brosur, kartu nama, pin,
logo, poster, dsb. Yang memerlukan sentuhan
pandangan dan software yang harus dikuasai
adalah : Corel draw,Adobe
Photoshop,Freehand,Illustrator. Sangat
dibutuhkan di dunia periklanan dan publikasi.
 Layouter
Desianer khusus untuk membuat tatanan layout
sebuah majalah atau koran atau publikasi yang
lainya dan diharuskan mempunyai feel untuk tata
letak agar enak dilihat. Sedangkan aplikasi yang
harus dikuasai adalah Adobe Page Maker,
MS.Publisher, Adobe In Design. Sangat
dibutuhkan dipercetakan dan industri
koran/buku/majalah.
 Art Director
Desainer khusus unuk membuat karya karya seni
dari komputer yang bisa digunakan untuk visual
effects ataupun hanya untuk hiasan saja.
Membutuhkan kreativitas tinggi untuk membuat
karya agung yang akan dibuat. Sedangkan
software yang harus dikuasai adalah : Corel
draw, Photoshop, Photo paint, Art creator. Sangat
dibutuhkan di dunia perfilman, seniman
visualisator, foto editing effects.
 Fotografer
Desianer khusus yang selain melakukan
pengeditan foto juga merangkap sebagai
fotografer, harus memiliki talenta khas fotografer
serta mampu mengedit foto sesuai event atau
yang perfect. Membutuhkan intelegensi tinggi
kreativitas tinggi dan harus menguasai adobe
photoshop,ieworks,photo studio. Sangat
dibutuhkan didunia fotografi, foto editor,
wartawan, dsb.
 Animator
Desainer khusus bekerja pada bidang motion
graphic, iklan atau film fantasi. Harus memiliki
daya tahan tinggi, pengetahuan yang cukup tinggi
, pengalaman dan harus menguasai Macromedia
Flash, Adobe Flash, After Effects, 3d Maya, Gif
Animator dan Corel Rave. Dibutuhkan di dunia
advertising, perfilman, pertelevisian.
 Visualisator
Desainer khusus untuk memberikan gambaran
sebuah produk atau karya dalam bentuk real / 3d
dan harus memiliki kemampuan otak kanan yang
cukup tinggi serta harus menguasai 3d Max,
Autocad, Swift 3d, Digital Clay. Sangat
dibutuhkan di dunia visualisasi produk dan
presentasi produk.
 Video Editor
Desainer khusus untuk mengedit video atau film
dan juga merangkap sebagai video shooter, harus
memiliki imajinasi tinggi dan harus menguasai
Adobe After Effects, 3d Maya, Adobe Premiere,
Ulead Video Studio, Sony Vegas, Pinneacle.
Sangat dibutuhkan di dunia perfilman dan
industri musik.
 Integrated Desainer
Desainer khusus yang membutuhkan integrasi
dengan programmer misalnya pembuatan game,
cd interaktif, web desain, dsb. Sedangakan anda
harus menguasai hampir semua elemen desain.
Sangat dibutuhkan di industri informatika.
 YANG DIBUTUHKAN DALAM
PEMBUATAN DESAIN GRAFIS
 IDE / KONSEP Konsepmerupakanbasic dari sebuah karya
design grafis
 IMAJINASI
Memutar otak, membayangkan visual dari segala macam
hal yang berhubungan dengan konsep kita
 REFERENSI
Riset mencari acuan atau pembanding, mengambil contoh
dan inspirasi dari berbagai macam elemen.
 SKILL
Kemampuan teknis untuk mengolah konsep, menjadi
sebuah karya desain
 KONSEP DESAIN GRAFIS
 Komunikatif
Prinsip komunikasif berhubungan dengan corporate
identity, isi pesan serta audiens.
 Estetis
Desain web yang tidak memperhatikan keindahan
biasanya jarang dikunjungi oleh pengguna, karena
pengguna hanya mengunjungi web tersebut sekali saja.
 Ekonomis
Desain web harus memperhatikan faktor ekonomis
dalam arti ukuran file yang digunakannya.
 PEDOMAN TATA LETAK
TAMPILAN DESAIN
 Kesatuan
Elemen-elemen layout dari halaman harus
ditempatkan sedemikain rupa sehingga
merupakan kesatuan informasi pada satu
halaman atau beberapa halaman.
 Balance

Elemen-elemen layout dari halaman harus

ditempatkan sedemikain rupa sehingga terdapat
keseimbangan secara keseluruhan.
 Kontras
Kontras diperlukan untuk menonjolkan bagian
yang dianggap lebih penting dari bagian lainnya.
 kontinuitas

Informasi mudah dimengerti oleh pengguna bila

mempunyai aliran yang baik, sedikit gangguan
yang menghambatnya.
 PRINSIP DESAIN GRAFIS
 Metaphor (Metafora) Adalah aplikasi dari nama
atau deskripsi istilah objek lain yang tidak dapat
diartikan secara harafiah. Menghubungkan
presentasI dan elemen-elemen visual dengan
item-item yang berkaitan. Contoh: metafora
tampilan desktop.
 Clarity (Kejelasan)
Harus ada alasan yang kuat/masuk akal mengapa
kita menggunakan setiap elemen yang berada
dalam suatu interface yang kita buat. Penggunaan
yang sedikit akan lebih baik.
 Consistency (Ketetapan)
Konsistensi dalam tampilan, pewarnaan, gambar,
ikon, typography, teks, dll. Harus ada konsistensi
baik dalam layar maupun antar layar. Dan harus
selalu ada metafora dimanapun juga. Setiap
platform mungkin memiliki panduannya.
 Alignment (Perataan)
 Untuk perataan dapat digunakan rata kiri, kanan
atau tengah. Dunia barat dimulai dari kiri atas.
Mengijinkan mata untuk menguraikan tampilan
dengan lebih mudah.
 Proximity Item-item yang berkaitan ditampilkan
bersama. Karena jarak yang jauh
mengimplikasikan bahwa tidak ada hubungan
antar item-item tersebut.
 Contrast (Keserasian Tampilan)
Membuat anda tertarik, memandu mata anda
melihat keseluruhan interface. Keuntungan dari
keserasian adalah untuk memperkuat fokus atau
untuk memperkuat suatu interface. Contrast
dapat digunakan untuk membedakan aktifitas
kendali. Juga dapat digunakan untuk men-set
item yang paling utama. Item yang paling utama
diberi highlight. Gunakan geometri untuk
membantu pengurutan.
 UNSUR-UNSUR DESAIN
GRAFIS
 Garis (Line) adalah sebuah garis adalah unsur
desain yang menghubungkan antara satu titik
poin dengan titik poin yang lain sehingga bisa
berbentuk gambar garis lengkung (curve) atau
lurus (straight). Garis adalah unsur dasar untuk
membangun bentuk atau konstruksi desain.
 Bentuk (Shape) adalah segala hal yang memiliki
diameter tinggi dan lebar. Bentuk dasar yang
dikenal orang adalah kotak (rectangle), lingkaran
(circle), dan segitiga (triangle)dan masih banyak
lagi.. “polygon” atau kalo di corel draw
semuanya ada di “basic Shape”. Sementara pada
kategori sifatnya, bentuk dapat dikategorikan
menjadi tiga.
 Ruang (space) merupakan jarak antara suatu bentuk
dengan bentuk lainnya yang pada praktek desain dapat
dijadikan unsur untuk memberi efek estetika desain.
Sebagai contoh, tanpa ruang Anda tidak akan tahu
mana kata dan mana kalimat atau paragraf. Tanpa
ruang Anda tidak tahu mana yang harus dilihat
terlebih dahulu, kapan harus membaca dan kapan
harus berhenti sebentar. Dalam bentuk fisiknya
pengidentifikasian ruang digolongkan menjadi dua
unsur, yaitu obyek (figure) dan latar belakang
(background)
 Ukuran adalah unsur lain dalam desain yang
mendefinisikan besar kecilnya suatu obyek.
Unsur ini digunakan untuk memperlihatkan mana
objek manakah yang kita mau tonjolkan atau
yang mau dipublis karenan dengan menggunakan
unsur ini Anda dapat menciptakan kontras dan
penekanan (emphasis) pada obyek desain anda
sehingga orang akan tahu mana yang akan dilihat
atau dibaca terlebih dahulu.
 Warna merupakan unsur penting dalam obyek desain.
Dalam perwarnaan hendaknya disesuaikan dengan desain
yang akan kita buat. Karena dengan warna orang bisa
menampilkan identitas, menyampaikan pesan atau
membedakan sifat dari bentuk-bentuk bentuk visual secara
jelas. Dalam prakteknya warna dibedakan menjadi dua:
yaitu warna yang ditimbulkan karena sinar (Additive
color)yang biasanya digunakan pada warna lampu, monitor,
TV dan sebagainya, dan warna yang dibuat dengan unsur-
unsur tinta atau cat (Substractive color) yang biasanya
digunakan dalam proses pencetakan gambar ke permukaan
benda padat seperti kertas, logam, kain atau plastik.
 HAL YANG HARUS DIPERHATIKAN
DALAM PENGGUNAAN WARNA
 Tampilkan gambar berwarna pada warna latar hitam.
 Pilih warna latar depan yang terang (putih, cyan, dll).
 Hindari warna coklat dan hijau sebagai warna latar.
 Pastikan bahwa warna latar depan dan warna latar belakang serasi
baik segi brightness maupun hue.
 Gunakan warna sedikit mungkin, pada rancangan hitam-putih
tambahkan warna yang sesuai.
 Gunakan warna untuk menarik perhatian, menghubungkan
organisasi, menyatakan status, atau untuk mengadakan suatu
hubungan.
 Hindari penggunaan warna yang tidak diinginkan oleh user.
 Pewarnaan sangat baik untuk mendukung pencarian.
 ASSOSIASI WARNA
 Merah Æ panas, peringatan, agresi, cinta
 Pink Æ wanita, cute, kembang gula
 Oranye Æ musim semi, hangat, Halloween
 Kuning Æ gembira, perhatian, sukacita
 Coklat Æ hangat, musim gugur, kotor, bumi
 Hijau Æ lush, pastural, bingung
 Ungu Æ kekayaan, lembut, “Barney”
 MANFAAT DESAIN GRAFIS
 Mempercepat proses pekerjaan dengan cara
menyajikan suatu pekerjaan dalam bentuk grafis.
 Memperkenalkan dunia desain grafis kepada
masyarakat luas (secara umum) sehingga dapat
diimlementasikan di dalam lingkunganya.
 Memperkenalkan kepada masyarakat luas tentang
program aplikasi desain grafis.
 Mempersiapkan masyarakat (generasi
muda/mahasiswa/kaum terpelajar) agar dapat
memahami dengan mudah pesan-pesan yang
disampaikan dalam bentuk grafis.
 DEFINISI WEB
 Secara terminologi, website adalah kumpulan dari halaman
- halaman situs, yang terangkum dalam sebuah domain
atau subdomain, yang tempatnya berada di dalamWorld
Wide Web ( WWW ) di dalam Internet. Sebuah halaman
web biasanya berupa dokumen yang ditulis dalam format
HTML ( Hyper Text Markup Language ), yang selalu bisa
diakses melalui HTTP, yaitu sebuah protokol yang
menyampaikan informasi dari server website untuk
ditampilkan kepada para pemakai melalui web browser.
Semua publikasi dari website tersebut dapat membentuk
sebuah jaringan informasi yang sangat besar.
 SEJARAH WEB
 Penemu website adalah Sir Timothy John “ Tim ” Berners -
Lee, sedangkanwebsite yang tersambung dengan jaringan,
pertama kali muncul pada tahun 1991. Maksud dari Tim
membuat website adalah untuk mempermudah tukar
menukar dan memperbarui informasi kepada sesama peneliti
di tempatnya bekerja. Pada tanggal 30 April 1993, CERN
( tempat dimana Tim bekerja ) menginformasikan bahwa
WWWdapat digunakan secara gratis oleh semua orang.
Sebuah website bisa berupa hasil kerja dari perorangan atau
individu, atau menunjukkan kepemilikan dari sebuah
organisasi, perusahaan, dan biasanya website itu menujukkan
beberapa topik khusus, atau kepentingan tertentu.
 Sebuah website dapat berisi hyperlink ( pranala ) yang
menghubungkan ke website lain, jadi, terkadang perbedaan
antara website yang dibuat oleh individu perseorangan
dengan website yang dibuat oleh organisasi bisnis bisa saja
tidak terlalu terlihat.
 Website ditulis, atau secara dinamik di konversi menjadi
HTML dan diakses melalui sebuah program software yang
biasa disebut dengan web browser, yang dikenal juga
dengan HTTP Client. Halaman web dapat dilihat atau
diakses melalui jaringan komputer dan internet,
perangkatnya dapat berupa komputer pribadi , laptop, PDA
ataupun telepon selular.
 Sebuah website dibuat didalam sebuah sistem
komputer yang dikenal dengan server web, atau yang
disebut HTTP Server, dan pengertian ini dapat
menunjuk pada software yang dipakai untuk
menjalankan sistem ini, yang kemudian menerima
lalu mengirimkan halaman - halaman yang diperlukan
untuk merespon permintaan dari pengguna. Apache
adalah piranti lunak yang biasa digunakan dalam
sebuah webserver, kemudian setelah itu adalah
Microsoft Internet Information Services ( IIS ).
 MACAM-MACAM WEBSITE
 Web Statis
Web statis adalah website yang mana pengguna
tidak bisa mengubah konten dari web tersebut
secara langsung menggunakan browser. Interaksi
yang terjadi antara pengguna dan server hanyalah
seputar pemrosesan link saja. Halaman-halaman
web tersebut tidak memliki database, data dan
informasi yang ada pada web statis tidak
berubah-ubah kecuali diubah sintaksnya.
 Web Dinamis
 Web dinamis merupakan web yang secara
spesifik didisain agar isi yang terdapat dalam
situs tersebut dapat diperbarui secara berkala
dengan mudah. Sesuai dengan namanya, isi yang
terkadung dalam situs web ini umumnya akan
berubah setelah melewati satu periode tertentu.
Situs berita adalah salah satu contoh jenis situs
yang umumnya mengimplementasikan situs web
dinamis.
 JENIS – JENIS WEBSITE
 Website Pribadi/Personal
 Website Perusahaan (Company Profile)
 Website Organisasi
 Website E-Commerce atau Toko Online
 Website Berita
 UNSUR DALAM DESAIN WEB
 FONT
 Anda harus mengatur dan menyesuaikan ukuran
dan jenis font yang akan digunakan dalam website
anda.
 Color
 Warna sangat berpengaruh pada tampilan website
Anda, Hati-hati dalam pemilihan warna, jangan
terlalu mencolok (merusak pandangan) akan
terkesan buruk pada web anda. Sesuaikan dengan
image yang anda pakai.
 ELEMEN-ELEMEN DESAIN
WEB
 Teks merupakan bagian yang paling utama untuk
menampilkan informasi isi web konten
ditampilkan.
 Grafik atau Image merupakan elemen yang dapat
membantu menjelaskan informasi web yang
diinginkan.
 Animasi merupakan sarana untuk menampilkan
informasi yang baik, karena animasi merupakan
daya tarik yang mudah diingat oleh pengunjung.
 Video merupakan hasil suatu rekaman dengan kamera
video maupun hasil pengolahan dengan komputer.
 Suara melengkapi desain web, memberikan efek
khusus pada suatu tampilan animasi serta
memberikan kenyaman bagi pengunjung yang
mendengarkannya
 Interaktive link dapat menggunakan button yang
berupa teks, simbol, grafik, maupun image, yang
berfungsi untuk memudahkan pengunjung dalam
menyelusuri suatu website.
 Layout
 Penataan tampilan web sering di abaikan,
padahal itu hal yang penting. web yang baik tidak
membingungkan penggunanya..
 JENIS WEBSITE
BERDASARKAN FUNGSI
 Search Engine atau Mesin Pencarian
Search Engine atau mesin pencari adalah website yang
khusus mengumpulkan semua daftar link dan konten
seluruh website yang bisa ditemukan di internet dalam
indeks mereka kemudian menampilkan daftar indeks ini
berdasarkan kata kunci atau “keywords” yang sesuai
yang dicari oleh user. Mayoritas pengguna internet
sudah familiar dengan situs search engine ini untuk
mencari informasi yang mereka butuhkan melalui
internet. Beberapa contoh search engine antara lain :
Google Search, Bing, Yahoo Search dan lain-lain.
 Web Portal.
Web Portal adalah situs yang mengumpulkan dan
menyediakan aneka informasi dari berbagai sumber
untuk ditampilkan kepada user, jika user tertarik untuk
mengetahui informasi yang ada dengan lebih lengkap,
user akan diarahkan ke sumber yang aslinya. Namun
pada umumnya web portal tidak hanya menampilkan
informasi dari sumber luar, kadang mereka juga
menampilkan informasi-informasi dalam website
mereka sendiri. Beberapa contoh web portal antara lain
: Yahoo, msn, msnbc dan lain-lain.
 Wiki.
Website wiki yang paling terkenal saat ini adalah wikipedia.
Website wiki adalah website yang mengijinkan pengunjung
untuk ikut menulis dan mengedit artikel yang ada dalam
website tersebut dengan peraturan-peraturan tertentu. Masing-
masing website wiki memiliki aturan yang berbeda-beda.
Biasanya, meskipun semua pengunjung bebas untuk menulis
dan mengedit artikel di website ini, namun ada sekelompok
orang yang bertugas untuk memeriksa konten yang dimuat
apakah layak atau tidak untuk website tersebut. Meskipun
website wiki sering menjadi sumber referensi namun tidak
semua informasi yang ada dapat dipercaya 100%.
 Archieve Site
Archieve site atau situs arsip adalah website yang
dibuat untuk mengumpulkan dan menyimpan
materi-materi elektronik berupa konten-konten
dan halaman-halaman website agar tidak
hilang/punah. Contohnya archieve.org dan
google groups.
 Social Networking
Social networking termasuk salah satu fenomena yang luar biasa
hingga saat ini, khususnya diwakili oleh Facebook. situs social
networking atau situs pertemanan online adalah situs yang
disediakan bagi para membernya untuk bertukar informasi dan
media elektronik lainnya seperti foto, musik dan video. Beberapa
situs social networking yang terkenal sebelum fenomena
Facebook dan Twitter antara lain Multiply, Friendster dan
MySpace. setelah tergusur Facebook dan Twitter, Friendster saat
ini telah mengubah konsep sebagai situs game online dan
Multiply yang tadinya mengusung konsep social networking
dalam bentuk blog, kini lebih mengutamakan fitur portal toko
online.
 Forum
Forum termasuk salah satu jenis website yang pernah menjamur di
Indonesia. Apalagi sejak fenomena KasKus sebagai forum no 1 dan juga
website dengan pengunjung terbanyak di Indonesia. Forum dibuat untuk
ajang diskusi dan tukar informasi. Ada yang spesifik ada juga yang
bersifat umum, dan dalam forum ini terdapat sub-sub forum berdasarkan
kategori-kategori tertentu yang ditetapkan oleh admin. Untuk membangun
sebuah forum yang lengkap membutuhkan waktu yang sangat banyak.
Untungnya sudah tersedia software-software pembuat forum yang siap
pakai, baik yang gratis ataupun berbayar. Software pembuat forum yang
terkenal adalah vBulletin, yang digunakan oleh kaskus dan banyak forum-
forum internet lainnya. Sedangkan beberapa forum gratisan dan open-
source antara lain : yabb, vanilla, SMF, phpbb dan lain-lain. Sedangkan
contoh website forum antara lain Kaskus, Modifikasi, detikForum dan
lain-lain.
 News Site
News site atau situs berita adalah situs yang memuat
berita-berita dan artikel-artikel untuk dibaca
pengunjung. Bisa juga berisi opini dan komentar-
komentar seputar politik, teknologi dan lain-lain.
Situs-situs berita ini seperti layaknya koran, majalah
dan buletin online. Konsep dan karakteristik situs
berita berbeda-beda sesuai dengan jenis berita dan
target pembacanya. Beberapa contoh situs berita
adalah detik, kompas, cosmopolitan dan lain-lain.
 Social Bookmarking
Social bookmarking adalah situs yang mengijinkan
user untuk memasukan informasi atau sumber
informasi artikel-artikel tertentu untuk dibaca atau
di-rating dan dikomentari oleh user lainnya. Situs
jenis ini sering digunakan oleh pemilik situs berita,
blog dan situs-situs lainnya untuk mempromosikan
konten situs mereka. Beberapa situs social
bookmarking yang terkenal adalah Lintas Berita,
Digg dan stumbleupon
 Media Sharing
Situs ini khusus disediakan bagi user untuk
meng-upload media-media elektroknik seperti
gambaer, musik dan video agar dapat dilihat atau
di download oleh pengunjung lain. Contohnya
adalah Youtube, Flickr, Imageshack dll.
 Company Profile
Company profile biasanya berupa website sederhana untuk menampilkan
profil dan produk atau jasa serta portfolio sebuah perusahaan. Website
jenis ini hanya untuk memperkenalkan profil perusahaan meskipun juga
dapat menjadi alat promosi jika dikelola dengan benar. Selain
profil,produk dan portfolio berupa konten teks dan foto atau video, fitur
form kontak termasuk yang penting dalam website ini agar pengunjung
dapat dengan mudah menghubungi perusahaan pemilik website jika
mereka memerlukan produk atau jasa perusahaan tersebut. Namun
belakangan ini situs Company Profile semakin berkembang dengan
menambahkan fitur-fitur tertentu seperti artikel-artikel terkait, bahkan
forum diskusi. Tujuannya adalah untuk memperbanyak konten dan
menjaring pengunjung lebih banyak. Contoh website company profile
antara lain : Remax Capital, Pratama Jaya Jasa dan lain-lain.
 Corporate Website
Berbeda dengan company profile, Corporate Website biasanya
lebih kompleks. Website ini berisi informasi lengkap dari latar
belakang hingga kegiatan-kegiatan suatu perusahaan,
organisasi atau yayasan sosial baik yang bersifat profitable
ataupun non-profit. Informasi-informasi dalam corporate
website bisa berupa profile perusahaan/organisasi, latar
belakang, visi dan misi, daftar founder dan pengurus, informasi
investor dan klien hingga laporan keuangan, afiliasi dan lain-
lain serta artikel-artikel dan berita-berita yang terkait dengan
kegiatan perusahaan/organisasi tersebut. Contoh corporate
website antara lain, Pertamina, General Motors dan lain-lain.
 Brand Building Website
Brand Building Website dibuat untuk memperkenalkan serta
membangun image sebuah brand. Yang paling menonjol dari
website seperti ini adalah konsep untuk menyampaikan pesan
sesuai dengan image yang akan dibangun. Fiturnya sangat
beragam dan biasanya cukup kompleks seperti animasi,
game, video dan fitur-fitur interaktif lainnya. Belakangan
Brand Building website juga sering diintegrasikan dengan
social media seperti Facebook, Twitter hingga blog. Brand
Building website sering dimanfaatkan oleh produk-produk
fast moving consumer goods misalnya groseri, soft drinks,
snack dan lain-lain.
 Online Store
Online store atau toko online sudah jelas peruntukannya
adalah untuk menjual barang secara online. Fitur-fitur utama
online store adalah katalog produk dengan informasi yang
lengkap serta shopping cart, yaitu fitur untuk pengunjung
untuk melakukan pemesanan produk secara online. Online
store bisa bermacam-macam bentuk dan konsepnya. Fitur-
fitur online store juga bisa bermacam-macam disesuaikan
dengan budget dan kemudahan yang didapatkan. Baik
kemudahan mengelola online store itu sendiri ataupun
kemudahan bagi pengunjung untuk memilih dan berbelanja
produk.
 Katalog/Portfolio Online
Katalog/portfolio online hampir mirip dengan
online store, hanya jenis website ini lebih
mengutamakan katalog atau portfolio dengan
informasi lengkap bagi pengunjung tanpa ada
fitur transaksi online. Jika pengunjung tertarik
dengan produk-produk atau jasa yang
ditawarkan, diharapkan pengunjung akan
langsung menghubungi pemilik website untuk
melakukan pemesanan atau negosiasi.
 Blog
Blog adalah sebuah website yang berbentuk seperti jurnal
atau diari online. Biasa digunakan seorang blogger untuk
mengeskpresikan pemikiran dan opini-opininya. Bisa
juga artikel-artikel seputar kegiatan blogger. Bisa berisi
tulisan maupun media gambar, video dan lainnya. Setiap
artikel biasanya disertai kolom komentar dimana
pengunjung blog bisa meninggalkan komentar atau
berdiskusi mengenai artikel yang ditulis. Blog juga
dianggap sebagai salah satu social media karena para
blogger biasanya saling berinteraksi melalui blog.
 MANFAAT WEBSITE
 Media Interaksi
 Media Promosi
 Sumber daya tanpa lelah
 Media untuk terkenal
 Tempat hiburan terlengkap, All in One
 Informan terlengkap
 FUNGSI WEBSITE
 Sebuah website merupakan representasi perusahaan di dunia maya
dalam arti kata keseluruhan asset fisik yang ada direduksi menjadi
sekumpulan informasi digital yang dapat diakses oleh siapa saja di
dunia ini;
 Sebuah website merupakan kanal akses (access channel) yang
menghubungkan perusahaan dengan stakeholder-nya seperti supplier,
pelanggan, pemerintah, masyarakat, atau mitra bisnisnya;
 Sebuah website merupakan tempat dimana perusahaan menawarkan
produk dan/atau jasanya kepada para calon pelanggan yang memiliki
akses ke internet, dan di tempat ini pulalah transaksi jual-beli antara
dua belah pihak terjadi; dan
 Sebuah website merupakan tempat dimana berbagai komunitas dapat
saling berinteraksi, membagi informasi dan pengetahuannya kepada
orang lain secara bebas dan terbuka.
 KRITERIA DALAM MEMBUAT
WEBSITE
 Site Design – menyangkut hal-hal yang berkaitan
dengan tampilan website dan sistem menu yang
dipergunakan
 Site Functionality – menyangkut beragam
fasilitas dan kemudahan yang tersedia di website
 Customer Value – menyangkut berbagai aspek
manfaat yang dapat secara langsung dirasakan
oleh para pelanggan yang mengakses website
terkait
 HAL YANG HARUS DIPERHATIKAN
MEMBUAT DESAIN WEB
 Pertimbangkan Mengenai Responsive Web
Design Responsive web design adalah upaya
untuk membuat website ditampilkan dalam
ukuran yang sesuai dalam berbagai device apa
pun.
 Membuat Desain Yang Menarik, Pastikan bahwa
web design perusahaan yang Anda buat
mempunyai karakteristik unik yang
membedakannya dengani situs lain.
 Membuat Konten Yang Jelas Dan Singkat,
Konten yang original dan berkualitas akan
meningkatkan trafik ke web yang dibuat.
 Perhatikan SEOSEO adalah proses untuk
meningkatkan peringkat dari website Anda pada
mesin pencari. Hal ini dapat dilakukan dengan
cara mengedit konten situs Anda, mengedit link,
mengedit coding dan beberapa faktor lain.
 Prioritaskan Keamanan
 TIPS UNTUK MENDESAIN
WEB
 Grafis/Gambar
Grafis atau gambar merupakan bagian terpenting dari
suatu desain situs Internet. Dengan grafis/gambar,
kita dapat memberikan unsur warna, kesan dan tema.
 Layout
Merancang sebuah layout website desain yang
tampak sama untuk semua halaman situs Anda akan
lebih memudahkan pengunjung dalam memahami isi
situs Anda, daripada membuat layout website desain
yang berbeda-beda untuk setiap halaman.
 Navigasi
Navigasi yang mudah merupakan hal yang
penting dalam situs yang baik
 Iklan

Iklan yang terlalu banyak merupakan hal yang

buruk bagi para pengunjung. Cobalah untuk
menempatkannya sebaik mungkin di tempat yang
paling dihiraukan pengunjung tanpa mengganggu
prioritas isi atau content yang ada.
 Proses Pemeliharaan (maintenance)
Jika Anda menghubungkannya dengan situs yang
lain, Anda harus memeriksanya secara rutin
untuk memastikannya masih ada, karena kadang
ada situs yang hilang.
 Sesuatu yang ‘Berkedip’

Sesuatu yang berkedip, entah itu gambar maupun

tulisan, dapat menjadi hal yang mengganggu
pengunjung.
 Ramai/Berisik
Banyak orang sering menambahkan musik pada situs mereka.
Semua itu baik, tetapi jika lagu terlalu keras hingga
pengunjung tidak nyaman
 Pop-Ups
Tidak hanya iklan pop-up namun juga pop up boxes. Anda
tahu, ketika Anda membuka sebuah situs dan kemudian nama
Anda ditanyakan, mungkin itu masih bisa dimaklumi. Namun
jika kemudian muncul 5 (lima) baris pertanyaan berbeda atau
harus menjawab sebuah pertanyaan di setiap halaman situs
tersebut, maka pengunjung akan segera menutup dan
meninggalkan situs tersebut, karena merasa terganggu.
 Warna
Dengan memberikan warna yang tepat, maka akan
menambah kesempurnaan situs, sehingga halaman-
halamannya akan mudah dibaca.
 Fonts
Anda tidak harus memakai standart fonts yang sama
terus menerus dalam sebuah situs agar tidak
membosankan. Ada banyak sekali jenis font yang lain,
yang akan membuat tulisan Anda terlihat lebih menarik.
Namun pemakaian font yang terlalu beraneka ragam
dalam suatu halaman juga tidak baik.
 Gaya Penulisan
Setiap orang mempunyai cara penulisan sendiri. Anda
dapat menjadi seseorang yang lucu, serius, atau apa
adanya.
 Isi/Content

Anda akan buat website seperti apa? Hal apapun yang

Anda tulis, Anda harus yakin bahwa ejaan dan tata
bahasa yang dipergunakan sudah benar, dan jika Anda
mempunyai cukup waktu, bacalah ulang untuk
meyakinkan bahwa sudah tidak ada lagi kesalahan
bahasa.
 BAHASA PEMROGRAMAN
WEB
 Bahasa Pemrograman HTML
HyperText Markup Language (HTML) adalah sebuah bahasa
markup yang digunakan untuk membuat sebuah halaman web dan
menampilkan berbagai informasi di dalam sebuah browser
Internet.
HTML saat ini merupakan standar Internet yang didefinisikan dan
dikendalikan penggunaannya oleh World Wide Web Consortium
(W3C).
HTML berupa kode-kode tag yang menginstruksikan browser
untuk menghasilkan tampilan sesuai dengan yang diinginkan.
Sebuah file yang merupakan file HTML dapat dibuka dengan
menggunakan browser web seperti Mozilla Firefox atau Microsoft
Internet Explorer.
 Bahasa Pemrograman CSS
Cascading Style Sheets (CSS) adalah suatu bahasa
stylesheet yang digunakan untuk mengatur tampilan suatu
dokumen yang ditulis dalam bahasa markup.
Penggunaan yang paling umum dari CSS adalah untuk
memformat halaman web yang ditulis dengan HTML dan
XHTML.
Walaupun demikian, bahasanya sendiri dapat dipergunakan
untuk semua jenis dokumen XML termasuk SVG dan XUL.
Spesifikasi CSS diatur oleh World Wide Web Consortium
(W3C).
 Bahasa Pemrograman PHP
PHP adalah bahasa pemrograman script yang paling banyak
dipakai saat ini.
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun
1995. Pada waktu itu PHP masih bernama FI (Form
Interpreted), yang wujudnya berupa sekumpulan script yang
digunakan untuk mengolah data form dari web.
PHP banyak dipakai untuk membuat situs web yang dinamis,
walaupun tidak tertutup kemungkinan digunakan untuk
pemakaian lain.
PHP biasanya berjalan pada sistem operasi linux (PHP juga
bisa dijalankan dengan hosting windows).
 Bahasa Pemrograman ASP
ASP adalah singkatan dari Active Server Pages
yang merupakan salah satu bahasa pemograman
web untuk menciptakan halaman web yang
dinamis.
ASP merupakan salah satu produk teknologi
yang disediakan oleh Microsoft.
ASP bekerja pada web server dan merupakan
server side scripting
 Bahasa Pemrograman XML
Extensible Markup Language (XML) adalah
bahasa markup serbaguna yang direkomendasikan
W3C untuk mendeskripsikan berbagai macam
data.
XML menggunakan markup tags seperti halnya
HTML namun penggunaannya tidak terbatas pada
tampilan halaman web saja.
XML merupakan suatu metode dalam membuat
penanda/markup pada sebuah dokumen.
 Bahasa Pemrograman WML
WML adalah kepanjangan dari Wireless Markup
Language, yaitu bahasa pemrograman yang
digunakan dalam aplikasi berbasis XML
(eXtensible Markup Langauge).
WML ini adalah bahasa pemrograman yang
digunakan dalam aplikasi wireless.
WML merupakan analogi dari HTML yang
berjalan pada protocol nirkabel.
 Bahasa Pemrograman PERL
Perl adalah bahasa pemrograman untuk mesin
dengan sistem operasi Unix (SunOS, Linux,
BSD, HP-UX), juga tersedia untuk sistem operasi
seperti DOS, Windows, PowerPC, BeOS, VMS,
EBCDIC, dan PocketPC.
PERL merupakan bahasa pemograman yang
mirip bahasa pemograman C.
 Bahasa Pemrograman CFM
Cfm dibuat menggunakan tag ColdFusion dengan
software Adobe ColdFusion / BlueDragon /
Coldfusion Studio.
Syntax coldfusion berbasis html.
 Bahasa Pemrograman Javascript
Javascript adalah bahasa scripting yang handal
yang berjalan pada sisi client.
JavaScript merupakan sebuah bahasa scripting
yang dikembangkan oleh Netscape.
Untuk menjalankan script yang ditulis dengan
JavaScript kita membutuhkan JavaScript-enabled
browser yaitu browser yang mampu menjalankan
JavaScript.
 APLIKASI UNTUK DESAIN
WEB
 SeaMonkey
SeaMonkey dikembangkan oleh Mozilla
Foundation. SeaMonkey merupakan “all-in-one”
web browser yang sederhana namun canggih
untuk editor HTML.
 KompoZer.

KompoZer adalah fully-featured web authoring

system yang terpadu klien FTP yang intuitif dan
support untuk semua sistem operasi.
 NOTEPAD++.
NotePad ++ merupakan aplikasi open source yang sangat
popupler sebagai editor teks untuk Windows. Walaupun
tidak hanya semata-mata untuk web designer tetapi
aplikasi ini memiliki “source code editor” yang
mendukung editor HTML, XML, CSS, dan JavaScript.
 Bluefish Editor.
Bluefish Editor adalah aplikasi yang ringan dan cepat
untuk proses editor yang ditujukan untuk perancang dan
programer web. Mempunyai fasiltas Wizards yang
berguna untuk pembuatan dokumen HTML.
 Quanta Plus.
Quanta Plus adalah pengembangan Web IDE. Quanta Plus
sangat extensible dan dapat menjalankan skrip kustom.
Aplikasi ini sangat baik untuk editor css karena memiliki
kode hints dan auto komplet sintaks.
 Amaya.
Amaya adalah aplikasi gratis, open source web editor dan
browser web yang dikembangkan oleh World Wide Web
Consortium (W3C). Amaya dimulai sebagai HTML / CSS
editor dan telah berkembang menjadi sebuah editor untuk
berbagai sistem berbasis XML seperti MathML dan SVG.
 OPEN BEXI HTML Builder.
OPEN BEXI HTML Builder adalah browser berbasis
open source untuk menciptakan aplikasi HTML
halaman web. OPEN BEXI HTML Builder memiliki
CSS color picker built.
 jEdit.

jEdit adalah sebuah editor teks untuk programmers.

jEdit dapat berjalan di Mac, Windows, dan Linux dan
mempunyai fasilitas “syntax highlighting” untuk
HTML, XML, CSS, JavaScript dan bahasa pemrograma
lainnya.
 APLIKASI WEB BROWSER
 Mozilla Firefox
 Internet Exporer
 Safari
 Flock
 Opera
 K-Meleon
 SeaMonkey
 Camino
 Konqueror