The graphic designer's guide to interactive design

On the other hand, interactive design can require harsher editing. Drown readers in content and they’ll be intimidated; it won’t be obvious how to interact with what’s on screen and the result will be heavy going.

“Print designers tend to throw lots of stuff on a page until it looks right,” says Alistair. “But a digital page with layered interactivity and slideshows can inherit [a large] volume of data from all those Illustrator, Photoshop and InDesign files you use.

“A smart designer needs to know the tricks for keeping digital pages lightweight and optimised.”

Web design has long been an alternative path for print designers. Many metaphors appear to correspond – we talk about web ‘pages’, for example – but, as already noted, there are major structural and technical considerations print designers must master to be a web designer and not a ‘print designer doing web design’. Notions of fixed formats and total control must be ditched: “You don’t have the luxury of being able to use any font and generate any layout you want,” says designer Tom Muller. While he adds that “modern developments are slowly closing that gap”, cutting-edge solutions remain largely inaccessible to anyone without an understanding of markup and style sheets.

This brings us to an important question: to create websites, do you need to know how to code? Designers are split. “From a client perspective, the answer is no,” says Simon Milton, founder of Exeter-based creative agency Thinkology. “Clients never complain about or praise code, but moan about typos or colours.”

But Simon and others suggest you should at least understand the basics of the technology. Knowing a little markup and CSS is useful when debugging, and helps you understand the possibilities and limitations of the medium.

Illustrator and designer Jessica Hische, based in New York, adds that basic coding knowedge also helps you work with developers: “Even when just giving art direction, communicating in ‘proper’ terms means everything. ‘Make the box shadow two pixels instead of four’ beats ‘make the shadow closer to the box’.”

The Audi iPad Magazine app was created by Portable Pixels. The firm’s Greg Plumbly says there’s no ‘right’ way for mag app UIs to work, and this provides the opportunity to innovate – but, he adds, there’s “nothing worse than having to learn how to read a magazine each time you download a new one”

As for the argument that HTML and CSS are too complex for print designers, Jessica says that page markup is “not Swahili – it’s just a way of explaining structure, and there are clear connections between CSS and print-design terminology”. Additionally, HTML5’s focus on semantics makes it more logical and intuitive than its predecessors. For newcomers using Dreamweaver, Tom suggests using the application’s split view to see how code affects design.

Not every print designer will be willing and able to embrace markup. Those who aren’t can use an application like Adobe’s new offering, Muse – which allows basic site creation using an interface that’ll be instantly familiar to InDesign users – and hang the consequences.

Muse may be fine for ‘brochure’ sites featuring generally fewer than 10 pages and less interactivity than your average blog. But for larger projects that need to scale, be adaptive and work well in terms of search engine optimisation (SEO), it’s best to team up with a developer who can advise on what functionality is achievable. “Be in contact from the start,” Matt says. “Interaction design is often more modular than you might think, and the whole page doesn’t have to be finished before the developer can make progress.”

Once the core structural elements are more or less done, developers can work on frameworks while you continue working on the look. Interaction design can, Matt says, “generally be parallelised to a greater degree than print design”, so take advantage. Also, you should help developers by clearly and appropriately labelling components and layers within Photoshop mock-ups, and providing notes about desired interactions and fallbacks for fonts.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...