Prinsip Desain Web
• Tahapan Sebuah Proyek Web
• Berkenalan Dengan Wireframe
• Tugas Web Desainer
• Perfect Web Desain
• Sumber Inspirasi Web Desainer
1. Tahap Perencanaan:
definisikan tujuan, tentukan konten yang ada dalam website, diagnosa persyaratan kebutuhan dinamis pada website.
2. Tahap Kontrak:
buat sebuah draft dan kirim proposal ke klien tentang lingkup website yang akan dibuat dalam bentuk TERTULIS.
3. Tahap Desain:
4. Tahap Pengerjaan:
konversi dari muck-up ke dalam HTML, CSS, dan Javascript 5. Tahap Testing
Tes hasil desain ke browser-browser populer, atau dengan software emulator.
6. Tahap Rilis Web
Tentukan domain dan perencanaan hosting, upload, dan maintenance
• Tentukan Tujuan Website
koleksi informasi, tentukan konsumen (profesional, casual, innovative)
• Tentukan Isi Konten
(home page, contact person, products, rss feed, help, sitemap)
• Diagnosis kebutuhan konten dinamis (artikel, news, event calendar, etc)
Penentuan Konten
•
Tentukan kebutuhan konten
(gambar, images, videos, documents)
•
Buat Wireframe
(navigasi konten, konten apa yang akan
ditampilkan)
• Wireframe adalah kerangka dasar/blueprint dari halaman web yang akan kita bangun.
• Untuk menggambarkan elemen-elemen penting dari halaman web tersebut pada posisinya
masing-masing seperti banner, body content, menu link, kolom, footer maupun fitur-fitur lainnya yang ada dalam web nantinya.
Apa manfaat wireframe?
• Membantu client untuk fokus pada kerangka utama dari pembangun halaman web.
• Menggiring client untuk fokus pada fitur, elemen dan posisinya dalam web tanpa terganggu
perhatiannya oleh warna, typografi atau elemen desain lainnya.
• Untuk mendeteksi apa yang tidak bekerja dari sisi usability, fungsionalitas.
• Kemudahan refisi
Tools untuk wireframe?
•
Cacaoo (
https://cacaoo.com
)
•
Jumpchart (
https://jumpchart.com
)
•
Gliffy (
https://www.gliffy.com
)
•
Mockflow (
https://mockflow.com
)
•
Balsamiq (
https://balsamiq.com
)
Definisi web desainer menurut wikipedia :
The web designers are responsible for the visual aspect, which includes the layout, coloring and typography of a web page. Web designers will also have a working knowledge of using a
variety of languages such as HTML, CSS, JavaScript, PHP and Flash to create a site,
Tugas Web Desainer
1. Merancang konsep layout (wireframing)
2. Merancang layout secara visual (photoshop,
firework, atau gimp)
3. Konversi layout visual ke HTML dan CSS
pada bagian ini membuat desain visual
5. Mempercantik markup dengan CSS
͞Jika kamu HTML, maka jadikan aku CSS yang bisa mewarnai indah hidupmu͟
Buat apa CSS ?
- warna background - bentuk teks
Tugas Web Desainer
6. Memberi efek tambahan yang diperlukan
Siapa yang tanggungjawab : - Mengatur delay slideshow? - Animasi mouse over?
- Navigasi sliding menu?
7. Memastikan kode sudah benar
Pastikan kode HTML sudah memenuhi benar dan memenuhi standart. Tools yang ada seperti W3 Validator
Tugas Web Desainer
8. Revisi dan update menggunakan versioning
control. Contoh : bitbucket
•
Ketahui pasar Anda
Mengetahui tujuan website serta target pengunjung dari website akan membantu Anda untuk memutuskan elemen apa yang harus ada
•
Buat sesimpel mungkin
struktur navigasi sederhana yang jelas dan terlihat di halaman manapun
•
Seimbang antara Art dan Science
Menggunakan grid yang terstruktur akan membantu menciptakan keteraturan dan konsistensi.
