12.12.2016 Views

MS_Photography_UX Documentation Standards

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

MS Photography

UX Documentation Standards

Photography

Document v1.3


Table of Contents

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Change Log Pages 2 - 3

Sketches 4

Sketches - Low Fidelity - Desktop - Homepage 5

Sketches - Low Fidelity - Mobile - Homepage 6

Sketches - Low Fidelity - Desktop - About (page) 7

Sketches - Low Fidelity - Mobile - About (page) 8

Sketches - Medium Fidelity - Desktop - Homepage 9

Sketches - Medium Fidelity - Mobile- About (page) 10

Sketches - Medium Fidelity - Desktop - Pricing

and Packages 11

Sketches - High Fidelity - Desktop - Homepage 12

Sketches - High Fidelity - Desktop - About (page) 13

Sketches - High Fidelity - Desktop - Pricing

and Packages 14

Sketches - High Fidelity - Desktop - Subscribe

(page) 15

Sketches - High Fidelity - Desktop - Login

(page) 16

Templates 17

Browser Template with Annotations 18

Desktop Homepage Template with Annotations 19

Mobile Template with Annotations 20

Mobile Homepage Template with Annotations 21

Photography

Page i


Table of Contents

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Sitemap Page 22

Sitemap: Overview 23

Sitemap: Pricing 24

Pattern Library 25

Main and Portfolio Carouse with Annotations 26

FAQs, Social Media, Pricing with Annotations 27

Primary Navigation, Desktop and Mobile

with Annotations 28

Thank you 29

Photography

Page i


Change Log

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Version Date Author(s) Notes

1.0 11-1-2016 Michael Serna Templates added.

1.0 11-1-2016 Michael Serna

Added detail pages.

1.0 11-1-2016 Michael Serna

Mobile template added.

1.0 11-1-2016 Michael Serna

Sitemap added.

1.0 11-1-2016 Michael Serna

Design pattern added.

1.1 11-7-2016 Michael Serna

Browser - Homepage added.

1.1 11-7-2016 Michael Serna

Detail page - Homepage added.

1.1 11-7-2016 Michael Serna

Mobile - Homepage added.

1.2 11-14-2016 Michael Serna

Images with grey X boxes

emphasized.

1.2 11-14-2016

Michael Serna

About me wireframe page

added.

1.2 11-14-2016 Pricing wireframe page

Michael Serna

added.

1.2 11-14-2016 Michael Serna

Login wireframe page added.

1.3 11-28-2016 Michael Serna (Low fidelity) Rough sketches

added.

Photography

Page 2


Change Log

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Version Date Author(s) Notes

1.3 11-30-2016 Michael Serna

(Medium fidelity) sketches

added.

1.3 11-30-2016

Michael Serna

(Highfidelity) sketches

added.

1.3 12-1-2016 Michael Serna

Pattern library inserted.

1.3 12-2-2016

1.3 12-5-2016

Michael Serna

Michael Serna

Annotations to pattern library

inserted.

Desktop and mobile

templates revised w/ grid.

Photography

Page 3


Sketches

UX Documentation Standards

Photography


Sketches - Low Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - Homepage

Photography

Page 5


Sketches - Low Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Mobile - Homepage

Photography

Page 6


Sketches - Low Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - About (page)

Photography

Page 7


Sketches - Low Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Mobile - About (page)

Photography

Page 8


Sketches - Medium Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - Homepage

Photography

Page 9


Sketches - Medium Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - About (page)

Photography

Page 10


Sketches - Medium Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - Pricing and Packages

Photography

Page 11


Sketches - High Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - Homepage

About Me Pricing Flickr Subscribe Contact

Login

Portrait Photographer

About Me

Get to know me

562-552-2526

Get in Touch

Can't get a hold me by phone? There's also e-mail.

Contact me for any questions or schedule a shoot.

Name

e-mail

Long Beach, CA

Message

Submit

MS Photography

Photography Page 12


Sketches - High Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - About (page)

About Me Pricing Flickr Subscribe Contact

Login

About Me

Hi I’m Michael. I love photography. My goal in life is to use my

voice, ideas and creativity to inspire and help others. I love

photographing the moments. With my design background in

web and graphics, photography to me is like an art. I appreciate

the emotions of the human body as well as creation.

Clean or messy, a person or environment can surely bring out

it’s personality. Check out some of my work and I hope you’ll

like it.

562-552-2526

Get in Touch

Can't get a hold me by phone? There's also e-mail.

Contact me for any questions or schedule a shoot.

Name

e-mail

Long Beach, CA

Message

Submit

MS Photography

Photography Page 13


Sketches - High Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - Pricing and Packaging

