Web Design Basics: 10 Principles Behind Sites That Convert (2026)

Web design basics are ten decisions, and most of them are made before anyone opens a design tool. What each page is for. What the first screen says. Where the eye goes. How a stranger finds the phone number. Get those right and a plain site converts; get them wrong and no amount of polish will save it. This guide walks through the ten principles we check on every site Nimbus builds for Houston businesses, with the mistake each one prevents and the way to test it on your own site this afternoon.

A word on scope. This is about the design of a business website: a law firm, a contractor, a clinic, a B2B service. It is not about art direction for a fashion label or the layout of a news site. The principles overlap, but the job is different. A business site has one job, which is to turn a stranger with a problem into a conversation.

The ten principles at a glance

1. Give every page one job

The first basic has nothing to do with pixels. Before a page is designed, someone has to decide who it is for and what it should make them do. A service page is for a person comparing providers; its job is a call or a form. A blog post is for a person with a question; its job is to answer it and point to the service. The homepage is for a person who heard your name; its job is to confirm they are in the right place and route them.

When a page has one job, every design decision gets easier. The headline, the order of the sections, the single call to action, and the things you leave out all follow from it. When a page has three jobs, it has none.

Test it: for every page in your navigation, write the visitor and the action in one sentence. If you cannot, the page needs a job or needs to go.

2. Say what you do on the first screen

The first screen a visitor sees, before scrolling, has to answer four questions in about three seconds: what you do, who you do it for, where, and what to do next. "Commercial roofing for Houston property managers. Get a same-week inspection." does all four. "Elevating spaces, exceeding expectations" does none of them, and the visitor leaves to find a site that does.

The first screen also sets the visual tone, and this is where most business sites overspend. A full-screen video, a rotating slider, and three competing buttons add load time and take away clarity. One headline, one supporting line, one button, and one image that shows the actual work is the layout that wins on almost every business site we have tested.

3. Use hierarchy to steer the eye

Visual hierarchy is the order in which a page asks to be read. Size, weight, color contrast, and empty space do the steering. The headline is the largest thing on the screen. The call to action has the highest contrast. Body text is comfortable to read, which on most screens means 16 to 18 pixels and lines of 60 to 75 characters. Space between sections is generous enough that each one reads as its own thought.

The common failure is emphasis everywhere. Six colors, four font sizes in one paragraph, every third word bold, an icon next to every sentence. When everything is emphasized, the eye has nowhere to land, and the visitor skims past the one thing you needed them to read.

A practical rule: one typeface family for headings, one for body, two accent colors at most, and a spacing scale you do not break. Squint at the page. The things that stay visible when it blurs are the things you are telling the visitor matter.

4. Make navigation a stranger could predict

Navigation is not the place to be creative. Visitors have a mental model of how a business site works and they get annoyed when a site breaks it. Five to seven items in the main menu. Labels that are the nouns people would search: Services, Pricing, About, Portfolio, Contact. A phone number or a Contact button in the top right corner of every page. A footer that repeats the important links and states the address.

Two specifics matter more than they look. Services should list the actual services in a dropdown or on a page, not hide them behind a single word. And the logo should link home, because a third of visitors will try it.

Test it: hand your phone to someone who has never seen the site and ask them to find your price or your phone number. Time it. Anything over ten seconds is a navigation problem.

5. Write the words before you draw the boxes

This is the principle that separates sites that look good from sites that work. The words decide the layout. A headline of eight words and a headline of twenty need different first screens. A service with three tiers needs a table; a service with one price needs a sentence. When copy is written first, the design fits it. When design comes first, the copy gets poured into boxes that were shaped for lorem ipsum, and the result is a page that says nothing in an attractive way.

Good web copy is plain. Short paragraphs, one idea each. Sentences a tired person can follow on a phone. The visitor's problem named before your solution. Specifics instead of adjectives: "licensed in Texas since 2009" beats "experienced and trusted." Every page ends with what to do next.

The most common redesign we are asked to fix is one where the agency changed the layout and kept the words. It looked new and produced the same leads as before, because the visitor was reading the same nothing.

6. Put proof where the doubt is

Every ask on a page creates a doubt, and proof belongs next to the doubt, not on a separate page. Next to "request a quote," a line of reviews with the star rating and the count. Next to the price, the guarantee. Next to the claim of experience, the photo of the actual crew on an actual job. Next to a B2B service, the logos of clients who will confirm it.

Real proof beats polished proof. A slightly imperfect photo of your team outperforms a stock image of a handshake, because visitors have learned what stock looks like and read it as evasion. Numbers beat adjectives: projects completed, years in business, average response time, review count. A short case study with a before, an after, and a number is the strongest single asset a business site can have. The projects in our portfolio are written that way for the same reason.

7. Design for the phone first

For most Houston businesses, more than half of visits come from a phone, and Google has indexed the mobile version of sites first since 2018. The mobile layout is the site. The desktop layout is the version with more room.

Designing mobile first changes decisions. Buttons become tall enough for a thumb. The phone number is tappable and sits where a thumb can reach it. Forms shrink to the fields you actually need, which is usually name, phone, and one question. Tables become stacked cards or scroll inside their own box. Images are cropped so the subject survives a narrow screen. Menus collapse into a pattern everyone recognizes.

