Tips and tricks to turn you into a faster, smarter web designer

Be prepared

Forshaw says his new "Zen-like process" incorporates OmniGraffle for navigation wireframes, while Photoshop documents now begin with a guide template. "When designing each page, I align content to this grid, which results in a more coherent layout throughout the site," he explains. "My Photoshop files used to be a nest of layers, but now they're named and grouped into relevant folders." The point is that this small amount of extra preparation pays dividends in the long run, saving effort and creating more time for design.

For most designers and developers, though, coding is the area where work could be considerably smarter. Too many regularly code similar components for every new site, or resolutely stay away from freely available libraries, despite them providing everything required for a project.

"I always re-use tried and tested modules for my work," says Bruce Lawson, web evangelist for Opera. "For example, I base many small sites on an amended version of the default WordPress install. The default theme has clean, valid code, and is structured in a manner that makes it easy to style for the customer. And there are modules for WordPress than can accomplish almost any task, which means I spend less time reinventing the wheel."

Other designers also work with off-the-shelf components. When developing idiomag.com, Edward Barrow utilised CakePHP, a rapid development framework for PHP, enabling his team to rapidly fashion the site.

"These days, there's no point starting a large-scale project without using a framework like CakePHP," he reasons. "Why spend hours on the basics when a framework enables you to get down to what really matters?" Forshaw agrees, noting that when working on Flash, he always uses SWFObject, and that the bulk of his "sexy JavaScript/Ajax stuff" is achieved using jQuery. He likens using a prebuilt library to "getting an expert programmer to work on your project for free".

Other designers are less keen on using prebuilt components, but nonetheless recommend not starting from scratch. Andy Budd notes how his company has developed its own in-house library for markup, CSS and JavaScript, which is used on all wireframing and development work. Because it's based on the skills and working styles of the company's team, its quality is known.

Digital Outlook's senior art director Eugene Reisch is in a similar space regarding the company's Flash output: "We build bespoke games, widgets and microsites that don't lend themselves to templates, but we have libraries for code and components that we can dip into and reskin. We've also got a sound effects and vector drawing library for everyday things that's constantly growing – it's a big time-saver."

Clearly, when working with somewhat standardised components, you save time and the client saves money. Web developer Dominic Arkwright (domi.co.uk) notes how working in this manner enables new projects to get online more quickly, and advocates a 'release early, release often' approach. "Sometimes clients need convincing that it's a good idea to launch with few features, but so often the desire to put everything but the kitchen sink in for the first release means there is no first release," he says.

In control

Organisation shouldn't stop with planning and creation, however – for smarter working, it must also extend to source control.

With designers typically working on multiple iterations of websites, it pays to not just sit there with one group of files, regularly overwriting what went before, because you may later need to return to a previous version. "In fact, the simplest and smartest investment you can make for any project is to use some sort of version control system," says Aral Balkan, web developer and conference organiser (aralbalkan.com).