Website Design: A step-by-step guide from scratch

Website Design: A step-by-step guide from scratch

Do developers need to know the basics of website design, or do designers need to be able to program? This is a controversial issue, to which everyone finds an answer for himself. However, given the growing trend among employers towards the cross-functionality of specialists, a definite plus for the programmer will be an understanding of how to use and combine graphic elements, fonts, and colors on the site. 

And in freelancing, website design will allow you to implement more complex and highly paid projects, where quality is often assessed not only in terms of functionality but also in creativity.

The guide for website design consists of three parts. This one is devoted to collecting the necessary information, the next one talks about the development of the visual concept of the site, and the final one contains tools for designing the layout.

Website design defines its purpose

Imagine website design which site will solve the problem of collecting applications for a concert, and which one will sell online household goods? Obviously in the website design, the first should have an application form, and the second should have product cards, shopping cart, filtering, online payment, and so on. Such different functionality cannot be done using one template. 

There are certain categories of sites that will help you not only understand what the customer wants, but also assess the complexity of the project and its functionality. Below we will consider the most common types of sites.

Business card website (landing page)

A one-page site that usually has one target action – to submit an application/order a call. The simplest technical execution contains all sorts of descriptions, advantages, partners, etc. There is a place for a designer to roam around – a one-page should be beautiful, memorable, and with a wow-effect so that the visitor leaves the same application.

Corporate website

Created by companies to tell clients about themselves – who we are, what we do, our mission, contacts, structure, portfolio, etc. Maybe needed

  • to inform, so that the client, if necessary, can read about the company;
  • for sales (portfolio, contacts, request for a call back);
  • as an option for loyalty (blogging).

Already more complicated than a business card. And you need, at least, to think over convenient navigation through all sections. Most likely, for the design of a corporate website, you will be given guidelines or a brand book, so you don’t have to experiment with colors and fonts.

Showcase site

An online store of the company’s products or services, but without a payment system, in other words, a catalog. It may look like a landing page if there are only three products or services, but usually, we are talking about a larger assortment of products where filters and categories are already required. You can place an order only by phone, naming the products you like, without baskets and payment.

Online store

This is a showcase with a shopping cart and the ability to pay for goods online. Has a more service character than the previous ones (not only informing). Here UX and usability play a more important role since the user is left alone with the site and uses it to solve his problem, while the call center specialists can screw up the purchase on the storefront and one-page.

Here you already need to moderate your inner artist and not apply super-designer visual trends, as this will confuse and distract the user. The more complex the structure, the simpler the visual style should be.


A site that combines various information and service functions – mail, news, blog, vacancies, forums, etc. Example – Yandex, Habr, even Vkontakte can also be called a portal.

How difficult do you think is a website design? 🙂 Even if it is not such a large portal, for its creation it is necessary not only to make well-thought-out layouts from the point of view of UI and UX but also to have considerable technical capacity, because it is assumed that the traffic of the portals is high.

Another article on this blog that might interests you:

Website Design in 6 Easy Steps

Rob Prosser