Pengenalan

Web Design

Teknologi Internet
Layanan yang disediakan oleh penggunaan jaringan internet sangat banyak
sekali Contoh : Email, WWW, FTP dll.
Salah satunya yang paling populer adalah WWW (World Wide Web)

World Wide Web

World Wide Web adalah suatu ruang informasi yang yang dipakai oleh
pengenal global untuk mengidentifikasi sumber-sumber daya yang berguna
(Wikipedia)
Singkatnya, World Wide Web adalah nama yang diberikan untuk semua bagian
Internet yang dapat diakses dengan software web browser
WWW terdiri dari jutaan situs web (web site) dan setiap web site terdiri
banyak halaman web (web page)

Metodologi
desain web
ideas generation

Prototyping
testing
A Practical Guide to Designing for the Web
by Mark Boulton

Pro
ses
Des
ain
Web

1.

Menentukan tujuan/goal
(berdasarkan brief dari klien & riset user)

2.

Merancang sitemap
(alur proses halaman, navigasi dan link interaksi ke
halaman lainnya)

3.

Mencari referensi website

(website serupa untuk referensi desain dan UX)

4.

Membuat sketsa/wireframe
(gambaran kasar dari web yang akan dibangun)

5.

Menentukan skema warna (dibahas lebih lanjut pada

pertemuan berikutnya)

6.

Menentukan lebar konten dan menggunakan sistem grid

(dibahas lebih lanjut pada pertemuan berikutnya)

7.

Manajemen file (dibahas lebih lanjut pada pertemuan

berikutnya)

1.
Tuju
an /
goal

Tujuan:
profil perusahaan, portofolio atau berjualan
(e-commerce)?
Apakah hanya sebagai media eksistensi
perusahaan,
media informasi, membangun citra/branding, atau
untuk mencari lebih banyak klien?

Manajemen konten, konsep dan gaya desain

dirancang berdasarkan tujuan.
Fokus pada tujuan!
Jangan terlalu berlebihan dalam hal yang bersifat

2.
site
map

Sitemap: kerangka utama hubungan antara satu

halaman dengan halaman lainnya di sebuah website
berisi navigasi utama, alur proses halaman, dan link
interaksi ke halaman lainnya.

3.
refe
rens
i

Menggali ide dengan merujuk pada website

sejenis,
Sebagai bahan perbandingan
Mempelajari pengalaman pengguna (user
experience/UX)

4.
Ske
tsa/
wire
fra
me

sketsa atau wireframe (istilah yg biasa digunakan

dalam desain web) berguna sebagai acuan dasar
sebuah desain website.
Wireframe juga digunakan ketika presentasi ke
klien untuk menghemat waktu dan effort revisi.
Tool:
1. Lumzy

6. Pidoco

2. Frame Box

7. Mockflow

3. Creately

8. Pencil Project

4. Mockingbird

9. SimpleDiagrams

5. Hotgloo

10.Prototyper

5.
Ske
ma
war
na

Pemilihan warna yang sesuai dengan tujuan. Dengan

menentukan skema warna terlebih dahulu, proses
desain website menjadi lebih efisien. Misal:
Biru kesan profesional dan formal
Coklat kesan klasik dan eksklusif.
Tool:
1. Kuler

6. Sphere

2. Color Scheme Designer7. Pictaculous

3. Color Explorer

8. Colorspire

4. Toucan

9. Colourlovers

5. Colorotate

6.
Leb
ar
kon
ten
&
Sist

1024 x 768 sistem grid 960 pixel

Layar monitor semakin lebar sistem grid 1140 1200 pixel.
Multi device display Fluid grid

HyperText Markup Language

- Bahasa standar yang digunakan untuk menampilkan
document web.
- Mengontrol tampilan dari web page dan contentnya.
- Menambahkan object-object seperti image, audio, video dan
juga java applet dalam document HTML.
1. Ditransmisikan lewat HyperText Transfer Protocol
2. Beda browser bisa berbeda hasil penampilan

Cascading style sheet

Fungsi : mendefinisikan style untuk suatu teks dengan jenis
huruf, ukuran , warna tertentu.
Dalam pemakaian HTML murni kita pasti menggunakan tag
<font> dan tag lain untuk mengontrol bagaimana layout dari
halaman anda. Hal ini mengikat presentasi halaman web
dengan isinya, dan terasa menyulitkan dalam perancangan dan
pengembangannya.
CSS adalah standard pembuatan dan pemakaian style untuk
dokumen terstruktur , CSS digunakan untuk mempersingkat
penulisan tag HTML seperti font,color,text, dan table menjadi

Javascript
JavaScript adalah Bahasa pemrograman yang bisa
disisipkan ke HTML dan javascript berjalan di sisi Client
Pada awalnya JS diciptakan untuk melakukan operasioperasi kecil untuk membantu server memproses
data, namun seiring perkembangannya JS menjadi
bahasa pemrograman web yang tidak bisa terpisahkan
dengan web modern
Perkembangan JS memunculkan JS Framework (Ex.
jQuery)

Tools untuk ngoding web

