Mock-up - Rocketalk Web

39
Same as What’s hot on the applicatio Same categories as the media warehouse etc on the mobile interface On every page – leads to the download page Featured & recent media Taken from what’s hot but one single best media /user/ band/ event

description

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.

Transcript of Mock-up - Rocketalk Web

Page 1: Mock-up - Rocketalk Web

Same as What’s hot on the application

Same categories as the media warehouse etc on the

mobile interface

On every page – leads to the download page

Featured & recent media

Taken from what’s hot but one single best media /user/

band/ event

Page 2: Mock-up - Rocketalk Web

Registration

Page 3: Mock-up - Rocketalk Web

Registration. All fields are the same as mobile. Except we have no voice. Now we have to incorporate SMS verification onto this.

Page 4: Mock-up - Rocketalk Web

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

Page 5: Mock-up - Rocketalk Web

The contacts are imported into this window itself and the invite is sent from here.

Page 6: Mock-up - Rocketalk Web

Login

Page 7: Mock-up - Rocketalk Web

Landing page

Page 8: Mock-up - Rocketalk Web

Other user’s page

Page 9: Mock-up - Rocketalk Web

Discovery

Page 10: Mock-up - Rocketalk Web

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

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!

Page 11: Mock-up - Rocketalk Web

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

Narrow this search criteria

The media owner’s details

Comments on this particular media

Page 12: Mock-up - Rocketalk Web

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

Page 13: Mock-up - Rocketalk Web
Page 14: Mock-up - Rocketalk Web
Page 15: Mock-up - Rocketalk Web
Page 16: Mock-up - Rocketalk Web
Page 17: Mock-up - Rocketalk Web

Search

Page 18: Mock-up - Rocketalk Web

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.

Page 19: Mock-up - Rocketalk Web
Page 20: Mock-up - Rocketalk Web
Page 21: Mock-up - Rocketalk Web
Page 22: Mock-up - Rocketalk Web
Page 23: Mock-up - Rocketalk Web
Page 24: Mock-up - Rocketalk Web

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.

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 parameters will change dynamically with every listing.

Page 25: Mock-up - Rocketalk Web

Media upload

Page 26: Mock-up - Rocketalk Web

Upload page is kept very simple. Since this is in Ajax, it gets populated as the user progresses with the upload.

Page 27: Mock-up - Rocketalk Web
Page 28: Mock-up - Rocketalk Web

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.

Page 29: Mock-up - Rocketalk Web

Communities

Page 30: Mock-up - Rocketalk Web

In communities it is important to see new communities as well as community users. This page highlights both

Page 31: Mock-up - Rocketalk Web

Media inside the community. This can be media exchanged or media posted depending on what our policies are….

Messages posted in the community

Page 32: Mock-up - Rocketalk Web

Messages page• This format will be used to display all kinds of

messages be it community messages or my messages.

Page 33: Mock-up - Rocketalk Web

Artists section

Page 34: Mock-up - Rocketalk Web
Page 35: Mock-up - Rocketalk Web

Empty artists’ page. Relevant links for the artist to start populating it with media / fans/ personalization graphics etc.

Page 36: Mock-up - Rocketalk Web

Artists’ page populated with different kinds of content. He can edit it right there and then as well as view other relevant things like trade enquiries, comments etc.

Page 37: Mock-up - Rocketalk Web

Different mast heads for different kind of artists

Actor

painter

Blogger

DJ

Page 38: Mock-up - Rocketalk Web

Musician

Writer

And so on…..

Page 39: Mock-up - Rocketalk Web

Download page