A version of this article originally appeared on the Percolate Blog.
In spring of 2009, I graduated from architecture school. At the time, the post-recession economy was rough and not much was happening for architects. With an interest in entrepreneurship and technology, I took a risk and decided to try working at a tech startup. Much to my surprise, I fell in love with the industry and 5 years later, I’m now a Product Designer at Percolate in NYC, a company which produces web and mobile marketing software.
Since my career pivot, I’ve noticed many interesting parallels between architecture and product design. Although the mediums are different, it’s amazing to see how many of the design principles and processes are the same. To some degree, even the tools can be applied to both design industries. In this post, I will discuss hand-drawing, and learn how we apply architecture tools to product design at Percolate.
IMPORTANCE OF HAND-DRAWING
In my first year of architecture school, I was required to produce all diagrams, sketches, and drawings by hand. Although this felt tedious at times, it taught me the value of sketching.
Architects are taught that there’s no better way to explore a design idea than with paper and a pen or pencil. Any degree of computer interaction can cause you to lose your train of thought. The time it takes to turn on your computer, open Photoshop, or even move the mouse, is enough time for the idea to get lost.
I must admit that in the beginning, sketching felt hard. I focused too much on the straightness of lines, or the proportionality of objects. I’m so thankful architecture school forced me to practice. As with many things, the goal of practicing sketching is not to become “perfect” but to become more comfortable. The more comfortable you are with sketching, the easier it is to focus on relaying the idea, rather than the act of drawing.
GET SITUATED: GRIDDED CUTTING MAT AND TRACE PAPER
Architecture school teaches you to use a set of tools for sketching and drafting buildings. You learn to begin sketching with a gridded cutting mat and trace paper. Here are some key reasons why:
Scale
There’s no way to draw buildings at 1:1 scale. As a result, architects learn to draw so that 1 inch on the drawing equals an actual distance. For example, 1 inch may equal 10 feet in real life. Drawing with semi-transparent trace paper on a 1 inch gridded mat makes it easy for architects to draw to scale.
Unlike architects, product designers have the luxury of drawing at 1:1 scale. Recognizing the size of a screen in inches, then drawing on a 1 inch cutting mat is a useful way for product designers to draw at scale early in the design process. This is important because it allows designers to more easily test design patterns and components.
Duplication
Within buildings, many design elements repeat, such as stairs which carry through from from floor-to-floor. When sketching, the semi-transparency of trace paper makes it easy for architects to layer drawings and trace common elements.
Similarly for product design, when drawing sequences of screens, it’s valuable to sketch a design, then overlay a new piece of trace paper and carry through consistent elements such as navigation.
Iteration
In addition to duplicating common elements, the semi-transparency of trace paper makes it easy to iterate. An architect might overlay trace and change one element to show an alternate design. This is equally as relevant to product design. Iterations are an important part of the sketching phase of a project to quickly explore different concepts.
Grid
Architects learn that the underlying structure of most buildings is a structural grid of columns. The grid allows for a more even distribution of weight and is an important part of what makes the building stand. The underlying grid also helps architects create organized designs. As a result, architects learn to sketch on a gridded mat so that they can easily keep the column grid in mind as they design.
Percolate product designers also follow a grid system on web and mobile. As with architecture, the grid helps the product design team create well organized designs. Additionally, it helps us stay aligned with common styles and patterns. As designs move into development, our engineers appreciate the grid and patterns because it allows them to build reusable modules. The gridded mat helps product designers integrate the grid into early stages of the design process.
Straight Lines
Architects learn that straight lines are an important part of correctly relaying a design concept. On the first day of Drawing 101 class in architecture school, I was asked to draw horizontal straight lines, down 24″ x 36″ paper, at varying degrees apart. 1 inch apart, ½ inch apart and so on. It was slightly painful, but the goal was to become comfortable drawing straight lines.
At Percolate, product designers understand that straight lines are an important part of respecting craft. Every detail counts and contributes towards the level of confidence in both a designer and their reviewers.
States
An additional benefit for product designers is that layering trace paper is also a great way to show product states such as dropdowns. Drawing the dropdown as closed on a base layer of trace, then placing an opened state on top is a useful way to explain the interaction.
CHOOSE YOUR UTENSIL: MICRONS AND PRISMAS
When drawing with trace paper and cutting mats, architects learn to sketch with Micron pens and Prismacolor (Prisma) markers. There are a couple reasons why these specific brands work so well.
Pair Nicely with Trace
Microns and Prismas dry fast and have limited bleeding on trace paper. Microns are opaque, but Prisma markers are semi-transparent, thus allowing the designer to add color or shading, while still being able to see through the paper.
Line Weights
Microns are particularly useful because they come in a variety of line weights. Similarly Prisma markers also come in two line weights. One end of the marker is thin, while the other is thick.
In architecture, we learn to use line weights to depict depth in objects. When drawing a building, thicker lines are to be used to denote a lot of depth, such as the outside of a building. Thin lines are used to denote less depth, such as the outline of a brick on a facade. To the viewer, these varied line weights help relay the picture.
Many product designers are familiar with the work Google has done on Material Design, which emphasizes particular layers, edges and shadows as metaphors for designing apps. If you’re playing with Material Design, or a bit of skeuomorphism, line weights are very useful for showing depth. Microns are also good for design annotations. A designer might use a thicker Micron for an H1 and a thinner Micron for an H3.
Shading and Color
For architects, color is most valuable for renderings such as building facades or perspectives. Black and white are good for shading plans and sections.
Percolate product designers like to sketch in grayscale with a touch of our signature orange. Prisma markers are particularly useful because they come in wide variety of colors with varying percentages of darkness. At the office, we have a number of Prismas at varying shades which we use to mark elements as foreground or background.
SHOW YOUR WORK: PAINTER’S TAPE
Last but not least, I’d like to mention painter’s tape is particularly useful when sketching with trace paper. The tape has enough stickiness to hold designs in place, and can be removed without ripping the trace paper (unlike masking tape). The tape can be used to hold trace in place on the gridded mat. It can also be used for hanging designs on the wall — a great way for teams to review the designs. When reviewing, be sure to keep extra trace and pens at hand. Team members can easily tape a new piece of trace on top of the design and add comments or iterations.
LESSON LEARNED
Since I joined the Percolate design team in January of 2014, a number of team members have adopted these tools for sketching product design. Here’s what Erin Galarza, a Senior Product Designer at Percolate said about this system:
“Trace paper sketching solved two challenges with the standard paper approach; one was having to redraw the same elements over and over. The other was that we couldn’t easily show drop down menus etc. Trace paper iterations really gave me the flexibility to better visualize my ideas.”
As a team, we’ve experienced a number of benefits: iterations are easier, thus speeding up the sketching phase of projects; straighter lines increase legibility, making it easier to read and review sketches; and improved consistency and style alignment increases familiarity and makes it easier to share designs with the team.
Melissa Mandelbaum is a Product Designer at Percolate. You can follow her on Twitter at @lissalauren.
