Etsy Design Family Hour

Published Apr 29 2016


Hello! Thank you Kyle and the Etsy Design Team for having me.

Excited to be here + do this talk bc I felt like I learned about myself in the process of making it. We’ll go on this journey together.

My name is Yoko, I’m currently a designer at Squarespace.

Screenshots of some of the templates and Cover Pages I designed while at Squarespace: Wells, Clay, and Snapshot

My main responsibility at Squarespace is creating new variants of our website templates, as well as templates for our Commerce platform and layouts for our single-page product, Cover Pages.

Basically, I create personas and build out websites for them in a way that a customer can see them and immediately relate to them. It’s an interesting combination of marketing, communication, and product design.

[ Placeholder fig: ss-etsy-dfh-tattly ]

Before that, I was the Design Lead at Tattly, a designy temporary tattoo shop, where I managed the Tattly brand and aesthetic across … basically everything. Product, packaging, catalogs and other printed collateral, the e-commerce site, all our satellite sites. Anything that went out into the world had to be designed.

[ Placeholder fig: ss-etsy-dfh-nyt ]

Before THAT, I had a brief internship at the New York Times, designing information graphics, and I’ve done a lot of random freelance work in between.

Story time

[ Placeholder fig: Closet ]

So, I hate shopping for myself, especially clothes. I find it to be an exhausting experience, and therefore avoid buying new clothes probably for far too long. There’s an episode of 30 Rock where someone spills something on Liz Lemon’s shirt and she says, “Dangit! I just bought this … like 5 years ago.” That’s me.

About a year and a half ago, I set aside a reasonable sum of money and told myself, “Yoko, today you are going to Uniqlo and you are going to spend all of these dollars.” As I walked out after my very uncharacteristic shopping spree, I realized that I had only bought white tops and black pants. And so I decided, “I am going to phase color out of my wardrobe.”

As I started rotating my new clothes into my daily decision-making, I realized that I was spending less time in the morning figuring out what to wear, because everything already matched. I also started organizing my clothes in order of brightness, which made putting clean laundry away a much more pleasurable experience, like an easy, mindless puzzle—makes me feel really productive. I also realized that the act of shopping, both online and off, was much less tiring of an experience, because my eyes would automatically skip over anything that had a hint of color in it. It was almost like a scavenger hunt. Shopping even became kind of fun, because … I guess buying things for yourself is actually kind of nice? Who knew?

Creative Constraints + Process

When I think of the ideal creative environment, it comes down to two things: creative constraints and process. In the case of my closet, the constraints were that the clothes can be only black, white, and grey. The processes were my morning routine, my shopping routine, and my organizing routine. When both were established and optimized, I reached a sartorial zen formerly unknown to me.

The same thing applies to my creative work as a designer. Today I want to take you all through some of my past projects—some of it a little embarrassing, some a little obsessive—and highlight how establishing those creative constraints and processes made it more fun for me to work on them.

It was as if that very uncharacteristic shopping spree had created my ideal creative environment for getting dressed in the morning and building out my wardrobe.

We’ll start with creative constraints. Journey time!

Creative Constraints: DESMA 25 (2006)

  1. Ten years ago. I was a sophomore at UCLA, and I had just gotten accepted as a major transfer to the Design Media Arts department. The very first class I took after officially becoming a design student was called DESMA 25: Letterform and Typography.

Of course, going to design school is absolutely not a prerequisite for becoming a talented design professional, but if you have been to design school, chances are you’ve taken a type class, and if you’ve taken a type class, chances are you’ve done this exercise, or some variation of it.

[ Placeholder fig: Constraints ]

In our class, it was called the Bauhaus exercise: you’re given a body of text (for us, it was the text on the cover of a book that our professor’s friend would eventually publish), and each week for a number of week (for us it was 6), you had to create a number of designs (for us it was 10). You’re given a specific typeface to use (Akzidenz Grotesk) and the specific format and dimensions (front and back book cover, plus spine).

The catch is, the first week you are only allowed to use one size and one weight of the font. The next week, you can still only use one size, but you can use two weights. The third week, you can use two sizes and two weights, and as the weeks progressed, more constraints are lifted.

[ Placeholder fig: ss-etsy-dfh-desma25 ]

I was super thankful to have started my design education with this project, where the assignment itself was to find out how to work within a set of given constraints to produce varied, interesting results. Milka, our professor, continuously encouraged us to try to expand our creative capacities to push against the limitations set by each week. It was a super valuable lesson that set the tone for the rest of my design career.

Also looking back on this project, it kind of makes sense that I ended up eliminating color from my wardrobe, because it’s pretty clear that I don’t know how to combine colors in an aesthetically pleasing way … anyway. Onto the next.

Creative Constraints: UniCamp Magazine (2009)

Fast forward a few years. I’ve just finished my fifth year at UCLA (I call it my victory lap). While I was in school, I was involved in a student group called UniCamp. UniCamp is UCLA’s student-run charity, where every summer, trained students become camp counselors for underprivileged youth in the LA area.

