Paragraphs

chapter 5

page 104

The main course continues in this chapter, but here you will contrast the elements you organized in the previous chapter. Throughout this chapter, keep the next phase in mind: “unify the parts.” Together these three constitute the main course.

“Meat” can be beef, chicken, fish, portabella mushrooms, tofu, or whatever you choose as the main event of your meal. In this course, or phase, you will introduce contrast into your design. Contrast creates excitement and visual appeal that helps your audience focus on what’s important. Start with the focal point you created when you organized the layout in the last phase. Draw attention to this focal point by making it much larger and reducing the size of a secondary graphic. Then emphasize the size difference by reducing the opacity on the smaller image. This is just one of the many ways you can add contrast and attract attention.

Contrasting elements will garner more attention. In a line of fliers, which one stands out? It is almost always the one with the most contrast. So think of how your audience will use your design and decide how much contrast is appropriate.

YOU CAN IMPROVE THE LAYOUT AND FINE TUNE THE MESSAGE BY ADDING THESE PRINCIPLES OF CONTRAST:

1. Asymmetry – Use unpredictable, dynamic imbalance.
2. Value – Add variations of light and dark.
3. Color – Control perception of hues and light

page 106

1. Break the grid – Make a shape boldly protrude into the white space.
2. Overlap shapes – Create visual interest by overlapping shapes.
3. Vary shape sizes – Add a small shape to contrast a large image.
4. Contrast typefaces – Try a 70-point title with 10-point body copy.
5. Reverse values – Place darkest values in the background with lighter values on top.
6. Vary opacities – Reduce opacity of less important elements to show off the focal point.
7. Blur backgrounds – Blur a background image to simplify and control value.
8. Choose opposing color schemes – Use complimentary, triadic, or tetradic colors.
9. Add small, bright accents – Add a small splash of very bright color!
10. Break the rules – Be bold and do something unexpected

page 108

Let’s bend a few rules, shall we? This is what asymmetry is all about. You’ve just finished alignment, which is safe but boring. It works well but is too serious for some situations. There are times when the uneven, juxtaposed, and misaligned designs are appropriate, but using these techniques is an advanced design style. Alex W. White explains, “Asymmetry requires the use of unequal shapes and uneven spaces… Asymmetrical design doesn’t guarantee a dynamic, lively design. But the structure is more flexible and allows greater freedom of expression to reveal the relative importance of the content.”

page 109

Asymmetry is similar to the concepts we discussed when we created a dominant focal point and designed with the rule of thirds, but asymmetry is more dramatic and out of balance. It relies heavily on scale. Scaling your elements means varying their size.

You can and should vary shapes and type to create a focal point. Size variance also adds visual interest to a layout. Unfortunately, when asymmetry sits down at the table, new designers often struggle to start a conversation. Let me help you!

page 110

Have you ever seen a monkey peel a banana? They do it from the bottom, because it is much easier to open that way. Further, a friend showed me another method: snap the banana in half, peel and all! My point? There’s more than one way to peel a banana.

In the second example, I used the Pathfinder tool in Illustrator to cut the elephant in half to confine it inside the box. You can achieve a similar “partial cutout,” in Photoshop by trimming away part of the image background. Make a selection around a subject in a photo; then use a layer mask to hide part of the background.

page 111

The same holds true for design: there’s more than one way to create a successful layout. Here we have three approaches to a game box design. They all work, but for different reasons. The first example uses center alignment and complete symmetry. It is safe and pleasant, though a bit predictable and elementary. The second example uses diagonal balance and asymmetrical contrast. The third example uses even more asymmetry to create a dynamic and advanced layout. This layout holds our attention longer.

Here’s why: Artistic alignment in the title allows the dot of the “i” to create an “eye” for the elephant. A triadic color scheme (three colors that are equally spaced around the color wheel, such as red, yellow and blue) adds more contrast. Color schemes will be reviewed later in this chapter. This layout also defies the rule of strict alignment. One elephant protrudes from the light gray rectangle then meets another elephant head-on. Asymmetry is the driving force behind the success of this layout.

page 112

Grids are commonly used to organize a layout. In the first shape map (layout) for the Photographics Monthly newsletter, you see a seven-column/seven-row grid. While the alignment is good, there is inadequate white space and contrast.

page 113

In the second layout, you see two examples of breaking the grid. The gray box with the white border to the right jumps out of the grid with no respect for alignment. Using asymmetry, this box creates visual interest and calls attention to itself. It breaks the rules of alignment in the pursuit of contrast that keeps the audience interested.

