🚀Hack Your Design Skills: Basic Rules of Design for Non-Designers 🎨🌎

Entering the world of design can be intimidating, particularly for those without a design background. I found myself in a similar position until stumbling upon a Hacker News recommendation for "The Non-Designer’s Design Book." By applying its principles and gaining additional insights from Joe Natoli's "Design Rules" course,I acquired new design principles, thereby improving the user's experience. Now, I've distilled these valuable lessons into a concise guide. Whether you're a novice or an experienced designer, uncover essential skills to elevate your design skills and create meaningful designs.

Example: Case Study Snapshot

In the following example, the primary focus is on the function's purpose: email verification. By highlighting the "verify" button as the most prominent element, users can swiftly identify the key action without unnecessary searching.

The careful application of proximity groups the related content, aiding users in recognizing crucial sections intuitively. Perfect alignment reduces the user’s eye movement.

Consistency in element styling helps users associate similar styles with the same category, simplifying navigation. Lastly, the use of contrast emphasizes priority and repetition, providing a clear visual hierarchy. Experiment with these principles, starting with a black-and-white approach, to elevate your design.

PPARC stands for Priority, Proximity, Alignment, Repetition, and Contrast. These principles serve as the foundation for effective design, guiding you to create visually appealing and user-friendly layouts.

Understanding Design: Beyond Decoration and Trends

1. Design is problem solving. Usually, we want the user to do something. If the problem remains undefined or ambiguous, the design will serve random purposes and will not produce usable results. Design is not decoration.

2. Have you avoided starting from themes or merely following trends? The task is to solve the problem for yourself and your clients. Someone else's solutions will not fit your needs; inspiration doesn't solve problems.

3. Decoration is part of design, but not all of it, in fact, not even a big part of it. The designer must aim at appropriateness through research, investigation and facts

4. Design begins where engineering ends. Form doesn't follow function (contrary to popular belief). Form adds value over function. Form is an additive. Source Bauhaus School of Design

5. The goal of the design process is to "transform" the implementation model to user model. The design must conceal unnecessary details from the user yet still expose sufficient power to be useful.

6. Form should be determined by success criteria -- not by function or personal aesthetic preferences.

7. form = function(audience needs, client desires, ethical obligations, aesthetic inclinations, tech constraints, cultural constraints, functional requirements, display/medium properties, time, money, human resources)

8. Smaller screen - drastically reduce clutter and increase focus; or you'll lose customers; however a button should look like a button, a dropdown must look like one. Don't pare it down so much that you stray away from the user's mental model.

The Five Basic Principles

Priority

Prioritize ruthlessly. Not everything deserves equal attention. Boldly emphasize the crucial, de-emphasize the secondary, and eliminate the unnecessary. Guide users' eyes and focus by establishing a clear hierarchy of importance.

Proximity

Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure.

Alignment

Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.

Repetition

Repeat visual elements of the design throughout the piece. You can repeat colours, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity.

Contrast

The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, colour, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page—it’s what makes a reader look at the page in the first place.

The below image shows where all the principles are used.

1. The title of the card is taking the highest priority. (red box)
2. There are two groups which show how proximity has been applied. (green indicator)
3. The title and the points are aligned to the left which makes it easy to navigate and reduces stress on eyes. (yellow indicator)
4. The points are repeated in the same style which also indicates all three points are of the same type of component. (blue indicator)
5. The title has been applied the highest contrast which helps in prioritizing the element. (violet indicator)

Deep Dive into Design Principles

1. Priority

In my view, prioritization stands as the main principle in design. Every element on a web page should possess a clear hierarchy, guiding users on what to focus on initially. For instance, on a purchase page, the "Buy" action takes precedence, steering users towards the primary objective rather than getting lost in unnecessary details.

Example For Prioritising

When a page is filled with many small details, users find it hard to figure out where to start. Contrastingly, in the example below, observe the two lines positioned in the center of the page, they have the highest negative space around them making them stand out prominently.

2. Proximity

Often new designers seem to be afraid of space and fill it with all kinds of graphics, and phrases. When pieces of a design are scattered all over, the page appears unorganised and the information may not be instantly accessible to the reader.

Robin’s Principle of Proximity states that you group related items together, and move them physically close to each other so the related items are seen as one cohesive group rather than a bunch of unrelated bits.

The basic purpose