About Me Pricing Flickr Subscribe Contact

Login

Pricing

Portrait Engagement Wedding

$80/hr $120/hr $1,200

Lorem ipsum dolor sit

amet, consectetur

adipiscing elit, sed do

eiusmod tempor

incididunt ut labore et

Lorem ipsum dolor sit

amet, consectetur

adipiscing elit, sed do

eiusmod tempor

incididunt ut labore et

Lorem ipsum dolor sit

amet, consectetur

adipiscing elit, sed do

eiusmod tempor

incididunt ut labore et

Buy Buy Buy

562-552-2526

Get in Touch

Can't get a hold me by phone? There's also e-mail.

Contact me for any questions or schedule a shoot.

Name

e-mail

Long Beach, CA

Message

Submit

MS Photography

Photography Page 14


Sketches - High Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - Subscribe (page)

About Me Pricing Flickr Subscribe Contact

Login

Subscribe

placement page

562-552-2526

Get in Touch

Can't get a hold me by phone? There's also e-mail.

Contact me for any questions or schedule a shoot.

Name

e-mail

Long Beach, CA

Message

Submit

MS Photography

Photography Page 15


Sketches - High Fidelity

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Desktop - Login (page)

About Me Pricing Flickr Subscribe Contact

Login

Portrait Photographer

Account Login

e-mail

password

Submit

About Me

Get to know me

562-552-2526

Get in Touch

Can't get a hold me by phone? There's also e-mail.

Contact me for any questions or schedule a shoot.

Name

e-mail

Long Beach, CA

Message

Submit

MS Photography

Photography Page 16


Templates

UX Documentation Standards

Photography


Browser Template

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Annotations

11. NAVIGATION

22. HEADER

1 NAVIGATION

Navigation will consists of company

logo to the left that links and/or

directs the user to the homepage.

Navigation will consists of a menu

that will navigate the user to other

pages of the site.

2 HEADER

The header will typically contain

the title of the page and sometimes

a subheader.

33. PRIMARY CONTENT

3 PRIMARY CONTENT

The primary content will typically

contain the body of the page.

4 PORTFOLIO

44. PORTFOLIO

The portfolio on this section will behave

as a carousel that when clicked, opens

up a new page that provide a gallery

of work.

55.

FOOTER

5 FOOTER

The footer will contain a form to contact

the company as well as social media

links such as Facebook, Twitter,

YouTube, etc.

Photography

Page 18


Browser Homepage

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Desktop - Homepage

11. NAVIGATION

Photography

Annotations

1 NAVIGATION

Navigation will consists of company

logo to the left that links and/or

directs the user to the homepage.

Navigation will consists of a menu

that will navigate the user to other

pages of the site.

22. SLIDER

2 SLIDER

The slider will rotate images and

text marketing the services

of what the what the website

offers.

3 PRIMARY CONTENT

The primary content will typically

contain the body of the page.

33. PRIMARY CONTENT

4 PORTFOLIO

44. PORTFOLIO

The portfolio on this section will behave

as a carousel that when clicked, opens

up a new page that provide a gallery

of work.

55.

FOOTER

5 FOOTER

The footer will contain a form to contact

the company as well as social media

links such as Facebook, Twitter,

YouTube, etc.

Photography

Page 19


Mobile Template

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Annotations

1

Carrier 12:55 PM 79%

11. NAVIGATION

1 NAVIGATION

Navigation will consists of company

logo to the left that links and/or

directs the user to the homepage.

Navigation will consists of a menu

that will navigate the user to other

pages of the site.

2 HEADER

22. HEADER

The header will typically contain

the title of the page and sometimes

a subheader.

3 PRIMARY CONTENT

33. PRIMARY CONTENT

The primary content will typically

contain the body of the page.

44. PORTFOLIO

4 PORTFOLIO

55.

FOOTER

The portfolio on this section will behave

as a carousel that when clicked, opens

up a new page that provide a gallery

of work.

5 FOOTER

The footer will contain a form to contact

the company as well as social media

links such as Facebook, Twitter,

YouTube, etc.

Photography

Page 20


Mobile Template

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Mobile - Homepage

Carrier 12:55 PM 79%

11. NAVIGATION

Photography

Annotations

1 NAVIGATION

Navigation will consists of company

logo to the left that links and/or

directs the user to the homepage.

Navigation will consists of a menu

that will navigate the user to other

pages of the site.

2 CONTENT SLIDER

12.

CONTENT SLIDER

The slider will rotate images and

text marketing the services

of what the what the website

offers. Th user will have the

abilty to tap, hold, and slide

between different content.

3 ABOUT

