Design Elements Guidelines

This document outlines the required files and concepts that CSI needs in order to setup a customized Giving Dashboard, Template, or Virtual Event Board.

Branding Guidelines

Access to a brand guidelines document which specifies, at minimum, the following:

• Typography

  • Font files should be included if the fonts are NOT free fonts
  • Specifications on how/when to use each font AND how/when to use bold/italicized fonts

• Color Palette

  • Exact RGB/Hex Code values for each client color 
  • Specifications on when/where to use each color is ideal

• Background Images or Textures (if applicable)

• Logos

  • Valid logo styles to be used and when to use each.

Giving Dashboard

If submitting a mockup to CSI for a new Giving Dashboard page, all of the following criteria must be met for the delivered mockup file:

• Adobe Photoshop (.psd), Adobe XD (.xd), or Figma document sent to, or shared with CSI
• Document must contain layers for each element or group of elements (i.e. not “flattened”)
• Text elements must be inspectable to extract font, size, weight, kerning, and line spacing information
• Shape elements must be inspectable to extract color, dimension, and spacing information
• Colors must be in a web format (Hex or RGB), not Pantone or other printing-based color spaces
• Sizes must be in, or be convertible to, pixel format (“point” sizes are not accepted)
• For responsive design, multiple mockups should be included demonstrating overall page layout on a variety of devices ranging from a large desktop display to a small phone

Images

• Logo

  • 3:2 or 1:1 aspect ratio
  • Higher resolution is always better!
  • Recommended file type: SVG (preferred) or PNG

• Header

  • 16:9 or 4:3 aspect ratio
  • Higher resolution is always better!

• Others

  • Try to match image aspect ratios with how you envision them being displayed on screen.
  • Example: if you envision a perfect square, use an image with a 1:1 aspect ratio. If you envision more a of standard rectangular look, 16:9 would likely fit better.
  • Higher resolution is always better!

File Type Warning

If possible, always use .png (or, if applicable, .svg) files. Avoid .jpg/.jpeg files since they tend to have poorer quality, especially when viewed on high-resolution devices like mobile phones.

Queries

• Data

  • What data are we showing?
  • How many records?
  • In what order?
  • What elements of the dashboard should we use?
    • Progress trackers?
    • Query images?
  • Example: We would like to see the top 10 chapters ordered by total donation amount, display the data in this way - ChapterName - Amount on the dashboard. Please show the progress trackers to showcase how close the other chapters are in a clear cut way. Show each chapters' logo in the results, logos are stored in here - iMISTable.FieldName

• Content Blocks

  • Exact content to be used in each content block including images, quotes, text, and any other items that may be needed in addition for that specific content block.

• Order of elements on the page

  • Where each dashboard item should appear on the page.
  • Example: Preferably a mockup to show all items, but can be as simple as a hand drawing to show the layout the page should be in.

Virtual Event Board

Images

• Background Image

  • This is the image that will represent the full background on the virtual event board 
  • This image should be an SVG

• Entity Image(s)

  • This is the image that will be used to represent a single distinct donation on the virtual event board 
  • All entity images should be an SVG
  • If more than one image is supplied, a breakdown of when to use each image
  • Example: Send 2 entity images, 1 named entityImage1.svg, the other entityImage2.svg. Please use entityImage1.svg for any donation shown that is less than $10. Use entityImage2.svg for all donations greater than $10.

Tiers

• Coordinates Breakdown

  • What parts of the background image should we show entities on/in?
  • Likely best to send the background image with boxes drawn/overlaid to indicate where entities are allowed/not allowed.
  • See example below. The white outline box represents the coordinates breakdown of where we allow entities to be placed.
    

    

• Tiers

  • Are we utilizing a tier structure to separate entities on the virtual event board?
  • How many tiers? And what is the $ range that each tier covers?
  • Are there different images being used for each tier?
  • Are there different animations being used for each tier?
  • What styling differences, if any, should be applied to each tier?
  • Example: We are using 3 tiers. Tier 1 will be donations from $5 - $10. Tier 2 will be from $10.01 - $20. Tier 3 will be >$20. All 3 tiers will use the same entity image but the size will double for each tier jump. Tier 1 will be a 30x30 image, Tier 2 60x60, Tier 3 120x120. The entrance animation will be a simple spin rotation and the exit animation will match. All tiers use the same animations.

Query

• Data

  • What data are we showing?
  • How many records?
  • Example: We want to show the 10 latest donations. Display the data in this way for each entity that represents a donation, FirstName - (Informal) - LastName