ANALYSIS & DESIGN WEB E.

ANALYSI S & DESI GN WEB E

Int r o

 Banyak pengembang w eb berpendapat “ Proses pengembangan w eb harus dilakukan secepat mengkin, analisa-analisa pada umumnya

menghabiskan w akt u & memperlambat pekerjaan”

 “ Apakah pengembang w eb benar-benar memahami kebut uhan-kebut uhan yang berkait an dengan

permasalahan-permasalahan?”

Int r o

 Pert anyaan ut ama pada t ahapan analisis adalah

siapa yang akan menggunakan sist em, fit ur & fungsi apa yang akan disediakan unt uk pengguna?

 Analysis Web E

 Cont ent Analysis

 Int eract ion Analysis

 Funct ion Analysis

ANALYSIS WEB E

 Ada 4 (empat ) jenis analisis yang dilakukan selama membangun Web E:

1. Cont ent Analysis

2. Int eract ion Analysis 3. Funct ion Analysis

Cont ent Analysis

1. Content Analysis

 M engident ifikasi kont en yang akan diberikan pada w eb app

 Kont en meliput i t eks, grafik, gambar, video dan audio

 Pengident ifikasian kont en bisa dilakukan dengan meninjau diagram-diagram yang digunakan pada t ahap analisis, sepert i:

 Use case, Use Case Scenario

Int er act ion Analysis

2. Interaction Analysis

 Cara pengguna berint eraksi dengan Web App

 Dapat digambarkan menggunakan diagram int eraksi (sequence diagram / collaborat ion diagram)

Funct ion Analysis

3. Function Analysis

 Fungsi-fungsi apa saja yang yang diberikan, bisa dilihat dari penggunaan use case diagram

 Funct ion juga memperlihat kan operasi (akt ivit as

yang dilakukan oleh sist em), hal ini dapat dilihat dari Use Case Scenario. Jika diperlukan penggambaran lebih det il dapat menggunakan Act ivit y Diagram.

 Fungsi lebih menekankan apa yang dikerjakan oleh sist em

Configur at ion Analysis

4. Analysis Configuration

 Lingkungan dan infrast rukt ur dimana WebApp dijelaskan secara rinci.

 Webapp dapat berada di Int ernet at au int ranet

 Selain it u, infrast rukt ur (yait u, komponen

infrast rukt ur dan sejauh mana dat abase akan digunakan unt uk menghasilkan kont en) unt uk w ebapp harus diident ifikasi pada t ahap ini

Cont ent

 Design Web E

 Component Web Design

 Archit ect ural Design

 Navigat ion Design

DESIGN WEB E

 Sasaran-sasaran perancangan pada aplikasi w eb:

 Kesederhanaan

 Konsist ensi

 Ident it as

 Ket angguhan

 Kemudahan unt uk melakukan navigasi

 Daya t arik visual

Component of Web Design

 4 (empat ) bagian ut ama Web Design:

1. Content: fit ur yg akan mempersuasi pengguna

2. Technology: cara u/ menerapkan fungsi sit us w eb 3. Visuals: form sit us dan navigasinya

4. Purpose: konsekuensi ekonomi u/ implement asi

WEB E Pr ocess - Design

 Archit ect ural Design

 Navigat ion Design

 Int erface Design

Ar chit ect ur al Design

 Perancangan Arsit ekt ural, meliput i:

 Arsit ekt ur isi

 Arsit ekt ur aplikasi

 Arsit ekt ur Isi

 Fokus pada bagaimana objek-objek isi (halaman-halaman w eb) dist rukt urkan unt uk direpresent asikan ke pengguna

 Arsit ekt ur Aplikasi

 Fokus pada bagaimana aplikasi w eb dist rukt urkan,

bagaimana menangani pemrosesan, pengat uran navigasi & isinya

Ar chit ect ur al Design

1. Arsitektur Isi

 M endefinisikan st rukt ur keseluruhan halaman-halaman hypermedia

 Terdapat 4 (empat ) st rukt ur isi:

1. St rukt ur Linier 2. St rukt ur Grid 3. St rukt ur Hirarki 4. St rukt ur Jaringan

