How to Make a Website. Step-by-Step Guide

5 steps to create a website, main features of Tilda, useful links, and more

Nikita Obukhov
Designer, Tilda Founder and CEO
Creating a website can be pretty challenging. That is the reason we made this guide to help you accomplish this task within a short time frame and at a pocket-friendly price. We broke down all of the insights gained during 20+ years of experience in web design, compressed this knowledge, and explained how to apply it using Tilda, a platform that allows anyone to make awesome websites. Read, create, and make it happen!
1
The Idea and Structure of a Website
Main idea and purpose of a website. One page or several? The website structure and the main blocks.
Plan out the sections of the website, the main idea, and the functions. For example, a client needs a website on architectural bureau. One of the undermining elements this website should feature is the bureau’s works and contacts.

However, it’s also important to spot out what differentiates the bureau from other competitors. The bureau may focus on handling complex tasks, and share some unique features that make it stand out from other services. This is why uploading attractive and illustrative pictures won’t be enough! There is a place for content; you can share detailed descriptions of all the data, the process involved, and justification of decisions.

You don’t need to showcase all the projects on the website; center your focus on the most important ones, explain why the brand or company is regarded as experts and what distinguishes their service from the competitors. At this point, you will need to use less animation, embellishment, and other special effects.

Explain the concept of the company, and share main points that will emotionally engage and inspire website visitors.
Example
Say, you want to create a landing page for a school specialized in design. The main purpose of this page is to help both students and parents understand the concept of design and what is expected from a designer.

Problem: Students want to become designers. However, most of them are yet to understand the rudiments, the trends, and significant differences in designs.

Objective: To help students know more about web design specializations and understand which suits them best.

Idea: What if we highlight some of the major design trends like —interactive, graphic, and industrial. And host an interview with professionals in each field? Telling compelling stories is one of the best ways to attract an audience, share stories from personal work experience, and compliment it with attractive pictures. People will be interested to read it, they will see what kind of person each professional is, whether their lifestyle is inspiring or familiar.
Use the text editor and write down the content. Evaluate the volume of the text to see if it can contain in one page. However, if there is too much content, consider using a multi-page website, and add some of the information to the website menu.
A detail: don’t think of the main page as the beginning of a novel. Ensure the contact page has the same level of information as what you have on the main page. This will help in terms of navigation.
A usual text editor or a list of paper — these are the necessary materials to outline the structure.
2
Research
Competitor websites. Cross-categories. Inspiring examples.
Competitor websites. Once you get the idea and structure of the website, you can mirror a competitor’s website and find features that are suitable and will go in tandem with your concept. Evaluate the content rather than design: the menu, the features on the main page, and the text copy.

Cross-categories. If you’re working on a theatre performance website, mirror from other websites offering similar services. If you can’t find something similar, check other close categories like opera or a modern dance website. If you need to tell about a football team, you can use methods found on hockey or rugby websites.
Your competitor’s website might appear awkward in terms of styles and design. However, if they can attract the right audience, it means they have something to offer; your goal is to understand what makes all the difference.
Inspiring examples. Even professionals with years of experience still go through new websites regularly, follow trends, and get inspiration from their colleagues. However, you don’t have to be a copycat to get it all. The idea here is to stay updated with the ever-changing world of web design, spot out trends and follow them.
Listen to yourself: it’s important to be certain why exactly you like the website you’re going through. You may be fascinated by the typography, the blend of colors, and the quality of images. Look for expressive methods that you can use in your work. Check out websites from different walks of life regardless of the niche.

Below are links to some resources featuring collections of good examples.
3
A Website Prototype or Mock-up
What is a prototype? Examples of prototypes. How to draw a prototype, basic elements.
What is a prototype
Now that you get some ideas and inspiration from your competitors and know what is expected, the next phase is to express these ideas by making a sketch graphically.
A draft website or prototype is a schematic representation of the website’s blocks—your visual scenario.
This is one of the easiest things to do. Grab a piece of paper and two colored pens, a black and a contrasting color and sketch out a plan listing everything required for the project. You don’t have to go detailed at this point; focus only on the main idea, and create a script for the website you intend to build.

