Passed on 7 April, 2025
3. Website design
Once you have set up your website, it's time to think about the design. Designing a website is all about creating a space that feels right for your visitors. It’s your chance to make a strong first impression and keep people engaged. Let’s dive into the essentials that make a website both well-designed and easy to use.
✅ Learning objectivesBy the end of this lesson, you’ll be able to:Understand how to make your site easy and enjoyable to use.Create a visual style and layout that reflect your brand and make content easy to read.Boost your site’s speed and performance for a better user experience.
Learning objectives
By the end of this lesson, you’ll be able to:
Understand how to make your site easy and enjoyable to use.
Create a visual style and layout that reflect your brand and make content easy to read.
Boost your site’s speed and performance for a better user experience.
UX: Designing with a customer focus
Good website design means arranging your site in a way that makes sense for your visitors. Creating a great user experience (UX) is key to making your website a place visitors enjoy exploring.
The basics of user experience (UX)
When your site is user-friendly and designed with the user journey in mind, people are more likely to stay, explore, and connect with what you have to offer. Here’s what to keep in mind.
Intuitive navigation
Make it easy for visitors to get around. Use a logical menu structure, clear labels, and familiar icons so users know exactly where to go. Good navigation keeps users engaged and encourages them to explore more of your site.
Consistency
Consistency in colours, fonts, and interactions creates a familiar feel. When layouts and styles are similar across pages, visitors feel comfortable, confident, and know what to expect as they navigate.
Reduce friction
Keep the experience smooth by minimising steps to complete actions. Place calls to action (CTAs) in visible spots, and ensure that important info is just a few clicks away, so users can reach their goals without hassle.
Function before style
It’s easy to get caught up in visuals, but usability should come first. Focus on clear menus, readable text, and simple layouts to make navigation effortless. A well-functioning site engages visitors and makes exploring easy.
Common website navigation elements
Visitors often spend only a short time on a website. They may scan words quickly or not read them at all. Clear navigation can help visitors find exactly what they’re looking for before they move on. Think about how the following elements can help customers find what they need.
Search bar
A search bar helps users find specific content fast, especially if your site has lots of pages or products. Place it at the top for easy visibility.
Home button
Visitors often use the logo to return to the main page. Make sure it’s easy to spot on every page and links directly to your homepage for seamless navigation.
Breadcrumb navigation
Breadcrumbs show a clickable path of links (e.g., Home > Products > Accessories), helping users see where they are and backtrack easily. Place them at the top of pages with short, descriptive labels to keep things clear.
Sticky headers
A sticky header keeps main links accessible as users scroll. Keep the header clean and simple to avoid blocking content. Ensure it works smoothly on mobile for easy access on smaller screens.
Footer with links
A footer is the perfect spot for key links (Contact, Privacy Policy, FAQ). Place it at the bottom of every page and organise links into clear categories for easy navigation.
Clear calls to action (CTAs)
CTAs guide users toward key actions. Make them stand out visually with bright colours and clear text like ‘Sign up’ or ‘Learn more’. Place CTAs in visible spots for quick access. AI tools can help you come up with effective CTAs based on your goals.
Creating a cohesive look and layout
A well-designed website feels both inviting and easy to navigate. A cohesive style makes your brand memorable, while a clear layout keeps users focused and engaged.
Designing a visual style for your brand
A consistent style makes your website feel inviting and professional. It’s all about giving visitors a clear sense of your brand, and making your pages accessible. Here’s how to build a visual foundation.
Choose a colour palette
If you have brand colours, use them consistently to build identity. If not, pick core colours that fit your vibe for a memorable look. AI tools can suggest colour palettes, icons, and images to match your brand’s tone.
Use readable fonts
Choose fonts that fit your brand’s personality and are easy to read on any device. Use high-contrast colours between fonts and backgrounds for better readability, and limit font types to keep things organised.
Use similar imagery and icons
Choose images and icons that reflect your brand’s tone to make your brand feel authentic and cohesive. Also, use descriptive file names for your images, as search engines analyze these to enhance SEO and boost your site’s visibility in search results.
Structuring your layout
A clear layout keeps visitors focused and makes it easy to explore–on desktop or mobile devices. Let’s look at tips for organising content, using whitespace, and creating visual flow.
Organise content for readability and flow
Arrange text, images, and elements in a natural order that’s easy to follow. A clear flow helps users find what they need without getting lost. Spread things out evenly on the page and use a mix of text and visuals so your design doesn’t feel crowded or too plain.
Use whitespace to avoid clutter
Whitespace (the empty space around elements) keeps your pages from feeling cramped and helps key sections stand out. It gives your design a more relaxed, easy-to-read look.
Design with a visual hierarchy
Lead the eye through your page with headings, subheadings, and visual cues like size and spacing. This shows visitors what’s most important at a glance.
Plan your website’s look and layout
Spend some time completing the activity and thinking about how you want your website to look and feel.
✅ ActivityFollow the steps below and write down ideas for your site’s visual style and layout.Check the items off as you go.Start by looking at other websites. Notice their style, colours, and layout choices.Sketch a rough layout for your homepage, including text, images, and CTAs.Use an AI assistant like Gemini to generate some CTAs based on your goals.
Activity
Follow the steps below and write down ideas for your site’s visual style and layout.
Start by looking at other websites. Notice their style, colours, and layout choices.
Sketch a rough layout for your homepage, including text, images, and CTAs.
Use an AI assistant like Gemini to generate some CTAs based on your goals.
Download PDF
Download PDF
Streamline your website design
Making a website look good is just the beginning! Designing for speed, ease of use, and mobile-friendliness keeps visitors engaged and makes your site more effective.
Designing for mobile
With many people browsing on their phones, it’s important to make sure your website looks and works well on any screen size.
Adaptability
Set up your website so it adjusts to any screen size, from desktops to phones. This is called responsive design, where images and text resize automatically. Many website builders now include this feature by default, making it easier to ensure your site looks great on any device.
Speed and performance
Fast-loading websites keep visitors engaged and improve your site’s ranking on search engines. By focusing on speed and efficiency, you’ll create a better experience for your users.
Minimise images, files, and code
Use smaller, compressed images so they load faster without losing quality. Limit big files or unnecessary code, which can slow things down. Keeping it light helps your site load faster and run more smoothly.
Test your website’s speed
Use free tools to check how quickly your site loads. Testing every now and then can help you spot any slowdowns and fix them quickly.
Use reliable hosting
Choose a hosting service that’s known for speed. Caching (saving parts of your site temporarily) lets pages load faster for visitors who come back to your site.
Check your knowledge
Let’s find out how much you’ve learned about structuring your site, focusing on your customers, and maintaining consistent style and branding.
Question 1 of 1
Maria is designing a homepage for her new business website. Help her make the best choices by selecting the right option for each need.
Easy to navigate
correct
Images
incorrect
Vibrant colours
incorrect
Show Answer
Show Answer
Almost.Remember, an intuitive layout keeps things easy to navigate, whitespace reduces clutter for a clean look, and high-contrast colours make text readable on any device. These design choices create a user-friendly experience.
Lesson complete
Great job!You now have a solid understanding of how to design a user-friendly website.Head to the next lesson to learn more about website accessibility and how to make your site inclusive for all users.
You now have a solid understanding of how to design a user-friendly website.Head to the next lesson to learn more about website accessibility and how to make your site inclusive for all users.
Head to the next lesson to learn more about website accessibility and how to make your site inclusive for all users.
Head to the next lesson to learn more about website accessibility and how to make your site inclusive for all users.