Wider width homepages and interiors are finally here, along with a updated process to deliver design. New designs will all contain a 1302px wide content area with a custom interior page. Initial homepage designs now include a sample interior page upon [initial] design delivery. Interior pages are now more detailed with robust examples of how clients can structure their interior pages. Templates are constantly being updated but you can start the design by using the most recent master file in box.

 

Assets Panel

Design with the Asset panel in mind. Utilize the Asset panel by keeping it clean and organized. It saves a lot of time during the revision phase. We want instant updates (made in the assets panel) that change art boards globally. Assets Panel is organized by Color, Character Styles and Symbols. 

Color

While designing, please add the color palette to the "colors" portion of the assets panel. Doing so, allows designers to change colors in a global sense. If a design comes back and clients want to change the gold to a brighter yellow, this can be done in the colors section by editing the actual swatch. 

 

Asset Filter

You can filter assets and rename color swatches, character styles and symbols. For symbols, always rename assets in the asset panel to change the name of all symbol instances. 

Character Styles

Character Styles record the font, size, color, weight, line spacing and height of the font. Recording your character styles increases the speed of your work flow. Applying a character style to another text field can be done by applying a saved character style to a text field.

Please add all font variations to the character styles located in the assets panel. This allows designers to make quick changes to fonts without searching through art boards which minimizes the mistake of missing a row or line of text.

Add a character style by selecting a text field and adding it to the character style list by click the (+) near the title. When a font has been added, the (+) sign will turn lighter gray. You can also select an art board title and add every font on the selected art board. Right click a character style to edit font attributes.

The master template will come with fonts already included in this panel. Please adjust those fonts to match your chosen font for the design. These will update all the fonts in the different art boards.

 

 

Fonts

Use google fonts, squirrel fonts, and web safe fonts

Minimize the amount of Google and Squirrel fonts used in order to minimize loading time. Use three fonts max, and this includes any instances of a font, so for example. Lato Regular and Lato Bold will be considered two fonts.

Please test your body font in larger paragraphs to ensure that the font works well as the content font for interiors. Not all fonts work well for both caption and content.

Symbols 

Turning design elements into symbols saves huge amounts of time. When a symbol has been created the icon near the name changes. Designers get to spend more time actually designing than making tedious changes and corrections. Design elements that are being reused across art boards are perfect candidates for symbols. Turning design elements into symbols link them dynamically which allows designers to make one change and have it reflected across all instances. Once symbols are created they can be copied to other art boards.

 

 

Symbol names can now be changed after symbol conversion. Go to the assets panel to rename symbols to avoid generic naming conventions. Generic names make symbols difficult to sift through because they lack the appropriate name when performing an asset search. 

 

 

Designing in XD

There are a few items that you should pay close attention to. Text, shadows, angles, groups, masks and images need to created with certain guidelines. Following these guidelines with make exporting assets for your final design a breeze!

Text 

Separate out text that varies in size. For example:

1. The caption box with large title text and smaller body text should be separated.
2. Event dates like NOV 30. If the text is different sizes separate the text fields so that devs can select each one to get individual sizes/styles. 
3. Event boxes with titles that are always larger than the time (8:00pm). Separate the two.

If an item doesn't follow the previous rules above, please make a Dev Note itemizing the size, font type and color or separate out the text.

Shadows

If you have images that are masked by a shape, that also rests on top of another shape that has a shadow applied, devs cannot access the specs of the shadow because it's not clickable. The masked photo on top of the shadow shape is the only item that can be clicked. Please add shadow details to Dev Notes.

Angles

Pay attention to the type of angles that are in your design. If you have a 90 degree angle please include the degree of all angles in your design specs or export them in your assets folder for maximum accuracy and increased reproduction speed.

Groups

Devs can only select smaller grouped areas with ease. For example if you group a button, the text and the button background can be selected with ease. However, if you group ALL hovers or group items that aren't related (on opposite ends of the art board), devs will have difficultly drilling into the group and selecting items like text or other objects underneath the group. Please apply transparency to the item and not the group! Design specs wont pick up group transparency. 

 

Masks

Do not mask areas like a spotlight section or a call to action section. Devs will not be able to select text or icons because the mask shape is on top, restricting access to the specs you want devs to access. Masking works best for images or creating style tile elements. 

Images

Always mask images to have better control over what part of the image you'd like to show. When you fail to mask an image with a shape mask, images are dependent upon the shape. For example, designers can not recover an image because it's "locked" into the shape. For the ability to recover the full image to export assets or change what's being shown in the mask, please masks all images with a shape.

 

 

Widgets

For the homepage Event Widget, please include the following scenarios in the design:

 

 

If there is an event grid with 2 columns and multiple rows, please number the events from left to right like the following: 

Sep 1	Sep 2
Sep 10	Sep 14
Sep 21	Sep 25

 

If requested in the wireframe, we can also add: 

• Events intro/summary
• Event Location without intro/summary

For the homepage News Widget, please include the following scenarios in the design:

