Click here to load reader

Behance Mobile Strategy - Mobile Site

  • View
    293

  • Download
    0

Embed Size (px)

DESCRIPTION

Behance Mobile Strategy - Mobile Site

Text of Behance Mobile Strategy - Mobile Site

  • BehanceWIREFRAMES Mobile Site

    VERSION 2.0

    THIS DOCUMENT HAS BEEN PREPARED FOR LIMITED DISTRIBUTION.

    THIS DOCUMENT CONTAINS MATERIALS AND INFORMATION THAT

    Behance AND Laura Cortes CONSIDERS CONFIDENTIAL, PROPRIETARY

    AND SIGNIFICANT FOR PROTECTION OF ITS BUSINESS.

    August 12, 2012

  • Table of Contents

    Revision HistoryVersion 1.0 (July 15, 2012)

    - First draft based off of the Mobile strategyVersion 2.0 (August 12, 2012)

    - Final version

    This documents the Information Architecture and structure of design concept.

    Wireframes

    Wireframes illustrate the information architecture and interaction design elements of a site. This document defines the page structure (information), interaction, and navigation. It does not influence the nomenclature, colours, stylesheets, shapes, aesthetics, and other visual design parts of the website concept.

    Wireframes provide a rationale behind the page structure, the interaction and the navigation. This vital information helps the development, design, and UE teams to scope out the project.

    New additions and changes, including functionality and page elements, are documented and reviewed into each wireframe. Wireframe alterations are documented in the Revision History.

    3Information Architecture

    5Login6Loged in7Inbox8Inbox Message9My Portfolio10My Portfolio settings11Publish and Promote12Edit Projects/Profile13Edit Profile 214Edit Profile 315Explore People16Explore Projects

    18Jobs

    4Common functionalities

    17Explore Projects 2

  • 0.0 BEHANCE Mobile site

    1.0 LOG IN

    1.1 Log in 2.1 Compose

    2.3 Sent

    3.1 Create a new project

    4.1 Projects

    1.2 Register 2.2 Inbox

    2.2.1 Mess.

    3.1.1 Cover4.1.1 Project 1

    4.2.1 Creative 1

    5.1.1 Creative 1 6.1.1 Job 1

    6.2.1 Job 15.2.1 Agency 1

    3.1.1 Cover

    3.2.1 Project 12.3.1 Mess.

    2.2.2 Mess.

    3.1.2 Content4.1.2 Project 2

    4.2.2 Creative 2

    5.1.2 Creative 2 6.1.2 Job 2

    6.2.2 Job 25.2.2 Agency 2

    3.1.2 Content

    3.2.2 Project 2

    3.3.3 Project 3

    2.3.2 Mess.

    2.2.3 Mess.

    3.1.3 Settings4.1.3 Project 3

    4.2.3 Creative 3

    5.1.3 Creative 3 6.1.3 Job 3

    6.2.3 Job 35.2.3 Agency 3

    3.1.3 Settings

    3.1.3 Promote

    3.1.3 Promote

    2.3.3 Mess.

    3.2 Edit Projects

    4.2 People

    3.3 Edit Profile

    5.1 Creatives 5.1 All Jobs

    5.2 Agencies 5.2 Favourites

    2.0 INBOX 3.0 MY PORT. 4.0 EXPLORE 5.0 FOLLOW 6.0 JOBS

  • 4Common FunctionalitiesBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM

    Page Notes

    Profile picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS

    Profile picture

    LauraInbox

    1.0 4.0

    2.0

    3.0

    1.0 1.0 1.0 1.0

    Common functionalities

    1.0 Behance Logo Homepage buttonThe Behance logo is present in all pages, always in the same

    place and allows the user to go back to the homepage from

    whenever he is.

    2.0 Inbox buttonWhen the user logs in, he has access to his Inbox through this

    button. By tapping on the button the user is redirected to the

    Inbox page. (page 6)

    3.0 User name profile buttonWhen the user logs in, his profile name appears on the top

    right corner of the screen. This area is also a button that takes

    the user to his profile page and its present in all screens once the user logs in.

    4.0 User profile pictureWhen the user logs in, his profile picture shows up on the top

    right corner of the screen. This image is present in all screens

    if the user is logged on.

    5.0 Explore Quick button This button belongs to a bottom nav that contains three quick

    buttons to the primary navigations of the app.

    This one is takes the user to the Explore section.

    (page 14)

    6.0 My Portfolio Quick button This button belongs to a bottom nav that contains three quick

    buttons to the primary navigations of the app.

    This one is takes the user to the My portfolio section.

    (page 8)

    7.0 Follow Quick button This button belongs to a bottom nav that contains three quick

    buttons to the primary navigations of the app.

    This one is takes the user to the follow section.

    7.0 Jobs Quick button This button belongs to a bottom nav that contains three quick

    buttons to the primary navigations of the app.

    This one is takes the user to the jobs section.

    (page 17)

  • 5loginBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Email X

    Password X

    LOG IN/

    SIGN UP

    Laura Cortes

    "Lorem ipsum

    dolor sit amet,

    consectetur

    #

    #

    EXPLORE

    MY PORTFOLIO

    FOLLOW

    JOBS

    LOGIN

    Q W E R T Y U I O P

    A S D F G H J K L

    Z X C V B N M

    space123 Search

    LOGIN

    Not a member yet?

    Remember me LOG IN

    Or Sign Up with email

    1.0 Creative NameOn the hopmepage theres a image gallery showcasing different creatives. In this area its situated the creative name.

    2.0 Creative short descriptionOne sentence describing the creative.

    3.0 Creative number of appreciationsNumber of creatives appreciations.4.0 Creative number of commentsNumber of comments on the creatives age.5.0 Image galleryImage gallery showcasing the current creative work.

    6.0 Stop buttonBy pressing this button the user can stop the images from changing automatically.

    7.0 Explore buttonBy pressing this button the user will visualize the two options on the explore section.(Page 2)

    8.0 My portfolio buttonThis button takes the user to the My portfolio section. (Page 8)

    9.0 Follow buttonBy pressing this button the user will visualize the two options on the Follow section.(Page 2)

    10.0 Jobs buttonThis button takes the user to the Jobs section. (Page 16)

    1.0 Email Insert text boxIn order to Log In the user must inset his email address.

    1.1 Delete buttonIn order to Log In the user must inset his email address.

    2.0 Password Insert text boxHere the user must insert his password to validate the account.

    3.0 Log In ButtonBy pressing this button the user logs into his account.

    4.0 Remember me check boxBy checking this box the user saves his email and password on the browser.

    5.0 Virtual key padThis key pad belongs to the iPhone Os and pops up every time the user taps

    on a insert text box.

    6.0 Facebook Log sign up buttonIf the user doesnt own an account he can choose to sign up with his Facebook account.

    7.0 Twitter Log sign up buttonIf the user doesnt own an account he can choose to sign up with his Twitter account.8.0 Sign Up with email

    If the user doesnt own an account he can choose to sign up with his Email account.

    3.0

    7.0

    8.0

    1.0

    2.0

    4.0

    9.0

    10.0

    5.06.0

    1.0

    2.0

    4.0 3.0

    5.0

    1.1

    Email X

    Password X

    Remember me LOG IN

    6.0

    7.0

    8.0

  • 6loged inBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    PROJECTS

    EXPLORE

    MY PORTFOLIO

    FOLLOW

    JOBS

    John Smith

    "Lorem ipsum

    dolor sit amet,

    consectetur

    #

    #

    John Smith

    "Lorem ipsum

    dolor sit amet,

    consectetur

    #

    #

    EXPLORE

    PEOPLE

    MY PORTFOLIO

    FOLLOW

    John Smith

    "Lorem ipsum

    dolor sit amet,

    consectetur

    #

    #

    CREATIVES AGENCIES

    FOLLOW

    EXPLORE

    MY PORTFOLIO

    1.0

    2.0 3.0

    1.0

    1.0

    1.0 Arrow downThis arrow indicates the user that the button will display more options.

    2.0 Arrow rightThis arrow indicates the user that the button will redirect him to a new

    page.

    1.0 Button openThe Explore and Follow buttons have two secondary buttons associated.

    Every time the user taps in one of them, the secondary buttons show up and

    the other buttons slide down. The arrow pointing down disappears, if the

    secondary buttons are active, and the other buttons turn grey.

    2.0 Explore People buttonThis button takes the user to the Explore People section. (Page 14)

    3.0 Explore Projects buttonThis button takes the user to the Explore Projects section. (Page 15)

    1.0 Follow Creatives buttonThis button takes the user to the Follow creatives section.

    2.0 Follow Agencies buttonThis button takes the user to the Follow agencies section.

    Note: The Follow section was developed in this set of wireframes.

    The section is identical to the homonymous section in the iPhone App

    wireframes set.

    1.02.0

  • 7InboxBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    COMPOSE

    INBOX

    SENT

    To

    Subject

    Compose message

    Send Save

    INBOX COMPOSE

    COMPOSE INBOX SENT

    INBOX

    Lorem ipsum dolor sit amet, John Smith July 18

    Lorem ipsum dolor sit amet, John Smith July 18

    Lorem ipsum dolor sit amet, John Smith July 18

    Lorem ipsum dolor sit amet, John Smith July 18

    Lorem ipsum dolor sit amet, John Smith July 18

    Archive Delete

    1.0 Inbox TitleTitle of the page. In this page the user has access to his Behance

    message account.

    This arrow indicates the user that the button will display more options.

    2.0 Compose buttonBy tapping this button the user is redirected to the next screen where he

    can compose a message.

    3.0 Inbox buttonThrough this button the user has access to his inbox, where he can

    visualize received messages. (page 7)

    4.0 Sent buttonIf the user chooses to tap this button he will be redirected to the sent

    messages. The wireframes for this section are identical to the inbox

    section.

    1.0 Send buttonThe user can choose to send the email by tapping this button.

    2.0 Save buttonThe user can choose to save the email by tapping this button.

    3.0 To insert text boxThe user can add contacts in this area. By tapping on the box a dropdown menu will show up

    with the user contacts.

    4.0 Subject insert text boxHere the user can write the subject of the email.

    5.0 Compose message insert text boxHere the user can write the email.

    6.0 Compose - quick buttonOn the bottom there are three quick buttons. Whenever the user is in a respective area the button

    is inactive and theres an arrow pointing up informing the user that he is situated in that specific section.

    7.0 Inbox quick buttonThis button takes the user directly to the inbox section.

    8.0 Sent quick buttonThis button takes the user directly to the sent section.

    1.0 Email subjectSubject of the email.

    2.0 FromName of the person who sent the email.

    3.0 Add to favouritesBy tapping this button the user can choose to add the email to his favourites.

    4.0 DateDate of when the email was received.

    5.0 Check boxThe user can choose to check this box to apply the following actions:

    6.0 Archive buttonThe user can choose to archive the email.

    7.0 Delete buttonThe user can choose to delete the email.

    2.0

    3.0

    4.0

    1.0

    1.03.0

    4.05.0

    6.0 7.0 8.0

    2.0 1.0

    5.0

    2.0

    3.0

    4.0

    6.0 7.0

  • 8Inbox messageBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM

    Page Notes

    Profile picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS

    Forward

    INBOX

    Reply Reply All

    John SmithFrom:

    Archive Delete

    Lorem ipsum dolor sit amet, consectetaur

    adipisicing elit, sed do eiusmod tempor

    incididunt ut labore et dolore magna aliqua. Ut

    enim ad minimveniam, quis nostrud

    exercitation ullamco laboris nisi ut aliquip ex

    ea commodo consequat. Duis aute irure dolor

    in reprehenderit in voluptate velitesse cillum

    dolore eu fugiat nulla pariatur. Excepteur sint

    occaecat cupidatat non proident, sunt in culpa

    qui officia deserunt mollit anim id estlaborum

    Et harumd und

    1.0

    2.0

    3.0

    4.0 5.0

    6.0

    7.0

    8.0 9.0 11.0

    10.0

    Inbox Message

    1.0 Inbox TitleTitle od the page.

    2.0 Add to favourites buttonBy taping this button the user can add the email to his

    favourites. If the button is selected it changes colour.

    3.0 Reply buttonThe user can choose to reply the email by taping this button.

    4.0 Reply all buttonThe user can choose to reply all the senders.

    5.0 Forward buttonThe user can choose to forward the email to a new contact.

    6.0 FromIn this area the user can see the name of the person who sent

    him an email.

    7.0 Email textText body of the email.

    8.0 Archive buttonBy tapping this button the user can choose to archive the

    email.

    9.0 Delete buttonBy tapping this button the user can choose to delete the email.

    10.0 Next email buttonBy tapping in the text box the user can visualize the next

    email. (chronological order)

    11.0 Previous email buttonBy tapping in the text box the user can visualize the previous

    email. (chronological order)

  • 9My portfolioBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS

    MY PORTFOLIO

    CREATE A NEW PROJECT

    EDIT PROJECTS

    EDIT PROFILE

    cover content settings promote

    1. Project Title 55 characters left

    Project title X

    2. Cover Images

    (Images must be at least 202 x 158px, no larger than 5MB, and RGB

    UPLOAD IMAGE

    cover content settings promote

    1. DESCRIPTION GOES HERE X

    INSERT

    Images Videos Audio Text

    1.0 Inbox TitleTitle of the page. In this page the user has access to his portfolio account.

    2.0 Create a new project buttonBy tapping this button the user is redirected to the next screen where he can create a new

    project.

    3.0 Edit projects buttonThrough this button the user has access to his profile projects, where he can choose to edit

    them. (page 11)

    4.0 Edit profile buttonThrough this button the user has access to his profile settings, where he can choose to edit

    them. (page 11)

    5.0 Twitter share buttonThis button shares the profile on twitter.

    6.0 Facebook share buttonThis button shares the profile on facebook.

    7.0 Linked In share buttonThis button shares the profile on Linked In.

    8.0 Google Plus share buttonThis button shares the profile on Google Plus.

    1.0 Cover sectionIn this page the user can create a new project. The process is divided in four sections and this one is

    the cover. Here the user can choose an image for the project cover as well as the title of the project.

    2.0 ContentIn this section the user can choose the content for the project.

    3.0 SettingsIn this section the user can choose the settings for the project.

    4.0 PromoteIn this section the user can promote his project.

    5.0 Title of the projectHere the user is informed that he needs to choose a name for the project.

    6.0 Characters leftIn this area the user is informed about how many characters he has left to write on the title.

    7.0 Project title insert text boxHere the user can write the project title.

    8.0 Image cover settingsThe user is informed about the image settings required for the cover.

    9.0 Upload Image buttonHere the user can upload a new image to his profile.

    Content section

    Here the user can add content to his project

    1.0 Description insert text boxThe user can write a short description about his project.

    2.0 Insert Images buttonThe user can choose to insert images on his project.

    3.0 Insert videos buttonBy tapping this button the user can choose to add the videos to his project.

    4.0 Insert audio buttonThe user can choose to insert audio files on his project.

    5.0 Insert text buttonThe user can choose to insert text boxes where he can write different content,

    on his project.

    1.0

    2.0

    3.0

    4.0

    5.0 6.0 7.0 8.0

    1.0 2.0 3.0 4.0

    5.0 6.0

    7.0

    9.0

    8.0

    1.0

    2.0 4.0

    3.0

    5.0

  • 10My Portfolio settingsBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS

    cover content settings promote

    Creative FieldsChoose the creative fields that best describe this project.

    Select Field

    Search TagsMake it easier for others to find your work (examples: nike, light, pattern).

    Description

    Select Type

    Insert tags X

    Type of

    work

    cover content settings promote

    Type of media

    Print Digital Other

    Work in this project is for sale

    This is for a social cause

    Description

    Type here X

    500 characters left

    cover content settings promote

    Options

    Select TypeVisibility

    Allow viewers to post comments on this project

    This project has mature content

    e.g. nudity, sexual themes, violence/gore

    Settings section

    In this section the user can choose the settings for his project

    1.0 Creative fieldThe user is informed that he has to choose a creative field for his project.

    2.0 Select a field - dropdown menuBy tapping this button the user can visualize a list of different fields, and

    he can choose one that will define his project.

    3.0 Search tags insert text boxIn this box the user can write different tags that will serve to identify his

    project and display it in the search results. The tags must be separated by

    commas.

    4.0 DescriptionIn this dropdown menu the user can choose the type of work he is

    presenting: student, professional, ong or freelance.

    1.0 Type of mediaType of media. Here the user can choose what type of media he used to create the

    project.

    2.0 Print checkboxThe user can choose print media.

    3.0 Digital checkboxThe user can choose digital media.

    4.0 Other checkboxThe user can choose other media.

    5.0 Work in this project is for sale - checkboxThe user can choose to say that his work is for sale.

    6.0 This is for a social cause checkboxThe user can choose to say that the project was created for a social cause.

    7.0 Description insert text boxThe user can write a short description about the project.

    1.0 Visibility type dropdown menuHere the user can select who can view his project.

    2.0 Comments check boxThe user can choose not to allow other users to comment on his project by

    unchecking the box.

    3.0 Mature content check boxThe user can choose to check this box if he thinks that his project has mature

    content.

    1.0

    2.0

    3.0

    4.0

    1.0

    2.0

    3.04.0

    5.0

    6.0

    7.0

    1.0

    1.0

    1.0

  • 11Publish and promoteBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS

    cover content settings promote

    Select TypeCopyright

    Ownership

    Add Co-Owners X

    Add Credits X

    Tools

    Add Software X

    Add Online App X

    cover content settings promote

    Add Hardware X

    Add Materials X

    Publish

    cover content settings promote

    Promote

    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

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS

    Creative Direction X

    MY PORTFOLIO > Edit Projects

    CacophonyBy: Laura Cortes

    Digital Art

    CacophonyBy: Laura Cortes

    Digital Art

    MY PORTFOLIO > Edit Profile

    Profile Image

    Current

    ImageUPLOAD IMAGE

    Personal Information

    Laura Cortes X

    Digital Creative X

    Location

    Canada British Columbia

    Vancouver

    Creative Fields

    Creative Direction X

    Interaction Design X

    Edit projects

    In this section the user can choose to edit existing projects. The screens

    for this will be identical to the ones on create a new project.

    1.0 Project titleTitle of the project.

    2.0 Project thumbnailThumbnail image of the project.

    3.0 Project authorProject authors name. 4.0 Project fieldProjects creative field. 5.0 Project likesProjects number of likes.6.0 Project viewsProjects number of views.

    1.0 Profile ImageThumbnail image of the user profile.

    2.0 Upload a new profile image buttonHere the user can upload a new image to his profile.

    3.0 Personal information - nameThe user can insert his personal name in this area.

    4.0 Personal information - professionThe user can insert his profession in this area.

    5.0 Location - countryBy taping in the text box the user will be able to choose from a list of

    countries.

    6.0 Location - stateBy taping in the text box the user will be able to choose from a list of states.

    7.0 Location - cityBy taping in the text box the user will be able to choose from a list of cities.

    8.0 Creative field 1The user can insert the first field of expertise.

    9.0 Creative field 2The user can insert the second field of expertise.

    10.0 Creative field 3The user can insert the third field of expertise.

    2.0

    1.0

    5.0 6.0

    4.0

    3.0

    1.0

    2.0

    3.0

    4.0

    5.0

    6.0

    7.0

    8.0

    9.0

    10.0

  • 13Edit Profile2BehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS

    User Experience Design X

    On the web

    Twitter.com/LolaacortesTwitter:

    Linkedin.com/pub/laura-LinkedIn

    Vimeo.com/lolacortesVimeo

    youtube.com/user/lauraYouTube

    plus.google.com/u/0/11Google+

    pinterest.com/lolacortes/Pinterest

    Available for:

    Freelance Internship

    Part-time

    Professional Level

    Mid-Level

    Experience

    2

    About

    DESCRIPTION GOES HERE X

    500 characters left

    1.0 Creative field 4The user can insert the third field of expertise.

    On the web

    2.0 Twitter accountThe user can insert his personal twitter account link.

    3.0 Linked In accountThe user can insert his personal Linked In account link.

    4.0 Vimeo accountThe user can insert his personal Vimeo account link.

    5.0 Youtube accountThe user can insert his personal youtube account link.

    6.0 Google Plus accountThe user can insert his personal Google Plus account link.

    7.0 Pinterest accountThe user can insert his personal Pinterest account link.

    Available for:

    In this area the user can choose what kind of work he is available for.

    8.0 FreelanceCheck box.

    9.0 InternshipCheck box.

    10.0 Part-timeCheck box.

    11.0 Full-timeCheck box.

    Professional level

    12.0 Professional level dropdown menuHere the user can choose his professional level, between the following

    options: low-level; mid-level; high-level

    13.0 Experience dropdown menuThe user can choose the number of years of experience.

    14.0 About insert text boxThe user can write a short description about himself.

    1.0

    2.0

    3.0

    4.0

    5.0

    6.07.0

    8.0 9.0

    10.0

    11.0

    12.0

    13.0

    14.0

    Full-time

  • 14Edit Profile3BehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM

    Page Notes

    Profile picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS

    Specialtes

    DESCRIPTION GOES HERE X

    500 characters left

    Web References

    Link Title X

    Url X

    Save

    1.0

    2.0

    3.0

    4.0

    Profile specialties

    1.0 Specialties description insert text boxThe user can add a short description of his specialties.

    Web References

    2.0 Link titleThe user can add a website reference to his profile.

    In this box should be introduced the title of the website.

    3.0 UrlIn this box should be introduced the url of the website.

    4.0 Save buttonThis button save any changes made to the profile..

  • 15Explore PeopleBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS

    EXPLORE > PEOPLE

    HandMadeFontLocation: Tallin, Estonia

    Follow

    Fields: Art Direction, Graphic

    Design, Typography

    HandMadeFontLocation: Tallin, Estonia

    Follow

    Fields: Art Direction, Graphic

    Design, Typography

    HandMadeFont

    Location: Tallin, Estonia

    Follow

    Fields: Art Direction, Graphic

    Design, Typography

    About

    Lorem ipsum dolor sit amet,

    consectetaur adipisicing elit, sed do

    eiusmod tempor incididunt ut labore et

    dolore magna aliqua.

    All Projects

    Handmade font.By: HandMadeFont

    Art Direction, Graphic

    Design, Typography

    Handmade font.By: HandMadeFont

    Art Direction, Graphic

    Design, Typography

    1.02.0

    3.0

    4.0

    7.05.0 6.0

    1.0 Creative/Agency PhotoThumbnail image of the creative/agency.

    2.0 Creative/Agency Name In this area the user is informed about the creative/agency name.

    3.0 Creative/Agency Location In this area the user is informed about the creative/agency location.

    4.0 Creative/Agency FieldIn this area the user is informed about the creative/agency fields of expertise.

    5.0 Follow ButtonThe user can choose to follow creatives and agencies.

    By pressing the button the user is adding creatives/agencies to his following list.

    6.0 Creative/Agency Appreciations numberIn this area the user is informed about the creative/agency number of appreciations.

    7.0 Creative/Agency Views numberIn this area the user is informed about the creative/agency number of views.

    2.0 Creative/Agency projects titleHere the user can visualize the different projects from a creative or an

    agency.

    3.0 Project Thumbnail Thumbnail image of the project.

    4.0 Project authorName of the project author.

    5.0 Project fieldHere are displayed the fields of the project.

    6.0 Project Appreciations numberIn this area the user is informed about the project number of appreciations.

    7.0 Project Views numberIn this area the user is informed about the project number of views.

    1.0

    Creative/Agency profile

    1.0 AboutIn this page the user can see the creative page and get detailed information

    about his/her work and field of expertise.

    By scrolling down the user can visualize examples of the creative work.

    2.0

    3.0 4.0

    5.0

    6.07.0

  • 16Explore ProjectsBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS

    EXPLORE > PROJECTS

    Handmade font.By: HandMadeFont

    Art Direction, Graphic

    Design, Typography

    LondonBy: Talos Buccellati

    Photography

    Handmade font.

    Art Direction, Graphic Design, Typography

    1.0 Explore projectsIn this page the user has access to a list of different projects from creatives or

    agencies. The user can access the different projects pages by tapping on the

    list items.

    1.0 Project pagePage showcasing a project

    2.0 Project authorProject author name,

    3.0 Project short descriptionOne sentence describing the project nature and field.

    4.0 ImageProject image. To view full screen the user just needs to rotate the phone to

    landscape position.

    Author: HandMadeFont Agency

    Lorem ipsum dolor sit amet, consectetur

    adipiscing elit.

    1.0

    1.0

    2.0

    4.0

    3.0

    5.0

    6.0

    5.0 ImageProject image. To view full screen the user just needs to rotate the phone to

    landscape position.

    6.0 ImageProject image. To view full screen the user just needs to rotate the phone to

    landscape position.

  • 17Explore Projects Page 2BehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM

    Page Notes

    Profile picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS

    1.0 Twitter share buttonThis button shares the project on twitter.

    2.0 Facebook share buttonThis button shares the project on favebook.

    3.0 Linked In share buttonThis button shares the project on Linked In.

    4.0 Google Plus share buttonThis button shares the project on Google Plus.

    5.0 Appreciate this buttonThis button gives an appreciation to the project.

    1.0 2.0 3.0 4.0

    5.0

  • 18JobsBehanceDocument: Wireframes

    Last Edited: 8/12/2012 Author: Laura Cortes

    Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

    Screen Notes Screen Notes Screen Notes

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    Profile

    picture

    LauraInbox

    EXPLOREMY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS EXPLORE

    MY

    PORTFOLIOFOLLOW JOBS

    JOBS

    Find jobs X

    All Fields

    Scratchboard illustratorOakland, CA, USA July 18

    Senior Interaction DesignerWashington, DC, USA July 18

    JOBS

    Scratchboard illustrator

    Free Range Studios

    Oakland, CA, USALocation: July 18

    Lorem ipsum dolor sit amet,

    consectetaur adipisicing elit, sed do

    eiusmod tempor incididunt ut labore et

    dolore magna aliqua. Ut enim ad

    minimveniam, quis nostrud exercitation

    ullamco laboris nisi ut aliquip ex ea

    commodo consequat. Duis aute irure

    dolor in reprehenderit in voluptate

    velitesse cillum dolore eu fugiat nulla

    pariatur. Excepteur sint occaecat

    Lorem ipsum dolor sit amet,

    consectetaur adipisicing elit, sed do

    eiusmod tempor incididunt ut labore et

    dolore magna aliqua. Ut enim ad

    minimveniam, quis nostrud exercitation

    ullamco laboris nisi ut aliquip ex ea

    commodo consequat. Duis aute irure

    dolor in reprehenderit in voluptate

    velitesse cillum dolore eu fugiat nulla

    pariatur. Excepteur sint occaecat

    Add to favourites

    All job posts Favourites

    1.0 Quick Search insert text boxThe quick search tool allows the user to search by simply inserting a key word. The results

    displayed include all the sections: jobs, creatives and agencies.

    2.0 Field Area dropdown menuThe user can choose a field area for his job search.

    3.0 Job posts tabThe user can choose between searching through all the jobs posts by tapping on this tab.

    4.0 Favourites tabThe user can choose between searching through his favourites jobs posts by tapping on this tab.

    5.0 Job Post titleIn order to Log In the user must inset his email address.

    6.0 Add to collectionThe user can choose to add the job post to his collection, directly from the job list.

    7.0 Job LocationInforms the user about the job offer location.

    8.0 Post Date.Informs the user about the job post date.

    5.0 6.0

    7.0 8.0

    3.0

    4.0

    1.0

    2.0

    1.0

    2.0

    3.0 4.0

    5.0

    1.0 Job titleJob offer position title.

    2.0 Agency nameName of the agency who posted the job offer.

    3.0 Job LocationCity, Sate and Country where the agency is located.

    4.0 Post dateMonth and day of the job post.

    5.0 Job descriptionDescription of the job offer.

    6.0 Add to favourites buttonThe user can choose to add the job offer to his favourites list by tapping on

    this button.

    6.0

    mobile-site_v2.vsdTitle PageAbout This DocumentblankCommon Functionalitiesloginloged inInboxInbox messageMy portfolioMy Portfolio settingsPublish and promoteEdit Projects/ProfileEdit Profile2Edit Profile3Explore PeopleExplore ProjectsExplore Projects Page 2JobsPage Name Goes Here