Web merupakan nama yang tak asing di telinga apalagi
bagi pengguna internet. Disini akan membahas tentang desain pada web. Sebelum
membahas apa itu desain pada web, ada baiknya tahu apa pengertian dari website
itu sendiri. Website adalah halaman informasi yang
disediakan melalui jalur internet sehingga bisa diakses di seluruh dunia selama
terkoneksi dengan jaringan internet. Website merupakan komponen atau kumpulan
komponen yang terdiri dari teks, gambar, suara animasi sehingga lebih merupakan
media informasi yang menarik untuk dikunjungi.
Kita
telah mengetahui apa itu website, sekarang kita perlu tahu pula apa pengertian
dari desain web. Desain web adalah sekumpulan keterampilan dan disiplin ilmu
yang digunakan dalam membangun dan memelihara sebuah website. Desain web
merupakan jenis desain grafis yang ditujukan untuk pengembangan dan styling
obyek lingkungan informasi Internet untuk menyediakan dengan fitur konsumen
high-end dan kualitas estetika. Definisi yang ditawarkan memisahkan desain web
dari pemrograman web, menekankan fitur fungsional dari sebuah situs web, serta
desain posisi web sebagai semacam desain grafis.
Desain
pada web mempunyai tujuan tersendiri yaitu membuat situs web atau dokumen
elektronik dan aplikasi yang berada pada web server dan menampilkan konten dan
fitur antarmuka interaktif kepada pengguna akhir dalam bentuk halaman Web.
Seperti unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada halaman
menggunakan HTML / XHTML / tag XML. Menampilkan media yang lebih kompleks
(vektor grafis, animasi, video, suara) membutuhkan plug-in seperti Adobe Flash,
QuickTime, Java run-time dan lain-lain. Plug-in juga dimasukkan ke dalam
halaman web dengan menggunakan HTML / tag XHTML.
Perbaikan
sesuai browser dengan standar W3C diminta penerimaan luas dan penggunaan XHTML
/ XML bersama dengan Cascading Style Sheets (CSS) untuk posisi dan memanipulasi
unsur-unsur halaman web dan objek. Kemampuan browser untuk mengirimkan berbagai
konten dan pilihan aksesibilitas kepada klien tanpa menggunakan plug-in.
Dengan
spesialisasi yang tumbuh di bidang teknologi informasi ada kecenderungan kuat
untuk membedakan antara desain web (web design) dan pengembangan web (web
development).
Ada beberapa macam layout desain
web saat ini yang semakin menghiasi dunia web. Berikut adalah macam-macam
layout desain web:
1. Static
Layout static
pada web desain memiliki ukuran tetap pada semua resolusi browser. Lebar layout
static ini menggunakan satuan pixel (px) sehingga akan menghasilkan layout yang
statis.
Contoh layout static: Facebook, Twitter.
Contoh layout static: Facebook, Twitter.
2. Fluid
Layout fluid
memiliki kemampuan untuk menyesuaikan lebar layout sesuai dengan resolusi
browser. Hal tersebut terjadi karena lebar layout menggunakan satuan percent
(%) sehingga lebar layout akan mengikuti resolusi browser saat dikecilkan atau
dibesarkan (resize).
Contoh layout fluid: gmail, yahoo mail.
Contoh layout fluid: gmail, yahoo mail.
3. Responsive
Layout
responsive memiliki kemampuan untuk berganti layout pada resolusi tertentu.
Layout bisa berganti ini berkat kehadiran CSS3 dengan sintax media queries nya.
Kalo di pemrograman fungsinya mirip ‘if‘, tapi ini di css. Jadi sebuah
web bisa memiliki tampilan berbeda saat dibuka dengan pc, tablet atau
smartphone.
Contoh layout responsive: fork-cms.com
Contoh layout responsive: fork-cms.com
4. Responsive-fluid
Layout
responsive-fluid merupakan gabungan antara responsive dengan fluid sehingga
lebar layout akan mennyesuaikan resolusi dan akan berganti layout pada resolusi
tertentu. Layout ini menggunakan media queries dan satuan percent (%) untuk
ukuran.
Contoh layout responsive-fluid: forefathersgroup.com
Contoh layout responsive-fluid: forefathersgroup.com
5.
Horizontal Scrolling
Layout
horizontal scrolling adalah dengan menata content web kesamping, sehingga untuk
melihat content web tersebut menggunakan scroll horizontal.
Contoh layout horizontal scrolling: deanoakley.com
Contoh layout horizontal scrolling: deanoakley.com
6. Parallax Scrolling
Layout
parallax scrolling menggunakan beberapa layer dan setiap layer memiliki
kecepatan perpindahan yang berbeda-beda saat di scroll sehingga menimbulkan
efek yang menarik.
Contoh parallax scrolling: ascensionlatorre.com
Contoh parallax scrolling: ascensionlatorre.com
Ada banyak aplikasi dalam membuat desain pada web salah
satunya yaitu macromedia dreamweaver. Macromedia Dreamweaver adalah aplikasi terapan yang
lebih menonjolkan unsur editing secara visual langsung dalam pembuatan halaman
web. Anda tidak perlu lagi harus susah-payah menulis berbaris-baris code. Anda
bahkan bisa dragging dari suatu panel kedalam dokumen yang sedang on (atau
sedang anda kerjakan).
Dreamweaver adalah software aplikasi desain web visual yang
biasa dikenal dengan istilah WYSIWYG—What You See Is What You Get—intinya Anda
tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs.
Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver
yaitu Dreamweaver MX, dengan penambahan beberapa fasilitas baru di dalamnya.
Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga
dapat digunakan oleh programer untuk membangun halaman internaktif karena
Dreamweaver MX mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain.
Sumber:
0 comments:
Post a Comment