There are often times when wireframes require a default image instead of having the content fill up the container space. In this instance we design a default image using the client's logo or seal. Be creative! Below is an example of the logo as a default image.

More CTA Buttons

When designing these buttons, please keep in mind that a reduced version of these buttons will be reused for the department widgets. Please make sure they will look good reduced to 60% inside the department widgets.

Mega Menu

Please export the megamenu on one of the screens

Wireframe to Design

Be sure to review your wireframe for yellow notes. Notes can include design requests or additional pages like a video overlay that wasn't visually represented in the wireframe but documented.

 

At this point you should have a completed design of the homepage with various interactions and hovers included. Next on the agenda is to select a customized interior that will initially be in gray or blue scale. 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.

 

Customized Interiors

Customized interior pages are client specific. They contain information that a client would use to build out their interior pages. These pages give the client insight how to build a page with various widgets using content that relates to them. Choose an interior that aligns with the needs of the client. If you are working on a city, please use the interior labeled "city." If you are working on a design for a sheriff or one that involves the police in any way, use the "police" interior. Pre-made interiors for cities, counties, police and the library are apart of a growing list of options to choose from.

 

 After choosing your customized interior, please delete the extra interior templates that will not be needed. For example, if you're designing for a library, delete the police, city and county interiors. If a customized interior doesn't quite fit your project, please modify an existing interior for a better fit. Be sure to add the header and footer symbols to your customized interior page.

Header & 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.

 

Important Notice:

Important notice should be displayed in one of the comps, preferably in the interior view.

 

Background Stripe Below the Header

Below the header there is a bar background area. If there is a wide interior banner below the header, this bar is just a background stretching behind it.

This bar's minimum height will be 150px, and it will appear empty when there is no widget over it. Otherwise, it stretches to fit the height of the widget. In order to accommodate this, please include an image that matches the design. Also, choose a color for the transparent overlay and the gradient overlay.  

 

 

Search bars and icons

Some wireframes 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). 

 

Standard Interiors

Standard interiors are included in the master file. The standard interiors explore layout options as the 1,2 & 3 column layouts are represented. These files aid developers as visual representation of what these layouts will look like. They also are great visuals during working calls with clients who would like to see their design in a different layout. Symbols are largely linked and will update assets across art boards on the style guide, standard and customized interiors. Standard interiors are completed partly with the automatic update of some symbols (like the mega & side nav menu) but aren't finalized until the design specs phase. 

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.

 

 

 

 

 

 

 

Important Considerations 

Mobile

Art boards such as the mobile, menu, favicon and assets are completed in the dev spec phase unless specified by the PM. **DO NOT upload these art boards 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 design phase. This is not required. Assets are collected and exported during the dev specs phase.  

 

Note: Before you submit your initial design, make sure the following has been completed:

• Utilize the Asset panel by keeping it clean and organized. We want instant updates (made in the assets panel) that change art boards globally.
• 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).
• Text boxes are all separated, symbols not connected, padding/gutters are off, etc.
• You've chosen an interior page to include with the homepage screens. The customized interior must have the same styling as the homepage.

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

Social media icons:

Please make sure the social icons meet their guidelines standards. Here are a few examples of proper usage:

	The don’t have to be rounded. Just focus on the icons inside the circles.
	This is an example of the icons with a monochromatic background.
	This is an example of the original, full color icons

 

For the full collection of social icons, please refer to the interiors XD template. In the assets panel, you'll find a large collection of social media icons in the symbols section.

Weather:

Make sure to use the Yahoo Icons (in the Designer Resources folder)https://visionts.box.com/s/d29njk9k4n6tltm6brepfe4lwtehrvq2

 

Tag Line and Copyright Information

In the footer, make sure you are using:
"Created By Vision – Where Communities & Government Meet"
 
Copyright should be:
"© 2016 Vision Technology Solutions, LLC. All Rights Reserved"

 

 

Interior Design Samples

Here is an example of interiors with a full width appearance:

https://visionts.box.com/s/pbjizbl74kqfto1z30lgg71vke6lrlni

 

Here are some examples of designs with an interior page included upon initial design delivery:

Montgomery, AL Zoo

Sheyboygan, WI

San Jose PD, CA

Durham County, NC

Belmont, CA

 

What to Export

Export the design homepage (complete with interactions and hovers) along with the custom interior.

Save the interiors

To keep revisions under control, we follow a folder structure to better organize revisions. Please save exported files inside the project folder's "initial design" folder. Please review our guidelines on file naming and folder structure.

Use Invision to Publish your Work

When you've completed the homepage design & interior, you will have a design displaying multiple states like hovers, sticky navs, search overlays and more. Export each screen and upload the design to invision.

Upload your work at:
http://www.invisionapp.com/
design@visioninternet.com
designers

(Post your work under Prototypes/Project Name). There should be a prototype already created. Please let Natalia know if you cannot find it.

When you post your work, think of any functionality you can add using the inVision app, in order to make it easier to the viewer to understand the functionality of the homepage. Examples are:

• Tab functionality
• Sticky Nav
• Hovers
• Search overlays
• Spotlight Visibility