5 types of websites and how to create & design them

Discover all the tools, resources, and templates you need to build any type of website using Webflow's no-code platform.

Different types of websites call for their own unique style of web design.

There are ecommerce sites designed to sell products or services. Small businesses create websites to showcase their talents and establish their brand online. Designers and artists use portfolio sites to show off their work and attract clients. Blogs allow individuals and brands to publish unique insights directly to their audiences. And personal websites are great for marketing yourself to prospective employers.

Let’s explore five popular types of websites along with best practices for designing them and helpful templates to get you started. 

1. Ecommerce websites

Ecommerce websites allow users to shop for and purchase products or services online. Amazon, Bookshop, and other retailers that sell products through an online store are great examples of ecommerce sites. These websites make it easy to drop items in your cart and checkout using your credit card, a payment service like PayPal or an ecommerce platform like Shopify. 

Ecommerce website design 

Different types of website design call for different elements. When building an ecommerce website, you’ll need a shopping cart component that allows users to add and remove products and also lets you set pricing, offer deals, and establish discounts. You need a payment gateway so users can complete their transactions. 

As you approach your ecommerce website design, it’s important to think about how your visitors will interact with your site. Chances are, you’ll want to offer discounts and promotions in the future, so build that functionality into your site from the beginning. 

Make it easy for potential customers to find what they want in the least amount of clicks. You can keep the shopping experience streamlined by breaking the products in your ecommerce store into categories that visitors can filter by. Including a robust search functionality is a nice touch, too. 

Don’t forget about product photos. Many different kinds of websites rely on great photography, but for ecommerce websites your photos can make or break your sales. Use high-quality images to ensure trust in your brand and showcase your current deals on the homepage as high up as you can.

Provincial Spirits' ecommerce website made in Webflow
Provincial Spirits' ecommerce website made in Webflow

Use ecommerce website templates to build in Webflow

Thankfully, Webflow makes ecommerce web design easy by combining great ecommerce templates with these complex tools in one easy-to-use package.

Using Webflow's platform, you can easily create a unique ecommerce website without writing a single line of code. Start by selecting an ecommerce theme that matches your brand. You can then customize each element, add new components, and expand the vision with your content. You also can customize the checkout process, select a payment gateway, change the layout, and customize your transactional emails. Don't forget to add your SSL to secure your shopping cart (included with Webflow). Finally, add video and other animations to set your ecommerce website apart.

Want to learn more? Check out our free Webflow University Ecommerce course.

2. Personal websites

Personal websites are for individuals who want to have an online presence to voice their opinion, help with job prospects, or establish their own personal brand.

Most personal websites are fairly simple, with images and a lot of text. Since personal websites are shared with friends, family, and colleagues manually, they don't typically require any lead generation tools or SEO. However, if you plan to use your own website to promote yourself as a professional, it certainly doesn't hurt to optimize your content to appear in search engines.  

Personal website design 

For this type of website, the design elements really depend on the purpose of your personal website. Will the site be something you share with friends and family just for fun or are you trying to build a brand? If it’s the latter, you’ll want to create a recognizable look and feel for your personal brand. 

Next, decide if you’ll be selling services through your site or using it as a central place for your online presence. For the former, you’d need to set up landing pages with different service packages. For the latter, you could get away with just adding your contact information and encouraging potential clients to reach out. 

Regardless of whether your website is for business or pleasure, a personal blog could be a nice addition. This way, you can frequently update your site by sharing your thoughts on your area of expertise or share your life through blog posts. 

Al Murphy’s personal website built in Webflow. 
Al Murphy’s personal website built in Webflow. 

Use personal website templates to build in Webflow

Using Webflow, you can select an attractive personal website template, drop in some images and start crafting your personal website within minutes. All that is left is your fabulous content.

Since a personal website is, well, personal, you can do anything you like. Choose as fancy or as simple a design as you want. You can select colors and fonts that work and add your content to make it yours. 

3. Portfolio websites

While similar to a personal site, this type of website is all about showcasing your professional work with the goal of winning clients. 

Sarah Lupton’s portfolio website made in Webflow. 
Sarah Lupton’s portfolio website made in Webflow. 

A portfolio website is a canvas for designers, writers, videographers, artists, and other creative professionals. These types of websites exist to highlight specific skill sets and services that freelancers offer. 

Portfolio website design 

Typically, portfolio websites have a few unique features. To showcase your work, you might use slideshows, galleries, or portfolio animations. You can also embed videos depending on how you want to display your work. 

Don't feel like you have to display every project you’ve worked on. Select your best work and split the projects into categories, so it’s easy for your audience to find what they need. Be sure to highlight each project by telling the story behind it. You can also include details about what tools of your trade you're familiar with, like a specific website builder, SaaS tool, or software. 

