Behance Mobile Strategy - Mobile Site

Download Behance Mobile Strategy - Mobile Site

Post on 26-Mar-2016

214 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

Behance Mobile Strategy - Mobile Site

TRANSCRIPT

  • BehanceWIREFRAMES Mobile Site

    VERSION 2.0

    THIS DOCUMENT HAS BEEN PREPARED FOR LIMITED DISTRIBUTION.

    THIS DOCUMENT CONTAINS MATERIALS AND INFORMATION THAT

    Behance AND Laura Cortes CONSIDERS CONFIDENTIAL, PROPRIETARY

    AND SIGNIFICANT FOR PROTECTION OF ITS BUSINESS.

    August 12, 2012

  • Table of Contents

    Revision HistoryVersion 1.0 (July 15, 2012)

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

    - Final version

    This documents the Information Architecture and structure of 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 dolo