Anda di halaman 1dari 19

DESAIN , LAY OUT &TAMPILAN WEB-

WEB-SITE
( MANAJEMEN FRONT OFFICE)
7 Prinsip membangun web
1. Isi informatif dan up to date
Setiap pengunjung web selalu bertujuan untuk mencari informasi
yang dibutuhkan. Jika mereka puas karena telah memperoleh
informasi yang dicari pada sebuah web, pengunjung akan betah
berlama-lama pada web tersebut. Kemungkinan besar mereka akan
kembali membuka website itu di kemudian hari. Tapi, jika website
anda tidak up to date maka bersiaplah kehilangan pengunjung.

2. Tampilan/design yang menarik (attractive


(attractive))
Secara psikologis pengguna internet menyukai tampilan web yang
menarik. Oleh karena itu banyak perusahaan maupun perorangan
yang ingin memiliki web rela membayar mahal web designer untuk
memiliki tampilan web yang indah
_. Hilangkan halaman perantara
Beberapa web/blog biasanya memasang halaman antara berupa splash
screen atau welcome screen maupun halaman khusus yang terdapat
tulisan ´click here to enter site´.

4. Mudah diakses / Loading cepat


Meski konten bagus dan desain menawan, tapi jika pengunjung cukup lama
membukanya, maka pengunjung akan meninggalkan website
V. Sistem navigasi yang mudah dan friendly
Pernah buka website yang membingungkan karena informasi yang dicari
tak kunjung ketemu? Itulah website yang buruk. Website yang baik memiliki
struktur menu yang memudahkan pengunjung memperoleh informasi yang
di perlukan.

6. Tautan (links) yang jelas


PRINSIP DASAR DESAIN WEBSITE
1. Merumuskan tujuan membuat website
Berdasarkan isi maupun tujuan dapat digolongkan sbb :
‡ Website marketing, berfungsi sebagai media presentase dan pemasaran
‡ Website custumer service, berfungsi sebagai media untuk malayani
konsumen
‡ Website e-Commerce, berfungsi sebagai media transaksi on-line
‡ Website informasi/berita, berfungsi sebagai media informasi berita

1. Menentukan isi website 2. Menentukan target pengunjung

_. Menentukasn struktur website

2. Desain Website
1. Unik
2. Komposisi
_. Simpel
4. Semiotik
V. Egronomis ( font dsb)
6. Fokus
7. Konsistensi
_. Elemen-elemen
4.Pembuatan
V. desain
Layout
Konsep desain
Berikut ini merupakan proses secara umum banyak dilakukan dalam
1. Teksintinya
Pada
pembuatan adalah
layout bagian
konsep
sebagai yang: paling
mendesain
berikut tampilan utama untuk
website menampilkan
sangat berkaitan
1. infromasi.
dengan
Membuatdesain
sketsagrafis.
desainOleh karena itu alangkah baiknya jika dalam
memperhatikan
Seorangataudesainerprinsip desain.
bias merupakan
saja menuangkan ide dalam
2. Grafik Image elemen yangpembuatan interface
dapat membantu
1.dengan terlebih dahulu membuat sketsa diatas kertas. Namun untuk
Komunikatif
menjelaskan informasi. Dengan penggunaan Image orang lebih
kebanyakan orang, langkah ini biasanya dilewatkan dan langsung pada
Prinsip
mudah
langkah
komunikatif
memahami berhubungan
suatudesain
pembuatan layout pesan. dengan corporate
dengan menggunakan software.
_. identy,layout
2. Animasi
Membuat isi pesan
desain serta
merupakan sarana audiens.
bentuk, menampilkan informasi
2.Banyak
Estetis
dengan software yang dapatanimasi
baik, disamping digunakan membuat layout.
merupakan Salahyang
daya tarik satu
diantaranya adalah Macromedia, Microsoft Fronpage proses ini
Fungsi
mudah diingat estetis
pengunjung.ini adalah memberikan suatu
dikerjakan setelah pembuatan sketsa desain. Namun terkadang
keindahan,
pembuatan
4. Video dapat layout sehingga
merupakan
merupakan proses
hasil lebih
yang
suatu pertama
rekamanmenarik
kalai minat
dikerjakan.
dengan kamera
Membagi
pengunjung
_. video gambar
maupun menjadi
untuk
hasil potongan-potongan
lebih dengan
pengelolaan menggali kecilinformasi yang
computer.
Proses ini diperlukan untuk meng-optimize waktu download
V. ditawarkan
4. Suara
Membuatmelengkapi
animasi
daridesain
suatuweb, website.
memberikan efek khusus pada
Ekonomis
_.Animasi
suatu diperlukananimasi
tampilan untuk menghidupkan atau menjadikan
serta memberikan website lebhi
kenyamanan bagi
interaktif.
Desain web
pengunjung yang harus memperhatikan factor ekonomis
mendengarnya.
V. Membuat HTML
dalam arti
6. Interaktive Link
Setelah merapikan
ukuran
dapat file yang
menggunakan
layout desain
digunakan. Halmerupakan
buttontombol,
lengkap dengan yang tersebut
image, teks,
berkaitan
teks,
script symbol,
HTML, erat
grafik,
hal yang dengan
maupun
perlu kecepatan
dilakukanimage,
kemudianyang akses
membuat yang
berfungsi
adalah untuk
layout
ke dalam formatpengunjung
ditawarkan
memudahkan HTML.
suatu web. dalam menyelusuri suatu web.
Skema Warna Web
Memang tidaklah mudah untuk memadupadankan warna tanpa mengetahui
teori dasar warna. Jumlah warna yang sangat banyak (16 juta warna)
menjadi kendala tersendiri untuk memilih dan memadupadankan warna.
Õ 
  Õ   

