6 Key Principles Of Making A Web Design
Download as PPT, PDF1 like3,444 views
The document outlines 6 key principles for making web designs look good: balance, color, graphics, typography, white space, and connection. It discusses each principle in detail, emphasizing the importance of balance, using color effectively, incorporating high-quality graphics, effective typography, strategic use of white space, and ensuring all design elements are unified and consistent to achieve a sense of connection. The most important principle is connection, as it is what ties all the other design elements together to create a cohesive design. Mastering web design requires understanding and applying these principles as well as other considerations like accessibility, readability and usability.
6 Key Principles Of Making A Web Design
- 1. 6 Key Principles of Making A Web Design Look Good These elements are the 6 key principles that make a Web design look good: • Balance, • Color, • Graphics, • Typography, • White space, • Connection.
- 2. 1. Balance Balance is all about ensuring that our design does not tip to one side or the other. It is like the balance of weight in achieving symmetry or asymmetry. If we are not careful about how you lay things out, the design will become unbalanced rather quickly. We can manipulate the visual weight of a design in many ways, such as with color, size and the addition or removal of elements. Achieving asymmetrical balance is an especially delicate matter that takes time to fine-tune and a somewhat trained eye to really pull off. In case of symmetrical balance in some site the header graphic is asymmetrically balanced, the rest of the design lower down has symmetrical columns. Asymmetrical balance might be harder to pull off, but it tends to make a design more playful. We will find that every design we think looks good has a well-constructed balance underlying it. And every design featured here scores high on each of the six principles we discuss.
- 3. 2. Color Picking nice colors is as important as picking the right colors (that is, the right colors for the job). A Web design for a cozy little restaurant would do well with “earthy” tones: reds, browns, etc. Of course, there is no such thing as a surefire recipe. Every color sends out a message, and it is up to you to get the message right. Find out for our self what works together. Have to soak up as many website designs as possible, such as those featured on any of the many CSS showcase websites, to get a feel for how colors interact with each other. Have to pick two or three base colors at most for our design, and then use tints (which are lighter, mixed with white) and shades (which are darker, mixed with black) of these base colors to expand the palette where necessary.
- 4. 3. Graphics Great design doesn’t need fancy graphics. But poor graphics will definitely hurt a design. Graphics add to the visual message. We may not be a great illustrator or photographer, but that doesn’t mean we can’t put great graphics on our website. Some basic Photoshop skill, possibly some stock images and great taste are all we need. We should try to make the graphics go well together, and make sure they embody the style you are aiming for. We are not all gifted with the same natural ability, though. We can pick up some things by learning from others, but sometimes we just have to pick the style that suits us best (like a clean style if we are not the greatest of illustrators).
- 5. 4. Typography The art of type is a tricky subject to talk about because it encompasses so many elements. While it can be regarded as a branch of design, one can spend a lifetime mastering all of its aspects. This is not the place to provide a complete typographic reference, so we will limit our discussion to what will benefit us in the short term. Web typography is handicapped compared to print typography. The biggest difference is our lack of complete control over the appearance of type on the Web, due to its dynamic character. Obviously, dynamic rendering has its strengths, but Web designers have little control over the results, at least for now. Missing fonts on the user’s computer, differences in browser and platform rendering, and generally subpart support in CSS make Web typography a daunting if not frustrating task. But while we may have to wait for CSS 3 for Web typography to reach its full potential, we have the means now to make it look interesting and, more importantly, pretty.
- 6. 5. White Space White space, or negative space, has to do with what is not there. Like measure and leading, white space gives text some breathing room and spatial peace. We can make elements stand out by adding white space around them. Copy, for example, shouldn’t look cramped. To ensure readability, make sure paragraphs have sufficient padding. White space is one of the easiest (because we aren’t really adding anything, are we?) and most effective ways to create a visually pleasing and readable design. White space adds a lot of class to a design. Don’t be afraid to leave some holes open, even gaping ones. Inexperienced designers are tempted to put something in every little corner. Design is about communicating a message. Design elements, therefore, should support this message, and not add noise to it.
- 7. 6. Connection “Connection” is a bit of a made-up term here, but it seems to be the best one for what we mean. Connection here refers to a Web design that has both unity and consistency. These two attributes demonstrate the professionalism of a design (and thus its designer). They are very broad attributes. A design should be consistent in its use of colors, in its range of fonts, with its icons, etc. All of these aspects count; a design can look great and still suffer from inconsistencies. When a design is inconsistent, its unity can be lost on the user. Unity is slightly different from consistency. Unity refers to how the different elements in a design interact and fit together. Unity is perhaps the more important of the two. Without unity, having a good design is hard. Inconsistency, however, may look a bit “sloppy” but may not make the design “bad”.
- 8. Of the six principles addressed in this article, connection is the most important. Connection has to do with how all elements come together: balance, grid, colors, graphics, type and white space. It is sort of the glue that binds everything together. Without this glue, the design falls apart. We could have pretty type and a brilliant and meticulously chosen color palette, but if the graphics are awful or simply don’t match or if everything is crammed together without thought, the design will fail.This is the hardest part of designing. It is not something that can be easily taught or necessarily be taught at all. A little natural ability and experience is required. But it is what it is, and it makes a design look good in the end.
- 9. Conclusion Good Web design is not limited to the six key principles discussed here. Aspects such as accessibility, readability and usability play a part, too. This is the reason why Web design is so difficult. Getting our feet wet in design is easy, especially today, with so many content management systems, blogging tools and themes readily available. But truly mastering all of the facets of Web design takes time and, let’s be honest, talent. Having the ability to craft pretty designs is just one facet, but an important one.