Every website is like a human body. The internal organs — lines of code — help it function, but the body also has an external appearance. While humans have eyes, hair, lips; websites have their own main elements: lines, shapes, color palette, texture, typography, and form.
Lines
A line is a one-dimensional figure, which connects any two points. In design, it’s used to organize, direct, or separate sections. Lines can be any width or length, and go in any direction — they can even move! That’s why lines can be very useful in creating emotion or rhythm on your page.
Shapes
Shapes are two-dimensional, enclosed areas created by using lines, textures, colors, and/or other elements. Most designs use at least one of the three fundamental shapes: a circle, a square, and a triangle. By using shapes, you can create different types of moods or emotions. For example, if you have a shape with many corners, it may look sharp, active, and aggressive. On the other hand, if it’s round, it conveys a feeling of wholeness.
Philippe Neveu – Independent motion & interactive designer
Color Palette
As you’ll see later in the sprint, colors convey different emotions and meanings. That’s why choosing a color palette is one of the most important decisions in web design. Color palettes are used not only for organising information or creating hierarchy, they can also have an emotional impact.
- Monochromatic,
- Complementary,
- Analogous,
- Split-complementary,
- Triadic,
- Tetradic,
- Square.
Don’t worry if you’re not sure what these mean. You’ll learn more about each one in the coming lessons!
Texture
Texture is an illusion of how a surface feels. In web design, it adds richness and dimension to a work. While wood, paper, and glass are the basic examples of texture; a pattern (e.g. spirals, meander, animalistic patterns) can also fit the definition. Textures are mostly used as a background or a design detail.
Typography
The main goal in typography is to ensure that the text is legible on all screen types. To do so, you have to ensure harmony between every element of typography: font, size, color, spacing, and alignment.
Font
Font is the main element of typography. Much like colors, fonts have their own characteristics and create different associations. That’s why you have to choose them very carefully. Fonts are categorised into five main types:
- Setting the line spacing to be 120–145% of the point size;
- Limiting the line length of your text to 45–90 characters;
- Adding white space between heading and the body text (the white space should be 16 px, 24 px, or 32 px).
- Left alignment is the easiest for our eyes to read, so it’s great for big blocks of text.
- Right alignment is used for distinguishing short typographic elements or text blocks that act like art elements, e.g. side notes.
- Centered alignment is quite hard to read, which is why it’s usually only used for short phrases, e.g. quotes.
- Justified alignment works great for long texts, e.g. legal documents, academic essays, and novels, but it’s not recommended for websites.
Form
A form is a three-dimensional composition (or an object within it). Forms add depth and texture to elements that create the illusion of 3D objects.
