Behance Mobile Strategy - iPad App by Laura Cortes

Behance WIREFRAMES – iPad App VERSION 1.0

August 13, 2012

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.

This documents the Information Architecture and structure of <project name> design concept. Wireframes

Table of Contents

Information Architecture

………………………………………………3

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.

Common functionalities

………………………………………………4

Home

………………………………………………5

………………………………………………6

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.

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

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

My Collection > Manage Projects My Collection > Preferences

……………………………………8

…………………………………………9

People

……………………………………………10

Projects

……………………………………………11

Projects page 2

……………………………………………12

Full screen image

……………………………………………13

Search results

……………………………………………14

0.0 BEHANCE iPap App 1.0 My Collection 1.1 Manage

2.0 Explore 2.1 Projects

3.0 Jobs

4.0 Inbox

2.1 Post a job

2.1 Compose

2.2 Job List

2.2 Inbox

1.1.1 People

2.1.1 Project 1

1.1.2 Projects

2.1.2 Project 2

2.2.1 Jobs

2.2.1 Mess.

1.2 Preferences

2.1.3 Project 3

2.2.2 People

2.2.2 Mess.

2.3 Saved search

2.2.3 Mess.

2.2 People 2.2.1 Creative 1

2.3 Sent

2.2.2 Creative 2

2.3.1 Mess.

2.2.3 Creative 3

2.3.2 Mess. 2.3.3 Mess.

Common functionalities Page Notes Common functionalities These elements are present in all screens. 1.0

The latest people

2.0

The latest projects

3.0 4.0

Inbox

5.0

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)

6.0

MY COLLECTION 7.0

EXPLORE 8.0

JOBS

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)

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

Home Page Notes

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.

The latest people

The latest projects

Inbox

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.

The latest on your preferences:

MY COLLECTION

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.

2.0

People

All

4.0 – Creative/Agency appreciations Number of appreciations of the creative/agency profile page.

1.0

EXPLORE

5.0 – Creative/Agency views Number of views of the creative/agency profile page.

3.0

JOBS

6.0 – Creative/Agency name Name of the creative/agency.

5.0

4.0

6.0

John Smith

Fields: Art Direction, Graphic Design, 7.0 Typography Location: Tallin, Estonia

Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia

John Smith Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia

8.0

Projects

9.0 – Projects Tab By tapping this tab the user can visualize the latest project’s results on his preferences.

10.0

11.0 – Project picture Image of the project. It’s also a button that takes the user to the project page.

11.0

12.0 – Project appreciations Number of appreciations of the project.

13.0

13.0 – Project views Number of views of the project.

12.0 14.0

HandMadeFont Fields: Art Direction, Graphic Design, Typography Author: John Smith 16.0

8.0 – Creative/Agency Location City and country of the creative/agency.

10.0 – All Projects Tab By tapping this tab the user can visualize the all latest project’s results.

All

9.0

7.0 – Creative/Agency fields Fields of expertise of the creative/agency.

HandMadeFont 15.0

Fields: Art Direction, Graphic Design, Typography Author: John Smith

HandMadeFont Fields: Art Direction, Graphic Design, Typography Author: John Smith

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.

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

Menu Page Notes 1.0 – My collection Manage Button The user can access the Manage section through this button (Page 7) The latest people

MY COLLECTION

The latest projects

The latest on your preferences: MANAGE People

Inbox

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.

1.0

All 2.0

EXPLORE

PREFERENCES 3.0

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.

JOBS

John Smith

Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia Projects

Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia

John Smith Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia

All

4.0

John Smith Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

MY COLLECTION > MANAGE PEOPLE Page Notes

1.0 – People Tab By tapping this tab the user chooses to manage the creatives/ agencies that were added to his collection. The latest people

MY COLLECTION

The latest projects

Manage

Inbox

1.0

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.

2.0

People

2.0 – Projects Tab By tapping this tab the user chooses to manage the projects that were added to his collection. (page 8)

Projects

EXPLORE

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.

JOBS

John Smith

Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia

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.

John Smith

Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia

3.0

Score:

July 18

Score:

July 18

Score:

July 18

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.

4.0

Message

5.0

Message

John Smith

6.0

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

MY COLLECTION > MANAGE PROJECTS Page Notes

The latest people

MY COLLECTION

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.

The latest projects

Inbox

Manage

1.0

People

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.

Projects 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.

EXPLORE

JOBS

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.

HandMadeFont

HandMadeFont Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia

Fields: Art Direction, typography Author: John Smith Location: Tallin, Estonia

Score:

HandMadeFont

July 18

Score:

Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia July 18

Score:

July 18

2.0

Follow author

Contact Author

HandMadeFont

3.0

Follow author

Contact Author

HandMadeFont

4.0

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

MY COLLECTION > PREFERENCES Page Notes

The latest people

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.

The latest projects

Inbox

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.

1.0

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.

Preferences

MY COLLECTION

2.0

Field Field 1

EXPLORE

Field 2

Field 3

3.0

Location

JOBS

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.

3.2

3.1

Country

City

Experience

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.

4.0

years 5.0

Availability

5.2 5.1

Freelance

Internship

5.3

5.4

Part-time

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.

Full-time 6.1

Views

Save

6.1

0-100

+500

7.0 – Save button By tapping this button the user chooses to save his preferences.

6.1

100-500

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.

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

1 0

People

The latest people

The latest projects

Favouvites

People 2/0

John Smith

1.0

8.0

3.0

Fields: Art Direction, Graphic Design, Typography

Follow 4.0

9.0

Add to Collection

Location: Tallin, Estonia 6.0

10.0

Send Message

7.0 5.0

All Projects

11.0

HandMadeFont 13.0

12.0

Fields: Art Direction, Graphic Design, Typography Add to Collection

14.0

16.0 15.0

HandMadeFont

Fields: Art Direction, Graphic Design, Typography Add to Collection

HandMadeFont

Fields: Art Direction, Graphic Design, Typography Add to Collection

Page Notes 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.

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.

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.

Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

Projects Page Notes

The latest people

The latest projects

Inbox

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.

1.0

2.0 – Image The user can tap on an image from the gallery in order to see it full screen. (page 13)

Projects

HandMadeFont

2.0 3.0

Author: John Smith Fields: Art Direction, Graphic Design, Typography

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)

Add to Collection

5.0 – More To see the rest of the project the user has to tap and pull to scroll down. (page 12)

4.0

5.0

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

Projects page 2 Page Notes 1.0 – Twitter share button This button shares the project on twitter. The latest people

The latest projects

2.0 – Facebook share button This button shares the project on facebook. Search

Inbox

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

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

Full screen image Page Notes

Full screen image In order to see an image in full screen mode the user needs to tap it. The latest people

The latest projects

Inbox

1.0 â&#x20AC;&#x201C; Close button This button closes the image and returns to the project page.

1.0

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>

Search Results Page Notes Search results This page displays the results The latest people

MY COLLECTION

The latest projects

1.0 Search Results

People

Inbox

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.

2.0

3.0 – Search results There are 6 results simultaneously on the page.

Projects

EXPLORE

4.0 – More To see more results the user needs to tap and pull on the screen in order to scroll down. 3.0

JOBS

INBOX

John Smith Fields: Art Direction, Graphic Design, Typography Location: Tallin, Estonia

4.0

<CLIENT NAME> Document: Wireframes Last Edited: 8/13/2012

Author: <NAME>