Website design elements every business site needs

Website design elements are the parts that make up a web page: the header, the headline, the buttons, the photos, the forms and everything in between. Each one has a job. Together they turn a stranger into a customer.

The elements of website design fall into four groups. Structural elements give the page its frame. Visual elements decide how it looks and reads. Content elements explain the offer. Conversion elements give the visitor a clear next step.

This guide covers every group. For each element you get what it does, how to get it right and a quick test. Run the tests on your own site with a phone in your hand, because most visitors will see it on one.

1. StructuralHeader, logo, navigation, hero section, contact details and footer.
2. VisualTypography, color, images and video, and white space.
3. ContentService or product blocks, social proof and trust elements.
4. ConversionCalls to action, forms, online booking, chat and a lead magnet.
5. EverywhereAccessibility and speed, which affect every element on every page.

The header is the strip at the top of every page. It holds your logo, the main menu and often one button. Visitors use it to find their way, so it should look and work the same on every page.

Put the logo top left and link it to the homepage. Nielsen Norman Group found that users are 89 percent more likely to remember a logo shown in that traditional spot than one placed on the right.

Keep the main menu short, around five to seven items, labeled with the words customers use: Services, Prices, Reviews, Contact. On a phone the menu folds into a menu icon. Keep your phone number or main button visible next to it.

1. Get it rightPlain menu labels, the logo linked to the homepage, one accent button such as Book a call, and a header that stays within reach while scrolling.
2. Quick testOpen a deep page on your phone. Reach the homepage and the contact page in one tap each. Needing more taps means the header needs work.

The hero is the first screen a visitor sees before scrolling. It needs three parts: a headline that says what you do, a subline that says for whom and why you, and one main button.

This screen gets the most attention. In a 2018 eye-tracking study, Nielsen Norman Group found that people spent 57 percent of their viewing time above the fold, the part visible before scrolling, and 74 percent in the first two screens.

Write the headline in plain words. Emergency plumber in Denver, at your door within the hour beats a slogan about quality and passion. Add a photo of your work or team beside it, and one proof line under the button, such as your rating.

1. Get it rightOne headline, one subline, one main button in your accent color and at most one quieter second option.
2. Quick testOn your phone, look only at the first screen. Ask a friend to tell you what you offer, for whom and what the button does. Three correct answers mean the hero works.

Visitors who want to reach you often scroll straight to the bottom. The footer is their safety net. It repeats your contact details, opening hours, service area and the links people look for, such as privacy and terms.

Write your business name, address and phone number the same way everywhere: on the site, in your Google Business Profile and in directories. Matching details help Google connect them to one business, which supports your place in the map results.

On a phone, make the number a tap-to-call link and the email address a tap-to-mail link. A contact page with an embedded Google map helps customers who visit you. Businesses that travel to customers can list their service area.

1. Get it rightName, address, phone, email, hours, service area, social links, privacy policy and a short repeat of your main call to action.
2. Quick testTap the phone number in your footer on your phone. The dialer should open with your number filled in.

Typography is the choice and styling of your fonts. It sets reading speed and hierarchy, the order in which the eye moves from headline to subheading to body text. Good type feels effortless, so visitors keep reading.

Pick one font for headings and one for body text, or one font family in two weights. Set body text at 16 pixels or larger on a phone, a common baseline in mobile design. Keep lines around 50 to 75 characters wide on a desktop.

Give headings clear steps in size. A visitor who scans only the headings should still follow the story of the page. Left-aligned text is easier to follow than centered text once a paragraph runs past two lines.

1. Get it rightTwo fonts at most, body text of 16 pixels or more, a line height around 1.5 and headings that sum up the section below them.
2. Quick testRead only the headings of your homepage aloud. When they tell your offer in a logical order, your type hierarchy works.

Color carries your brand and guides the eye. A small palette works best: a main brand color, a neutral for backgrounds and text, and one accent color reserved for buttons and links.

Many designers start from the 60-30-10 rule: 60 percent neutral, 30 percent brand color and 10 percent accent. When the accent appears only on clickable things, visitors learn fast where to tap.

Contrast decides readability. The W3C accessibility guidelines, known as WCAG, ask for a contrast ratio of at least 4.5 to 1 for normal text, and 3 to 1 for large text, buttons and form borders. Pale gray text on white usually fails.

