Departments » Design » Processes

Initial Homepage Design Instructions

Photoshop Template

Use the 1920x1080_grid_20gutter_template_022117.psd template in

https://visionts.box.com/s/9n3ork7mtexrz4ghsbt9s4h5rp8bx4en

 

  • This template has
  • 1920px full width 
  • 1024px width for content using a 12-column grid with 20px gaps.
    Note: we can change this gap in increments of 10px if needed
  • Layer sets organized by Header/Footer, Interiors, Home and background. 
    Don’t delete the content in these folders. You won’t use the interiors folder for now, so just turn it off.
    Homepage and interiors will share the Header, Footer, and probably the background. This is why these folders are outside of the home folder.

 

Rasterizing Layers

Minimize rasterizing layers for easier future editing.

 

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 two 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.

 

Widgets

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

eventsScenarios

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:

News Box

More CTA Buttons

moreButtons60percent

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.
 

WCAG2.0 compliancy

Check for AA level in http://snook.ca/technical/colour_contrast/colour.html
Follow all WCAG standards from this page for color ratio and links

 

 

Social media icons: 

Please make sure the social icons meet their guidelines standards (you might have to google these). Here are a few examples of proper usage:

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

 

For the full collection of social icons, please refer to the SocialIconsSet.AI in the Designer Resources folder

 

Weather:

Make sure to use the Yahoo Icons (in the Designer Resources folder)


Tag Line and Copyright Information

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

 

Use Invision to Publish your Work

Post 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



 

 This is an example of the icons with a monochromatic background.