When formatting an article, there always must be some sort of design. The design of an article serves as its backbone for the whole paper. If the design of the paper is bad, it can impact the willingness of the audience to read. Bad designs can break the flow of an article poorly or distract people from the text proper. A good design is built to help people understand the information presented clearly and concisely .
A common concern for layout artists is how to make a good design in the first place. There are many elements to making a good design that artists tend to overthink and turn a good design into a bad one. Here, some of the basic design principles will be broken down to help layout artists in creating great designs for everyone to enjoy.
A way to avoid visual clutter is by having a good grasp of using white space to give your elements room. White space is another word for negative space. It essentially is the background of a design that you have not added. You can use white space to give air around the design. Avoid keeping things too cramped because if the design feels crammed, it will not be that appealing to the eye. White space helps emphasize important subjects as well.
In the picture above, it features an example of how the negative space better emphasizes the title of the paper. The paper has a lot of room to breathe so it does not feel that cluttered. The clarity of the text is also very evident because of minimal clutter. It is ideal if you use white space like this to help enhance important elements in a design.
A key thing in design to remember is to maintain your alignment. Of course, there could be asymmetrical designs that work. However, the most appealing designs are those that align everything to culminate a design neatly. Text alignment is one example. If each line of text started in different areas, it would be very disorienting for the reader.
Alignment is essential to be appealing to the eyes. People like seeing certain elements come together in a neat grid. This does not just apply to text; alignment applies to every element in a design. Images can align to certain shapes present in the design of a page and give a sense of satisfaction to the viewers. Alignment is also important in presenting information. If certain text aligns or is closely related in the design, the viewer can get an impression of how relevant it is.
The example above is meant to compare what it looks like with good alignment versus bad alignment. The red lines indicate where an element is aligned to. As you can see, the one on the left is much more appealing to look at and is easier to read because everything is aligned with one another. The one on the right looks chaotic in a sense because of how everything has their own alignment.
Contrast occurs when two elements are striking against one another. You can think of it as “opposites'' of one another. You may think that this will look unappealing to match two different elements into one area. However, with the correct utilization of contrast, you can make a design really stand out and make it feel like there is a “pop” to it. Contrast is especially useful for bringing emphasis on certain important elements.
There are many areas to create contrast. To list a few, you can create contrast with different text sizes, text fonts, text styles, and colors. Color is probably the most prominent way to show contrast and is one of the harder ones to get a hang of.
This photo is a simple, yet perfect example of using contrast with color. The words that the designer wanted to emphasize the most were highlighted by having a yellow font color, which makes the text stand out among all the white text. The reader can get an idea quickly on what are the most important aspects of the design.
Complementary colors are colors that are directly opposite to each other in the color wheel: yellow and purple, orange and blue, and green and red are pairs of complementary colors. Directly putting them together can be a bit jarring on the eye. You have to tweak the colors’ hue, saturation, and brightness to make them work together.
Here is a possible way to make these contrasting colors work. Using these colors to emphasize important information is a good way to utilize contrast.
Aside from using complementary colors, you can use the Coolors palette generator to help look for colors that work best with one another. Below, you can find an example of what Coolors can provide. All the colors here are really soothing to the eye and have a high contrast so that when you use these in any design, it would be easy to read.
You can also use Adobe's Color Wheel, which allows you to see more technical aspects of the colors you're choosing and allows you to make palettes using the rules of color theory.
Aside from knowing what the most important parts in the design are, it also helps if a design has a good flow for the viewers. Movement is referring to how the eyes will perceive information. Normally, it would be appealing if the eyes can move in a nice flow of information.
This wedding poster is a good example of a simple design with a good flow. There’s a clear downwards movement for the eyes to follow for information and it is not confusing at all.
An important thing to note is that repeating certain elements create a pattern of sorts. This is advantageous on your part to create clean designs with a nice flow and to avoid visual clutter.
Visual clutter can be created by too much variation in a design. An example is Text fonts. Using more than five fonts may be too much visual clutter for the viewers to read and become distracting. It would be preferable to have three main fonts to use over and over again with their set purposes to avoid this clutter.
Here, there is a clear pattern because there is repetition with design choices. The header font and the subheading color all are a part of the pattern. It helps viewers immediately detect what the function of these elements are.
There are a lot of fundamentals of design, but a strong foundation brings out the best results. Here are a few more videos that would help supplement your understanding.