Behance WIREFRAMES – Mobile Site VERSION 2.0
August 12, 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
Login
………………………………………………5
Loged in
………………………………………………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.
Inbox
………………………………………………7
Inbox Message
………………………………………………8
My Portfolio
………………………………………………9
New additions and changes, including functionality and page elements, are documented and reviewed into each wireframe. Wireframe alterations are documented in the “Revision History.”
Revision History Version 1.0 (July 15, 2012) - First draft based off of the Mobile strategy Version 2.0 (August 12, 2012) - Final version
My Portfolio settings
……………………………………………10
Publish and Promote
……………………………………………11
Edit Projects/Profile
……………………………………………12
Edit Profile 2
……………………………………………13
Edit Profile 3
……………………………………………14
Explore People
……………………………………………15
Explore Projects
……………………………………………16
Explore Projects 2
……………………………………………17
Jobs
……………………………………………18
0.0 BEHANCE Mobile site 1.0 LOG IN
2.0 INBOX
3.0 MY PORT.
1.1 Log in
2.1 Compose
3.1 Create a new project
1.2 Register
2.2 Inbox 2.2.1 Mess. 2.2.2 Mess. 2.2.3 Mess. 2.3 Sent 2.3.1 Mess. 2.3.2 Mess. 2.3.3 Mess.
3.1.1 Cover 3.1.2 Content 3.1.3 Settings 3.1.3 Promote
3.2 Edit Projects 3.2.1 Project 1 3.1.1 Cover 3.1.2 Content 3.1.3 Settings 3.1.3 Promote
3.2.2 Project 2 3.3.3 Project 3
3.3 Edit Profile
4.0 EXPLORE 4.1 Projects
5.0 FOLLOW 5.1 Creatives
6.0 JOBS 5.1
All Jobs
4.1.1 Project 1
5.1.1 Creative 1
6.1.1 Job 1
4.1.2 Project 2
5.1.2 Creative 2
6.1.2 Job 2
4.1.3 Project 3
5.1.3 Creative 3
6.1.3 Job 3
4.2 People
5.2 Agencies
5.2
Favourites
4.2.1 Creative 1
5.2.1 Agency 1
6.2.1 Job 1
4.2.2 Creative 2
5.2.2 Agency 2
6.2.2 Job 2
4.2.3 Creative 3
5.2.3 Agency 3
6.2.3 Job 3
Behance
Common Functionalities
Document: Wireframes Last Edited: 8/12/2012
Author: Laura Cortes
Page Notes Common functionalities 1.0 – Behance Logo – Homepage button The 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.
Carrier
12:00 PM 4.0
1.0
Profile picture 2.0
Inbox
Laura 3.0
2.0 – Inbox button When 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 button When 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 it’s present in all screens once the user logs in. 4.0 – User profile picture When 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)
1.0
EXPLORE
1.0
MY PORTFOLIO
1.0
FOLLOW
1.0
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)
JOBS
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)
4
Behance
login
Document: Wireframes Last Edited: 8/12/2012
Carrier
12:00 PM
Carrier
12:00 PM
Carrier
Author: Laura Cortes
5
12:00 PM
LOG IN/ SIGN UP
Laura Cortes 5.0
6.0
2.0
1.0
LOGIN
"Lorem ipsum dolor sit amet, consectetur 3.0
MY PORTFOLIO
4.0
1.1
# #
EXPLORE
LOGIN 1.0
X
X
X
Password
X
2.0
Password 7.0 4.0 Remember me
Remember me
3.0
LOG IN
LOG IN
8.0
Q W E R T Y U
I
Not a member yet?
O P
6.0
5.0
FOLLOW
A S D F G H
9.0
ñ JOBS
10.0
Screen Notes 1.0 – Creative Name On the hopmepage there’s a image gallery showcasing different creatives. In this area it’s situated the creative name. 2.0 – Creative short description One sentence describing the creative. 3.0 – Creative number of appreciations Number of creative’s appreciations. 4.0 – Creative number of comments Number of comments on the creative’s age. 5.0 – Image gallery Image gallery showcasing the current creative work. 6.0 – Stop button By pressing this button the user can stop the images from changing automatically. 7.0 – Explore button By pressing this button the user will visualize the two options on the explore section.(Page 2) 8.0 – My portfolio button This button takes the user to the My portfolio section. (Page 8) 9.0 – Follow button By pressing this button the user will visualize the two options on the Follow section.(Page 2) 10.0 – Jobs button This button takes the user to the Jobs section. (Page 16)
123
J
K
L
7.0
Z X C V B N M Õ ®
space
8.0
Search
Screen Notes
1.0 – Email – Insert text box In order to Log In the user must inset his email address. 1.1 – Delete button In order to Log In the user must inset his email address. 2.0 – Password – Insert text box Here the user must insert his password to validate the account. 3.0 – Log In Button By pressing this button the user logs into his account. 4.0 – Remember me check box By checking this box the user saves his email and password on the browser. 5.0 – Virtual key pad This key pad belongs to the iPhone Os and pops up every time the user taps on a insert text box.
Or Sign Up with email
Screen Notes
6.0 – Facebook Log sign up button If the user doesn’t own an account he can choose to sign up with his Facebook account. 7.0 – Twitter Log sign up button If the user doesn’t own an account he can choose to sign up with his Twitter account. 8.0 – Sign Up with email If the user doesn’t own an account he can choose to sign up with his Email account.
Behance
loged in
Document: Wireframes Last Edited: 8/12/2012
Carrier
12:00 PM
Carrier
12:00 PM
Carrier
Profile picture
Inbox
Author: Laura Cortes
12:00 PM
Profile picture
Laura John Smith
Inbox
"Lorem ipsum dolor sit amet, consectetur
Profile picture
Laura John Smith
Inbox
"Lorem ipsum dolor sit amet, consectetur
# #
Laura John Smith
"Lorem ipsum dolor sit amet, consectetur
# #
# #
1.0 1.0
EXPLORE
EXPLORE
EXPLORE 2.0
3.0
1.0
MY PORTFOLIO
PEOPLE
FOLLOW
MY PORTFOLIO
PROJECTS
MY PORTFOLIO
FOLLOW 1.0
JOBS
Screen Notes
1.0 – Arrow down This arrow indicates the user that the button will display more options. 2.0 – Arrow right This arrow indicates the user that the button will redirect him to a new page.
FOLLOW
Screen Notes
1.0 – Button open The 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 button This button takes the user to the Explore People section. (Page 14) 3.0 – Explore Projects button This button takes the user to the Explore Projects section. (Page 15)
CREATIVES
2.0
AGENCIES
Screen Notes
1.0 – Follow Creatives button This button takes the user to the Follow creatives section. 2.0 – Follow Agencies button This 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.
6
Behance
Inbox
Document: Wireframes Last Edited: 8/12/2012
Carrier
12:00 PM
Carrier
12:00 PM
Profile picture
Inbox
INBOX
Carrier
Author: Laura Cortes
12:00 PM
Profile picture
Laura
Inbox
1.0
COMPOSE Send
2.0
COMPOSE
Profile picture
Laura
Inbox
INBOX
2.0
Save
3.0
1.0
5.0
To
Laura
1.0
3.0
Lorem ipsum dolor sit amet, John Smith
July 18
2.0
4.0 Lorem ipsum dolor sit amet,
3.0
John Smith
Subject
INBOX
7
July 18
4.0 5.0
Compose message
Lorem ipsum dolor sit amet,
4.0
John Smith
July 18
SENT Lorem ipsum dolor sit amet, John Smith
July 18
Lorem ipsum dolor sit amet,
Screen Notes
1.0 – Inbox Title Title of the page. In this page the user has access to his Behance message account. This arrow indicates the user that the button will display more options. 2.0 – Compose button By tapping this button the user is redirected to the next screen where he can compose a message. 3.0 – Inbox button Through this button the user has access to his inbox, where he can visualize received messages. (page 7) 4.0 – Sent button If the user chooses to tap this button he will be redirected to the sent messages. The wireframes for this section are identical to the inbox section.
6.0
7.0
COMPOSE
INBOX
8.0
John Smith 6.0
SENT
Screen Notes 1.0 – Send button The user can choose to send the email by tapping this button. 2.0 – Save button The user can choose to save the email by tapping this button. 3.0 – To – insert text box The user can add contacts in this area. By tapping on the box a dropdown menu will show up with the user contacts. 4.0 – Subject – insert text box Here the user can write the subject of the email. 5.0 – Compose message – insert text box Here the user can write the email. 6.0 – Compose - quick button On the bottom there are three quick buttons. Whenever the user is in a respective area the button is inactive and there’s an arrow pointing up informing the user that he is situated in that specific section. 7.0 – Inbox – quick button This button takes the user directly to the inbox section. 8.0 – Sent – quick button This button takes the user directly to the sent section.
Archive
July 18 7.0 Delete
Screen Notes
1.0 – Email subject Subject of the email. 2.0 – From Name of the person who sent the email. 3.0 – Add to favourites By tapping this button the user can choose to add the email to his favourites. 4.0 – Date Date of when the email was received. 5.0 – Check box The user can choose to check this box to apply the following actions: 6.0 – Archive button The user can choose to archive the email. 7.0 – Delete button The user can choose to delete the email.
Behance
Inbox message
Document: Wireframes Last Edited: 8/12/2012
Author: Laura Cortes
Page Notes Inbox Message
Carrier
12:00 PM
Profile picture
1.0
Inbox
Laura
4.0
INBOX Reply
5.0
Reply All
Forward
2.0
From:
3.0
6.0
John Smith
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor 7.0 incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id estlaborum Et harumd und 8.0 9.0 11.0 EXPLORE Archive
MY
FOLLOW
JOBS
PORTFOLIODelete
10.0
1.0 – Inbox Title Title od the page. 2.0 – Add to favourites button By taping this button the user can add the email to his favourites. If the button is selected it changes colour. 3.0 – Reply button The user can choose to reply the email by taping this button. 4.0 – Reply all button The user can choose to reply all the senders. 5.0 – Forward button The user can choose to forward the email to a new contact. 6.0 – From In this area the user can see the name of the person who sent him an email. 7.0 – Email text Text body of the email. 8.0 – Archive button By tapping this button the user can choose to archive the email. 9.0 – Delete button By tapping this button the user can choose to delete the email. 10.0 – Next email button By tapping in the text box the user can visualize the next email. (chronological order) 11.0 – Previous email button By tapping in the text box the user can visualize the previous email. (chronological order)
8
Behance
My portfolio
Document: Wireframes Last Edited: 8/12/2012
Carrier
12:00 PM
Carrier
12:00 PM
Carrier
Profile picture
1.0
Inbox
1.0
cover
MY PORTFOLIO
2.0
content
Inbox
4.0
Inbox cover
promote
55 characters left
5.0
content
Laura
settings
promote
1.0 1. DESCRIPTION GOES HERE
6.0
X
X
Project title
3.0
Profile picture
Laura
settings
1. Project Title
2.0
3.0
7.0
2. Cover Images
EDIT PROJECTS
8.0
(Images must be at least 202 x 158px, no larger than 5MB, and RGB
4.0
2.0
4.0
EDIT PROFILE 5.0
5.0 6.0
7.0
Images
8.0
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes 1.0 – Inbox Title Title of the page. In this page the user has access to his portfolio account. 2.0 – Create a new project button By tapping this button the user is redirected to the next screen where he can create a new project. 3.0 – Edit projects button Through this button the user has access to his profile projects, where he can choose to edit them. (page 11) 4.0 – Edit profile button Through this button the user has access to his profile settings, where he can choose to edit them. (page 11) 5.0 – Twitter share button This button shares the profile on twitter. 6.0 – Facebook share button This button shares the profile on facebook. 7.0 – Linked In share button This button shares the profile on Linked In. 8.0 – Google Plus share button This button shares the profile on Google Plus.
Videos
Audio
Text
UPLOAD IMAGE 3.0
9.0
EXPLORE
9
12:00 PM
Profile picture
Laura
CREATE A NEW PROJECT
Author: Laura Cortes
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes 1.0 – Cover section In this page the user can create a new project. The process is divided in four sections and this one is the cover. Here the user can choose an image for the project cover as well as the title of the project. 2.0 – Content In this section the user can choose the content for the project. 3.0 – Settings In this section the user can choose the settings for the project. 4.0 – Promote In this section the user can promote his project. 5.0 – Title of the project Here the user is informed that he needs to choose a name for the project. 6.0 – Characters left In this area the user is informed about how many characters he has left to write on the title. 7.0 – Project title – insert text box Here the user can write the project title. 8.0 – Image cover settings The user is informed about the image settings required for the cover. 9.0 – Upload Image button Here the user can upload a new image to his profile.
EXPLORE
INSERT
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
Content section Here the user can add content to his project 1.0 – Description – insert text box The user can write a short description about his project. 2.0 – Insert Images button The user can choose to insert images on his project. 3.0 – Insert videos button By tapping this button the user can choose to add the videos to his project. 4.0 – Insert audio button The user can choose to insert audio files on his project. 5.0 – Insert text button The user can choose to insert text boxes where he can write different content, on his project.
Behance
My Portfolio settings
Carrier
Document: Wireframes Last Edited: 8/12/2012
12:00 PM
Carrier
12:00 PM
Carrier
Profile picture
Inbox cover
content
settings
Author: Laura Cortes
12:00 PM
Profile picture
Laura
Inbox cover
promote
1.0content
settings
10
Profile picture
Laura
Inbox
promote
cover
content
Laura
settings
promote
1.0
Type of media
Creative Fields
Options
3.0 4.0
Choose the creative fields that best describe this project.
2.0
Select Field
Digital
1.0
Other
Visibility
2.0
Select Type
5.0
3.0
1.0
Work in this project is for sale
Search Tags
Allow viewers to post comments on this project
Make it easier for others to find your work (examples: nike, light, pattern).
This is for a social cause Description
Description Type of work
EXPLORE
1.0
6.0
X
Insert tags
7.0
This project has mature content e.g. nudity, sexual themes, violence/gore
500 characters left
X
Type here 4.0
Select Type
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
Settings section In this section the user can choose the settings for his project 1.0 – Creative field The user is informed that he has to choose a creative field for his project. 2.0 – Select a field - dropdown menu By tapping this button the user can visualize a list of different fields, and he can choose one that will define his project. 3.0 – Search tags – insert text box In this box the user can write different tags that will serve to identify his project and display it in the search results. The tags must be separated by commas. 4.0 – Description In this dropdown menu the user can choose the type of work he is presenting: student, professional, ong or freelance.
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
1.0 – Type of media Type of media. Here the user can choose what type of media he used to create the project. 2.0 – Print checkbox The user can choose print media. 3.0 – Digital checkbox The user can choose digital media. 4.0 – Other checkbox The user can choose other media. 5.0 – Work in this project is for sale - checkbox The user can choose to say that his work is for sale. 6.0 – This is for a social cause – checkbox The user can choose to say that the project was created for a social cause. 7.0 – Description – insert text box The user can write a short description about the project.
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
1.0 – Visibility type – dropdown menu Here the user can select who can view his project. 2.0 – Comments – check box The user can choose not to allow other users to comment on his project by unchecking the box. 3.0 – Mature content – check box The user can choose to check this box if he thinks that his project has mature content.
Behance
Publish and promote
Carrier
Document: Wireframes Last Edited: 8/12/2012
12:00 PM
Carrier
12:00 PM
Carrier
Profile picture
Inbox cover
content
promote
cover
Select Type
Ownership
content
Laura
settings
Inbox
promote
cover
2.0
7.0
Add Materials 3.0
settings
promote
X
X
X
Add Credits
content
Laura
Promote
X
Add Hardware
Add Co-Owners
8.0
Tools
Publish
4.0
Add Software 5.0
MY PORTFOLIO
X
Linked In
X
Add Online App
EXPLORE
Inbox
Profile picture
6.0
Copyright 1.0
12:00 PM
Profile picture
Laura
settings
Author: Laura Cortes
FOLLOW
JOBS
Screen Notes
1.0 – Copyright – dropdown menu The user can choose what kind of copyright he wants for his project. 2.0 – Co-Owners - insert text box The user can choose to add co-owners to his project by writing their name in this box. 3.0 – Credits – insert text box The user can choose to attribute credits to his project, by writing the mane of the people in this box. Tools 4.0 – Software In this area the user can write the software he used to create this project. 5.0 – Online app The user can choose to indicate if any online app was used to create the project.
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
6.0 – Hardware In this area the user can write the hardware he used to create this project. 7.0 – Materials The user can choose to indicate what materials he user to complete the project. 8.0 – Publish button By tapping this button the user publishes the project in his portfolio.
EXPLORE
MY PORTFOLIO
FOLLOW
Screen Notes
Promote 1.0 – Facebook share button This button shares the project on facebook. 2.0 – Twitter share button This button shares the project on twitter. 3.0 – Linked In share button This button shares the project on Linked In.
JOBS
11
Behance
Edit Projects/Profile
Carrier
Document: Wireframes Last Edited: 8/12/2012
12:00 PM
Carrier
12:00 PM
Carrier
Profile picture
Inbox
Laura
Inbox
Profile picture
Laura
Inbox
MY PORTFOLIO > Edit Profile
1.0
Location
Profile Image 1.0
Cacophony
Laura 6.0
5.0
Canada
By: Laura Cortes
12
12:00 PM
Profile picture
MY PORTFOLIO > Edit Projects 2.0
Author: Laura Cortes
British Columbia
2.0
Current Image
3.0
Digital Art
7.0
Vancouver
UPLOAD IMAGE
4.0
Creative Fields 5.0
Personal Information
6.0
9.0
X
Laura Cortes
By: Laura Cortes
Creative Direction
3.0
Digital Art
X
Digital Creative
MY
FOLLOW
JOBS
Screen Notes
Edit projects In this section the user can choose to edit existing projects. The screens for this will be identical to the ones on create a new project. 1.0 – Project title Title of the project. 2.0 – Project thumbnail Thumbnail image of the project. 3.0 – Project author Project author’s name. 4.0 – Project field Project’s creative field. 5.0 – Project likes Project’s number of likes. 6.0 – Project views Project’s number of views.
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
1.0 – Profile Image Thumbnail image of the user profile. 2.0 – Upload a new profile image button Here the user can upload a new image to his profile. 3.0 – Personal information - name The user can insert his personal name in this area. 4.0 – Personal information - profession The user can insert his profession in this area.
10.0
EXPLORE
MY PORTFOLIO
X X
Interaction Design
4.0
PORTFOLIO
X
Creative Direction
Cacophony
EXPLORE
8.0
FOLLOW
JOBS
Screen Notes
5.0 – Location - country By taping in the text box the user will be able to choose from a list of countries. 6.0 – Location - state By taping in the text box the user will be able to choose from a list of states. 7.0 – Location - city By taping in the text box the user will be able to choose from a list of cities. 8.0 – Creative field 1 The user can insert the first field of expertise. 9.0 – Creative field 2 The user can insert the second field of expertise. 10.0 – Creative field 3 The user can insert the third field of expertise.
Behance
Edit Profile2
Document: Wireframes Last Edited: 8/12/2012
Carrier
12:00 PM
Carrier
12:00 PM
Carrier
Profile picture
Inbox
12:00 PM
Profile picture
Laura
Inbox
1.0
Google+
X
User Experience Design
Profile picture
Laura
Inbox
7.0
Twitter:
2.0
Twitter.com/Lolaacortes
pinterest.com/lolacortes/
Experience
Available for: 8.0
Linkedin.com/pub/laura-
Freelance
Internship
About
Vimeo.com/lolacortes
EXPLORE
MY
FOLLOW
14.0 DESCRIPTION GOES HERE
JOBS
Screen Notes
1.0 – Creative field 4 The user can insert the third field of expertise. On the web 2.0 – Twitter account The user can insert his personal twitter account link. 3.0 – Linked In account The user can insert his personal Linked In account link. 4.0 – Vimeo account The user can insert his personal Vimeo account link. 5.0 – Youtube account The user can insert his personal youtube account link.
X
11.0
youtube.com/user/laura
PORTFOLIO
500 characters left
Full-time
Part-time 10.0
5.0
YouTube
13.0
2
9.0
4.0
Vimeo
12.0
Mid-Level
3.0
Laura
Professional Level
plus.google.com/u/0/11
6.0
On the web
Author: Laura Cortes
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
6.0 – Google Plus account The user can insert his personal Google Plus account link. 7.0 – Pinterest account The user can insert his personal Pinterest account link. Available for: In this area the user can choose what kind of work he is available for. 8.0 – Freelance Check box. 9.0 – Internship Check box. 10.0 – Part-time Check box. 11.0 – Full-time Check box.
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
Professional level 12.0 – Professional level – dropdown menu Here the user can choose his professional level, between the following options: low-level; mid-level; high-level 13.0 –Experience – dropdown menu The user can choose the number of years of experience. 14.0 – About – insert text box The user can write a short description about himself.
13
Behance
Edit Profile3
Document: Wireframes Last Edited: 8/12/2012
Author: Laura Cortes
Page Notes Profile specialties 1.0 – Specialties description – insert text box The user can add a short description of his specialties. Web References 2.0 – Link title The user can add a website reference to his profile. In this box should be introduced the title of the website. Carrier
12:00 PM
Profile picture
Inbox
Specialtes
Laura
500 characters left
DESCRIPTION GOES HERE
Web References
1.0
X
2.0
X
Link Title 3.0
X
Url 4.0
Save
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
3.0 – Url In this box should be introduced the url of the website. 4.0 – Save button This button save any changes made to the profile..
14
Behance
Explore People
Document: Wireframes Last Edited: 8/12/2012
Carrier
12:00 PM
Carrier
12:00 PM
Profile picture
Inbox
EXPLORE > PEOPLE 1.0
Carrier
Inbox
Profile picture
Laura
Inbox
HandMadeFont
2.0
Location: Tallin, Estonia Fields: Art Direction, Graphic Design, Typography
3.0
Laura
2.0
All Projects
Location: Tallin, Estonia Fields: Art Direction, Graphic Design, Typography
3.0
15
12:00 PM
Profile picture
Laura
HandMadeFont
Author: Laura Cortes
Handmade font.
4.0
By: HandMadeFont Art Direction, Graphic Design, Typography
4.0
5.0
Follow
Follow 5.0
6.0
6.0
About
7.0
HandMadeFont
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Location: Tallin, Estonia Fields: Art Direction, Graphic Design, Typography
7.0
Handmade font.
1.0
By: HandMadeFont Art Direction, Graphic Design, Typography
Follow
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
1.0 – Creative/Agency Photo Thumbnail image of the creative/agency. 2.0 – Creative/Agency Name In this area the user is informed about the creative/agency name. 3.0 – Creative/Agency Location In this area the user is informed about the creative/agency location. 4.0 – Creative/Agency Field In this area the user is informed about the creative/agency fields of expertise. 5.0 – Follow Button The user can choose to follow creatives and agencies. By pressing the button the user is adding creatives/agencies to his following list. 6.0 – Creative/Agency Appreciations number In this area the user is informed about the creative/agency number of appreciations. 7.0 – Creative/Agency Views number In this area the user is informed about the creative/agency number of views.
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
Creative/Agency profile 1.0 – About In this page the user can see the creative page and get detailed information about his/her work and field of expertise. By scrolling down the user can visualize examples of the creative work.
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
2.0 – Creative/Agency projects title Here the user can visualize the different projects from a creative or an agency. 3.0 – Project Thumbnail Thumbnail image of the project. 4.0 – Project author Name of the project author. 5.0 – Project field Here are displayed the fields of the project. 6.0 – Project Appreciations number In this area the user is informed about the project number of appreciations. 7.0 – Project Views number In this area the user is informed about the project number of views.
Behance
Explore Projects
Carrier
Document: Wireframes Last Edited: 8/12/2012
12:00 PM
Carrier
12:00 PM
Carrier
Profile picture
Inbox
EXPLORE > PROJECTS
Author: Laura Cortes
12:00 PM
Profile picture
Laura
Inbox
16
Profile picture
Laura
Inbox
1.0
Laura
Handmade font. 1.0
Art Direction, Graphic Design, Typography
Handmade font.
5.0
By: HandMadeFont
2.0
Art Direction, Graphic Design, Typography
3.0
Author: HandMadeFont Agency Lorem ipsum dolor sit amet, consectetur adipiscing elit. 4.0
London By: Talos Buccellati 6.0
Photography
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
1.0 – Explore projects In this page the user has access to a list of different projects from creatives or agencies. The user can access the different projects pages by tapping on the list items.
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
1.0 – Project page Page showcasing a project 2.0 – Project author Project author name, 3.0 – Project short description One sentence describing the project nature and field. 4.0 – Image Project image. To view full screen the user just needs to rotate the phone to landscape position.
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
5.0 – Image Project image. To view full screen the user just needs to rotate the phone to landscape position. 6.0 – Image Project image. To view full screen the user just needs to rotate the phone to landscape position.
Behance
Explore Projects Page 2
Document: Wireframes Last Edited: 8/12/2012
Author: Laura Cortes
Page Notes
1.0 – Twitter share button This button shares the project on twitter. 2.0 – Facebook share button This button shares the project on favebook. 3.0 – Linked In share button This button shares the project on Linked In. Carrier
12:00 PM
4.0 – Google Plus share button This button shares the project on Google Plus. Profile picture
Inbox
1.0
Laura
2.0
3.0
4.0
5.0
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
5.0 – Appreciate this button This button gives an appreciation to the project.
17
Behance
Jobs
Document: Wireframes Last Edited: 8/12/2012
Carrier
12:00 PM
Carrier
12:00 PM
Carrier
Profile picture
Inbox
Inbox
JOBS
JOBS 1.0
X 2.0
2.0
Location:
All Fields
3.0
Favourites 5.0
6.0
Scratchboard illustrator Oakland, CA, USA
July 18
7.0
8.0
Senior Interaction Designer Washington, DC, USA EXPLORE
MY PORTFOLIO
July 18 FOLLOW
JOBS
Screen Notes 1.0 – Quick Search – insert text box The quick search tool allows the user to search by simply inserting a key word. The results displayed include all the sections: jobs, creatives and agencies. 2.0 – Field Area – dropdown menu The user can choose a field area for his job search. 3.0 – Job posts tab The user can choose between searching through all the jobs posts by tapping on this tab. 4.0 – Favourites tab The user can choose between searching through his favourites jobs posts by tapping on this tab. 5.0 – Job Post title In order to Log In the user must inset his email address. 6.0 – Add to collection The user can choose to add the job post to his collection, directly from the job list. 7.0 – Job Location Informs the user about the job offer location. 8.0 – Post Date. Informs the user about the job post date.
Laura
Inbox
3.0
Oakland, CA, USA
EXPLORE
MY PORTFOLIO
FOLLOW
4.0
July 18
6.0
Add to favourites
JOBS
Screen Notes
1.0 – Job title Job offer position title. 2.0 – Agency name Name of the agency who posted the job offer. 3.0 – Job Location City, Sate and Country where the agency is located. 4.0 – Post date Month and day of the job post. 5.0 – Job description Description of the job offer.
Laura
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 5.0 dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
4.0
All job posts
Profile picture
1.0
Scratchboard illustrator Free Range Studios
18
12:00 PM
Profile picture
Laura
Find jobs
Author: Laura Cortes
EXPLORE
MY PORTFOLIO
FOLLOW
JOBS
Screen Notes
6.0 – Add to favourites button The user can choose to add the job offer to his favourites list by tapping on this button.