behance mobile strategy - mobile site
Post on 26-Mar-2016
361 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 <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
………………………………………………5Login
………………………………………………6Loged in
………………………………………………7Inbox
………………………………………………8Inbox Message
………………………………………………9My Portfolio
……………………………………………10My Portfolio settings
……………………………………………11Publish and Promote
……………………………………………12Edit Projects/Profile
……………………………………………13Edit Profile 2
……………………………………………14Edit Profile 3
……………………………………………15Explore People
……………………………………………16Explore 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 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.
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)
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 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)
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.
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.
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 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.
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)
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.
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 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.
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.
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.
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 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)
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 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.
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.
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.
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 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.
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.
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.
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 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.
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.
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.
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 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.
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.
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.
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 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.
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.
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.
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 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.
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..
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 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.
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.
1.0
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.
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 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.
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.
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 – 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.
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 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.
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
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 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.
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 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.
6.0 – Add to favourites button
The user can choose to add the job offer to his favourites list by tapping on
this button.
6.0
top related