desain grafis

WEB DESIGN
Materi Kuliah Pemrograman Internet
Hadi Sutopo, Ir, MMSI
FAKULTAS TEKNIK INFORMATIKA
UNIVERSITAS PERSADA INDONESIA
JAKARTA
Daftar isi
Pengantar
Elemen Desain Grafis
Konsep Desain Grafis
Desain Web
Vector Drawing dan Bitmap Painting
PENGANTAR
Desain untuk web pada dasarnya mengikuti prinsip desain grafis secara umum.
Tampilan serta user interface dalam internet, maupun sistem informasi berbasis
komputer diperlukan untuk memudahkan pengguna mencerna isi dari informasi yang
terdapat di dalamnya. Faktor psikologis pengguna sangat berpengaruh akan berhasil
dan tidaknya suatu informasi sampai ke audiens sesuai dengan pesan yang
dikehendaki oleh pengrimnya. Karena manusia berorientasi pada visual, maka
tampilan serta kemudahan untuk menggunakannya akan sangat bengaruh pada
keberhasilan desain. Bila suatu web site ternyata tidak banyak dikunjungi oleh
pengguna, maka desain grafis mempunyai andil dalam kegagalan pengembangan
sistem informasi.
ELEMEN DESAIN GRAFIS
Desain grafis khususnya halaman-halaman web terdiri dari beberapa elemen sebagai
berikut:
:
1. teks
Teks adalah bagian yang paling utama untuk menampilkan informasi. Tujuan
pengguna mengunjungi web site adalah untuk membaca informasi yang ada di
dalamnya.
2. grafik dan image
Grafik dan image merupakan elemen yang dapat membantu menjelaskan
informasi. Dengan penggunaan grafik maupun image orang lebih mudah
memahami suatu pesan. Grafik dapat dibuat dengan draw program dan image
dapat dibuat dengan paint program yang juga dapat memanipulasi foto.
3. animasi
Animasi merupakan sarana untuk menampilkan informasi dengan baik, di
samping animasi merupakan daya tarik yang mudah diingat bagi pengguna.
Animasi dapat dibuat dengan komputer menggunakan perangkat lunak yang
ada, misalnya Macromedia Flash.
4. video
Video dapat merupakan hasil suatu rekaman dengan kamera video maupun
hasil pengolahan dengan komputer seperti 3D Studio Max, Maya dan lain-lain.
5. suara
Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan
animasi serta memberikan kenyamanan bagi pengguna yang
mendengarkannya.
6. interctive link
Interactive link dapat menggunakan button yang berupa teks, simbol, grafik,
maupun image. Interactive link menggunakan gambar dapat lebih mudah
digunakan oleh pengguna. Contohnya, penggunaan icon lebih disenangi dari
pada pull-down menu, walaupun begi sebagian orang tetap menyukai
penggunaan menu.
KONSEP DESAIN GRAFIS
Suatu desain apapun, misalnya web, brosur, majalah, buku dan lain lain dibuat dengan
memperhatikan prinsip desain sebagai berikut:
1. komunikatif
Prinsip komunikasif berhubungan dengan corporate identity, isi pesan serta
audiens. Desain web untuk media berita seperti koran dan lain-lain tidak sama
dengan desain web untuk site yang menampilkan karya seni. Web yang
ditujukan untuk anak muda tidak sama dengan web yang ditujukan untuk
orang dewasa. Contohnya anak-anak akan sulit untuki membaca teks dengan
font yang banyak variasi. Semua elemen desain yang ditempatkan pada
halaman web harus mempunyai makna.
2. estetis
Desain web yang tidak memperhatikan keindahan biasanya jarang dikunjungi
oleh pengguna, karena pengguna hanya mengunjungi web tersebut sekali saja.
Walaupun demikian terdapat desain web yang tidak memerlukan keindahan
dengan alasan tertentu, misalnya nama sudah terkenal sehingga tampilan
apapun bentuknya tidak mempengaruhi audiens. Keindahan suatu tampilan
web akan menarik perhatian serta selalu diingat oleh pengguna internet.
3. ekonomis
Desain web harus memperhatikan faktor ekonomis dalam arti ukuran file yang
digunakannya. File animasi yaang mempunyai ukuran besar, walaupun secara
estetis memenuhi selera, tetapi mengakibatkan pengunjung memerlukan waktu
yang lama untuk membuka halaman web tersebut. Biasanya web site seperti
itu akan ditinggalkan oleh pengguna.
Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis perlu diperhatikan
pedoman untuk membuat tata letak suatu tampilan, yaitu dengan mengatur elemenelemen layout seperti teks, image, aniamsi serta video. Pedoman yang dimaksud
adalah:
1. kesatuan
Elemen-elemen layout dari halaman harus ditempatkan sedemikain rupa
sehingga merupakan kesatuan informasi pada satu halaman atau beberapa
halaman.
2. balance
Elemen-elemen layout dari halaman harus ditempatkan sedemikain rupa
sehingga terdapat keseimbangan secara keseluruhan.
3. kontras
Kontras diperlukan untuk menonjolkan bagian yang dianggap lebih penting
dari bagian lainnya. Kantras dapat dinyatakan dengan membedakan ukuran
serta warna dari elemen layout.
4. kontinuitas
Informasi mudah dimengerti oleh pengguna bila mempunyai aliran yang baik,
sedikit gangguan yang menghambatnya. Suatu aliran informasi dapat
dikatakan kontinue dan hormonis bila tampilannya mencerminkan
kesinambungan dari satu bagian ke bagian lain. Kontinuitas dapat dibuat
dengan membuat halaman-halaman mempunyai gaya, bentuk atau warna yang
memberikan pengguna merasakan kesinambungan dengan halaman lainnya.
DESAIN WEB
Contoh
Suatu penerbit Millenium yang menerbitkan buku, kaset dan VCD bermaksud
membuat website. Penerbit mempunyai jangkauan pemasaran di seluruh dunia. Untuk
memudahkan transaksi, penerbit juga mengehendaki pengembangan e-commerce.
Penerbit mempunyai bagian-bagian seperti produksi, penyiapan naskah, pemasaran
dan kanbtor pusat yang berbeda lokasinya. Untuk memudahkan komunikasi antara
bagian-bagian tersebut diperlukan intranet portal. Dengan demikian semua informasi
dari berbagai bagian dapat diakses melalui portal tersebut.
Logo
Langkah pertama untuk mendidirikan suatu organisasi adalah dengan membuat logo.
Logo merupakan identitas sehingga dibuat sadebaik-baiknya dari segi filosofinya
maupun desain grafis. Penerbit Millenium didirikan menyongsong millenium ke-3
tepatnya abad ke-21. Gambar logo mempunyai arti sebagai berikut::
 Angka 21 menggambarkan abad ke 21 sebagai awal milenium ke-3
 Lingkaran menggambarkan jalan yang panjang ke tujuan yang mulia.
