[MUSIC] As a graphic designer, I find that the most common misconception about the profession is that design is all about the conceptual. The truth is there's tools and rules we need to follow. A beautiful design is a product of carefully plotted design elements chosen to create a visual representation of the idea. In graphic design, we have two lists that pretty much make up our graphic design bible: the elements of design and the principles of design. The elements of design are the basic units of a visual piece that make up a painting, drawing, or design. In other words, it's the lines, colors, shapes, textures, spaces, or forms. It's your content. If you're sitting down with a piece of paper and a crayon, what you're drawing is the elements of design. We are not going to talk about that much in this lesson. Instead, we're going to focus on the principles of design. It is the principles applied to manipulate elements so to create a work of art. Principles of things such as contrast, repetition, alignment, and proximity, or affectionately known as C.R.A.P. The design principles were created by Robin Williams, the author of the Non-Designer's Book. The first basic design principle is contrast, or the idea that different colors, shapes, or sizes will draw readers' attentions. Contrast is all about making distinct elements stand out. Applying contrast creates focal points. Contrast can be established using different elements-- shapes, colors, weight, size, or layout. Contrast of color is one of the most fundamental design principles, and the one which most of us are familiar with. But its application can be tricky. For layman, contrast may just limited to black and white. But actually, there's more to contrast than that. Contrast can be established using a combination of colors that lie opposite to each other on a color wheel, or what we call complementary colors. But you must ensure that participating colors in the design don't strain users' eyes. For instance, on the top, it is an example of bad contrast. The edges of blue and red seem to merge and blur, giving the illusion of movement. Below, this a better contrast. A quick way to know if your design has optimum contrast is by looking at its grayscale version. This can be easily done by using any popular image editing tools, such as Adobe Photoshop. Opposite to the first basic principle of design, the second principle helps you create unity. The rule of repetition means you should reuse some key themes in your design. It helps users become familiar with the way information is presented to them. Take the home page of Stack Overflow, a popular question and answer site for programmers, as an example. In the top questions section, statistics on the current votes, answers, and views are neatly laid out on the left. There are tags for each question indicating the topics and categories. They is also "last updated info" for the question with user details. On the question and answer page, most of the design and layout elements are repeated. The entire header and top menus are repeated as well as statistics related to the questions are repeated and even more details are provided. For all answers, user details are repeated each time. Most of the time, the purpose of repetition is to make users recall a brand. Companies and organizations frequently repeat design attributes across their physical and digital presence so to build up their brand. Alignment refers to the placement of all the design elements on a page. Alignment is a concept that advocates organizing information to create order. There are two basic kinds of alignment. They are edge alignment and center alignment. Edge alignment positions elements against the outer edges. Center alignment lines up elements on the center axis. For text, the different styles of alignment are left, right, and centered. Left and right alignment are the most common among them. Centered alignment can work when there's not that great number of text. The last principle for C.R.A.P. is proximity. Proximity refers to keeping related images, paragraphs, and titles visually grouped together and using distance to separate unrelated items. The application of proximity can lead to better user experience. An amateur designer may try to utilize all the available space of a design trying to spread elements evenly. Such a desire will make it difficult for users to determine elements that are related to each other, and those which are not, resulting in a poor user experience. Here's a simple example. While both of the lists contain the same information, the ways they present the superheroes' names are different. The information on the left has been distributed evenly. The list on the right, groups the name of the superheros in the same movie together. This provides readers a structure of information. So to wrap up, putting together these four design principles can dramatically improve the quality of a design. Use these principles as a checklist to ensure that your design offers a great user experience. The next time that you tell me I'm full of C.R.A.P., you might be right. You probably do these on purpose for a better design.
