Design Tips and Tricks

Design Principles

At DesignLab, we like to use acronyms to help out patrons learn about design. Click on the images below to learn more about the specifics of each acronym!

C-A-T stands for Conceptual, Aesthetic, and Technical. Click here to learn more about CAT

C-R-A-P stands for Contrast, Repetition, Alignment, and Proximity. Click here to learn more about CRAP

Fonts

The effectiveness of your message is strongly influences by your choice of font/typeface. A good font will engage the audience and guide their perception of your message. Fonts make an emotional impression on the viewer at both the conscious and subconscious level. Be sure to consider the impact your choice may have on your overall design, including any other fonts you will use.

Check out our recommendations for free font databases here.
>Helpful tips:

  • It is best not to use more than two different font families in one layout.
  • Having a full font family is helpful when designing — look for regular, bold, and italics. Even better if there are varying levels of line widths (light, regular, demibold, bold, etc.)
  • You need to consider the following when choosing a font
    • Legibility – Some fonts are easier to read than others, be sure what needs to be read is legible.
    • Your Audience – What type of font does your audience expect you to use? Or what font would connect to the audience you want to reach?
    • Your Message – What are you trying to convey and how does the font need to fit that? For example, a serious message should have a more formal font, not a decorative font.
    • Appropriateness – Many fonts have negative associations (Comic Sans, Papyrus, etc.), be sure to use fonts that won’t distract from the content.

Font Examples

Serif Fonts

In typography, serifs are the small lines or strokes attached to letters and symbols. Serif fonts often have varying widths to their strokes and have extra embellishments at the beginning and ends to letters. Sometimes serif fonts are called “Roman” for their similarity to classic Latin inscriptions.

Serif fonts are typically used for print and on the web for larger blocks of text. People with dyslexia often find serif fonts to be easier to read than sans-serif fonts because of the differences in letter shapes.

Some examples of serif fonts can be found below with a simple sentence to demonstrate the full alphabet:

Examples of Baskerville, Didot, Iowan Old Style, Georgia, Palatino, and Times New Roman fonts.

Sans-Serif Fonts

Sans-serif means “without serifs,” which is exactly how this font looks. Sans-serif fonts (like this one, Figtree) tend to have consistent stroke widths and lack the embellishments at the beginning and ends to letters. Sometimes sans-serif fonts are called “Gothic” or “Grotesque.”

Sans-serif fonts are typically used for web-based projects, comics, and in print for headings. People with dyslexia often find sans-serif fonts hard to read because the letter shapes tend to be similar (example: the letter b looks like a mirror image of the letter d).

Some examples of sans-serif fonts can be found below with a simple sentence to demonstrate the full alphabet:

Examples of Arial, Avenir Next, Futura, Gill Sans, Helvetica, and Seravek fonts.

Script Fonts

Unlike the more traditional serif and sans-serif fonts, script fonts are intended to look a lot like handwriting or calligraphy. Script fonts (like the heading, Brush Script Std) often have varying widths to their strokes, connected letters (ligatures) and have many embellishments at the beginning and ends to letters. Sometimes script fonts are called “handwritten” for their similarity to cursive. Most script fonts are also considered decorative.

Script fonts should be used sparingly, mostly for headings or individual words/names because they are often hard to read.

Some examples of script fonts can be found below with a simple sentence to demonstrate the full alphabet:

Examples of Apple Chancery, Brush Script, Savoye LET, SignPainter, Snell Roundhand, and Zapfino fonts.

Decorative Fonts

Similar to script fonts, decorative fonts are less traditional and informal. Decorative fonts are usually used to evoke a particular association, such as the font Papyrus being associated with yoga studios and the movie Avatar. Decorative fonts can have varying widths to their strokes and have many embellishments. Some decorative scripts have negative associations (ex: Comic Sans) so be careful when selecting decorative fonts.

Decorative fonts should also be used sparingly, mostly for headings or individual words/names because they can be hard to read.

Some examples of decorative fonts can be found below with a simple sentence to demonstrate the full alphabet:

Examples of Academy Engraved, Bradley Hand Bold, Chalkduster, Marker Felt, Party LET, and Phosphate fonts.

