Note: Before you begin work on the interiors, make sure to finalize the homepage design:

• Check for imagery and icons that need to be purchased
• Make sure all hover items are present if needed
• Please include enough hero images to rotate through (so if there are 4 scrolling dots, please export 4 images). Make sure these images export into the assets folder.

Interiors and Mobile Template 

Within the interiors template, which should already be included within the final homepage psd, you will find all the basic elements that you need  to create the interior pages. They will be in gray-scale, so you will need to customize it in order to match the look and feel of the homepage: Same color palette, same fonts.

The template has 3 versions of interiors that you can use:

A	B	C
Gutter between side nav and content	No Gutter between sidenav and content	Open content area

The template has a standard grid with 20px gutters. We are going to try to use the 20px gutter as much as possible, but we have the freedom to accommodate to 10px increments for the gutters.

Also, you will see little blue squares in the templates that represent spacing in general in 10px increments. These are there to help you with the spacing.  Please keep this spacing the same as much as possible. If you need to change it, please make a note of it, and increase it  or decrease it only by 10px increments.

Header and Footer

Interiors will share the header and the footer with the homepage. These should look the same on the interiors and homepage, with the exception of the search bar, which you might need to add in the interiors’ header if it is not in the homepage header.

Common Component List

 

 

This is a list of common css styles that we want to keep the same when styling different components.

For text, a good approach is to first decide on the size of your body text (the font face should be the same as the homepage body text). This body text will also be utilized for:

 

• The Mobile default text
• The Calendar day font size

Then, decide your department widget font size. This text, which should be smaller than the body text, will also be utilized for:

 

 

 

• Table text
• Calendar text
• Important Notice
• Widget box item title. These titles should be 110% of the subtext.
• Side nav text. These links should be 110% of the subtext
• Breadcrumbs and Links to the right of the page title (Font size, Share & Bookmark..etc) should be 90% of the subtext.

 

 

 

 

 

What to export:

 

Department interior:

 with a banner image above the content and a news widget sample.

 

Interior page:

with the mega menu showing and the table sample

Note: The Department Page's small boxes (widgets), the table, the calendar and the mobile list table should share the same header styling.

Calendar page :

 

Inside the psd template you will find that there is a mask around the calendar that cuts it off vertically. This is for you to use if the site is short, around 1080 px in height (top left image above).

However, if the site is long (like most of our new sites are), remove the mask and show the  full height please (bottom right image above).

 

Important Notice:

Export all of the interior screens above with the important notice on top.

 

 

Mobile

One mobile view. Mobile PSD template is inside the design resources folder. Always create this mobile view unless specified by the PM.

**DO NOT upload the mobile comps to Invision**

 

Common component styles to note:

• The slide in menu matches the interiors mega menu in style
• The hamburger menu's icon matches the main nav's text color
• The hamburger menu's background box matches the main nav's background color (which in this case is the same as the header color)

 

Interior Design Samples

Here are some examples of different interior page implementations:

https://visioninternet.invisionapp.com/share/65AQEAOTG

https://visioninternet.invisionapp.com/share/K7AM53NMJ 

https://visioninternet.invisionapp.com/share/TAAAUW1ME

 

Other Important Considerations

Use Layer Comps

Use the same psd file for all of the interiors with the exception of the mobile comp. Use layer comps for each screen. Try to not repeat elements in the layers as much as possible, in order to facilitate updates. So for example, layer comps should share backgrounds, header, footer, the left nav, the page title, breadcrumbs and links.

Check for WCAG 2.0

Double check for WCAG 2.0 compliance using
http://snook.ca/technical/colour_contrast/colour.html
Check for AA level
For more info read our WCAG 2.0 standards