Another example of asymmetry also appears in the second layout. Can you guess what it is? The large grey square at the bottom runs, or bleeds, off the page. Additionally, it is larger than the other elements, and it breaks the grid.

page 114

The third layout of the same newsletter shows examples of overlapping shapes. One dark box with a white border breaks out of the grid. This time it interacts with other shapes in the design. It goes under the lighter gray rectangle below it, and that rectangle overlaps the large, full-bleed box at the bottom. Also, notice the lighter gray value of this overlapping box. In fact, both of the overlapping boxes are different in value, adding asymmetry and contrast.

See the three squares in the sidebar? This is another example of overlapping. One of the three squares on the left is darker and more contrasting. This entire layout introduces contrast, while still respecting the design principles of Shape, Proximity, and Alignment from the “Organize” phase. In this third layout, the dark gray rectangle with the white border aligns with some lines of text underneath it. Even though the lighter gray rectangle breaks the grid and overlaps two other rectangles, its right edge and bottom edge align with other elements in the layout.

Asymmetry is similar to the rule of creative alignment we discussed in the last chapter: “If you can align… DO! If you use creative alignment, have a good reason.”

page 115

Add a small shape to contrast a large image on the page. In this same example, assume that the large, full-bleed square on the bottom is a photograph. It is a dominant anchor, perhaps even a focal point, in this layout. What makes it even bolder is the contrast it has with the smallest shapes on the page – the three squares in the sidebar.

The FOCUS process has five phases: Formulate-Organize- Contrast-Unify-Simplify. The principles in each phase build on each other as we move through the process. -THIS IS OUT OF PLACE (ERIC, THIS ISN’T IN THE BOOK)

page 116

Try a 70-point title with 10-point body copy. The title size in this formula can, of course, vary up or down. In our example here, the title font is 55-point (often abbreviated “pt”) size. Achieve white space, along with contrast, by keeping your body copy small. I cannot stress this enough…

Keep your body copy small. Period. Enough said.

See how that small typeface captured your attention?

Varying typeface sizes can “shout” or “whisper” to an audience. Use this tip to create logos and titles.

page 117

There are several ways of contrasting words in a title or logo. We’ve talked about the first, which is by varying the font size. The second way is through font style. In the case of the “Photographics Monthly” logo, I used only one typeface, Gotham. I chose it because it comes in several different weights (thicknesses).

In this logo, I varied the size, weight (thickness), and form (shape). The word “photographics” is four times larger than the word “monthly.” “Monthly” is also lighter in weight. I used three different weights of the same typeface for this logo: “extra light,” “light,” and “ultra.” I also added more contrast to the word “monthly” by using italics and uppercase. Use italics and uppercase sparingly, though! In this case, I wanted to emphasize how often the newsletter is published, so I opted for a small splash of italics. Remember, if you bend a rule, have a good reason.

I recommend using Adobe Illustrator for creating logos, but for something simple like this, Adobe InDesign, which is normally used for page layouts, will do the trick.

1. I went to Type > Create Outlines to enable manipulation of the “p” in graphics. Note: Textcan no longer be changed once you create outlines, so be sure your copy is finalized.
2. I used the direct select tool (the shortcut is the “A” key) to drag down the descending
   portion of the “p.”
3. I used the rectangle and ellipse shape tools to draw a simple camera.
4. I also used ruler guides in InDesign to ensure the shapes and text were aligned.

page 118

There are three general type categories: serif, sans serif, (without serif) and decorative/script. Robin Williams, author of The Non-Designer’s Type Book, gets more specific and divides typefaces into the following six categories

1. Oldstyle – Serif typefaces with moderate thick-to-thin transition
2. Modern – Serif typefaces with radical thick-to-thin transition (not for body copy)
3. Slab Serif – Serif typefaces that are monoweight (no thick-to-thin transition)
4. Sans Serif – Monoweight typefaces with no serifs
5. Fringe or Decorative – Trendy, fancy typefaces (use sparingly and never for body copy)
6. Script – Flowing typefaces that appear to be hand-written (use sparingly and never for
   body copy)

Using the right typeface can make or break your design. Spend time trying out different options. Beginners often struggle when selecting typefaces, but a few guidelines will ease this task. First, you need to be able to recognize a serif. This is the little extra piece added to the ends of letters. Notice the diagram that shows the same word in a serif typeface and sans serif typeface.

When selecting typography for a project, choose one legible typeface with varied weights, or choose two typefaces with contrasting styles and weights.