3. ABOUT

The about section will provide a

brief synopsis of what the

service is about.

4. PORTFOLIO

4 PORTFOLIO

5. FOOTER

The portfolio on this section will behave

as a carousel that when clicked, opens

up a new page that provide a gallery

of work.

5 FOOTER

The footer will contain a form to contact

the company as well as social media

links such as Facebook, Twitter,

YouTube, etc.

Photography Page 21


Sitemap

UX Documentation Standards

Photography


Sitemap: Overview

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Persistent Utilities

0.0

Home

About Pricing Flickr Subsrcibe Contact Log-In Search

1.0

About

2.0

Pricing

3.0

Flickr

4.0

Subscribe

5.0

Contact

6.0

Login

Footer

Social

Contact

Social Media:

[Facebook, Linkedin,

Twitter, Google+]

Name:

E-mail:

Message:

Submit

Photography

Page 23


Sitemap: Pricing

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

2.0

Pricing

2.1

Package A

2.2

Package B

2.3

Package C

Transaction

3.0

Thank You

Photography

Page 24


Pattern Library

UX Documentation Standards

Photography


Pattern Library

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Homepage - Top - MAIN Carousel

Photography

Annotations

1.0

Item Title 1

Subtitle 1

1

1.0 GENERAL NOTES

Carousel will rotate different slides

displaying different types of

services being offered.

Flyout content including text and

featured content is editorally

controlled and defined.

4

1.1

3

1

2

Carousel component will resize

based on resolution of display.

User is able to swipe through

with finger or stylus on a touch

screen device.

Main carousel should be editble by

content manager. CMS integration

development support.

1.1 DOTS ICONS

Navigation upon click of the mouse.

Will result to rotating to the slide of

the assigned dot.

2.0

Homepage - Lower - Portfolio Carousel

1 2 3 4

Item Title 1 Item Title 2 Item Title 3 Item Title 4

2.1

2.0 GENERAL NOTES

User clicks or taps on thumbnail

carousel to select type of portfolio

gallery. Navigates to another web

page.

2.1 ARROW ICON

a-2

a-1 a+1

a

a+2

DESKTOP: User clicks on left or right

arrow with mouse to navigate

between

different portfolio galleries.

MOBILE: User can swipe through

the carousel with the their finger

to navigate between different

portfolio galleries.

Photography Page 26


Pattern Library

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

FAQs page- Accordian

Annotations

3.0

3.0 GENERAL NOTES

1

The accordian menu will work as

a navigation between different

questions and answers.

3.1

2

+

3.2

Chevron 1 indicates expansion

of the chevron displaying entire

question and answer to the user.

3

+

3.1 GREY SHADE

4

5

+

+

Chevrons 2 - 5 indicate that the

question is revelaved but the

answer is not displayed until

the user clicks either the grey

shaded area.

3.2 PLUS ICON

Social Media Icons

Chevrons 2 - 5 contain plus icons

that indicate the user that they

can reveal the answer to the

question they want answered.

Same functionality as 3.1.

4.0

4.0 GENERAL NOTES

The dark circles located in the

footer indicate social media icons.

Whether icons are naturally

squared or another form of shape,

they are to be designed in a way

of a circle.

Pricing Packages

5.0

1 2 3

5.0 GENERAL NOTES

This static menu represents the

types of packages the service will

provide. User will identify what

product they desire and upon

click, should lead to a payment

option page.

Photography Page 27


Pattern Library

UX DOCUMENTATION STANDARDS / MS PHOTOGRAPHY

Photography

Primary Navigation - Desktop

Annotations

6.0

Photography About Me Pricing Flickr Subscribe Login Contact

FAQs

6.1

6.0 GENERAL NOTES

Top navigation for deskop generally

contains company logo and lays out

the menu for the user with

search option.

6.1 DROP DOWN

When user rolls their cursor

over a menu item, a scrolling effect

will fade down and display a

sub-menu corresponding to

its top-level menu item.

Primary Navigation - Mobile

Primary Navigation - Home - Mobile - Closed State

7.0 Photography

Primary Navigation - Home - Mobile - Open State

Photography

7.1

7.0 GENERAL NOTES

Navigation will usually display

company logo, search option

and menu (indicated in 7.1).

7.1 MENU

About Me

Pricing

Flickr

Subscribe

7.2

When user taps on the 3 lines a drop

down will appear indicating its main

menu items that the usercan navigate

with as indicated in 7.2.

7.2 DROP DOWN

When user taps their finger over the

three blue lines, a scrolling effect will

occur that will display a menu of links.

Photography Page 28


Thank You.

UX Documentation Standards

Photography

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!