Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. The Stylesheet The Flow of Content Going Forward… . . . .
  2. 2. The Stylesheet . . . .
  3. 3. The Basics <ul><li>Font Family : Arial </li></ul><ul><li>Colours </li></ul><ul><ul><ul><li>Body Text : Black </li></ul></ul></ul><ul><ul><ul><li>Highlighted Text : Pink, Orange, Lime green </li></ul></ul></ul><ul><li>BG colour : White </li></ul><ul><li>Page Size : 1024*768 px </li></ul>
  4. 4. The Basics… (contd) <ul><li>Page layout : Left Aligned </li></ul><ul><li>Navigational Bars : Single – Top Nav </li></ul><ul><li>Information Popup : Square callout with Lime Green outline & white BG </li></ul><ul><li>Error Popup : Square Callout with Pink outline & white BG </li></ul>Info!!! Error!!!
  5. 5. The Flow of Content
  6. 6. Just to avoid Jargon differences, and hence miscommunication, the parts of a web page:
  7. 7. Site ID (Header) Footer Top Nav (Main Menu) Content Area Drop Down menu (sub menu) FODs (News style) Left Nav Channels
  8. 8. . The Header . . .
  9. 9. The Header <ul><li>The Site ID shall be in the top left corner of the web page, with nothing above it. (e.g. </li></ul><ul><li>The Header shall always have icon links to our channels and each channel will open out in a new page (e.g. </li></ul><ul><li>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. </li></ul><ul><li>The login and password boxes fall right below the header horizontally (like the search boxes) </li></ul>
  10. 10. . E xamples from the web! . . .
  11. 11. Links to Web Presences
  12. 12. Site ID on top
  13. 13. Channels
  14. 14. Login & Password
  15. 15. . Feature of the day! . . .
  16. 16. The FODs <ul><li>The Feature Of the Day will come in the block right below the site id. </li></ul><ul><li>The FODs can be in one of the following 4 formats based based feasibility! </li></ul><ul><ul><ul><li>The Cube , with 4 images and encrypted descriptions, clicking on which will take the user to the feature page. (e.g. </li></ul></ul></ul><ul><ul><ul><li>The Slide , with 5 features in the form of a slide show! (e.g. </li></ul></ul></ul><ul><ul><ul><li>Floating FODs, more interactive format of FODs, where clicking on any FOD will bring it to the top and maximise it (e.g. </li></ul></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul>
  17. 17. . E xamples from the web! . . .
  18. 18. The Cube
  19. 19. The Slide
  20. 20. Floating FODs
  21. 21. The Special Single
  22. 22. . Content Layout! . . .
  23. 23. The Content layout <ul><li>The user experiences tabbed browsing with one tab for each channel that’s live on the site. (e.g. </li></ul><ul><ul><li>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. </li></ul></ul><ul><li>An “Add more tabs” option or “edit tab” is always available on the home page. </li></ul><ul><li>There is minimum clutter and maximum interactivity for the user. The page can maximum run down for one scroll. Not beyond that! (e.g. </li></ul><ul><li>The user can customize his/her home page after logging in, adding widgets, alarms, reminders, calendars, sticky notes etc (e.g. </li></ul>
  24. 24. . E xamples from the web! . . .
  25. 25. Tabbed Browsing
  26. 26. The editable/closable tabs
  27. 27. Single scroll layout
  28. 28. . Other pages… . . .
  29. 29. The other pages - general <ul><li>A mini version of the FODs stays on all the pages allowing the user access to the same always. </li></ul><ul><li>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 </li></ul><ul><li>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., </li></ul><ul><li>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. </li></ul>
  30. 30. . E xamples from the web! . . .
  31. 31. Magazine Layout
  32. 32. Video Magazine Layout
  33. 33. Interactive elements
  34. 34. . Flow of pages! . . .
  35. 35. Flow of pages (Cut 1) * Future prospects 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 Radio Carnatic Music Other Concerts* Thiruvaiyaru festival Custom playlists Live streaming
  36. 36. Going forward . . . .
  37. 37. First step <ul><li>Our starting product will be music, with special focus on carnatic music. </li></ul><ul><li>The same will have content in the form of artist profiles, kutcheri calendar, and also live streaming from at least one sabha. </li></ul><ul><li> shall boast of the only online concert calendar that allows the user to set alarms, reminders, etc </li></ul><ul><li>Promoting an artist’s CDs when his kutchery is on that day will be a great ad strategy </li></ul>
  38. 38. Going forward <ul><li>As we move on, the following can be good sources for content in the site: </li></ul><ul><ul><ul><li>Music – Thiruvaiyaru music festival, fusion music, various kutcheries </li></ul></ul></ul><ul><ul><ul><li>Drama – Tamil, English and Hindi; Oldies and new releases </li></ul></ul></ul><ul><ul><ul><ul><li>Metro plus drama Festival </li></ul></ul></ul></ul><ul><ul><ul><li>Dance – Classical </li></ul></ul></ul><ul><ul><ul><ul><li>January dance festival that follows December! </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Natyanjali </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Dance dramas </li></ul></ul></ul></ul><ul><ul><ul><li>Chennai Sangamam arts festival </li></ul></ul></ul><ul><ul><ul><li>Fashion shows </li></ul></ul></ul><ul><ul><ul><ul><li>Lakme fashion week (currently Sify’s property) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>India Fashion week </li></ul></ul></ul></ul><ul><ul><ul><li>Food festivals – recipes </li></ul></ul></ul>
  39. 39. . The Beginning! . . .