When we start a project, we always like to create a website flat design before developing and coding the site.

Below we have included a flat design for one of our clients;. However, the template isn’t a finished build, it is easy to understand how the final website will look.

Each flat design comes with its own “live link” that will update as changes are made to the design, so new revisions don’t have to be sent across whenever an element is adjusted. This saves hassle for all parties involved. The latest revision will always be present on the link, so there is no concern about having an outdated flat design.

This link can be viewed at any time, and though it isn’t the actual live site, it may have some interactive elements that will replicate how the site will function when it is developed. Interactive features will give you a better idea of how each aspect of the website will work with one another to provide you with a better idea of the User Experience and User Interactions.

As stated above, this is not a live and developed site, so elements such as links and forms will not be interactive. The whole website will not be designed, just the key pages.

What is a Flat Design Used For?

The reason why we create a flat design first is to allow you, the client, to see what the finished result of your website will look like before it has even started to be developed. This allows for changes and revamps to be made quickly and easily without deleting or modifying code.

With a flat design, the structure of the website is visually accessible without a significant time investment. This means the design can quickly be approved without waiting for something to be coded first, decreasing development time as a whole.

It also allows us to visualise what we are building as we code the site, saving us time from going back and forth between elements to adapt them per new section we create. We have found that when we create a flat design before coding, the final result flows more fluidly and gives a better User Experience.

The flat design also dictates the flow of the website. It effectively highlights what pages should link with one another and how to direct the user to the website goal in the fewest clicks (be it product checkouts, information pages or otherwise).

Mobile Layouts

Over 50% of website traffic has been reported to come from mobile devices; as such, it is as important to design for mobile as it is for desktop. This is why we do just that!

In our designs, we will include the desktop layouts for the key pages of your website (usually the home, inner, shop and product pages) and the mobile variations that come with it. This will make it easy to visualise how the website will look when shrunk down to mobile device size and how each element will fold into one another to remain responsive.

A mobile layout can be easily identified by the thinner nature of the page, with each element being stacked one above another rather than on the same row as per the desktop designs. An example of this has been included below.

How to Comment

A feature of the software we use to create flat designs is a helpful tool that allows for pinpointing an exact location on the design and adding a comment on it. This is especially useful for features that require modification or removal that you, as the client, can easily highlight and request.

It is a simple process to comment on the flat designs; all you need to do is in the top right section where the “make a comment” text box lies, click the pin icon, then select the element on the page in which you wish you need to make a comment.

Once the pin has been placed, type the comment into the comment box and press submit, this will add the comment to the list on the right sidebar of the design. Clicking any of the comments on the sidebar will take you to the exact pin for easy navigation.

If you’re looking for a new site, you’ve come to the right place! Call our Web Design team on 01925 563 960 or use our contact form here.