The earthquake that struck Haiti was (and remains) a heart-wrenching catastrophe by any measure. When the news first broke, the outpouring of aid — in mass or by individual text message — was an illustration of human compassion. But help is still needed. As a designer, I wanted to lend my talents to the cause.

Thread & Water is a group of designers working with The Water Project, a non-profit dedicated to bringing relief to communities around the world who suffer needlessly from lack of access to clean water.  On the Thread & Water site, you can purchase T-shirts and prints created by designers. I contributed a design to the site. All of the proceeds go toward providing clean drinking water for Haitians affected by the earthquake. You can follow Thread & Water on Facebook and Twitter.

It's a worthy cause. Every donation helps, as the rebuilding process is likely to take years.

Last week, Developer Josh Kemmerling wrote about his perspective on collaborating with designers. As Josh mentioned, he and I recently collaborated on the AMD Collateral Generator project and integrated a solution he proposed early into the project. Hearing each other's expertise at the conceptual phase of the project no doubt contributed to a stronger product for the client. I'm thankful that Josh felt the freedom to speak up and offer his point of view on the project.

It's a shame that in our industry designers and developers are timid to freely express ideas to each other's camps. I believe this timidity results from the overall flow of a project, which generally begins with a discovery phase, then proceeds to brainstorming, then to creative, development, testing and finally deployment. Because the creative portion occurs before the development stage, developers sometimes are not as involved in the project until comps are completed and ready for production. This usually means that the project (up until that point) has been seen by account service, creatives and possibly one developer who may have been involved at the discovery phase of the project, which hardly ever delves into the nuts and bolts of execution methods.



What I believe should occur, whether dictated by a company’s processes or not, is full-on, two-way communication between the creative(s) and developer(s) assigned to that project during the brainstorming and creative phases. While I believe strongly that a creative needs to have a firm understanding of web technologies, they must be willing to hear the expertise of their development team and facilitate in creating an environment of freely expressing ideas. 



Developers and creatives must continue to hone their skill-sets and work on building trust in each other's expertise. Beyond this, I believe it's the responsibility of both parties to have their finger on the pulse of the latest web technologies and trends. This means there might be times when a creative will have learned of a new technology, process or technique that the developer hasn't learned yet — and the creative should feel free to pass on that knowledge. In such a situation, it's imperative for the developer to be open to hearing this from a creative and not feel like the designer is stepping onto their own turf (and vice versa). 



Communication is vital and one of the most important ingredients to the success of any project, especially between a developer and a designer. A free exchange of ideas must take place at the onset of a project. We can't afford to work in silos. Our clients are counting on the best we can produce and that comes from collaboration and freedom of expression.

Here’s a presentation I saw recently about the “fold” and whether it matters as much as designers (or clients) may think. I don’t think we should abandon our concern for the fold, but I do think it doesn’t carry as much weight as it did six or seven years ago. Plus, the point made in the presentation about how users are consuming sites on a greater variety of devices (mobile for example) with different screen sizes and resolutions is important to remember and underlines the fact that the traditional notion of the fold is changing.

Obviously, it’s up to agencies to educate clients and make layout considerations per project as to how the fold comes into play. Web standards are constantly evolving, and the old adage that “everything must be visible above the fold” needs to be examined in the light of current online conventions.

 How are you handling the fold these days? 

In 2008, Springbox designed and developed a new web presence for Simpler-Webb, Austin’s premier managed IT solutions provider. In our preliminary meetings with the client, we noticed that they often utilized whiteboard illustrations to help communicate their services. As we entered the design phase of the project, we realized that a design inspired by this presentation style would be a perfect fit for their site.

Challenge
I knew there were several ways I could go about building these illustrations, but most of them were tedious or lacked the flexibility to make easy edits during the course of the project. Developing convincing organic, hand-drawn digital elements generally requires creating them on paper, then scanning them in — or using a Wacom tablet to draw them directly into the computer. Scanning wouldn’t work in this case, since making edits would be a nightmare and a Wacom tablet wasn’t available to me at the time, so another method had to be used.

Plus, lines drawn by a dry-erase marker have unique characteristics and are fairly complex in their makeup. For instance, the start of the stroke is generally darker and rounder at the point at which the marker makes contact with the board and contains the most ink. As the line is drawn there are variances in the amount of ink being dispensed, which causes banding. At the end of a stroke, the mark either feathers out or slightly doubles back on itself as the pen is lifted from the board. As you can see, I studied these lines carefully. It was important to me that these illustrations look as real as possible, since I knew they would have to be created digitally.

Solution
While processing these challenges, I wondered if I could create a set of vector brushes in Illustrator that: 1. Have the unique characteristics of a stroke made by a dry-erase marker and 2. Give me the organic, hand-drawn look I was aiming for, since I had turned down the option to build these the old-fashioned way using pen and paper. Honestly, I wasn’t sure if either of these questions would be answered with a “yes,” but it seemed plausible and worth the challenge, so I got busy.

Process
First step was to draw several different stroke styles with a dry-erase marker on a whiteboard and photograph them for reference. I then brought those images into Photoshop and applied a few adjustments so that the strokes were isolated against a solid white background. Isolating the strokes like this produced a cleaner result when using the Live Trace tool in Illustrator, which converts the image into a vector shape.

The tracing part via Live Trace was easy and only involved adjusting a few of the parameters to get a result that maintained the detail captured in the photographs. Once the trace was complete and I had a fully vector version of my dry-erase marker strokes, I was easily able to turn those into vector brushes which could then be applied to any stroke made in Illustrator.

To my immense enjoyment, the brushes worked perfectly! I was able to create the illustrations I needed for my comps with extreme efficiency and end up with scalable, fully-editable vector drawings that looked just as convincing had I actually drawn them out by hand and scanned them in. Here’s an example of the variety of drawings I developed:

Conclusion
In the end, this process sped up the project and made it easy to make edits as we prepped the final comps for production. The client loved the look of the site and these illustrations so much that they asked us to save out higher-res versions that could be printed on t-shirts — something we didn’t see coming but were able to provide given the flexibility and scalability of the vector-based drawings.