WEB DESIGN STEP BY STEP

Pelatihan Presentasi Anggaran dan Pengelolaan

Situs Kementerian/Lembaga

Sebutkan 3 langkah penting dalam

proses mendesain website?
1
2
3

WEB PLANNING

Website yang baik menawarkan layanan

untuk setiap pengunjungnya. Rencanakan
terlebih dahulu apa yang ingin Anda capai
dengan membuat website. Layanan apa
yang ingin Anda tawarkan.

01 Cari website referensi untuk perbandingan

Cari kekurangan dan kelebihan mereka.

Tentukan Layanan Apa yang Anda tawarkan
Apa target Anda terhadap pengunjung?

02 Tentukan Tujuan dari Website Anda

Sebutkan Tujuan Pembuatan Website
Tentukan paling banyak 10 tujuan dari
website Anda dari yang paling penting
sampai kurang penting.
Libatkan setiap divisi untuk
mendefinisikan hal ini.
Jangan mendefinisikan tujuan terlalu
detail.
Lihat secara terus menerus tujuan
yang telah Anda buat dan perbaiki bila
Anda yang perlu disempurnakan.

Contoh Tujuan Situs:

1. Menampilkan layanan-layanan perusahaan secara menarik.
2. Membuat orang mengerti dan paham akan layanan-layanan tersebut.
3. Mendorong orang agar menggunakan layanan-layanan tersebut.
4. Menampilkan transparansi yang mudah diakses oleh masyarakat.
5. Membuat orang mengerti dan paham akan informasi transparansi yang ingin
disampaikan.

03 Persempit Tujuan dari Website Anda menjadi hanya Satu Tujuan

Dari berbagai tujuan yang sudah Anda buat, pasti

ada kesamaan atau tujuan utama.
Hal ini akan membuat Anda fokus dalam membuat
Website.

04 Tentukan Target Pengunjung Yang ingin Anda Capai

Tentukan target pengunjung Anda apakah semua pengunjung atau hanya pengunjung
tertentu?
Bila untuk semua pengunjung, apa bisa dibagi berapa level atau jenis pengunjung yang datang.
Ini akan berpengaruhi terhadap prioritas informasi yang ingin ditampilkan.
Tentukan pengunjung utama yang harus diprioritaskan sehingga Anda bisa fokus dalam
pengembangan website.

05 Menyadari Keterbatasan Anda

Menyadari keterbatasan akan membantu anda untuk menghindari apa yang dinamakan scope
creep. Dimana proyek akan berjalan tak terkendali, terus berubah, tidak pernah selesai karena
proyek tidak dipahami secara jelas dan detil. Fitur terus bertambah selama proyek berlangsung
yang akan berpengaruh pada membengkaknya biaya dan waktu penyelesaian proyek.
Oleh karena itu buat keterbatasan Anda dalam hal
1. Berapa biaya yang akan Anda keluarkan untuk membangun dan memaintain sebuah
website?
2. Apakah Anda punya waktu tetap atau pekerjaan Anda akan terganggu ketika mengurusi
proyek website ini sampai selesai?
3. Apakah website ini hanya berisi informasi yang jarang di update atau sering di update?
4. Bila di update, berapa sering prakiraan akan di update?
5. Siapa yang akan meng-update dan dibutuhkan skill seperti apa dalam hal update website?
Apakah sudah ada orangnya, atau akan menambah orang baru atau melatih orang lama?
6. Apakah sudah mempersiapkan biaya atau sdm untuk memantain server website Anda?
Dan lain sebagainya silahkan daftarkan keterbatasan Anda sehingga proyek ini dapat terealisir
dengan baik. Jangan sampai ide-ide baik dan besar hanya dikeluarkan, tetapi pada saat
berjalannya proyek atau sudah selesainya proyek kemudian tidak terurus dengan baik.

06 Apa layanan yang Anda tawarkan sehingga pengunjung balik kembali?

