This process has been updated in the full width design - xd section. Please review how to treat current interiors there. To gather information on how to treat older interiors please continue.

Note: Before you begin working on 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 have 4 images available to export for the dev spec phase).

Also, make sure that the interiors art boards are up to date. Sometimes we may get a project where the templates in the file were copied from our previous versions, where the text boxes were not all separated, symbols not connected, padding/gutters are off, etc.

Interiors and Mobile Template 

Within the interiors template XD file, you will find all the basic elements that you need to create 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 and overall style.

The template has 2 sets of interiors referred to as standard and wide. Each set contains 3 versions that can be used:

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 (1024 content area). 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.

The template also has a wide grid with 30px gutters (1302 content area). We are going to try to use the 30px gutter as much as possible, but we have the freedom to accommodate to 10px increments for the gutters.

Please match the homepage's grid size with the interior's grid size, unless otherwise noted. For example, if the homepage uses the standard grid width (1024 content area), interiors should use the same.

Symbols make up a great deal of the interior assets. This is done to automatically update the style guide that's included along side the interiors.

After choosing your style of interiors (A,B,C) standard or wide, please delete the extra templates that will not be needed. For example, if you are using a standard grid option A, delete B, C, and all wide grid options (including the associated style guide art boards). 

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.

Search bars and icons

Some wire frames will have a search bar or icon that isn't present in the header of the design.

 

When this occurs, the search bar or icon needs to be added to the interior page header. If applicable, and functionality should be shown as well (ie. search dropdown). 

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 widget samples.

 

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. The header text is a symbol so you should only have to update the text once and all widgets will automatically change. The bar color will still need to be changed.

 

Calendar page :

Most of our sites are long, so the calendar is almost always shown at full height.

 

Important Notice:

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

 

 

Mobile

For the mobile view, there are two art boards. One displaying the main view and one view with the menu open. The art boards are included in the XD template file. Always create this mobile view during the interiors phase 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 all styling
• 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

 

Favicon

For the favicon we usually add the seal or city logo to the art board (seen above). For PNGs, select the art board title and add transparency to the fill under the appearance title.

 

Assets

As a courtesy, some designers add images and icons to the assets art board during the interiors phase. This is not required. Assets are collected and exported during the dev specs phase.  

 

Interior Design Samples

Here are some examples of different interior page implementations:

San Marcos, CA

Walla Walla, WA

San Carlos, CA

Tempe, AZ

El Segundo, CA Econ Dev

 

Other Important Considerations

Use the assets panel

• Continue to use the assets panel and organize your design by color, character styles and symbols.

 

Save the interiors

To keep revisions under control, we follow a folder structure to better organize revisions. Please save initial interiors in the "interiors" section/folder of the project. Inside "interiors" should be a folder called "initial interiors" were you'll save the 1st version of interiors. Revisions are also saved in the "interiors" section under the "revisions" folder. Please review our guidelines on file naming and folder structure.

 

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