1. Get it rightThree or four colors, the accent kept for actions, and every text color checked against its background.
2. Quick testRun your homepage through the free WAVE browser extension from WebAIM. It flags every piece of text with too little contrast.

Images show what words only describe: your work, your team, your space. Real photos build more trust than stock images, because visitors spot it when the smiling team in the hero clearly works somewhere else.

Heavy images are a common cause of slow pages. Export photos at the size they display, use modern formats such as WebP or AVIF, and set a width and height so the layout stays still while they load.

Google's Search Central documentation advises descriptive alt text: a short written description of the image that screen readers read aloud and search engines use. Keep video short and muted, since browsers such as Chrome reliably autoplay video only with the sound off.

1. Get it rightReal photos of your work, compressed files, fixed dimensions, alt text on every image that carries meaning, and video as support for the message.
2. Quick testOpen your homepage on mobile data. If the hero photo loads in pieces or pushes text around, compress it and set its dimensions.

White space is the empty area around and between elements. It can be any color. It groups related items, separates sections and gives the eye a place to rest, which makes a page feel calm and easy to scan.

Use space with intent. Put less space between a heading and its own text than between two sections, so the eye sees what belongs together. Give your main button extra room so it stands out from everything around it.

A crowded page makes the visitor do the sorting. When you feel the urge to add one more banner, look for something to remove first. Every element you cut gives the remaining ones more weight.

1. Get it rightFixed spacing steps, such as 8, 16, 32 and 64 pixels, with the largest gaps between sections and the smallest inside groups.
2. Quick testZoom your browser out to 50 percent. Clear blocks with visible gaps mean the spacing works. A gray wall of text means the page needs room.

Service or product blocks are the cards or sections that present what you sell. On a homepage they work as a menu: one block per main service, each with a short title, two lines of benefit and a link to its own page.

Write each block from the customer's side. Bathroom remodels finished in three weeks says more than Bathroom services. Add a starting price or a price range when your trade allows it, since many buyers look for price early.

Give every main service its own page. A separate page lets you answer the questions specific to that service, and it gives Google a clear page to show for each search.

1. Get it rightThree to six blocks, a benefit in each title, one image or icon per block and a link to a full service page.
2. Quick testAsk someone to point at the service they need within ten seconds. If they hesitate, rename the blocks in the words your customers use.

Social proof is evidence from others that you deliver. It comes in three forms: customer reviews, logos of clients or partners, and numbers such as years in business or jobs completed. Each answers the silent question: can I trust you?

Place proof close to every decision. Put your star rating right under the hero button, a review beside the contact form and a short quote on each service page. Proof far from the action does little work.

Use real reviews with a first name, a place and a date, and link to the source, such as your Google reviews. Specific beats general: The roof was done in two days and the yard was spotless convinces more than Great service.

1. Get it rightReal, recent, named reviews, a visible rating with its source and only figures you can back up.
2. Quick testScroll your homepage on a phone and count the screens until the first review or rating appears. One screen or less is the goal.

A call to action, or CTA, is the button or link that asks the visitor to act: book, call, request a quote. It is the moment a visitor becomes a lead, so it deserves the most care of all website elements.

Write the button text as the result the visitor gets. Book your free inspection beats Submit. Use the same main action across the site, in the same accent color, and repeat it after each major section so it is always one scroll away.

Offer a lighter option for visitors who are still comparing, such as a guide or a price check. Keep it visually quieter than the main button, so the order of importance stays clear.

1. Get it rightOne main action per page, button text that starts with a verb, the accent color and a repeat after every major section.
2. Quick testTap every button on your phone with your thumb. WCAG 2.2 asks for targets of at least 24 by 24 CSS pixels and Apple advises 44 by 44 points. Each tap should land the first time.

A form collects the details you need to follow up. Every extra field costs you completed requests, so ask only what you need for the first reply. Name, email or phone and one open question cover most service businesses.

Make the form easy on a phone. Use field types that show a number pad for phone numbers and an @ key for email. Turn on autofill, put labels above the fields and show errors next to the field to fix.

Say what happens after sending. A line such as We reply within one business day removes doubt. Then send the visitor to a thank-you page that confirms the request and suggests a next step.

1. Get it rightThree to five fields, visible labels, autofill on, a clear button text and a promise about when you reply.
2. Quick testFill in your own form on your phone with one thumb and time it. Under 30 seconds is a good target for a contact form.

Trust elements reassure a visitor right before they share details or money. They include a secure connection, a clear privacy policy, guarantees, licenses or certifications, and the real people behind the business.

