/Culture/ Smarter and faster web design
09/03/2009 | Filed under Discover > Culture
You don’t need to work harder, or for longer hours, to get better results. You just need to work smarter! Craig Grannell reveals a range of tips and tricks to boost your productivity
Ever had a day when you don’t seem to have achieved anything? Ever worried you’re not going to make your deadlines? Does that project you’re working on seems like it will never end?
We all want to become faster and more efficient – but it often seems like there’s no time to make improvements to the way we work. We can laugh at the self-defeating nature of this circular logic, but that doesn’t get us any closer to a practical solution.
Yet working smarter doesn’t have to mean taking a month off to design a totally new system. In fact, it’s often the most simple changes that are the most effective.
In this feature, we’ll look at straightforward, easy to implement ways to maximise effectiveness and efficiency in all areas of your work, from initial concepts through to design and programming, and also in terms of work environments and project management.
As you’ll see, the best in the industry aren’t only those who output visually stunning or massively useful and usable projects – they’re also the ones who work most productively.
Back to basics
Given the digital age we live in, it’s hardly surprising that many of us leap straight into Photoshop and Dreamweaver upon receiving a brief. This is, to put it mildly, jumping the gun, and not the way to efficient, solid work. “Efficiency in the design process is making sure you’re working on a good idea in the first place,” counters Lateral’s Simon Crab. “Software can help streamline the working process but if the idea is shit, no amount of tools will help.”
Crab’s advice is this: get away from the computer. “Believe it or not, there was once an age when designers produced virtuoso work with only a pen and scalpel,” he reminds us. “But today’s web designers have a subconscious belief that the computer will provide an answer as long as they sit in front of it for long enough.” The problem, he reckons, is that by doing this, you envelop yourself in a cosy but limited world, devoid of the chance collisions of unplanned events that typically shape ideas and provide inspiration. Instead of sitting gaping at Photoshop, he suggests going outside, seeing exhibitions, reading books and just walking around.
Crab also notes that a back-to-basics approach is often key in figuring out if ideas are any good. “A foolproof test is verbally explaining an idea to a non-designer,” he says. “If you can’t succinctly explain a concept and get across how it will look and feel, it’s probably not a great idea.”
He advocates drawing ideas on paper prior to using a computer, as the rawness of the pencil favours simplicity, and thus better concepts. “Computers just add surface gloss and obscure clarity,” he says.
Usability expert Jakob Nielsen is also an advocate of starting with basic tools. “The most important tools for a smart designer are a pen and plenty of paper,” he argues. “This is all you need to do user testing – no fancy lab required. Just sit next to a customer as they attempt to use your website.”
Nielsen suggests starting with paper designs when courting early user feedback. “Mock up a site as a paper prototype, rather than writing code and fussing with detailed graphics in Photoshop. Get the big issues right first – find out how users approach your features, your information architecture and your content strategy, all of which are more important than the exact colour scheme.”
A lighter toolbox
When you do eventually switch on your computer, it’s important to have the best project management and collaboration tools available. Jeff Zeldman is a fan of 37Signals’ Basecamp, as is Clearleft director and usability expert Andy Budd. “We make liberal use of communication management tools like Basecamp to help keep everybody informed of decisions being made,” Budd says. “They also provide a handy audit if you need to go back and check discussions, and are much better than incomplete and multi-threaded email discussions.”
For 37signals founder Jason Fried such praise is appreciated, but he thinks there’s a good reason why his company’s products fare well in the current market – they do less than the competition. “They do a few things really well and get out of people’s way,” he claims. “And when products do a few things really well, they’re more pleasant to work with, and easier to learn and understand.”
The most effective tools are often the simplest – a hammer and nail, paper and pencil. It’s when you start to complicate things that effectiveness is hampered. “For example, with a blank piece of paper, you can do just about anything on it, but add lines and maybe it’s not such a good thing to draw on. Add grids and maybe it’s not such a good thing to write on,” Fried explains. The more additions, the less useful something becomes for most people. Something might become great in a specialised way, but for the majority, it’s less interesting.
It’s important that you ensure your tools aid you, rather than merely giving that impression. Design director for NYTimes.com Khoi Vinh has strong views about so-called ‘GTD’ (Get Things Done) applications. “Unless you really feel GTD is perfect for you, don’t bother,” he says. “It’s overrated and just about the (admittedly satisfying) pleasure of organising a system for getting things done, rather than actually getting things done.”
Often, it’s more practical and useful to apply stricter rules to existing tools, such as maintaining a zero-inbox policy for email. Andy Budd is a keen advocate of this. “I answer emails that will take under five minutes immediately, and file others into folders with titles such as ‘action’, ‘respond’, ‘waiting’ and ‘hold’,” he explains. “Then, when I’ve got a clear half-hour, I go through the lot and deal with everything in one go.” With such a system, you shouldn’t end up in that awful situation of realising you forgot to send out a quote to a potential client a week ago.
The need for speed
Once foundations have been laid, speed and efficiency are paramount. Sometimes initial planning assists. Simon Crab notes how the design process is “simplified by defining and distributing to the team all of the basic visual elements before the design comes together”, thereby enabling designers to spend time defining typographic rules and structures, colour palettes and so on, instead of making them up as they go along – a situation that typically leads to wasteful amendments further down the line.
And if you needn’t over-finish something, don’t. “Designers spend days fiddling with fonts to try and ‘make it look right’,” says Crab. “But you have to consider how ‘finished’ designs need to be for, say, a presentation.” Another time-saver is to think smaller. Creativity can be hampered by designing huge websites, says Jason Fried. “Many sites are very template-driven, and that happens when you have 100 pages – you’ve no choice but to do it that way,” he argues. “But the more pages you have, the more maintenance you’ll have to do in the future – which saps your energy – and the less unique each page will be.”
Thinking ahead is something designer Shealan Forshaw is now a firm advocate of. He admits to once being a messy designer who’d “happily work on a Photoshop mock-up with over 50 layers and not name a single one”, and whose sloppy coding practices resulted in tagged-on additions, repeated code and duplicated functionality. He’s been to that place where sites look great on the surface but are held together precariously underneath with the digital equivalent of sticky tape. “This causes huge problems if a site needs updating, or – God help you – moving to a new server,” he says. “Now I’m taking an almost obsessive-compulsive approach to site construction and it’s been amazing.”
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 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.
He notes that even if you haven’t made the conscious decision to use such a system, you may well have created one anyway. “The most common ‘homebrew’ system is saving files with different names, such as ‘my-amazing-design.html’, ‘my-amazing-design-2.html’, and so on, but this isn’t elegant, and you can’t see what’s changed between versions,” he says. “So for code management, I use Subversion, which provides version tracking and enables me to compare different versions of the same document with ease.”
Pulling the plug
A final tip for smarter web design, again in the realm of control, is knowing when to pull the plug, and this can be applied to various situations. Dominic Arkwright thinks of this in terms of creative efficiency. “I work on concurrent projects, breaking them up by working on one task until I feel like the most efficient period has passed,” he explains. “If I’m starting to bang my head against a brick wall to solve a particular problem, I move on to something more fruitful. A change is as good as a rest, and in most cases when you return to something that was stumping you the day before, a simple solution presents itself.”
For others, pulling the plug is knowing when certain technology doesn’t cut it any more. Perhaps the most controversial example was the recent decision of 37signals to drop support for Internet Explorer 6. For Jason Fried, this is all about the balance between potential loss of clients and savings in development time. “We’ll definitely be turning off access to some people, and that’s never easy, but we did the same with IE5 two years ago,” he explains. “People were upset, but they have to adjust.”
Fried notes that it’s pretty easy to design for compliant browsers without much tweaking, but to get things working in IE6 often requires compromises that make the experience worse for those with modern browsers. “We’re very comfortable with this decision,” he concludes. “But we’ll still be conscious of IE6 – it’s not like we’ll completely ignore it. If we can make something work in an hour, we’ll do it, but we’re not going to spend two or three days making something work.”
Some might argue that ditching IE6 entirely would be the most efficient course of action. But if you can still keep everyone happy, with only a minimal amount of extra effort, then that’s most definitely the epitome of working smarter.
Bookmark with:
Comments
Leannekera / 09/03/2009 / 16:51 / http://www.leanneborrowman.co.uk
Fantastic read,
I already practice and preach alot of what is already in this article and even though I have been given the freedom with job to job to cut corners I feel keeping to a known structure saves the most time.
Looking into Basecamp has really been worth wile also, I will be following up other suggestions within this article.
Jovia Web Studio / 09/03/2009 / 16:57 / http://www.joviawebstudio.com
Interesting article. I have been toying with the idea of revamping my workflow by using a CSS framework. I have also been putting off the idea of wireframes, thinking that my projects are "too small" to require them. After reading this article, I realize that a wireframe doesn't have to be elaborate to be effective. Let the size of the project determine the complexity and time involved with the wireframing. A small site might only require a quick sketch on paper before heading into Photoshop, but it still helps to focus on the basics before you plunge in to the screen.
Bill Lowden / 10/03/2009 / 14:34 / http://www.delightfulwebdesign.net
Great post! I'm always looking to improve the design and development process. I catch myself jumping straight into PS instead of taking the time to lay it out in storyboards, wireframes and sketching it up on paper.
O'Neal Ombu / 21/03/2009 / 14:10 / http://www.weblabinteractivemedia.com
Nice, i started involving my self on that since i started using CSS in building my site layout. I must say its a wonderful thing taking time to lay out stuffs on sheet before diving into the IDE.
David Crofts / 25/03/2009 / 22:59 / http://www.e-strands.com
I think photoshop is an amazing image manipulation tool and i use it every day, but when laying out a website and planning where i putting the different elements the latest version of fireworks i feel is a big step forward, i don't use it to write HTML but for those who cant code its a big step forward. the component library, to show where i am putting forms and buttons and other objects is a great time saver
Marius Dosinescu / 05/04/2009 / 11:47 / http://www.avantajnet.ro
Great article.
Marius
Rob Jenkins / 23/04/2009 / 15:14 / http://www.bigbravedog.co.uk
Excellent article. I would go one step further when dealing with code and suggest integrating the W3C recommended standards for HTML, XHTML and CSS. Not only does this help with compatibility, but will also ensure the sites we are all creating now will look as good in a few years' time.
Dano Manion / 05/05/2009 / 11:38 / http://www.danomanion.com
Great Article!
I especially like Andy Budd's easy to follow Inbox-to-Zero summary and your whole segment on finding tools that may exists to either do the job for you, or are a great starting point. In my personal experience, after learning how to leverage Drupal.org (CMS) I realized, why build a website any other way?
