Learning how to make a website requires a bit of knowledge gathering, patience, and that unwavering drive that's essential when learning a new skill. 

If you’re new to website design, it can feel overwhelming. To help out, we’ve put together a complete step-by-step guide along with useful resources to help you through this process.

9 steps to designing a website in 2022

Let's go over 9 stages that you'll go through when designing a website:

1. Define your website’s scope and goals

Whether you're designing a website for yourself or a client, it’s important to first clearly define the website's purpose and goals. All websites strive to deliver eye-catching design and a pleasant user experience, but they also need to reach (and grow) a target audience.

At times, clients will come to you with their purpose, goals, objectives, branding, and content complete and ready to be implemented into a CMS (content management system). However, some clients will rely on your expertise to build a new site or redesign their current one. 

To define the goals and scope of a website and associated webpages, you need to know the why, the what, and the how behind it. 

Why should this website exist?

Before designing a website, you need to know its primary purpose, so ask yourself — why should this website exist?

For example, if you’re building an ecommerce website, the purpose would be to list products through an online store. If you’re designing a portfolio website, the purpose would be to showcase your work. 

What should this website achieve?

Once you've defined your why (i.e. your website's purpose), you need to think about what you hope to achieve with this website. 

For instance, if you’re building an ecommerce website, the website should help you attract your target customers and convince them to purchase your products. For a portfolio website, the achievement might be getting a potential client to visit your contact page and fill out a contact form. 

How will the website serve its purpose and goals?

Once you know why your website should exist and what you hope it will accomplish, you can focus on how to turn those hopes into reality. 

It’s important to consider not just how you’ll get your target audience on your website, but also how you’ll keep them there. 

As you work through your design process, it’s important to consider best practices for website SEO (search engine optimization). Setting up your site so that various pages will rank well on Google is crucial if you want customers to be able to find you through search engines. 

Then, think about the entire user experience and visual presentation of your website — from the top of the page, through the headers, and all the way down to the footer. Your design needs to engage site visitors right away, and keep them happy with an intuitive navigation, fast loading time, and logical layout. 

2. Research and plan out content

Once you have your why, what, and how, you can start planning out written and visual content that will keep website visitors engaged. 

Start by researching your competition. Browse their websites and see what you love (and what you don’t). Pay attention to the user interface (UI) and your user experience (UX). Skim their content to see what headings, visuals, or features catch your attention. 

Draw inspiration from current web design trends and galleries like Dribbble or Made in Webflow. Make note of design elements, wording, or content organization that you think could serve your audience well. 

After you've gathered your notes and insights from this research, create a mood board. If you’re working with existing images, a Pinterest board is a good option. However, if you want to dive into more detailed designs, a tool like Figma will serve you better. 

Mood boards are ideal in that they allow you to consolidate your findings and transform them into a more visual representation. They can serve as a foundation for when you build your brand’s identity.

3. Design your brand identity

Brand could refer to a company or personal brand. It encompasses both your visual identity — including color scheme, typography, logo design, and your website — along with your brand’s overall personality. 

If you’re designing the website for a company, they will likely have their own style and branding guidelines that dictate their brand identity including colors, fonts, logo variations, etc., which you can apply to the website design. But if you’re starting from scratch, there are some key elements to consider: color scheme, typography, imagery, and overall voice and tone. 

Color scheme

Color has a profound impact on brand identity. Color meanings and psychology influence people’s perception of a brand based on color alone. Plus, background, life experience, and even what generation people are in influence color preferences. 

You can use this to your advantage. Think about what emotions you want people to associate with your brand. Consider what age groups you’d like to appeal to. Let these things guide you towards a color scheme. For example, if you want to come off as trustworthy and wise and hope to reach baby boomers, you could build a website color palette around navy or cerulean blue.

Typography

Font, typeface, and typography are all related, but not interchangeable. Typefaces are like the parent — a set of glyphs or letters in a particular style. Fonts are like the kids, a variation of a typeface with a certain weight, or size. For example, Arial is a typeface while Arial Black (a bold, heavier version) is a font. 

Typography involves typefaces and fonts, but refers to the overall art and design of arranging text. Take these examples from Type Fan, for instance. Both websites use typographic design to really grab your attention. 

‍

When used strategically, typography can be a strong indicator of a brand’s identity. If you explore Leandro Assis’s website, you’ll find that typography is central to his brand — which makes sense, since Leandro is a lettering artist. 

But you don’t have to be a lettering artist to use typography to your advantage. As you design a website, continuously take a step back (perhaps literally) to see how your text arrangement and design might look for a new site visitor. Is it exuding the mood and message you’re going for?

Imagery

You can’t complete a brand identity without visual elements. This includes the imagery you use on your website as well as brand assets for social media, advertising, etc. 