Generally, beginners should avoid using two different serif typefaces together. For example, do not use Garamond with Times New Roman.

They both have serifs and do not have enough contrast. As you get more practice, you might be able to use two serif typefaces if they have different weights. Beginners, stick with typefaces from different families.

Usually, combining a serif typeface with a sans serif typeface (without serifs) gives the most contrast and visual appeal. Try using Helvetica Bold for your titles (a sans serif) with Garamond or Times for your body copy. This example works well because these typefaces have contrasting weights (thickness) and styles (serifs). You could also use Helvetica light for body copy because it is the same typeface and does not conflict with Helvetica Bold.

page 119

When selecting typography for a project, choose one legible typeface with varied weights, or choose two typefaces with contrasting styles and weights.

page 120

Humans are drawn to light things on dark backgrounds. Conversely, bold, dark colors demand our attention when placed on light backgrounds. Elements with the most contrast in value will demand the most attention. Using different values for various elements helps define the focal point and create visual hierarchy

Value contrasts between different elements help communicate messages to the audience. High value contrast typically provokes emotion or evokes action. Low contrast between values is subtle and calming. Consider the feeling you get when you view these two images. Notice how the low contrast image on the right is restful and relaxed, but the image below is dramatic and stunning.

page 121

Viewers will perceive values differently based on the interaction and placement of those values. In the first diagram, the two smallest dark gray splotches are the same value (75% black), yet the right splotch looks lighter because of the black background. In the second diagram, the 45% gray background is gone, and the small splotches seem closer in value. In the third diagram, the small shapes appear to be almost the same value because the value of the larger shape is lighter in comparison. Even though the values of the small splotches never change, they look different because of the backgrounds.

page 122

Smaller elements can become more prominent through the use of contrast. In the first example, the larger shape on the right is a dominant focal point. When the values are reversed, the smaller object becomes more dominant. If these examples were reversed and shown on a black background with white and gray shapes instead, the same principle would hold true. Be mindful of the impact value can have on elements. Elements with more contrast in value are more dominant, regardless of size. Use this principle to develop visual hierarchy and control the flow of the piece.

page 123

Colors also have different values. Purple, for example, has a darker value than yellow, so a smaller purple object may be a more dominant focal point than a larger object with yellowgreen color. See how the focal points change in the illustrations above?

It is important to pay attention to the value of colors because people who are colorblind may not be able to see certain colors. They can, however, differentiate values, which will help them understand the message. According to the Institute of Human Vision, one in five men and one in 10 women has some degree of colorblindness. Consider this example: If you have three shapes that vary in color, but are too similar in value, a colorblind person may not be able to name the colors used. Use colors with differing values to assist colorblind people.

page 124

Chiaroscuro is an Italian word describing the dramatic contrast between light and dark. Rembrandt was a master of this technique because he often used dark shadows to showcase light focal points. Notice how he adds the most light to his central character in this scene.

Light plays a huge role in conveying emotion in design. The chiaroscuro effect is strong in these two photographs, captured by Kate Anderson, my former teaching assistant. In the first example below, notice the black shadows on the left side of the pear. We, the viewers, are drawn into the light areas.

The second image on the right has less contrast and produces a different effect. Stronger contrasts are dramatic and attract attention, while softer, subtle lighting is calming and neutral.

1. Scale (size)
2. Color (almost complementary)
3. Position (high and low, opposite corners)
4. Concept (flying vs. grounded; wings
   vs. arms)

page 125

Consider the direction of the light when determining where to put a shadow. Keep that direction in mind while you design. When using an image that is lit from the left side, keep that light direction when adding design elements.

page 126

Color is arguably the most powerful principle. Color, and the way color interacts with other colors, can communicate a great deal to your audience. Understanding the basics of color theory will help you select colors that will communicate more effectively. Balance or conflict is created simply by color choices.

From my own study and experience, I have come to believe color theory is just that – theory. While based on facts about light, math, and science, many variables muddy things up. While watching my sister, the professional watercolor artist, I noticed her masterful use of color. Her own approach set her apart from other artists. She sold more paintings at art shows than most of her colleagues because of her ability to combine and blend colors.

Good use of color is critical for good design. With digital design, we don’t worry about mixing actual paint. We can use color numbers to get an exact color match. Still, mixing colors digitally is best done with a little color theory under your belt. In no time, you will be able to set-up your own custom color swatches in your design software, such as Adobe InDesign. This saves time as you work on a project and helps you stick to a color plan. Each time you need to add color to an element, you can quickly look at the color swatches and choose one to color that object.