Test it: open your site on your own phone in bright light, one-handed, on cellular. If you cannot call the business within two taps of landing, neither can a customer.

8. Treat speed as a design decision

Load time is decided by design choices: how many images, how large, how many fonts, how many scripts, whether the first screen waits for a video. Google measures it through Core Web Vitals, and the thresholds are public. The largest element on the screen should appear within 2.5 seconds. The page should respond to a tap within 200 milliseconds. Nothing should jump around while it loads (a layout shift score under 0.1).

The fixes are mostly design fixes. Compress and resize images to the size they display at, in a modern format. Use two font weights instead of six. Load the chat widget, the map, and the tracking scripts after the page is usable. Skip the hero video unless the video is the product. Choose hosting that serves the site from a content delivery network by default, which is one of the reasons we build on Webflow.

Test it: run your homepage and your busiest service page through Google's PageSpeed Insights on mobile. The three numbers above are pass or fail, and Search Console reports them for every page.

9. Accessibility is usability

Accessible design is design that works for people using a screen reader, a keyboard, a small screen in sunlight, or a phone with the text size turned up. Most of it is the same as good design for everyone. Text contrast of at least 4.5 to 1 against its background, which also helps the visitor reading in a parking lot. Alt text on images, which also tells Google what the picture shows. Form fields with visible labels, not placeholder text that vanishes when you start typing. Links that say where they go instead of "click here." Meaning carried by words and shape, not by color alone. Everything reachable with a keyboard.

The standard to design against is WCAG 2.2 at level AA. Businesses that treat it as a legal chore miss the point: the sites that pass are the sites that are easier for everyone, and the same clean structure is what search engines and AI systems reward.

10. Build for search from the sitemap

Search visibility is decided when the site is structured, not after launch. Each core service gets its own page with a title and a heading that match what people type. A Houston plumber needs a page for water heater replacement, not a paragraph about it on a page called Services. Each place you serve, if service area matters, gets a page with something specific to say. Titles are written for the search result, headings answer the question under them, and pages link to each other in the order a visitor would ask questions.

The technical layer follows: a clean URL structure, an XML sitemap, schema markup for the business and its services, fast pages, and a site that can be edited so the content stays current. A site built this way needs far less "SEO" afterward, because the design already did most of it. Our Houston local SEO playbook covers the rest.

What changed in 2026

The ten principles are old. Three things around them are new.

AI answers now sit above the search results, and they quote pages that state facts plainly: who you serve, where, for what price, what happens next. The sites built on principles 2, 5, and 10 are the ones being cited, because plain statements are what a machine can lift.

AI tools now generate layouts and copy in minutes, which has flooded the web with sites that look finished and say nothing. The look is no longer a differentiator. Specific words, real proof, and a page that answers the visitor's question are.

And the site has to be editable by the business, because the sites that win are the ones that change every month. A new review, a new service, a page for the suburb you started serving. A site that requires a developer for every change decays. We build on Webflow because the office manager can update a service page without calling anyone, and because hosting, speed, and security come with it instead of being a monthly chore.

How to apply this to your site

1. Write the one-sentence job for every page. Cut the pages that do not have one.
2. Rewrite the first screen of the homepage and each service page to answer what, for whom, where, and what next.
3. Move proof next to every ask.
4. Test navigation, mobile, and speed with the three tests above and fix what fails.
5. Check that every service and every service area has its own page with a real title.

If the site fails most of these, it is usually faster to rebuild than to patch. What a redesign costs and how to choose the agency are the next two reads. Our own web design plans start at $2,000 a month with hosting and ongoing changes included, and every site we build is checked against the ten principles above before launch.

Questions owners ask about web design basics

What are the basics of good web design?

One job per page, a first screen that says what you do and for whom, clear visual hierarchy, predictable navigation, copy written before layout, proof placed next to each ask, a mobile-first layout, fast load times, accessible structure, and pages built around what people search for.

What is the difference between UI and UX?

UI is what the visitor sees and touches: type, color, buttons, layout. UX is whether the visit works: can they find the price, understand the offer, and contact you without friction. A site can have a beautiful UI and a terrible UX. The reverse is rarer.

How many pages should a small business website have?

As many as it has distinct jobs. A typical Houston service business needs a homepage, one page per core service, an about page with the real people, a proof page or case studies, a contact page, and location pages only for areas it truly serves. Five to fifteen pages is common.

Does web design affect SEO?

Directly. Structure decides which searches a page can rank for, speed and mobile layout are ranking signals, headings and internal links tell Google what the site is about, and a page visitors can actually use keeps them from bouncing back to the results.

Should I use a template?

A template is fine for a site that only needs to exist. It is the wrong tool for a site that needs to compete, because the layout was drawn before your words existed and every competitor with the same template looks like you. The middle path is a custom design on a platform the business can edit.

What makes a website look credible?

Real photos, specific claims, visible reviews, a physical address, a fast page, consistent typography, and copy that sounds like a person. Credibility is mostly the absence of the things that read as evasion: stock photos, vague adjectives, and a contact form with no phone number.

Next step

Run the three tests on your current site: the ten-second navigation test, the two-tap phone test, and PageSpeed on mobile. If it passes all three and every page has a job, the site is in better shape than most of Houston. If it does not, talk to us about what a rebuild would look like, or start with what a website costs in 2026.