Timeline

On average, three days are allocated for a new initial design. This includes designing the homepage and sample interior, sending for review, and creating a video presentation. More time will be scheduled for complex designs.

Adobe XD Template

Use the interiors_template_MASTER_(date).xd template in Sharepoint > Resources:

 Interiors Template

 

• This template is 1920px full width containing a standard & wide content area
• Width - 1302px width for advanced designs using a 12 - column grid with 30px gaps.
• Homepage and interiors will share the Header, Footer, and probably the background. 

 

Assets Panel

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. 

 

 

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.

 

 

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.

 

 

Make sure that all groups or layers are named before converting them into a symbol. If a name isn't assigned to the group or layer before it's converted into a symbol, it will be assigned a generic name. Generic names make symbols difficult to filter 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

 

 

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 (see above example). In this instance we design a default image using the client's logo or seal. Be creative!

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.
 

 

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. 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 this language:
"Created By GRANICUS – Connecting People & Government"

Copyright should be: "© 2018 Granicus Inc. All Rights Reserved"

 

Sample Interior Page

Don't forget to include a sample interior page during this phase. In the template file, there are several custom interiors set up. Select the relevant artboard to use for your project. (ie. For a County site, use the County interior, for Library, use the Library interior, etc.). Delete the rest once you've chosen your page. (However, DO NOT delete the regular interiors or mobile. Those will be styled during the Dev Specs stage)

 

Use Invision to Publish your Work

When you've completed the design, 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 and create a new section called "Initial Design". There should be a prototype already created. Please let Natalia know if you cannot find it.

Adding Hotspots

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 

To create this prototype functionality, enter "Build Mode" found at the bottom of the Invision screen.

Size your hotspot by dragging with the mouse, and select the applicable interaction from the menu of options.

 

Adding Notes and sending to Design Review

Before the design can be completed, it needs to be sent to Design Review to be reviewed by programming for any issues/concerns. First, we need to add notes about the functionality and any animations/transitions we have planned for the design.

Enter "Comment Mode" at the bottom of the Invision screen.

Here we will click to place a comment on the area to reference, and select the Yellow "notes". These are internal comments that the client will not be able to see. Be sure to @ tag "DesignReview" in the comment as well. 

Type of comments to include: 

• hover effects (include examples of live sites as references if possible)
• animations or transitions (include examples if possible)
• text maximums
• hero image does NOT auto rotate (this one should always be added UNLESS otherwise specified by client/wireframe)
• hero image scales proportionally on various screen sizes (should also always be included unless otherwise preferred)
• any questions or clarifications on if a feature/animation is possible

 

Once you are done with this step, it's time to send this to Design Review. From your initial design task on Jira, navigate to the parent task to see the rest of the sub-tasks, including the Design Review task.

Open the Design Review task. (If the PM has not labeled this task with the project name, please add it in)

Here, you will add the link to the Invision prototype in the description, along with how many screens there are.  Include the wireframe also. 

Assign the task to Adriane DeWolfe, set the workflow to "Scheduled", and Edit to add a start and due date (typically for the same day/next day). Don't forget to tag Adriane in the comments, and include Natalia and the Project Manager as well so they are aware of the progress.

 

If there are any concerns or questions, Adriane will let you know so that you may respond and address them or make changes as needed. Otherwise she will mark it Done and let you know it is "Approved". Once you have approval, the design may be finished by moving on to review with Natalia and working on the video presentation.

 

Video Presentation

For all Trailblazer initial designs, we create a video presentation to share with the client. This gives us an opportunity to explain our design choices, why we made certain decisions, how elements may interact/function and most importantly, how they achieve the projects goals. This step is crucial for the client to understand the design better, and eliminates many questions they would otherwise have if we simply submitted the design screens without it.

Some key points to include:

• what were the goals for the site and how do we achieve them through this design
• functionality/animations (explain what they will be, how they will interact, and show as much as possible with the hotspots via Invision)
• color palette (how did we incorporate the branding? why did we use a particular color in a specific area? etc)
• font choice
• branding (if relevant)
• mood/feel
• if we deviated from what the client initially wanted, explain why and how it achieves goals better

This is where the notes from the consulting meeting are crucial to reference back to, so the client is also accountable for the information they provided for us. 

Some video presentation examples: 

Hawaii County, HI Video

Montgomery AL Zoo Video

San Jose, CA Video

Kansas City, MO Video

 

Some video script samples are available in Sharepoint as well: Video Script Samples

 

For every video, we need to include the general interiors explanation clip. At the end of your presentation, add a final comment directing the listener to continue for additional information about the flexibility of interiors with our CMS.

The clip is saved in Sharepoint: Interiors explanation video link

 

Uploading to Vimeo

When you are done with recording/editing your presentation, you will upload to our Vimeo account.

Credentials:

Log-in: visionvideos@visioninternet.com

PW: Vision!3

 

Some key settings to adjust:

• General>Info: change the thumbnail image to the first homepage screen
• General>Privacy: for "who can watch this video" set as "Only people with the private link"
• Embed: "Vision Default" preset