wp wireframes

13
WellesleyPartners.com Wireframes 2.0 Thursday, July 14, 2011

Upload: michael-salafia

Post on 23-Mar-2016

260 views

Category:

Documents


0 download

DESCRIPTION

WP wireframes

TRANSCRIPT

Page 1: WP Wireframes

WellesleyPartners.comWireframes 2.0

Thursday, July 14, 2011

Page 2: WP Wireframes

Diagram 1 - Layout 1

Initial view upon opening browser.

Thursday, July 14, 2011

Page 3: WP Wireframes

Diagram 1 - Layout 1

Initial view upon opening browser.

1

2

3

4

6

5

7

Logo

Tagline

Navigation

Content Slider *(Image/Video/Text)

Slider Navigation, default: autoscroll

Slide text

Content Boxes (3)

1

2

3

4

5

6

7

Thursday, July 14, 2011

Page 4: WP Wireframes

Scroll down to see page footer with contact info.

Diagram 2 - Layout 1Thursday, July 14, 2011

Page 5: WP Wireframes

Layout of current content, highlighted in blue.

Diagram 3 - Layout 1Thursday, July 14, 2011

Page 6: WP Wireframes

Diagram 1 - Layout 2

‘Contact’ moves from footer to nav bar as a lightbox.

Thursday, July 14, 2011

Page 7: WP Wireframes

Diagram 2 - Layout 2

Example of ‘Contact’ content displayed in lightbox.

Thursday, July 14, 2011

Page 8: WP Wireframes

Diagram 3 - Layout 2

Content placement suggestions.

Nav bar changes:

•‘About’ => ‘Introduction’

•Add ‘Approach’ page

•‘Home’ link becomes logo

•‘Contact’ moves from footer to lightbox

Content boxes change to brief of WP’s 3 core services which then link to a respective page with a complete description on each.

Former content is added to content slider and ‘Approach’ page

Thursday, July 14, 2011

Page 9: WP Wireframes

Examples for Photography Assets

Thursday, July 14, 2011

Page 10: WP Wireframes

Thursday, July 14, 2011

Page 11: WP Wireframes

Thursday, July 14, 2011

Page 12: WP Wireframes

Examples of Content Sliders

Thursday, July 14, 2011

Page 13: WP Wireframes

Color palette exampleThursday, July 14, 2011