St r ukt ur Linier

 Int eraksi pengguna dengan aplikasi w eb yang memperlihat kan urut an yang dapat diramalkan

 Cont oh: urut an melakukan pemesanan produk (st ep by st ep)

 Semakin kompleknya aplikasi w eb saat ini,

memungkinkan urut an t idak berjalan secara murni linier, namun diperkenankan adanya variasi /

St r ukt ur Gr id

 Dit erapkan saat isi dapat diorganisir menjadi 2 (dua) dimensi: vert ikal & horizont al

 Cont oh: aplikasi e-commerce yang menjual alat / t ongkat pemukul, dimensi horionzal

menggambarkan jenis t ongkat (kayu, besi, dsb) dan dimensi vert ikal memuat penaw aran/ harga barang

 Arsit ekt ur model grid bermanfaat hanya saat isi aplikasi w eb bersifat sangat t erat ur

St r ukt ur Hir ar ki

 M erupakan arsit ekt ur yang umum dijumpai pada aplikasi w eb

 Isi pada hirarki paling kiri memungkinkan

mempunyai link unt uk menuju isi bagian t engah maupun kanan, sehingga penelusuran dapat

dilakukan dengan cepat .

 Namun percabangan bisa saja menimbulkan kebingunan unt uk pengguna

St r ukt ur Jar ingan

 St rukt ur jaringan biasa disebut st rukt ur w eb murni

 M emiliki penelusuran yang fleksibel (t idak kaku)

 Namun banyaknya link t erkait , dapat juga

menimbulkan

kebingungan pada pengguna

Ar chit ect ur al Design

 St rukt ur isi yang t erdapat pada aplikasi w eb,

mungkin bisa saja campuran, pada bagian t ert ent u menggunakan linier, di bagian lain hirarki at au

jaringan, dan mungkin di sisi lain menggunakan gris

 Sasaran perancangan arsit ekt ur isi adalah

menyesuaikan st rukt ur aplikasi w eb dengan isi yang akan dipresent asikan sert a menyesuaikannya

dengan pemrosesan-pemrosesan yang akan dijalankan

Ar chit ect ur al Design

2. Arsitektur Aplikasi

 M endeskripsikan suat u infrast rukt ur yang memungkinkan sist em aplikasi berbasis w eb mencapai sasaran-sasaran bisnisnya

 Jacynt ho, dkk berpendapat “ Aplikasi-aplikasi berbasis w eb seharusnya dikembangkan

menggunakan lapisan-lapisan (layers) yang masing-masing memberikan perhat ian-perhat ian kepada hal-hal yang berbeda” [Jac02b]

 Pendapat di at as, akhirnya melahirkan konsep Arsit ekt ur M VC (M odel-View -Cont roller)

Ar chit ect ur al Design

 M VC memisahkan t ampilan ant ar muka, logika pemrograman dan model dat a

 M elakukan pemisahan ant ara ant armuka pengguna, aplikasi, dan navigasi akan menyederhakan

implement asi aplikasi w eb

 M odel: merepresent asikan objek dat a (dat abase),

 View : merepresent asikan t ampilan ant ar muka

Int er face Design

Sasaran perancangan ant armuka pada dasarnya:

1. M enet apkan jendela yang konsist en unt uk

melet akkan isi-isi dan fungsionalit as-fungisonalit as yg disediakan oleh ant armuka

2. M emandu para pengguna melalui serangkaian

int eraksi

3. M engorganisasi pilihan-pilihan navigasi dan isi-isi

Int er face Design

 Unt uk mendapat kan ant armuka pengguna yang konsist en, perlu memperhat ikan perancangan est et ika

 Perancangan est et ika juga disebut perancangan grafis

 Tanpa perancangan est et ika, suat u aplikasi w eb mungkin saja bersifat fungsional, t et api t idak

Int er face Design

 Perancangan grafis dimulai dari

 Perancangan t at a let ak (layout)

 Pemilihan skema w arna

 Pemilihan jenis t ext (font)

 Penggunaan media-media t ambahan (animasi, video, audio)

 M aupun st yle dan