page 127

Additive colors were first explained by Isaac Newton, and they define the properties of light. These are the colors used to create what you see on a computer screen or television. The primary colors of the additive color wheel are red, green, and blue. Mixing all three creates white. Blending red and green creates yellow. And combining blue and red produces magenta. Blue and green merge to form cyan. So yellow, magenta, and cyan are the secondary colors in the additive scheme.

Subtractive colors are created when you mix pigments or dyes. This traditional color wheel is called “subtractive” because when light falls on a surface, it is absorbed, and we see the color being reflected. Certain pigments absorb particular wavelengths of light, and the remaining wavelengths are reflected to our eyes. Thus, the colors produced are “subtractive.” This is the color theory many of us learned in elementary school. The primary colors of the subtractive color wheel are red, yellow, and blue. If you mix the primaries, you create the secondary colors: orange, green, and purple. The subtractive color wheel is the one used in design software.

Mixing colors is not an exact science. When mixing paint, the results are not always true because of the variance in pigments. For example, mixing the three primary colors of the subtractive color wheel usually produces a muddy brown color, rather than true black. Generally, you mix white to produce a lighter tint of a color, and black to get a darker shade. Please realize there is a whole world of color theory that is fascinating and somewhat controversial. We only touch the surface here. It only takes a quick Internet search to reveal the myriads of theories about color.

Some artists add a lighter, adjacent color, along with white, to get a richer tint that does not appear washed out. To get a darker shade, these artists add the closest complementary color that is a primary color, rather than adding black.

There are others who use what they call the “true color wheel.” This wheel uses magenta, yellow, and cyan as primary colors, with red, green, and blue as secondary colors. Orange and violet are only by-products of mixing colors. Proponents of this theory say they can mix truer colors with paint.

page 128

The three properties of color are hue (color), saturation (intensity), and brightness (value). Hues are the actual colors. Think of saturation as intensity. Brightness is the lightness or darkness. Darker values are called “shades,” while lighter values are “tints.”

For our purposes, we will use the subtractive color wheel, with its twelve colors, or hues. First, the primary colors are red, yellow, and blue. Mixing the primary colors creates secondary colors. Secondary colors are orange, green, and violet. If you blend a secondary color with a primary color, you get six different tertiary colors.

The outer rings of this color wheel show the shades of each hue, and the inner rings show the tints. The hues of each color are between the shades and hues.

page 129

Each color wheel varies from the next. Just look at the different primary blue and secondary green colors in several color wheels and you will see what I mean. Some are dark and rich, while others are bright and harsh. Some variances are due to color shifts in printing, image quality, or screen calibration. The colors I use here are my own favorites that I developed after studying many differing philosophies.

page 130

To make color adjustments in a software program, open the color picker. Adobe Illustrator uses numbers for H-S-B. The H refers to the hue (color). The S is for saturation (intensity), and B is for brightness (value).

The hue (H) numbers range from 0 to 360 degrees. Each color is represented by a different degree on the color wheel. Red is at 0 degrees on the wheel, and green is on the opposite side at 180 degrees. Yellow is 120 degrees. Blue is 240 degrees.

The saturation (S) is listed by percentage. Zero represents no color, while 100 is full saturation of that color.

The brightness (B) is also listed by percentage. Zero is white and 100 is black; tints are low numbers and shades are high.

Many design software programs will also list RGB and CMYK color modes. RGB (red, green, blue) colors are what you see on digital screens. With RGB, the three colors are represented by a number from 0 – 255. For example, white is created with 255 of each color: R=255, G=255, and B=255. Many Inkjet printers can print RGB images, but most professional printers use the CMYK mode: cyan, magenta, yellow, key (black). This is because printers have all four colors of ink.

Theoretically, mixing cyan, magenta, and yellow should produce black, but in reality, the color is a muddy brown. So, a premixed black ink is used.

HEX colors are used for the web. This color mode is convenient because you just type in (or copy and paste) one number, preceded by the pound sign. For example, the hex color number for steel blue is #225F84.

page 131

Colors vary greatly from monitor to monitor, often causing printing issues. In general, Apple monitors are more back-lit. Designers using a Mac often turn down their screen brightness by fifty percent to compensate. Calibrating monitors and printers is a frustrating part of the job. This frustration can be minimized if you know the settings that work best on your printer and stick with those settings. It is largely trial and error. Even expensive calibration devices can’t combat humidity and other variables. It takes a lot of testing to get the final print. Just take a deep breath and remember this problem is
not unusual.

