Four Rules at the Foundation of Design

Design PrinciplesContrast, Repetition, Alignment, and Proximity are core design rules that unify design elements. These rules can be observed in all aspects of life with some basic understanding of the principals. Contrast simply means creating interesting differences between design elements. Repetition is the technique of repeating elements and treatments to unify the message and design. Alignment is the principal of positioning elements in a way that they line up with one another to carry the eye naturally through the design. Proximity means keeping elements together that belong together to create relationship with the information and other elements. In today’s day and age aesthetics are more important than ever which requires designers to stay true to fundamentals and core principals to create timeless designs, and to do this we must understand each one.

C = Contrast

Contrast displayed with wine glassesContrast can be seen all round us in everyday life and is a vital aspect to give life to the designs we create. When you create differences in size, shape, and color of elements in a design you are creating focus, interest, and importance amongst them. Doing these things creates difference between elements, which is how contrast is defined. A powerful concept of design that can be executed in many different ways and with many different techniques.

Contrast can be utilized by varying visual weights for elements and essentially having complementary sizes. Another way would be to use color fills, shades, outlines, and/or patterns between your elements. Font faces, font weights, image size, texture, background color, foreground color are important things to consider while designing, but their relationship to one another is where the application of the Contrast rule becomes most important.

R = Repetition

RepetitionWhile contrast is all about creating differences in your design, Repetition is all about creating unity in your design. This is because the resulting effect of repeating individual elements is that it helps the audience to view the entire design as a whole. Doing this helps convey the message by reiterating focus and connects elements together so the audience can more easily understand and comprehend the information and message of the design.

Strong examples of the principal can be seen when companies brand their logo, when a team’s players all wear the same jersey, when the same fonts and headings are used throughout or when cars are made, the list is endless. Repeating design elements helps to organize, arrange, and unify the design as a whole.

A = Alignment

Alignment displayed with draw bridgeThe purpose of the Alignment principal is to prevent clutter and the perception of random positioning. Nothing in your design should appear arbitrary because the eye needs to naturally flow without confusion. When this is done appropriately it creates a clean, cohesive, and intentional appearance.

Like all of these founding design principals, alignment indicates organization and polish. When reading text on a page, it is easiest to consume the information when it’s rows are aligned. Designers often use an invisible grid to vertically and horizontally align elements. Good examples of alignment can be seen in the rows and columns of windows in a sky scraper, or how products are displayed on shelves in a grocery store.

P = Proximity

Women in gardenProbably the most common sense rule of design is Proximity. The idea is to visually display the relationship of items that have the same or similar purpose, whether it be information or objects. Doing so avoids clutter and focuses attention on a macro and micro scale, as the audience often views designs as a whole and by individual parts.

Organization is a byproduct of this base principal and you can observe proximity in work by paying attention to how elements are grouped together in a design. Some examples include the organization of your garden, keeping website navigation links together, labels with inputs on a form or even photos with other photos in a gallery, you get the idea. As said before, proximity should be common sense, however it shouldn’t be taken lightly. Proximity is just as important as the other three rules and should be applied with the same respect.

In Summary

The impact that good design makes cannot be overstated. Design has a long history of pushing innovation and idea generation; it is more evident now than ever the vitality of placing heavy emphasis on a design’s visual appeal. By understanding the rules, you can understand the design structure. Focus on learning to work inside the structure, within the rules, and then you can break out the box and be innovative.

Read more about this subject:

Style GuideThe process of building a website is technically never done. Especially when said site is handed over to a client that will constantly be adding content. There is an invaluable tool that can alleviate a slew of future headaches that may take some considerable time and effort initially but will repay the designer tenfold in the long run. Of course, since you likely read the title, we are speaking of a Style
Guide. The following principles intermingle between physical print as well as web design.

A Brief History

Style Guides were developed to institute a sense of consistency in language use and layout across many different writers and contributors in the print publication world. Fast forward to the digital age today and the importance and necessity for cross-platform uniformity is paramount to millions of businesses. The most successful of these businesses all share a common recipe in which the Style Guide is the likely not the star, rather the essential, ingredient.

But Why? For what reason?

Designing a large project with multiple hands including developers, both front and back-end is difficult enough to keep consistent and clean. Trying to execute and deliver a fantastic product has an exponentially higher probability when a set of rules and/or guidelines is implemented. Here is a list of a few advantages to creating a comprehensive Style Guide for your next project:

  • The client will have a blueprint when adding in new content or images to the site.
  • You exude professionalism or organization to your client.
  • It forces you to make a cohesive design with a strict set of style outlines.
  • When the client goes off the rails, you can refer them back to the easy to see principles.

What to include in the Guide

Of course some of this can be dictated by the scope of your project and the needs of the client, but there are certainly some staples that are involved in nearly all great Style Guides.

Branding and Logos

logo usage guidelines

It is important to inform the reader of the client’s vision and company mission. This can often be achieved in a few sentences and it best served as a direct and to the point information block. An overall essence of the brand is all the reader needs to know and in most cases this vision statement is overlooked by those looking for pretty photographs and colors.

The logo is the symbolic character of a brand and company that can often be misused. Creating a clear usage guideline is essential to maintaining that identity and offering multiple size and acceptable color variations can go a long way in solidifying a well-structured brand. Perhaps just as important is giving examples of forbidden logo usage and adaptations.

Color Palettes

Defining the range of colors for a digital website, mobile application, print or any other design medium is really a given. Every style guide needs to present an inclusive palette with CMYK, Pantone and RGB alternatives for web and print. An eye-catching swatch is not necessary but can add some much needed pizazz to your guide.

Color Palette usage

Fonts

Equally important to displaying a comprehensive color palette is solidifying a clear typeface to be used on all channels. Be sure to include size, line height, colors, headings, weights, and even alternatives for non-web fonts. Typography can often make or break a design, so choose wisely and be sure to document your typeface with strong specifics like above.

Buttons

A great habit to form is thinking of every possible scenario or instance a client would need to use a button and give a clear visual of the default, hover, and active/visited state for each of those buttons. They are often used as call to actions and it is critical that the client has no need to implement their own styles on any of these states.

Button usage guidelines

Other Items

There are a few other components that are important to include in your Style Guide. If you are dealing with a large company website, it is often extremely helpful to both you and the client to dedicate a page that includes code snippets for common elements that can be easily copied and pasted wherever needed. The CSS styles for these elements should apply globally to maintain that consistency and will in turn save you future strife.

Icons are a very common entity in both print and web applications. They draw interest to the user and often can drive home the context of the given talking point. Defining the size and space allotment for the icons is another excellent way to promote uniformity. It is also worth noting, don’t be shy in explicitly stating that the client should use icons sparingly and only when they serve a real purpose.

The Takeaway

As in with nearly all aspects of design, putting your own touch on a Style Guide can really personalize the look for the client. This blog is simply to inform you of some solid practices that will serve you well in creating a clean, professional outline for you and your customer to use. A few more good behaviors to leave you with:

  • Cover it Up! – Include a cover page that highlights the logo and best practices when using it
  • Make it Printable – You never know who will want to use it for reference and not just staring at a computer
  • Plan for the Future – Design the guide in such a way you can make on the fly edits and client requests
  • Make it Gorgeous – Pretend everyone you know, all your bosses and the client’s will be looking at it daily. Make something you are proud of and don’t be afraid to add some flare that will likely inspire others to design with a passion!

Resources