Imagine this as a presentation, think in screens. What do you want to say? Maybe you can display an attractive design that will call the attention of visitors and state the mission of the website at a glance.

Afterward, share a bit more about your experience, outline some advantages of working with the team and share their contacts. All these features have to be sketched out properly.
Examples of what prototypes look like
How to draw a prototype
There are basic sets of standard elements; text is shown by straight lines and a bolder headline. The picture comes in the shape of a rectangle with crossed lines and operating elements that have the shape of a pin. The headline is the strip at the top; on the lift side of the screen is a dash bolder line meant for the logo, while to the right side of the screen are five dash lines meant for the menu.
Advice: Try not to make the prototype too big. For example, on A4 paper size, the window width should be 5−6 cm. It’s better to have it summarized, skim-friendly, with room where comments can be added on the margins.
Try to use accurate drawings since it is easier to perceive. There are usually many ideas, so it best to brainstorm with your colleagues on which idea is preferable.
4
Content
Where to get the information for the website. How to write the text for the website: main points. Text style.
Information source
Before you proceed to Tilda, it’s important to ensure your content is up to standard. Remember, content is Key! First, you have to gather all the essentials you need; these include publications, presentations, brochures, and any material that will serve as a starting point.
First of all, answer the question: "Why am I good?"
If you’re working for a client, then it’s considerable to get them engaged in a brief interview. Ask them questions and try to understand the value they offer that stands them out from other competitors.

You can transcribe the record yourself or hire the service of a freelancer to do this; this won’t cause much.
Ensure all forms of texts are written in a text editor, not on the website. Avoid writing and developing design at the same time. It’s easier and faster to edit the content using a text editor — where you can easily cut, copy, and move. Its a lot easier to design the page when the text is ready.
How to Write a Text Copy
If you intend to curate the content yourself, consider the following plan:
  • Write a short text about yourself, your company. Write a summary that capaciously and clearly defines the activities you’re offering. For example, Tilda — a service that helps to create impressive websites without technical skills.

  • Expand the text a bit, explain what you do. Use simple words, and write as if you are speaking to a friend while having a cup of coffee — be comprehensible.

  • Highlight three features Including the reasons why your product or service stands out.

  • Describe advantages. Tell how your product or service solves your clients' problems, be specific.

  • Think about the headlines. Use attractive headlines, instead of short and formal ones like "News" or "Contacts" use "Stay tuned" and "Say Hello".

  • Take a review. Request reviews from your most loyal clients. Ask them to share how your service or product has impacted their lives. It usually works well.
Avoid the use of commonplace phrases such as "young, dynamic, developing team."
  • Make up three key numbers, people like numbers. However, ensure the numbers you're using are reasonable and comprehensible. Avoid abstract numbers like: serviced 1000 clients, drank 200 liters of coffee, sold over 38 000 teddy bears. A good example will be 7,5 - an average IELTS exam score among our alumnus. Three minutes - the time of the film being copied from one device to another using the app.

  • Show the team if its strong. An individual is always interesting; most audiences trust real people more than abstract companies and agencies.

  • Tell about partners or clients, if you are proud of any.

  • Specify your specialty. If your bar has a wide collection of craft beer, point it out separately.
Text style
Be informative, but don't venture into unnecessary details; be short and highlight what's important —be brief, try to share your information in a skim and friendly manner.

Employ the use of an inverted pyramid —first say what is important, followed by the details. At this point, it’s important to pair the headline and summary. The headline must attract attention and convey the essence, while the description serves to expand and complete the message. Limit the use of lead-in structures, avoid cliches and bureaucratic style.
General advice: If you're not a good writer, don't hesitate to hire the service of a copywriter; It's relatively cheap. They will ask you a couple of questions and provide you with the right content. However, it’s important to let them know you want the content concise and straight to the point.
5
Design
#madeontilda section. Selecting and adapting a template. Navigation on the website. Where to get good pictures for the website. What to do with the logo. Third-party services and special features. Selection of typefaces and font pairings. How to make your website stylish. Publishing the website. Testing.
Sign up for Tilda, if you still haven't.
Carefully check out the list of templates. Choose the right template that suits the project you’re working on. Each template is a sample of modern web design and a good example of combining blocks. Templates don’t limit your creativity: modify them to your liking, or even start from scratch.
Check out the section #madeontilda. Here you can find an inspiring selection of finest Tilda projects created by other users.
Open the Block Library and build the website based on the prototype you’ve created. Don’t edit the content in Tilda; what is more important is to create the design. If you don’t have the right images, use high-quality samples that are similar; you can replace them once the website is ready.
Video on Tilda Basics: see what the editing process feels like on Tilda
Navigation
Add a menu; if it appears good: try not to make it too big so that it doesn’t dominate the page. The menu should not exceed five items, and this has to be kept simple as possible. Feel free to make the sections bigger; keep the section titles short. Three words in one menu line are clearly not necessary: menu items should be skim-friendly.
The best number of menu items is five
The cover (first screen) deserves special attention. The fist impression will be good if there is a high-quality picture and a catchy and original headline.