When printing at a print shop, export the document as a “press-quality pdf,” which will ensure it is ready for print as a CMYK document with high resolution of 300 pixels per inch.

page 132

Learning how colors interact will help you choose harmonious combinations. Complementary, split complementary, triadic, tetradic, monochromatic, and analogous are harmonious color relationships. It is safest to choose a color scheme that fits one of these six color relationships. There are endless combinations to try! If you stray too far, you can end up with discordant colors that can be disturbing and create conflict and tension. Clashing colors attract attention but can produce disharmony.

Generally, greens, blues, and violets are cool
colors, while reds, oranges, and yellows are warm colors. It is important to consider your audience! Cool colors are more calming and businesslike, while warm colors are more lively and approachable. A combination of warm and cool colors is effective, but consider which color(s) will be dominant and what those colors will communicate. Try various shades and tints of your main colors to add depth, interest, and repetition.

page 141

Match the 12 images on the following four pages with their color scheme. Find the answers and color swatches on the pages following this exercise.

Can you see the Big Split color scheme in these images? Try to find the colors below in the images above. It’s fun to start looking at nature, architecture and portrait clothing, etc. in the terms of color schemes. Now try the exercise on the following pages by matching the images with their color schemes.

page 148

It is helpful to create color swatches in your Adobe software program when you choose your color scheme. Here’s how I create a typical color style guide for a project. I open my color wheel so I can eyedrop color schemes. (You may download my color wheel image to eyedrop from at www.carynesplin.com/visualfocus). If I want to use three colors, I create three empty boxes and use the eyedropper to fill the boxes with colors from my color wheel. I often try different triadic and split complementary options. If I want violet to be my main color, then I look at the color wheel to see if I like its triadic cousins, skipping three colors on each side. This gives me teal and gold for my other two options. I test these colors together by filling my empty boxes with color using the eyedropper tool. I often use the darker shades, and sometimes the tints. If I don’t like that combination, I try the split complementary: red-purple, yellow and green, etc. This continues until I find a combination that works for my project.

page 149

1. Open the CMYK color sliders in Adobe InDesign.
2. Create some boxes or shapes on the page.
3. Open the Swatches Palette and choose a starting color. Example: If you want to mix butterscotch, start with the yellow swatch.
4. Choose the Color Palette and change the view to CMYK (click the dropdown option in the top right corner of the box.).
5. Add magenta by moving the magenta slider to the right. Voila! Butterscotch! For a darker, muted version, add a little cyan or black. If you want a lighter version, move the yellow slider to the left.
6. When you create a color you like, save each color as a swatch in the Swatch Palette. When you are designing, you can use the colors in the Swatch Palette for consistency and ease.

Don’t save the swatches as you work. You will create too many and get confused. Make your swatches only after you have tried all the colors together and you like the whole scheme.

page 150

1. Look to the sides: When moving the CMYK sliders in InDesign to mix colors, look at both extreme sides of the slider. If the left side appears as yellow, and you move the slider toward the left side, you are going to be adding more yellow. Watching the colors on the far sides of each slider will help you learn which way to move your sliders for a desired color. This instruction will make more sense when you try the following exercise.
2. Start in the center: Start by moving the cyan, magenta, and yellow sliders to the center (50%), but keep the black slider to the left at 0%. Look at the colors in the sides of each slider! Ooh, there are some great colors there. On the left side of the cyan slider, you see a great salmon color, and on the right, a beautiful teal. Move one slider in one direction and the other slider in the other direction. Awesome colors, huh? Remember to look at the colors in the sides of the slider to know what colors you want to add more of or less of.
3. Mute down your colors: Mix in a little of a color’s complement if you want a less intense color. If you add some blue to orange, it will create a muted, earthier rust-orange that may be just what you want.
4. Add gray to your colors so they blend better. If you move your slider down and to the left, you will get a grayer, muted version of the color, which often works much better.
5. Practice, practice, practice: This technique takes some work, but you will get the hang of it in no time.

page 151

1. Go to the Swatches Palette and choose the cyan (turquoise) swatch.
2. Open the Color Palette and change the view to CMYK (To do this choose the dropdown in the top right corner).
3. The cyan slider is all the way to the right and the other three sliders are all the way to the left.
4. Notice the right side of the yellow slider looks green.
5. Create a teal color: Move the yellow slider to the right.
6. For deep blue: Move the magenta slider to the right.
7. Move the cyan slider to the left and play with the endless combinations and hues.

