Dickstein Shapiro Intranet - Design Mockups

Headscape Team:    Marcus Lillington   Leigh Howells    Pete Boston

MOCKUPS

Home Page

creative moodboard

3 - 12 (4-4-4) Columns

All mockups use Verdana for body text and Avenir Next Condensed for selected titles and subheadings.

Pallete colors as provided from RGB conversions from Right Hat branding.

Left navigation bar reduced to 3 columns from original concept to accomodate greater central content.


Practice

creative moodboard

3 - 8 - 4 Columns

The content pages uses the grid to provide a right column of 4 grid widths, 1 grid width wider than the left navigation bar.

This leaves enough space for many column tables in the central panel of the page.

Client

creative moodboard

3 - 8 - 4 Columns

Rationalised the layout of the wireframe for this page to tie in with best use of the colunm layout and to maintain consistency.

Ideally chart graphics are output at exact width for central column - 516 pixels

Office

creative moodboard

3 - 8 - 4 Columns

Temporary icons added to top right weather/status panel, may need to review exact nature of this panel.

Department

creative moodboard

3 - 8 - 4 Columns

Person

creative moodboard

3 - 12 (6-6) Columns

Simple tick icons created for CPR/AED and Notary for greated flexibility.

Matters

creative moodboard

3 - 8 - 4 Columns

Office Info

creative moodboard

3 - 8 - 4 Columns

Office Travel

creative moodboard

3 - 8 - 4 Columns

Office Resources

creative moodboard

3 - 12 (6-6) Columns

Grid

Because of the amount of data in the main column, I created a 15 column grid system to reduce the left navigation bar width to allow greater width for the main content panel -as shown below. As some of the tables have 11 columns of data, there is a need to maximise the content area to make it feasible.

creative moodboard


ORIGINAL CONCEPTS

Layout 1

creative moodboard

Branding document - design 1 layout. Yellow/green.

creative moodboard

Branding document - design 1 layout. Green/blue.

Layout 2

creative moodboard

Branding document - design 2 layout. Yellow/green.

creative moodboard

Branding document, design 2 layout. Yellow/green - higher resolution image variant.

Alternative Layout

creative moodboard

Alternative layout. Yellow/grey/green.

creative moodboard

Alternative layout. Blue/grey.

creative moodboard

Alternative layout. Yellow/blue/grey. Image variant.