Although it is in the web design category, this article is key to understanding all the other articles in the category. It will explain the basic principles, as well as a few interesting facts and will indicate the key moments in the development of design as a science. The article is of great importance, since web design is actually part of the design science, which also includes graphic design, product design, interior design, fashion design, software design, even educational design.
However, all of these types of design follow more or less the same basic rules, each of them being subject to the same basic “laws”. For example, the meaning and psychology of colors, the sensations that a font (which is part of typography) creates in the reader, how to build (arrange) a work so that its composition naturally follows the behavior of the human eye.
Being part of design, web design has the same foundations.
Key moments in the development of design
Of course, we can argue a lot about what the key moments in the development of design actually are, if you want, you could even write to us in case we forgot something or gave too much importance to something else. Here is our short list of events that are of key importance to us for the development of design.
- In 105, a Chinese political official named Ts’ai Lun invented paper
- In the mid-15th century, Johannes Gutenberg (c. 1439) invented the mechanically powered printing press with hand-set metal letters.
- 1920s William Addison Dwiggins published a series of essays that are still fundamental to design today
- 1969 Douglas Engelbart invented the computer mouse
- 1984 Apple made it so that everyone wanted a computer in their home with their Macintosh
A designer is a special kind of communicator who is able to take ordinary words and images and translate them into compelling, meaningful, and accessible messages. The goal of designers is to create a visual representation of information with a sense of order and clarity that makes understanding easier for the viewer.
Visual Elements
Every design consists of the following basic visual elements:
- Lines – A line is a shape (item 3 on this list) that connects two or more points in a design. A line can be thin, thick, straight, broken, wavy. It serves both to connect and to separate and organize the elements in your design. Lines can have weight, color, and texture (point 4).
- Colors – see the colors page for more information.
- Shapes – (line, circle, square, triangle) – any two-dimensional area with visible boundaries. Shapes can be geometric or organic (natural).
- Texture (consistency) – physical quality. Creates depth and a certain amount of tactility (tangibility) to otherwise flat images
- Distance
- Form – three-dimensional shapes.
- Typography – see more on the typography page.
Layout and composition
Layout and composition are the foundations of design, they give your work structure and make it easier to navigate.
Just like in photography, composition in design follows certain rules that make one design better or at least more appropriate for a given context than another.
Composition has the following 6 principles, which are basic and must be followed:
- Balance
- Proximity
- Arrangement
- Repetition
- Contrast
- White (empty) space
1. Balance
In order for a layout or composition to be balanced, we must consider the so-called visual weight, so that there are no too heavy elements that take away all the attention (unless that is our goal).
There are three main ways to balance
- Symmetry – everything is visually the same from all sides. Everything looks as if it takes up the same space
- Asymmetry – Asymmetry, as its name suggests, is practically the absence of symmetry. However, this does not mean that balance is eliminated, the elements simply look as if they are unequal in their weight.
- Radial Balance – Radial actually means one that has rays. However, rays have a center, which is actually what radial is – centralized, with a common center from which rays emanate. Therefore, to have radial balance, we must have a central point around which we arrange our elements.
Image: https://venngage.com/
2. Proximity
The proximity of elements in a design is determined by how similar they are. We group elements that are similar, for example, text with text and images with images. This is not a design rule, of course, but just a guideline. It also depends on what level you are grouping at. You could group at the genus level (as in the previous example), but you could also group (close) images that are similar to each other, without this preventing the images from being close to the text. It all depends on the goals of your design and the medium in which it will be placed, but the proximity of similar elements is an important element in the composition.
3. Arrangement
Elements that are on the same side of the composition, unless there is a desired effect, should start from the same position. For example, imagine if the lines in this article started from different places. This would be absolute chaos, which would make the article unreadable, and the design – at best non-functional, but more likely – we would classify it as unpleasant or even ugly.
4. Repetition
Repetition does not necessarily mean repeating the same element in the design, but perhaps the same type of elements. This repetition creates rhythm, and it could also create an unconscious line for the eye to follow, leading it to a specific place where you want it to end up.
5. Contrast
By creating or emphasizing the differences between individual elements, we can create a distinction between them. This can be done through different sizes, colors, weights, or all of them at the same time.
For example:
Sample text
Sample text
In the example we gave, we see all three possibilities for creating contrast in two texts – in the upper one the color is darker and denser, the weight of the text is greater (it is bold) and it is also larger in size than the lower one. This creates a contrast that draws attention to the entire group, but clearly shows which element is more important (in this case, the text).
6. White (empty) space
White space does not have to be white in color. We call it white because the term comes from the English white space. But we can also say, distance, empty space, interval. In a word, the color does not have to be white. If you look at the page on your computer, you see that the text is located in a white field on a colored background, the latter creating a distance between the white field of the text and the white fields in which the sidebar stands. We also call this distance white space, although it is not really white.
White space serves both to separate the elements from each other and to rest the eye, which cannot follow important elements one after another. This would tire not only the eyes, but also the minds of the perceivers. The latter, among other things, is the reason why books in the Western world have so little real content. The rest of the minds of readers is put in the foreground before learning them. That is why very often you can see huge (compared to the size of the book) empty fields above the chapter title and subheadings. This makes reading much easier and calms the mind, but is definitely harmful to development.
Tools
Often, when we want to do something, we first turn to the tools. We don’t use search engines to find out what web design or graphic design is, but rather search for “how to work with Photoshop” or even more specific and, respectively, limiting searches like “how to remove XYZ from a photo using Photoshop”.
And yet, the work of designers has become much easier than before, thanks to these tools. Here are recommendations for a few basic tools that you should learn if you want to become a designer.
First of all, these are the things that every designer should have:
- Sketchbook
- Pencils
- Line
- Computer
- Drawing tablet (optional)
Drawing Tools (Software)
- Adobe Illustrator – designed to help you create artwork that can be enlarged to infinity (so-called vector images), an ideal tool for logos and icons
- Adobe Photoshop – ideal for image editing. Capable of creating any pixel-based graphics – it is impossible to increase the size of the image to infinity (so-called raster images)
- Adobe Indesign – serves to create page layouts – can be used for web design, but its main function is for printing. Here you can combine the images you created in Photoshop and Illustrator.
- Adobe XD – a vector-based user experience design tool for web and mobile applications.
Popular alternatives to Adobe products
- Photoshop – Photoshop Elements, Lightroom, GIMP
- Illustrator – Corel Draw, Inkscape, DrawPlus X6;
- InDesign – MS Publisher, Scribus, Pagestream
- XD – InVision, Figma, MarvelApp, Moqups
Illustrations and photographs
When creating any design, it is very possible to use images and photographs that you have taken from the Internet. To learn more about using these invaluable design elements, please see the photos and illustrations pages.
It is important to know that photo editing is done in tools like Photoshop, which handle raster images, while illustrations are usually created and edited in tools like Illustrator, as they are vector.
When using images, whatever they are, it is important that they fit the visual identity of your brand, and you should keep in mind that the most appropriate images are usually those that are left open to interpretation, however slightly. Look for images that look natural and in place in your design and among the other elements.
Using images in your designs is valuable because they make everything much more engaging.
The most relevant images are clean, clear, and noise-free.
What makes a good design
- Form – how it looks – visually appealing, color harmony, well-chosen typography
- Feeling – conveys the message without being distracting, coherent message, creates the right mood for the recipient
- Function – how it works – fulfills its purpose, is easy to read and understand, can be done in the medium (environment) for which it is intended (print, packaging, etc.)
“Form without function is just a pretty piece of paper.”
~ Author Unknown.
Advertisements
Advertisements should be:
- Simple and memorable
- Represent the brand
- Able to tell a story without using words
Logos
Logos should be:
- Instantly recognizable
- Easy to repeat and move from one medium to another – from a website to a billboard, for example
- Not dependent on time changes and be appropriate for your brand – such a logo is Nike
Learn more about logos
Business Cards
Business cards should be:
- Clean, elegant and legible
- Informative
- Unique (no templates)
Finally
Design, specifically web and graphic design, is, in practice, a type of visual communication that uses text, images and symbols. There are three main areas in which, if you gain skills, they will help you make better designs:
- Visual Arts – photographs, illustrations, drawings, etc.
- Typography – setting up, arranging and creating fonts
- Page Layout – the visual arrangement of elements on a given page.
Although detailed and descriptive, this article will not teach you how to create beautiful designs. To achieve this, you need to practice constantly, participate in discussions, courses, exercises, break down already created designs, that is, try to understand what they show, why they show it, how they show it – using the knowledge you have already accumulated.
Remember that design is:
The organization and presentation of information achieved through a creative process with a specific purpose fulfilling a specific function.