Anda harus mencari dan menemukan keunikan
layanan yang Anda tawarkan sehingga pengunjung
dapat kembali lagi ke website Anda.
1. Apakah ada konten yang Anda update yang akan
membuat pengunjung kembali ke website Anda?
Hal-hal ini bisa menarik pengunjung untuk
kembali terus ke website Anda
Konten yang menarik dan selalu ter-update.
Tutorial yang membuat orang semakin
pintar
Download GRATIS seperti software, e-book,
video, musik, dll.
Hadiah dan undian ketika mereka
melakukan aktivitas tertentu.
2. Apakah ada forum atau komunitas yang membuat
para pengunjung berkenalan, bertukar
pengalaman dan berbagi sesuatu?
3. Pastikan bahwa layanan yang Anda tawarkan
disesuaikan dengan keterbatasan yang sudah
Anda tentukan di awal. Jadi jangan hanya konsep
yang muluk-muluk yang tidak bisa Anda berikan.

07 Detilkan semua keinginan yang akan ditampilkan di Website

Daftarkan secara detil semua keinginan atau kebutuhan yang akan ditampilkan di website. Catat
semua dari yang perlu atau kurang perlu. Ini akan menentukan seperti apa desain yang akan
dibuat.
1. Catat secara detil semua keinginan dan kebutuhan Anda.
2. Bandingkan kebutuhan Anda dengan tujuan dan layanan yang anda berikan ke pengunjung.
Contoh :
1. Tentang Perusahaan
Sejarah Perusahaan (ada tulisan, foto zaman dulu sampai sekarang)
Pendiri Perusahaan (ada foto pendiri)
Visi dan Misi
2. Ada foto galeri
Foto produk dengan deskripsinya
Foto layanan dengan deskripsinya
Foto kegiatan perusahaan dengan deskripsinya
3. Ada download gratis
Download tips dan trik untuk menjadi sehat
4. Situs ini harus punya CMS supaya orang yang tidak punya latar belakang IT bisa udpate sendiri
konten tanpa harus tergantung pada developernya.
5. Situs ini harus bisa menyimpan informasi pengunjung yang datang sehingga sewaktu-waktu
ada produk atau layanan baru bisa diemail.
6. Dll

Desain Website bukan hanya sekedar

bagus dipandang. Tetapi setiap elemennya
mempunyai makna dan struktur yang kuat
untuk bertahan lama.

08 Gunakan Diagram Kasus (Use Case Diagram)

Diagram Kasus adalah salah satu bagian dari Unified Modelling Language (UML) yang
digunakan software engineers untuk membuat suatu software. Diagram ini untuk
mendetilkan semua keinginan Anda sehingga pondasi bangunan website Anda dapat
dihitung kekuatannya dengan daya tahan yang lama.

08 Gunakan Diagram Kasus (Use Case Diagram)

Tentukan pengunjung Anda dan gambarkan mereka dalam figur tongkat.

08 Gunakan Diagram Kasus (Use Case Diagram)

Tulis kegiatan utama si pengunjung di website Anda sebagai use cases.

08 Gunakan Diagram Kasus (Use Case Diagram)

Tentukan kegiatan lain setelah pengunjung melakukan kegiatan utama. Ini disebut extend a
uses case.

08 Gunakan Diagram Kasus (Use Case Diagram)

Tentukan sub kegiatan (<<include>>) yang harus disertakan dalam kegiatan utama. Contoh
pengunjung harus membaca persetujuan tersebut sebelum melanjutkan ke kegiatan
utama.

WEBSITE ARCHITECTURE

Website Arsitektur adalah cetak biru,

denah atau bagan untuk memudahkan
web designer mendesain website.

01 Terjemahkan Use Case Diagram ke dalam Outline

Biasanya web designer atau kebanyakan developer langsung membuat outline atau
sitemap, kalau memang sudah bisa diprediksi atau website tidak terlalu rumit bisa langsung
masuk ke bagian ini.
Buat hirarki seperti ini. Biasanya setiap hirarki dikaitkan dengan halaman HTML.

