How to Make Great SaaS Website Design



Any half-decent SaaS specialist will tell you that the best SaaS ideas convert leisurely visitors into prospective leads and clients of your business. A good design attracts attention, engages users, and helps them formulate a definitive opinion of your product. User-friendly navigation, a clear structure, and a clean interface are parts of a marketing website that will serve its purpose well.

Your main page is the face of your brand now. If you ask yourself, "how to structure it properly?" or "what are common techniques used in building a successful website for SaaS?" — worry not! We are here to discuss your main page's content, what information to include, where, and what to look out for. Let's dive into the best practices for creating a proven functional architecture for the best SaaS website designs.

Main page structure

Creating a bomb Main page is one of the most crucial ventures to undertake if you want to build a SaaS website that converts leads. One of the best practices for Main page design is using light colors. According to research, an overwhelming majority of companies have used white or light color as a primary color for their website’s background — 92% of the cases! To give you a more practical example, we once completed a project where the client insisted on using a dark background for their website. Can you guess what happened? After six months of the website being live, our client requested our team to re-design the website with a white background.

About 70% of great SaaS websites use illustrations on their main page. An image usually demonstrates a product or a service presented on the platform. Designers can use various options for incorporating pictures into interface design, but images showing people at work using technologies and gadgets are the most popular. Some brands take on the task with a splash of creativity.

SaaS website structure
Screenshot from Gumroad, February 2023

It’s also popular to design SaaS websites using photos of real people on the Main page. The best case is to have pictures of the CEO and Founder of your SaaS product or company and shots of your team. Although, at times, you can find some decent examples among stock material. Another option is to incorporate animation and even video. For example, Asana incorporates subtle motion effects throughout the whole page.

Hero section at the SaaS website, slow animations
Screenshot from Asana, February 2023

Overall there are several staple blocks to incorporate into a structure of a main page. Let’s discuss them in more detail.


Part of understanding how to create a SaaS website is making a Header with proper structure. The navigation bar is the show's star here, as it will guide users around the website. A good rule of thumb is to have seven buttons in a navbar, give or add 2. According to psychologists, you may have heard about this magic number before, as it is deemed to be the range that our human brain can focus on the best. But what should you do when you need to squeeze in more?

We solve this problem by creating an expanded menu that opens up entirely upon mouth hovering. 

Header at the SaaS website
Screenshot from Sastrify, February 2023

A navigation bar is also an excellent place to showcase your logo. About 99% of the companies put their logotype in the upper-left corner. Such a placement is a staple in SaaS web design used by most industry professionals in and out of the SaaS niche. There is room for exceptions — but that goes for any rule, providing you know what you are doing. If you are starting, however, we strongly advise sticking to best practices that have been successfully proven repeatedly.

Hero section

One of the best advice someone can give on how to design a great SaaS website is to make sure to make your user the Hero of the story. Remember: you are here to explain and convince them how your product will improve their life. No matter how excellent your service is, it can only shine in the context of the value it will bring to your customer's work routine or day-to-day life.

But first thing first: you need to pick their interest. That's precisely what the Hero section is for.

Key features commonly included in the first fold:

  • Strong background visuals. This can be a full-screen picture or a video. Either way, you want to make an impression with the imagery you showcase. In the first few seconds, any user visiting your homepage should get an abstract idea of what your brand does and stands for. The industry favors a more simplistic and clean approach to SaaS design rather than bold and maximalist, but you can still get creative.
  • Your slogan. Give them your pitch and make it short and sweet. The better you can capture the essence of your service and the main idea behind your product, the better your customers will understand your offer. The better their target audience understands the product, the more engaged they will be.
  • A prompt to scroll further. Putting some hook at the bottom of the screen is a go-to technique to encourage users to progress down a webpage. A small arrow or a similar icon is a subtle nudge to let visitors know, "hey, there's more interesting stuff to see!". The critical point is leading users further down the first fold and along the main page. A fold, in this case, is part of a webpage seen on a screen.

Do you know what's curious? Only 46% of SaaS companies' web pages use videos. That’s not enough web pages if you'd ask us! In our experience, including videos in SaaS web development tends to scare brands ridiculously. Videos can be an excellent tool for your business to nourish more up close and personal relationships with people who choose to visit your website.

Animation at the hero section for SaaS website
Screenshot from Adobe, February 2023

Call to action

The first webpage should always have a CTA. In SaaS, there is a concrete rule: you should place your call to action on the first fold. It should encourage visitors to engage with your service. Among SaaS businesses participating in the research, over 90% of the websites had a CTA button in the upper part of a page. One more helpful tip from a SaaS website design agency to remember: one CTA per page. You want to avoid overwhelming your potential customer with many offers that fight for attention. Attention is fickle, so make sure to focus it well.

Call to action for SaaS website
Screenshot from Mailchimp, February 2023

As for the colors, green is the most popular choice for a CTA button. Green is associated with motion and action, so that’s probably why we tend to gravitate to this combination the most. The second most popular color in this regard is orange, and the third is blue. We like to use orange in our CTAs as it corresponds well with our overall branding.