Per ancangan t at a let ak (Layout )

 Layout bisa dikelompokan menjadi beberapa bent uk sesuai dengan penempat an index at au navigasi

 Sement ara bagian yang lain bisa dipindah-pindah sesuai kebut uhan

 Pengelompokan layout meliput i:

 M odel layout t op index

 M odel layout bot t om index

 M odel layout left index

 M odel layout right index

 M odel layout split index

Per ancangan t at a let ak (Layout )

 M odel Layout Top Index

Header

M enu (Navigasi)

Cont ent (Isi)

Per ancangan t at a let ak (Layout )

 M odel Layout Bot t om Index

Header

Lain-lain

Cont ent (Isi)

Per ancangan t at a let ak (Layout )

 M odel Layout Left Index

Header

M enu

(Navigasi) Cont ent (Isi)

Per ancangan t at a let ak (Layout )

 M odel Layout Right Index

Header

Cont ent (Isi) M enu

(Navigasi)

Per ancangan t at a let ak (Layout )

 M odel Layout Split Left -Right

Header

M enu

(Navigasi) Cont ent (Isi)

M enu (Navigasi)

Per ancangan t at a let ak (Layout )

 M odel Layout Top Bot t om Index

Header

M enu (Navigasi)

Cont ent (Isi)

Lain-lain

Per ancangan t at a let ak (Layout )

 M odel Layout Alt ernat ing Index

Header

M enu (Navigasi)

Cont ent (Isi)

Cont ent (Isi)

Pemilihan Skema War na

M emilih w arna bisa didasari dari met ode sepert i:

 M et ode Warna Berunt un

 Cont oh:Y ellow , yellow -orange, orange

 M et ode Warna Berlaw anan

 Cont oh: biru & orange, merah & hijau,kuning & ungu

 M et ode Warna Segit iga

 Cont oh: biru, merah dan kuning

 M et ode Warna M emudar

 1 w arna yg semakin muda: biru t ua, biru, biru muda

 M et ode Warna Kombinasi/ Pasangan

Pemilihan Jenis Teks (Font )

 Tipografi adalah seni huruf, meliput i pemilihan huruf, penent uan ukuran yang t epat

 Jenis huruf sangat banyak namun secara garis besar dapat dikat egorikan menjadi:

1. Serif

2. Sans-Serif 3. Dekorat if 4. Skrip

Pemilihan Jenis Teks (Font )

Serif

 Jenis huruf yang mempunyai st roke/ ekor/ kait

 M empunyai kesan resmi/ formal, elegan/ int elekt ual

 Cocok dipakai unt uk organisasi, pemerint ahan, pendidikan dan pemerint ahan

Termasuk dalam golongan ini



Times New Roman

,

Century

,

Baskerville

,

Bodoni

,

Pemilihan Jenis Teks (Font )

Sans-Serif

 Jenis huruf yang t idak mempunyai st roke/ ekor/ kait

 Ujungnya bisa berbent uk t umpul at au t ajam

 Jenis ini t erlihat sederha dan t idak formal, sehingga cocok unt uk judul dan sub-judul

Termasuk dalam golongan ini

Pemilihan Jenis Teks (Font )

Dekoratif

 Jenis huruf yang mempunyai desain yang rumit

 Tidak diperunt ukkan pada t ext yang panjang

 Gunakan unt uk judul dan grafis dan t idak t erlalu banyak

Termasuk golongan ini adalah:

Pemilihan Jenis Teks (Font )

Skrip

 Jenis ini menyerupai t ulisan t angan, sering disebut kursif (cursive)

 Bent uk huruf ini memberikan kesan anggun

 Jangan t erlalu banyak digunakan

Termasuk golongan ini adalah:

 Brush S cript, Fr ee St yl e Scr ipt ,

M atura M T S cript

Pemilihan Jenis Teks (Font )

M onospace

 Jenis ini huruf yang mempunyai jarak dan lebar yang sama unt uk set iap hurufnya

Termasuk golongan ini adalah:

