Doug Opel Ann Zinyemba
WordAccess ExcelPublisherPowerPoint
Essential Question: What can I do to make a project look great?
NTES Standard:
4. Technology Communication Tools
b. Students use a variety of media and formats to communicate information and ideas effectively to multiple audiences.
By the End of Grade 7- Students demonstrate knowledge of multimedia tools and concepts used by the media industry (e.g., music, games, video, radio, TV, Web sites) to entertain, sell, and influence ideas and opinions.
By the End of Grade 8- Students know how to use a variety of media and formats to design, develop, publish, and present products (e.g., presentations, newsletters, Web pages) that effectively communicate information and ideas about the curriculum to multiple audiences.
Resources: Copies of Rubric/Self Check
Student Rubric: Click Here
Points: Points
Save As: “LastNameFirstIntial”DPrinciples
Directions: Podcast
Have you ever looked at a design and said to yourself, “Wow! That person is really good! Boy, I wish I could make something like that!” Chances are there really is no reason why you couldn’t do what they did. Even though some people are naturally talented, those people also find themselves practicing these skills to improve and become even better because they enjoy it. Someone who is good at baseball, for instance, will never become a professional without practicing, playing hard, and getting specialized training in the discipline.
Similarly, though good design is an art, everybody needs training— even though some people have a natural knack for design. The conscious application of the principles found in this chapter are used in every field of art to create pleasing and memorable effects, from interior decorating to fashion design to painting and, yes, to desktop publishing.
Topic Choices
Visual Elements vs. Design Principles
We think of the elements as the basic visual material with which to make art. Is hard to imagine anything visual without the use of one or more of these elements. We think of the principles as ways to work with and arrange the elements.
Back to Choices
Visual Elements
Line- a mark on a surface that describes a shape or outline. It can create texture and can be thick and thin. Types of line can include actual, implied, vertical, horizontal, diagonal and contour lines. (note: Ken does not list "psychic line" - that was "new term" to me)Color - refers to specific hues and has 3 properties, Chroma, Intensity and Value. The color wheel is a way of showing the chromatic scale in a circle using all the colors made with the primary triad. Complimentary pairs can produce dull and neutral color. Black and white can be added to produce tints (add white), shades (add black) and tones (add gray).Texture - is about surface quality either tactile or visual. Texture can be real or implied by different uses of media. It is the degree of roughness or smoothness in objects.Shape - is a 2-dimensional line with no form or thickness. Shapes are flat and can be grouped into two categories, geometric and organic.Form - is a 3-dimensional object having volume and thickness. It is the illusion of a 3-D effect that can be implied with the use of light and shading techniques. Form can be viewed from many angles.Value - is the degree of light and dark in a design. It is the contrast between black and white and all the tones in between. Value can be used with color as well as black and white. Contrast is the extreme changes between values.Size - refers to variations in the proportions of objects, lines or shapes. There is a variation of sizes in objects either real or imagined. (some sources list Proportion/Scale as a Principle of Design)These elements are used to create the Principles of Design. Principles are the results of using the Elements. When you are working in a particular format (size and shape of the work surface) the principles are used to create interest, harmony and unity to the elements that you are using. You can use the Principles of design to check your composition to see if it has good structure.
There are many basic concepts that underly the field of design. They are often categorized differently depending on philosophy or teaching methodology. The first thing we need to do is organize them, so that we have a framework for this discussion.
We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition. By comparison, the elements of design are the components of design themselves, the objects to be arranged.
Let’s begin by focusing on the principles of design, the axioms of our profession. Specifically, we will be looking at the following principles:
Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.
Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry1. Symmetrical balance is also known as formal balance.
Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.
Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.
Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.
Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.
In the below example, the trees act as the dominant element, the house and hills as the secondary element, and the mountains as the tertiary element.
The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups2.
Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.
Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure. In the below examples, we compulsively fill in the missing information to create shape.
Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes down the direction of the road ending up in the upper right corner of the frame of reference. There is no other dominant object to catch and redirect the attention.
Items of similar size, shape and color tend to be grouped together by the brain, and a semantic relationship between the items is formed. In addition, items in close proximity to or aligned with one another tend to be grouped in a similar way. In the below example, notice how much easier it is to group and define the shape of the objects in the upper left than the lower right.
There are many additional concepts that are related to the principles of design. These can include specific terms and/or techniques that are in some way based on one or more of the above tenets. In they end, they add to the collection of compositional tools available for use by the designer.
Contrast addresses the notion of dynamic tensionÔthe degree of conflict that exists within a given design between the visual elements in the composition.
Positive and negative space refers to the juxtaposition of figure and ground in a composition. The objects in the environment represent the positive space, and the environment itself is the negative space.
The rule of thirds is a compositional tool that makes use of the notion that the most interesting compositions are those in which the primary element is off center. Basically, take any frame of reference and divide it into thirds placing the elements of the composition on the lines in between.
The visual center of any page is just slightly above and to the right of the actual (mathematical) center. This tends to be the natural placement of visual focus, and is also sometimes referred to as museum height.
Many would place color and typography along side the five principals I have outlined above. I personally believe both to be elements of design, so I’ll give them some attention in my next column. In addition, both topics are so robust that I plan on writing an entire article about each of them in the future.
In Web design it is too easy to get engrossed in the many unique constraints of the medium and completely forget some of the underlying concepts that can strengthen any design. To better discuss such concepts, we need to step back from our specific discipline and look to the history of the field. It is here we find the axioms of our profession.
In this article we looked at half of those axioms, the principles of design. The principles of design are the guiding truths of our profession, the basic concepts of balance, rhythm, proportion, dominance and unity. Successful use of these core ideas insures a solid foundation upon which any design can thrive.
In the next column, I will discuss the elements of design—the basic components used as part of any composition including point, line, form (shape), texture, color and typography. Comments or suggestions are welcome and appreciated.
There are many resources available about all of the topics covered in this article, both online and off. The following is a small list of some of the ones I am aware of, but is by no means exhaustive.
How Do I Start the Design Process?
The design process is a procedure developed to help people develop effective page design. Like a spiral, the design process sometimes seems to bring you back to the same place, even though you are, in fact, further along than you were.
During the design process, there is a constant need to review your work and determine if you are meeting the needs of the client and the audience. Often, it is helpful to ask for another opinion from somebody else, who may give you insight by looking at your design from a fresh perspective. That person’s feedback is valuable, but it is not the final opinion. That final opinion belongs to your client.
Before you Design
Before you even begin to work on a specific project, you should already have begun the design process.
Pay attention. Designers do not work in a vacuum. Every designer needs to see examples of good design. Pay attention to the things around you. Did a billboard make you look? How? What was it the caught your eye? Did you find yourself reading an advertisement in a magazine? Why? What did you read first?
We can also learn from negative examples. What was hard to read about the flyer? Did the flyer use the wrong kinds of fonts, or was the leading too tight? Were the words too cramped, or the line length too long? Did the choice of colors clash? Don’t be surprised. There is still an awful lot of bad design out there. Notice elements in a design that impede its effectiveness and learn from their mistakes.
When you are shopping and you see a good brochure, or a well‑designed newsletter finds its way into your mailbox, don’t ignore them or throw them away. Think about what makes the design effective. Be able to put it into words to explain it.
Begin creating what Graphic Designers call a swap file (also known as a morgue). This is simply a collection of good designs by other designers. When a design idea is needed, this can often be just the place to go for inspiration. Copying everything about a design is sure to get you into trouble, but feel free to use these examples to spark your imagination.
Additionally, find good ideas in your local new or used bookstore. There are always sections of books about design in most every bookstore. Shop these places for good design ideas, too. This process of looking for good design around you will help to tune your eye to the latest trends, use of colors and fonts and improve your designs. Being able to put these design ideas into words that describe how they are effective trains your mind to think in the terms of a graphic designer. Collecting the examples will help you for many years to come and give you a place to start when faced with a deadline and a client.
Meeting with a Client
When meeting with a client, be prepared to ask a lot of questions. Frequently, the client has some expectation of what they would like to see, but they do not know what to say. It will be your job to draw out what the client would like to see. Asking questions will help you frame the job and may avoid redesigns and increase customer satisfaction.
Ask about the audience, the tone of the advertisement, how it will be printed, what the budget for printing will be. The answer to these questions will help you decide what you can do in the budget allotted.
Beginning a Design
When you begin a project, start by planning the project. You should start by drawing thumbnail sketches of what you could do. Use squiggly lines for small text and quick shapes for other items. Be quick; don’t spend too long on these sketches. They are being used to help farm ideas from your imagination. If the client is going to see sketches before continuing, then create new sketches based on your best ideas, but do not show your client your rough ideas. These sketches are for your benefit alone.
Write key words and determine the placement of headlines and titles. After you’ve drawn a thumbnail sketch, create another one that is different from the first. Try different art, layout, move the text. Then create two or three more sketches— all different. Don’t be afraid to draw out some wild ideas. It may surprise you how often the wild ideas lead to good ideas. Afterwards, look at the sketches. What elements do you like best about each idea? Can some elements be combined and some weaker ideas eliminated? Create a final sketch that is a plan of what you will do. Try to follow the plan, but make adjustments as necessary.
Creating the Design
The design process is more like a spiral than a line. At each stage of design, whether it is the initial pre‑planning period, the development stage, or the proof‑reading stage, peer response and revision are needed to help target the audience and to include as many creative ideas as possible.
Planning:
• Meet with the client and establish clear expectations, printing requirements, deadlines and budget. Be sure to leave time to print and revise.
• Sketch design ideas
• Revise and refine the design ideas
• Seek peer input and revise again
• Meet with client regarding your best ideas
Developing
• Physically begin creating the best idea on the computer.
• Make adjustments to the plan as needed to match art you’ve been able to locate or create.
• Simplify the plan to make the message clear and cohesive.
• Seek peer response from another designer, or a trusted member of your audience.
Publishing
• If possible, test print or publish your design. Mistakes are often much easier to see on paper.
• Try the design in the medium in which it will be published. If it is to be published on the web, then try it on different platforms and different Web Browsers.
• If the design is to be published on a copy machine, take the design to a copy machine and make sure that it will print clearly.
What Makes Good Design
Think of them as a checklist. The following design principles should be used in every design.
Employing these principles will ensure that your designs look competent. Your designs will look attractive and easy to read. They will not look scattered, discombobulated or awkward. They will be good. To be truly outstanding, however, will require that you also employ your imagination. To some degree this can be learned by becoming immersed in the excellent work of others. Although good design instincts can be nurtured by the steady nutrient of exposure to good work, there is still a certain je-ne-sais-crois that must come from within the graphic designer and give the design the spark of life, witticism, interest.
Even so, these design principles will ensure that your work is better than most and more than acceptable in almost every circumstance. One caveat, however: these principles are not an absolute law of nature. While these principles should be included in every design, in some rare designs, these principles may be violated if the message is better served. That is, of course, the key. It is our job as graphic designers to make sure that the message is best represented. This is not merely an opportunity to showcase our talents, or the graphic skills we have learned. No. Our job is ensure that the client’s message has been clearly put forth to the audience.
Proximity
The principle of Proximity says that, “Things that logically belong together, physically belong together.” The corollary to this rule is that, “things that don’t belong together should be separated.” Another word for this concept is grouping. Group items that belong together. Of course, the designer must have read and understood the work in order to understand what needs to be grouped. This helps the reader to digest the information, as well. Some studies suggest that the reader has less than a second to make a decision as to whether the information is interesting or relevant. Given so little time, disorganized information is unlikely to be considered.
[Insert CO4-131SC]
Like a mother bird, we have to digest the information and give the information back to the audience in a way that they can stomach. Why is it that phone numbers are written the way that they are? Why not just write them as: 11895376192? Why do we break phone numbers and social security numbers into smaller “chunks” of information? Obviously we can remember 1-189-537-6192 much easier than we can the first instance. This fact of the way the human mind works can be a helpful study technique, enabling you to memorize important information in a short span of time.
[Insert CO4-132SC]
Ways of grouping
Create visual groups by:
• Physically adjusting the space. Creating space around groups of information is an extremely effective and attractive way to add proximity. It also adds white space, which gives the reader’s eyes a chance to rest and the reader’s mind a chance to digest what has been read.
• Add rules. Lines can be used to separate items, but beware that lines lead the eye. Without care, the reader’s eyes may be led right off the page! Additionally, lines break the white space in a document and there can become the danger of seeming too heavy and burdensome to read.
• Add boxes. Boxing your information can be a good idea, but boxes are extremely powerful, use them with care! When designs are laden with boxes, the design is difficult to read and understand, appearing fragmented with different voices. While this can be an advantageous effect, most often this leads to a state of incoherency. Since boxes tend to trap the eye and reduce white space, the design will often appear crowded and be difficult to read.
• Use your font typefaces and size to create proximity and group similar elements. Titles, headlines, captions and copy should have a font scheme that visually helps the reader group items together. With a single glance, it should be obvious where the headlines are by the way they appear, the leading they are using, the alignment that they share. It is a common mistake in newsletters, for instance, to try and make every article look different, thinking this would add variety and interest to the reading. Nothing could be further from the truth. In such an instance, what the designer has actually done is confuse the message.
• Color can be used to group information also. When information is treated similarly, either by color or with screens or reverses, then the information is perceived as being related, even if it is not. If your project does not have the budget to be in full color, black and white and shades of gray are colors, also.
[Insert CO4-6SC]
Alignment
The principle of Alignment says that, “All things should be lined up with something else.” In your design, nothing should be running renegade. Everything should line up with something else. There’s a word inside the word “Alignment” that will help you remember what this one means: line. We can use ruler guides, layout guides, margin guides to help with this principle. Like Proximity, this helps readers to organize information.
[Insert Figure CO4-133SC]
Alignment should not be only applied horizontally, but vertically, too. When working with multiple columns of text, it is especially important to line up the tops of each column. It is not especially important, however, to make sure the bottoms line up.
]Insert Figure CO4-134SC]
Competing alignments will create competing voices in a design, like a group of people talking.
The exception to this rule is that when it is important to draw attention to one thing in particular, break the alignment. If that one thing is violating the alignment pattern established by everything else, then that one thing will get extra attention. Remember, though, the effect won’t work if other elements are also out of alignment.
Alignments also help to contribute to the mood of the design. A center‑aligned design broadcasts a tone of being elegant, sophisticated, boring and predictable. Left-aligned is more exciting that center, but common and ordinary. Right‑aligned items are daring, extreme and different.
Repetition
The principle of Repetitions says that, “Dominant Design Elements should be echoed in some way throughout the design.” Repetition is the most difficult design principle to apply. Overuse of this principle can lead to monotony and boredom. Like salt, it must be used sparingly throughout a design.
Repetition is one principle most responsible for creating a professional looking design. It creates harmony within the design. Conversely, the lack of this design principle in a design creates an amateurish design. The key to making repetition work is to create a Dominant Design element.
Sometimes this sort of thing can be found naturally occurring in your design. Perhaps there is an interesting shape in some of your clip art, or in the client’s logo is a shape or color that you can use again elsewhere. Dominant Design Elements are not hard to create or identify. By definition, they are noticeable. Step back from a design and see if anything is naturally catching your eye. Perhaps you decided to do something special with the headlines. Using this idea throughout the design is using a dominant design element.
Sometimes it doesn’t seem to be working out so easily and a dominant design element must be consciously added to the design. Adding rules (lines) can create a sense of elegance and sophistication. Be careful, though! Lines are powerful and will lead the reader’s eyes and may cause them to slip off the page! Adding primitive objects (rectangles, circles, triangles) will work in virtually any situation. Use this idea when all else fails.
Repetition is absolutely vital in a design. Do not skip this one simply because it is challenging. Without employing this principle, your designs will appear disjoined and amateurish.
Contrast
The principle of Contrast says that, “To add visual interest and a Focal Point, something should be starkly different from its surroundings.” If repetition is the most challenging of design principles to employ, then Contrast must be the easiest. It adds visual interest. If you are proofing your design, but you find yourself saying, “You know, it looks pretty good… but it seems a little boring.” Then you’ve already figured out the problem: add more contrast! If repetition is salt, then contrast is pepper. It, too, can overpower a design if used too much and must be used in a purposeful manner.
Use contrast to create an entry point for the reader. The reader needs direction on where to begin looking at your design. The natural beginning place is the place of highest contrast, which establishes a focal point. You can create contrast a number of ways:
Contrasting size/weight
We have been exposed to design often enough that many people do this naturally. When writing a report, students will often write a title at the top of the page and make it bold, and larger. Add an incredible amount of weight and set a focal point by reversing out the text. Create a black background behind the text and set the text as white. This sort of thing is tiring on the eyes and is not recommended for body text.
Contrasting size does not always mean “big.” Sometimes contrast can be quite effective as small. Notice that the definition suggests that contrast is created by being “starkly different” from its surroundings. The example to
the right has enough contrast to be highly effective.
Contrasting Font
Fonts can be categorized into different types and some types have specific purposes. Choose a font from a different family (preferably one that is extremely different from the majority of the design) to create contrast. Since long sections of body text should be set in an Oldstyle font, then that leaves the other categories for the display font. Need more excitement in a design? Change the headers and titles to fonts with a heavier weight such as a Slab Serif font such as Wide Latin or Rockwell Extra Bold, a heavy modern font such as Broadway, or use a heavy Sans Serif font such as Cooper Black, Arial Black or Impact. Fonts with the name “Titling” are specifically designed to look good when set to display sizes of 18 and larger. All these fonts look great when set against the delicate curves of Oldstlyle fonts such as Times, Garamond, or Palatino.
Contrasting Alignments
Some alignments “play well together” and work well in a design:
Notice that Justified text plays well with everybody, while Center only plays well with its own kind, or with the kid who doesn’t care who he plays with. All alignments play well with their own kind, and left and right (being opposites) play quite nicely together. Use different alignments to create contrast. It would be highly unusual to right‑align paragraphs, but why not right‑justify the header?
Different alignments create different voices in the document. Want to create a crowd effect? Try different alignments. Be careful! Too much of this type of thing makes your design more like a crowded subway and can confuse the message.
Right and Left are not the only kind of contrasting alignments that you can try. Since Publisher allows you to rotate text to any angle, why not create a series of center‑aligned text boxes, all rotated to haphazard angles?
Contrasting Colors
The modern color wheel was first invented by Sir Isaac Newton in 1666. This wheel can be used to help describe the relationships between different colors. Some of them are close together and, therefore, create very little contrast whereas the colors apart from each other create maximum contrast. Some colors even have a certain color context where they appear to “flash” when set next to each other! When colors exactly opposite each other are too powerful, tint (lighten) or tone (shade) the colors by adjusting saturation or brightness to create visually pleasing and stimulating results. In the color wheel on this page, the light colored highlights are actually tints of the color and the shadows are the tones of that color.
More about concepts related to color in the Color Theory appendix.
Managing White Space
Artists often strive to show us our world in a fresh and unique way. To be successful, an artist must be imaginative and to be a keen observer of the things they see. They simply don’t look at things like the rest of us. Artists and designers need to not only look at what is in a design, but also what is not in the design.
Take the following example. The flyer has significant design problems, not unlike ones in the real world. The most notable flaw is that the white space was poorly organized. White space (sometimes called negative space) is the area on the page without text or graphics.
White space should be active, able to flow throughout the document like water. When white space is poorly organized or trapped, it is referred to as being passive. In short, the entire page needs to be part of the design— not just the things you put in, but even the shape of the space you are not using should be carefully planned.
This column is about Web design—really, it is—though it may at times seem a bit distant and distracted. In my opinion, any good discussion about design begins with the fundamentals. Almost by definition, the primary tenets around which any field is based are universal: they can be applied to a variety of disciplines in a variety of ways. This can cause some confusion as principle is put into practice within the unique constraints of a particular medium.
We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition.
Web design is a relatively new profession compared to other forms of design, due to the youth of our medium. As with any design discipline, there are aspects of the Web design process that are unique to the medium, such as screen resolution, additive color spaces and image compression. But too often these more unique details override our sense of the bigger picture. We focus on the fact that it is Web design and push aside core design concepts—concepts that can that make any project stronger without interfering in the more technical considerations later on.
I tend to define Web design as being one of many disciplines within the larger field of design (a peer to print design, industrial design, interior design, etc.). To step back even further, I see design as a discipline within the field of art (a peer to painting, illustration, sculpture, etc.) The point is that in order to start with a discussion about the fundamentals of design as they relate to Web design we need to understand that there is a good degree of inheritance that design has received over the years from other art forms. These art forms, such as lithography, typography, painting/illustration and industrial design, evolved over many centuries, and a number of basic ideas have emerged as providing universal guidance to any artistic endeavor. When talking about fundamental concepts we inevitably look outside our discipline and adopt a slightly larger perspective.
The first three articles of this column will be dedicated to unearthing these universal gems of insight so that we may better understand our profession. In the first two articles, we will adopt a larger perspective to establish a foundation. In the third article we will tie it all together, using real-world examples to see how the basics are put into practice through the medium of the Web.
DMS Comp App Home ~ MSD Decatur Home Page ~ Decatur Middle School Home Page
Ann Zinyemba Decatur Middle School Computer Applications 5108 S. High School Rd. Indianapolis, Indiana 46224
