Ever looked at an old website screenshot in a tool like Wayback Machine and been surprised at how different it looked? Old photos of sites like Yahoo, Amazon, or Apple make it clear just how much web design has changed over the past 20 years — or even the past five years. 

User needs, online conventions, and what’s possible with web design continue to change and therefore shape what’s expected when you design a website. 

But you don’t need to be building the next Amazon or Apple to need a website. And good website design can help set your brand apart and create an engaging experience for your website visitors. 

In this article, we’ll show you how to design a website to deliver a seamless user experience and make a visually appealing site for your brand. 

Jump to what you need: 

• What is web design?
• How to design a website, step-by-step 
• Website design mistakes to avoid 
• Four examples of great website design

What is web design?

Web design is a subcategory of building a website, involving the design and structure of the visual side of your website. The goal with web design is to create a visual layer of communication for your audience that reinforces your brand and messaging.

Web design may encompass the building of that design, such as with a no-code builder, or it may involve the design only (i.e., in Figma). Either way, the goal of web design is to create cohesive, engaging, and beautiful visual elements and structure for your website. 

How to design a website

Designing a website can be overwhelming — but a step-by-step process makes it much easier. Here’s ours, with advice from our product designers and in-house experts:  

Step 1: Define your website’s purpose 

First things first: What’s the point of your website? 

One of our product designers, Paul Davis, says that when someone wants to design a website, the first question he asks is, “Are you sure this can’t just be an Instagram page?”

It sounds basic, but it gets at an essential question:

Why does your website need to exist? 

By defining the answer to that question clearly from the beginning, you’ll give yourself a strong foundation for future work and make a lot of decisions easier in the process. 

After all, different types of websites have different functions — and therefore, different design needs. Ask yourself: 

• What is the point of this website?
• What information are we trying to convey? 
• What are users going to want to do or find on this website? 
• How will this website be helpful to the user? 

For example, a website for an upcoming conference will need to give details about location, dates, the agenda, and so on. Most site visitors will be trying to find out more information about the conference and may want to buy tickets. 

On the other hand, a website for a local restaurant has different goals. Its visitors are likely looking for hours and a menu. Perhaps they want to make a reservation or order online. 

These different purposes and needs will shape your design, so get them out clearly on paper before you start designing and building. 

Step 2: Gather what you need to design a website 

With your purpose in mind, you now need to gather your tools. The most basic things you’ll need to design a website include: 

• A domain name: This is the URL of your website and gives visitors a place to find you online, such as www.bubble.io or www.facebook.com. Domain names can be purchased on their own, or you might get them with a website hosting or building service. 
• Website hosting platform: This is the service that will‌ store your website online and make it accessible to visitors. You can manage web hosting yourself by purchasing hosting directly from a provider, or you might get hosting “built-in” with a website builder. 
• Website builder: One option is to hard-code your website from scratch, but that’s rarely the most efficient option. A no-code website builder is usually the fastest and simplest way to design and launch your site. 

Bubble is a great example of a simple, all-in-one system. Our no-code platform lets you design your website in a visual editor without having to code. You can work from a template, start from scratch, or use Bubble’s AI page generator to help get the basics on the page. 

With Bubble, you can build and design anything you can imagine for your website — and get web hosting built-in once you’re ready to launch. Adding a custom domain name is easy too, so you can be up and running in no time. 

Step 3: Sketch out your website layout and content with a wireframe 

With your foundation in place, it’s time to start sketching out what your website will look like and what content will be on your web pages.  

