Download - 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.
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
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.
<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)
<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
<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
<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
<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
<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
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.
<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
<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
<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.
<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