Click Here!

The Three Step Process To Web Design

The Three Step Process To Web Design

2020-01-25 |

The quality of your design work will depend heavily on a structured foundation based on research and consideration.

Web design is a varied role in today's digital world, designers must work hard to keep up with trends and new design technologies whilst maintaining a creative and free mindset from the stresses of a fast paced web design environment. The key is to keeping a clear head when considering this jumbled mix of skill sets you will need to acquire and to remember the fundamental basics that make a website great. Yes keeping up with trends and technology is important; but without remembering these fundamental building blocks that good web design is built upon your design will loose integrity and crumble under the pressure of time.

Remember the process, stick to a code!

Its easy to get stressed out and rush your design work in today's fast paced design world. Imagine your boss dumps a brief on your desk for an commerce site that's GOT to be done by the end of the week, what do you do? You have absolutely no choice but to head straight into business mode. Its easy to jump straight into photoshop and start throwing around fonts and shapes to create something not quite but similar to something you did a while back. Unfortunately this mean you will end up with something that could be quite unoriginal and uninspired. That's why its so important do stick to a design process no matter that the deadline is so you can get through that creative process and inspire new ideas effectively.

Web Design Research

Research is an integral part of any design process, you must understand what you are designing before you can design it. Too many designers fail to do proper research when beginning a design project, this often leaves vital information out of the equation that can make or break your clients expectations of what they expect. By research I simply mean an understanding of what is expected of you and how you can make this the best it can be. Read articles about the industry, try to understand certain design trends in this area of expertise and talk to people about what it is important to them and how you can help them achieve this. In this respect and in terms of design, research is a massively important part of the process. Look for designs that's you think will inspire your work, look at layouts, typography design, the use of colors and images. It is also very important to try to get as much information about the copy that's going to be featured on the site, thus helping you to shape the sites structure in terms of elements sizes and importance. Once you have obtained all of this research completely along with any information required by the client, only then can you begin the next step in the process, wireframing.


Wireframing is the art of problem solving and working out the layout of and flow of a website. This is very important and can bring about a very good foundation for the designs basic feel. You can do this in a few different ways but the most popular is sketching, you can do this digitally or not, but sketching with a pen and pad can be much quicker when throwing around ideas and bouncing elements around on a page. Sketch out multiple designs, as many as you possibly can, all the while referring back to everything that you have discovered in you research. Consider every single aspect of design and what the purpose of every element is, don't just add things because you think it makes your life easier as a designer. The best wireframe designs are essentially a basic blueprint based around information learned and all possibilities considered, and just like a blueprint a wireframe will be the basis of building something strong or weak in time to come.

A down fall that designers often have is forgetting to consider while sketching is the importance of wireframing for different devices. It’s easy enough to just scale and stack your desktop design down on mobile devices, but consider if that's the ideal way your website can be displayed on smaller or wider device displays, if not then you must consider why this is and the way best to solve this. Remember designers are problem solvers, pure and simple.

Once the sketching process is complete, you can then move over to the digital world, which is probably the place most designers feel most comfortable. Once in Photoshop or Illustrator you can begin your grey wireframe. A grey wireframe is simple converting you sketch into a more refined version of itself. Layout your wireframe using blacks, whites, and greys to give the impression of where images, text and elements will be laid out on a page and pursuing a hierarchy and structure of importance and relevance. Take time to consider what lives where and more importantly why.

Finally the design

Finally we begin the actual designing of the website. Now that we have all a full understanding of where we are and what we have to create, this step becomes much easier and far more enjoyable. Use your wireframes to help create the layout of your design but don't forget to use inspiration to create a valuable user interface and experience. Consider fonts that work in the context of your companies policies and think hard about all things that will reflect on the branding on the website. There are probably things that are just as important as these pieces of the design puzzle, but as a starting point, this is a good basis for understanding the design process and how it can make or break a website in years to come. The main point is to be considerate about your reference and how you can use inspiration to create something more original and creative.