A. About Me (Personal)
1. My Blog
2. View Photos
B. Books Ive Writtern
1. Buy Online
C. Resume
D. Sofware Ive Written
1. Online Help
2. Download Software
a. Licence Agreement
b. Register
c. Download
E. Email me

02 Buat PRIORITAS di setiap outline tersebut.

Tentukan prioritas outline mana yang paling penting untuk ditampilkan di halaman depan.
Orang paling senang download software, jadi harus ditempatkan di paling depan supaya
pengunjung tahu ada yang bisa mereka dapatkan.

A. About Me (Personal) 3
1. My Blog 3
2. View Photos 3
B. Books Ive Writtern 1
1. Buy Online 2
C. Resume 1
D. Sofware Ive Written 2
1. Online Help 1
2. Download Software 1
a. Licence Agreement 1
b. Register 1
c. Download 1
A. Email me 1

03 Buat SITEMAP dari outline yang sudah dibuat.

Sitemap adalah model visual dari halaman website.

04 Ikuti aturan TIGA KLIK

Pengunjung sangat tidak sabar. Bila mereka sulit untuk menemukan informasi yang mereka
cari di website Anda, maka mereka dengan sangat mudah akan pergi. Jadi dalam
menentukan outline, ikuti aturan maksimal 3 klik mereka harus sudah menemukan
informasi tersebut.

05 Gunakan Navigasi Berurut bila Diperlukan

06 Jangan Gunakan halaman Underconstruction

Lebih baik tidak disediakan link yang mengarah ke halaman yang belum siap ditayangkan di
web.

07 Pastikan setiap halaman website mempunyai Header dan Footer.

Pengulangan tampilan di setiap halaman akan membuat pengunjung mudah beradaptasi
dengan navigasi di website Anda. Oleh karena itu jaga konsistensi.

08 Link dan Ikon harus JELAS

Jangan menggunakan gambar-gambar ikon yang tidak jelas.

09 Gunakan Breadcump
Kalau navigasi dan konten Anda sudah terlalu banyak. Gunakan
breadcrumb. Jangan membiarkan pengunjung tidak tahu di halaman mana
sekarang mereka berada.

10 Buat Sitemap atau Site Index

Jika halaman website anda sangat banyak, sitemap adalah halaman yang
paling penting karena memuat semua link dari halaman website Anda.

WEBPAGE LAYOUT & COMPOSITION

01 Letakan informasi penting di atas fold line (garis lipat)

Fold line yang dimaksud adalah daerah tanpa scroll sewaktu Anda membuka
halaman website pertama kali. Resolusi komputer pengunjunglah yang
menentukan fold line ini, jadi pertimbangkan hal ini.

02 Gunakan Grid Theory

Dengan menggunakan Grid
(garis-garis maya) akan
membuat konten Anda lebih
tertata rapi dan proporsional.
Gambar di samping kanan
adalah berbagai variasi layout
dengan menggunakan Grid.
Gunakan beberapa tool CSS
Framework untuk membantu
Anda membuat layout
website dengan rapi seperti
960.gs.

02 Gunakan Grid Theory

02 Gunakan Grid Theory

02 Gunakan Grid Theory

Salah satu tool GRID yang bisa digunakan bisa ditemukan di http://960.gs/

02 Gunakan Grid Theory

02 Gunakan Grid Theory

03 Pertegas Sesuatu Yang Paling Penting

Pengunjung pada saat

masuk, mereka
scanning terlebih
dahulu, tidak
membaca.
Oleh karena itu ada
sesuatu yang harus
dipertegas sehingga
mereka melihat hal
tersebut.

04 Disain untuk ukuran layar maksimum

Saat ini yang paling populer dalam mendesain website masih menggunakan
resolusi minimal 1024768. Tetapi untuk ke depannya trend resolusi 1360768
akan naik seiring dengan perkembangan hardward yang semakin tinggi dan
murah. Oleh karena itu, Anda bisa mendisain dengan resolusi maksimal
sampai 1920x1080.

