Skip to content

Basic Website Design: Use Hierarchy, Spacing, and Readable Colors

Summary

Learn basic website design through descriptive headings, meaningful spacing, readable colors, useful images, and mobile checks with your actual content.

Published

Design around a Readable Order of Visitor Information

Begin website design with an information order visitors can read and navigate. Use type, spacing, and color to express that order.

Check whether people can find the offer, prices, and contact route. The explanation and controls need to remain usable on a phone.

Express Content Relationships with Headings and Spacing

Use descriptive headings and group related copy and images. Equal visual emphasis throughout can obscure the reading order.

W3C recommends headings that describe content. (W3C: Writing for web accessibility) Keep each section aligned with its heading.

Choose Colors and Images for Their Information Role

Choose colors for body copy, background, and controls with readable combinations. Use images that explain real places or products without displacing important information.

State prices and essential details in text as well as images.

Review Content inside the Template

Templates still need checks for long copy and cropped photos. Test reading prices and reaching the contact route on a phone.

Try a date or menu update and assign an owner who can inspect the result.

SpreadSite is a no-code website builder that lets you create, publish, and update a website from Google Sheets using ready-made templates.

To publish a website presenting your information through templates, give SpreadSite a try!

Build a website with SpreadSite →

Frequently asked questions

Q: Should I use many colors and fonts?

A: Use enough to express information roles, without adding variety for its own sake.

Q: Does more spacing always improve readability?

A: Keep related information connected and test with actual copy.

Q: Are photos required?

A: Use them when informative and retain essential explanations in text.

Q: What should I test before publication?

A: Read the offer, prices, and contact details and use the links on a phone.

Sources

Build a website with Google Sheets using SpreadSite