http://www.usability.gov/what-and-why/visual-design.html
Color Contrast - all about the difference - Love of Graphics Contrast – a definition Contrast can be defined as “the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.” In plain English that could be described at its most basic level as “things which look different from one another” or as the definition taken from Cambridge online Dictionary “an obvious difference between two or more things”. The real meaning of form is made clearer by its opposite. We would not recognize day as day if night did not exist. Jan Tschichold, Typographer “The New Typography” Contrast – in color Remember thrusting your hand into a big pail of mixed-up, broken crayons, then leafing through your construction paper to find the perfect hue to go with your chosen sticks of pigmented wax? Contrast is the perceived difference in colors that are in close proximity to each other. Value Color Johannes Itten´s Contrasts in Color The Pure Color (Hue) Contrast The Light-Dark Contrast Literature:
Clean Up Your Mess - A Guide to Visual Design for Everyone 10 Web Typography Rules Every Designer Should Know When someone visits a website you’ve designed, the odds are that they don’t care much about the colors, images or sounds, they’re immediately looking at the text. No matter how many bells and whistles you’ve built into a website, everyone relies on text to accomplish whatever they’re visiting the site to do. That alone should make typography, the art of arranging type, a priority for any web designer. In this article we take a look at 10 easy rules to keep in mind when designing your next web project. 1. Read through the text yourself With a design like JonesingFor a designer without a great grasp of the text would have struggled to put together the typography that makes this site really work. Some web designers think that just copying and pasting out of a text file constitutes the total of their textual duties. You can kick your typography up yet another notch, if you can read through the text once it’s in place in your design. 2. 3. 4. 5. 6. 7. 8. 9. 10. A final comment
Visual Design Some foundational ideas are so thoroughly ingrained in modern life that we hardly see them for their ubiquity and familiarity. The concept of “module and program”—regular building blocks of repeating patterns that when joined together produce an organized whole—permeates our information-age lives even more thoroughly than it did the lives of our ancestors in the industrial revolution launched by manufacturing innovators like Eli Whitney. As the industrial world grew more complex, document designers in the mid-1800s began to adapt modular programs to newspaper, catalog, financial, and other publications, and modern page layout was born. In the early twentieth century the Bauhaus designers adopted the elements of visual logic discovered by the Gestalt perceptual psychologists, and those German and Swiss designers created modern graphic design (see Visual Design Principles sidebar, below). The primary purposes of graphic design are to: Consistency Contrast Color and contrast in typography Style
ACRL Visual Literacy Competency Standards for Higher Education Approved by the ACRL Board of Directors, October 2011 Introduction The importance of images and visual media in contemporary culture is changing what it means to be literate in the 21st century. Visual Literacy Defined Visual literacy is a set of abilities that enables an individual to effectively find, interpret, evaluate, use, and create images and visual media. In an interdisciplinary, higher education environment, a visually literate individual is able to: Determine the nature and extent of the visual materials needed Find and access needed images and visual media effectively and efficiently Interpret and analyze the meanings of images and visual media Evaluate images and their sources Use images and visual media effectively Design and create meaningful images and visual media Understand many of the ethical, legal, social, and economic issues surrounding the creation and use of images and visual media, and access and use visual materials ethically Visual Literacy and Higher Education 1.
Composition and Design Principles ----------------------------------------------------------------------------- Everybody immediately responds to subject matter in art. A picture of a butterfly and a picture of a snake do not get the same response. In addition to subject matter*, the formal aspects of visual composition are like the grammar of a language. In writing, a story is written with words - subject matter. Like good literature and good poetry is more than words and subject matter, art is more than pictures. The use of design principles applied to the visual elements is like visual grammar. TEACHING TIP Art vocabulary can be taught along with every project. *Glossary: "Subject matter" is similar to "topic" or "content" when teaching art. Six Visual Elements (art elements) top of page We think of the elements as the basic visual material with which to make art. Some Design Principles or design rules (some creative artists purposely break rules) top of page This list is an example list. Motion. Depth.
Visual & Graphic Design You’ve heard you can’t judge a book by its cover. But the truth is, if a book doesn’t have a good cover, most people won’t even reach for it. The same can be said about elearning. The course’s visual design is a powerful tool for setting the tone, communicating key concepts, and engaging your audience. In the posts below, you’ll learn some visual design basics that make for more effective communication. Communicate with Good Visual Design Graphic Design for Your E-Learning Courses Resources to Help You Build Better Graphics
5 Common Visual Design Mistakes I was working with a student intern the other day. We reviewed his first attempt at a rapid elearning course. For this review, we focused on the course’s visual design. Overall, he did a great job, especially for someone just starting out. 1. Good elearning design is as much about visual communication as it instructional design and learning theory. When I learned video production years ago, we were always told that everything in the frame means something. Look at a company like Apple. In the same sense, your course is a story. It’s not about just making the screen look good. 2. Your course has a central idea or objective and the visual design should be built around that. Many web designers will use a grid structure to map out the page design. 3. The intern’s demo had some really nice use of photos to support the course. The first rule for using graphics in your elearning course is to make sure that they’re not just decorative. The second rule is to use graphics that belong together. 4.
Type Design Introduction Design History Family Classifications An Introduction to Type Type Design Since the first recordings of letterforms the concept of the typographic form has evolved into a seemingly endless variety of designs. Type design variations fall within specific categories. Typeface The basic category of type design is the typeface: the specific letterform design of an alphabet , including the serif shape, x-height, length of ascenders and descenders, variation of stroke weight, and any other characteristics that differentiate it from any other design. Typestyle A typeface usually includes several design variations called styles . Character angle . Character weight. Character width . Font A collection of all the characters of a typeface in one size and one style is called a font. Type Family The complete assembly of all the sizes and styles of a typeface forms a type family, bearing the name of its typeface. Type Measurements Point, pica and inch conversions are as follows: Points Picas
The Gestalt Principles The Gestalt Principles Gestalt is a psychology term which means "unified whole". It refers to theories of visual perception developed by German psychologists in the 1920s. Similarity Similarity occurs when objects look similar to one another. The example above (containing 11 distinct objects) appears as as single unit because all of the shapes have similarity. Unity occurs because the triangular shapes at the bottom of the eagle symbol look similar to the shapes that form the sunburst. When similarity occurs, an object can be emphasised if it is dissimilar to the others. The figure on the far right becomes a focal point because it is dissimilar to the other shapes. Continuation Continuation occurs when the eye is compelled to move through one object and continue to another object. Continuation occurs in the example above, because the viewer's eye will naturally follow a line or curve. Closure Closure occurs when an object is incomplete or a space is not completely enclosed. Examples Proximity
Proportion, Golden Ratio and Rule of Thirds One of the key principles of design for web designers proportion, as it is applicable at the macro-level (the general layout of the page) and the micro-level (e.g. a single diagram or widget). Proportion refers the size relationship of visual elements to each other and to the whole. In art this principle has been examined for hundreds of years, and one timeless proportional relationship that occurs frequently for positive effect in design is the Golden mean or Golden ratio. The Golden Ratio Ratio refers to how one measurement relates to another, and the ratio formed of 1:1.618 is called the Golden mean - the ratio of bc to ab is the same as ab to ad. It may be that humans are genetically programmed to recognize the ratio in the Golden mean as being pleasing. The golden ratio can be seen in many ancient architectural designs, including the Parthenon. Golden mean grid applied to a landscape Rule of Thirds One can analyze photographs and designs by laying down grids. For more information,
Composition and the Elements of Visual Design Proportion - Golden Ratio and Rule of Thirds Proportion refers the size relationship of visual elements to each other and to the whole picture. One of the reasons proportion is often considered important in composition is that viewers respond to it emotionally. Many photographers and artists are aware of the rule of thirds, where a picture is divided into three sections vertically and horizontally and lines and points of intersection represent places to position important visual elements. On analyzing some of my favorite photographs by laying down grids (thirds or golden ratio in Adobe Photoshop) I find that some of my images do indeed seem to correspond to the rule of thirds and to a lesser extent the golden ratio, however many do not. In summary, proportion is an element of design you should always be aware of but you must also realize that other design factors along with your own unique sensitivity about the subject dictates where you should place items in the viewfinder.
11 Reasons for White Space + Freebies and Tutorials Graphic designing is an avenue for one’s creativity. It is a creative process which may be called as visual communication through the use of typography, visual art, layouting techniques and others. This involves logo designing, advertisements, publications like magazines, product labels, business cards and web designing. In this genre, there is oftentimes a communication between a client and the designer. Putting into consideration the client’s preference on designs is therefore important without sacrificing the quality of your outputs. When looking at a design, one client might say “oh, there is so much wasted space!” Oftentimes, white spaces are overlooked. There are two types of white spaces. 1.Active White Space: Space intentionally left blank for a better structure and layout. Most people would consider white space as merely a waste of printing materials which makes them opt to have a full-colored page thinking that printing with begative spaces will just squander their money.