05 Gunakan Centred Layout

Centred Layout menempatkan konten website di tengah halaman yang besar.
Ini akan membuat daerah konten lebih kecil dibanding dengan lebar halaman
dengan area kosong (gutter) di pinggir kiri dan kanan.

gutter

gutter

WEBPAGE COLOR

01 Gunakan Sedikit Warna dan Konsisten

Warna pelangi hanya untuk menghias langit, bukan di website. Anda bisa
menggunakan 3 atau 4 warna saja dari warna-warna complementary
(tambahan/pelengkap).

01 Gunakan Sedikit Warna dan Konsisten

http://www.colourlovers.com

01 Gunakan Sedikit Warna dan Konsisten

https://kuler.adobe.com/create/color-wheel/

WEB TYPOGRAPHY

01 Memahami Huruf

JUDUL SANS SERIF

JUDUL SERIF

Isi atau deskripsi berita biasanya

serif. Karena tulisan serif (yang ada
keritingnya) lebih mudah dibaca oleh
pembaca.

Isi atau deskripsi berita sekarang

sans serif. Karena tulisan serif
(yang ada keritingnya) lebih
mudah dibaca oleh pembaca.

01 Memahami Huruf

San Serif
Serif

San Serif

02 Tulisan harus mudah terbaca dengan menggunakan leading.

Tidak ada formula khusus untuk leading ini karena masing-masing tulisan mempunyai
karatker yang berbeda. Ada yang menggunakan formula leading sebesar 120% dari tinggi
font tersebut. Contoh kalau ukuran font 10pt, maka leading 12 pt. Tetapi itu kembali lagi
kepada masing-masing web designer.

03 Buat rata kiri untuk tulisan dan judul tulisan.

Kita membaca dari kiri ke kanan. Menggunakan rata kiri kanan (justify) atau rata tengah akan
membuat pengunjung susah membaca. Mereka harus mencari titik mulai baca dari setiap
baris. Ini akan melelahkan mata.

04 Jangan pernah menggaris bawahi tulisan

Hyperlink juga garis bawah, jadi jangan sampai pengunjung anda rancu.

05 Jangan menggunakan Huruf Besar

Menggunakan terlalu banyak huruf besar akan mengurangi

kejelasan tulisan dalam membaca. Jangan pernah membuat
huruf besar seluruh kaliman hanya untuk menegaskan kata
tersebut.

06 Referensi Kombinasi Font dari W3Schools

06 Referensi Kombinasi Font dari W3Schools

WEB IMAGES

01 Gunakan Format JPG Foto dan PNG untuk Lainnya

Format gambar PNG menggantikan GIF untuk gambar yang butuh transparansi dengan
tingkat tinggi dan halus.
Tetapi PNG tidak dukung gambar bergerak, jadi anda bisa tetap menggunakan format GIF
atau media Flash.

02 Gunakan atribut ALT untuk semua gambar

Ini sebagai alternatif bila browser pengunjung meniadakan fungsi gambar.

02 Perkecil dan perbaiki gambar sebelum dimasukkan ke website

Digital kamera bagus dan kadang mempunyai fungsi yang memudahkan seperti tinggal foto,
unggah dan kirim. Masalahnya adalah file yang dikirim ternyata mempunyai ukuran yang
besar. Oleh karena itu gunakan software pengolah gambar seperti photoshop untuk
mengoptimasi lebar dan tinggi serta ukuran file gambar.

02 Perkecil dan perbaiki gambar sebelum dimasukkan ke website

Nikon D3X

Nikon D3X

03 Tanya apakah ketika menambahkan gambar relevan dengan konten

Cari foto-foto yang sesuai dengan konten website Anda atau artikel yang Anda buat. Bila
tidak tersedia foto, Anda bisa membuat ilustrasi yang berkaitan dengan artikel tersebut.

Indonesia yang kaya akan sumber daya alamnya.

