Mock-up - Rocketalk Web


Published on

Graphical mock-up guidelines given to developers to ease the development process accompanied by HTMLs & images. These graphical mock-ups were created from wireframes sent to the graphics team previously.

Published in: Design
  • 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

Mock-up - Rocketalk Web

  1. 1. Same as Same categories as the What’s hot on media warehouse etc on thethe application mobile interface On every page – leads to the download page Taken from what’s hot but one single best media /user/ band/ event Featured & recent media
  2. 2. Registration
  3. 3. Registration. All fields are the same as mobile. Except we have no voice. Now we have to incorporate SMS verification onto this.
  4. 4. This has already been made. The web APIs have been incorporated and tested. The actual invite sending mechanism has to be incorporated into this and it has to be tied into the invite friends flow. i.e. automatic bookmarking, added variable to keep track etc
  5. 5. The contacts are imported into this window itself and the invite is sent from here.
  6. 6. Login
  7. 7. Landing page
  8. 8. Other user’s page
  9. 9. Discovery
  10. 10. This page does not have a logged in state. This is meant for anyone who is browsing and wishes to see what’s hot and what’s new on RockeTalk. This is the showcase! Clicking on any of these media leads to the search results page. If this is most recent, then the most recent media / users / communities etc are displayed on the results. This media plays in the media player
  11. 11. The media clicked on plays here. The rest of the panel is dedicated to the rest of the media in this category. This category could be the following:1. A user’s media2. An artist’s media3. A community’s media4. What’s hot media5. Recent media6. Media related to a tag which the user has clicked on7. Media in a particular search results The media owner’s details Comments on this particular media Narrow this search criteria
  12. 12. On this page a person can discover all that RockeTalk has to offer in terms of media. It is dynamic because of the tags.Easy to use because everything is a link.A user can see the happening topics in audio, video, all categories, communities etc etc. The design is scalable so that it works with categories, with sub-categories as well as categories or with Just tags and depending on the availability of relevant headings can transform itself from one to another
  13. 13. Search
  14. 14. Media search – this pop-up can work as a standalone on a separate search page as well as a layer on top of any page.
  15. 15. Listing page • This page will be used to display all listings be it search results, or category view of media / users / communities / artists etc. • Depending on what we are viewing, clicking on the individual search results will take us to ‘user’s channel, community, artist’s page etc These headers change as we go from search results to User’s media, community media, what’s hot media, recent media / communities / users and so on and so forth.Theseparameters willchangedynamically withevery listing.
  16. 16. Media upload
  17. 17. Upload page is kept very simple. Since this is in Ajax, it gets populated as the user progresses with the upload.
  18. 18. The multiple upload allows a user to tag and upload media which belongs together. E.g. photo albums etc.Although it is conducive to simultaneous tagging and detailing, it can work as a standalone up loader for just uploading un-related media as well.
  19. 19. Communities
  20. 20. In communities it is important to see new communities as well as community users. This page highlights both
  21. 21. Messages posted in the community Media inside the community. This can be media exchanged or media posted depending on what our policies are….
  22. 22. Messages page• This format will be used to display all kinds of messages be it community messages or my messages.
  23. 23. Artists section
  24. 24. Empty artists’ page. Relevant links for the artist to startpopulating it with media / fans/ personalization graphics etc.
  25. 25. Artists’ page populated with different kinds of content. Hecan edit it right there and then as well as view other relevantthings like trade enquiries, comments etc.
  26. 26. Different mast heads for different kind of artists Actor painter Blogger DJ
  27. 27. Musician WriterAnd so on…..
  28. 28. Download page