Top 10 Steps to Follow in the Design of a Web

When we start, we often wonder what steps we should follow in web design. Sometimes you don’t even know what is the first thing to learn, whether HTML5 and CSS or Photoshop, when in itself you can learn both at the same time. This post is a practical guide that shows the steps to follow in the design of a web. This is the ideal, the reference guide, to put it in some way, because many times in practice one skips some of the steps. However, if we want to create professional websites, it is worthwhile to have them present and to appreciate the importance of each one of them before launching us to the adventure.

In the course of web design from scratch we follow these steps when designing a design. I leave here the video of one of the first lessons with the 10 steps of web design, if you use guidance:

The 10 steps to follow in web design
Step 1: Set goals

Not long ago I found a friend who told me that I had a client who would do very well to have a website. When I asked my friend what were the objectives of the web, I answered without blinking a bit to sell more, because the future was on the Internet and the florist of this friend was losing customers and if that happened to me some pictures and I made a web. Stories like this, oddly enough, are the order of the day in Latin countries where it is still believed that with four photos and three brushstrokes we have a website that works. My advice: If you want a good portfolio, as well as saving money on aspirin, define the objectives very well with the client, or refrain from taking a project in which there are no clear objectives.

The objectives of an online shop are not the same as that of a law firm or an architect’s studio. It is necessary to define very clear what and for whom, how it will come later. Who is our target? Where in the world are you located? What do you need? What do you expect to find? Without a clear definition of objectives, the website will be a failure, do me a case and do not get involved in lost projects. And if you do, have ethics and make it clear to the customer that this is not the best option or far and do not include that work in your portfolio.

The objectives have to be defined at both the global and the page level. That is, each page of the website has to have a single objective. Examples: Call us, subscribe to the newsletter, build trust, etc.

Step 2: Define Content

With the passage of time I realized that it is a mistake to create the design first and then adapt the contents to it. The process must be the reverse, we must first know, not roughly, the contents we want to publish, and then adapt the design to the contents. And even more nowadays with the web design responsive. Nor is it necessary to have the texts and images in advance, much less, just have a clear idea of what to publish, in order to get a better idea of the specific needs of the client.

Step 3: Draw a Sketch

Paper? UFF, some people get allergies. But if it is true that it is easier to think about paper than directly on wireframing tools and that in meetings with the customer it can be very useful to use a notepad. In the case of responsive web design remember that you will have to take into account several views, both for smartphones and large screens.

Step 4: Use a Wireframing tool

In the market there are a lot of tools of wireframing, here you have a post with a compilation of wireframes to help you in your work of Web designer. These tools what they do basically is something similar to the manual sketch, from here you could open a discussion on whether the previous step of drawing the sketch by hand is necessary or not, but deep down I think it is really easier to create on paper than on Screen, though maybe that’s because I’m from the generation of dinosaurs:-)

Step 5: Make the design in Photoshop

With responsive web design, we finished the days when we were just doing a design. Now we need responsive grids that allow us to adapt the design to the screen. This requires more time, but it will ensure a better user experience. It is advisable to start from minor to major, unlike what was done so far in that it was splitting the desktop version to create the mobile.

Make sure you create a design that provides a good user experience and that follows the requirements of usability and accessibility. Because if your design is fantastic but no one finds things, be sure that the web will be a failure. Do not deepen on these issues because you can write whole books, but keep this in mind when you do the layout in Photoshop.

Step 6: Create the HTML

Yes, yes, create the HTML without the CSS, because you will be sure to create a semantic Web code and you can separate the design from the content. Believe me, in the long run you’ll appreciate it. Today you should already layout with HTML5, because it is much more semantic and versatile than the traditional, also that the W3C has stopped supporting other versions of HTML.

Step 7: Create the CSS

Once we have made the structure of the document with HTML, then we started to shape it with the CSS. My advice is that you design for modern browsers and that you use a different CSS for other prehistoric ones or that do not follow the standards like IE7. So, look to implement everything you can with CSS3 instead of cropped Photoshop images, as this will create a much cleaner and more efficient code and reduce the bandwidth consumption on mobile devices that navigate with 3g.

Step 8: Browser compatibility

This is the point that I personally least like. You have a design that looks fantastic in Chrome and Firefox and you open IE and you serve the mess. Or you try it on the vertical and great iPad, but you spin it and again the disaster. This is the phase that requires more patience, because it implies making the web look good in all browsers, with the added difficulty of mobile devices a few years ago did not need to take into account.

Step 9: Verify that the valid code

At the time a debate was opened up to what extent it is important for the code to validate if the Web looks good. In my opinion, we must try to make a code as clean as possible as well as possible to validate. And I say this because when you put the Facebook Likebox like the one that comes out in this web, you will see that your Web stops validating, because Facebook goes for free in themes of standards. So I am of the opinion of weighing the pros and cons of using elements that do not validate, and in the case of the Likebox the pros are clearly superior to the cons, as many followers of Facebook come to me thanks to this element. From here, I think we have to strive as much as possible to create a code that validates and fix basic errors that are easy to solve, because if a Web page has 10 errors there is a pass, but if you have 100 no longer.

Step 10: Upload the Web to the server

I have not said it before, but I hope that all this work you have done in local, because otherwise the potential users and customers will have taken a bad impression. Once you have checked that everything works as expected, the time has come to upload the Web to the server. Do not be frightened if something does not work, sometimes there are permissions that are not activated on the server. I used to upload the new Web pages on Saturday night, because people are partying and will seldom notice if there has been any mistake.


We have seen the 10 steps to follow in the design of a website. We could have deepened more, but the idea was to give an overview. From here I would like to open the debate on what are the steps you follow in the design of a new website and whether or not you agree with what is proposed here.

If you want to learn web design, I recommend the Web Design course from scratch with HTML5 and CSS3 as well as the responsive web design course, with which you will learn everything you need to know about web design at professional level.

I encourage you to share the article and leave a comment.

A hug!

Add a Comment

Your email address will not be published. Required fields are marked *