One of my co-counselors, Michael (camp name: Muffintop (mine was Panda)) asked me if I was interested in working on a one-time publication of a UniCamp magazine, highlighting recent UniCamp news, photos, and testimonials from previous campers and counselors.

Muffintop (we’ll just call him that from now on) was a budding journalist and photographer, so he had already created all of the written content, and had shot or sourced a ton of really good photos. No one else in my full design career since had arrived at the table so prepared with all their content.

[ Placeholder fig: Constraints ]

Here, the constraints where similar: we already had the copy and imagery. In addition to that, we knew that our budget restricted us to 24 pages, and those pages needed to be 8.5 x 11. We were familiar with the UniCamp brand and tone, having been volunteers for multiple summers, and knew that we wanted that brand to communicate somehow.

Finally, we knew that because this was going to be a magazine, it would be expected to have some amount of visual consistency throughout.

[ Placeholder fig: ss-etsy-dfh-uinicamp ]

From there, I had free reign. In fact, I was able to choose some constraints of my own, as needed for establishing that consistency across the magazine. I set up my own grid, selected my own fonts and type hierarchy, and selected some secondary colors (probably thanks to Kuler). All that was left was the layout.

This was probably one of the most fun projects I have ever worked on. I remember thinking back to my DESMA25 class as I was constantly pushing and pulling at the limitations I had set for myself. Every page was like a puzzle—you move something here, which changes another thing over there. I might look back on some of these spreads and cringe a little bit (and I do), but it’s completely overshadowed by the joy I remember in trying to solve the puzzle.

Creative Constraints: At the Same Damn Time

A few years later. I’ve moved back to New York (born and raised, by the way), and completely taken away by the renaissance of ~hand-lettering~. I mention to my LA-based internet friend Ken, who is also a designer, that I wanted to get better at lettering freehand. He said that he also wanted to hone his type art skills.

We decide to start a daily project together, where each day one of us would pick a song (R&B or hip-hop, because that’s what we like), and we would both illustrate the title or a lyric from that song. Ken suggested we name it after the critically acclaimed sophomore single “Same Damn Time,” by up-and-coming artist, and temporary husband to Ciara, Future.

[ Placeholder fig: Constraints ]

A song is picked each day, though we’re free to pick whatever lyrics or words in that song to illustrate. Because we were working on the project simultaneously but from separate time zones, we decide on some constraints beforehand to establish visual consistency: limiting the colors to black, white, and grey (sensing a pattern here), and because we had planned to post our dailies on Tumblr, we limited the width to 1000px.

Finally, though it wasn’t necessarily a constraint, the rule of posting something every day lead to mental gear shifting where you had to be focused on output.

[ Placeholder fig: ss-etsy-dfh-atsdt ]

Having a project require daily output was really interesting: We didn’t have a lot of time to be second-guessing what we were doing, so the other constraints became really helpful starting points. The daily output also was helpful in noticing patterns (or “phases” might be a better word) in my visual direction—I would notice that I was falling back on the same directions, and I would recalibrate and start over the following day.

This grid is more or less in chronological order, and you can see that I oscillate between periods of light and dark backgrounds. Also had a brief phase where I just overlaid black brush type on a greyscale photo …

This is just my stuff by the way—Ken has as many dailies, too. We made the project last for about five or six months. Just feels good to have a series of images from a project, doesn’t it? Plus, they’re all monochrome and the same width, so they great in a masonry grid!

[ Placeholder fig: Glass of water ]

Creative constraints can be pretty much anything—the main purpose it serves for me is that I know the outer bounds of the realm of possibility in a project. It’s also helpful for leveling the expectations the designer and the audience might have for each other.

That doesn’t mean that I basically make a box for myself and stay in there—but it does mean that when I do step out, I’m very conscious and deliberate about it. And especially in design (as opposed to say, art), that sort of deliberation is essential—if an audience can’t understand what you’re trying to do, the design is not successful. If you do step outside of that box, you want to have your audience knowingly step outside of the box with you.

This is a bit of an extreme example but I wanted to include this illustration of the dichotomy of having established constraints versus the mess of anarchy. Sad faces for emphasis.

So that’s creative constraints. The other element to my ideal creative environment is established processes. These are standard operating procedures that, usually through trial and error, I’ve optimized to help me complete the usually more mundane tasks. Thankfully, the process of optimization itself is really fun for me, so it’s a thing that I love to nerd out on, and I hope you’ll also at least think it’s … useful? Or maybe this is the part of my talk where you figure out that I’m actually a crazy person.

Process: Production Design

Around the same time ATSDT is happening, Tattly is in full swing during the 9-to-5 (more like 10-to-6, startup life). We’re releasing new tattoo designs every week and have started working with clients to make custom Tattlys.

As the only designer at the company (at the time), the task of creating production-ready tattoos largely fell on my plate. So I made a process for it.

