Web design in 5 steps.

Create a Website requires creativity, as we can deliver good content, but if we don't present it in a way that the user likes, we can lose their attention. The process to design a web page can be as long or as short as we want. The 5 steps for web design that we present are only a guide, so you can skip, add, remove or modify steps at your convenience.  

1.- Inspiration 

As with any other creative project, be it a book, song or painting, at first we can get stuck and not know where to start. Seeing a blank screen means there are endless possibilities, and so much freedom can present itself as trouble deciding. We recommend starting by making a board, container, or anything where you can store sources of inspiration (either on Pinterest, Word, a notebook, or wherever you prefer), and segment it into things that you like. These sections do not have to be all defined from the beginning, you can start with the ones you want, for example: Color Palettes, “Layouts”, Fonts and Functions. Find pages related to the main concept of the page you are trying to create and save what you like about them (or even the entire page). You can complement with pages that collect creative resources, for example: 

• https://www.awwwards.com/ 
• https://tympanus.net/codrops/collective/ 
• https://thefwa.com/ 
• https://www.cssdesignawards.com/ 

2.- Selection 

Once you have a decent amount of resources in your dashboard / container, it's time to start selecting the ones that make the most sense for your page.  

We must be careful with how many resources we add. Not because we like something, it means that it makes sense for the project and vice versa. 

Now that the number of resources in your entire container has been reduced, you have probably acquired a notion what elements you do not  want in your page, since what is discarded indicates that its outside the concept of your page and the idea does not go there. With the resources that you have left, you can try to make combinations, or leave it for later.

3.- Layout 

At this point, we already have a good idea of how we want our page to look, so we can start doing tests to see our page more specifically and how it makes sense. To build our page, we can implement it with our content creator, code, or with a program for page layout, such as Adobe XD or  Figma. If we are already very sure of the direction our page will take, we can start with our CMS or code, but if we are still testing things, it would be more convenient to start with layout programs, since correcting and changing things will be easier and faster. If we are undecided about a particular section, we can put the duplicate section (one with each different style) to see which one feels best. 

4.- Refinement 

When our page is how we want it to be, now we have to fix any detail that we have not considered in the previous stages. Things like optimizing when photos are uploaded, cell phone view, accessibility, responsiveness, or similar things (change the code, change plugins, rearrange, etc.). We can conclude this stage until we have confidence that no user will have problems with our page (or at least very few). 

5.- Tests 

Check that everything works, that nothing breaks and that everything is understandable. It would be good to see how different users interact with the design of your page, since sometimes we believe that there are things that are obvious, when in reality they are not. You can do the tests physically and see how users react, or with analytics software for this type of thing, such as: 

• Google analytics 
• Yandex Metrica 

Throughout this simplified process of web design in 5 steps, we must take into consideration what our interests are since if we are making the website for someone else, it is vital that we are bouncing ideas at each stage with the interested parties since, in the end, the page will be theirs.

Share if you like it