Phase 3: Interface Design & Production
The Design Process
Interface Design
With the sitemap and navigation overview complete, the next phase of the project can begin: Interface Design. It is important that the digital artist/art director work closely with the producer and programmer to ensure that all design elements are standardized.
Design & Production
Once the visual direction is approved by client, the graphic “look and feel” of the site begins. Navigation, interface design and functionality are combined with the visual direction. Compression, transparency, efficient use of color and design combine to create effective Web graphics.
User Testing
During various phases in the development process, usability testing is a valuable way to make sure the navigation and functionality is intuitive. Troubleshooting early in the process saves valuable time and budget in the end. User testing can be in the form of focus groups, surveys and one-on-one usability testing.
Initial Designs
Various design directions were created and posted to the Food.com staging server for client review. These designs were presented for overall look and feed,to determine the overall perception and tone of the site.
When designing initial screens, it is important to keep optimization and HTML standards in mind, such as background images, frames and tables.
Final Designs
The final design of the site should address your audience and overall site goals. Varying modem speeds should be taken into consideration,along with target browser and platform limitations.
In this case, the final designs were selected after several rounds of design. The final look and feel directions shown here were part of a phased imple- mentation project.
Protosite Development
Image Map Click-Through
For usability testing, an image map click-through of the site using approved designed pages was created. Testing is important at this stage of development to test the actual user against assumptions.
Non-Design Oriented Protosite
Protosite development can also be putting together a non-design oriented HTML click-through of the site. Testing functionality is important at this stage to have a working model of how the site will operate, to help get a sense of what the user will experience and if the site makes sense.
Optimize!
Optimization of graphics is crucial to creating a site that downloads smoothly and quickly. After the design is approved, files are imported into fireworks and decisions on how to cut-up and optimize each element occurs. At times, with image-heavy graphics, it is more effective to use JPEG images. For the most complete optimization, GIF images are used.
Summary: Phase 3
Design process begins. Interface designs are presented and approved. HTML or image map protosite developed from approved wireframes. Art production & optimization begins.
- 2-3 Rounds of Designs Submitted for Review
- HTML/Imagemap Click-through Created from Wireframes
- Global Elements Created & Approved
- Art Optimization/Slicing Begins
- Animation or Rollover States Created
- Templates or Pages Outlined & Created as PSD Files
- Focus Groups or Usability Testing for Feedback
- Images/Stock Photos tracked for usage licensing
*Remember to refer back to the creative brief during this process.