Four Basic Principles for Non-Designers in Design

Anna Mészáros, a professional designer, is often asked by family and friends for advice on creating websites, resumes, portfolios, Facebook and Instagram photos, YouTube thumbnails, and more. Mészáros has developed four simple principles that he has found important for non-designers to follow in design.

Fundamental design principles for non-designers – freeCodeCamp.org
https://medium.freecodecamp.org/fundamental-design-principles-for-non-designers-ad34c30caa7

◆Principle 1: Create clear contrasts.

People have an instinctive aversion to things that are “a little different, but only a little different,” a kind of “uncanny valley phenomenon,” according to Mészáros. For this reason, it is important to keep “contrast” in mind when designing, and either pay close attention to uniformity or use bold and clear distinctions. There are four major design elements that should be considered in terms of contrast.

1. color scheme

In the example on the left, the background and text are almost the same color or similar colors are used, which causes the text to be blurred. On the other hand, in the example on the right, the background and text are clearly separated and easy to read.

2. size ratio

When 32pt text and 36pt font are placed side by side as shown on the left, there is only a slight difference in the size of the text, which is disconcerting. On the other hand, by changing the size of the font to a larger size, such as 18pt and 36pt as shown on the right, it is possible to distinguish between headlines and main text, or between phrases to be emphasized and supplementary text.

3. font thickness

The principle that “subtle differences only create a sense of discomfort, but large changes can be effective” applies to font thickness as well.

4. font type

Similarly, using similar fonts for different paragraphs does not make sense, but a drastic change in font can emphasize the difference between two paragraphs.

◆Principle 2: Be consistent

A simple and consistent design allows the reader to focus on the content. In addition, consistency will give the viewer the impression that the design has been well thought out.

In the example below, the text is repeated in two paragraphs, but the three symbols separating the paragraphs and the font size and type for each paragraph are different in the left example, while the same design is used in the right example, which gives a very different impression.

◆Principle 3: The fewer elements used in a design, the better.

The philosopher Ockham proposed a guideline called “Ockham’s razor,” which states that “one should not assume more than is necessary to explain a certain matter,” and this also applies to design. At first glance, the example on the left in the figure below may seem elaborate, but when compared to the example on the right, which is stripped of unnecessary ornamentation, the latter gives a cleaner and better impression.

Mészáros quotes Marie Kondo, a.k.a. “Kommari,” as saying, “If it doesn’t excite you, throw it away.

A British psychologist who has practiced Marie Kondo’s tidying up technique, which has taken the world by storm, evaluates its effectiveness.

◆Principle 4: How to take up space

The placement of text and images functions as a meta-level message in itself, he said. This principle includes three additional rules.

1. place related items close together and unrelated items far apart.

It is obvious at first glance that it is difficult to read text when the space between lines is so tight that the text overlaps. In contrast, in the example on the right, each paragraph is organized as a single paragraph, so it is easy to tell at a glance that it consists of two paragraphs.

In the left example, although the two paragraphs are deliberately combined in a square frame, there is an unnatural space between the paragraphs, which contains conflicting messages and confuses the reader. On the other hand, in the example on the right, the two paragraphs are evenly spaced within the frame, so that the reader can understand that the two are a single component.

In the left example below, the label “circle” is under a circle, the label “triangle” is above a triangle, and the label “rectangle” is between a rectangle and a triangle, so the reader cannot tell which label belongs to which figure until reading the label. On the other hand, in the example on the right, the labels are uniformly placed below the figure, so the relationship between the figure and the label can be understood by the reader at once.

2. negative space

By daring to leave a large empty space, you can emphasize the relationship between the elements that are grouped together. This principle is called “negative space. Also, as mentioned in Principle 3, if information is crammed into a limited space, the reader will not know which information is important in the end, so it is necessary to select the information that is truly important.

Mészáros cites Apple’s web design as a good example of this principle.

3. show what is important first and in a big way

The most important components should be placed at the beginning of the whole, so that they make up the largest percentage of the whole. This will naturally convey to the reader that the element is important.

Satoshi

Hello, I’m Satoshi. I’ve been working as a staff member for an organization for over a decade. During that time, I’ve had various experiences, from launching new businesses to streamlining operations using information I’ve gathered from the internet and my own experiences. Of course, I’ve been successful with the help of colleagues and superiors, and I’m grateful to them. Nowadays, I find myself in a position where people from various backgrounds ask me for advice and share their knowledge. However, being constantly approached has made me realize that I need to protect my own time. So, I’ve decided to start a blog called ‘Satoshi Lab’ to share knowledge. I hope that by writing about my thoughts and experiences, people will enjoy reading and find it helpful in their own journeys.