What are the most popular colors for buttons?

Okay, but what should you write on that neat little button to make it serve its purpose? The most popular call to action would be “Get started,” in this case.

Among other keywords and phrases are:

  • Free
  • Demo, demonstration
  • Get
  • Start
  • Try
  • Request

Think about what exactly you would like a client to do and formulate it concisely using a combination of action words listed above.

Popular CTAs in SaaS

Interactive elements

Interactivity contributes to user engagement while bringing helpful functionality and entertainment value.

You can include such interactive elements as:

  • Filters
    A helpful feature for users to navigate your website. Improve their experience by letting them filter through items that interest them.
  • Calculators
    Budget calculators can help forecast customers’ spending on a product, service, or specific plan. 
  • Animations
    Motion design is a fantastic way to add visual interest, focus attention, and let users have fun with your page.
  • Sharing buttons
    Why not put social media sharing buttons on a webpage?
  • Infographics
    An interactive diagram users can click, toggle, and change is a creative way to present data.

Increase engagement, improve the sales funnel, and increase profits by encouraging better user experience. If you currently have a static website, struggle to involve clients on a more personal level, and consider SaaS website redesign, show users key features by encouraging them to interact. About 45% of marketers report better results after boosting interactivity on a website. And who doesn’t like to see a promising increase in ROI?

List of services

Of course, the best action is to focus on the central problem your SaaS product solves. But if you have a list of services you can offer your clients, be sure to include it at easily viewable access. In this case, you should explain your services with good copy, illustrative icons or pictures, and creative animation to spark additional interest. 

Company’s competitive advantages

Deliver customers your best pitch: let them know your unique value proposition. Inform about the reason your current clients have chosen you. Show visitors why it’s beneficial to choose your company’s offer. Maybe you offer more cost-efficient solutions, or your product tap into specific pain points others fail to recognize. The better you know your service and target audience, the easier it will be to compile this section. Make it clear, structured, and noticeable with the help of good UX/UI design. Recognize the real-life experience your potential customer could have without your product and how your product will improve that reality.

Plan of action

A client needs to formulate a clear idea of how they can proceed. It’s your job to show them! The more comprehensive your explanation of steps a customer should take, the higher the conversion rate will be. Hint on a first step one should take and what reward waits for them: a trial for a certain amount of days, access to a basic plan, free consultation, etc.


Social proof gives credibility to your brand, so pay attention to include positive feedback on your Main page. Your clients will surely want to know what previous customers say about the product.

Different methods of displaying such comments on SaaS websites are available:

  • Static array. Create an arrangement forms each for separate feedback.
  • Dynamic carousel. Put a selection of reviews in a slide -show that either changes automatically or better else — let users be able to switch them by clicking.

Include a picture of a client, their name, and their position in a company they represent alongside the body of a review. Choose more extensive comments consisting of at least 3-5 sentences.

Reviews' section for SaaS website


Alongside social proof, a list of your business partners should be included on the main page. You can go as simple as showcasing their logos in a simple array and name it something straightforward, like “Our partners.” Your professional connections surely bring additional weight to your brand in customers' eyes, so we strongly advise you not to skip this part. It’s simple, concise, and performs its duty as needs are.


Footer for SaaS website

A footer needs special attention. Here you can place links to your web pages so clients can make sense of your website structure easier. If you have more than ten pages, choose those you want to pay special attention to and promote through SEO. Usually, those pages include:

  • Services
  • About us
  • Contacts
  • Vacancies
  • Partnership

Other essential elements to place here would be:

  • Your logo
  • Your motto
  • Terms and conditions
  • Cookies

Functionality should be over design here, so best to keep it simple and clean. Ensure all elements are accessible, all links are correct, and the section looks presentable. Going overboard with decorations and details will not be the best idea, so keep it to a minimum.

Contact us

How it works page

Here’s an entire page dedicated solely to the purpose of explaining, showing, and demonstrating how your product works. The more outstanding a presentation is, the better idea the target audience will get. Remember, though, there’s a delicate balance between explaining in detail and boring someone to death. Include necessary information but don’t pour water into your copy. Explain the basics, add some juicy details, and show humor and wit where appropriate. No one likes dry text — show some character! Or better yet: animate a video guide and combine entertainment with productive use. We already mention the benefits of including videos and animations on your website, and the How it works page is an excellent place for that as well.


Providing additional material for visitors will give them more information on your business as well as the user of your product. You can include plenty of pages and sub-blocks in the website’s architecture to bring value and assist your clients in their decision-making regarding your brand's services. That’s your opportunity to recognize and fill any market gaps as well — there’s a lot you can do by providing relevant resources at an appropriate time.

Use cases

Use case is a scenario of someone using your product, a sequence of actions they could perform while interacting with a service. Describe how visitors perform specific actions on the website from their point of view. Each separate use case will represent a process with steps starting with defining a goal and ending with the mentioned goal being completed. The benefit of including use cases is showing how a system works and explaining sequences that a user can undertake. 