Warna kuning melambangkan harapan yang cerah.
 Buku di tengah berwarna putih melambangkan penerbitan. Gambar buku
terbuka yang berarti bahwa ilmu pengetahuan terbuka atau diberikan
kepada semua orang.
E-Commerce
Halaman ke1
 Halaman utama
 Animasi logo
 Animasi ganbar buku di atas, dari kiri ke kanan dengan Macromedia Flash
 Searching pilihan buku, kaset atau CD, kategori buku
 Menu pilihan kategori buku
 Bagian tengah menampilkan buku baru.Bagian kanan menampilkan best
seller, buku yang ditulis oleh penulis terkenal
Halaman ke-2
 Halaman kategori buku
 Animasi logo
 Searching pilihan buku, kaset atau CD, kategori buku
 Menu pilihan kategori buku
 Bagian tengah pilihan sub kategori
Contoh pada Gambar 1 dan 2
Intranet Portal
Halaman ke1
 Halaman utama
 Gambar di atas menggambarkan unit-unit perusahaan
 Bagian kiri, menu pilihan unit
 Pada pilihan unit Produksi, di tengah semua materi yang berhubungan
dengan produksi
Contoh pada Gambar 3
Company Profile
Halaman ke1
 Halaman utama
 Animasi ganbar buku dari kiri ke kanan
 Animasi logo dari kanan ke kiri dengan ukuran kecil ke besar, melintas di