Imagery encompasses a wide variety of elements that come together on a website, including photography, illustrations, animations, and icons. You’ll use imagery alongside your other design elements, ensuring that it plays well with your color scheme and typography. The examples below show two different but effective uses of imagery. 

The top image shows Bazil’s portfolio homepage, which uses a black and white photo with a transparent background paired with oversized typography. This combination provides a professional but visually appealing first impression. 

Underneath, you can see the Shuuga website, which also uses oversized typography but in a much more playful and colorful font. Shuuga adds motion with a smiley-face cursor icon and enlarged photos of the candies sliding across the screen. 

Both websites are solid examples of making color, typography, and imagery work in harmony. 

Voice and tone

A brand’s voice draws from the company’s overall values and mission. Often, this breaks down into a set of characteristics and driving forces such as informative, relatable, and approachable people who want to spread positivity. Or, professional, technical, and precise experts who aim to deliver current, accurate information. Your voice is like your brand’s personality — it remains consistent and always represents the characteristics of your brand. 

Tone can change depending on the situation. For example, the tone of your social media posts might be funny and a little snarky at times. However, you wouldn’t want to bring any snark into the tone of your customer service emails. At Webflow, we define tone as “Audience + context + content = tone” You can review our voice and tone guidelines for more details about how we designed them. 

If you’re designing a website for a client, you probably won’t have to go too deep into what words represent the proper voice and tone, but you will need to ensure that the design matches. 

Going back to Bazil’s portfolio site and Shuuga — each website design gives you a first impression of each brand’s voice and tone. Looking at Bazil’s homepage, you can assume he is a professional who leans more towards clean, minimalist design with a friendly touch (hand wave emoji gives us a hint at Bazil’s personality). Shuuga, on the other hand, is likely into a more maximalist design with loud, playful touches. 

4. Create your wireframes and draft site copy

Wireframes are essentially mockups that map out design elements during the planning stage of website design. Think of them like the blueprints that provide the general layout and flow of a website. 

Creating wireframes helps you visualize your content so you have an established structure before you start adding in images, tweaking wording, and adding extras like animations or parallax scroll effects. 

Wireframes also force you to consider how site visitors will interact with the content. Take a look at the example wireframe below. The sketch shows a navigation bar with drop down menus, a carousel of featured images, and designates space for different elements like videos, news articles, and a music player.  

‍

Draft site copy and organize web pages

While many wireframes include lorem ipsum text as a placeholder, it’s best to be more intentional with your copy. You don’t need to have your copy finalized, but you should have a solid understanding of the purpose of each block of text. Kendra Rainey, Content Lead at Edgar Allan, recommends writing “notional copy” — content that includes directional text.

For example, instead of using lorem ipsum text for a headline, write “Exciting headline that highlights a product feature.” Or instead of just “testimonial” write, “short testimonial from a customer talking about how this product helped increase their productivity.” 

This is also a good time to start thinking about your search engine optimization (SEO) efforts. No matter what type of business or brand you’re designing a website for, you’ll need to drive traffic to it for it to be effective.

As you map out the different pages of your website, think about which keywords one would associate with the content. For instance, if you’re building an ecommerce website, you might want product category pages based on high search volume keywords. And if you plan to write blog posts (which are also great for SEO), you could create a “/blog” subdirectory where all those posts can live. 

Of course, this is just a small aspect of SEO for websites, check out Website SEO: the beginner's guide to ranking on Google for more detailed guidance. 

5. Pick your preferred website builder

If you haven’t already decided on a platform for web development, now is the time. 

Obviously, we’re biased towards Webflow, but WordPress, Wix, Squarespace, and Shopify are also common platforms used for web design, web development, CMS, and ecommerce. However, it is worth noting that each of these platforms has its limitations and shortcomings. 

WordPress

WordPress is best suited for blogging. While it can function as both a static and dynamic CMS, you’ll have to purchase WordPress themes and pay for Wordpress plugins to get that functionality. Many designers have made the switch from Wordpress to Webflow and never looked back. 

Wix & Squarespace

Wix and Squarespace are both What You See is What You Get (WYSIWYG) website builders, which can be appealing to beginners without design or coding experience. However, platform limitations make it difficult to customize designs. Because of that, websites built with Wix and Squarespace sometimes have that standard, templatized appearance that makes them all look the same. It’s tough to stand out to your target audience if your website looks like your competitors’. But you don’t have to take our word for it — freelance designer Antonio Segurado shared how switching from Squarespace to Webflow helped him gain design freedom and create a gorgeous, custom website. 

Shopify

Shopify is great for ecommerce, but if you want something more than an online store, it’s fairly limited. And much like Wix and Squarespace websites, you run the risk of your Shopify online store looking similar to several others who chose the same layout. If you love the functionality of Shopify ecommerce but want more customization options, consider using the Webflow Shopify integration. 

Webflow