1.Sublime
2.Notepad
3.Notepad++
4.Adobe Dreamweaver
5.Netbeans IDE

Stru
k
tur
htm
l

<!DOCTYPE html>
<html>
<head>
<title>Halaman Latihan</title>
</head>
<body>
<h1>Ini adalah latihan design web
pertamaku</h1>
</body>
</html>

Stru
k
tur
htm
l

<Head>
Kepala
<head>

Homepage

<Title>

Judul Homepage

</Title>
</Head>

<Body>
Tubuh
<body>

</Body>

IsiTeks
IsiTabel.
IsiAudio, Video, dll.

Tag html
Kalau pada bahasa pemrograman kita mengenal keyword code, maka pada HTML
kita mengenal yang namanya tag.
Contoh tag html adalah <head>, <title>, <body>, <html>, <img>, dan lain-lain.
Tag html tidak bersifat case sensitive <body> sama dengan <BODY>
Bentuk umum penulisan tag html adalah:
<ELEMENT ATTRIBUTE = value>
Element - nama tag
Attribute - atribut dari tag
Value - nilai dari atribut
Contoh:
<BODY BGCOLOR = lavender>

HTML VS HTML5
<div class="header">
<div id=nav">
<div id=
section">

<div id=
article">

<div
id=
aside
">

<div id=footer">

<html> Penanda Dokumen

HT
ML
TAG
EXA
MPL
E

<head> Header

<br> Ganti baris

<font> Font

<title> Judul dokumen

<li> Enumerasi

<body> Isi dokumen

<hr> Garis mendatar

<h1> Judul paragraph

<p> Paragraf

<img> Gambar
<a> Link (kaitan)

<b> <i> <u> text format

<table> Tabel

<del><ins><sup><sub> text format <!-- --> Komentar

<header> Header/kepala halaman <nav> Navbar
<footer> Footer/kaki halaman

<article> isi artikel

<section> section konten

<aside> konten kesamping

<audio> konten suara

<iframe> konten frame

<form> formulir

<progress> progress bar

<span> memanipulasi konten (inline) <div>

mengelompokkan konten
More Tag
<video> konten video

DOCTYPE
DOCTYPE atau DTD (Document Type Declaration)
Untuk memberi tahu kepada web browser bahwa dokumen yang akan
diproses adalah HTML.
Secara kasat mata tidak ada perbedaan meski tidak menuliskan
DOCTYPE. Namun web browser akan menerjemahkan halaman web dan
terutama CSS sedikit berbeda dari seharusnya.
Tag <html>
Tag pembuka dari keseluruhan halaman web
Tag html dimulai dengan <html> dan diakhiri dengan </html>.
Tag <head>
berisi berbagai definisi halaman
berisi kode yang tidak tampil di browser, seperti kode CSS, JavaScript,
dll.
Tag <body>
berisi semua elemen yang akan tampil dalam halaman web, seperti
paragraf, tabel, link, gambar, dll.

Tag Heading
Tag heading terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>,
<h5>, dan <h6>.
Tag heading secara default akan ditampilkan dengan huruf tebal (bold).
Tag header <h1> memiliki ukuran paling besar, sedangkan <h6>
terkecil.

Tag Paragraf <p>

Tag khusus untuk membuat paragraf.

Tag Break <br>

Tag untuk memisahkan sebuah bagian text dengan text lain.

Tag List <ul> <ol> <li>

<ul>
Unordered list (tidak berurutan).
Ditampilkan dengan bulatan atau kotak.
<ol>
Ordered list (berurutan).
Ditampilkan dengan angka atau huruf.
<li>
List itu sendiri

Tag Link <a>

<a> singkatan cari anchor (jangkar).
Membuat sebuah text yang ketika di-klik akan pindah ke halaman
lainnya.
Setiap tag <a> setidaknya memiliki sebuah atribut href.
href(hypertext reference) berisi alamat yang dituju.

Time to code
Kerjakan latihan1.html

Tag Image<img>
Untuk menampilkan gambar kedalam halaman web.
Setiap tag <img> setidaknya memiliki sebuah atribut src.
Tag yang langsung ditutup dengan />
src (source), merupakan atribut yang berisi alamat dari gambar yang
akan ditampilkan.
Gambar tersebut ditempatkan ke dalam satu folder dengan halaman

Tag Table <table> <tr> <td>

Untuk membuat table membutuhkan 3 tag:
Tag <tabel> digunakan untuk memulai tabel
Tag <tr> (table row), digunakan untuk membuat baris dari tabel.
Tag <td> (table data), digunakan untuk menginput data ke tabel.

Tag Komentar <!-- -->

Untuk memberikan penjelasan pada kode program
Tidak akan dijalankan/ditampilkan dihalaman web

Time to code
Kerjakan latihan2.html

Tag Form <form>

Untuk membuat sebuah formulir
Dalam Tag <form> biasanya diikuti salah satu atau beberapa tag berikut:
<input>, <textarea>, <button>, <select>, <option>, <optgroup>,
<fieldset>, <label>

Time to code
Kerjakan latihan3.html

pengayaan1

end