Indonesia yang kaya akan sumber daya alamnya.

04 Crop gambar anda

Foto yang didapat kadang mempunyai detil yang tidak relevan dengan gambar, oleh karena
itu ada bagian yang tidak relevan biasanya dibuang. Ini harus diperhatikan. Dengan
memotong (crop) foto/gambar menjadi jelas pesan yang akan disampaikan.

05 Gunakan thumbnail jika memungkinkan

Bila website anda mempunyai banyak gambar atau foto, supaya tidak begitu lambat waktu
loading, maka bisa gunakan thumbnail. Jadi pengunjung bisa melihat preview gambar
sebelum mereka melihat gambar detil atau besarnya.

05 Gunakan thumbnail jika memungkinkan

Designing a Thumbnail

Product Detail

Sneak Preview

All Display

Fokus pada
bagian tertentu

Hanya sebagian
terlihat

Semua bagian
terlihat

WEB NAVIGATION

01 Lokasi Navigasi Yang Tidak Biasa

Berbeda itu bagus, tetapi bila pengunjung kesulitan menemukan konten karena
perbedaan tersebut itu sangat tidak bagus. Karena Anda membantu orang menemukan
apa yang mereka cari di website Anda.

02 Jangan Terlalu Banyak Pilihan dalam Navigasi

Ini akan membuat pengunjung tidak fokus terhadap apa yang ingin Anda sampaikan.
Terlalu banyak pilihan akan membuat pengunjung pergi dari halaman website Anda.

03 Membuat Urutan Navigasi

Letakkan informasi yang paling penting di awal navigasi. Seperti menu
Kontak adalah sesuatu yang harus diurutkan terakhir dari hal-hal yang
paling penting.

04 Buat Label Navigasi Yang Ramah Terhadap Mesin Pencari

Label navigasi tersebut sesuai dengan apa yang orang cari di website dan
sesuai dengan konten website Anda.
Gunakan https://adwords.google.com/select/KeywordToolExternal untuk
melihat kata apa yang paling banyak orang cari di internet.

04 Buat Label Navigasi Yang Ramah Terhadap Mesin Pencari

04 Buat Label Navigasi Yang Ramah Terhadap Mesin Pencari

05 Lokasi Navigasi Harus Konsisten

Navigasi harus tampil di lokasi yang sama dalam setiap halaman website,
jangan berpindah supaya orang tidak bingung.
Jaga jenis tulisan, warna, style supaya tidak berubah ketika pengunjung
melihat navigasi tersebut.
Bila lokasi berpindah dan selalu berubah-rubah akan membuat
pengunjung frustasi dan tidak nyaman dalam website Anda.

06 Website Navigation: The Type

1. Hierarchical website navigation

2. Global website navigation
3. Local website navigation

06 Website Navigation: The Type

Hierarchical website
navigation
The structure of the
website naviation is built
from general to specific.
This provides a clear,
simple path to all the web
pages from anywhere on
the website.

06 Website Navigation: The Type

Global website navigation
Global website navigation shows the top level sections/pages of the
website. It is available on each page and lists the main content
sections/pages of the website.

06 Website Navigation: The Type

Local website navigation
Local navigation would the
links with the text of your
web pages, linking to other
pages within the website.

07 Website Navigation: The Style

1.

2.
3.
4.

5.

6.

7.

8.

Text Links

Text links are words (text) which are surrounded by the anchor set of tags to create clickable text which takes the visitor to
another web page within your website, a downloadable document from your website, or to another website on the Internet.
Breadcrumbs

Breadcrumb navigation shows the website visitor the path within your website to the page they are currently on.
Navigation Bar

A navigation bar is the collection of website navigation links all grouped together. A navigation bar can be horizontal or vertical.
Tab Navigation

Tab navigation is where the website navigations links appear as tabs, similar to the tabs you use in a binder to divide the
contents into sections.
Sitemap

A sitemap is a page within your website that lists all the sections and web pages (if you dont have too many) that are contained
within the website. This is different from Google Sitemaps and Yahoo Sitemaps.

