Here at Green Chameleon we’re always on the lookout for new tools and methods to help us work more efficiently. Over the years we’ve spent a lot of time refining the way in which we run projects, everything from initial project specs to client presentations, bug tracking, support requests, version control, design feedback – you name it, we’ve thought about it. Ask me about our process in a years time and I’m sure you’ll get a wholly different answer but, for now it works.
Whilst our client side/management processes have evolved I feel that my own personal workflows and methods could do with a little whipping into shape, first and foremost being every designers right hand man, Photoshop. I’ve been using the software for coming up to a decade and although I’ve got a real solid understanding of it, there have been so many new versions and features released since I learnt the basics which makes me wonder if there are better ways of working. I think it really boils down to sticking to what I know to get the job done, whereas there are probably many new features to help get it done in a more efficient manner.
This leads me on to what I consider to be one of the most annoying parts of designing a website – that ‘fist through the screen’ scenario when you have a homepage signed off so move on to put together all the inner pages, only to find that for whatever reason you need to make a change to the nav bar that you’ve just included in your 10 inner page PSDs so have to go through one by one and update them. Well, behold, there is a solution and it comes in the form of ‘Smart Objects’, these are basically layers that contain nested layers or shapes in an external Photoshop or Illustrator file. In a nut shell this means you could create a ‘Navigation’ smart object and place that file into all your page designs and any time you update the smart object, the changes will be reflected across all of your pages automatically. It’s very much like the process of coding up a entire site in just HTML (yep, that used to happen) and having to go through and fix a spelling mistake in the nav bar on every single page because it is hard coded into that individual page, then learning PHP and the wonder of the ‘Include’ function!
Step By Step
So with all that in mind I thought it would be useful to share my new workflow and ‘Smart template’ set up when progressing through site’s inner page design.
- Finalise your homepage design and make sure common elements such as navigation and footer are neatly grouped
Now any time you start a new page design, duplicate it from the smart template and you can get straight into design work. Essentially each page should only actually include the layers that are unique to that individual page, everything else is handled by the smart objects. Voila!
Maybe I’m just behind the times but this has really improved my workflow and makes a heck of a difference when working on large sites with 20+ pages, all of which require in depth reviews and sign off. I’d be keen to hear how many of you have been using this already and if there are any down sides that I just haven’t come across yet? Let me know on Twitter.