Upload
krithika-suresh
View
370
Download
1
Tags:
Embed Size (px)
Citation preview
The Stylesheet
The Flow of Content
Going Forward…
The Stylesheet
The BasicsThe Basics• Font Family : Arial
• Colours• Body Text : Black• Highlighted Text : Pink, Orange, Lime green
• BG colour : White
• Page Size : 1024*768 px
The Basics… The Basics… (contd)(contd)
• Page layout : Left Aligned
• Navigational Bars : Single – Top Nav
• Information Popup : Square callout with Lime Green outline & white BG
• Error Popup : Square Callout with Pink outline & white BG
Info!!!
Error!!!
The Flow of Content
Just to avoid Jargon differences, and hence miscommunication, the parts of a web page:
Site ID (Header)
Footer
Top Nav(Main Menu)
Content Area
Drop Down menu(sub menu)
FODs(News style)
Left Nav
Channels
The Header
The HeaderThe Header• The Site ID shall be in the top left corner of the web page, with nothing above it. (e.g.
Sify.com)
• The Header shall always have icon links to our channels and each channel will open out in a new page (e.g. NDTV.com)
• The header will also have links to our Twitter page, Facebook and Orkut profiles, Linked in profile, RSS feed if any and other web presences. (e.g. Techcrunch.com)
• The login and password boxes fall right below the header horizontally (like the amazon.com search boxes)
Examples from the web!
Links to Web Presences
Site ID on top
Channels
Login & Password
Feature of the day!
The FODsThe FODs
• The Feature Of the Day will come in the block right below the site id.
• The FODs can be in one of the following 4 formats based based feasibility!
• The Cube, with 4 images and encrypted descriptions, clicking on which will take the user to the feature page. (e.g. Contentsutra.com)
• The Slide, with 5 features in the form of a slide show! (e.g. Joost.com)
• Floating FODs, more interactive format of FODs, where clicking on any FOD will bring it to the top and maximise it (e.g. doubleclick.com)
• Special Single, Where a single FOD will be highlighted for over half a page! The same can be a good idea during our starting few days. (e.g. Apple.com)
Examples from the web!
The Cube
The Slide
Floating FODs
The Special Single
Content Layout!
The Content layoutThe Content layout
• The user experiences tabbed browsing with one tab for each channel that’s live on the site. (e.g. asklaila.com)
During december kutchery season, the tabs could be today’s schedule, shop for albums, etc, each tab with a close icon, giving the user the choice to keep it on or close it down (e.g. bbc.co.uk)
• An “Add more tabs” option or “edit tab” is always available on the home page.
• There is minimum clutter and maximum interactivity for the user. The page can maximum run down for one scroll. Not beyond that! (e.g. Box.net)
• The user can customize his/her home page after logging in, adding widgets, alarms, reminders, calendars, sticky notes etc (e.g. igoogle.com)
Examples from the web!
Tabbed Browsing
The editable/closable tabs
Single scroll layout
Other pages…
The other pages - generalThe other pages - general• A mini version of the FODs stays on all the pages allowing the user access to the same
always.
• Anything is linkable! For example, if the user is viewing a timetable for that day’s concerts, he can click on a particular sabha to see all their concerts listed out, or click on an artist to see his profile and his concerts for the season, as well as check out some of his albums. If in the profile, a mention is made about a particular album, the user can click on the text to view the album details! And so on and so forth
• The page layout is like a magazine, but with minimum clutter! As much as possible, we will not have articles beyond 200 - 300 words! (e.g. People.com, bravotv.com)
• There will be interactive elements in every page, from simple arrows to movable window panes. The language will be extremely personal and the experience, completely user specific. (e.g. Ning.com)
Examples from the web!
Magazine Layout
Video Magazine Layout
Interactive elements
Flow of pages!
Flow of pagesFlow of pages (Cut 1) (Cut 1)Home Page
Stage plays* Dance*
Tamil English Hindi
Oldies
Now running
Oldies
Now running
Fashion Shows*
Classical festivals
Music
December season
Sabha Schedule
Sabha 1
Sabha 2
Sabha 3…
Live streaming
Download archives
Artist Profiles
Artist albums
Artist schedule
for season
CD library
Folk festivals…
Chennai sangamam
Online RadioCarnatic Music
Other Concerts*
Thiruvaiyaru festival
Custom playlists
Live streaming
* Future prospects
Going forward
First stepFirst step• Our starting product will be music, with special focus on carnatic music.
• The same will have content in the form of artist profiles, kutcheri calendar, and also live streaming from at least one sabha.
• Xxyyzz.com shall boast of the only online concert calendar that allows the user to set alarms, reminders, etc
• Promoting an artist’s CDs when his kutchery is on that day will be a great ad strategy
Going forwardGoing forward• As we move on, the following can be good sources for content in the site:
• Music – Thiruvaiyaru music festival, fusion music, various kutcheries
• Drama – Tamil, English and Hindi; Oldies and new releases– Metro plus drama Festival
• Dance – Classical– January dance festival that follows December!– Natyanjali– Dance dramas
• Chennai Sangamam arts festival
• Fashion shows – Lakme fashion week (currently Sify’s property) – India Fashion week
• Food festivals – recipes
The Beginning!