Web Design

How to create a website from scratch | The complete guide

Yutaka Ishii

When you decide to create a website from scratch for the first time rather than rely on a ready made template, you will likely feel like there are so many things to think about that you don’t even know where to start. Just like with writers block, you cannot help but look helplessly at the white page of your new website asking yourself if this was a good idea.

But don’t worry: we’ll take you through every step of the process with this guide.

Creating a website from scratch: 5 easy steps

1. Think of your site purpose and goals

2. Get inspired

3. Plan your site layout & content

4. Craft a beautiful (yet user-friendly) website design

5. Get a domain name and launch your website


1. Think of your site purpose and goals

You cannot jump into the creation process without having thought carefully about the following points.

What is the purpose of your site?

The purpose of your site will inform which method is most appropriate to create your website from scratch. If you don’t have advanced coding skills and you don’t have the budget to hire a professional web designer & developer, the following website builders are an easy and cheap alternative.

Best for General Websites: STUDIO

studiowebsitebuilder

If you want to create an attractive and highly customized website built from scratch, STUDIO is the tool for you as you will be able to start from a blank canvas, use a gallery of thousands of free stock photos, wireframes and design template components.

Best For E-Commerce: Shopify

Shopifywebsite

The benefits of choosing an e-commerce-dedicated website builder, is that you will find a wide range of tools, apps and support to specifically help e-commerce businesses grow.

Best for Blogs : Wordpress

wordpresswebsite

You will need a CMS (Content Management System) if you want to create a site centered on content. The drawback is that you need some level of technical skills to customize your website design the way you want it.

Develop from scratch or hire a professional

Finally, you might consider coding your website from scratch or hiring a professional designer if you have polished web development skills and you have specific needs for a particularly complicated project.

Remember that one of the pros of choosing a service such as STUDIO is that won’t only have access to the design platform but hosting will be part of the package, so you won’t have to worry about it. If you decide to go independent, you will need to self-hosting. More information on hosting options here.

What is the goal of your website? Thinking about what you are trying to achieve through your website is extremely important as it will influence design & layout decision.

For example:

Getting sign ups to your online service → You will have to make sure your service selling point are well visible at the top of the page on the header banner, in the title, and that a sign up button is the focus of the page.

Increasing contact leads from your corporate page → Your firm service and reliability should be emphasized and contact forms and buttons should be positioned strategically throughout your website.

Who will visit your website and why?

You should always start thinking about your website content, style, look and feel by putting yourself in your target audience’s shoes. Remember that people tend to leave a page quickly when they cannot find the information they came for. Additionally, your writing style should be appropriate for the type of people you’re addressing.


2. Get inspired

Now that we (hopefully!) have helped you get a vague idea of what kind of website you are looking to create from scratch, it is time to get some good old inspiration before you get creating.

Remember: inspiration doesn’t mean finding a website to copy back to back, but rather to get some interesting ideas that you can apply to your own unique project.

Here are some of our favorite sources of inspiration:

LandingFolio

landingfolio-website

Awwwards

Awwwards-website

Behance

behance-website

When you find a good website that you would like to use for reference, try to notice the details and the logic behind styling and structure decisions.

For example:

The Website Layout

how are different sections organized on the page? How do menu and navigation look like?

The Design

What color palette has been used? what fonts? what images?

Call to Actions and focal points of the website

These should clearly point back to the main goal of the website. How are these emphasized with color and position throughout the page?

Bonus: Example

This is a simple and well structured service landing page that’s great for reference. You can notice how the main goal of the site is that to make visitors create an account. Just like most service landing pages, the core selling point is well visible over a nice hero banner illustration.

Bonsai Landing Page Design


3. Plan your website layout and content

Now the fun finally begins! Get a paper and pen and start sketching your website structure and sections. If you plan on having multiple pages, try also sketching how they link to each other. Once you have this on paper, it will be much quicker to translate it into a live website.

(Photo credit: picjumbo.com from Pexels)

As for the website content, most websites have a selection of the sections or pages below:

  • About us
  • Our service
  • Portfolio/Showcase/Gallery
  • Case studies/ Credentials
  • FAQ
  • Contact form

4. Create a beautiful (yet user-friendly) website design

Now that you have a realistic structure for your site, it is time to make it visually appealing, all the while always keeping in mind that your target audience and their needs are the number one priority.

When you’re using STUDIO, rather than only planning your design or creating a mockup, you can directly see what different combinations and design choices look like in practice from the editor, and later on publish your site within the same platform. Follow the How to start designing with STUDIO guide to get started.

https://studio.design/how-it-works

Whether you’re using STUDIO or not, start by laying out a wireframe or simple template as below.

Wireframe Layout on STUDIO

The next step is to think about the basic elements of design.

Color palette

The main two or three colors that you are going to use throughout your page. If you have a logo, these should ideally be consistent with it. As color makes up more than 90% of our impression of a product it makes sense to put some thought into this decision!

If you need some inspiration, these tools can help you generate some good color palette ideas.

Color Hunt

https://colorhunt.co/

HUE 360 https://hue360.herokuapp.com/

Typography

Anything related to text style, color and size. As with any other element of design, it doesn’t simply comes down to aesthetics, but rather good typography has the main goal of making your site easily readable by your users. The most important points to keep in mind here are:

 - Choose only one or maximum two fonts and keep it consistent throughout the site
 - Make sure there is enough contrast between text and background color 
 - Your font should be readable, in all sizes!

Cursive fonts are difficult to read and should be used with care. (source)

Apart from being key to readability, good typography can give your site a cool edge when well selected.

Monodigital Monodigital-website Proof of how even typography alone can make your site cool.

Cowboy biki Cowboy.bike-website

Images

The most basic principle for selecting picture for your website is to choose high quality, high resolution websites that look great on any screen size.

high-vs-low-resolution-image Choosing low resolution images will result in a pixellated effect on big screens. Source

The color palette shouldn’t apply only to background and font, but also to images. If you already have a collection of original pictures to use for your website, these can also be your starting point to set your color palette. Otherwise, browse pictures that match your color palette.

Finally, beautiful pictures can make even a simple website look gorgeous. What’s better, even if you’re not a talented photographer many services today offer professional stock photos free of charge (just remember to thank & mention the photographer!).

One of the beautiful templates available on STUDIO.

When you use STUDIO, a free stock photo gallery is right there on the editor so you won’t need to look elsewhere.

Free stock photo gallery on STUDIO

If you’re using another website builder, here’s a collection of stock photo galleries for you:


5. Get a domain name and launch your site

After you’ve got a second opinion from friends or colleagues and you’ve made sure there are no mistakes in the website copy, all links are working and so on, you’re finally ready to launch your website. Unless you go for a subdomain (for example, “yoursite.studio.design”), you will need to purchase and connect your site to an independent domain name a.k.a what will become the URL of your brand new site. When available, the easiest option is to set it to be your company or your own name, however not always are these available.

In that case, just like for any name, make sure to make it relevant, short and memorable. To check whether a domain name is available and purchase it, browse on any domain name service like GoDaddy.

https://www.godaddy.com/

Conclusion

Creating your own website from scratch independently gives you the possibility to really make what you imagined. It may be overwhelming to think of so many fine details if it's your time designing your own website, but once you tried once it will be increasingly easier. If starting from a blank canvas worries you, remember that choosing a template to customize is also an option.