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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

If you intend to curate the content yourself, consider the following plan:

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.

Sign up for Tilda, if you don't have the account yet, it's free.

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 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.

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 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.

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 two businessmen and their smiling colleagues is an outdated concept, 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.

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.

Be sure to include a signature font as 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.

For instance, you can use Tilda Sans, Tilda’s signature typeface. It is a variable typeface with an open license, meaning all platform users can apply it to their commercial projects for free. Tilda Sans is a geometric sans serif for the web that features seven font weights and ensures faster page loading and easier use in text boxes, headings, subheadings, and the general interface.

As a rule, using a single font is enough for a website. But if you want spectacular contrast, use font pairings like serif and sans-serif fonts. Examples of successful font combinations:

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.

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.

Connect the domain. To do this, specify the URL address in the Site Settings, and on the side of the registrar used to buy this domain name, add an A-type record that points to the IP address displayed in Site Settings → Domain. Learn more about connecting your custom domain on Tilda in the Help Center article "How To Connect a Domain Name."

Don’t forget about statistics. The key metrics such as pageviews, sessions, leads, traffic sources, UTM stats, events, etc. are available on Tilda in the Site Settings → Analytics. You can find out more details in the Help Center guide "How To Track Website Statistics."

You can also connect a third-party analytics service such as Google Analytics: Sign up for the service, get the tracking ID, and paste itin 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 badge, or a preview image that will display each time the page is shared on social.

Testing. At this point, you’ve completed the website; the next thing 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.