Approaching the topic of designing a website layout was important because we have seen enough of developers around making the same common mistakes especially made by freshmen or new developers who just came after getting a website design training.

Within this article we are going to establish some principles that every new web developers should know or pay attention to so that they design a perfect web layout for the digital agency they are working for.


#1. Articulate Your Thoughts On Paper

This is the most common mistake that designers do that they don’t write things about what they think and the way they want things to work. They jump straight into Photoshop before giving any thought whether the client is happy with their process plan or not. It ends up into making multiple screens for review and back and forth of designs.

So the best way to deal with it is to think about the content, brainstorm it with the client and get to know what exactly are they looking for, pen it down all on the paper and design a tentative layout.


#2. Sketching A Framework And Making A Wirefram

Now really is the good time to think about the tentative wireframe and how to give a good look and feel to the project. The framework is going to be the thought process of the UI that surrounds content and helps to perform actions like navigating through content. It includes planning out the sidebars and the bottom bars.


#3. Adding A Grid To Your PSD

Before starting to design it is important to understand that before jumping into designing anything in photoshop you need a proper grid to start with. To help make your design look better, more structured, specific screen size requirements and even create responsive templates, we don’t think there should be any excuse to not using the grid.


#4. Choosing The Font Types

Exploring different types of font and colors for your website is a part of the discovery phase of the project. We recommend that you don’t use more than two type of typefaces in a website but it also depends on the client’s requirements. Choosing a font that is easy to read for blogs on website(if any) or long texts and be more playful with the titles and call to actions.


#5. Selecting Your Color Theme

While designing or planning the UI choose a set of colors or explore them with what colors will suit in the UI, background and text.

It’s important to apply those colors consistently throughout the UI depending on the functionality of the components. You can take reference of the other websites and decide the colors for UI but there shouldn’t be any restriction with graphics or illustrations and any kind of graphic should look good with the UI planned.


#6. Divide The Layout

Each page on your site needs to tell a story and should begin with a particular reason why and what the user can find on a particular page and end with what exactly can he do here. There is absolutely no need to put too many call outs on a page.

A simple layout that you can imagine for a simple purpose and start adding components that are necessary.


#7. Innovation Comes Through Challenge

Innovation does comes with the project but the designers must look forward to put in something new over every project and not work on the project just for the heck of completing it. You could challenge yourselves like using new grid patterns, adding some new component or some minor challenges like not using blend modes or using a specific color.

Depending on what you “love” to do you could add that small animation on the page, or an aesthetic touch like a gradient in a button or slight change in that background color, that’s what makes your website stand apart from competition. Make a masterpiece of a website and let each component on it compete in some design contest.


#8. Avoiding The Blurry Effect

These some of the most common things that have to be avoided in order to create a clear and correct content piece. Some things that need attention at the time of designing are including the gradients banding, blurry edges, font rendering options and strokes that merge badly with the background.

Well these are some basic examples and you should be on the lookout on such petty errors.


#9. Tidy Up Your PSDs

While there are a number of designers working on the same project which is the case many times depending on the size of the project, keeping your files clean is not a bad idea. This will make exporting files easier, speed up the design process and work with shared files with other designers.


#10. Prepare For the Worst Case Scenario

Designing a website to solve the problems that could arise like conceptual or technical issues or even with the content design, as designers we should design a website that is prepared not only for the ideal case scenario but also for the worst-case scenario. For example a user using a very small screen and checks the site when there is barely any content on it so it looks broken or untidy.

Therefore there should be some ideal amount of text on the site on each page and designers should look forward to designing it for the ideal browsers size that is popular in use with most visitors.


#11. Hear To The Developer’s Ideas

Developers could be as creative as you but it’s just that they don’t get much of a chance from the very beginning and often times only get involved when everything has been decided between the you and the client. This process is wrong in many ways and some of the best ideas can come from the developer as well so make sure to team up with them from the very beginning of the project.


#12. Presentations: Explain it in a Lehman’s Language

It is as important to make a great design as to present it. Even the greatest of the work can get thrown away if you don’t present it properly. The Idea might be totally clear to you but the other person might not be somebody who knows it all and is seeing your design for the first time.


#13. Track Down Your Design During The Development Process

If you really love what you do and care about your designs being executed nicely to the edge of every pixel of it then you should stay in touch with your old best friends- the developers during the execution of coding of the website.

That’s how you make the client happy that all the things that were decided are still in place and you feel satisfied that your job is over when everything regarding the design and the “development” is over.


A Successful Website Is Designed!

Following all these tips and maintaining the work you do in clean folders, you will be a great team worker and help in the making of a great website. The client will be happy and so will your producer.


Parmod KumarParmod is a web development veteran with a vast expertise of working on industry-leading technologies like Wordpress, JQuery, Javascript, CSS, and PHP. When he’s not busy coding the next big thing, you will find him reading about the latest and greatest in the development industry.

Keeping himself abreast and staying on top of the latest development trends is what he loves the most and his astounding work is a pure testament of that.