A traditional sitemap provides navigation for your website visitors should they get lost, a shorter path to the different areas of
the website for those who know what exactly they are looking for and a means for the search engines to find all the pages within
your website.
Dropdown Menu

A dropdown menu is a style of website navigation where when the visitor places their mouse over a menu item, another menu is
exposed. A dropdown menu can include a flyout menu (see next item).

A dropdown menu system can create accessibility issues and a problem as far as the search engines not being able to read the
links in the menu, but if constructed properly, these issues can be overcome.
Flyout Menu

A flyout menu is constructed similar to the dropdown menu. When the visitor places their mouse over a link, another menu flys
out, usually to the right, from the link where the mouse is placed.

Flyout menus face the same challenges as dropdown menus but if constructed properly, they can be accessible and readable by
the search engines.
Named Anchors

Named anchors are the type of links that take you directly to a spot on the current page or on another web page.

07 Website Navigation: The Style

Text Links

Navigation Bar

Breadcumps

Horizontal

Vertical

07 Website Navigation: The Style

Tab Navigation

Dropdown Menu

Sitemap

07 Website Navigation: The Style

Flyout Menu

Named Anchor

Issues with Fly-out Menus

difficult to select if you leave the area. Make it wider that it

appears so that it doesn't disappear if you are moving the mouse
just a couple of pixels outside of the menu'

Fly-out with submenus are not a good idea. Really hard to select.

You must make it clear that it is a menu, for example by adding a

down-pointing triangle next to the label

Make sure they work without Javascript for accessibility reasons.

Otherwise search engines cannot index your site and accessibility
also suffers.

Use a delay before hiding the fly-out menu again, e.g. 250ms

Only use horizontal menus with vertical fly-out menus. The

vertical area in which the mouse-pointer needs to be move is too
small, i.e. typically 12-14px, and causes the menu to be hidden
unwantedly

08 Website Navigation: The Use

To be consistent throughout the website.

The website visitors will learn, through repetition, how to get around the website.
The main navigation links kept together.
This makes it easier for the visitor to get to the main areas of the website.
Reduced clutter by grouping links into sections.
If the list of website navigation links are grouped into sections and each section has only
5-7 links, this will make it easier to read the navigation scheme.
Minimal clicking to get to where the visitor wants to get to.
If the number of clicks to the web page the visitor wishes to visit is minimal, this leads to
a better experience.
Some visitors can become confused or impatient when clicking a bunch of links to get to
where they want to be. In large websites, this can be difficult to reduce. Using
breadcrumbs is one way to help the visitor see where they are within the website and
the path back up the navigation path they took.

Creating the website navigation system at the planning stage of the website will effect the overall
design of the web page layout and help develop the overall plan for the website.

08 Website Navigation: The Use

To be consistent throughout the website.

The website visitors will learn, through repetition, how to get around the website.

08 Website Navigation: The Use

The main navigation links kept together.

This makes it easier for the visitor to get to the main areas of the website.

08 Website Navigation: The Use

Reduced clutter by grouping links into sections.

If the list of website navigation links are grouped into sections and each section has only
5-7 links, this will make it easier to read the navigation scheme.

08 Website Navigation: The Use

Minimal clicking to get to where the visitor wants to get to.

If the number of clicks to the web page the visitor wishes to visit is minimal, this leads to
a better experience.
Some visitors can become confused or impatient when clicking a bunch of links to get to
where they want to be. In large websites, this can be difficult to reduce. Using
breadcrumbs is one way to help the visitor see where they are within the website and
the path back up the navigation path they took.

References

http://www.webdesignfromscratch.com/design-process/web-design-process/
Buku Web Design in Simple Steps by James A. Brannan
http://designfestival.com/grid-theory/
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://graphicdesign.about.com/od/effectivewebsites/a/web_navigation.htm
http://uxdesign.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
http://www.webpagemistakes.ca/website-navigation/