• 514k
  • 89
Web Design \ APR 10th 2018

Step-by-Step Guide: How to Build a Website from Scratch

A huge part of any business’s success is a strong online presence. Yet, the process of creating your own website from scratch seems quite daunting. Even though you, as a small business owner, have already endured many new beginnings in your exciting (yet often rocky) journey to bringing your vision to life, you still are looking for guidance to ease this process.

Much like building up your brand, when it comes to designing your website there are a couple of crucial elements you simply can’t overlook. In order for the road ahead (and by road, we mean creating your very own website) to be a smooth ride, we’ve narrowed down a step-by-step guide to learn how to build a website from scratch:

01. Do your homework

There are a few vital, initial steps for steering your website in the right direction from creation. Start with clearly defining its goal in order to display your business effectively. Is it solely for branding purposes? Is it a platform for selling your products or advertising your services? Is it for collecting email subscriptions? Then, make sure your site is compliant with your brand’s identity as it’s important that your website will complement every other aspect of your business – both online (social media, blog, etc.) and offline (business card, presentation docs, etc.). You should brainstorm initially as the smallest details can impact your site, from the number of pages in your menu to the localization (and even color) of your buttons.

02. Be curious

Now it’s time for some visual research. Inspiration pops up in all kinds of places. But, there’s one particular place that’s blossoming with web design creativity: the Wix templates page. Explore the hundreds of stunning templates to feed your creativity. Then, branch out to other inspiration worthy platforms like Pinterest. From there, you can start pulling together certain elements that you think will work best for your brand.

03. Prepare your best content

Now that the look of your site is taking some shape, it’s time to collect all your written and visual elements. It’s best to prepare all of the texts that you plan to use before you actually begin building your site. This may include long paragraphs, your site’s tagline for the header, and enticing text for your CTAs (calls to action). Be reassured: you can always go back in time and change the text throughout the building process. And it’s actually highly recommended to give it a quick update every now and then, as it keeps your readers excited and Google happy. Yet, it’s helpful to start with a solid base of content, both written and visual (images, videos, etc.). The rule here is simple: quality over quantity. We recommend only displaying your best and most up-to-date work. It’s always better to leave your visitors wanting more rather than overcrowding your site and causing your visitors to lose interest quickly and leave. Plus, you can’t ignore the importance of your sites loading time. People have places to be and faces to see – if your site doesn’t load quick enough, no one will stick around.

04. Define a detailed sitemap

Think of this as the blueprint of your site’s architecture. The sitemap should include all the pages you plan on creating and how they all connect to each other. Google loves seeing pages that are well linked to one another, resulting in better SEO. The best practice here is to make sure that your map is done in a way that a visitor shouldn’t have to click more than twice to move from one page to any other page of your site.

A complete (and well thought out) website will always include the following pages:

  • An inviting homepage: This is the face of your website, which means that you have to make it beautiful, yet informational. You’ll want to present all the crucial elements right from the get-go as clients need to know who you are and what you do.
  • A stunning gallery displaying your products or services: This is the center of your site where visitors can browse through your amazing offers.
  • An “About me” page: Use this page as your online business card. It’s the exact spot where you can present who you are, what you stand for, your strengths, values and any other crucial information you think your visitors should know about your team and biz.
  • A Contact section: Don’t leave your site goers astray by making them search for your contact information. Make sure to dedicate an entire page that lists your contact numbers, email, social links, a map and any other way users can get in touch with you. Likewise, it’s a good practice to add your essential contact details in the footer of your site.

For an extra punch you can also include:

  • A blog: By continuously adding regular and fresh content to your blog, not only are you establishing yourself as an expert in your field but you’re also giving your SEO efforts a well-deserved boost. Here are 5 more reasons to create a blog for your business.
  • An informative FAQ page: Save yourself and clients some time (and frustration) by including an FAQ page to provide answers to questions that naturally may come up during your visitors experience on your site.
  • Incorporate Wix Bookings: Make your life easier by allowing customers to schedule appointments or classes directly from your site. You can spend less time playing phone tag and more time growing your empire.
  • A testimonial page: The perfect place where previous, satisfied customers can sing your praises. Nothing is more impressive to a potential client or buyer than positive, unbiased reviews.

05. Design your layout

Now the fun really begins! You can either start with a blank slate or choose from one of our many breathtakingly beautiful and well-equipped templates that Wix has to offer – for free. We guarantee you’ll find something that tickles your fancy. We’ve got everything ranging from restaurant websites to online portfolios and online stores. The best part about these multi-functional templates is that they are fully customizable. From the footer to the header, you can change up everything to create a website that is truly unique and has your exact look and feel.