Be sure to double check with your past clients before sharing their projects in your online portfolio — not all customers will want their proprietary designs featured. You can also limit access to your work by password protecting certain project web pages and asking serious clients to contact you for the password. 

And while you’re at it — ask your previous customers to share their thoughts on your services. Including client testimonials on your portfolio website is a great way to let your satisfied customers sing your praises and sell your services for you. 

Use portfolio website templates to build in Webflow

Even if you already know how to build a portfolio website, Webflow has unique features that make crafting your portfolio as straightforward as possible. For example, you can use templates to create a testimonial slider or set up a standard layout for your project pages. This way, you can quickly add in new testimonials and projects that match your site’s style. 

Not sure how to get started? There are plenty of portfolio website templates available so you have a solid foundation that you can build upon and customize to your liking. 

Learn how to build a design portfolio

Build and visually design a full portfolio website — completely free. This course covers everything from the basics of grid and flexbox to advanced interactions and accessibility work.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Start course

4. Small business websites

A small business website provides an online presence so people can learn about a company, its employees, products, services, and culture. The goal of a small business website is to provide information so customers can reach you directly. Examples include local accounting firms, service providers (plumbers, HVAC, etc.), restaurants, and law offices.

Chatdesk's website made in Webflow
Chatdesk's website made in Webflow

Small business website design 

Your small business website helps you convert visitors into customers. The design should match your company branding, along with your tone of voice. If you’re a local bar, your site might include photos of your business and focus on dark colors to give off smoky bar vibes. If you’re a small pet grooming business, your design will likely be brighter and full of pet photos. 

Regardless of what type of business you are,your website should include your logo, preferred design elements, and quick and easy navigation for users to find areas on your website.

Always include an About Us page so visitors can quickly get to know your business. Ensure that your contact information is easily accessible so potential customers can get in touch. Small business websites also need to have SEO-friendly features so you drive search traffic to your site.

Use small business website templates to build in Webflow

Select a website template that represents your business. Keep things simple and focus on intuitive navigation. Be sure to choose colors, fonts, and other styles that match your brand. And don't forget to add a clear CTA on your home page.

For more complex small business website design, consider working with a Webflow Expert who can build a robust site and customize it to your branding and the services you offer. 

5. Blog websites

A blog website is regularly updated with relevant articles, videos, and photos meant to inform, entertain, and educate your audience. Blogs are sometimes platforms to voice an individual's opinion, or a company may have one to offer valuable content to their customers. These types of websites can either put the main focus on the blog itself — centering the site around the regularly updated content — or be built into a larger website. 

DoorDash Stories blog made in Webflow
DoorDash Stories blog made in Webflow

Blog website design

Blogs come in all shapes and sizes, but an essential element to any blog is organization. Your readers need a simple way to find items of interest, so good category-navigation (like sidebars on blog pages) is critical. Expert content and interesting opinions are also key. Check out our selection of great blog templates and tools to design any type of blog

Often, blogs skip the large image slider at the top and get right to the content. Use visual elements (icons, photos, artistic design) to highlight a category or new piece of content. If you want to grow your audience, add a CTA and newsletter sign-up area to grab visitor's email addresses. This way, you can keep your readers engaged with exclusive newsletter content and make sure they’re aware of your recently published blogs. 

Use blog website templates to build in Webflow

When building in Webflow, it’s key to choose a great template with a blog layout. Think about what type of content you’ll use — video, images, articles, guides, etc. — and then select the page’s design elements that match your content type. Next, add sample content to see how it displays on the screen. And don't forget to add a newsletter sign-up feature. Even if you haven’t launched your newsletter yet, it’s good to have a way to connect with your readers once they’ve left your site. 

Need more help? Check out this video that covers how to create a blog website using Webflow CMS. 

Experience the power of code — without writing it

In this post, we went over just five of the most popular types of websites. It doesn't mean they are the only types that exist. The sky’s the limit to what type of website you can build on the web — from wedding websites to news websites and everything in between.

Using Webflow, you can experience the power of HTML, CSS, and JavaScript in a visual interface. You can start building a custom website for free, and you only pay when you want to launch to a custom domain.

Join the conversation

What's Webflow?

Try it for free
More about the Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Build website interactions and animations visually.

More about Interactions

CMS

Define your own content structure, and design with real data.

More about the CMS

Ecommerce

Goodbye templates and code — design your store visually.

More about Ecommerce

Editor

Edit and update site content right on the page.

More about the Editor

Hosting

Set up lightning-fast managed hosting in just a few clicks.

More about Hosting