behance mobile strategy - mobile site

BehanceWIREFRAMES Mobile Site

VERSION 2.0

THIS DOCUMENT HAS BEEN PREPARED FOR LIMITED DISTRIBUTION.

THIS DOCUMENT CONTAINS MATERIALS AND INFORMATION THAT

Behance AND Laura Cortes CONSIDERS CONFIDENTIAL, PROPRIETARY

AND SIGNIFICANT FOR PROTECTION OF ITS BUSINESS.

August 12, 2012

Table of Contents

Revision HistoryVersion 1.0 (July 15, 2012)

- First draft based off of the Mobile strategyVersion 2.0 (August 12, 2012)

- Final version

This documents the Information Architecture and structure of design concept.

Wireframes

Wireframes illustrate the information architecture and interaction design elements of a site. This document defines the page structure (information), interaction, and navigation. It does not influence the nomenclature, colours, stylesheets, shapes, aesthetics, and other visual design parts of the website concept.

Wireframes provide a rationale behind the page structure, the interaction and the navigation. This vital information helps the development, design, and UE teams to scope out the project.

New additions and changes, including functionality and page elements, are documented and reviewed into each wireframe. Wireframe alterations are documented in the Revision History.

3Information Architecture

5Login6Loged in7Inbox8Inbox Message9My Portfolio10My Portfolio settings11Publish and Promote12Edit Projects/Profile13Edit Profile 214Edit Profile 315Explore People16Explore Projects

18Jobs

4Common functionalities

17Explore Projects 2

0.0 BEHANCE Mobile site

1.0 LOG IN

1.1 Log in 2.1 Compose

2.3 Sent

3.1 Create a new project

4.1 Projects

1.2 Register 2.2 Inbox

2.2.1 Mess.

3.1.1 Cover4.1.1 Project 1

4.2.1 Creative 1

5.1.1 Creative 1 6.1.1 Job 1

6.2.1 Job 15.2.1 Agency 1

3.1.1 Cover

3.2.1 Project 12.3.1 Mess.

2.2.2 Mess.

3.1.2 Content4.1.2 Project 2

4.2.2 Creative 2

5.1.2 Creative 2 6.1.2 Job 2

6.2.2 Job 25.2.2 Agency 2

3.1.2 Content

3.2.2 Project 2

3.3.3 Project 3

2.3.2 Mess.

2.2.3 Mess.

3.1.3 Settings4.1.3 Project 3

4.2.3 Creative 3

5.1.3 Creative 3 6.1.3 Job 3

6.2.3 Job 35.2.3 Agency 3

3.1.3 Settings

3.1.3 Promote

3.1.3 Promote

2.3.3 Mess.

3.2 Edit Projects

4.2 People

3.3 Edit Profile

5.1 Creatives 5.1 All Jobs

5.2 Agencies 5.2 Favourites

2.0 INBOX 3.0 MY PORT. 4.0 EXPLORE 5.0 FOLLOW 6.0 JOBS

4Common FunctionalitiesBehanceDocument: Wireframes

Last Edited: 8/12/2012 Author: Laura Cortes

Carrier 12:00 PM

Page Notes

Profile picture

LauraInbox

EXPLOREMY

PORTFOLIOFOLLOW JOBS

Profile picture

LauraInbox

1.0 4.0

2.0

3.0

1.0 1.0 1.0 1.0

Common functionalities

1.0 Behance Logo Homepage buttonThe Behance logo is present in all pages, always in the same

place and allows the user to go back to the homepage from

whenever he is.

2.0 Inbox buttonWhen the user logs in, he has access to his Inbox through this

button. By tapping on the button the user is redirected to the

Inbox page. (page 6)

3.0 User name profile buttonWhen the user logs in, his profile name appears on the top

right corner of the screen. This area is also a button that takes

the user to his profile page and its present in all screens once the user logs in.

4.0 User profile pictureWhen the user logs in, his profile picture shows up on the top

right corner of the screen. This image is present in all screens

if the user is logged on.

5.0 Explore Quick button This button belongs to a bottom nav that contains three quick

buttons to the primary navigations of the app.

This one is takes the user to the Explore section.

(page 14)

6.0 My Portfolio Quick button This button belongs to a bottom nav that contains three quick

buttons to the primary navigations of the app.

This one is takes the user to the My portfolio section.

(page 8)

7.0 Follow Quick button This button belongs to a bottom nav that contains three quick

buttons to the primary navigations of the app.

This one is takes the user to the follow section.

