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