Exploring Responsive Product
Several years ago I began to change my professional focus to digital product design, and as a professional educated in and having practiced Industrial Design I always feel like I have to clarify a certain confusing point whenever someone asks me what I do every day. I’m like, “I’m a product designer. I mean… a digital product designer. I used to be a product designer, but now I’m a product designer.” Confusing? Yes, me too. They seem like two widely different fields, and I used to wonder how and why I ever made the leap. But just lately I’ve come to peace with the fact that I’m just a well rounded designer with a ton of experience in several fields and that’s more than okay. One thing that has helped me sort this is a developing thesis (in my head until now) of how the two fields are completely connected in many beautiful ways that I’m still discovering every day.
For the purpose of explaining I’m going to focus here on responsive web design, or RWD and the concept of a collection as it pertains to Industrial Design. While reviewing collections from several areas of Industrial Design from fashion accessory to furniture, we can start to see patterns emerge and discover how each can be viewed in parallel to the concept of responsive web design. When you start to make these connections it opens one’s mind to all sorts of universal design truths. For me it provides confidence to use inspiration from one field and apply these rules to another.
Let’s start with the above now infamous illustration by Josh Clark reminding us all that Content is Like Water created to illustrate the importance of harmonious RWD. How many cubicles have you seen this taped to? I’ve always loved it for it’s simplicity of message. A quick reminder that whatever I’m designing today needs to “flow” into it’s container and look like it was effortlessly created to be exactly there.
But let’s examine the creator’s poster from a different perspective. When Clark was drawing these very basic illustrations he had a few choices to make. He could have made the glass bottle lip any size at all, but consciously or unconsciously he made it the very same height as the teapot lid, and he gave the edges the very same radius edge. Now look at the base of the teapot- same length and height of the teacup. Clark had to make a “collection” of products to illustrate his point, and he could have made them any way at all, but he made them “responsive.” The teapot lid needs to be longer, but that does not mean it has to grow in height. The cup handle needs to be smaller, but that does not mean it shrinks in thickness. These are the very same types of choices the responsive web designer makes every day as she switches content from tablet to mobile to desktop to giant basketball stadium screen. The resizing of images, illustrations and copy must be handled sensitively and thoughtfully so that it can flow “like water” and the viewer comes away with one cohesive impression of your brand, video game, news content, whatever.
“The resizing of images, illustrations, and copy must be handled sensitively and thoughtfully so that it can ‘flow like water’, and the viewer comes away with one cohesive impression of your brand, video game, news content, whatever.”
Ok, so let’s start with one of my very favorite fields- furniture design. Blue Dot is one of the very best brands for a myriad of reasons I won’t get in to here but let me just say that their bright yellow Hot Mesh stools were the perfect choice for our super classic brownstone living room in contrast with a dusty brown marble fireplace. But for a true collection for our purposes, let’s look at Field.
Field Chair and Ottoman
Photo copyright Blue Dot
So just from the chair to the ottoman there are a lot of design choices to be made that keep these pieces obviously looking like they go together while serving very different purposes. Starting with the cushion you can see that they chose to mimic the thickness and rounded corners of the backrest. They chose those because it was obviously more suitable for the application than those of the seat cushion. So they made the right decision of picking the vertical element and transitioning it to the horizontal need of the ottoman. The legs on the ottoman are very much the same as on the chair, but the angle has been adjusted to suit the function of the reclining chair and keep the lines in parallel with the bottom edge of the chair. If you can think of the chair as the “desktop” layout and the ottoman as the “tablet” you may start to see the connection with RWD. Streeeeetch the leg support wide for desktop and change the angle. Make it horizontally shorter for tablet, but in this case don’t get carried away with your design decisions. Keep the height of the leg support consistent on both pieces. Functionally it works just fine to keep consistent height and visually it makes for a cohesive collection.
Four Breakpoints illustrating cohesive RWD
Photo copyright responsivedesign.is
Let’ compare the design decisions of Blue Dot in their Field collection to those made by the designers of the 2016 Typographics design festival sitelet. You can see that the navigation (creatively placed in the center of the page) scales width over four different breakpoints. However it does not scale in height. This is a pretty common design rule for nav bars at this point as it provides visual consistency across devices. We examined a very similar set of principals in the Field chair and ottoman- widen the design element while keeping the height the same all in the name of functional and visual harmony.
Photo copyright Blue Dot
I can’t think of a more fitting example of a furniture collection that helps us relate to RWD more that Modu-licious by Blu Dot. Even the name evokes the very principals of responsive web design outlined as one that “adapts the layout to the viewing environment by using fluid, proportion-based grids…” on Wikipedia.
Responsive grid Layout
Photo copyright ZNETLIVE
Comparing the photo of the entire Modu-licious collection to this illustration of a simple responsive grid layout one can immediately draw a few basic visual connections. Looking at the two center pieces you can observe how width is treated. The height of the drawers remains the same while the width is stretched to fit the application- side table needing less content than dresser. In the above example of a responsive grid the contend that fits in to each row can not get vertically shorter- it needs that height to be legible or readable, but it can get longer or shorter horizontally, and it does to fit the device.
Now, if you think of the negative cutout or “handle” on all furniture pieces here as the button in RWD you can draw a new and deeper connection. It’s becoming the most standard choice to leave all buttons the same height across devices while the width may change. This is due to the thumb needing a certain height to easily tap on, and that height works just fine on desktop so why change it? Keep it the same for visual consistency. On the Modu-licious collection the height of all handle cutouts must keep the same height because it needs to fit the hand which Blu Dot undoubtedly worked out carefully for ease of opening and closing. Like the button, the designer can not indiscriminately choose to scale the height and width of the element. It needs to suit the function just like the button- it matters not whether it pertains to digital or physical product design. If you’re really in to this you can read more in The Design of Everyday Things by Donald Norman.
As a designer you have choices to make, and it’s this freedom within the grid, rules, whatever you want to call it that makes any job worth doing. There is really no point for me, as a designer to set out to design anything in any medium unless I get to, well, design something! So, it might be refreshing to look at some examples from the accessory industry where we can see some inventive choices being made where it comes to making a particular collection “responsive” As often, my very favorite accessory designer Anya Hindmarch comes through with some perfect examples with her Vere collection.
Photo copyright Anya Hindmarch
Pictured above are the the largest and smallest pieces from the collection, the Tote and the Small Soft Satchel. The outside flap lifts to reveal a sort of built in wallet for cards and notes. Where as the longer note pocket can fit a full bill, it seems it needs to be folded to fit in the smaller size pocket (a very common application on “mini-wallets”) on the smaller bag. However card holders must perform a function established by a more rigid set of rules (no pun intended), so those stay exactly the same. The larger can fit a passport and 3 cards, and the smaller can fit one or multiple cards in one pocket. Adding a passport holder is just one of those design decisions that make being a designer so fun! You know it can’t possible fit on the tiny bag, but what the hell? Why not include this extra classy feature for a customer who spends $1,495 on your product? Now, think of the magnetic closure as the button on desktop, tablet, and mobile. It has to do a very specific job involving ergonomics no matter the size of the bag (or viewport) so it stays exactly the same size on all products. The tassels do not necessarily need to be the same size, but they are kept the same across two very different sized pieces to bring these two (and others) together to form a cohesive collection. And it is an extremely sexy and well blended collection made cohesive by material, color, certain function, and hardware.
Looking at chairs and ottomans and wallets and just about any everyday object it’s easy to see how a good designer can take what she knows to be clear rules of functionally and use them across platforms from Industrial Design to Responsive Web Design. Whew! And that’s kind of where I’m at in my own career right now. I’ve designed, styled, carved, coded, illustrated, and written in so many mediums, and that makes me grateful to be a designer who can now recognize these universal truths of design through pure experience alone. That insight is a hard-won gift for which I’m super grateful!