behance mobile strategy - ipad app

14
August 13, 2012 Behance WIREFRAMES iPad App VERSION 1.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.

Upload: laura-cortes

Post on 28-Mar-2016

335 views

Category:

Documents


3 download

DESCRIPTION

Behance Mobile Strategy - iPad App

TRANSCRIPT

Page 1: Behance Mobile Strategy - iPad App

August 13, 2012

BehanceWIREFRAMES – iPad App

VERSION 1.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.

Page 2: Behance Mobile Strategy - iPad App

Table of ContentsThis documents the Information Architecture and structure of <project name> 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

………………………………………………5Home

………………………………………………6Menu

…………………………………………7My Collection > Manage People

……………………………………8My Collection > Manage Projects

…………………………………………9My Collection > Preferences

……………………………………………10People

……………………………………………11Projects

………………………………………………4Common functionalities

……………………………………………12Projects page 2

……………………………………………13Full screen image

……………………………………………14Search results

Page 3: Behance Mobile Strategy - iPad App

0.0 BEHANCE iPap App

1.1 Manage 2.1 Projects

1.2 Preferences

2.1.1 Project 11.1.1 People

1.1.2 Projects

2.2.1 Creative 1

2.1.2 Project 2

2.2.2 Creative 2

2.1.3 Project 3

2.2.3 Creative 3

2.2 People

1.0 My Collection 2.0 Explore 3.0 Jobs 4.0 Inbox

2.1 Post a job

2.2.1 Jobs

2.2.2 People

2.2 Job List

2.3 Saved search

2.1 Compose

2.3 Sent

2.2 Inbox

2.2.1 Mess.

2.3.1 Mess.

2.2.2 Mess.

2.3.2 Mess.

2.2.3 Mess.

2.3.3 Mess.

Page 4: Behance Mobile Strategy - iPad App

<CLIENT NAME>

4

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

Common functionalities

Page Notes

Inbox

The

latest

people

The

latest

projects Search X

MY COLLECTION

EXPLORE

JOBS

1.0 2.0 3.0

4.0 5.0

6.0

7.0

8.0

Common functionalities

These elements are present in all screens.

1.0 – Latest people quick button

By tapping in this button the user can see the latest people

results that match his preferences. (page 4)

2.0 – Latest projects quick button

By tapping in this button the user can see the latest projects

results that match his preferences. (page 4)

3.0 – Inbox

The user can access his Inbox page by tapping this button.

(there are no wireframes for this functionality, but their look

would be similar to the ones on the mobile site).

4.0 – Search – insert text box

In this box the user can introduce key words and he will get

results matching people or projects (page 14).

5.0 – Delete button

This button deletes the content on the box.

6.0 – My collection

By tapping this button the user can see two options: Manage

and Preferences. This options are associated to the My

Collection section of the app.

(Page 6)

7.0 – Explore

The user can access the Explore section through this button

(The wireframes are not created for this section, but the look

would be similar to the iPhone App Explore section)

8.0 – Jobs

The user can access the Jobs section through this button

(The wireframes are not created for this section, but the look

would be similar to the iPhone App Jobs section)

Page 5: Behance Mobile Strategy - iPad App

<CLIENT NAME>

5

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

Home

Page Notes

The

latest

people

The

latest

projects Search XInbox

MY COLLECTION

EXPLORE

JOBS

The latest on your preferences:

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

HandMadeFont

Author: John Smith

Fields: Art Direction,

Graphic Design,

Typography

HandMadeFont

Author: John Smith

Fields: Art Direction,

Graphic Design,

Typography

HandMadeFont

Author: John Smith

Fields: Art Direction,

Graphic Design,

Typography

AllProjects

AllPeople

1.0

2.0

3.0

5.0

4.06.0

7.0

8.0

9.0 10.0

The latest on your preferences

On the homepage there are two main sections: People and Projects. This

two sections display the latest on the users preferences.

1.0 – People Tab

By tapping this tab the user can visualize the latest people’s results on his

preferences.

2.0 – All People Tab

By tapping this tab the user can visualize the all latest people’s results.

3.0 – Creative/Agency profile picture

Profile picture of the creative/agency results. It’s also a button that takes

the user to the creative/agency page.

4.0 – Creative/Agency appreciations

Number of appreciations of the creative/agency profile page.

5.0 – Creative/Agency views

Number of views of the creative/agency profile page.

6.0 – Creative/Agency name

Name of the creative/agency.

7.0 – Creative/Agency fields

Fields of expertise of the creative/agency.

8.0 – Creative/Agency Location

City and country of the creative/agency.

9.0 – Projects Tab

By tapping this tab the user can visualize the latest project’s results on his

preferences.

10.0 – All Projects Tab

By tapping this tab the user can visualize the all latest project’s results.

11.0 – Project picture

Image of the project. It’s also a button that takes the user to the project

page.

12.0 – Project appreciations

Number of appreciations of the project.

13.0 – Project views

Number of views of the project.

14.0 – Project name

Name of the project.

15.0 – Project fields

Fields in which project is included.

16.0 – Project author

Name of the project’s aurhor.

