STMIK EL RAHMA. Prinsip Desain Web. Wahyu Widodo, S.Kom.,M.Kom. Web Statis

Transkripsi

1 Prinsip Desain Web Wahyu Widodo, S.Kom.,M.Kom

2 Point Pembahasan Pertemuan 2 : Tahapan Sebuah Proyek Web Berkenalan Dengan Wireframe Tugas Web Desainer Perfect Web Desain Sumber Inspirasi Web Desainer

3 Tahapan Sebuah Proyek Desain Web 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: Buat keputusan tentang final tentang mockup, layout, warna, struktur menu, dan presentasikan ke klien untuk mendapatkan persetujuan.

4 Tahapan Sebuah Proyek Desain Web 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

5 Mulai dari Perencanaan 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) Tentukan cara untuk menarik pengunjung (newsletter, downloads, tools, freebies, etc)

6 Penentuan Konten Tentukan kebutuhan konten (gambar, images, videos, documents) Buat Wireframe (navigasi konten, konten apa yang akan ditampilkan) Buat search engine friendly (page title, meta data)

7 Apa itu wireframe? 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. Secara visual tampilan dari wireframe ini hanya terdiri dari kotak dan garis yang menandakan posisi dari masing-masing elemen dari layout halaman web.

8 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 Hemat waktu dan tenaga

9 contoh wireframe

10 Tools untuk wireframe? Cacaoo ( ) Jumpchart ( ) Gliffy ( ) Mockflow ( ) Balsamiq ( ) Gomockingbird ( )

11 Tugas Web Desainer 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, although the extent of their knowledge will differ from one web designer to another

12 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 menjadi potongan-potongan gambar (slicing) 4. Membuat susunan markup HTML mengatur tataletak element-element.

13 Tugas Web Desainer 5. Mempercantik markup dengan CSS Jika kamu HTML, maka jadikan aku CSS yang bisa mewarnai indah hidupmu Buat apa CSS? - warna background - bentuk teks - ukuran teks - lebar layout - jumlah kolom - animasi

14 Tugas Web Desainer 6. Memberi efek tambahan yang diperlukan Siapa yang tanggungjawab : - Mengatur delay slideshow? - Animasi mouse over? - Navigasi sliding menu? Teknologi Jquery, dan library Javascript lainnya

15 Tugas Web Desainer 7. Memastikan kode sudah benar Pastikan kode HTML sudah memenuhi benar dan memenuhi standart. Tools yang ada seperti W3 Validator (

16 Tugas Web Desainer 8. Revisi dan update menggunakan versioning control. Contoh : bitbucket ( ), dan github ( )

17 Strategi Membuat Desain Web Sempurna 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. Letakkan Pengguna sebagai prioritas Permudah pengguna menemukan informasi

18 Situs untuk mencari inspirasi web desain

19