How to Design a Website: A Beginner’s Visual Guide

TL;DR: What You Will Learn

• Decide what the site must achieve and for whom, before choosing any layout.
• Map your pages (sitemap) so structure comes before decoration.
• Sketch low-fidelity wireframes to test flow without getting distracted by colours.
• Build a simple visual system (type, colour, spacing) so every page feels on brand.
• Prepare a clean handoff so the build stage is fast and painless.

By the end, you will have a plan you can hand to any builder or developer with confidence, instead of guessing your way to another off-brand site.

Start With Goals, Not Pages

When people ask me how to design a website, they usually start describing colours, fonts, and hero images. That is the wrong end to begin from.

Good design begins with intent. Before you touch a single layout, you need to know what you want the site to do for the business.

Defining Your Single Primary Conversion Goal

Pick one primary goal. Not five. One.

A website that tries to do everything (collect leads, sell products, build a mailing list, and showcase a blog) ends up doing none of them well, because every screen competes for the visitor’s attention.

Take a small physiotherapy clinic in Bugis. Their single primary goal is simple: get more WhatsApp appointment enquiries from people with back or knee pain.

That one decision shapes everything. The WhatsApp button becomes the most prominent element on every page. Testimonials focus on pain relief. The booking friction gets stripped down to a single tap.

Now attach a measurable success metric to that goal, for example, the number of WhatsApp enquiries per week. Without a number, you cannot tell whether your design actually works or just looks nice.

Knowing Your Audience and Their Device

Your goal only makes sense once you know who you are designing for and how they will reach you.

In Singapore, most people will find that physiotherapy clinic on their phone, often while sitting in an MRT carriage or lying on the sofa nursing a sore back. This isn’t a guess: IMDA’s Singapore Digital Society Report found that 99 percent of resident households have internet access and smartphone ownership has hit 97 percent. Mobile is not an afterthought here; it is the starting point

Designing mobile-first means the WhatsApp button must sit within thumb’s reach, text must be readable without pinch-zooming, and the page must load quickly on mobile data. If it works beautifully on a laptop but is fiddly on a phone, you have designed for the wrong audience.

This is also where the difference between look and function matters. It helps to understand how UX and UI differ and why both matter, because a pretty interface that frustrates a mobile user still fails to meet the goal.

Mapping Goals to Page Priorities

Once the goal and audience are clear, you can rank your pages by how much they serve that goal.

For the clinic, the homepage and the services page carry the most weight, because that is where an anxious visitor decides whether to enquire. A history or awards page matters far less and gets a quieter spot in the menu.

Write your goal, metric, and audience down before you wireframe anything. That one paragraph becomes the rulebook that settles every design argument later: if a shiny feature does not push toward more WhatsApp enquiries, it does not belong on the page.

Map Your Site With a Simple Sitemap

Before you touch colours, fonts, or a single image, you need a plan for what your website actually contains. That plan is a sitemap.

A sitemap is just a simple diagram of every page your site will have and how those pages connect.

I always tell beginners that the fastest way to derail a design project is to start decorating pages before you know which pages you even need. Learning how to design a website properly begins with structure, not visuals.

Listing the Essential Pages for a Small Business Site

Let me use a real example I see often in Singapore: a home-based bakery selling custom cakes through Instagram that finally wants a proper website.

Sitting down with someone like this, we usually land on a handful of core pages that answer what a customer needs to know.

• Home: The welcome page that shows what the bakery does and points people onward.
• Menu: The cakes, bakes, and flavours on offer, with photos.
• Order: A form or ordering steps so a visitor can actually buy.
• About: The baker’s story, which builds trust for a home-based brand.
• Contact: Location details, WhatsApp, and enquiry form.

That is it. A small business rarely needs twenty pages, and every extra page you add is another page you must design, write, and maintain.

Grouping and Nesting Pages Into Logical Navigation

Once you have your list, the next job is deciding which pages sit at the top level and which belong nested underneath a parent page.

For our bakery, Home, Menu, Order, About, and Contact all sit at the top. But if the Menu grows, you might nest subpages like “Birthday Cakes” and “Wedding Cakes” beneath it.

The rule I follow: keep your structure shallow. A visitor should reach any important page in about two clicks, so avoid burying key content three or four levels deep.

Planning the Main Menu So Visitors Find Things Fast

Your main navigation menu is the visible version of your sitemap, so treat it as a promise to your visitor.

For the bakery, the top menu simply reads: Home, Menu, Order, About, Contact. Someone hungry for a birthday cake can go from landing on the site to placing an order in two clicks.

