A Step-by-Step Guide to Making a Website Design From Scratch. Part One: Figuring Out What Kind of Website You Need

Do designers need to know the basics of design or should designers be able to program? This is a controversial question, to which everyone finds his own answer. However, given the growing trend among employers for cross-functional specialists, an undoubted advantage for the programmer will be an understanding of how to use and combine graphic elements, fonts and colors on the site. And in freelancing it will also allow you to realize more complex and well-paid projects, where the quality is often evaluated not only in terms of functionality, but also in terms of creativity.

This guide consists of three parts. This one is devoted to the collection of necessary information, the next one tells about the development of visual concept of the site, and the final one contains tools for designing a layout.

“It doesn’t make sense,” said the mind.
“It’s ridiculous,” observed experience.
“It’s useless,” cut off common sense.
“Oh, that’s beautiful!” – rejoiced the customer.

Briefing


In the process of developing a Web site, design is not the first priority. First you need to do a brief with the customer and determine the main goal. This, at a minimum, will protect you from possible overdubs, when you have copied half of the site, and the customer says that this is not what he had in mind (although from the small changes still can not get away). But the design is closely intertwined with the concept of the site and its functional direction. So before you sit down to design layouts and font combinations, I recommend to learn in detail:

What does the company do?


What is the intended use of the site for business (to make sales, generate leads, inform or strengthen the brand, etc.)?
Who is the target audience for the site (what are the socio-demographic characteristics, lifestyle, what motivates and frustrates them)?
Does the customer have an understanding or vision of what functionality the site should provide?
What task or “pain” of the user is the company solving through the site?
Does it have a brand book or corporate identity?
Who does the company see as its competitors?
What sites do you like in terms of design (references)?
Of course, when the customer gives you a ready and well-designed brandbook, your task is just to deal with it (what colors, what fonts, what kind of pictures, photos and even composition). In fact, the visual style of the site has already done for you, the only thing left is to design, arrange and layout everything intelligently. But if there is no brandbook, the selection of fonts, colors, and visual style in general falls on your shoulders. Unless, of course, the customer has not attached to the TOR designer 🙂 But do not panic, divide the elephant into parts and act step by step.

The design of the site defines its purpose.


Imagine which site will solve the problem of collecting applications for the concert, and which – online sale of household goods? Clearly, the first must have a form of application, and the second – the product cards, shopping cart, filtering, online payment and so on. Such different functionality is impossible to make on one template. There are certain categories of sites that will help you not only to understand what the customer wants, but also to assess the complexity of the project and its functionality.

Below we consider the most common types of sites.

Site-card (landing page).


Single-page, which usually has a single target action – to submit an application / place a call. The easiest in technical execution, contains all sorts of descriptions, benefits, partners, etc. Here is where the designer has an opportunity to express himself – a single page should be beautiful, eye-catching and with wow-effect, so that the visitor will leave a request.

Corporate website


Created by companies to tell customers about themselves – who we are, what we do, our mission, contacts, structure, portfolio and more. May be needed For information, so that the client can read about the company if necessary;
for sales (portfolio, contacts, callback request);
as an option, for loyalty (blogging).
Already more complex than a business card. And you need, at a minimum, to think of convenient navigation in all sections. Most likely, for the design of the corporate site you will be given a guidebook or a kind of brandbook, so that you do not have to experiment with colors and fonts.

An example – the site of the installment card “Svost” includes basic information about the product, a blog, as well as the service part with a personal account, payment schedule and card replenishment.

Website showcase


An online store of a company’s products or services, but without a payment system, simply put, a catalog. Can be similar to a landing if there are only three products or services, but usually we are talking about a larger range of products, where filters, categories are already required. Ordering can only be done by phone, naming the products you like, without baskets and payment.

An example is the site of Mary Kay, which sells cosmetics online. There is a large and beautiful catalog of products, but you can only buy through a consultant.

The online store


This is a storefront with a shopping cart and the ability to pay for products online. It is more service-oriented than the previous ones (not only information). Here UX and usability play a more important role, because the user is alone with the site and solves his/her task, whereas in a storefront and on a one-page site, the purchase can be completed by the call-center specialists.

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

Site, which combines different information and service functions – mail, news, blog, vacancies, forums, etc. 

How do you think, how hard is it to do? 🙂 Even if it is not so large portal, for its creation need not only to make an elaborate in terms of UI and UX layouts, but also to have considerable technical capacity, because it is assumed that the attendance of portals is high.

Why study your competitors and what should I pay attention to?
A site doesn’t exist in a vacuum. When a user makes a decision, for example, to buy, he chooses between the customer company and its competitors. And the path between the two is just a click of a tab switch in the browser.

There are at least three reasons to look at competitors’ sites:

To understand the overall market situation. Who provides what products/services, who is big and leading, and who is small but growing fast, who is targeting what target audience and what functionality they provide. Usually it’s the customer’s job to figure it all out and pass it on to you, but it’s not always a holiday on our street.

Based on that, determine what functionality is and isn’t worth doing on your site. It is important to identify points of parity and differentiation: not to lose to your competitors (all have filtering on price, and I do not, although users need it) and yet be different from your competitors (I have filtering on color, and others do not).

Steal like an artist. Look at references to get in sync in tastes with the customer, take note of ways to implement a particular feature, and reuse existing user experience. People are already used to this cart layout on sites, it will be weird for them if you have something awesome, crafty, creative and unusual.

Mobile First or not First?


Where to start – with the Web or a mobile? Site design today often begins not with the web version, but with a mobile version. People are spending more and more time online in mobile devices, not for wide screens. Because of this, more attention should be paid to the mobile version, since users are more likely to interact with it. I recommend starting the design with the mobile version, and then adapting the elements for wider screens – so you avoid a situation where a beautiful and refined block on the wide screen is not clear how to adapt to mobile (which is more important).

But again, approach this question consciously: analyze where your target audience sits more? What conditions are more likely to be addressed by your website – sitting at home or at work with a laptop, or running between subway stations with the phone and a package on his back?