Main Elements of Web Design

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.


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.

tiny mce image

Kazuki Noda Portfolio


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.

tiny mce image

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.


Color palettes are divided into the following types:
  • 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 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.

tiny mce image

Eric Huguenin


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 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:

tiny mce image



Font size can help you create hierarchy within a text. You may use a bigger font size for titles and headings and a smaller font size for the body.
The recommended text size for websites is 16 px, but it depends on how much content needs to be displayed. For example, a landing page can have 16px text, while a more complex page with different types of content is more likely to have smaller font, e.g. 14 px.
tiny mce image
Huge blocks of text are hard to read, which is why you should add white space.
You can create white space by:
  • 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).
Alignment is crucial in typography for legibility. You can align your text and/or images to the left, right, center, or justify them.
Here’s how to use different alignments:
  • 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.


tiny mce image


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.

tiny mce image
Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *