Transcript
Page 1: 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

Page 2: Behance Mobile Strategy - Mobile Site

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

Page 3: Behance Mobile Strategy - Mobile Site

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

Page 4: Behance Mobile Strategy - Mobile Site

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)

Page 5: Behance Mobile Strategy - Mobile Site

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

Page 6: Behance Mobile Strategy - Mobile Site

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

Page 7: Behance Mobile Strategy - Mobile Site

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

Page 8: Behance Mobile Strategy - Mobile Site

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)

Page 9: Behance Mobile Strategy - Mobile Site

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

Page 10: Behance Mobile Strategy - Mobile Site

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

Page 11: Behance Mobile Strategy - Mobile Site

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

Facebook

Twitter

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

Page 12: Behance Mobile Strategy - Mobile Site

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

Page 13: Behance Mobile Strategy - Mobile Site

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

Page 14: Behance Mobile Strategy - Mobile Site

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

Page 15: Behance Mobile Strategy - Mobile Site

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

Page 16: Behance Mobile Strategy - Mobile Site

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.

Page 17: Behance Mobile Strategy - Mobile Site

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

Page 18: Behance Mobile Strategy - Mobile Site

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