7.0 Jobs Quick button This button belongs to a bottom nav that contains three quick

buttons to the primary navigations of the app.

This one is takes the user to the jobs section.

(page 17)

5loginBehanceDocument: Wireframes

Last Edited: 8/12/2012 Author: Laura Cortes

Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

Screen Notes Screen Notes Screen Notes

Email X

Password X

LOG IN/

SIGN UP

Laura Cortes

"Lorem ipsum

dolor sit amet,

consectetur

#

#

EXPLORE

MY PORTFOLIO

FOLLOW

JOBS

LOGIN

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space123 Search

LOGIN

Not a member yet?

Remember me LOG IN

Or Sign Up with email

1.0 Creative NameOn the hopmepage theres a image gallery showcasing different creatives. In this area its situated the creative name.

2.0 Creative short descriptionOne sentence describing the creative.

3.0 Creative number of appreciationsNumber of creatives appreciations.4.0 Creative number of commentsNumber of comments on the creatives age.5.0 Image galleryImage gallery showcasing the current creative work.

6.0 Stop buttonBy pressing this button the user can stop the images from changing automatically.

7.0 Explore buttonBy pressing this button the user will visualize the two options on the explore section.(Page 2)

8.0 My portfolio buttonThis button takes the user to the My portfolio section. (Page 8)

9.0 Follow buttonBy pressing this button the user will visualize the two options on the Follow section.(Page 2)

10.0 Jobs buttonThis button takes the user to the Jobs section. (Page 16)

1.0 Email Insert text boxIn order to Log In the user must inset his email address.

1.1 Delete buttonIn order to Log In the user must inset his email address.

2.0 Password Insert text boxHere the user must insert his password to validate the account.

3.0 Log In ButtonBy pressing this button the user logs into his account.

4.0 Remember me check boxBy checking this box the user saves his email and password on the browser.

5.0 Virtual key padThis key pad belongs to the iPhone Os and pops up every time the user taps

on a insert text box.

6.0 Facebook Log sign up buttonIf the user doesnt own an account he can choose to sign up with his Facebook account.

7.0 Twitter Log sign up buttonIf the user doesnt own an account he can choose to sign up with his Twitter account.8.0 Sign Up with email

If the user doesnt own an account he can choose to sign up with his Email account.

3.0

7.0

8.0

1.0

2.0

4.0

9.0

10.0

5.06.0

1.0

2.0

4.0 3.0

5.0

1.1

Email X

Password X

Remember me LOG IN

6.0

7.0

8.0

6loged inBehanceDocument: Wireframes

Last Edited: 8/12/2012 Author: Laura Cortes

Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

Screen Notes Screen Notes Screen Notes

Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

PROJECTS

EXPLORE

MY PORTFOLIO

FOLLOW

JOBS

John Smith

"Lorem ipsum

dolor sit amet,

consectetur

#

#

John Smith

"Lorem ipsum

dolor sit amet,

consectetur

#

#

EXPLORE

PEOPLE

MY PORTFOLIO

FOLLOW

John Smith

"Lorem ipsum

dolor sit amet,

consectetur

#

#

CREATIVES AGENCIES

FOLLOW

EXPLORE

MY PORTFOLIO

1.0

2.0 3.0

1.0

1.0

1.0 Arrow downThis arrow indicates the user that the button will display more options.

2.0 Arrow rightThis arrow indicates the user that the button will redirect him to a new

page.

1.0 Button openThe Explore and Follow buttons have two secondary buttons associated.

Every time the user taps in one of them, the secondary buttons show up and

the other buttons slide down. The arrow pointing down disappears, if the

secondary buttons are active, and the other buttons turn grey.

2.0 Explore People buttonThis button takes the user to the Explore People section. (Page 14)

3.0 Explore Projects buttonThis button takes the user to the Explore Projects section. (Page 15)

1.0 Follow Creatives buttonThis button takes the user to the Follow creatives section.

2.0 Follow Agencies buttonThis button takes the user to the Follow agencies section.

Note: The Follow section was developed in this set of wireframes.

The section is identical to the homonymous section in the iPhone App

wireframes set.

1.02.0

7InboxBehanceDocument: Wireframes

Last Edited: 8/12/2012 Author: Laura Cortes

Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

Screen Notes Screen Notes Screen Notes

Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

COMPOSE

INBOX

SENT

To

Subject

Compose message

Send Save

INBOX COMPOSE

COMPOSE INBOX SENT

INBOX

Lorem ipsum dolor sit amet, John Smith July 18

Lorem ipsum dolo