Webflow allows you to design, build, and collaborate all in one place — without having to write code. You can switch between the Designer, a visual canvas that lets you build visually while writing clean code underneath, or the Editor, which allows you to write and edit text directly on each web page. Webflow University also has plenty of detailed tutorials and courses available for free to help you get up to speed. 

6. Start building your website

While you don’t need to know how to code to use Webflow, it’s still helpful to understand the basics of web design, so let’s do a quick overview of HTML, CSS, and databases: 

• HTML (hypertext markup language) is the content on the webpage and structure of this content on the webpage
• CSS (cascading styles sheets) is how the content is styled and presented (think fonts, colors, positioning, etc)
• Databases are where content is stored.   

Typically, you need code to transform these elements into a webpage and later an overall website as well as a database to store this code. However, Webflow does this for you by merging these components in the Webflow Designer and Editor. 

Note: Launching a website also requires a web server, browser, web hosting, and DNS, which are incorporated into Webflow’s platform.

With Webflow, you have a few options: design from scratch, start with a template, use a cloneable, or do a combination. 

Design from scratch 

With Webflow, you build visually. Those components you see on the left-hand sidebar of the Designer are what would normally be realized via CSS, HTML, or Javascript. When you drag and drop chosen components onto the visual canvas in Webflow, all that code is written in the background for you. If starting from scratch sounds intimidating, consider taking the free Webflow 101 crash course to help you get started on building your first website. 

For those who learn by having a more practical origin to build upon, using a template could be a more viable starting point.

Start with a template

Webflow has over 1,000 free and paid website templates available to kickstart your website design. These responsive templates are already optimized for all screen sizes and mobile devices and address needs ranging from simple landing pages to robust content management systems. 

Along with our team, the Webflow community makes templates for many different use cases, so whether you’re a beginner or advanced designer, you’re sure to find options to get you from idea to publishing quicker than building from scratch. Templates can serve as a solid foundation for a website, then you can customize elements like color, font, etc. to make your design match your brand identity and style. 

Use a cloneable

Using Webflow cloneables is like hitting copy paste on components, effects, layouts, or entire websites. You can use cloneables in addition to templates or designing from scratch — just browse the projects in Made in Webflow to find what you need for different types of websites. 

For instance, if you’ve already set up your /blog subdirectory, you could add a Time to Read cloneable to estimate the reading time for each post. You can clone interactions, buttons ,or entire portfolio websites, depending on what you need for your own website. 

When you find a cloneable you like, you can open the cloneable directly in Webflow and start playing around. 

7. Conduct user testing and gather peer feedback

You don’t want the first time anyone sees your website to be launch day. Once you’ve got a draft version of your site, ask friends and peers to test out the user experience. 

Kasturi Roy shared the research and revision process she used when building her content design portfolio from scratch. She separated her reviewers into two groups: fellow designers and hiring managers. If you’re running a small business, you might replace hiring managers with people who fit your target audience. 

At this stage, you’re looking for feedback on two things: the overall look and feel of the website and the user experience the site delivers. You can collect and organize feedback in many ways, such as a Google Forms or Typeform, Airtable responses, a Miro board, or even written notes you jot down while discussing the site with your reviewers. 

8. Publish your website

If you’re using Webflow as your web builder platform, click publish! Webflow already offers hosting within the platform, so all you’ll need is your custom domain. If you haven’t already set up your domain, you can buy it from your preferred service, or go through GoDaddy or Google domains directly in Webflow. 

9. Manage, scale, and evolve

Your work isn’t over once you finish designing the website. If you want to keep growing, you’ll need to continuously improve.

Be sure to set up website analytics monitoring through Google Analytics or similar alternatives. Using website analytics tools can help you track website traffic and dig into which web pages attract new site visitors (and hopefully, keep them engaged while they’re there). Looking into how visitors move through your website also helps you improve your user experience and content organization

You’ll need to measure website performance with tools like Google Search Console and PageSpeed Insights, amongst others. Performance can refer to technical aspects, such as your site loading time, or how your website performs in search engine results. That information will inform your future website optimization strategies.

For example, you might discover that content on a specific landing page has a high bounce rate — meaning people click through from a search engine but quickly “bounce” or leave the page. Usually, this means the content they found did not match the search intent of the keywords they plugged into the search engine. 

Strategic changes can drastically increase the traffic search engines drive to your site. In fact, one company increased traffic by 300% with four SEO strategies while another used programmatic SEO to create 300 landing pages in a week, growing impressions from 100 to 6,000 in a matter of weeks. 

Starting designing a website today

Whether you’re building a straightforward graphic design portfolio or a robust business website, the basic steps are the same. With this guide, you can start bringing your ideas to life. And if you’d like some extra support, our Education team is always adding new lessons and courses to Webflow University,a completely free resource to help you jump start the building and designing of your website.