Web design for beginners: the basics every website needs

🎨 Design is not only looks

Web design is the arrangement of content that leads the visitor to a goal: to call, write a message or buy. So first decide what the visitor should do, and only then choose colours and images.

🧱 The basics, in order

1. Hierarchy. The most important thing must be the biggest and most noticeable. Headline, subheading, text and button clearly separated.
2. Spacing. Give elements room. Cramped content looks unprofessional and is hard to read.
3. Typography. One or two fonts, text of about 16 px, line spacing around 1.5.
4. Colour. The 60-30-10 rule: a base colour, a supporting one and one accent for buttons.
5. Contrast. Text must read clearly against the background. Check it with a contrast tool.
6. Grid. Aligned elements give an impression of order.
7. Images. Real photos, optimised, with a description (alt).
8. Mobile first. Most visits come from phones, so start design from the small screen.

🧰 Tools to start with

Figma for sketches and layout, Canva for simple graphics, a contrast checker and a colour palette picker. For images see web images.

❌ Most common beginner mistakes

• Too many colours and fonts.
• Small, light text over an image.
• A button that does not differ from the rest of the page.
• A site made only for desktop. See mobile version.
• Images so large they slow loading.

🚀 Next step

Once the basics sink in, learn how UX and UI design work together. If a site should bring customers and you have no time to learn it yourself, see how we do web design.