The peace bridge: Tools and practices to help designers and developers work together

Part I. Tools

Depending on their specific roles, designers and developers often have different and sometimes polarizing viewpoints. The differences—or gap—in the way each group thinks and works can sometimes lead to problems either in limiting a designer’s creative form—“you can’t do that”—or driving a developer insane while creating the functions—“who designed this!?” These differences also account for designers’ and developers’ infamous reputation for not getting along (except at PRI of course!). The primary reasons for this often originates from ineffective communication and not fully understanding what the other does, or how they do it.

Fortunately, the gap can be bridged, and the talents of both designer and developer can shine through. Well-thought-out procedures, determining the most effective use of software, and focusing on best practices can all result in increased productivity, and turn those frowns upside down!

The first in our three-part series on the “peace bridge,” focuses on using effective software and technology. The key here is that less is more, and there are a few great tools that allow designers and/or developers to do more in less time:

Balsamiq Mockups Rapid Wireframing Tool

This tool is great for designers to generate and convey their ideas to developers quickly and effectively. It allows designers to quickly mock-up prototypes that look like simple sketches that not only allow clients to make important decisions without distraction from aesthetics, but also gives developers a chance to chime in on basic logistics that designers need to be aware of before creating a more complete and comprehensive design.

960 Grid System

This simple template package provides designers with guided templates for many of the most commonly used design programs, including Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, and Basamiq mockups, and comes with pre-made Cascading Style Sheets (CSS) and sketch paper for developers. The package offers designers and developers some common ground for designing within a set 960 pixel width (the current standard width for designing websites) and developing markup and CSS for web pages quickly and efficiently.

Firebug & IE Developer Tools

Firebug and IE Developer Tools are great for debugging and editing markup and CSS on-the-fly within web pages. In addition, I find it also gives designers a glimpse into the developer’s logic, regardless of whether or not they know the programming language. The ability to get real-time results of the edited code allows developers to explain what does and doesn’t work visually as well as verbally.

In part two, we will cover communication, simple procedures, and best practices that will help both in design and development.

Posted by Kevin Williams | Design, Programming and Coding, Best Practices, Communications | Comments 0 |
Connect with us on LinkedIn Follow us on Twitter Add us on Facebook Subscribe to our RSS feed

Subscribe to email updates