Color Settings - CMYK vs. RGB

When you’re starting a project, you want to make sure you have the correct color setting selecter. Some programs will automatically set the color setting, but most Adobe products will have you choose the appropriate color setting when starting the project. If you work in the wrong color setting, your file may not accurately represent the colors you are using.

Color Model of CMYK, demonstrating that the combination of all colors makes black
CMYK Color Model

CMYK – For Print Materials

CMYK stands for Cyan, Magenta, Yellow, and blacK, or the standard colors on a printer (although many high quality printers now have more than these 4 colors). Ink colors are called “subtractive” because they get darker as you combine them. By its nature, there are less print colors available than screen colors.

When you know you’ll be printing your project, it is best to make sure the document is set up for CMYK color. That way, the colors will be as close as possible to the colors that are available for printing.

Helpful tip:
Even if you’ve selected CMYK as your color setting, it is a good idea to do a test print. Each printer handles ink differently, so your image may look different from the screen to the printer, or from printer to printer even.

RGB Color Model, demonstrating the combination of all colors makes white
RGB Color Model

RGB – For Screens/Web

RGB stands for Red, Green, and Blue, or the standard light colors. Light colors are considered “additive” because they get lighter as combined; thus, combing red, green, and blue makes the color white. There are hundreds more screen colors than there are print colors.

When you know your project will be on a screen only, it is best to make sure your project is set to RGB color so you can get the most out of your color choices. Additionally, the way you see your project on screen should be exactly how it will look on other screens.

Color Selection

There are plenty of opinions about how to make color selections for your palette. The most common two rules are:

  1. Choose no more than 3 colors (not including white, grey, and black) – Balance with 60% primary color, 30% secondary, 10% tertiary.
  2. Choose no more than 5 colors (not including white, grey, and black) – Balance 40% primary colors, 20% each for 2 secondary colors, 10% each for 2 tertiary colors.

For whichever rule you follow, you want to make sure you pick colors that will look good together. Just like with fonts, you need to consider the following:

  • Legibility – Colors that will be easy to see and have enough contrast with the background.
  • Your Audience – What colors do your audience expect you to use? Or which colors would connect to the audience you want to reach?
  • Your Message – What are you trying to convey and how does the color need to fit that? For example, a serious message should have a darker or cooler color, not a bright yellow.
  • Appropriateness – Many colors have associations with different brands/industries (ex: green for healthy and eco-friendly products), be sure to use colors that won’t distract from the content.

Programs for Color Selection

Adobe Color LogoAdobe Color CC – This online app enables you to create and save color schemes that can be integrated into an existing Adobe Creative Cloud account. It has the following pre-set options: Analogous, Monochromatic, Triad, Complementary, Split Complementary, Double Split Complementary, Square, Compound, Shades, and Custom. Additionally, you can upload a photo to extract a color theme and also check your theme for color blindness accessibility.

Color Hexa LogoColor Hexa – This online tool provides information about any color’s RGB and CMYK makeup and generates matching color palettes. It has the following pre-set options: Analogous, Monochromatic, Complementary, Split Complementary, Triad, and Square (Tetradic). This tools also provides close alternatives, gives different shades and tints, shows previews of the color as text and a a background, and has a color blindness simulator. Finally, this tool converts colors to their equivalents in RGB (Standard Web), CMYK (Standard Print), Hexadecimal, HSL, HSV, CIE-LAB / LUV / LCH, Hunter-Lab, XYZ, xyY and Binary.

Paletton LogoPaletton – This online app is for producing harmonious color schemes in several color spaces including RGB and Pantone. It has the following pre-set options: Analogous, Monochromatic, Triad, Square, Custom, and Randomize. Also, this site has lots of “Presets” you can explore for each color and shows how colors will appear to various conditions by clicking on “Examples.” This site may not be as user-friendly as the above programs.

Colorgorical – Created by a team including UW-Madison professor Karen Schloss, this online program is for producing harmonious color schemes in several color spaces including RGB, Hex, and LCH. It is intended mostly for charts and graphs.

Color Scheme Examples

Monochromatic

