1.

The Design Process

Discovery

Implementation

2. Defining Good Design

Users are pleased by the design but drawn to the content

Pengguna senang dengan desain tapi ditarik ke konten

Salah satu kekhawatiran terbesar di antara profesional kegunaan adalah waktu yang
dibutuhkan pengguna untuk memindai halaman untuk informasi yang mereka
inginkan, baik itu sebuah konten, link ke halaman lain, atau bentuk bidang. desain
harus tidak menjadi penghalang; harus bertindak sebagai penghubung antara
pengguna dan informasi.

John Oxton ini Bus Penuh Hippies template (digambarkan pada Gambar 1.2) adalah
contoh yang bagus dari desain yang indah dan dapat digunakan. Grafis warna-warni
tumbuh di sekitar blok konten, memimpin mata kembali ke informasi tanpa
mengganggu pembacaan atau organisasi halaman '.

BRI : Pada halaman website menu beranda waktu yang digunakan pengguna dalam
memindai halaman untuk informasi yang mereka inginkan di desain sangat baik.
Link ke halaman lain dipisah secara baik tanpa mengganggu atau pengahalang
antara pengguna dan informasi.

Grafis yang warna warni membimbing mata untuk kembali ke informasi tanpa
mengganggu pembaca atau dalam pengorganisasian halaman
 defining good design, web page anatomy, grid theory, balance, unity, emphasis, bread-and-
butter layouts dan fresh trends.

Users can move about easily via intuitive navigation

Users recognize each page as belonging to the site

3. Web Page Anatomy

Containing Block

Containing block adalah tempat meletakkan isi web page. Ukuran containing blocks dapat
diatur (fixed) sehingga ukuran web page akan selalu sama atau dapat bersifat liquid, sehingga lebar
web page akan menyesuaikan dengan lebar browser window.

Logo

Logo ditampilkan sebagai bagian dari identity block, yaitu bagian yang menjelaskan identitas
pemilik website. Dengan adanya logo, user dapat mengetahui bahwa web page yang sedang mereka
kunjungi adalah bagian dari suatu website tertentu.

Navigation
 Navigation adalah bagian dimana user dapat memilih web page yang ingin dikunjungi
selanjutnya. Navigation harus mudah ditemukan dan digunakan, karena itu sebaiknya bagian ini
terletak di bagian atas web page agar dapat ditemukan tanpa harus scroll down terlabih dahulu.

Content

Content adalah isi utama dari web page. Content harus menarik perhatian user dan
menampilkan informasi utama. Hal ini ditujukan agar user tidak perlu membaca dengan seksama
baris per baris isi web page untuk mendapatkan informasi yang mereka butuhkan.

Footer

Footer merupakan penanda akhir web page. Footer biasanya berisi copyright, contact, legal
information, dan link referensi dari artikel dalam content.

Whitespace

Whitespace adalah bagian yang tidak terisi dengan gambar dan tulisan.

4. Grid Theory

The Rule of Thirds

5. Balance

Symmetrical Balance

Asymmetrical Balance

6. Unity

Proximity

Repetition

7. Emphasis

Placement
 Continuance

Isolation

Contrast

Proportion

8. Bread-and-butter Layouts

Left-column Navigation

Right-column Navigation

Three-column Navigation

9. Getting Inspired

Using a Morgue File

10. Fresh Trends

Expansive Footer Navigation

Three Columns with Content First

Resizing: Fixed Width vs. Liquid Width

Fixed-width design (FWD) diterapkan pada website dengan fixed website layout yang memiliki
wrapper dengan lebar yang fixed (tetap), dan komponen yang terdapat didalamnya memiliki baik itu lebar
yang ditentukan dengan persentase tertentu atau lebar yang tetap. Hal yang terpenting adalah bahwa elemen
wrapper diatur untuk tidak dapat bergerak. Tidak dipedulikan, berapapun resolusi layar yang pengunjung
website gunakan, pengunjung akan melihat lebar website yang sama dengan pengunjung yang lain [9].

An Alternative: Variable Fixed-width Layout

11. Screen Resolution

12. Application: Florida Country Tile

Getting Started