WP Wireframes

Post on 23-Mar-2016

239 views 0 download

Tags:

description

WP wireframes

Transcript of WP Wireframes

WellesleyPartners.comWireframes 2.0

Thursday, July 14, 2011

Diagram 1 - Layout 1

Initial view upon opening browser.

Thursday, July 14, 2011

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

Scroll down to see page footer with contact info.

Diagram 2 - Layout 1Thursday, July 14, 2011

Layout of current content, highlighted in blue.

Diagram 3 - Layout 1Thursday, July 14, 2011

Diagram 1 - Layout 2

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

Thursday, July 14, 2011

Diagram 2 - Layout 2

Example of ‘Contact’ content displayed in lightbox.

Thursday, July 14, 2011

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

Examples for Photography Assets

Thursday, July 14, 2011

Thursday, July 14, 2011

Thursday, July 14, 2011

Examples of Content Sliders

Thursday, July 14, 2011

Color palette exampleThursday, July 14, 2011