Date post: | 10-Apr-2015 |
Category: |
Documents |
Upload: | khairunnisa |
View: | 557 times |
Download: | 1 times |
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
www.shoedoctorshoe.comhttp://iiiccchhhaaa.wordpress.com
Siti Khairunnisa Humairoh - 33WSC - Web Design - Final Implementation 51/51