Now, let’s say you want lavender. You can move the cyan slider to the left to about 35%. Then, move the magenta slider to the right until you like the hue. To get a lighter tint, move both the cyan and magenta sliders to the left. If you want a muted lavender or gray, move the black slider to the right.

page 152

A great way to start your color scheme is to use an image or graphic to inspire you. You will be surprised at how many colors are in one image, like the example shown on the right. In Adobe InDesign or Illustrator, zoom in on the image and use the eyedropper tool to select several of the colors in the image to (ERIC, TEXT MISSING?)

1. Set up a palette: Create square shapes for your swatches. Try nine or eighteen on two sides of the image, so it will be easy to get colors from the light and dark areas.
   NOTE: In an Adobe program, you can create one square, then hold “Option” (“Alt” on a PC) and drag the shape to create quick, uniform duplicate squares. Holding “Shift” will keep them aligned.
2. Extract colors with the eyedropper: Use your eyedropper tool to sample colors from the image and place them into your swatches. Try to get a variety of warm and cool colors, as well as dark and light.
3. Locate the colors on a wheel: Find your colors on the color wheel and see how they might fit with one of the color relationships: complementary, split complementary, analogous, monochromatic, triadic, and tetradic. Choose a main color, secondary color, and one or more accent colors.
4. Test the color scheme: Create a pleasing color scheme by trying out your colors in a basic shape map with background shapes: a large title, subtitle, and a few repeating elements, such as boxes or lines. Try various combinations and gather opinions from associates.

page 153

In this diagram, I sampled the colors from the image. I chose a complementary color scheme using blue and orange. Then I added five additional accent colors. Don’t be afraid to tweak the colors as you go. Here, I did not get the blue and orange used in the final layout until I adjusted the colors.

page 154

Using one of the six color relationships is usually a safe bet. On rare occasions, it can be effective to use colors that clash, but avoid using the following colors next to each other because they cause negative effects for many people: eye strain, double vision, “after images,” and visual vibrations.

1. Red and blue
2. Red and green
3. Orange and blue
4. Yellow and violet

It helps to separate clashing colors with white. Avoid fluorescent colors if possible. Muted colors produce better effects. Additionally, darker shades of complimentary colors together don’t clash as much.

page 156

1. Can you name least three of the ten ways you can get bold?
2. What are the three key principles of contrast?
3. What is asymmetry?
4. What is the general rule of typography?
5. If I use Helvetica Bold for my title typeface, what are two acceptable options I could use for my body copy?
6. What is chiaroscuro lighting and who made it famous?
7. What are the three color properties?
8. How do you get a tertiary color, like red-purple?
9. What are the seven harmonious color schemes?
10. How can you sample colors from a color wheel or image in Adobe InDesign to create your own custom color swatches.

 

1. Break the grid.
2. Overlap shapes.
3. Vary shape sizes.
4. Contrast typefaces.
5. Reverse values.
6. Vary opacities.
7. Blur backgrounds.
8. Choose opposing color schemes.
9. Add small, bright accents.
10. Break the rules. How can I communicate with them?

page 157

1. Bend the rules. Balance is boring.
2. Find new ways to peel a banana.
3. Break the grid.
4. Vary shapes.
5. Contrast typefaces.
6. Follow the general rule of typography.

 

1. Place values for best interaction.
2. Use value contrast for hierarchy.
3. Remember. color has value.
4. Add emotion with chiaroscuro

 

1. Learn basic color theory.
2. Understand how light affects color.
3. Learn color properties: Hue – Saturation – Brightness. Tertiary colors are created bymixing a primary color with a secondary color.
4. Grasp color modes: HSB – RGB – CMYK – Hex.
5. Select harmonious color schemes: monochromatic, analogous, triadic, tetradic,complementary, split complementary, big split complementary
6. Create custom color swatches.
7. Use colors from an image.
8. Avoid troublesome combinations.

Choose one simple, legible typeface with varied weights, or choose two typefaces with contrasting styles and weights.

Generally, beginners should avoid using two different serif typefaces together. For example, do not use Bookman Oldstyle or Garamond with Times New Roman. They all have serifs and do not have enough contrast. As you get more advanced, you can get away with using two serif typefaces if they have a lot of contrast, but they often have conflict and not enough contrast.

It is much better to combine a serif typeface with a sans serif typeface (without serifs). For example if you use Helvetica Bold for your titles (a sans serif), you could use Garamond or Times for your body copy because they contrast in weight (thickness) and style (serifs). You could also use Helvetica light for body copy because it is the same typeface and does not conflict with Helvetica Bold.