7 Components of Design

1. 7 Components of Design •Unity •Gestalt •Space •Dominance •Hierarchy •Balance •Color Part

2. Unity In Design: Creating Harmony Between Design Elements What is Unity in Design? unity n., pl., -ties. 1. The state or quality of being one; singleness. 2. The state or quality of being in accord; harmony. The idea behind the design component unity is to create elements that support each other and all work together toward a common goal. It’s about avoiding mixed messages. Your design elements should look like they belong together and not be arbitrarily placed on the page.

3. Unity •Visual unity – for example a group of elements all aligned to a common axis •Conceptual unity – for example an image of a diamond, a mansion, and a pile of money might be unified around the concept of wealth

4. Unity • Unity is a measure of how well the elements on the page belong together. • Through unity a viewer should first see the whole and then the sum of the parts making that whole.

5. Unity • Creating unity is similar to branding. • You first establish what the design will be about, what the brand will stand for, and with that in mind create elements or make public statements that reinforce the design or brand. • Think consistency around a central message.

6. Why Unity is Important • A sentence conveys more information than random words on a page. • A paragraph conveys more information than random sentences on the page. • Order and organization helps convey your message. • Unity leads to more order and organization.

7. Why Unity is Important • The goal of your design is to communicate a single message or perhaps a primary and secondary message. • The more your elements are unified the more of your message you’ll communicate in your design. • Your design will impart a sense of being complete and being about a single idea.

8. Why Unity is Important • Unity holds your design together both visually and conceptually. • It emphasizes your concept and theme and helps communicate your message to your reader. • Through unity your elements aren’t competing with each other for attention. They are working together to reinforce your message. • Through unity your design will be seen as a single complete piece, as a whole and not a group of disparate parts.

9. Why Unity is Important • Unity adds order to a design. • Too much unity can be dull and lifeless, however. • Variety adds interest and energy to a design. • Too much variety makes your design chaotic and difficult to read. • A balance between unity and variety must be sought.

10. Why Unity is Important • Unity and variety can work together. • For example your main page heading can be larger with a different font a color than all other text on the page. • That will create variety with the text and images around it. • By using that same size, font, and color on all page headings across the site, you reintroduce unity into the overall site design.

11. How to Create More Unified Designs To create unity in your design you should have a clear idea of what you are trying to communicate. Your elements can’t be unified toward a common message if you don’t have a clear idea what that message is. Once you know what you are trying to communicate you want to stay focused on it and not deviate.

12. How to Create More Unified Designs Everything you include in your design should complement the key theme and concept and should serve some functional purpose in the design. Placing an image on the page because it looks cool is not unity. Placing an image on the page because it enhances communication of the design’s theme is unity.

13. How to Create More Unified Designs We can use the basic design principles of contrast, repetition, alignment, and proximity to help us achieve visual unity. •Contrast – adds variety within the unity •Repetition – Things that look alike appear more related to each other •Alignment – Elements that share a common axis appear more related to each other •Proximity– Objects that are closer to each other appear more related to each other

14. Similarly our choice of images, colors, style, etc. should all be conceptually related to our central idea with the design. If you want to get across a message of openness it doesn’t make sense to box in all your design elements with borders. It would make more sense to create an open layout with lots of whitespace.

15. It’s unlikely no matter how hard you try that your design will be 100% unified toward a single idea. We all interpret what we see differently. We all bring a lifetime of connections and perceptions to any piece or art or design.

16. The final and ideal test of unity is to have a design where nothing can be added or taken away without having to rework what’s left. The relationship between all your elements should be so strong and so right that to change anything would hurt the design. This is the ideal. Can you realistically create such perfection? Probably not and part of any design is knowing when to say enough.

17. Summary Unity exists when your elements agree. Unity can be seen as the single most important goal of any design; to make your whole design more than the sum of its parts. Use the design principles of repetition, alignment, and proximity to add visual unity to your design and use contrast to add variety and interest. Make sure any images you use agree conceptually with your theme.

18. Unity Project Goal: Create a travel brochure to advertise a set of 4 products (vacation packages) by a single company that meets these specifications: When done save this project to your desktop folder and call it Unity_Project

19. Unity Project • Create an advertisement for your product that integrates 4 images of your products (vacations) and 4 blocks of text descriptions that you find online that relate to the products. • Create 4 text boxes that you paste the text into. Each text box must relate to one of the images- a vacation description to the photo of the location. Place them in proximity so they are seen as clearly relating to each other. • Remember, objects that are closer to each other appear more related to each other than objects spread apart. • Your product must demonstrate clarity of design- it must be quickly, easily and correctly read

20. Unity Project • Your design must demonstrate UNITY by using alignment to give the separate products a feeling of being related- of unity between all component sets and images. • Remember that elements that share a common axis appear to be more related to each other. • Align your text blocks and images to form visual relationships.

21. Unity Project • Use contrast within your text blocks to give variety to your design sections to accentuate key ideas- remember too much unity can be boring but too much variety can make the design too complex and unreadable - balance the mixture of unity and variety. • Use repetition of your design from one box to another- remember that things that look alike appear to be related to each other. • Each image must have unity with the other images by having similarity of size, framing, contrast and composition within its frame. Text blocks that appear the same will seem unified.

22. Look at the example below: • Notice how the images have a common axis both horizontal and vertical that they align to that falls on the brochure fold line dead center • Notice how the blocks of text are placed in close proximity to the photos of the vacation spots they describe- they relate by proximity • Notice how the text blocks all have the same font, font size, left-edge justification and are all aligned parallel to edges of the photographs • Notice how the large lettering descriptions have matching size, color, font and style that unifies them but also gives a contrast against the smaller text blocks. All small text blocks are unified, all the large descriptions are unified by the two groups contrast each other and give a balance of variety to the design • Notice how the background adds texture and variety yet does NOT compete against the design or remove clarity from our ability to swiftly accurately read the brochure.