MS_Photography_UX Documentation Standards

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