Author
laura-cortes
View
299
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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 dolor sit amet, John Smith July 18
Lorem ipsum dolor sit amet, John Smith July 18
Lorem ipsum dolor sit amet, John Smith July 18
Lorem ipsum dolor sit amet, John Smith July 18
Archive Delete
1.0 Inbox TitleTitle 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 buttonBy tapping this button the user is redirected to the next screen where he
can compose a message.
3.0 Inbox buttonThrough this button the user has access to his inbox, where he can
visualize received messages. (page 7)
4.0 Sent buttonIf 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.
1.0 Send buttonThe user can choose to send the email by tapping this button.
2.0 Save buttonThe user can choose to save the email by tapping this button.
3.0 To insert text boxThe 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 boxHere the user can write the subject of the email.
5.0 Compose message insert text boxHere the user can write the email.
6.0 Compose - quick buttonOn the bottom there are three quick buttons. Whenever the user is in a respective area the button
is inactive and theres an arrow pointing up informing the user that he is situated in that specific section.
7.0 Inbox quick buttonThis button takes the user directly to the inbox section.
8.0 Sent quick buttonThis button takes the user directly to the sent section.
1.0 Email subjectSubject of the email.
2.0 FromName of the person who sent the email.
3.0 Add to favouritesBy tapping this button the user can choose to add the email to his favourites.
4.0 DateDate of when the email was received.
5.0 Check boxThe user can choose to check this box to apply the following actions:
6.0 Archive buttonThe user can choose to archive the email.
7.0 Delete buttonThe user can choose to delete the email.
2.0
3.0
4.0
1.0
1.03.0
4.05.0
6.0 7.0 8.0
2.0 1.0
5.0
2.0
3.0
4.0
6.0 7.0
8Inbox messageBehanceDocument: Wireframes
Last Edited: 8/12/2012 Author: Laura Cortes
Carrier 12:00 PM
Page Notes
Profile picture
LauraInbox
EXPLOREMY
PORTFOLIOFOLLOW JOBS
Forward
INBOX
Reply Reply All
John SmithFrom:
Archive Delete
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 cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id estlaborum
Et harumd und
1.0
2.0
3.0
4.0 5.0
6.0
7.0
8.0 9.0 11.0
10.0
Inbox Message
1.0 Inbox TitleTitle od the page.
2.0 Add to favourites buttonBy taping this button the user can add the email to his
favourites. If the button is selected it changes colour.
3.0 Reply buttonThe user can choose to reply the email by taping this button.
4.0 Reply all buttonThe user can choose to reply all the senders.
5.0 Forward buttonThe user can choose to forward the email to a new contact.
6.0 FromIn this area the user can see the name of the person who sent
him an email.
7.0 Email textText body of the email.
8.0 Archive buttonBy tapping this button the user can choose to archive the
email.
9.0 Delete buttonBy tapping this button the user can choose to delete the email.
10.0 Next email buttonBy tapping in the text box the user can visualize the next
email. (chronological order)
11.0 Previous email buttonBy tapping in the text box the user can visualize the previous
email. (chronological order)
9My portfolioBehanceDocument: 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
EXPLOREMY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS
MY PORTFOLIO
CREATE A NEW PROJECT
EDIT PROJECTS
EDIT PROFILE
cover content settings promote
1. Project Title 55 characters left
Project title X
2. Cover Images
(Images must be at least 202 x 158px, no larger than 5MB, and RGB
UPLOAD IMAGE
cover content settings promote
1. DESCRIPTION GOES HERE X
INSERT
Images Videos Audio Text
1.0 Inbox TitleTitle of the page. In this page the user has access to his portfolio account.
2.0 Create a new project buttonBy tapping this button the user is redirected to the next screen where he can create a new
project.
3.0 Edit projects buttonThrough this button the user has access to his profile projects, where he can choose to edit
them. (page 11)
4.0 Edit profile buttonThrough this button the user has access to his profile settings, where he can choose to edit
them. (page 11)
5.0 Twitter share buttonThis button shares the profile on twitter.
6.0 Facebook share buttonThis button shares the profile on facebook.
7.0 Linked In share buttonThis button shares the profile on Linked In.
8.0 Google Plus share buttonThis button shares the profile on Google Plus.
1.0 Cover sectionIn 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 ContentIn this section the user can choose the content for the project.
3.0 SettingsIn this section the user can choose the settings for the project.
4.0 PromoteIn this section the user can promote his project.
5.0 Title of the projectHere the user is informed that he needs to choose a name for the project.
6.0 Characters leftIn this area the user is informed about how many characters he has left to write on the title.
7.0 Project title insert text boxHere the user can write the project title.
8.0 Image cover settingsThe user is informed about the image settings required for the cover.
9.0 Upload Image buttonHere the user can upload a new image to his profile.
Content section
Here the user can add content to his project
1.0 Description insert text boxThe user can write a short description about his project.
2.0 Insert Images buttonThe user can choose to insert images on his project.
3.0 Insert videos buttonBy tapping this button the user can choose to add the videos to his project.
4.0 Insert audio buttonThe user can choose to insert audio files on his project.
5.0 Insert text buttonThe user can choose to insert text boxes where he can write different content,
on his project.
1.0
2.0
3.0
4.0
5.0 6.0 7.0 8.0
1.0 2.0 3.0 4.0
5.0 6.0
7.0
9.0
8.0
1.0
2.0 4.0
3.0
5.0
10My Portfolio settingsBehanceDocument: 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
EXPLOREMY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS
cover content settings promote
Creative FieldsChoose the creative fields that best describe this project.
Select Field
Search TagsMake it easier for others to find your work (examples: nike, light, pattern).
Description
Select Type
Insert tags X
Type of
work
cover content settings promote
Type of media
Print Digital Other
Work in this project is for sale
This is for a social cause
Description
Type here X
500 characters left
cover content settings promote
Options
Select TypeVisibility
Allow viewers to post comments on this project
This project has mature content
e.g. nudity, sexual themes, violence/gore
Settings section
In this section the user can choose the settings for his project
1.0 Creative fieldThe user is informed that he has to choose a creative field for his project.
2.0 Select a field - dropdown menuBy 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 boxIn 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 DescriptionIn this dropdown menu the user can choose the type of work he is
presenting: student, professional, ong or freelance.
1.0 Type of mediaType of media. Here the user can choose what type of media he used to create the
project.
2.0 Print checkboxThe user can choose print media.
3.0 Digital checkboxThe user can choose digital media.
4.0 Other checkboxThe user can choose other media.
5.0 Work in this project is for sale - checkboxThe user can choose to say that his work is for sale.
6.0 This is for a social cause checkboxThe user can choose to say that the project was created for a social cause.
7.0 Description insert text boxThe user can write a short description about the project.
1.0 Visibility type dropdown menuHere the user can select who can view his project.
2.0 Comments check boxThe user can choose not to allow other users to comment on his project by
unchecking the box.
3.0 Mature content check boxThe user can choose to check this box if he thinks that his project has mature
content.
1.0
2.0
3.0
4.0
1.0
2.0
3.04.0
5.0
6.0
7.0
1.0
1.0
1.0
11Publish and promoteBehanceDocument: 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
EXPLOREMY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS
cover content settings promote
Select TypeCopyright
Ownership
Add Co-Owners X
Add Credits X
Tools
Add Software X
Add Online App X
cover content settings promote
Add Hardware X
Add Materials X
Publish
cover content settings promote
Promote
Linked In
1.0 Copyright dropdown menuThe user can choose what kind of copyright he wants for his project.
2.0 Co-Owners - insert text boxThe user can choose to add co-owners to his project by writing their name
in this box.
3.0 Credits insert text boxThe user can choose to attribute credits to his project, by writing the mane
of the people in this box.
Tools
4.0 SoftwareIn this area the user can write the software he used to create this project.
5.0 Online appThe user can choose to indicate if any online app was used to create the
project.
6.0 HardwareIn this area the user can write the hardware he used to create this project.
7.0 MaterialsThe user can choose to indicate what materials he user to complete the
project.8.0 Publish buttonBy tapping this button the user publishes the project in his portfolio.
Promote
1.0 Facebook share buttonThis button shares the project on facebook.
2.0 Twitter share buttonThis button shares the project on twitter.
3.0 Linked In share buttonThis button shares the project on Linked In.
2.0
3.0
4.0
5.0
7.0
8.0
6.0
1.0
12Edit Projects/ProfileBehanceDocument: 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
EXPLOREMY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS
Creative Direction X
MY PORTFOLIO > Edit Projects
CacophonyBy: Laura Cortes
Digital Art
CacophonyBy: Laura Cortes
Digital Art
MY PORTFOLIO > Edit Profile
Profile Image
Current
ImageUPLOAD IMAGE
Personal Information
Laura Cortes X
Digital Creative X
Location
Canada British Columbia
Vancouver
Creative Fields
Creative Direction X
Interaction Design X
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 titleTitle of the project.
2.0 Project thumbnailThumbnail image of the project.
3.0 Project authorProject authors name. 4.0 Project fieldProjects creative field. 5.0 Project likesProjects number of likes.6.0 Project viewsProjects number of views.
1.0 Profile ImageThumbnail image of the user profile.
2.0 Upload a new profile image buttonHere the user can upload a new image to his profile.
3.0 Personal information - nameThe user can insert his personal name in this area.
4.0 Personal information - professionThe user can insert his profession in this area.
5.0 Location - countryBy taping in the text box the user will be able to choose from a list of
countries.
6.0 Location - stateBy taping in the text box the user will be able to choose from a list of states.
7.0 Location - cityBy taping in the text box the user will be able to choose from a list of cities.
8.0 Creative field 1The user can insert the first field of expertise.
9.0 Creative field 2The user can insert the second field of expertise.
10.0 Creative field 3The user can insert the third field of expertise.
2.0
1.0
5.0 6.0
4.0
3.0
1.0
2.0
3.0
4.0
5.0
6.0
7.0
8.0
9.0
10.0
13Edit Profile2BehanceDocument: 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
EXPLOREMY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS
User Experience Design X
On the web
Twitter.com/LolaacortesTwitter:
Linkedin.com/pub/laura-LinkedIn
Vimeo.com/lolacortesVimeo
youtube.com/user/lauraYouTube
plus.google.com/u/0/11Google+
pinterest.com/lolacortes/Pinterest
Available for:
Freelance Internship
Part-time
Professional Level
Mid-Level
Experience
2
About
DESCRIPTION GOES HERE X
500 characters left
1.0 Creative field 4The user can insert the third field of expertise.
On the web
2.0 Twitter accountThe user can insert his personal twitter account link.
3.0 Linked In accountThe user can insert his personal Linked In account link.
4.0 Vimeo accountThe user can insert his personal Vimeo account link.
5.0 Youtube accountThe user can insert his personal youtube account link.
6.0 Google Plus accountThe user can insert his personal Google Plus account link.
7.0 Pinterest accountThe 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 FreelanceCheck box.
9.0 InternshipCheck box.
10.0 Part-timeCheck box.
11.0 Full-timeCheck box.
Professional level
12.0 Professional level dropdown menuHere the user can choose his professional level, between the following
options: low-level; mid-level; high-level
13.0 Experience dropdown menuThe user can choose the number of years of experience.
14.0 About insert text boxThe user can write a short description about himself.
1.0
2.0
3.0
4.0
5.0
6.07.0
8.0 9.0
10.0
11.0
12.0
13.0
14.0
Full-time
14Edit Profile3BehanceDocument: Wireframes
Last Edited: 8/12/2012 Author: Laura Cortes
Carrier 12:00 PM
Page Notes
Profile picture
LauraInbox
EXPLOREMY
PORTFOLIOFOLLOW JOBS
Specialtes
DESCRIPTION GOES HERE X
500 characters left
Web References
Link Title X
Url X
Save
1.0
2.0
3.0
4.0
Profile specialties
1.0 Specialties description insert text boxThe user can add a short description of his specialties.
Web References
2.0 Link titleThe user can add a website reference to his profile.
In this box should be introduced the title of the website.
3.0 UrlIn this box should be introduced the url of the website.
4.0 Save buttonThis button save any changes made to the profile..
15Explore PeopleBehanceDocument: 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
EXPLOREMY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS
EXPLORE > PEOPLE
HandMadeFontLocation: Tallin, Estonia
Follow
Fields: Art Direction, Graphic
Design, Typography
HandMadeFontLocation: Tallin, Estonia
Follow
Fields: Art Direction, Graphic
Design, Typography
HandMadeFont
Location: Tallin, Estonia
Follow
Fields: Art Direction, Graphic
Design, Typography
About
Lorem ipsum dolor sit amet,
consectetaur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua.
All Projects
Handmade font.By: HandMadeFont
Art Direction, Graphic
Design, Typography
Handmade font.By: HandMadeFont
Art Direction, Graphic
Design, Typography
1.02.0
3.0
4.0
7.05.0 6.0
1.0 Creative/Agency PhotoThumbnail 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 FieldIn this area the user is informed about the creative/agency fields of expertise.
5.0 Follow ButtonThe 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 numberIn this area the user is informed about the creative/agency number of appreciations.
7.0 Creative/Agency Views numberIn this area the user is informed about the creative/agency number of views.
2.0 Creative/Agency projects titleHere 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 authorName of the project author.
5.0 Project fieldHere are displayed the fields of the project.
6.0 Project Appreciations numberIn this area the user is informed about the project number of appreciations.
7.0 Project Views numberIn this area the user is informed about the project number of views.
1.0
Creative/Agency profile
1.0 AboutIn 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.
2.0
3.0 4.0
5.0
6.07.0
16Explore ProjectsBehanceDocument: 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
EXPLOREMY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS
EXPLORE > PROJECTS
Handmade font.By: HandMadeFont
Art Direction, Graphic
Design, Typography
LondonBy: Talos Buccellati
Photography
Handmade font.
Art Direction, Graphic Design, Typography
1.0 Explore projectsIn 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.
1.0 Project pagePage showcasing a project
2.0 Project authorProject author name,
3.0 Project short descriptionOne sentence describing the project nature and field.
4.0 ImageProject image. To view full screen the user just needs to rotate the phone to
landscape position.
Author: HandMadeFont Agency
Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
1.0
1.0
2.0
4.0
3.0
5.0
6.0
5.0 ImageProject image. To view full screen the user just needs to rotate the phone to
landscape position.
6.0 ImageProject image. To view full screen the user just needs to rotate the phone to
landscape position.
17Explore Projects Page 2BehanceDocument: Wireframes
Last Edited: 8/12/2012 Author: Laura Cortes
Carrier 12:00 PM
Page Notes
Profile picture
LauraInbox
EXPLOREMY
PORTFOLIOFOLLOW JOBS
1.0 Twitter share buttonThis button shares the project on twitter.
2.0 Facebook share buttonThis button shares the project on favebook.
3.0 Linked In share buttonThis button shares the project on Linked In.
4.0 Google Plus share buttonThis button shares the project on Google Plus.
5.0 Appreciate this buttonThis button gives an appreciation to the project.
1.0 2.0 3.0 4.0
5.0
18JobsBehanceDocument: 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
EXPLOREMY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS EXPLORE
MY
PORTFOLIOFOLLOW JOBS
JOBS
Find jobs X
All Fields
Scratchboard illustratorOakland, CA, USA July 18
Senior Interaction DesignerWashington, DC, USA July 18
JOBS
Scratchboard illustrator
Free Range Studios
Oakland, CA, USALocation: July 18
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
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
Add to favourites
All job posts Favourites
1.0 Quick Search insert text boxThe 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 menuThe user can choose a field area for his job search.
3.0 Job posts tabThe user can choose between searching through all the jobs posts by tapping on this tab.
4.0 Favourites tabThe user can choose between searching through his favourites jobs posts by tapping on this tab.
5.0 Job Post titleIn order to Log In the user must inset his email address.
6.0 Add to collectionThe user can choose to add the job post to his collection, directly from the job list.
7.0 Job LocationInforms the user about the job offer location.
8.0 Post Date.Informs the user about the job post date.
5.0 6.0
7.0 8.0
3.0
4.0
1.0
2.0
1.0
2.0
3.0 4.0
5.0
1.0 Job titleJob offer position title.
2.0 Agency nameName of the agency who posted the job offer.
3.0 Job LocationCity, Sate and Country where the agency is located.
4.0 Post dateMonth and day of the job post.
5.0 Job descriptionDescription of the job offer.
6.0 Add to favourites buttonThe user can choose to add the job offer to his favourites list by tapping on
this button.
6.0
mobile-site_v2.vsdTitle PageAbout This DocumentblankCommon Functionalitiesloginloged inInboxInbox messageMy portfolioMy Portfolio settingsPublish and promoteEdit Projects/ProfileEdit Profile2Edit Profile3Explore PeopleExplore ProjectsExplore Projects Page 2JobsPage Name Goes Here