Where to get good pictures. A picture speaks more than a thousand words. The use of clear and high-resolution photos will go a long way. In fact, "No photos — no website." Avoid the use of clip-art. The handshake of a businessman and smiling housewives are a thing of the past, these photos do not work. It is better to take a picture of yourself and your colleagues, than to look for ready-made pictures while googling "successful entrepreneur".

Hire a photographer or illustrator. Using popular illustrators and photographers might be too expensive; however, it’s possible to find professionals at a reasonable rate who are happy to work with you and provide you with attractive content you can use on your website.

If you need icons, you can use the built-in Tilda Icons library.
Icon library in the Content settings on Tilda
Logo. The logo must be horizontal. Using vertical logos on the website doesn’t appear attractive. As a rule of thumb, it’s ideal to embed your logo in the menu and ensure it’s cropped to occupy less space. If you don’t have a logo, you can simply write down the project’s title using a non-system font, like Proxima or Futura.

If you don’t have a logo due to some reasons, it’s no big deal since it has a little to no impression on the value of the website. Its better to think about the photos and general style.
Third-party services
Timeline of events — Timeline.knightlab
Interactive maps — Storymap.knightlab
Event ticketing software — Weemss
Interactive images — Thinglink
Feedback — Uservoice
Accepting payments online — PayPal
Online store — Ecwid or Shopify

In general, if you have a specific feature, use the block "Embed HTML code." If you need a unique element, ask developers to build it.
Font. Be sure to include a signature font; it affects communication. Remember, the content plays a very significant role, so the font defines the signature style. Each font has a character, so pick a font that suits your content.

As a rule, using a single font is enough for a website. But if you want to achieve spectacular contrast, use font pairings like serif and sans-serif fonts. Examples of successful font combinations:
The overall style and accuracy. Once you designed all the blocks, take a look at the website and grade the appearance. Align the indentations, make headlines uniform, make sure the font size remains the same and that there is enough whitespace.
Try to be austere. The simpler — the fewer mistakes, the better and more stylish your website is.
Use signature colors—that doesn’t mean you have to paint all in different colors. Instead, adhere to the rule that 90% is black & white while 10% is bright. Using one additional color is the best option. You can blend two colors, but this has to be done on a professional level.
If you have no experience in design and nothing seems to be working out, write the content, make a version of the webpage on Tilda, and hire a designer for a limited period. A professional designer will quickly arrange the webpage. This will help you cut down costs compared to what you spend when you order a website from scratch. On the flip side, if you’re a designer, feel free to consult a friend to check out the results and share an unbiased feedback.
Going live
Connect the domain. To do this, list out the address in the Site Settings, and indicate which registrar the domain was purchased from, and specify the IP address.

Don’t forget about statistics. Sign up for Google Analytics, get the code and paste it in the settings.

Think about how you intend to present the website on search engines or social media and fill in its title and description. Provide each page with a small-sized photo; once the page is shared, it will be framed properly.

Testing. At this point, you’ve successfully completed the website; the next line of action is to get reviews from visitors. Show it to your colleagues and friends, ask them to give critical comments on what they think and how the website can be improved. Share the link with your customers and ask for their opinions.
The website of your dreams starts right here
Create website
If you enjoyed the article, share it with your friends. This way you'll help others discover Tilda Education and support our project. Thank you!
See also: