As an increasing number of agencies and companies realise the value of interaction design, prototypes, wireframes and other mockups are often used to commence the graphic design process. Interaction design is critical to creating functional websites based on a dialogue between users and a website, but often the visual design starts from scratch and merely references the interaction design. In doing so, some of the value of the interaction design is lost – the visual design starts on a clean slate, using the prototype as a point of reference instead of a foundation. Not only does this result in a website design that may not be as usable and functional as it could be, but it adds time and expense to the process. The best solution? Evolve the interaction design into the visual design.
There are reasons why this doesn’t ordinarily happen. Firstly, interaction designers and visual designers use different tools. Interaction designers may use anything from paper mockups to sophisticated Visio stencils, so when it comes time to hand off to the visual designer, the interaction designs are simply unusable as a foundation for design. They can’t be imported into Photoshop or Illustrator. To a visual designer, they’re useless, save for a point of reference. How can interaction designers and visual designers collaborate? Enter Fireworks.
An extremely capable interaction design tool, Fireworks can be used to rapidly design prototypes and interactive wireframes. With resources such as the 960 grid system, interaction designers can use Fireworks to quickly create pixel-perfect black and white wireframes that give clients a thorough feel for how a design will function. Then, visual designers can either complete the visual design within Fireworks, or easily import the Fireworks layout into Photoshop to serve as the basis of the visual design. In doing so, wireframes are evolved into the final design, saving time and, importantly, ensuring the usability decisions of the interaction designer remain intact.
What? Complete a visual design within Fireworks? Sure. It’s more than capable for web and print design, and is a super fast design environment free from the overhead of Photoshop. Some of those who would agree include renowned consulting firm Cooper and the talented creative partnership Hicksdesign. Without entering the age old Fireworks vs Photoshop vs Illustrator debate, it’s suffice to say Fireworks is the weapon of choice for many a talented designer. Each to their own.
Photoshop lovers need not worry. A Fireworks layout imports beautifully into Photoshop, maintaining layers and allowing a visual designer to begin designing directly over the top of a wireframe within minutes. Visual designers can still use their preferred design tools, but can collaborate in such a way that increases efficiency and allows each respective designer shine, making the best use of their talents and ensuring both parties directly influence the final design.
Furthermore, this leads to a deeper level of collaboration. The interaction and visual designer can collaborate on a single design, with both parties making adjustments throughout the process. Using the import and export features of Fireworks and Photoshop, both designers can continue to manipulate the design and combine their talents to literally ‘co-design’ websites.
Web design is no longer about the choice of a design tool, but making the choice to collaborate. A tool is something that makes doing work easier, and we’ve all got our favourites. Now we can use our own tools and do work together. Over time, some of the trivial roles featured in web design teams will dissipate and we’ll all simply be designers, each with our own strengths. We’ll work together more, will dip in and out of projects more frequently to add our own touches, and will be a part of larger collectives. Web design will become a lot more social. After all, web design really is about understanding people, right?
{ 1 trackback }