final implementation - web designer

WEB DESIGN

FINAL IMPLEMENTATION

KHAIRUNNISA

0900806750

BINUS CENTER SYAHDAN

NOVEMBER 2008

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation

TABLE of CONTENT

Table of Content …………………………………………………………………………… 3

A. Preface ……….………………………………………………………………………….. 5

1. Latar Belakang ………………………………………………………………..… 5

2. Tujuan ………………………………………………………………………..…… 5

3. Manfaat ………………………………………………………………………..…. 6

II. Content ……….……………………………………………………..…………………… 7

1. Concept ……………………………………………………………………..…… 7

2. Target Audience …………………………………………..………………..…… 9

3. Compability …………………………………...…………..………………..…… 9

4. Software dan Teknologi ……………………...…………..………………..…. 10

5. Sitemap …………………………..…………....…………..………………..…. 12

III. Storyboard …….…………………….……………………………..………………….. 13

IV. Snapshot …….…………………….……………………………...………………….. 35

Contact …….…………………….…………………………………...………..………..... 51

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 3/51

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation

PREFACE

I Latar Belakang

Pembuatan situs ini adalah sebagai pegeimplementasian dari apa yang

telah didapat dari pembelajaran dikelas Web Designer, Binus Center.

Konsep awal situs adalah sebagai portfolio, juga sebagai referensi lain

dari design situs UNGU band yang telah ada sekarang.

Tampilan situs akan membentuk suatu mood yang akan memberikan

suatu pesan tersendiri kepada pengunjung. Tampilan situs juga akan

mengungkapkan beberapa pencitraan yang ingin dihantarkan web

designer pada pengunjung situs melalui warna, teks, layout, gambar/

grafis, dan efek-efek pendukung lainnya.

UNGU band (Trinity Optima Production) adalah band Indonesia dengan

aliran pop music, juga membawakan beberapa lagu religi yang cukup

populer. Tahun 2008 ini, adalah tahun ke-12 UNGU band berkirprah di

musik tanah air. Tidak heran, pengunjung situs www.unguband.com

semakin meningkat, ditambah lagi peluncuran album terbaru UNGU band,

“Aku dan Tuhanku”.

II Tujuan

⚉ Sebagai media promosi untuk lebih mengembangkan lagi segment

market UNGU band secara elektronik. Dengan internet, pemasaran

akan lebih cepat dengan jangkauan yang lebih luas.

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 5/51

⚉ Sebagai nilai tambah bagi management UNGU band, situs ini akan

menjadi referensi dan informasi tambahan dari apa yang telah

diberikan secara offline (media televisi, surat kabar, tabloid, dan

sebagainya).

⚉ Media untuk Cliquers, komunitas penggemar UNGU band akan

beinteraksi berbagi pengalaman, cerita, ide, serta membangun

network sesama Cliquers

III Manfaat

⚉ Sebagai media komunikasi antara UNGU band dan Cliquers karena

dilengkapi oleh form contact, chatting, dan forum.

⚉ Sebagai pusat informasi terkini mengenai UNGU band,

management, dan segala berita yang mencangkup aktifitas serta

jadwal kegiatan UNGU band dan pihak management yang terkait.

⚉ Situs ini juga ditujukan sebagai media intertainment, Cliquers dan

pengunjung lainnya disamping dapat berinteraksi secara langsung

juga dapat menikmati video atau music streaming.

⚉ Kedepannya, management UNGU band akan mengembangkan sisi

transaksi pada situs www.unguband.com untuk para Cliquers

seperti id card, merchandise, tiket, dan sebagainya.

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 6/51

CONTENT

I Concept

Dengan menggunakan jelly design (kombinasi penggunaan satuan persen

dan pixel). Jelly design menjadikan tampilan situs secara penuh pada

setiap browser. Background keseluruhan hitam untuk kesan yang “tidak