A screenshot of Adobe Color program's monochromatic color scheme with the base color of magenta
Example Monochromatic Color Scheme from Adobe Color

This scheme used colors in the same family (hue) that utilize different shades and tints (brightness). Some may consider monochromatic schemes to be rather boring, but they are very accessible to color blindness, since no matter what kind of color blindness the contrast is made by the change in brightness, not hue.

Analogous

A screenshot of Adobe Color program's analogous color scheme with the base color of magenta
Example Analogous Color Scheme from Adobe Color

This scheme used colors that are directly beside one another on the color wheel. While analogous colors can be pretty, they are not very accessible to color blindness, since no matter what kind of color blindness the contrast is only in hue and not in brightness.

Complementary

A screenshot of Adobe Color program's complementary color scheme with the base color of magenta
Example Complementary Color Scheme from Adobe Color

This scheme used colors that are directly opposite one another on the color wheel. While analogous colors can be eye catching, they aren’t recommended for marketing because they are already commonly used, especially in sports (ex: Minnesota Vikings football: purple and yellow; Denver Broncos football: blue and orange).  However, complementary color schemes are pretty accessible to color blindness, since the main colors are very different hues and the secondary and tertiary colors are differing in brightness.

Split Complementary

A screenshot of Adobe Color program's split complementary color scheme with the base color of magenta
Example Split Complementary Color Scheme from Adobe Color

This scheme starts with one color, identifies the complementary color directly opposite on the color wheel, and the selects the two colors on either side of that complementary color. This is color scheme selection is popular because it is eye catching without being overly common.  However, split complementary color schemes are less accessible to color blindness. Those who are color blind usually have red, green, or blue blindness or some combination of two of these colors. Being in a triangle in the color wheel means that at least two of the colors will look similar to anyone who is color blind.

Triad

A screenshot of Adobe Color program's triad color scheme with the base color of magenta
Example Triad Color Scheme from Adobe Color

This scheme has 3 colors that are equidistant from each other around the color wheel. This color scheme selection is popular because it creates high contrast to normal vision and color blindness.  The most common triads are the primary colors red, yellow, and blue or the secondary colors orange, green, and purple.

Square

A screenshot of Adobe Color program's square color scheme with the base color of magenta
Example Square Color Scheme from Adobe Color

This scheme has 4 main colors that are equidistant from each other around the color wheel (which also makes 2 sets of complementary colors). This color scheme selection is popular because it is eye catching and creates high contrast to normal vision.  However, this scheme is less friendly for color blindness because the dots begin to get closer together around the color wheel. We recommend changing the brightness of some colors to make more contrast.

Contrast Checkers

If you Google “Color Contrast Checker” you will find many programs for checking contrast. We highly recommend WebAIM’s Contrast Checker. This site allows you to enter the foreground color (usually text color) and background color) to get a pass/fail for normal text, large text, and graphic objects. There are actually two different tests for each, the WCAG AA and WCAG AAA. The first requires a lower contrast ratio than the later. It is best to have a pass on all fronts, but a pass on WCAG AA is acceptable in most cases.

WebAIM Contrast Checker Example using DesignLab's Cyan Color on a black background. Shows passes on all tests
WebAIM Contrast Checker Example using DesignLab’s Cyan Color

Image Types - Raster vs. Vector

There are two ways that digital images are stored: raster and vector. Knowing the difference is helpful for both finding and creating your own images. Some programs lend themselves better to a different type of images, but usually you can use both types of images in most programs.

Raster Images – Pixels

image demonstrating a raster letter S, which is enlarged to show the pixelation. Also lists the raster file types, jpeg, gif, and png
Demonstration of a raster image of the letter S, which is enlarged to show pixelization

Raster images are made up of a tiny grid of pixels, or small squares of color that make up an image. Most raster images are photos and digital paintings because they lend themselves to smooth transitions of color. Videos are also considered raster images. You typically start with a raster image and make adjustments using a program like Adobe Photoshop, rather than create a raster file from scratch, although this is not always the case. Raster image file types are often .jpeg/.jpg, .gif, and .png, although some .pdf and .tiff files are raster images.

