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

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.


http://www.unguband.com


⚉ 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.




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


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


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.


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


⚉ 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


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


STORY BOARDindex

800 X 600

FLASH - WINDOW OPTIONS


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


STORY BOARDthe band

Heading Logo UNGU



Day.Clock

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

Link to history pageLink to personil’s page



Tooltip 50.40


STORY BOARDdiscography

Heading Logo UNGU



Day.Clock

All Album, Image display

*on click facebox



Tooltip 50.40


STORY BOARDAwards

Heading Logo UNGU



Day.Clock

Awards in text only.On click push new info



Tooltip 50.40


STORY BOARDgallery

Heading Logo UNGU



Day.Clock

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



Tooltip 50.40


STORY BOARDdownload

Heading Logo UNGU



Day.Clock

Tabination menu :- Wallpapers- Mp3 and ringtones- Clips

*link to download page (full page)



Tooltip 50.40


STORY BOARDmanagement

Heading Logo UNGU



Day.Clock

Text

Image & Link : other artist



Tooltip 50.40


STORY BOARDcontact

Heading Logo UNGU



Day.Clock

Feed back *form

TextLink, info, mailto



Tooltip 50.40


STORY BOARDcontact

Heading Logo UNGU



Day.Clock

Cliquers, introductionAnimation *join cliquers

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



Tooltip 50.40


STORY BOARDcliquers - login

Heading Logo UNGU


Day.Clock

Image readyForm login - validation



Tooltip 50.40

Rollover button


STORY BOARDcliquers - events

Heading Logo UNGU


Day.Clock

text



Tooltip 50.40

calender Dispay event box

Reload by date


STORY BOARDcliquers - history

Heading Logo UNGU


Day.Clock

Expand all Toggle all

Button by images



Tooltip 50.40


STORY BOARDvideo streaming

Heading Logo UNGU


Day.Clock

Flash Video (flv)



Tooltip 50.40


STORY BOARDvideo streaming

Heading Logo UNGU


Day.Clock

Expand and togglexpmenu



Tooltip 50.40

MAIN

UNGU

CLIQUERS MENU

others

MEMBER


STORY BOARDcliquers chat

Heading Logo UNGU


Day.Clock



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)


STORY BOARDcliquers - sign up

Heading Logo UNGU


Day.Clock

Form sign upRegex - validation



Tooltip 50.40


STORY BOARDcliquers - forum

Heading Logo UNGU


Day.Clock



Tooltip 50.40

Scrolling inside - TableAlternating Row Color

text


STORY BOARDcliquers - forum

Heading Logo UNGU


Day.Clock



Tooltip 50.40

Scrolling inside - TableAlternating Row Color

TITLE newDate

text


STORY BOARDcliquers - merchandise

Heading Logo UNGU


Day.Clock

Image ready



Tooltip 50.40

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


SNAPSHOThome


SNAPSHOTthe band


SNAPSHOTdiscography

SNAPSHOT/awards


SNAPSHOTdownload

SNAPSHOT/management

SNAPSHOT

contact

SNAPSHOT/cliquers member area

SNAPSHOT

video streaming


SNAPSHOTmerchandise


SNAPSHOTevents


SNAPSHOTlogin


SNAPSHOTnews


SNAPSHOTdirectory


SNAPSHOTpersonils


SNAPSHOThistory-expand


SNAPSHOThistory - toggle


SNAPSHOTdownload


SNAPSHOTannotation


CONTACT

Siti Khairunnisa H

Komp. Sekretariat Negara RIBlok A1/1 Tangerang

+6281311004000+622199104046

[email protected]

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


mailto:[email protected]

mailto:[email protected]

http://www.iiiccchhhaaa.com

http://www.iiiccchhhaaa.com

http://www.shoedoctorshoe.com

http://www.shoedoctorshoe.com

http://iiiccchhhaaa.wordpress.com

http://iiiccchhhaaa.wordpress.com

final implementation - web designer

Documents