biasa”. Sedangkan image dan button diambil dari warna ungu (#800080)

untuk melambangkan UNGU band sendiri. Tidak terlalu menampilkan

animasi dan foto para personil, dengan pertimbangan designer

menempatkan space tersendiri untuk para cliquers untuk mengakses foto

pribadi maupun dokumentasi UNGU band.

Dari halaman pertama ( index.html ) visitor akan diberi option untuk

memilih tujuannya. Button yang pertama merupakan UNGU official

website, dimana menu yang ada ditujukan untuk profesional reviewer.

Button “clips” yang kedua merupakan streaming video terbaru dari UNGU

band. Sedangkan menu yang ketiga merupakan Cliquers Member Area.

Banyak sekali content yang didapat jika visitor adalah cliquers, tetapi

dimungkinkan juga visitor yang pertama kali berkunjung untuk masuk

pada option yang ketiga. Alasan pemisahan pada option ini adalah untuk

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 7/51

membedakan fungsi dasar situs yang merupakan media informasi

sekaligus komunitas bagi penggemar UNGU band.

Dengan layout “Alternating Index”, navigasi utama berada disebelah kiri.

Menu yang sejajar dengan heading logo UNGU band merupakan “fast

track” yang akan digunakan oleh Cliquers. Sedangkan dibagian footer,

merupakan tiga menu utama untuk akses pada “home - UNGU Official

Website”, “Video Streaming”, dan “Cliquers Login Window”. Untuk

memudahkan, ditambahkan pula menu sitemap. Pada bagian sitemap,

pengunjung dimungkinkan akan mempelajari dengan cepat bagaimana

struktur situs dan akan membantu untuk mengefisienkan waktu browsing.

cliquers fast track

main menu

window optionannotation sitemap

content

heading

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 8/51

Detail lain :

Theme Simply Black

Font Verdana, Arial

Color #80080

#a9a9a9

#000000

#fffffff

II Target Audience

Profesional Reviewers adalah seluruh visitor, baik dalam dan luar negri,

juga pihak yang terkait dengan dunia musik Indonesia. Target lainnya

adalah Cliquers, penggemar UNGU band, remaja usia 12 sampai dengan

18 tahun.

III Compability

Situs ini dibangun dengan jelly design, adaptable dengan bebagai resolusi

user (termasuk 800 x 600) dan mampu diakses dengan optimal oleh

browser seperi Mozilla Firefox, Flock, Opera, Safari, Chrome, Camino,

dan Internet Explorer atau browser lain yang mampu membaca CSS,

Javascript dan perintah - perintah validasi yang ada.

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 9/51

IV Software dan Teknologi

⚉ Browser, software yang digunakan untuk mengakses dan

menampilkan halaman web seperti Mozilla Firefox, Flock, O p e r a ,

Safari, Chrome, Camino, Internet Explorer, dan lainnya.

⚉

Photoshop, penyedia grafik dengan beragam toolset untuk fotografi

digital, produksi precetakan, design web, animasi, 3D, maupun

video. Photoshop membantu dalam pengerjaan sebuah web

sebagai medai pengkoreksian gambar, untuk tampilan juga untuk

loading time yang efisien dengan kostumisasi ukuran pada file size.

Photoshop juga sangat membantu dalam manajemen slices dan

images maps dalam web content.

safari firefox opera flockcamino

Photoshop CS3 Photoshop CS4

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 10/51

⚉ Flash, memungkinkan designer untuk meciptakan sisi interaktif dari

sebuah web, dari animasi sederhana, sampai aplikasi web yang

kompleks, memadukan berbagai macam jenis grafik, audio, dan

video.

⚉ HTML Editor dan Visual Editing Feature, seperti Dreamweaver atau

Coda digunakan untuk merancang, menyusun script / pengkodean

yang mampu mensupport javascript, java, juga referensi untuk CSS

(Cascading Style Sheet), CFML (ColdFusion Makrup Language),

ASP (Miscrosoft Active Server Pages), JSP (Java Server Pages).

⚉ Lainnya :

FTP CLient, Code Collector, Reg Express, dan Habla Chat Installer

Flash

Dreamweaver Coda Coteditor

Code Collector Reg Express Habla InstallerFTP Transmit

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 11/51

V Sitemap

Ungu official website⚈ The band

History of UNGUEndaOnciMakkiRowmanPasha

⚈ Discography

⚈ Awards

⚈ Gallery

⚈ Download

Download pagesGames (NOKIA)

⚈ Management

⚈ Contact Us

⚈ Cliquers

Video Streaming Cliquers Member Area⚈ Login

ProfileBlogs

⚈ Sign up

⚈ Merchandise

⚈ Events - Schedules

⚈ Forum

⚈ Chat Room

⚈ News

⚈ Member Directory

Others

⚈ Annotation

⚈ Sitemap

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 12/51

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation

STORY BOARDindex

800 X 600

FLASH - WINDOW OPTIONS

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 13/51

STORY BOARDhome

Heading Logo UNGU

Background : repeat x (294 x 231)

Main Menu *rollover 253 x 55253 x 33253 x 33253 x 41253 x 54253 x 30253 x 39253 x 35253 x 101

Day.Clock

introduction

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 14/51

STORY BOARDthe band

Heading Logo UNGU

Background : repeat x (294 x 231)

Main Menu *rollover 253 x 55253 x 33253 x 33253 x 41253 x 54253 x 30253 x 39253 x 35253 x 101

Day.Clock

The band *image slider Pasha, Rowman, Oncy, Enda, Makki

Link to history pageLink to personil’s page

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 14/51

STORY BOARDdiscography

Heading Logo UNGU

Background : repeat x (294 x 231)

Main Menu *rollover 253 x 55253 x 33253 x 33253 x 41253 x 54253 x 30253 x 39253 x 35253 x 101

Day.Clock

All Album, Image display

*on click facebox

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 18/51

STORY BOARDAwards

Heading Logo UNGU

Background : repeat x (294 x 231)

Main Menu *rollover 253 x 55253 x 33253 x 33253 x 41253 x 54253 x 30253 x 39253 x 35253 x 101

Day.Clock

Awards in text only.On click push new info

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 19/51

STORY BOARDgallery

Heading Logo UNGU

Background : repeat x (294 x 231)

Main Menu *rollover 253 x 55253 x 33253 x 33253 x 41253 x 54253 x 30253 x 39253 x 35253 x 101

Day.Clock

Tabination menu.- Clips.- The Band- Gallery.

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 1/54

STORY BOARDdownload

Heading Logo UNGU

Background : repeat x (294 x 231)

Main Menu *rollover 253 x 55253 x 33253 x 33253 x 41253 x 54253 x 30253 x 39253 x 35253 x 101

Day.Clock

Tabination menu :- Wallpapers- Mp3 and ringtones- Clips

*link to download page (full page)

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 20/54

STORY BOARDmanagement

Heading Logo UNGU

Background : repeat x (294 x 231)

Main Menu *rollover 253 x 55253 x 33253 x 33253 x 41253 x 54253 x 30253 x 39253 x 35253 x 101

Day.Clock

Text

Image & Link : other artist

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 21/51

STORY BOARDcontact

Heading Logo UNGU

Background : repeat x (294 x 231)

Main Menu *rollover 253 x 55253 x 33253 x 33253 x 41253 x 54253 x 30253 x 39253 x 35253 x 101

Day.Clock

Feed back *form

TextLink, info, mailto

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 22/51

STORY BOARDcontact

Heading Logo UNGU

Background : repeat x (294 x 231)

Main Menu *rollover 253 x 55253 x 33253 x 33253 x 41253 x 54253 x 30253 x 39253 x 35253 x 101

Day.Clock

Cliquers, introductionAnimation *join cliquers

Tabination : - Advertise - cliquers VIP- How to- F. A. Q

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 23/51

STORY BOARDcliquers - login

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

Image readyForm login - validation

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Rollover button

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 24/51

STORY BOARDcliquers - events

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

text

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

calender Dispay event box

Reload by date

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 25/51

STORY BOARDcliquers - history

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

Expand all Toggle all

Button by images

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 26/51

STORY BOARDvideo streaming

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

Flash Video (flv)

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 27/51

STORY BOARDvideo streaming

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

Expand and togglexpmenu

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

MAIN

UNGU

CLIQUERS MENU

others

MEMBER

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 28/51

STORY BOARDcliquers chat

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Chat room

Input area

Online Cliquers Link to personil :Chat with (img)Chat with (img)Chat with (img)Chat with (img)Chat with (img)

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 29/51

STORY BOARDcliquers - sign up

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

Form sign upRegex - validation

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 30/51

STORY BOARDcliquers - forum

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Scrolling inside - TableAlternating Row Color

text

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 31/51

STORY BOARDcliquers - forum

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Scrolling inside - TableAlternating Row Color

TITLE newDate

text

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 32/51

STORY BOARDcliquers - merchandise

Heading Logo UNGU

Background : repeat x (294 x 231)

Day.Clock

Image ready

Window Option *image zoom in / zoom out

Annotation Sitemap (a hover)

Tooltip 50.40

Rollover buttonImages slider dor merchandise.Button next, prev, go to 1st, go to last

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 33/51

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation

SNAPSHOThome

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 35/51

SNAPSHOTthe band

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 37/51

SNAPSHOTdiscography

SNAPSHOT/awards

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 38/51

SNAPSHOTdownload

SNAPSHOT/management

SNAPSHOT

contact

SNAPSHOT/cliquers member area

SNAPSHOT

video streaming

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 39/51

SNAPSHOTmerchandise

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 40/51

SNAPSHOTevents

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 41/51

SNAPSHOTlogin

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 42/51

SNAPSHOTnews

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 42/51

SNAPSHOTdirectory

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 43/51

SNAPSHOTpersonils

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 44/51

SNAPSHOThistory-expand

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 45/51

SNAPSHOThistory - toggle

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 46/51

SNAPSHOTdownload

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 47/56

SNAPSHOTdownload

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 48/51

SNAPSHOTannotation

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 49/51

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation

CONTACT

Siti Khairunnisa H

Komp. Sekretariat Negara RIBlok A1/1 Tangerang

+6281311004000+622199104046

iiiccchhhaaa@me.comwww.iiiccchhhaaa.com

www.shoedoctorshoe.comhttp://iiiccchhhaaa.wordpress.com

Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 51/51