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


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


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


This one is takes the user to the jobs section.

(page 17)

5loginBehanceDocument: Wireframes


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




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




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





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


Carrier 12:00 PM

Page Notes

Profile picture

LauraInbox

EXPLOREMY


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




Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

EXPLOREMY

PORTFOLIOFOLLOW JOBS EXPLORE

MY


MY


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


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




Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

EXPLOREMY


MY


MY



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


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


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




Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

EXPLOREMY


MY


MY



Select TypeCopyright

Ownership

Add Co-Owners X

Add Credits X

Tools

Add Software X

Add Online App X


Add Hardware X

Add Materials X

Publish


Promote

Facebook

Twitter

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




Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

EXPLOREMY


MY


MY


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




Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

EXPLOREMY


MY


MY


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


Carrier 12:00 PM

Page Notes

Profile picture

LauraInbox

EXPLOREMY


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




Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

EXPLOREMY


MY


MY


EXPLORE > PEOPLE

HandMadeFontLocation: Tallin, Estonia

Follow

Fields: Art Direction, Graphic

Design, Typography

HandMadeFontLocation: Tallin, Estonia

Follow


Design, Typography

HandMadeFont

Location: Tallin, Estonia

Follow


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



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




Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

EXPLOREMY


MY


MY


EXPLORE > PROJECTS



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


landscape position.


landscape position.

17Explore Projects Page 2BehanceDocument: Wireframes


Carrier 12:00 PM

Page Notes

Profile picture

LauraInbox

EXPLOREMY


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




Profile

picture

LauraInbox

Profile

picture

LauraInbox

Profile

picture

LauraInbox

EXPLOREMY


MY


MY


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




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




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