A clear sitemap also prevents two common problems I keep spotting on beginner sites: orphan pages that no menu links to, and cluttered menus with ten competing items.

Sketch this map on paper or a free tool before you design anything. When your structure is sound, every design decision that follows becomes far easier.

Sketch Before You Build With Wireframes

Before you touch a single colour or upload a photo, you sketch the skeleton. A wireframe is a low-fidelity blueprint that shows where your content sits, without the distraction of visuals, so you can rearrange things quickly while they are still cheap to change.

Think of it this way. Moving a button on a rough sketch takes seconds, but moving it after you have styled the whole page can undo hours of work.

Imagine you run a tuition centre in Bishan and want a landing page that fills your P6 English classes. Your single most important goal is to get parents to click “Book a Trial Lesson”.

So on your wireframe, you place that enrolment CTA above the fold, meaning it sits in the visible area before anyone scrolls. If you only realised this after designing everything, you would be shuffling polished elements around and fighting your own layout.

Paper and Pen Versus Digital Tools

Start on paper. A pen and a notebook let you throw out ten rough versions of your tuition centre homepage in the time it takes to open a design app.

There is no undo anxiety and no fiddling with alignment. You are simply asking, “Does the enrolment button belong near the top, or after the testimonials?”

Once you have a direction you like, move it into a digital tool like Figma. Figma lets you build tidy, shareable wireframes that you can send to a colleague or a freelance designer for feedback.

If you have never opened it, here is a beginner-friendly Figma tutorial to start wireframing, and it is worth getting comfortable with Figma design basics that every beginner should master before you go further.

Low-Fidelity Versus High-Fidelity

Low-fidelity wireframes are deliberately rough. Grey boxes, placeholder text, and simple lines are enough to test whether the structure makes sense.

Use low-fidelity early, when you are still deciding what goes where. This is where you settle big questions like whether social proof should come before or after your class schedule.

High-fidelity wireframes come later. They add real copy, accurate spacing, and sometimes basic styling, so they look much closer to the final page.

Only move to high fidelity once you are confident in the structure. Committing to visuals too early is the most common way beginners waste time.

Placing Your Key Elements

Every landing page has a handful of building blocks, and your wireframe is where you decide their order. For that tuition centre page, I would arrange:

• Header: Your logo and a simple menu so parents know who you are
• Hero: A clear headline like “P6 English tuition in Bishan” with the trial CTA
• Social proof: Short parent testimonials or your students’ improvement stories
• Secondary CTA: Another booking button for readers who scrolled past the first
• Footer: Location, contact number, and opening hours

Iterate on this order two or three times before committing. When the structure feels right in greyscale, you have earned the right to design.

Build Layouts on Grids and Visual Hierarchy

A wireframe tells you what goes on the page. A grid tells you where it goes so the whole thing feels orderly instead of thrown together.

When I sit down to turn a rough sketch into a real layout, the first thing I reach for is a grid. It is the invisible scaffolding that keeps everything aligned, and once you learn to see it, you cannot unsee messy sites again.

Understanding Columns, Gutters and Margins

Most modern web layouts use a 12-column grid. Twelve divides cleanly into halves, thirds, quarters, and sixths, so you can build almost any arrangement without fighting the maths.

Consider the homepage for a local skincare brand, something like a small Singapore natural beauty label selling serums and cleansers.

Their bestseller row needs four product cards side by side. On a 12-column grid, each card takes three columns, and they line up perfectly with no guesswork.

Three things define that grid:

• Columns: The vertical zones your content sits in, usually 12 for desktop.
• Gutters: The consistent gaps between columns that stop elements from touching.
• Margins: The breathing space between your content and the edge of the screen.

Keep gutters and margins consistent across the page, and the four product cards, the hero banner, and the footer all feel like they belong to the same design.

This isn’t a web-era invention, either. Josef Müller-Brockmann, the Swiss graphic designer whose 1961 book Grid Systems in Graphic Design is still treated as the field’s foundational text, was careful to frame the grid as a tool rather than a formula: “the grid system is an aid, not a guarantee.” A 12-column grid will not rescue a page with no clear priorities, but it will stop a well-planned one from looking accidental.

Using Whitespace to Reduce Clutter

New designers often try to fill every pixel because space feels wasted. It is not.

Whitespace is the padding around the skincare brand’s product photos and the space between the headline and the Shop Now button. It gives the eye somewhere to rest.

On that homepage, adding generous space around a single hero image of a serum bottle makes the product look premium. Cram five promotions into the same band and it starts to look like a cluttered flyer.

