Pertemuan2 Prinsip Desain Web
STMIK EL RAHMA
Prinsip Desain Web
Wahyu Widodo, S.Kom.,M.Kom
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Point Pembahasan Pertemuan 2 :
•
•
•
•
•
Tahapan Sebuah Proyek Web
Berkenalan Dengan Wireframe
Tugas Web Desainer
Perfect Web Desain
Sumber Inspirasi Web Desainer
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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.
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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)
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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)
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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.
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
contoh wireframe
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Tools untuk wireframe?
•
•
•
•
•
•
Cacaoo ( https://cacaoo.com )
Jumpchart ( https://jumpchart.com )
Gliffy ( https://www.gliffy.com )
Mockflow ( https://mockflow.com )
Balsamiq (https://balsamiq.com )
Gomockingbird (https://gomockingbird.com )
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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.
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Tugas Web Desainer
7. Memastikan kode sudah benar
Pastikan kode HTML sudah memenuhi benar dan memenuhi
standart. Tools yang ada seperti W3 Validator
(http://validator.w3.org)
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Tugas Web Desainer
8. Revisi dan update menggunakan versioning
control. Contoh : bitbucket
(https://bitbucket.org ), dan github
(https://github.com )
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Situs untuk mencari inspirasi web desain
•
•
•
•
•
•
•
•
•
•
•
http://www.mostinspired.com/
http://thedesigninspiration.com/
https://www.siteinspire.com/
http://www.admiretheweb.com/
https://onepagelove.com/
https://themeforest.net
http://www.thefwa.com/
http://www.webdesign-inspiration.com/
https://www.awwwards.com/blog/
https://abookapart.com/
http://unitedpixelworkers.com/
Web Statis
Prinsip Desain Web
Wahyu Widodo, S.Kom.,M.Kom
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Point Pembahasan Pertemuan 2 :
•
•
•
•
•
Tahapan Sebuah Proyek Web
Berkenalan Dengan Wireframe
Tugas Web Desainer
Perfect Web Desain
Sumber Inspirasi Web Desainer
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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.
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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)
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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)
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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.
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
contoh wireframe
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Tools untuk wireframe?
•
•
•
•
•
•
Cacaoo ( https://cacaoo.com )
Jumpchart ( https://jumpchart.com )
Gliffy ( https://www.gliffy.com )
Mockflow ( https://mockflow.com )
Balsamiq (https://balsamiq.com )
Gomockingbird (https://gomockingbird.com )
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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.
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Tugas Web Desainer
7. Memastikan kode sudah benar
Pastikan kode HTML sudah memenuhi benar dan memenuhi
standart. Tools yang ada seperti W3 Validator
(http://validator.w3.org)
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Tugas Web Desainer
8. Revisi dan update menggunakan versioning
control. Contoh : bitbucket
(https://bitbucket.org ), dan github
(https://github.com )
Web Statis
STMIK EL RAHMA
Pengantar Web Service
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
Web Statis
STMIK EL RAHMA
Pengantar Web Service
Situs untuk mencari inspirasi web desain
•
•
•
•
•
•
•
•
•
•
•
http://www.mostinspired.com/
http://thedesigninspiration.com/
https://www.siteinspire.com/
http://www.admiretheweb.com/
https://onepagelove.com/
https://themeforest.net
http://www.thefwa.com/
http://www.webdesign-inspiration.com/
https://www.awwwards.com/blog/
https://abookapart.com/
http://unitedpixelworkers.com/
Web Statis