XYZ

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!