Compiling use cases is a whole science on its own, which can help you deduce:

  • Who are your users;
  • What do they want from your websites;
  • Their wants and needs;
  • Step they will perform to achieve a goal;
  • How does the website respond to users’ actions?


Can you share an ebook, a PDF guide, a document with a checklist, or research? Your website is a great place to promote it now. Moreover, let an ebook promote your website in turn: let users download freebies or advertise your material to your target audience so they can access your website through additional means. There’s plenty of use downloadable content can bring to your marketing efforts, so if you have something to include — now’s an excellent time.

Customer stories

Here’s a section where you can include your customers’ stories in a longer form than reviews on a main page. There’s nothing like a freeform personal story of a client whose life changed for the better because of your product. Ask a client to tell you:

  • How they found your product and came to use it;
  • What troubles in what area they have been having beforehand;
  • How your product helped them solve their issues;
  • How satisfied are they with a service;
  • Who would they recommend your product to?


Blog is a great page to attract new leads to your website. Fill it with quality articles on topics that correspond to your niche. Provide research on the technology you use, comparisons and professional advice, techniques, and methods you picked up from experience, an overview of trends, etc. With proper SEO, your copy will be a source of helpful information and a powerful magnet for your target audience. Just remember that Google values quality over quantity, so we suggest not trying to beat the algorithm by creating an impressive amount of copy only for it to be completely shallow and irrelevant. Do your research, speak from experience, and hire good copywriters that work with SEO, and you will be golden.

Blog for SaaS company
Screenshot from Zendesk, February 2023


The good idea is to dedicate a separate page to pricing plans. It’s pretty straightforward — you need to let the client know the costs. Generally, those are customers ready to make a decision, and providing them with concise, easy-to-find, and well-structured information can never hurt. You can arrange presented plans in various forms, side-to-side, or a list.

Consider including:

  • A list of options available.
  • A different name for each option (e.g., “Free,” “Starter,” “Standart,” “Premium,” “E-commerce,” etc.). 
  • Features included in a plan.
  • Any extra benefits each one provides.
  • Cost and how it’s charged (e.g., monthly, yearly)
  • An open plan for enterprises with a prompt to contact your sales team directly. Negotiate a personalized offer with a set of services and individual price plans.
  • Highlighting a plan you want to promote or the one that is most popular among your existing clients (e.g., put a mark of “Most popular,” “Top pick,” or “Best offer” or similar)
  • A CTA button to convert visitors into clients (e.g., “Choose,” “Buy,” “Start,” “Add,” etc.)

Live chat

At least half of SaaS brands use live chat. Research shows that about 50% of SaaS sites have a chat icon in a corner ready for instant use. 

Most CRM systems provide their chatbots, and we recommend setting up those to decrease the number of integrations on a website. Less code means faster performance. If a CRM doesn’t have a chatbot option, we usually install Landbot by Webflow’s recommendation.

If you are not sure you want to bother with hiring managers to maintain chats, check out this statistic of customers’ preference of support channels:

  • 41% opt for live chat
  • 32% for phone calls
  • 23% for email exchange
  • 3% for communicating through social media


To create a decent website design for SaaS for a product, one needs to follow several simple rules. A main page is your brand card online, so presenting it in the best way possible is vital to winning users and converting them into leads. All you need is to adhere to a widely used structure among industry professionals and showcase your quality product to your business's target audience. Follow professionals’ best practices, hire experienced specialists, and make your sales today.

Check out the full list of solutions from our Webflow development company, Warmdevs.


What makes a good SaaS website?

Focus on creating a good user experience with a modern, professional-looking design and straightforward navigation. Your website should communicate your value proposition and comprehensively explain your product, preferably with definitive guides or video instructions. Make a user the Hero and show them how your product can help solve pain points and enhance their lives. Offer a trial or a demo version to demonstrate the service value in practice.

Which are the design issues for SaaS?

A big issue can arise when product proposition value is not clear. A SaaS website needs an easy-to-navigate UX structure to engage users with presented services. A platform must also look professional to represent the business as a definitive service provider clients can trust.

What should a SaaS website have?

A SaaS Website should have an eye-catching main page that instantly attracts users' attention. To achieve a positive result and create comprehensive navigation, the base structure of this web page should generally include: Header; Hero section; Call to action; List of services; Unique value proposition; Reviews; List of partners; Footer.

What should a SaaS website have?
What should a SaaS website have?
plusplus activeminus

A SaaS Website should have an eye-catching main page that instantly attracts users' attention. To achieve a positive result and create comprehensive navigation, the base structure of this web page should generally include: Header; Hero section; Call to action; List of services; Unique value proposition; Reviews; List of partners; Footer.

Was this article helpful for you?
Please, rate it

Let's scale your business today

Schedule a consultation with our representative to talk about development services with no obligations from your side. Take a part in a professional discussion that will provide you

A reply from our manager within 24 hours
Eye icon
Approved time of a meeting convenient to you
A folder icon
WA signed NDA provided the project information needs to be confidential
Graph icon
Defined project scope, specifically the requirements, deadlines, and cost estimation