More space around an element makes it feel more important, not less.

Guiding the Eye With Size, Contrast and Position

Every page needs one clear winner: the element you want the visitor to notice first. For the skincare homepage, that is usually the hero product and its call to action.

You earn that attention with three levers. Make the hero headline larger than the body text so size signals importance. Give the Add to Cart button a bold contrasting colour against a calm background so it pops. Then place your key message near the top left where most people start reading.

Usability consultant Steve Krug, whose book Don’t Make Me Think remains one of the most widely cited references on web usability, makes essentially the same point with a simpler comparison: a well-organised page is like “good lighting in a store.” Neither one shouts at the visitor; both simply make it obvious where to look next, which is the entire point of visual hierarchy.

Here is why this matters for a Singapore audience. Shoppers here compare sites fast, often flicking between three or four brands on their phone during a commute.

Consistent alignment and a clear hierarchy signal that a brand is legitimate and worth trusting with their card details. A crooked, cluttered layout does the opposite, and they bounce before they ever see your products.

Choose Colour and Typography With Purpose

When you first learn how to design a website, colour and font choices feel like the fun part, so it is tempting to grab five colours you like and three fonts that look nice. That is exactly how sites end up looking amateur.

The professionals I work with do the opposite. They build a small, deliberate visual system and then reuse it everywhere, which is what makes a website feel calm and trustworthy.

Build a Simple Colour Palette

Start with three roles, not three favourite colours: a primary, a secondary, and one accent.

Picture a Singapore fintech startup handling people’s savings. They choose a deep navy as their primary because navy reads as stable and secure, a soft grey as the secondary for backgrounds and dividers, and a single bright accent (say, a warm orange) reserved only for buttons like “Open an account”.

That one rule, accent equals action, is powerful. Because the orange appears nowhere else, every call to action jumps off the page without you having to shout.

Less really is more here. A tight palette makes it obvious where users should click, whereas five competing colours leave them unsure what matters.

If picking these swatches feels daunting, you can borrow from ready-made Figma templates to speed up your visual system, which come with palettes and type scales already balanced for you.

Pair Readable Fonts and Set a Type Scale

For fonts, resist the urge to be clever. Two typefaces are plenty: one for headings and one for body text, or even a single font used at different weights.

The bigger win is a type scale. Decide your body size first (something comfortable, not tiny), then step up in clear jumps for your H3, H2, and H1 headings.

For that same fintech startup, I might set body copy at a readable size, an H2 noticeably larger, and an H1 larger again. This visible hierarchy tells the eye “this is a section, this is a heading” before anyone reads a single word.

Keep line spacing generous too. Cramped text on a phone screen is one of the fastest ways to make people leave.

Meet Accessibility With Contrast

Here is the part beginners skip: your colours and fonts must be readable by older users and people with low vision, not just by you.

The simplest rule is contrast. Light grey text on a white background might look elegant on your bright laptop, but an older customer reading on their phone in bright sunlight will struggle.

Run your key text and button combinations through a free contrast checker, such as WebAIM’s Contrast Checker, before you commit. If your navy text on a grey background barely passes, darken the text or lighten the background until it clearly does.

This is not only about compliance. In Singapore, your audience spans many ages, and readable design widens who can actually use your site.

Do this well, and your visual system does double duty: it reflects your brand personality, makes your CTAs obvious, and keeps everyone able to read.

Use Imagery and Icons That Reinforce Your Message

When I review a beginner’s first website, the images are usually the giveaway. Generic smiling office workers, a stock photo of a laptop on a white desk, a handshake that could belong to any company on the planet.

Here is the shift I want you to make: imagery should carry meaning, not just fill space. Every photo, illustration, and icon on your page should help the visitor understand who you are or what to do next.

Choose Authentic, On-Brand Imagery

Think of a boutique cafe in Tiong Bahru. If it uses generic stock photos of coffee, it looks like every other cafe online.

Now picture real photography of its own shopfront along Yong Siak Street, the barista pulling a shot, the actual pastries in the display case. Suddenly you can feel the place, and that is what makes someone want to visit.

Authentic local imagery does the persuading for you. So before you download another stock image, ask whether a real photo of your team, your space, or your product would tell the story better. In most cases it will.

Keep your treatment consistent too. Pick one style, whether that is warm natural light, a fixed colour filter, or a set illustration look, and apply it across every page so the site feels like one brand rather than a scrapbook.

Optimise Images for Fast Mobile Loading