06. Show off your true colors

The use of color is not only for making your site look pretty. Believe it or not, color has the ability to affect and evoke specific emotions within your visitors. The choice of your palette will also play an important role in the overall performance of your site (conversion rates, time spent on page, etc.). Want to play it safe? Go for a clean white or black background. Then, limit yourself to two colors for the other elements (buttons, texts, etc.) of your site. Need some help? This guide will show you how to choose the perfect color palette for your website.

07. Pick the right fonts

What’s that thing they say? Rules are meant to be broken? Well, if that sounds a little bit like you then typography in 2018 is right up your alley. With bold, creative and wild text in sight, your website can be as free and funky as you want (providing it’s still aligned with your brand). For the ultimate guide on how to choose the best fonts for your website, check out this nifty post we created that covers everything from ranking your fonts, mixing fonts and keeping up with the trends.

08. Add the finishing design touches

Just as a gift isn’t complete without a ribbon, a website isn’t ready without a few finishing touches. These can come in the form of a hint of animations or parallax scrolling – all of which you can add to your Wix site without a single line of code. Uploading a video to your website is also an easy, yet efficient way to catch your visitors’ attention and time spent on your pages. These small, but essential additions can help link elements and add to the overall sensation that your site conveys.

09. Create order

In order for your visitors to feel comfortable and at home while browsing, it’s important to keep your site as organized as possible. Think about hierarchy here: you’ll want your most eye-catching content to be placed above the fold. Above the what? Let me explain: This is the golden area that’s visible on the screen without your visitors having to scroll. Furthermore, it’s sensible to note that most your readers are in fact only skimming your content. We live in the age of instant messaging, memes, and resulting short attention spans. In concrete terms, this means your readers are most likely to only pay attention to two places on your page: the top and the bottom. Therefore, all of your crucial information should be placed here. Use the middle space for less crucial, inspirational content, such as images or videos.

10. Show how social you are

Use the likes of Facebook and Co. to your advantage by allowing your visitors to share your content across all social media platforms. It’s easy, free and an effective way to spread your name across the World Wide Web. To ensure this, add a social bar to your site that’s highly visible and correctly linked to all of your pages. We suggest displaying the bar either in the menu, the footer, or as an anchor on the side.

11. Optimize for SEO

Now before you shy away from this seemingly complicated topic – hear us out. SEO (or Search Engine Optimization) is the practice of optimizing your site so that your pages can rank higher on search engines’ results. This means that the more exposure you get on search result pages, the more likely that prospective clients will see your work and book your services or buy your products. There are a few easy things you can do in order to improve your ranking right off the bat; make sure to choose the right domain name, add alt text to all your images and create title and descriptions for all of your pages. Luckily, Wix has developed an intuitive, comprehensive and free solution that will guide you through all these optimization steps. Introducing: Wix SEO Wiz , a.k.a. the ultimate tool to help you get found online. The magical Wiz automatically generates a personalized plan that tells you exactly what you need to do to set up your SEO. Pretty cool, right?

12. Make sure you’re mobile friendly

It’s 2018 people, by now you already know the insane amount of users who will land on your site through mobile over other devices. Likewise, you’ve got to be prepared for those folks. The biggest focus for your mobile-friendly site (which is automatically generated for you by the Wix Editor) is readability and easy navigation. By using the quick action bar, your visitors can easily search for tasks that mobile visitors are likely to be searching for, like emailing or calling your business. It also offers them shortcut links to different sections of your site, to save scrolling time and guide them through their content priorities. Can you say, ultimate browsing experience?

13. Ask for a second opinion

Everybody needs a little help from their friends. Once all the elements are in place, ask people you trust for a second opinion on your website. This way, they can proof-read the copy, go over all buttons and links to check that they work in a logical and flowing way, and also tell you if the brand’s message is clear and consistent. Finally, ensure you’ve adapted the website for mobile viewing and that it performs well on different devices – and you’re good to hit that “Publish” button!

Feeling inspired? Create your own free and stunning website! 

By Taira Sabo
Wix Blog Manager, Wix About the Wix Blog

Get The Wix Blog
Straight to Your Email

Subscribe to the WixBlog And never miss an update!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address.

Join Us! \ 

Get the latest and freshest content on creating
& marketing your Wix website.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address.