This includes thinking through the information architecture of your website. Which web pages do you need? This depends on the purpose of your site and your users’ needs (see step #1). For example, the essential elements of a SaaS website will be different from a local restaurant or a business website. 

Consider the content, site map, and organization of your site to create a logical structure. In short, you want to design the pages and information on your site in a way that’s easy for users to navigate. 

Once you have your key web pages in place, start sketching out what they’ll look like. 

Wireframes are a great tool to use at this stage. The goal is to start simple, explore ideas, and iterate. Committing too quickly to detailed designs can needlessly limit you. 

“Start with simple boxes and arrows. Focusing on UX first avoids the UI constraints that can rush decisions. Design systems can lead to high-fidelity wireframes too early, giving a false sense of finality and limiting exploration. [Instead], explore and iterate. Try flipping your design on its head to uncover new ideas and validate assumptions.” — Missy Kelley, Head of Product Design

The goal here is not to have fully fleshed out designs for your web pages. Instead, you want to be thinking about big-picture design, user experience (UX), and validating your assumptions. 

User research and testing at this stage can also be helpful to clarify and validate user needs before you’ve gotten too far in with high-fidelity designs. 

Step 4: Create a design system

Now you’re ready to start creating more high-fidelity designs, based on your wireframes and the building blocks you have in place. 

For example: 

• You know what kind of menu bars you’ll have and where they’ll be on the page — now you need to decide what color they’ll be, how exactly they’ll look, what size they are, what font you’ll use, and so on. 
• You know where the images will go on the page, but now you need to select those images. 
• You know where the header will be, but you need to finalize the copy and choose the appropriate typeface, color, and font. 

However, making all of these decisions one-by-one will take a long time. Creating a design system gives you a documented catalog of key website elements, styles, and patterns for your design that you can use to save time and keep your design choices consistent across your website. 

Christine Shiba, Product Design Lead at Bubble, said: 

“Starting with a system or having some sort of system-level idea of your brand and tone helps a lot. So if you’ve set up your style variables, font tokens, buttons styles, all of that on Bubble, that will help you with everything else moving forward.”

Your design system should include things like: 

• Standard components and variations (i.e., what buttons and popups look like, and what they look like when they’re clicked) 
• Page structures and layouts
• Illustration and images styles 
• Styles, fonts, and a color scheme for your web pages 
• Design principles 

While big-picture design elements like components and page layouts are obviously important, don’t neglect “smaller” pieces too. For example, as Missy told us, something like “typography [is] a key design element — it’s essential for defining content hierarchy.”

So define your design system before you start building everything — this will make many, many decisions simple and keep your website consistent. 

Step 5: Start building — but don’t start from scratch. 

Now it’s finally time to start making high-fidelity designs. This is the step many people jump to when they think about designing a website, but all the background work you did in prior steps will pay off. You’ll want to take everything you’ve sketched out — your webpages, the copy, the design elements, and so on — and build them out in your website builder. 

Many design teams create high-fidelity design layouts in a tool like Figma first that can be then handed off to their development team to code for their website. 

No-code website builders like Bubble make this stage much easier by eliminating the need for multiple tools. Instead, you can design right on Bubble with a visual, drag-and-drop editor (similar to a tool like Figma’s), and then add functionality and features without coding, all in the same editor. 

Whatever tools you use, don’t think you have to start from scratch at this stage either. 

“Look at a few examples of websites you really like and riff off of them,” Christine said. Missy seconded her sentiment: “Copy what you love. Drawing from appealing designs can help you define your own style.” 

When in doubt: Keep it simple. 

“Simplicity and speed are key! Fancy animations and graphics can never be a substitute for a simple, fast website that gives users exactly what they need.” — Rhys Thomas, Senior Product Designer 

On Bubble, simplicity is baked into our editor and programming language. For example: 

• You can use styles to reduce editing time. This also comes in handy when updating fonts and primary colors on your site.
• Reusable elements prevent you from having to design the same components across multiple pages. 
• Start with a pre-built template, to reduce the amount of building you have to do before customizing. 
• Build from our component libraries to use and customize common components (like visual elements, UI components, and form inputs) without having to custom-build everything.
• Make webpages faster from Bubble’s AI website generator, which will generate dozens of different kinds of webpages for you in a few seconds based on a text prompt. You can customize from there using the tools above!

Overall, you want to follow the best practices of the platform you’re using. If you’re not sure about how to build something, ask the community! 

Step 6: Follow best design principles as you build. 

As you build, keep best design principles in mind. 

Some design principles are true across time, such as the accessible design principles, or basic design principles such as proportion and balance. 

Other best practices are more trendy — what worked 10 years ago may not work at all today, or may make your brand seem outdated. For example, our designers pointed out a number of design trends that have been popular but now seem outdated, such as: 

• Manual sign-ups (i.e., filling in a form with inputs for email, password, and so on) vs. using one-click with Google or something similar. 
• Large background videos in the hero header. These just slow down the website page and make it more difficult for users to complete tasks, without providing any real value or branding. 
• Abstract people illustrations or cartoon-ish people designs. 
• Flat design with block elements, lots of standardization, and primary color, geometric shapes. These used to be “in,” but now they just look “cutesy.” 

Instead, look to today’s design trends to give your brand a website that stands ahead of the curve: 

• Micro-AI moments: Carefully placed AI-powered UI elements that speed up things like inputs and repetitive tasks. 
• Parallax scrolling and other motion design: Background content moves at a different speed to foreground content when scrolling, which adds depth and motion without harming UX. 
• Gradients: Color gradients are becoming more popular again, especially with “dark mode” and purple themes for AI and tech companies. This signals “futuristic” but gradients are making a comeback across a variety of designs. 
• Bold colors, texture, and 3D depth: Brands are embracing broader color palettes, subtle textures, and 3D forms to help tell more complex, rich, and dynamic brand stories full of energy. The simple, punchy 2D style is on the way out. 
• Big typography and playfulness: Standardization and flat designs have been common in the past 5–10 years, but brands are now moving toward more niche designs and bold design statements that help you stand out, vs. adhering to a more standard “playbook.” 

So in short: Follow the tried-and-true best design principles, but then don’t be afraid to stand out and make bold, playful, new design moves that will help your brand distinguish itself. 

Step 7: Test with your users and iterate

Most importantly: Test your design with your users. User testing can happen at almost any stage of the design process, but it’s especially important to test with users shortly before or after you launch. You might want to run testing like: 

• User acceptance testing to make sure your website works on different browsers and screen sizes and meets the needs and expectations of your users 
• Usability testing to make sure that your users can navigate and use your website easily 
• Beta testing to find and resolve any bugs or errors with your site 
• A/B testing to see which versions or iterates of your design resonate most with your audience 

Once you’ve done your user testing, you can then iterate on your website design and improve your UX based on user feedback and make it easier for visitors to use your website and feel connected to your brand. 

Building on Bubble makes testing and iteration easy. You can integrate several testing and user feedback tools, like Hotjar and Mixpanel, directly into your Bubble website. This makes it easy to run tests and collect feedback all in one place. Then, you can iterate directly with Bubble’s drag-and-drop editor, easily incorporating feedback into the latest version of your website. 

Web design mistakes to avoid

These common web design mistakes are easy to miss — use our designers’ tips to avoid making them yourself. 

Forgetting about empty and error states

Missy Kelley told us, 

“Don’t forget to plan for empty and error states. For new users, empty states guide their next steps. Since errors are inevitable, design error states that help users understand and correct their mistakes.” 

Empty values and error states include things like:  

• 404 “page not found” pages 
• Out-of-stock messages
• Invalid form inputs 
• An empty cart 
• An empty search result 
• A search or form input field 

Filling an empty field with prompt text (e.g., “Looking for something?” for a search bar, “Email” for an email input field) makes it clear to the user what to input where, and reduces errors and friction as they’re learning your website. 

Well-designed errors mean clear error messages that tell users why the error is happening and how to fix it, as well as adding some branding, improves user experience while also reinforcing your branding. 

Losing sight of your user and their problems

As with many things, keeping the customer first is crucial. Christine told us that one of the most common website design mistakes is losing sight of “the user and their goals and problems.” 

A pretty site isn’t successful if it doesn’t work smoothly, is incoherent to the user, or makes it difficult for them to accomplish what they need to do. This goes back to step one: understanding what your website is for, and how users will want to use it. 

Effective user testing can also help you keep the user’s needs at the forefront. User acceptance testing, UX testing, and usability testing can all help you make sure your website meets users’ needs and expectations. 

If it doesn’t — or if their needs change over time — iterate on your website’s design to make things easier for the user.

Not prioritizing accessibility from the start

Similarly, we all love cool design, but it also needs to be functional and accessible — for every user. Following web accessibility best practices isn’t just good for users who may be using screen readers or accessibility devices — it’s almost always a more positive user experience for everyone. This means things like: 

• Choosing text and background colors with sufficient contrast 
• Labeling forms and buttons 
• Including alt text on any images 
• Making your design easy to navigate using a keyboard 
• Choosing easy-to-read font styles
• Responsive web design to ensure your site looks and works well on mobile devices or other devices. 

Prioritizing website accessibility from the beginning is much easier than trying to make your design accessible later, with everything in place. 

Designing solo without input from the wider company

An enticing mistake: designing in a silo. Although it can often feel easy to manage the design within the design team, design is a collaborative activity. 

Most websites are the “face” of an entire brand or organization, so “it needs to reflect the whole organization,” Paul said, “not just reflect through the designers’ lens.” 

This means a well-designed website should reflect the brand’s mission, vision, ethos, and so on — which often requires collaborative iteration to get right. Although designers are often the “keepers” of the visual brand identity, don’t assume that you don’t need input from other teams to express that fully. 

Four examples of great website design 

Getting inspired by other websites that are crushing their website design is a great way to create your own layouts, design systems, and illustrations that showcase your brand. Here are a few of our favorites to get you started. 

Lattice: Modern design that supports UX

Lattice is an HR SaaS platform and their website does a great job of incorporating modern design while still prioritizing UX. You’ll notice many modern design elements on their website, such as: 

• Gradient colors and backgrounds 
• Subtle motion design 
• 3D graphics and images 

At the same time, they also follow basic design principles around consistency, hierarchy, contrast, and so on, which help create a consistent and easy-to-follow user experience. 

Amaterasu: Interactive motion design 

Amaterasu is a physics cognition lab, and their website is a great example of a business website that uses interactive design, bold colors, and 3D design. 

Their site immediately stands out from other medical or healthcare sites — they’ve used design to significantly distinguish their brand from other similar organizations. This is clear from small details like the menu bar design and the cursor icon to major design choices like how they’ve designed the hero section or how the page graphics move with your scrolling or interaction. 

Minimum Studio: Clean, minimalist design 

Minimum Studio is an excellent example of a clean, simple, and minimalist website that nonetheless hits all the marks. In fact, their website won “Best Homepage Design” in Bubble’s 2024 Bubble Con Awards. 

One of their core principles as an agency is “We love to simplify things,” and their website demonstrates that very clearly — creating a strong design system that reinforces their brand. 

Besides that, their site is very easy to use and navigate. It also follows all the best design practices, while also incorporating some modern design elements, without being overwhelming at all. Better yet: Minimum Studio’s website is built on Bubble — a great example of being able to do a lot of custom design without code. 

Otherlife: Creative motion design

Otherlife is a creative agency focusing on digital experiences — and they showcase that well by creating their website as a kind of mini digital experience. 

3D graphics and parallax scrolling are core elements of their homepage design. Another fun element of their website: infinite loop scrolling. Scroll through their homepage and you’ll notice you never reach the bottom — you’re just given an infinite loop of the homepage sections — which highlights their claim that they design differently.

Overall, they’ve done a great job between a simple portfolio site that meets their needs and their visitors needs, and fun, experiential design that showcases their agency’s brand and work.

Want more examples of great website design? Check out this year’s Bubble Con Awards winners or our guide to SaaS website elements, including dozens of websites that hit the mark. 

Design your website with Bubble 

Design can be a creative, fun, and engaging part of your web development process. But if you’re not a designer, it can feel more overwhelming than engaging. 

No-code tools like Bubble make a lot of decisions easier from day one, giving you both the tools and support you need to design confidently, even if you’re not a web designer or have limited coding knowledge. For example, with Bubble, you don’t have to make decisions like: 

• What type of website builder is right for you (Bubble can build and support any type of website) 
• Where to host your website (on Bubble!) 
• How to design and develop your website (all on Bubble, with no-code) 
• How to build the best UX and UI for your site (start with Bubble’s pre-built templates or use AI generator then customize as needed) 

Plus, using Bubble’s visual editor speeds things up significantly, allowing you to design and build at once with a visual drag-and-drop editor, rather than having to design once, then code everything again. Use site templates and pre-built components so you don’t have to start from scratch — or get started with our AI-powered designer to get things kicked off and avoid the blank-page syndrome. 

Even better: You can design and build your website on Bubble for free until you launch, giving you all the time you need for experimenting, testing, and iterating before things go live. But trust us: With Bubble’s simple editor and design guides, you’ll need less time than you think.