atas animasi buku
 Menu pilihan Tentang Kami, Produk dan Kontak
Halaman ke-2
 Halaman Tentang Kami, Penerbitan
 Animasi logo
 Di tengah semua materi yang berhubungan dengan Penerbitan
Contoh pada Gambar 4 dan 5
Gambar 1. Halaman utama e-commerce
Gambar 2. Halaman e-commerce
Gambar 3. Halaman utama company profie
Gambar 4. Halaman company profie
Gambar 5. Halaman intranet portal
VECTOR DRAWING DAN BITMAP PAINTING
Elemen web di antaranya grafik dan image yang menurut cara penyimpanan filenya
dibedakan menjadi
vector drawing
o Vector drawing adalah gambar di mana informasi yang disimpan
adalah koordinat yang diperlukan untuk membuat output primitif
(garis, lingkaran, eleips dan poligon). File disimpan dengan format
vector sesuai dengan perangkat lunak yang digunakannya , contohnya
.cdr (Coreldraw), . fh8 (Freehand 8), .dwg (Autocad), dan lain-lain.
Penggunaan draw program, di antaranya untuk membuat:





logo
icon, simbol
kartun
tekstur
perancangan web
bitmap painting
o Bitmap painting adalah gambar dimana informasi yang disimpan
adalah pixel. Setiap pixel menyimpan informasi mengenai warna dan
intensitasnya. File bitmap berasal dari:
- gambar yang dibuat dengan Paint Program (Adobe Photoshop,
Corel Photopaint, dan lain-lain).
- Gambar hasil export dari draw program
- Hasil scan foto atau gambar
Penggunaan draw program, di antaranya untuk membuat:
 background
 image untuk button
 manipulasi foto
 perancangan web
Format File
BMP (*.bmp, *.rle)
BMP adalah format gambar standar pada DOS dan Windows. Gambar yang
disimpan dalam format BMP pada Windows dapat dibaca oleh Macintosh.
Format gambar yang termasuk BMP adalah *.bmp dan *.rle.
JPEG (*.jpg, *.jpe)
JPEG (Joint Photographic Expert Group) adalah format standar internasional
untuk gambar yang biasa digunakan banyak komputer dan program. Format
gambar yang termasuk JPEG adalah *.jpg dan *.jpe.
PICT (*.pct, *.pic)
PICT adalah format gambar yang bayak digunakan pada komputer Macintosh.
Format gambar yang termasuk PICT adalah *.pct dan *.pic.
TIFF (*.tif)
TIFF (Tagged-Image File Format) adalah format gambar yang fleksibel,
digunakan untuk saling tukar file gambar antar program aplikasi yang dapat
digunakan untuk sistem operasi berbeda.
EPS
EPS (Encapsulated PostScript) adalah format file yang dapat berisi grafik
vektor maupun bitmap. EPS digunakan untuk mentransfer bahasa PostScript
ke dalam aplikasi.
DCS
DCS (Desktop Color Separation) adalah versi standar EPS untuk format
gambar.
GIF
GIF (Graphics Interchange Fortmat) adalah format gambar yang umumnya
digunakan pada dokumen HTML (Hypertext Markup Language) lewat world
wide web.
PCX
PCX adalah format gambar yang umumnya digunakan oleh komputer yang
kompatibel dengan IBM PC.
TARGA (*.tga, *.tda, *.icb, *.vc)
TGA (Targa) adalah format gambar yang dirancang untuk sistem yang
menggunakan Truevision Video Board, dan umumnya didukung oleh aplikasi
warna dalam MS DOS.
PIXAR
PIXAR adalah format gambar yang dirancang secara khusus untuk aplikasi
grafik berkualitas tinggi, seperti 3 dimensi.