Serve every page over HTTPS, the encrypted connection browsers expect. Chrome labels plain HTTP pages as insecure in the address bar, which drives visitors away.

Publish a privacy policy that explains what your forms collect and why. Laws such as the GDPR in Europe and the CCPA in California set rules for this, so keep the policy current and link it beside every form.

State your guarantee in plain words near the main button, such as a free quote or a satisfaction promise you honor. Show the licenses, insurance or memberships your trade requires, and add an About section with real names and faces.

1. Get it rightHTTPS on every page, a privacy policy linked in the footer and beside forms, guarantees stated plainly and credentials shown with their source.
2. Quick testLook at your contact form on a phone. The privacy link and one reason to trust you should sit on the same screen.

Accessibility means everyone can use your site, including people who use a screen reader, a keyboard or zoom. The WCAG guidelines describe how. The basics: alt text on images, labels on form fields, logical headings, enough contrast and a visible focus mark for keyboard users.

Google measures speed with Core Web Vitals. Its web.dev documentation counts a page as good when the main content loads within 2.5 seconds, a tap gets a reaction within 200 milliseconds and the layout shift score stays at 0.1 or lower.

Visitors feel both on every page. Google also uses the mobile version of your pages for indexing and ranking, so run both tests on a phone first.

1. Accessibility testPut the mouse aside and press Tab through your homepage. You should see where you are at every step and reach every button and link.
2. Speed testEnter your homepage in PageSpeed Insights and read the mobile results for LCP, INP and CLS, the three Core Web Vitals.

Four tools turn a browsing visitor into a customer, also outside office hours. Each one shortens the path from interest to appointment, and each one works on every page of your site.

1. Online bookingA calendar where the customer picks a time and gets a confirmation at once. It replaces the phone call and the back and forth by email.
2. ChatAn AI chatbot that answers common questions day and night from your own information, and passes the conversation to you when a person is needed.
3. Lead magnetA free check, quiz or calculator that fits your trade, such as a roof cost estimate. The visitor gets an answer and you get a contact to follow up.
4. Follow-upAutomatic messages by email or WhatsApp after a request, a reminder before the appointment and a review request after the job.

Booking fits appointment businesses such as salons, clinics and trainers. A lead magnet fits trades where customers compare for weeks before they decide. Add one tool at a time and track how many requests it brings in.

Each page type has its own job, so it needs its own mix. The homepage introduces and routes. A service page convinces for one service. A contact page clears the last hurdles. The table shows the core set for each.

Every page also shares the same footer, the accessibility basics and fast loading. Those apply site-wide, so fix them once in your template and every page benefits.

At Delta Six we build every element in this guide into your website as standard. We are a web design agency from Maasdam in the Netherlands, founded in 2025 by Lennox de Wolff and Valentino Paula, and we work online with business owners.

Your site gets premium 3D design in your own brand, built with hand-written code on our own platform. Online booking, an AI chatbot, a lead magnet that fits your trade, follow-up by email and WhatsApp and review follow-up come included.

After launch we keep working on it: monthly SEO and optimization for AI search, such as ChatGPT, Gemini and AI Overviews. Google reviewers rate us 4.9 out of 5.

We build your complete custom website free first and show it to you in a 15-minute online showcase. You pay nothing upfront and only pay when you're happy. Choose us and your website is live within two weeks.

Two months after launch you choose again. Stop after two improvement rounds and you get your money back.

• Place your logo top left and link it to the homepage.
• Cut the main menu to five to seven items in your customers' words.
• Rewrite the hero headline so it states what you do, for whom and where.
• Keep one main button per page in your accent color, with a verb-first text.
• Put your star rating within one screen of the hero button.
• Set body text to 16 pixels or larger on a phone and use at most two fonts.
• Check text contrast with the WAVE extension and fix everything below 4.5 to 1.
• Compress hero images, use WebP or AVIF and add alt text to every meaningful image.
• Reduce your contact form to three to five fields and state when you reply.
• Make your phone number a tap-to-call link and match your contact details with your Google Business Profile.
• Link your privacy policy in the footer and beside every form.
• Press Tab through your homepage and confirm a visible focus mark on every link.
• Test your homepage in PageSpeed Insights and read LCP, INP and CLS on mobile.
• Add one conversion tool: online booking, a chat or a lead magnet that fits your trade.