Design elements guidelines

This document outlines the required files and concepts that ASI 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 ASI 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 support
  • 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