Part Two: Deliverables for Interactive Development, Defined

No items found
| July 16, 2007


In my last post, I detailed the first four essential elements of the design process for interactive projects. Below, the second installment…

Non-Functional Comps
One of the most exciting aspects of building a website for a client is delivering initial comps. Non-functional comps are Photoshop options for the proposed page designs based on established written concept direction and thumbnails. When they’re first presented, the hope is that the comps match the client’s expectations, given the amount of time spent on the front end of the project understanding their business, needs and target audience. The purpose of the comp at this stage is to provide our clients with a visual representation of how the site will look before we ever start coding or programming. The interactive art director is responsible for coming up with several competing designs for each of the comps. It’s best to generate a lot of designs as early as possible, recognizing that the best designs aren’t usually the first ones produced, but the result of repeated experimentation. In the end, 2-3 of the best comps are formally presented to the client in browser window as a static JPG image. None of the functionalities of the website can be viewed at this time.

Design Iterations

Before the Web Developer starts coding, it is important to make sure the Interactive Art Director has the fundamentals of the web design right. Design iterations are produced once a non-functional comp has been approved. Iterative development of user interfaces involves steady refinement and tweaking of one selected design based on client feedback, user testing and other evaluation methods. Iterative design and iterative testing are important because it is better to do a lot of quick testing over many design cycles than a few big tests over less design cycles. The process of variation, followed by selection, followed by more variation is important for continuous improvement in the designs.

Interactive Mockups

Interactive mockups consist of a partially-coded site with greek text. Users can click on links, view rollovers and drop downs, and the organization of pages. This step is important to allow clients to make functional and organizational changes before sites are fully programmed. At this point, the web developer is working alongside the interactive art director to slice and code the XHTML, CSS and Flash.

Usability Testing
A cognitive walk-through of the proposed site structure is conducted as part of a comprehensive usability evaluation. This evaluation is performed in order to obtain feedback on the proposed navigation and screen structure prior to development. While this is not a required step on all projects, it offers great insight and revelations about how users will navigate proposed sites. During this stage, the interactive art director, web developer and facilitator prepare, try out, and refine test scenarios. You don’t have to spend a lot of time on usability testing. If time is an issue, examine only the parts of the design you’re least confident about. I have found that doing this early in the development process will ultimately save time and money and prevent redesign, recoding, and retesting in the next release.

Final Copy
There are four basic questions that the Web site must answer quickly on every page when the visitor is scanning the text: “What am I doing here,” “How do I do it,” “What’s in it for me,” and “Where can I go next?” While the interactive art director is not directly involved in writing the web content, it is their responsibility to understand some of the basic guidelines, such as:

• Use the inverted pyramid
• Establish trust
• Put good stuff above the fold
• Tell a story in headlines and subheads
• Be concise
• Remember brand equity
• Use topic sentences
• Use unique, targeted keywords
• Maintain categories
• Keep in mind search phrases
• Avoid self-referential link phrases such as “click here”, “this website”, etc.—links should stand alone.
• Create bullet lists
• Promote key features and benefits
• Cross-promote
• Make successive calls to action
• Stick to one idea per paragraph
• Promote an impression of credibility through outbound and cross links
• Keep content at 50% the length of the paper equivalent
• Come up with browser page titles

Many Interactive Art Directors and Web Designers still believe that the only task of design is to provide styling to the visual appearance of the web site. While it is extremely important that they have a solid grasp of graphic design fundamentals if they are responsible for how information is being visually presented online, it is more important to remember that the proper balance of the qualities of usefulness, usability and attractiveness play a central role in good design for websites and other interactive products.

Read Kim’s previous post

From the NoD Sponsor:

Sessions Online Schools of Art and Design is an accredited online graphic and web design school offering:

Web design classes and web design Certificate Programs taught by renowned design instructors.

No items found

NoD Newsletter

Enhance your inbox with our monthly newsletter.
NOD Newsletter - Divi Bar