PSD Engineering


A rather interesting term which I was introduced by Jacob Gube while researching on design techniques and trends, which has more meaning to the business parlance than even I had originally envisaged. So let’s construct a scenario in which you are the lead behind getting a website up and running for a business that has a general online magazine which covers all the usual material in its issues. How do you go about constructing the basic page layout? But first what are the key elements of that website. What are the essentials that the magazine wants included content wise and what are some of their strategic pages that they really need and then what are the elements where you can be flexible.



The design brief is basically about knowing what steps you are going to be taking about the implementation of the entire website, which then forwards us to “making” the entire PSD for our website. Now the PSD engineering conceptually begins from here. Because the designer makes a mental map of how he is going to start the entire process. Remember you end up converting that PSD to HTML design in many cases so you might as well carefully “engineer” your PSD so that the developer has a simpler task at his end.

The whole “you cant work with a template” myth..

I am going to be very clear about this point. In the world of creativity and design there are no hard and fast rules. PSD generation is very much in that discipline because of the nature of website design now. So yes you can use templates to edit and covert them into something you want to use for your own website. Just make sure you do understand the use of copyright and free templates before you do that which is another chunk of information. And if you are not using templates then that is also completely acceptable and by no means does it imply that your work must lag behind anyone else’s. The idea is to create the PSD which is appealing and translates the website’s purpose across to the visitor or the reader or the user impeccably.

Starting with the PSD

Now your designer or you are staring into the blank screen of Photoshop and wondering just where to possibly start in order to create that awe-inspiring layout. Again look at the requirements and see the purpose of the website. Are you going to be reaching out to the regular surfers or are you looking to appeal to a particular business niche? Take the magazine example forward so if the topics are generic then have to be captivating, yet appealing. Appeal can be catered by making the website look unique at least so that’s a good lead to go on.


You want the website to stand out from other reading sites and online magazines, so your color scheme and feel of the page is important. There is a standard in place but think of designing that interaction a little differently. Differently but you want some level of consistency still there so that your design does not appear to be out of the world.


The next aspect of appeal is associated with how easy is the content in the website to factor in the mind. Now in this example, your online magazine might have a lot of content but you do not want to overload all the information on the user from the first instance. So it’s a good idea to have a relatively simpler cleaner look on the homepage with just space for two or three featured articles. Maybe a list of the general topics on to the right and some associated comments as the user scrolls down. Take all of that in and you will find your PSD is already made significant progress.

Space for action

You will be marketing your site via social media right? From the design phase make sure your basic image itself contains a good space which can serve that purpose. So when you put in the links for Facebook or Twitter share, the space is visible and neatly stacked within your website.

The tie up

Your created website will not be just one page so make all of the pages and show the transition within each of them. But most of all be consistent in their elements and differ only because of the nature of the content on each page.

Did you notice how these guidelines were very generalized despite being specific? That is how design and PSDs work. If this phase is handled well then your developer will not have to place a lot of things on your website via HTML coding which can be messy at times. This is the entire thought behind PSD engineering; that we take the nitty gritty placing one level down so optimize quality. And this is precisely why PSD to HTML conversion is in such boom nowadays.

About the Author