Website design is not always about successful color combinations and creative solutions. The site must fulfill its main function – to attract users and customers, as well as contain useful information for them. There are many nuances and newcomer to web development can be difficult to determine exactly where to start working on the layout, what elements and for what should be on the site. To help everyone who wants to put together a website layout on their own, we have written instructions on how to make a website design and bring the project to the customer.
Step 1: determine the purpose of the site
From the purpose depends on the type of site and its content. Websites come in commercial and non-commercial.
Non-commercial sites. The main purpose of non-commercial sites is to deliver useful information to the audience or to draw attention to some topic. These are news sites, blogs, sites of charitable and public organizations.
Commercial sites. The purpose of commercial sites – to attract customers and sell goods. Commercial sites include lendings, online stores and trading company sites.
Step 2: Determine what elements are needed on the site
When you have determined the purpose and the type of website that can solve the client’s problem, make a list of the necessary elements of the site. Depending on the type of site, these will vary.
Step 3: Analyze your competitors
Study competitors’ sites – this will help you find interesting design ideas or realize what you forgot on your site. If it’s a regional business, study competitors from the customer’s region. If the company operates nationwide, pay attention to the sites of market leaders. Even if you have already decided on the type of site and the content that should be there, you can learn a lot of other information from competitors. Perhaps your opinion will change.
Step 4: Find successful references
References are examples that you can look to when creating a website. It can be not only the sites of competitors and market leaders. Look for similar online resources abroad. Find out from the client what kind of sites he likes, ask if his company has a design or if you can create a new one. Perhaps there are some colors, fonts, content that are forbidden or, on the contrary, desirable.
Step 5: choose the tools for the job
Use Figma, Tilda or Sketch to design your layout.
Sketch and figma are almost the same in terms of functions. But Sketch is suitable only for macbooks, and in Figma you can work from any device and even in a browser. Tilda is suitable if you need to make a simple site or a lending, a large online store to run there is difficult. In addition, files from sketch can be imported into figma, and from figma – into tilde
Step 6: draw a prototype
A prototype is a mockup that helps show the layout of elements on a website page and its future functionality. Elements of the page in the prototype is convenient to mark up rectangles and sign them – what it is, what role they play.
When creating a prototype focus on the layout of elements, not on the beauty – it is created in the next step. Focus on the type of site – what elements it should contain, as well as references and competitor sites. Layout does not necessarily have to be perfect – it is more of a scheme that can be supplemented and modified
Step 7: work out the structure
Now you can work out the exact structure that you can design with color.
Create a blank canvas on which to place the elements from the layout. Work in black and white at first to focus on shapes rather than color. Transfer the elements from the layout to the site, adjust the sizes, move them to the right places. Align them. There should definitely be free space between the elements to make it easier to perceive. Work this way every page of the site.
Step 8: add colors and fonts
When most of the site is already created, it seems that the little things are left: choosing colors and fonts. As if not: these are the first things a user pays attention to. And if you have colors that are too bright or fonts that are uncomfortable to read, the user will leave the site.
Step 9: Post content
Add content: articles, videos, products, images, advertising banners. It can be supplemented and updated in the future.
If you post articles, add videos, photos, so that the information is presented visually. In this case, do not insert pictures that do not relate to the text, they will only distract attention. Sign pictures and videos so that the reader does not have to guess what is drawn there. Also, media should be in good quality so that no pixels are visible.