St yle

 Pengat uran at au pembuat an St yle (gaya) dari suat u halaman w eb bisa dilakukan dengan menggunakan Cascading St yle Sheet (CSS)

 CSS memungkinkan kit a unt uk mempercant ik

halaman w eb dengan melakukan perubahan set t ing st andar elemen ht ml

 M isal: link biasanya berw arna biru pada dokumen ht ml, bisa kit a ubah menjadi w arna lain, misal

Cont ent Design

 Perancangan isi suat u sit us w eb berfokus pada 2 pekerjaan yang berbeda:

1. Perancangan objek-objek isi, dimana set iap objek

mempunyai at ribut & hubungan ant ar set iap objek

• Cont ent halaman login memuat at ribut username & pass 2. M embuat isi-isi yang akan dimunculkan pada

aplikasi w eb

Navigat ion Design

 M enggambarkan lint asan-lint asan navigasi yang memungkinkan para pengguna mengakses isi dan fungsi aplikasi w eb

 Dimulai dengan mempert imbangkan use case-use case t erkait yang dikembangkan unt uk

masing-masing pengguna

 Terdapat 2 pekerjaan desain navigasi:

1. M engident ifikasi semant ik navigasi sit us

Navigat ion Design

Semantik Navigasi Situs

 Cara pengguna melakukan penelusuran disebut dengan WON (w ays of navigat ing)

 M isalkan bagaimana pengunjung memberi bint ang pada halaman art ikel

 Kumpulan dari WON akan membent uk NSU (navigat ion semant ic unit)

 NSU adalah sejumlah informasi dan st rukt ur navigasi t erkait yang saling berkolaborasi unt uk memenuhi sejumlah kebut uhan pengguna

Navigat ion Design

 Kit a bisa membuat NSU unt uk masing-masing use case yang t erkait dengan masing-masing peran

pengguna

 Arsit ekt ur isi dinilai unt uk menent ukan 1 at au lebih WON unt uk masing-masing use case

 Suat u WON mengident ifikasikan simpul-simpul

navigasi dan kemudian mengait kannya sedemikian rupa sehingga t erjadi navigasi diant ara mereka

Navigat ion Design

Navigat ion Design

Syntax Navigasi

 M endifinisikan mekanisme navigasi unt uk mengimplement asikan masing-masing NSU

 Beberapa pendekat an meliput i:

 Taut an Navigasi Bersifat Individu

 Bar Navigasi Horizont al

 Kolom-kolom navigasi vert ikal

 Tab-t ab

Navigat ion Design

 M enggambarkan lint asan-lint asan navigasi yang memungkinkan para pengguna mengakses isi dan fungsi aplikasi w eb

 Dimulai dengan mempert imbangkan use case-use case t erkait yang dikembangkan unt uk

masing-masing pengguna

 Terdapat 2 pekerjaan desain navigasi:

1. M engident ifikasi semant ik navigasi sit us

Navigat ion Design

Semantik Navigasi Situs

 Cara pengguna melakukan penelusuran disebut dengan WON (w ays of navigat ing)

 M isalkan bagaimana pengunjung memberi bint ang pada halaman art ikel

 Kumpulan dari WON akan membent uk NSU (navigat ion semant ic unit)

 NSU adalah sejumlah informasi dan st rukt ur navigasi t erkait yang saling berkolaborasi unt uk memenuhi

Navigat ion Design

 Kit a bisa membuat NSU unt uk masing-masing use case yang t erkait dengan masing-masing peran

pengguna

 Arsit ekt ur isi dinilai unt uk menent ukan 1 at au lebih WON unt uk masing-masing use case

 Suat u WON mengident ifikasikan simpul-simpul

navigasi dan kemudian mengait kannya sedemikian rupa sehingga t erjadi navigasi diant ara mereka

Navigat ion Design

Syntax Navigasi

 M endifinisikan mekanisme navigasi unt uk mengimplement asikan masing-masing NSU

 Beberapa pendekat an meliput i:

 Taut an Navigasi Bersifat Individu  Bar Navigasi Horizont al

 Kolom-kolom navigasi vert ikal  Tab-t ab