Most Singaporeans will visit your site on a phone, often on mobile data, so heavy images will cost you visitors. A large uncompressed photo can take seconds to load, and people leave long before it appears.

Before uploading, resize images to the dimensions you actually need and compress them. Use modern formats like WebP where you can, and lazy-load images further down the page so the top of your site appears quickly.

Respect Copyright, Licensing, and PDPA

You cannot simply pull an image off Google and use it. Stick to photos you own, properly licensed stock from a reputable library, or free sources that clearly state commercial use is allowed, and keep a record of the licence.

There is a local layer to watch here as well. If your photos show identifiable customers, for example, a candid shot of diners in your cafe, the Personal Data Protection Act (PDPA) means you should get their consent before publishing

The simple fix is a short written consent, even a signed line or an email reply, kept on file. It protects you and shows customers you handle their image responsibly.

Finally, apply the same discipline to icons. Choose one icon set with a consistent weight and style, and use it everywhere, so your navigation and features look deliberate rather than assembled from bits and pieces.

Design for Every Screen and Every User

When I first learned how to design a website, I made the classic mistake of designing everything on my big desktop monitor, then squashing it onto a phone at the end. It looked cramped, and half of it broke.

These days I flip that order completely. Responsive and accessible design are not finishing touches you sprinkle on at the end. They are the foundation you build on.

Start Mobile-First, Then Scale Up

Say you’re designing a food delivery site for a hawker collective in Singapore. Almost every order will come from someone tapping on their phone during a lunch break, not sitting at a desktop.

That is why I design the mobile layout first. When I get the smallest, most constrained screen working well, scaling up to tablet and desktop feels like adding breathing room rather than cutting things away.

Mobile-first forces you to prioritise. You decide what truly matters (the menu, the order button, the delivery time) before you have space to add anything else.

This is more than a personal habit; it is the reasoning behind “mobile first” as a discipline, popularised by product designer Luke Wroblewski. He argues that a small screen’s limits are a feature, not a bug, because they strip out the option to keep adding things. As he put it in an interview with Creative Bloq, once you are designing for mobile, “you don’t think: ‘oh, let’s add another thing’ – because you simply can’t.” That forced restraint is exactly what keeps a hawker collective’s ordering page down to the menu, the order button, and the delivery time, nothing more.

Make It Easy to Tap and Easy to Read

On a phone, people navigate with their thumbs, not a precise mouse pointer. If your “Add to cart” button sits too close to the “Remove” link, someone will tap the wrong one and get frustrated.

Give your buttons and links enough size and spacing that a thumb can hit them comfortably. As a rough guide, if you cannot tap a target confidently while walking, it is too small.

Keep body text legible too. Tiny grey text on a white background might look elegant in a mockup, but it is unreadable for someone squinting at their phone in bright afternoon sun outside a coffee shop.

Build In Accessibility From the Start

Accessibility means your site works for people using screen readers, keyboards, or high-contrast settings. This matters more than ever given Singapore’s push for inclusive digital services, including IMDA’s Digital for Life movement.

Accessibility is not a niche feature. It is basic good design that also happens to help everyone.

Focus on a few essentials first:

• Add clear alt text to images so screen readers can describe them
• Check that text and background colours have strong enough contrast
• Make sure every button, link and form field can be reached and used with a keyboard alone

Test on Real Devices Before You Hand Off

Browser previews lie. A layout that looks perfect in your design tool can behave very differently on an actual budget Android phone or an older iPad.

Before I hand any design to a developer, I open it on a few real devices and try to complete a task, like placing an order. Catching a broken button on your own phone is far cheaper than catching it after launch.

Prepare a Clean Handoff to the Build

You have designed every screen, but a design nobody can build is just a pretty picture. The final step in learning how to design a website is packaging your work so the build goes smoothly, whether you assemble it yourself in WordPress or hand it to someone else.

Meet the founder of a small Singapore startup, maybe a home-based skincare brand, who has designed her site in Figma. She finds a freelance developer on a local gig marketplace like Fiverr or a Telegram community, and now she needs to hand over files a stranger can actually use.

Organising and Annotating Your Design Files

Messy files are where projects go sideways. Name your pages clearly (Home, About, Product, Checkout) and delete the abandoned drafts and duplicate frames you were experimenting with.

Add short notes directly on the canvas for anything that is not obvious from looking. Point out which buttons link where, what happens on hover, and how a section should behave on mobile.

If you are new to organising work this way, it helps to understand what Figma is used for in real design teams and projects, because the same tidy habits that serve big teams also protect a solo founder handing files to a stranger.