One of the big things you need to know about raster images is how to make sure your resolution is correct for your raster image. Screens need a lower ppi (or pixels per inch) resolution than print. The minimum ppi for a clear image on a screen is 72 ppi. For printing, a higher resolution is better. A low-end printer usually requires at least 100 ppi, but most photo printers need about 300 ppi.

Helpful tip:

NEVER enlarge a raster image beyond its original size because that will lead to pixelization (the visible square pixels that make a file look blurry). If you have an image with a high ppi that you want to enlarge for screen use only, you can lower the resolution to 72ppi in order to increase the size without losing much quality in the image.

Vector Images – Lines

image demonstrating a vector letter S, which is enlarged to show the smooth lines. Also lists the vector file type, svg
Demonstration of a vector image of the letter S, which is enlarged to show smooth lines

Vector images are made up of crisp lines drawn between points, with color fills between the lines to make up shapes, giving the images a somewhat cartoon-like feel. Most vector images are logos, icons, and text. Vector images are often made from scratch using a program like Adobe Illustrator, although you can find many vector images online as well. Vector image file types are often .svg (stands for “scalable vector graphic”), .eps, and .ai, although some .pdf and .tiff files are vector images.

Vector images are entirely scalable, meaning that you can make them larger or smaller without compromising the quality of the image. Vector images are often used in large scale projects because they can be made as large as need.

Helpful tip:
While text is naturally a vector image, when text is used in a raster image it becomes raster, meaning it loses the crispness of the lines and will no longer be rescalale without losing quality.

Choosing Quality Images

Beyond choosing the appropriate image type (raster vs. vector), you also want to make sure you’re finding quality images for your project. below are a list of things to consider when choosing images.

Resolution

Higher image resolution usually leads to a higher quality image. Digital image resolution is usually measured in “ppi” or “pixels per inch” (Note: this is different than “dpi” or “dots per inch” which is about printer quality). However, having a high resolution doesn’t always mean that the image is usable though. An image can be very small in size, but be 500 ppi, and still be unusable.

Vector images don’t have a ppi because they are not made up of pixels, and therefore, are typically considered good image choices because they are scalable.

Images with a high ppi are often larger in size, which may be something you need to consider.

Image Dimensions

Vector images are great because they can be resized to as small or as large as needed without losing quality.

Raster images, however, require that you check the dimensions. When searching for images on Google, for example, it is best to set your search parameter to medium or large images to ensure you’ll find images that will be more usable. For raster images, you never want to enlarge the image because it will lead to a loss of image quality, so starting with a large image means you are less likely to come into issues.

File Type/Compression (Raster only)

Image resolution and dimensions are a major part of raster image quality. However, file type and compression also have an impact on image quality. Here are the 3 most common raster files types and the differences between them.

JPEG

This is probably the most common file type, with considerably smaller file sizes, it is popular for the internet. However, .jpeg files are often compressed, leading to a loss in image quality. JPEG compression is on a level of 0-100, with 0 having the highest compression and 100 having the lowest compression. When saving .jpeg files, if prompted, consider the importance of file size. If you need to have a smaller file size, a good practice is to choose a number between 70 and 90. If you’re not concerned about file size, choose 100. (Note: in Adobe Photoshop, the compression is 0-10, so 7-9 and 10 respectively).

JPEGs also do not allow for transparent layers, meaning that anything transparent is usually rendered as either white or black.

GIF

GIFs are often animated, but not always. Like .jpeg files, .gif files tend to be smaller file sizes. Unlike jpeg files, .gif files have a smaller color palette, meaning that the original colors of the image may be adjusted to the closest equivalent if they are not included in the .gif palette. GIFs also allow for transparencies and use a lossless compression called LZW compression. GIFs tend to be lower quality, and not recommended as a primary image file unless using the animated version.

PNG

PNGs are the highest quality raster images because they have a larger color palette than .gif files and allow for transparencies, unlike .jpeg files. PNGs are lossless files that use the LZW compression. PNG files, however, have the largest image file size. We recommend saving files as .png unless you are concerned about file size.

Make an Appointment

Get personalized recommendations and feedback on your project, get clarification on the information above, or ask different questions by making a one-on-one or small group appointment!