The basic purpose of proximity is to organise. Other principles come into play as well, but simply grouping related elements into closer proximity automatically creates organization. If the information is organised, it is more likely to be read and more likely to be remembered. As a by-product of organising the communication, you also create more appealing (more organised) white space (designers’ favourite th

Examples For Proximity

In the example below, the sidebar is surrounded by various icons, and the text is centered, creating clutter. The excessive elements around the search feature contribute to user confusion, making it challenging to discern what to focus on. However, after streamlining the sidebar and grouping similar elements, the page becomes more organized.

The concept of proximity is illustrated—both on a page and in life—where physical closeness implies a relationship. As a result, with a cleaner layout, the table becomes easily visible as the primary focal point.

When several items are in close proximity to each other, they become one visual unit rather than several separate units. Items relating to each other should be grouped together.Be conscious of where your eye is going: where do you start looking; what path do you follow; where do you end up; after you’ve read it, where does your eye go next? You should be able to follow a logical progression through the piece, from a definite beginning to a definite end.

3. Alignment

Robin’s Principle of Alignment states, “Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.” The principle of alignment forces you to be conscious—no longer can you just throw things on the page and see where they stick.

When items are aligned on the page, the result is a stronger cohesive unit. Even when aligned elements are physically separated from each other, there is an invisible line that connects them, both in your eye and in your mind. Although you might have separated certain elements to indicate their relationships (using the principle of proximity), the principle of alignment is what tells the reader that even though these items are not close, they belong to the same piece.

The basic purpose

The basic purpose of alignment is to unify and organize the page. The result is similar to what happens when you (or your dog) pick up all the dog toys that were strewn around the living room floor and put them all into one toy box.

Examples For Alignment

The following pages illustrate the above idea initially the text was not aligned to the image placed above or below and there was no proper consistent alignment between the first image-text and the second image-text. So I applied proper consistent space between the two components and aligned the text to the image above and below. Also, notice the text is centred instead of aligning it to the image next to it. I’ll explain the reason below, later on, this reason comes after I discovered the trapped spacing principle.

Text Alignment

I read one more principle from the book about releasing the trapped white space between the text and the image when the image is on the right.

Although it solves the problem of releasing the whitespace. It does not do any good for reading the content. There are two reasons:

1. Our eyes have been conditioned over decades to read from left to right, a pattern reinforced by millions of pages with a consistent straight line on the left. The text holds a unique significance due to our early childhood training, making it easier to read when following the left-to-right flow. Despite the challenges posed by trapped white space, aligning content from left to right remains crucial for facilitating easy scanning. Any deviation from this alignment hinders our natural reading process.

1. I tried aligning the text to the image with text-align to the left as usual but the problem here was the second text looked like it belonged to the image present above. Hence we decided that centering the text was the right decision.

Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page.

Unity is an important concept in design. To make all the elements on the page appear to be unified, connected, and interrelated, there needs to be some visual tie between the separate elements. Even if the separate elements are not physically close on the page, they can appear connected, related, and unified with the other information simply by their placement. Take a look at designs you like. No matter how wild and chaotic a well-designed piece may initially appear, you can always find the alignments within.

4. Repetition

Robin’s Principle of Repetition states, “Repeat some aspect of the design throughout the entire piece.”The repetitive element may be a bold font, a thick rule (line), a certain bullet, a colour, a design element, a particular format, spatial relationships, etc. It can be anything that a reader will visually recognize.

You already use repetition in your work. When you make headlines all the same size and weight, when you add a rule a half-inch from the bottom of each page, when you use the same bullet in each list throughout the project—these are all examples of repetition. What beginners often need to do is push this idea further— turn that inconspicuous repetition into a visual key that ties the publication together.

Repetition can be thought of as "consistency". As you look through a sixteen-page newsletter, it is the repetition of certain elements, and their consistency, that makes each of those eight pages appear to belong to the same newsletter. If page 7 has no repetitive elements carried over from page 4, then the entire newsletter loses its cohesive look and feel. Repetition goes beyond just being naturally consistent—it is a conscious effort to unify all parts of a design.

The basic purpose

The purpose of repetition is to unify and add visual interest. Don’t underestimate the power of the visual interest of a page—if a piece looks interesting, it is more likely to be read.

Examples For Repetition

In the example below the image, there are 4 elements repeated consistently. The image, download button, heading explaining the software and the text which is the description of it. Since it is repeated if you have paid attention to one of the three then it is evident for the rest two what element is impacting on what.

Repetition of visual elements throughout the design unifies and strengthens a piece by tying together otherwise separate parts. Repetition is very useful on one-page pieces and is critical in multi-page documents (where we often just call it being consistent).

5. Contrast

Contrast is one of the most effective ways to add visual interest to your page—a striking interest that makes a reader want to look at the page—and to create an organizational hierarchy among different elements. The important rule to remember is that for contrast to be effective, it must be strong. Robin’s Principle of Contrast states, “If two items are not exactly the same, then make them different. Really different.”

The basic purpose

Contrast has two purposes, and they’re inextricable from each other. One purpose is to create interest on the page— if a page is interesting to look at, it is more likely to be read. The other is to aid in the organization of the information. A reader should be able to instantly understand the way the information is organized, and the logical flow from one item to another. The contrasting elements should never serve to confuse the reader or to create a focus that is not supposed to be a focus.

Examples For Contrast

Before applying the contrast the newsletter almost looks the same without any variations, to put it in one word it is bland. But in the improved version there is a change in typeface and a heavy contrast is applied which makes the titles stand out and the newsletter no more look boring.

Contrast on a page draws our eyes to it; our eyes like contrast. If you are putting two elements on the page that are not the same (such as two typefaces or two line widths), they cannot be similar—for contrast to be effective, the two elements must be very different. Contrast is kind of like matching wall paint when you need to spot paint—you can’t sort of match the colour; either you match it exactly or you repaint the entire wall.

Conclusion

In design, the key is to think about what the user should notice or do first. Following basic principles like prioritizing elements, grouping them together, aligning things neatly, making sure everything lines up, using similar styles, repeating elements, and making things look different when needed, leads to good design. This not only makes designs look nice but also makes it easier for users. I learned these ideas from Robin Williams' "The Non-Designer’s Design Book" and Joe Natoli's "Design Rules." When you use these principles, your designs end up being useful and meaningful for the people who see them.