Design Tips and Tricks
Core Design Principles
At DesignLab, we like to use acronyms to help our patrons learn about design. Click the images below to learn more about each acronym!
Other Design Principles & Recommendations
The effectiveness of your message is influenced strongly 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 levels. Be sure to consider the impact your choice may have on your overall design, including any other fonts you will use.
You’ll want to consider the following when choosing a font:
- Message – What are you trying to convey, and which font will fit the message? For example, a serious message should have a more formal font, not a decorative font.
- Audience – What type of font does your audience expect you to use? Or what font would connect with the audience you’d like to reach?
- Legibility – Some fonts are easier to read than others; ensure that what needs to be read is legible to your audience.
- Appropriateness – Many fonts have negative associations (Comic Sans, Papyrus, etc.); be sure to use fonts that won’t distract your audience from your message
Font Examples
Having a full font family is helpful when designing—look for regular, bold, and italics. Even better if there are varying line widths (light, regular, demibold, bold, etc.). Also, it is best not to use more than two font families in a single layout.
Below are some example font styles and full font families.
Serif Fonts
In typography, serifs are the small lines or strokes attached to letters and symbols. Serif fonts often have varying stroke widths and extra embellishments at the beginning and end of 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.
Some examples of serif fonts can be found below with a simple sentence to demonstrate the full alphabet:
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 of 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.
Some examples of sans-serif fonts can be found below with a simple sentence to demonstrate the full alphabet:
Decorative Fonts
Like script fonts, decorative fonts are less traditional and informal. Decorative fonts are usually used to evoke a particular association, for example, Papyrus is associated with yoga studios and the movie Avatar. Decorative fonts can have varying stroke widths and 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:
Script Fonts
Unlike more traditional serif and sans-serif fonts, script fonts are intended to mimic handwriting or calligraphy. Script fonts (like the heading, Brush Script Std) often have varying stroke widths, connected letters (ligatures), and many embellishments at the beginning and end of 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:
There are plenty of opinions on how to choose colors for your palette. The two most common rules are:
- Choose no more than 3 colors (excluding white, grey, and black) – Balance with 60% primary color, 30% secondary, 10% tertiary.
- Choose no more than 5 colors (excluding white, grey, and black) – Balance with 40% primary colors, 20% each for 2 secondary colors, and 10% each for 2 tertiary colors.
Whichever rule you follow, make sure you pick colors that will look good together. Just like with fonts, you need to consider the following:
- Message – What are you trying to convey, and which colors fit that? For example, a serious message should have a darker or cooler color, not a bright yellow
- Audience – What colors will your audience expect you to use? Or which colors would connect to the audience you wish to reach?
- Legibility – Choose colors with sufficient contrast between the background and text. Additionally, if using a digital medium, make sure the color is easy on the eyes and not overly vibrant or bright.
- Appropriateness – Many colors are associated with different brands/industries (ex: green for healthy and eco-friendly products); be sure to use colors that won’t distract your audience from your content.
Color Theory
Color theory is a framework used by designers to understand how colors interact, mix, and affect human emotions. The concepts behind color theory help creators build visually pleasing and intentional palettes.
Read more about color theory:
Programs for Color Selection
Coolors.co – A color scheme generator that offers an easy way to create, browse, and save color palettes. The site features a palette generator that lets users create color schemes instantly, either based on user input or randomly. It also provides tools for color adjustment, enabling users to fine-tune hues, saturation, and brightness. A key feature is the ability to visualize colors in different formats and layouts, helping users see how their palettes will appear in various contexts. Coolors.co also supports export options, allowing palettes to be saved in formats such as PNG, PDF, and SCSS. Additionally, it includes accessibility tools such as contrast checkers to ensure that color combinations meet accessibility standards. Users can also browse through community-generated palettes for inspiration, making it a versatile tool for anyone working with colors.
Adobe Color – This online app lets you create and save color schemes that integrate with your existing Adobe Creative Cloud account. It has the following preset 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 – 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 tool also provides close alternatives, offers different shades and tints, shows color previews for both text and background, and includes 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 – This online app generates harmonious color schemes across multiple color spaces, including RGB and Pantone. It has the following preset options: Analogous, Monochromatic, Triad, Square, Custom, and Randomize. Also, this site has lots of “Presets” you can explore for each color, and it shows how colors will appear under various conditions when you click “Examples.” This site may not be as user-friendly as the above programs.
Colorgorical – Created by a team that includes UW-Madison professor Karen Schloss, this online program generates harmonious color schemes across several color spaces, including RGB, Hex, and LCH. It is intended mostly for charts and graphs.
Color Settings
When you’re starting a project, make sure you have the correct color setting selected. Some programs will automatically set the color setting, but most Adobe products require you to choose the appropriate color setting when starting a project. If you work in the wrong color setting, your file may not accurately represent the colors you intend to use.
CMYK – For Print Materials
CMYK stands for Cyan, Magenta, Yellow, and blacK, the standard colors used by printers (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 their nature, there are fewer print colors available than screen colors.
When you know you’ll be printing your project, it is best to set up the document for CMYK color. That way, the colors will be as close as possible to those available for printing.
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 on the screen than on the printer, or even from one printer to another.
RGB – For Screens/Web
RGB stands for Red, Green, and Blue, the standard colors of light. Light colors are considered “additive” because they get lighter when combined; thus, combining red, green, and blue makes white. There are hundreds more screen colors than there are print colors.
When you know your project will be viewed only on screens, it is best to set it to RGB to get the most out of your color choices. Additionally, the way your project appears on screen should be exactly how it will look on other screens.
Example Color Palettes
Monochromatic
This scheme uses colors in the same family (hue) that utilize different shades and tints (brightness). Some may consider monochromatic schemes rather boring, but they are very accessible to color blindness, since, regardless of the type of color blindness, contrast is determined by changes in brightness rather than hue.
Analogous
This scheme uses colors that are directly adjacent on the color wheel. While analogous colors can be pretty, they are not very accessible to people with color blindness, since, regardless of the type, the contrast is only in hue, not in brightness.
Complementary
This scheme uses 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 widely used, especially in sports (e.g., Minnesota Vikings: purple and yellow; Denver Broncos: blue and orange). However, complementary color schemes are relatively accessible to colorblind people, since the main colors are very different hues and the secondary and tertiary colors differ in brightness.
Split Complementary
This scheme starts with one color, identifies the complementary color directly opposite on the color wheel, and then selects the two colors on either side of that complementary color. This 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 colorblind usually have red-green or blue-yellow color blindness, or some combination of the two. Being in a triangle on the color wheel means that at least two of the colors will look similar to anyone who is colorblind.
Triad
This scheme has 3 colors that are evenly spaced around the color wheel. This color scheme is popular because it creates high contrast for both 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
This scheme has 4 main colors that are evenly spaced around the color wheel (which also form 2 complementary pairs). This color scheme selection is popular because it is eye-catching and creates high contrast to normal vision. However, this scheme is less friendly to color blindness because the dots begin to cluster around the color wheel. We recommend adjusting the brightness of some colors to increase contrast.
Image Types
There are two ways that digital images are stored: vector and raster. Knowing the difference in these image storage types is helpful for both finding quality images and/or creating your own images:
Vector Images – Made up of Lines
Vector images are made up of crisp lines drawn between points, with color fills between them to form shapes, giving the images a somewhat cartoon-like feel. Most vector images are logos, icons, and text. Vector images are often made using Adobe Illustrator or similar programs.
Vector images are entirely scalable, meaning that you can make them larger or smaller without compromising image quality. Vector images are often used in large-scale projects because they can be enlarged without losing quality.
Common File Formats: SVG and EPS, although some all-text PDFs can be vector files.
Tip: Text is naturally made of vectors, but when a file with text is saved as a raster image format, it will rasterize, meaning it loses its vector lines and becomes pixel-based.
Raster Images – Made up of Pixels
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 color transitions. Raster image file types are often PNG, JPEG/JPG, GIF, and TIFF, although some PDFs are rasterized. Videos are also made of pixels, similar to raster images.
Considerations for Choosing Raster Images
- Resolution: Digital image resolution is usually measured in “PPI” or “pixels per inch.” Digital projects viewed on screens only need 72 PPI to display clearly. For printing, most standard printers can print an image at 100 PPI without obvious pixelation, but most photo printers require at least 300 PPI for a high-quality print. (Note: PPI is different than “DPI” or “dots per inch,” which is only about printer quality)
- Dimensions: NEVER enlarge a raster image without using a photo editor—it will likely cause pixelation. For example, when inserting a raster image in PowerPoint, do not drag a corner of the image to enlarge it. Raster images are composed of a fixed number of pixels, so the best way to increase the dimensions of a raster image is to use Photoshop or a similar editing program to decrease the resolution (i.e., the number of pixels per inch).
Raster File Formats & Compression
The file format and compression also affect raster image quality. Here are the 3 most common raster file types and the differences between them:
PNG
PNGs are lossless files that use LZW compression. They are the highest-quality raster images because they offer a larger color palette than GIF files and support transparent backgrounds and layers, unlike JPEG files. PNG files, however, have the largest image file size.
We recommend saving image files as PNG unless you are concerned about file size.
JPEG/JPG
JPEGs are a compressed image file format; the compression level ranges from 0 to 100, with 0 indicating the highest compression and 100 the lowest. This leads to a considerably smaller file size, making it popular for websites and social media.
Unfortunately, JPEG files do not support transparent layers, so anything transparent is usually rendered as white or black.
GIF
GIFs are often animated image files, but can also be static images. GIF files have a significantly smaller color palette than PNGs and JPEGs (256 colors vs. 24-bit RGB), so the image’s original colors may be adjusted to the closest available color in the GIF palette. GIFs support transparency and use lossless LZW compression. Static GIF files tend to be lower quality and are not recommended as primary image files.
Best Practices for Accessibility
Below are some best practices for making accessible digital projects. Most of our Project-Specific Resource pages also include accessibility recommendations specific to that type of project.
Avoid using decorative or cursive fonts. These fonts are difficult to read for those with visual impairments or dyslexia. Keep your choices to Serif or Sans Serif fonts.
Avoid special characters. Those with visual impairments might use a screen reader to navigate your website, and screen readers do not read special characters well.
Keep your text larger than 10-point font. While there are often magnifiers and settings in your web browsers that allow small text to be enlarged, using small fonts is unprofessional and can cause eye strain or add an extra step for those who may want to read it.
Apply good contrast principles. Use a free color checker from a site like WebAIM Contrast Checker or a tool such as Color Oracle to verify that your site is accessible to people with color blindness. Strong contrast, such as light on dark or dark on light, is preferable. (see more below)
Use Alt Text for all images and media – Alt Text is also read by screen readers. Alt Text should be one or two sentences that describe the image or media to someone who cannot see it. You can do this in PowerPoint, Word, websites, and many other programs that use images.
Use media with closed captions or subtitles. This is for those with auditory impairments who may not be able to hear the sound. Automatic captions are usually included on sites like YouTube and are usually fine. If closed captioning isn’t available, make your own transcript of the audio to provide along with the video.
If possible, include videos with audio descriptions. This is for those with visual impairments who might not be able to see everything happening in the video. Audio descriptions are less common than closed captioning/subtitles, so they may not be available.
Link text should also explain the link’s destination. Avoid using link text like “click here” or “see this“! Instead, try something like: Check out the DesignLab website for more information. Too many “click here” links will make it difficult for someone using assistive tools to find them and understand where they lead. This also applies to QR Codes.
Campus Accessibility Resources
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: WCAG AA and WCAG AAA. The first requires a lower contrast ratio than the latter. It is best to have a pass on all fronts, but a pass on WCAG AA is acceptable in most cases.
Digital Copyright
If you are using someone else’s images, videos, or audio, make sure you don’t get into trouble with the creator. While we do not provide legal advice, below we provide some context on fair use policies and recommendations for avoiding digital copyright infringement. Also, we recommend consulting the Library Guide: Copyright for Digital Media Assignments and the UW-Libraries Scholarly Communication Office Website for more information on copyright laws.
Fair Use
According to Stanford University Libraries, “Fair use is a copyright principle based on the belief that the public is entitled to freely use portions of copyrighted materials for purposes of commentary and criticism.” This means that for one to consider their project “fair use,” the reuse of media is not merely copied into that person’s work but is in some way transformed, added to, or changed. The problem with claiming “fair use” is that it is up to the copyright holder to either ignore/allow the use or seek damages. The best way to avoid any copyright concerns is to ask the copyright holder for permission or to avoid using copyrighted work altogether.
Creative Commons
Coming soon!
Make an Appointment
Get personalized recommendations and feedback on your project, get clarification on the information above, or ask different questions by scheduling a one-on-one or small-group appointment!