Õ 
Psikologi Warna
Warna berfungsi untuk memberikan vibrasi tertentu di dalam suatu desain.
Begitu hebatnya kekuatan warna, sehingga bisa memberikan efek psikologis
kepada semua orang yang melihatnya.

Merah adalah warna yang kuat sekaligus hangat. Biasanya di gunakan untuk
memberikan efek psikologi ¶panas· , ¶berani· , ¶marah· dan ¶berteriak·. Beberapa
studi juga mengindentifikasi merah sebagai warna yang sexy
Hijau adalah warna yang tenang karena biasanya di kaitkan dengan
lingkungan dan alam. Di dalam desain, kita bisa menggunakan warna hijau
untuk memberikan kesan segar. Dan dengan mudah kita bisa memberikan
nuansa membumi dengan kombinasi warna hijau dan coklat gelap.
Biru adalah warna favorit para pria dan termasuk warna yang ¶dingin·. Kalau
di dunia desain, biru sering di sebut ´warna corporateµ karena hampir
semua perusahaan menggunakan warna biru sebagai warna utamanya.
Tidak heran memang, karena biru merupakan warna yang termasuk
tenang dan bersifat penyendiri.
Kuning adalah warna yang ceria, menyenangkan dan sedikit ¶melompat-
lompat·. Tidak heran warna kuning identik dengan mainan anak-anak.
Kuning juga biasanya di gunakan untuk mendapatkan perhatian dari orang
yang melihat
Ungu adalah warna yang memberikan kesan spiritual, kekayaan dan
kebijaksanaan. Saya jadi ingat desain baju penyihir / dukun / sejenisnya di
jaman medieval, kebanyakan di dominasi warna ungu.
Coklat adalah warna bumi, memberikan kesan hangat, nyaman dan aman.
Namun selain itu, coklat juga memberikan kesan ·sophisticated· karena
dekat dengan warna emas. Bisa di bayangkan kesan ¶mahal· desain dengan
kombinasi warna hitam dan coklat muda.
Oranye adalah hasil peleburan merah dan kuning, sehingga efek yang di
hasilkan masih tetap sama, yaitu ¶kuat· dan ¶hangat·. Warna ini sering di
gunakan pada tombol website yang penting, seperti ¶buy now· , ¶register
now· dan lainnya yang sejenis, istilahnya adalah ¶call to action· button
Merah muda adalah warna yang feminin, kalau menggunakan warna ini pasti
kamu berurusan dengan sesuatu yang bersifat kewanitaan. Efek cinta
romantis juga bisa timbul dari warna merah muda ini, agak sedikit berbeda
dengan warna merah yang lebih menggambarkan ¶gairah yang berani·.
Putih adalah warna yang murni, tidak ada campuran apapun. Makanya sering
di anggap sebagai warna yang menimbulkan efek suci dan bersih. Ketika kita
ingin membuat desain yang simple dan minimalis, menggunakan warna putih
adalah langkah yang tepat (walaupun bukan cara satu-satunya).
Hitam adalah warna yang gelap, suram, menakutkan tetapi elegan. Saya
merasa elemen apapun jika di taruh di atas background hitam akan terasa
lebih bagus (misalnya, pada waktu menampilkan foto, portfolio atau produk).
Strategi Pesan
Strategi Pesan, meliputi langkah-langkah sebagai berikut :
1. Memutuskan pesan umum apa yang akan dikomunikasikan.
2. Mengidentifikasi manfat-manfaat bagi audience
_. Menciptakan konsep kreatif yang kuat
4. Menciptakan daya tarik khusus yang akan digunakan dalam
kampanye pesan informatif. Daya tarik harus memiliki tiga sifat
yakni meaningful (berarti), believable (dapat dipercaya) dan
distinctive (khas).

Format Pesan, unsur yang juga berdampak besar pada kualitas


penayangan iklan.. Beberapa hal yang harus dilihat dalam
penentuan format pesan adalah,
1. Ilustrasi ( illustration ), harus cukup kuat agar bisa menarik
perhatian audience.
2. Judul ( headline) harus secara eefektif menarik orang yang tepat
bersedia membaca teksnya.
_. Teks (copy), bagian utama tulisan iklan, harus sederhana tetapi
kuat dan meyakinkan.
TUGAS
1. Buatlah desain web menggunakan blog
tentang 1 lembaga pemerintahan daerah
yang berisi informasi inovasi tertentu
minimal 2 buah pesan
2. Desain web tersebut juga menjelaskan
siapa saja person yang terlibat dalam
manajemen back officenya
_. Presentasikan hasil desain tersebut, minggu
depan !!!
4. Tugas kelompok yang dikerjakan oleh 2
orang maks

Anda mungkin juga menyukai