behance mobile strategy - mobile site
Post on 26-Mar-2016
266 views
Embed Size (px)
DESCRIPTION
Behance Mobile Strategy - Mobile SiteTRANSCRIPT
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