#Responsive layout psd full#

From the design point of view, it helps me a great deal when it comes to visualising the site on different screen sizes and devices, all at the same time. I’m sure that we will be continually revising and trying to improve the structure of this file, but for now, I am very happy with what we have. The comments layer group additionally includes sidebar elements of colouring legend and design notes. The layer groups that include the designs for a certain screen are always named by using the screen width and the number of layout columns. We’ve been conscious of the way we name the main layer groups, so naming conventions are in place as well. If the project requires it, we include a tablet landscape view as well. Sometimes we include four areas in the PSD file, as we want to show our clients and coders how the site looks on larger screens (e.g. Each of these areas is divided into 12 columns so that the design can be coded on bootstrap or any other modern framework. Most of the time, the PSD file accommodates three areas: desktop, tablet and mobile. The last one is very important, as we always need to make sure that every element is found easily by the person who codes the website. That includes page width, the number of columns (most of the time this is 12, but there is the occasional exception), targeted device, main colours and also a legend for layer colouring. Having a clear PSD file structure saves timeĪs our coders were always asking questions we felt could be answered simply by having a clear PSD file structure, we’ve ended up designing a sidebar that contains the main information about the design. So, based on their example, we’ve created our own PSD starter template. What a great idea! But we felt that we needed a bit more than that. The approach was quite interesting and novel, as they were showing three displays in one single file.

#Responsive layout psd full#

So here’s our challenge: How can I make sure that my idea will look good and work well on all devices? And at the same time, how can I structure my Photoshop PSD file so the coder using it has a clear view of the full design?Īn agency that I admire a lot, teehan+lax, have shared their PSD template in one of their blog posts. And thanks to the new gadgets on the market, we always make website design versions for tablets and mobiles as standard. In the past five years, we have gone from designing for 1024 pixel screens, to starting to use the 960 grid, to creating designs for wider screens. Like most website design agencies, we use Photoshop to create our mock-ups. Instead, I am going to present the way that we, the team at Moove, have developed our design process and workflow to be extremely efficient for the whole group. I don’t intend to talk about responsive design in this post, as that is a subject well debated on many other blogs.

Almost any screen you use today can display a website – that’s amazing!

Technological advances over the last few years have meant that we now design for desktops, tablets, mobiles and smart TVs. One key aspect of my workflow is the fact that I am almost always working in a team this means that making sure we communicate our ideas with others in an intelligible and clear way is crucial. As a designer, it’s important that I can do things quickly and effectively.