11.0

12.0

13.0

14.0

15.0

16.0

Page 6: Behance Mobile Strategy - iPad App

<CLIENT NAME>

6

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

Menu

Page Notes

The

latest

people

The

latest

projects Search XInbox

MY COLLECTION

EXPLORE

JOBS

The latest on your preferences:

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

AllProjects

AllPeople

MANAGE

1.0 – My collection Manage Button

The user can access the Manage section through this button

(Page 7)

2.0 – My collection preferences Button

The user can access the Manage section through this button

(Page 9)

3.0 – People gallery scroll

To visualize more results on the People section, the user

needs to scroll to the right by tapping and pulling.

There are three results on the page simultaneously.

4.0 – Projects gallery scroll

To visualize more results on the Projects section, the user

needs to scroll to the right by tapping and pulling.

There are three results on the page simultaneously.

1.0

PREFERENCES

2.0

3.0

4.0

Page 7: Behance Mobile Strategy - iPad App

<CLIENT NAME>

7

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

MY COLLECTION > MANAGE PEOPLE

Page Notes

The

latest

people

The

latest

projects Search XInbox

MY COLLECTION

EXPLORE

JOBS

ProjectsPeople

Manage

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

Follow

Message

Score: July 18

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

Follow

Message

Score: July 18

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

Follow

Message

Score: July 18

John Smith John SmithJohn Smith

1.0 – People Tab

By tapping this tab the user chooses to manage the creatives/

agencies that were added to his collection.

2.0 – Projects Tab

By tapping this tab the user chooses to manage the projects

that were added to his collection. (page 8)

3.0 – Score

The user can give different scores to the items on his

collection. By doing this, the items will be placed in order

depending on their respective score.

In order to give a different score the user taps on a star to add

or remove a level.

4.0 – Follow button

The user can choose to follow a creative/agency. By tapping

on the button Follow the user will receive updates on his inbox

every time one of the creatives or agencies adds something to

their portfolio.

5.0 – Message button

To send a message to the creative/agency the user can tap on

the button and he will be redirected to his Inbox, where he can

write the message.

6.0 – More

In order to see more items in the collection the user should tap

and pull. There are 6 results on the page simultaneously.

1.0 2.0

3.0

4.0

5.0

6.0

Page 8: Behance Mobile Strategy - iPad App

<CLIENT NAME>

8

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

MY COLLECTION > MANAGE PROJECTS

Page Notes

The

latest

people

The

latest

projects Search XInbox

MY COLLECTION

EXPLORE

JOBS

People Projects

HandMadeFont

Location: Tallin, Estonia

Fields: Art Direction,

typography

Follow author

Contact Author

Score: July 18

HandMadeFont

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

Follow author

Score: July 18

HandMadeFont

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

Follow author

Score: July 18

HandMadeFont HandMadeFontHandMadeFont

Author: John Smith

Contact Author Contact Author

Manage

1.0 – Projects Tab

By tapping this tab the user chooses to manage the projects

that were added to his collection.

The tab changes colour whenever is active or inactive.

2.0 – Score

The user can give different scores to the items on his

collection. By doing this, the items will be placed in order

depending on their respective score.

In order to give a different score the user taps on a star to add

or remove a level.

3.0 – Follow button

The user can choose to follow a creative/agency. By tapping

on the button Follow the user will receive updates on his inbox

every time one of the creatives or agencies adds something to

their portfolio.

4.0 – More

In order to see more items in the collection the user should tap

and pull. There are 6 results on the page simultaneously.

1.0

2.0

3.0

4.0

Page 9: Behance Mobile Strategy - iPad App

<CLIENT NAME>

9

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

MY COLLECTION > PREFERENCES

Page Notes

The

latest

people

The

latest

projects Search XInbox

MY COLLECTION

EXPLORE

JOBS

Preferences

Field

Field 1 Field 2 Field 3

Location

Country City

Experience

years

Availability

Freelance Internship

Part-time Full-time

Views

0-100

100-500

+500

Search

Save

1.0 – Preferences

In this page the user can change his collection preferences.

This preferences will be used to filter the results on the

homepage, either for people and projects.

2.0 – Field 1,2,3

The user can choose three fields of preference. This fields will

be used to filter the results on the homepage.

3.0 – Location:

3.1 – Country

3.2 – City

The user can choose a country and city to filter his results on

the homepage. Only creatives and agencies from the country

and city he chooses will be displyed.

4.0 – Experience

The user can choose to see only creatives with x years of

experience, by choosing a number on the dropdown menu that

will show up if the user taps on the experience box.

5.0 – Availability

The user can choose to see only creatives that are available

for:

5.1 – Freelance

5.2 – Internship

5.3 – Part-time

5.4 – Full-time

For this the user needs to check the boxes one or more of the

previous options.

6.0 – Views

The user can choose to see only creatives/agencies that have:

6.1 – 0-100 views

6.2 – 100-500 views

6.3 – +500 views

For this the user needs tap one of the buttons assigned to the

previous options.

7.0 – Save button

By tapping this button the user chooses to save his

preferences.

8.0 – Search

