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!
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:
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:
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:
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:
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.
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 – 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:
- Choose no more than 3 colors (not including white, grey, and black) – Balance with 60% primary color, 30% secondary, 10% tertiary.
- 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.
Color Theory
There are lots of articles on the internet about color theory. Here are a few we recommend:
A Quick Guide to Choosing a Color Palette
What Is Color Psychology And Why Is It Important In Marketing?
The Designer’s Guide to Color Theory, Color Wheels, and Color Schemes
Programs for Color Selection
Adobe 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 – 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 – 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
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
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
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
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
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
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.
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
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
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.
Copyright, Reuse & Attribution
If you’re not creating your own images, you need to be sure that any images you use are not going to get you into trouble with the image creator. While we do not provide legal advice, below we will give you some context on fair use policies and recommend how to avoid digital copyright infringement. Also, we recommend consulting the Library’s Guide to Copyright in Digital Media and the UW-Libraries Scholarly Communication Office Website for more information.
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 as “fair use” the reuse of media is not just copied into that person’s work, but is in some way transformed, added to, or changed. The problem with claiming “fair use” is that is in the mind of the copyright holder to either allow the use or seek damages for the use. Read about some strategies for fair use from the OWL at Purdue University. The best way to avoid any issue of a fair use case is to ask permission of the copyright holder or to avoid using copyrighted work altogether.
Use copyright free images
There are a lot of sites out there for finding copyright free images. Here are some of the basic terms used to describe image databases, so you can be sure to find the good images that are safe to use.
- Royalty-Free: This allows you to use intellectual property without having to pay license fees to use the image.
- Membership: You must sign-up to the site in order to use their royalty-free images. Some sites will charge you for membership or offer a free membership, but require you pay to download images. They are often not really free. Try to avoid membership based programs because there are many other options that are actually free.
- Commercial Use: You’re permitted to use the images for any type of business venture. (Hint: Typically if something is allowed for commercial use, it is also allowed for educational use.) Some commercial use image databases will require that you pay for the images still.
- Non-Commercial Use: These images can be used for educational purposes and other non-business related ventures. Again, some non-commercial use image databases will require that you pay for the images still.
- Public Domain: If any image was created in the United States prior to 1923 then that image is part of the public domain. This means that you are allowed to copy, modify, or distribute these images without seeking permission.
- Attribution: You can use these images without asking permission as long as you give credit to the creator. (Hint: Think of this as similar to citing the author in a paper. Most creators will even give you a guide for how to attribute their work!)
- Labeled for Reuse: (from Google Image search) This means that the creator has allowed you to use their work, but not modify it. You may still need to attribute the work. (See the Helpful Tip about Google Image search below.)
- Labeled for Reuse with Modification: (from Google Image search) Like above, the creator has allowed you to use and modify their work. You may still need to attribute the work. (See the Helpful Tip about Google Image search below.)
- Creative Commons: This series of licenses is used to provide levels of control for the creator and their work. Creative Commons Zero (CC0) license is your friend, because it does not require that you attribute the creator and there are no rules on the purpose and where the image can/cannot be displayed. There are many other levels of the creative commons licenses, so check out this helpful infographic to learn more.
Helpful tips:
Avoid using Google Image search for non-educational purposes. While they have filters for reuse and non-commercial reuse, many times the labels are not from the original creator, but are from someone who has already reused the image and may have done so in violation of copyright laws.
Check out our Image & Font Database page for links to online image databases and descriptions about their license uses.
For educational use, when in doubt, always attribute or cite the creator.
Citing Images (Educational Use)
Sometimes simple attribution of an image is not enough for an educational setting, and you will need to properly cite an image. Here are some guides for citing images:
MLA Citation Infographic | Citing Images in MLA Style 8th Edition | MLA Style: Electronic Sources (Web Publications)
Chicago Style Bibliographic Entries for Images and Figure Captions | Turabian Citation Style Guide, 8th Edition: Images
APA Citation Style, 7th edition: Electronic Image | APA Citation Style, 7th edition: Electronic Sources (Twitter, Facebook, etc.)
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!