Web Design Basics: The 7 Fundamentals of a Business Website That Converts
By Christoph Olivier, Founder, CO Consulting
Last reviewed: July 2026
Most “web design basics” guides teach you why a business needs a good website. This one teaches the seven building blocks that make one good: layout, visual hierarchy, color, typography, navigation, mobile, and conversion. Each block below is a principle you can apply today, with the specific number to hit, so a non-designer can judge and fix their own pages without hiring anyone first. I have rebuilt homepages that doubled call bookings by changing nothing but these seven things.
What are the basics of web design?
The basics of web design are seven fundamentals that decide whether a visitor acts: layout structures the page, visual hierarchy directs the eye, color and typography carry the brand and readability, navigation lets people find things, mobile design serves most of the traffic, and conversion design turns attention into an action. Get these right and the site works. Miss two and it leaks.
Everything else, animation, trends, illustration, is decoration on top of these seven. A plain page that nails all seven outperforms a beautiful page that misses three. For the business reasons behind investing in design at all, see our guide to web design for small business; this page stays on the craft.
The 7 fundamentals at a glance
| Fundamental | Job it does | The number to hit |
|---|---|---|
| Layout | Structures the page so it scans | One primary action per page |
| Visual hierarchy | Tells the eye where to go | 3 levels: headline, subhead, body |
| Color | Signals brand and the next click | 60-30-10, one accent for CTAs |
| Typography | Makes text readable and ranked | 1-2 fonts, 16px+ body, ~65 char lines |
| Navigation | Lets people find and trust | 5-7 top-level items |
| Mobile | Serves most of the traffic | Single column, 44px tap targets |
| Conversion | Turns attention into action | Visible CTA above the fold |
Layout: give every page one job
Layout is the arrangement of blocks on a page, and the first rule is one primary job per page. Decide the single action you want, book a call, buy, subscribe, then build the layout around it and demote everything else. Pages that ask for three things get none of them.
Work top to bottom in a predictable order: header and navigation, a hero that states what you do and for whom, proof, then the offer and the action. Use a grid so elements align to the same vertical lines; misalignment reads as amateur even when nobody can name why. Give sections room to breathe with white space, which is not empty, it groups related items and separates unrelated ones so the page scans in seconds.
Visual hierarchy: control where the eye lands first
Visual hierarchy is the deliberate ordering of elements by importance using size, weight, color, and position, so the eye lands on the headline first, the subhead second, and the button when it matters. Without it every element shouts at once and the visitor freezes. With it, a page reads in the order you intended.
Build three clear levels: a dominant headline, a supporting subhead, and body text, with an obvious size jump between each (for example 40px, 24px, 16px). Put the most important thing in the top-left-to-center path where Western readers look first. Make the call-to-action the single loudest object on the screen through contrast, not just size. If two things compete to be most important, one of them is in the wrong place.
Color: pick a system, not a palette
Good color in web design is a system, not a mood board: one dominant neutral, one brand color, and one high-contrast accent reserved for actions. The proven ratio is 60-30-10, sixty percent dominant, thirty percent secondary, ten percent accent, which keeps pages calm and makes buttons obvious. Reserve your accent color for one job: things people should click.
Contrast is not optional. Body text against its background should meet the WCAG AA ratio of at least 4.5:1, both for accessibility and because low-contrast text quietly lowers reading and conversion. Pick two or three colors and stop; every extra color is one more thing competing with your CTA. Color also carries emotion and brand recognition, so anchor the palette to your logo and use it consistently across every page.
Typography: readability is a ranking and conversion factor
Typography is how text looks and reads, and the basics are narrow: one or two typefaces, a body size of at least 16px, line length near 60 to 75 characters, and line height around 1.5. These are not style choices, they are the difference between a page people read and one they abandon. Text that is hard to read is content nobody consumes.
Use a type scale so sizes relate to each other, for example 16px body, 20px lead, 28px H3, 40px H1, rather than random sizes. Pair fonts by role: one for headings, one for body, and never more than two families, because a third rarely adds meaning and usually adds clutter. Left-align body text, avoid full justification on the web, and keep paragraphs short so mobile readers do not hit a wall of gray.
Navigation: make finding things effortless
Navigation is how people move through your site, and the rule is simple: five to seven top-level items, labeled in plain words your customer uses, not internal jargon. A confused visitor does not ask for directions, they leave. Clear navigation is quiet infrastructure that most people only notice when it is missing.
Keep the main menu consistent on every page and always give a visible way home, usually a clickable logo. Label links by what the visitor gets (“Services,” “Pricing,” “Book a call”) rather than clever names. Put your primary action in the top-right of the header where people expect it, and add a footer with the secondary links, contact details, and legal pages so the header stays lean. On content pages, add contextual in-body links; for example our homepage optimization guide shows how the same navigation principles apply to the highest-traffic page you own.
Mobile: design for the small screen first
Mobile design means building for a phone screen before a desktop one, because most business site traffic is now mobile and Google indexes the mobile version. That means a single-column layout, tap targets at least 44 by 44 pixels, and the primary action reachable with a thumb without pinching or zooming. If it does not work one-handed on a phone, it does not work.
Design at a 360px minimum width, stack content vertically, and put the main CTA above the fold on mobile where the fold is short. Keep menus behind a clear icon but make the most important action visible without opening the menu. Test on a real phone, not just a shrunken browser window, because thumb reach and load time only show up on the device. Slow mobile pages cost conversions directly; the web design and UX statistics we track show speed and mobile usability moving revenue, not just bounce rate.
Conversion: turn design into action
Conversion design is the part that turns a good-looking page into a booked call or sale: a single clear call-to-action, visible above the fold, surrounded by the proof and the friction-removers a buyer needs. Design that people admire but do not act on has failed at its actual job. Every page should make the next step obvious and easy.
Use one primary CTA per page and repeat it, do not offer five competing buttons. State the value in the button (“Book a free consultation,” not “Submit”), and place proof, testimonials, results, logos, near the ask, not buried at the bottom. Remove friction: shorten forms, cut fields you do not need, and answer the obvious objection before it stops the click. If you want a second set of eyes on where your pages leak, we do exactly this inside growth consulting and can turn a static site into one that books calls; book a consultation to walk through your pages.
A 20-minute self-audit: score your own site
Run this on your homepage before you change anything. It is the same first pass I do on a client site, and it exposes most problems in under half an hour.
- Layout: Can a stranger name the one action this page wants in five seconds? If not, you have too many jobs.
- Hierarchy: Squint at the screen. Is the headline clearly the loudest thing, and the CTA second? If everything blurs together, add contrast.
- Color: Is your accent color used only on clickable things? If it appears on decoration too, buttons stop reading as buttons.
- Typography: Is body text 16px or larger and easy to read at arm’s length on a phone? Count your fonts; more than two, cut one.
- Navigation: Five to seven menu items in plain words, and a clickable logo? Anything more, prune it.
- Mobile: On your actual phone, can you reach the main button with one thumb without zooming?
- Conversion: Is a clear CTA visible above the fold, with at least one piece of proof nearby?
Each “no” is a fix worth more than any redesign. Most sites fail three of these seven, and fixing those three usually moves conversions more than a full rebuild.
Frequently asked questions
What are the basics of web design?
The basics of web design are seven fundamentals: layout, visual hierarchy, color, typography, navigation, mobile design, and conversion design. Layout structures the page around one action, hierarchy directs the eye, color and type carry brand and readability, navigation helps people find things, mobile serves most traffic, and conversion turns attention into a booked call or sale.
Do I need to code to apply web design basics?
No. Every fundamental here, one action per page, three-level hierarchy, a 60-30-10 color system, 16px body text, five to seven menu items, single-column mobile, and a visible CTA, can be applied in Squarespace, Wix, WordPress, or Webflow without writing code. These are design decisions, not development tasks. You judge and fix them by eye using the numbers in this guide.
What is the most important web design principle for a business site?
Give every page one job. A business page exists to produce a specific action, usually a booked call, purchase, or signup, and layout, hierarchy, color, and conversion design should all point at that single action. Pages that ask visitors to do three things typically get none done. Decide the one action first, then design everything else to support it.
How many fonts and colors should a business website use?
Use one or two fonts and roughly two to three colors. Pair one typeface for headings and one for body text, keep body size at 16px or larger, and build a color system of one dominant neutral, one brand color, and one high-contrast accent reserved for buttons. Extra fonts and colors add clutter and make your call-to-action harder to spot.
What web design basics affect mobile conversions most?
Single-column layout, 44px tap targets, fast load, and a CTA above the fold matter most on mobile. Most business traffic is now mobile, and Google indexes the mobile version first. Design at 360px width, stack content vertically, keep the primary action reachable with one thumb, and test on a real phone, since slow or fiddly mobile pages lose conversions directly, not just visits.