The user can search people and projects directly from this

screen that match his preferences. For that he needs to save

the options first by tapping on the button Save.

1.0

2.0

3.0

3.2

4.0

5.0

5.2

5.3 5.4

6.1

8

5.1

3.1

6.1 6.1

6.1

7

Page 10: Behance Mobile Strategy - iPad App

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

People 1

0

Page Notes

The

latest

people

The

latest

projects Favouvites Search X

People

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

Follow

Add to Collection

Send Message

All Projects

Fields: Art Direction, Graphic Design, Typography

HandMadeFont

Add to Collection

Fields: Art Direction, Graphic Design, Typography

HandMadeFont

Add to Collection

Fields: Art Direction, Graphic Design, Typography

HandMadeFont

Add to Collection

1.0

2/0

8.0

9.0

10.0

7.0

12.0

11.0

13.0

14.0

16.0

15.0

3.0

4.0

6.0

5.0

1.0 – Show Menu button

The menu is hided in the People and Projects

Profile page. This page is also displayed in

portrait position. To show the menu the user

need to tap on the arrow. The menu will show

up on top of the page.

2.0 – Creative/Agency name

Name of the creatuve/agency.

3.0 – Creative/Agency fields

Fields of expertise of the creative/agency.

4.0 – Creative/Agency Location

City and country of the creative/agency.

5.0 – Creative/Agency appreciations

Number of appreciations of the creative/agency

profile page.

6.0 – Creative/Agency views

Number of views of the creative/agency profile

page.7.0 – Creative/Agency profile picture

Profile picture of the creative/agency results. It’s

also a button that takes the user to the creative/

agency page.

8.0 – Follow button

The user can choose to follow a creative/agency.

By tapping on the button Follow the user will

receive updates on his inbox every time one of

the creatives or agencies adds something to their

portfolio.

9.0 – Add to collection

The user can choose to add a creative/agency to

his collection by tapping on this button.

10.0 – Message button

To send a message to the creative/agency the

user can tap on the button and he will be

redirected to his Inbox, where he can write the

message.

All Projects

In this area are displayed all the projects from the

creative/agency.

11.0 – Project title

Name of the project

12.0 – Project picture

Image of the project. It’s also a button that takes

the user to the project page.

13.0 – Project fields

Fields in which project is included.

14.0 – Add to collection

The user can choose to add a project to his

collection by tapping on this button.

15.0 – Project appreciations

Number of appreciations of the project.

16.0 – Project views

Number of views of the project.

Page 11: Behance Mobile Strategy - iPad App

<CLIENT NAME>

11

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

Projects

Page Notes

The

latest

people

The

latest

projects Search XInbox

Fields: Art Direction, Graphic Design, Typography

HandMadeFont

Author: John Smith

Add to Collection

Projects

Project page

In this page the user can visualize a specific project. He can

see and have access to the author or he can choose to add

the project to his collection.

1.0 – Image gallery

In this area there will be displayed an image gallery of the

project. There will be two images on the screen at the same

time.

2.0 – Image

The user can tap on an image from the gallery in order to see

it full screen. (page 13)

3.0 – Image gallery scroll

To see more images from the gallery the user needs to tap

and pull.

4.0 – Project image

Image of the project. To see full screen the user has t tap on

the iamge. (page 13)

5.0 – More

To see the rest of the project the user has to tap and pull to

scroll down. (page 12)

1.0

2.0

3.0

4.0

5.0

Page 12: Behance Mobile Strategy - iPad App

<CLIENT NAME>

12

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

Projects page 2

Page Notes

The

latest

people

The

latest

projects Search XInbox

1.0 – Twitter share button

This button shares the project on twitter.

2.0 – Facebook share button

This button shares the project on facebook.

3.0 – Linked In share button

This button shares the project on Linked In.

4.0 – Google Plus share button

This button shares the project on Google Plus.

5.0 – Appreciate this button

This button gives an appreciation to the project.

1.0 2.0 3.0 4.0

5.0

Page 13: Behance Mobile Strategy - iPad App

<CLIENT NAME>

13

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

Full screen image

Page Notes

The

latest

people

The

latest

projects Search XInbox

1.0

Full screen image

In order to see an image in full screen mode the user needs to

tap it.

1.0 – Close button

This button closes the image and returns to the project page.

Page 14: Behance Mobile Strategy - iPad App

<CLIENT NAME>

14

Document: Wireframes

Last Edited: 8/13/2012 Author: <NAME>

Search Results

Page Notes

The

latest

people

The

latest

projects Search XInbox

MY COLLECTION

EXPLORE

JOBS

INBOX

People Projects

Search Results

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

John Smith

Location: Tallin, Estonia

Fields: Art Direction,

Graphic Design,

Typography

Search results

This page displays the results

1.0 – People tab

The user can choose to see his search separated by people or

projects.

2.0 – Projects tab

The user can choose to see his search separated by people or

projects.

3.0 – Search results

There are 6 results simultaneously on the page.

4.0 – More

To see more results the user needs to tap and pull on the

screen in order to scroll down.

1.0 2.0

3.0

4.0