[ Placeholder fig: Layered image of Tattly print file ]

The anaaatomy of a production-ready Tattly file!

The design consists of four layer groups:

[ Placeholder fig: Screenshot of .ai of all Tattly backs ]

So I made this .ai file, with artboards for every possible Tattly size. If we didn’t already have a Tattly back laid out for a specific dimension, we would fill it as the need arose, and then just save the master file for future use. I guess we still haven’t printed every possible size and orientation under the sun …

Anyway, this is a 1.5 x 2, so you just copy that …

[ Placeholder fig: ]

And paste it in as a layer. Ready to ship!

Process: Consuming, Curating, Sharing Content

[ Placeholder fig: Twitter screenshot ]

This is a more recent personal project: I made a new Twitter account, @yokogoesplorin, which is a dumping hole for all of the cool stuff I see on the internet, with a little bit of short commentary. It’s basically Kottke, except it’s on Twitter and it makes me no money.

All of the blogs that I keep up with are loaded into an app called NetNewsWire. Every morning, I’ll spend about an hour going through the latest posts, and expand the ones that I think are interested out into a tabbed browser.

From there, I’ll go through each of the tabs, if it’s interesting I’ll bookmark it, interesting but a long read, it’ll go to Pocket, or actually not that interesting in which case I just close it.

Then, when I have time in the evening, I’ll reopen the bookmarks and spend a little more time reading them. If they are interesting, I’ll write a tweet about them and schedule it in Tweetdeck. If not, they get closed.

I’ll catch up on my Pocket reads on my commute, and if I like something enough to share it, I’ll “favorite” it, which will trigger an IFTTT that will post the title and the link with the hashtag #viapocket. I also use Pocket for saving articles from my NYT Now app.

[ Placeholder fig: the web of services I used to replace Google Reader ]

This is what Google Reader used to do. One product gone and I replaced it with seven services.

After it got shut down in 2012, I’m pretty sure I read ZERO news until the Times made the NYT Now app in 2014.

Process: Task Management

Finally, how I handle task management. Actually my secret to task management is just a notebook that I keep at work.

[ Placeholder fig: Kumamon notebook ]

Every day at the end of the day, I’ll write an organized list of the things I need to be thinking about or working on the next day. When I come in the next day, I’ll know exactly what my to-dos are for the day, and I’ll work on them throughout the day, adding more to-dos as I go along. End of day, repeat.

This has been IMMENSELY helpful not just with keep track of all the little things I need to be working on at work, but also with letting go of that work when I leave the office. I used to leave work on Friday, and spend my weekend brainspace on thinking about what I need to pick back up on Monday.

I always write the date of the to-dos on the top right of the right page, and write my list starting at the top of the right page. The rest of the page is for notes to be made on that day as well.

[ Placeholder fig: notebook gif ]

I feel like I’ve gone through so many task management apps, and nothing really seems to stick. The physicality of writing out the task makes it real, similar to how physically crossing it off really makes it feel like it’s done. Sometimes it’s just the most basic stuff that works.

[ Placeholder fig: Quote screen ]

If I’m starting a new project that requires establishing a new process, it really helps for me to look ahead before starting—I don’t need the design solution right away, but I try to get an idea of how I might go about finding it. In that sense, the creative constraints are extremely helpful in not just setting a direction, but also in setting some baseline expectations for how to execute.

I’m the sort of person who gets cerebral way too fast and can’t “start from a blank slate.” Without the constraints and processes in place, I don’t know what I’m doing, and according to my boyfriend Kevin (who’s here today), “You work a lot harder when you don’t know what you’re doing.” That’s a quote that he got from his friend Devin, who apparently heard it from another guy named Anurag. Not sure where he heard it from. I Googled it and couldn’t find any relevant results.

Anyway, I don’t mind working hard—in fact, I really like it—but I also need to be working smart at the same time. I am the most fulfilled when, once the constraints and processes are in place, my brain is working only on solving problems.

Which brings me to this question—

“What’s my passion?”

What’s my passion? I get this question from my manager (and his manager) whenever I wrap a project and am looking for something new.

[ Placeholder fig: What’s my passion??? quote ]

I’ve realized that what fulfills me on a day-to-day basis (and even on a wider, more cosmic basis) is less about the project I’m working on, and more about how I’m actually getting it done. I imagine this would present a quandary to my managers, because it’s not really an answer that would immediately point them to say, “Okay great, you’re passionate about grids, let’s put you on the next project involving new template layouts.”

When we think of idols of our industry, we think of people like Steve Jobs and Elon Musk, visionaries. I’m less a visionary and more of a problem solver, and I find fulfillment in cultivating an environment for finding solutions. It’s not that sexy, but that’s fine and that’s also kind of the point. There’s a place in this industry for Steve Jobs and Elon Musk, and there’s a place for people like me, solving problems at my closet every morning.

[ Placeholder fig: thanks for having meee ]