Exporting Assets, Spacing and Specs a Builder Needs

A developer cannot guess your intentions, so give them the raw materials. Export your logo, icons, and photos in the right formats, using SVG for logos and icons where possible and compressed JPG or PNG for images.

Just as important are the specifications that keep your site consistent. A good builder needs the numbers behind the visuals, not just the picture.

• Your colour codes as hex values, for example, a navy like #1C2B5E
• Font families, weights, and sizes for headings and body text
• Spacing values between sections and elements
• Corner radius and button styles
• Breakpoints for desktop, tablet, and mobile

Our skincare founder can drop all of this into a single Figma file or a shared folder, so her developer never has to message her asking what shade of blue she meant.

Writing a Short Handoff Checklist

Before you send anything, write a one-page checklist so nothing gets lost in translation. List every page, every asset, your style specs, and any interactive behaviour you expect.

Add a line about content too, confirming that final copy and images are in place rather than placeholder text, which is a common cause of last-minute rework.

To be clear, the actual WordPress build, installing themes, configuring plugins, and going live, sits outside this guide. This guide owns the planning and design, and a clean handoff is where that planning pays off.

Common Beginner Design Mistakes to Avoid

When I review first drafts from people learning how to design a website, the same handful of mistakes show up again and again. The good news is that almost all of them are cheap to fix if you catch them during the wireframe and visual stages, long before a developer touches a line of code.

Cramming Everything Onto the Homepage

The most common trap I see with Singapore SMEs is trying to say everything at once. I once looked at a homepage for a local aircon servicing company that listed every service, three promotions, a chatbot, and a newsletter pop-up all above the fold.

The result was that visitors did not know where to click first, so many clicked nowhere and left.

The fix: pick one primary goal per page and make everything else secondary. Move the full service list to its own page and keep the homepage focused on one clear message and one main action.

Skipping Planning and Diving Straight Into Visuals

Plenty of beginners open a design tool and start choosing colours before they know what the page is meant to do. That is like painting a shophouse before you have decided where the doors go.

The fix: sketch a rough wireframe first, even on paper. Decide the page’s purpose and the order of information, then design on top of that structure.

Too Many Fonts, Colours, and Competing Styles

New designers often mistake variety for personality. Five fonts and a rainbow of button colours make a site look untidy and unprofessional.

The fix: limit yourself to two fonts and a small palette of two or three colours plus neutrals. Consistency reads as trustworthy, and trust is what turns a visitor into an enquiry.

Here are the other pitfalls I flag most often, each with a quick fix you can apply during your visual review:

• Weak or hidden CTAs: If your “Contact Us” button blends into the background or sits at the very bottom, nobody clicks it. Fix it by giving your main action a bold, contrasting colour and repeating it at natural decision points.
• Ignoring mobile: Most Singapore visitors browse on their phones, so a layout that only looks good on desktop fails the majority. Fix it by checking every screen at mobile width and stacking content into a single readable column.
• Low-quality or stock-heavy images: Blurry photos or generic stock shots make even a good business look careless. Fix it by using clear, real images of your team, premises, or work.

Once your structure, message, and visuals hold up, it is worth thinking about how thoughtful design ties into a content strategy that boosts SEO, so your clean design actually gets found.

Conclusion

Remember the overwhelmed first-time site owner from the start of this guide, staring at a blank screen with no idea where to begin?

That was the feeling I wanted to replace with a clear, repeatable process, and I hope you now have one.

We walked through the whole journey together: defining your goals, mapping a sitemap, sketching wireframes, building a consistent visual system, and preparing a clean handoff. Every one of those steps happens before you touch a single line of code or drag a block into a page builder.

The reason is simple. Planning the look before you build the site prevents the costly rework that catches so many beginners, like realising halfway through that your homepage has no clear call to action, or that your colours and fonts clash across every page.

I have seen small business owners in Singapore, from home-based bakers to B2B service firms, save weeks of frustration simply by sketching their pages on paper first.

So take that plan you have started and treat it as your blueprint. The design decisions you make on paper will guide every choice you make in your website builder.

Plan thoughtfully, build confidently, and your website will reward the effort. Ready to take these fundamentals further? Equinet Academy’s UX/UI Design Essentials course picks up exactly where this guide leaves off goals, sitemaps, wireframes, grids, and visual systems and turns them into a structured, hands-on skill set. It’s SkillsFuture-supported, built for beginners and business owners (no design or coding background required), and designed to make every website you build after this one faster and more confident.