Define Your GoalJust as you would in any other part of your business, you need to know exactly why you’re setting up a website in the first place. When you break business websites down into their simplest form, there are three main types: portfolios, online stores, and professional services websites. They’re all pretty self-explanatory, but let’s break those down further. Portfolios showcase something important about your brand without directly selling a product or service. These can be simple one-page resumés, a photographer’s online gallery, or even a non-e-commerce business website. Typically, everything on a portfolio website aims to persuade users to contact or visit the business. These websites don’t sell products or services. Online stores drive users toward purchasing a product. Of course, they will also describe what makes the business different, but that’s not the focus. The focus is on securing the sale, so they’re typically designed with the sales funnel in mind. These websites are a little more complex than portfolio websites due to their e-commerce nature. Professional services websites are designed to get users to book services. Depending on the services provided, the website won’t necessarily need to handle purchases, which is why these websites are considered a separate category. They won’t necessarily have e-commerce functionality, but they will have a booking system. There are, of course, outliers to this “rule.” For example, self-employed professionals will likely have a combined portfolio and professional services website. Some online stores may also offer professional services. I just want to show that your business focus will define your website’s design.
Top Tip: User ResearchYou should also consider what your users want to achieve on your website. This can be as simple as wanting to purchase a product (which makes life easier for online stores!). However, it can be as complex as wanting to feel reassured that the services they book will be worth their time and money. Knowing these user goals now will help you determine elements of your website design later on.
Choose a Platform for Your WebsiteIt’s time to choose a home for your new website. You can take two routes – use a website builder or host your own website. Website builders are great if you want an all-in-one, beginner-friendly option. That said, you can’t always effortlessly migrate your website if you stop using the builder’s services. If you want to use this route, here are the platforms I recommend.
Website builders often have a reputation for offering the same base template, changing up some colors and images here and there, and claiming it’s an entirely different template. Not Wix! Wix’s 850+ templates are unique, giving you plenty of inspiration and a great base to start your branding. You’ll also get complete freedom to customize each template. While other website builders force you to snap elements to a grid, you can place every element exactly where you want it to be. This does come with a catch, though. While your templates are mobile-responsive, the sheer level of customization you get means some elements can be misaligned on mobile devices. So, you’ll have to edit your website’s mobile versions separately to ensure everything works. Fortunately, it’s not a problem with Wix’s intuitive drag-and-drop editor.
- AI-powered design. If you don’t know where to start with your branding, let Wix help. Tell Wix’s Artificial Design Intelligence (ADI) about your business, goals, and what you’d want your website to look like, and it’ll generate a custom (and customizable!) template for you in minutes.
- Built-in SEO tool. Search engine optimization (SEO) is a vital part of web design – it’s difficult for users to find you without it. Fortunately, Wix simplifies this part of your design with a built-in tool that provides a checklist for optimizing every page for search engines.
- Pre-built content layouts. In addition to Wix’s hundreds of templates, it offers many pre-built layouts. This makes it easier to design a professional-looking website without knowing advanced design principles.
- Great free plan. Wix’s free plan is pretty generous and doesn’t limit you in terms of customization or design features.
|Other design features||
Save up to 30 % on your Squarespace plan today!
Plus get a free domain for one year!
- Tons of integrations. In addition to the content blocks pre-loaded into the drag-and-drop builder, Squarespace offers several more to suit more niche requirements. These include blocks for table bookings, tour dates, sound files, interactive Google Maps blocks, and more.
- Stock photo library. Save time during the designing process by browsing stock photos within the Squarespace editor. You can even purchase premium images without leaving the app.
- Great support. In addition to Squarespace’s helpful and responsive team available for email support and live chat, you will also have access to a community forum. It’s an excellent resource for design inspiration and receiving feedback from fellow designers.
- Free logo designer. Squarespace’s logo designer is relatively simple, yet considering it is a free tool, it is pretty effective. It’s definitely serviceable if your branding budget is low.
|Other design features||
Get 40 % OFF SITE123
Save 40 % when you sign up for SITE123's annual plan
- Mobile-responsive. No matter how much you customize your template, your SITE123 design will look just as great on mobile as it does on desktop.
- Dozens of apps. You can connect pre-built integrations to extend your website’s functionality. From calendar blocks for service-based businesses to pricing comparison tables, you’ll have everything you need to optimize your web design to suit your goals.
- Intuitive editor. Don’t worry if you’re new to web design. SITE123’s editor is intuitive and user-friendly, allowing you to jump in without prior experience.
- 24/7 support. Help is on hand if you encounter any issues. You can contact SITE123 via its 24/7 live chat channel, send an email, or use its stellar Support Center for advice.
|Other design features||
Save up to 25 % on your Shopify plan!
Limited-time offer - Don't miss it!
- Mobile-responsive. On top of every Shopify website design being mobile-friendly, you can edit your site design on your mobile device. You can be sure your design will look just the way you want on smaller screens.
- 3D assets. Give your visitors a good view of your products thanks to Shopify’s support for 3D product models.
- Thousands of apps. Add custom galleries, product review boxes, search bars, and more to your website. With dozens of options for design features as simple as buy buttons, you’re bound to find the perfect solution for your business.
- Quickstart checklist. If this is your first time designing a website, Shopify will guide you with a checklist customized to your business goals.
|Other design features||
Top Tip: Website BuildersWhile the four options I’ve listed above are, in our experience, the best website builders the market has to offer, there are many more options. If you don’t like the above, check out our list of the top 10 website builders in 2023. We update this regularly, so you’re bound to find an option that’s great for your business.
WordPress Is A Great Alternative
Website builders aren’t your only option. Self-hosting your website is a great alternative because it gives you greater design and performance flexibility. However, this isn’t a route I’d recommend for beginners, as it requires a little more technical knowledge to get things rolling. Our complete guide to self-hosting your website can help you understand whether this is the best option for you.
WordPress is my top recommendation for self-hosted websites. It’s an open-source content management system (CMS) that powers 43% of websites, making it one of the most popular platforms. Because it’s such a popular website solution, it offers over 20,000 themes, and thousands more are available via various third-party theme libraries. You also have full access to your website’s code, so you can tweak stuff as much as needed.
While WordPress itself is free, you’ll have to pay for hosting. Fortunately, hosting isn’t as expensive as you’d think. Our top recommended hosting provider, Hostinger, starts at only a few dollars per month for 100 GB of storage and unlimited bandwidth for up to 100 WordPress websites. You’ll also get a free domain name for one year and an SSL certificate for the duration of your plan.
Top Tip: SSL CertificatesAn SSL certificate is a digital signature that tells a web browser your website uses the Secure Socket Layer protocol to encrypt data between a web server and your browser. Your website must have a valid SSL certificate. It prevents a costly data breach and protects your reputation. Fortunately, most website builders and hosting providers offer a free SSL certificate, as it’s considered the industry standard.
Create Pages for Your WebsiteIf you’ve decided on a multi-page layout for your website, you’ll need to add some standard pages that users expect to see. That’s not to say single-page sites don’t need to add the information that these pages contain – they will simply do this differently. Let’s see how these pages work in an example from Wix’s template library.
HomepageYour homepage is arguably the most important page on your website. After all, you only get one chance to make a good first impression, and that’s your homepage’s job. This page doesn’t need to contain any specific information per se but should showcase your logo and business name. The best homepage designs tell the user precisely what the business does above the fold (or before users scroll down). You can also include short snippets below this, such as a testimonial, a link to your gallery, or a short paragraph about who you are. The key is to keep any information on your homepage brief and to the point.
AboutYour About page is where you describe your business and what sets you apart from your competitors. It’s an opportunity to go into more detail about why you do what you do, so you can humanize your brand and connect with your visitors. An About page builds trust. It reassures your visitors that there is a human (or multiple!) behind the brand, and you’re not just another faceless entity. Depending on your niche and industry, this will likely be the first page visitors navigate to from your homepage.
ContactFinally, you should offer visitors a way of getting in touch with you. Your Contact page should be focused solely on giving customers a way to contact you. Don’t include any business information here unless it’s an estimated response time, hours of operation, or a link to your FAQs. At the very least, you should offer a secure contact form. These can be customized to your requirements, and you can set required fields, which means that customers can only submit once they’ve provided all the information you need to answer their questions.
Optional PagesIt’s likely that your business will need more pages beyond these. The sample website above has pages for the speaker’s online courses, speaking packages, other experiences, a blog, and a user area. Online stores will want a product catalog with individual product pages, while portfolio websites will have a gallery or a page that lists the business’s previous work. The sky’s the limit with the pages you add to your website, and I can’t define one set route without knowing your end goal. I recommend looking through your competitors’ websites to examine their pages and the information they provide.
Top Tip: Flat NavigationAn essential design principle to remember here is flat navigation. This means that all pages on your website take no more than three clicks to reach from your homepage. The fewer clicks users need to get somewhere, the quicker they can find the information they’re looking for. If you need many pages, it’s worth adding elements like search bars or dropdown menus to help visitors navigate your website.
Design Individual Website ElementsOkay, let’s get down to business. It’s time to put that branding document and everything we’ve learned so far into practice. So, here are the key elements you need to know and how to optimize their design.
Header and FooterYour header and footer are, as you might have assumed, the bits at the top and bottom of each page. While these elements look simple, don’t be fooled – users expect your header and footer to be laid out in a certain way. You can take a risk with your design elsewhere, but it’s best to stick to the status quo here. Similarly, your header and footer should be some of the plainest elements on your website. Visitors don’t want fancy graphics or gimmicky design – they want to find the pages they’re looking for with minimal effort. 88% of users won’t return to a website after only one poor user experience point, so don’t take any chances here.
With that in mind, let’s focus on your website’s menu. When you’re setting up your menu, think of Marie Kondo. On top of users expecting certain pages in your menu, they also don’t want to see every page on your website listed there. Use sub-menus (like dropdown menus) to group your pages and keep everything tidy.
Scroll Effects and MotionThis is a bit of a “you love it, or you won’t touch websites with these design elements,” but bear with me. When used in moderation, animated elements can work really well, but they might also cause accessibility issues. I’ll cover this in a bit more detail shortly. The most popular scroll effect for modern websites is called parallax scrolling. With this animation, the background of your website scrolls slower than the foreground text, which gives the content block depth. It’s a good way to draw attention to your text and add a visual flair to your website. That said, it’s not always the best way to add motion to your website. You could also use video, short looping animations, or even more complex scroll effects, depending on what you’re trying to achieve.
Text, Images, and AudioThese three things will make up most of your website’s content. In many cases, you won’t need to use audio, but I’ve included it here as it’s crucial to some businesses. Just make sure any audio isn’t set to auto-play, okay? Every millennial knows the horror of auto-play audio, so if you’re trying to get us to stay on your website, keep that audio locked behind a play button. To maintain balance, avoid excessive text – too much of it can overwhelm and confuse users. Instead, complement the text with images and ample white space. That’s not to say you can’t present larger chunks of text on information-heavy pages, but you need to break these up so visitors feel like they’ve got space to breathe.
Top Tip: Load SpeedsAccording to Google, the chance of a user bouncing (or leaving your website) rises to 32% if your load time increases from one to three seconds.The longer your website takes to load, the fewer visitors will stick around to see what your business is about. Be mindful of the amount of content you add to each page, as it directly impacts loading time.
Carefully Consider Accessibility
At this point, you’re likely raring to get your website set up and start playing around with color palettes, but stay with me for a little while before you do. One of the most important design principles you need to follow is accessibility, which will affect your overall design.
The Web Content Accessibility Guidelines (WCAG) is an international initiative headed by the World Wide Web Consortium (W3C). It’s a voluntary (yet necessary) set of guidelines that make websites more accessible to disabled users who may have to use assistive technologies to browse the Internet.
We don’t have the time to go over the entirety of the WCAG 2 (the latest version of these guidelines), so I’ll give you the highlights.
Alt Text, Subtitles, and TranscriptsWhen you upload an image to your website, you should assume that not every user can see what that image depicts. Alt text is a descriptor that screen readers use to tell users what’s happening in an image. Similarly, you’ll need to transcribe videos and audio for deaf and hard-of-hearing users. Videos with no narrative content should have a descriptive transcription (similar to alt text).
Color ContrastVisually impaired users may have difficulty distinguishing between colors. This means that if there’s not enough contrast between your text and background, some users won’t be able to make out much on your website. Fortunately, Wix’s accessibility wizard is built with WCAG 2 guidelines in mind. When you run the accessibility wizard, it’ll tell you where the color contrast needs to be improved.
Reducing MotionAnimation and scroll effects can cause discomfort to some users, particularly if they have vertigo or motion sickness. So, I know I said earlier that scroll effects like parallax scrolling are popular, but bear in mind that it is not recommended as an accessible design option. To make your website fully accessible, I recommend avoiding parallax scrolling and using as few animation and motion features as possible. If you want to add some motion, the most accessible option is to add a video that requires the user to click it to play.
DOMDocument Object Model (DOM) dictates the order in which screen readers and “tabbing” (using the tab button to navigate) will move between elements. Most website builders will automatically set the DOM ordering of your website, but it’s worth checking whether this is accurate before you hit the publish button.
Top Tip: Accessibility Apps and ServicesThe WCAG 2 is a massive document. While there are free accessibility checker tools, an accessibility app or service provides ongoing reports to ensure no new changes fall through the cracks. Our top recommendation is accessiBe, as its AI-powered app scans for accessibility issues even as you’re finalizing your design.
Optimize for Mobile UsersHalf of all Internet traffic comes from mobile users. That’s why your website must look as good on mobile devices as on your browser. However, you can’t assume every user will visit from a mobile device with the same screen size. Your website needs to be responsive (i.e., adapt to different devices automatically). Most website builders have mobile responsiveness built into their base design and templates. Some, like Wix, require you to edit the mobile version of your website separately. On the other hand, Squarespace automatically resizes content when someone uses their smartphone or tablet to visit your website. It’s not as simple if you’re going the self-hosted route. While WordPress has many responsive themes, you must be wary of custom elements. If you include more than a few, you should also add CSS media queries (code that applies design rules based on screen size) to make them work on mobile devices.
Top Tip: Hiring Web DesignersIf you’re going the self-hosted route, I recommend hiring a web designer to ensure your website is fully mobile responsive. I know it’s not the most budget-friendly option, but given how many users will visit your site on mobile devices, it’s worth the extra cost to ensure they have a great experience. That said, hiring a freelance web designer doesn’t have to eat up your budget. Check out our top 7 freelance websites in 2023 that offer great value for money.
Publish Your Website – And Keep It Updated!Once you’re happy with your design, it’s time to hit Publish. Hooray! That doesn’t mean you can tick your website off your to-do list. You must keep updating your website and listening to user feedback. Having a website is an ongoing cycle that never ends.
- “Yay! My website is finally finished, I can finally grab that cup of coffee and …“
- “Now that I think about it… I forgot to include this product/add this information/respond to that customer. Let me fix that.”
- “Ugh, my coffee’s cold now.”
- “Oh yeah, what about those pages for our new product release?”
- Back to 1, and the cycle repeats.