Jeff Zych's Internet NookJeff is a product design leader, coder, writer, and letterer. He writes about design, books, technology, creativity, and any other topics that interest him.http://jlzych.com/2023-12-31T21:33:00ZJeff Zych2023 Reading Listhttp://jlzych.com/2023/12/31/2023-reading-list/2023-12-31T21:33:00Z2023-12-31T21:33:00ZJeff Zych<p>I read 30 books in 2023, which is actually 5 more than <a href="https://jlzych.com/2023/01/02/2022-reading-list/">2022</a> and 6 more than <a href="https://jlzych.com/2022/01/03/2021-reading-list/">2021</a>. Like the preceding years, this year felt lower than the previous years but was actually higher (very much buoyed by visual books like <em>Practical UI</em> and <em>Arcade Game Typography</em>).</p>
<p>I only read 6 fiction books this year, which I thought was surprisingly low until I checked last year and it was 3 times higher, hah. My most-read category is art/design/creativity (11), which is both because I find those most interesting and gobble them up, and also because many of them are visual and low in words. I did better this year at reading books by women (8 — same as last year) and people of color (8).</p>
<h2 id="faves">Faves</h2>
<ul>
<li><em>Tomorrow, and Tomorrow, and Tomorrow</em> by Gabrielle Zevin: This book was written about a lot in last year’s reading lists, but I didn’t get to it until 2023 and it did not disappoint. It’s the story of a creative partnership and friendship and how that changes and evolves over decades. And it’s all centered around video games (especially 80s and 90s “retro” games), which hits the nostalgia factor <em>hard</em> for me.</li>
<li><em><a href="https://www.practical-ui.com/">Practical UI</a></em> by Adham Dannaway: A great book of practical UI tips and tricks to up your UI and visual design game. Instant recommend for anyone getting started in UI design, or for design veterans who are looking for more tricks to add to their toolbelt (alongside <a href="https://www.refactoringui.com/">Refactoring UI</a> by Adam Wathan and Steve Schoger).</li>
<li><em>The Creative Act: A Way of Being</em> by Rick Rubin: By far the best book on creativity I’ve read in a long time. Probably ever. Every chapter and paragraph and line and word felt meaningful and like I was only understanding a fraction of the deeper meaning. Rick writes about creativity in a philosophical, mystical way that’s applicable to any creative endeavor, not just music (I saw it described as being written in the style of the <em>Tao Te Ching</em>, which I haven’t read but seems apt). I found it so inspiring that I keep a copy on my desk and flip to random pages sometimes to give me guidance. I keep a couple of post-its on my monitor of quotes from the book (a sample: “If you begin with a question and use it to guide an adventure of discovery, that’s the work of the artist.”).</li>
<li><em>White Teeth</em> by Zadie Smith: This was a recommendation from a friend and it did not disappoint. The writing is sharp and witty, the characters have depth, and it felt like a movie playing in my head while I read it.</li>
<li><em>Arcade Game Typography: The art of pixel type</em> by Toshi Omagari: This was a really cool book documenting and classifying 8x8 pixel type that was used in early video games. I was impressed by the amount of variety that people came up with in such a small grid! It’s a largely visual book, and anyone who played early video games would enjoy flipping through it.</li>
<li><em>Jungalow: Decorate Wild</em> by Justina Blakeney: I believe this is the first interior decorating book I’ve read, and I found it very inspiring. Justina has an eclectic and unique style that I enjoy, but more importantly she encourages exploration and trying things out and finding what you like over following “rules” set by others. I’ve noticed this as a meta-trend with myself: I’m drawn to creatives who have unique and expressive styles and advocate finding what works for you rather than what other people say is “right” or “wrong” (such as the chefs Molly Baez and Samin Nosrat).</li>
<li><em>Booze and Vinyl</em> by Andre and Tenaya Darlington: This was a Christmas present from last year that pairs a classic vinyl record with 2 cocktails (one for each side). The intentionality of putting on a record and making a pair of cocktails to sip on while listening really resonated with me. The authors throw parties like this which I’ve been holding in the back of my head to do some day. It inspired me to purchase some vinyl and make a some new cocktails!</li>
</ul>
<p>Lastly, I read a couple of classics this year: <em>The Catcher in the Rye</em> by J. D. Salinger, and <em>The Bell Jar</em> by Sylvia Plath. Both classics for a reason, although neither “wow!”-ed me or changed my life. I had read <em>Catcher</em> in high school, and it’s so much easier to see how full of shit Holden is as an adult. I had never read <em>The Bell Jar</em> before, and I can see how it could be really meaningful for folks in high school and college.</p>
<h2 id="list">List</h2>
<p>As always, you can view the full list and follow along with my current list in <a href="https://www.notion.so/42711b1983f74be698cdeac8c9bb3da2?pvs=21">Notion</a>.</p>
<ul>
<li><em>Tomorrow, and Tomorrow, and Tomorrow</em> by Gabrielle Zevin 👍</li>
<li><em><a href="https://www.practical-ui.com/">Practical UI</a></em> by Adham Dannaway 👍</li>
<li><em>Salt: A World History</em> by Mark Kurkansky</li>
<li><em>A Primer for Forgetting: Getting Past the Past</em> by Lewis Hyde</li>
<li><em>Please Report Your Bug Here</em> by Josh Riedel</li>
<li><em>Novelist as a Vocation</em> by Haruki Murakami</li>
<li><em>Flawless Typography Checklist</em> by Jeremiah Shoaf 👍</li>
<li><em>Feeding Littles and Beyond: 100 baby-led-weaning-friendly recipes the whole family will love</em> by Ali Maffucci, Megan McNamee, and Judy Delaware</li>
<li><em>Dopeworld</em> by Niko Vorobyov</li>
<li><em>Brave Companions</em> by David McCullough</li>
<li><em>How to Write One Song</em> by Jeff Tweedy 🎸</li>
<li><em>Vacationland</em> by John Hodgman</li>
<li><em>A Dictionary of Color Combinations vol. 2</em> by Sanzo Wada</li>
<li><em>Company of One</em> by Paul Jarvis 👍</li>
<li><em>The Creative Act: A Way of Being</em> by Rick Rubin 💯</li>
<li><em>The Catcher in the Rye</em> by J. D. Salinger</li>
<li><em>Arcade Game Typography: The art of pixel type</em> by Toshi Omagari 👾</li>
<li><em>The Cooking Gene</em> by Michael W. Twitty</li>
<li><em>Articulating Design Decisions</em> by Tom Greever</li>
<li><em>White Teeth</em> by Zadie Smith 👍</li>
<li><em>Jungalow: Decorate Wild</em> by Justina Blakeney 👩🏼🎨</li>
<li><em>Design by Definition</em> by Elizabeth McGuane</li>
<li><em>User Friendly: How the hidden rules of design are changing the way we live, work, and play</em> by Cliff Kuang with Robert Fabricant</li>
<li><em>First Designer In: From just hired to minimum viable design team in five weeks</em> by Tara L. Kelly 👍</li>
<li><em>Daddy Diaries</em> by Andy Cohen</li>
<li><em>Booze and Vinyl</em> by Andre Darlington and Tenaya Darlington🍻</li>
<li><em>The Bell Jar</em> by Sylvia Plath</li>
<li><em>A Maze of Death</em> by Philip K. Dick</li>
<li><em>The Anthropocene Reviewed</em> by John Green</li>
<li><em>A Brief History of Lager: 500 Years of the Worlds Favorite Beer</em> by Mark Dredge 🍻</li>
</ul>
I found this antique pitcherhttp://jlzych.com/2023/08/27/i-found-this-antique-pitcher/2023-08-27T17:35:00Z2023-08-27T17:35:00ZJeff Zych<p><img alt="The antique pitcher I found" src="/images/2023-pitcher/pitcher.jpeg?1693158267" /></p>
<p>I found this antique pitcher outside an apartment building today. It was amongst some discarded books and knick-knacks, most of which was junk, but then there was this pitcher. I normally would have just left it, but this pitcher held my attention.</p>
<p>I felt myself coming up with all the reasons I should just leave it: “I don’t need it.” “It’s old.” “It’s discarded junk.” But then I stopped myself and decided to take it home.</p>
<p>Why did I do this? Two threads came together to inspire me: the first was Justina Blakeney’s book, <em>Jungalow</em>. In this interior design book, she talks about finding old stuff at markets, swamp meets, antique fairs, etc., and giving them new life. Re-using them, remixing them, incorporating them into home decor, and so on.</p>
<p>The second was a note I keep on my desk, which I saw in <em>The Creative Act</em> by Rick Rubin (the best book Ive read on creativity in a long time): “Base decisions on the internal feeling of being moved. Notice what holds your interest.”</p>
<p>This pitcher was holding my interest! I didn’t really know why, but that’s not the point. The point is I should base decisions off of this feeling, without the need to rationalize it. I both noticed this was holding my interest, and also noticed that my old thought patterns were telling me all the reasons to discard that thought. So I did the opposite and followed what held my interest.</p>
<p>These two threads came together to change change my behavior. The pitcher is now more than a pitcher – it’s a symbol of my ongoing journey to reach my creative potential.</p>
Taking the next step in my career: building a company of onehttp://jlzych.com/2023/05/06/taking-the-next-step-in-my-career-building-a-company-of-one/2023-05-06T22:10:00Z2023-05-06T22:10:00ZJeff Zych<p>I recently decided to leave LaunchDarkly and take the next step in my career: starting a company of one. I’m going to be a freelance product designer, focusing on design of technical and developer tools. This is a niche that requires specific skills and experience, both of which I have: I have a CS degree, was formerly an engineer, a generalist product design background, and I’ve worked on technical tools for over 10 years now. And there are a lot of developer tools out there with terrible UX, and founders who value good design, so I want to work with those people.</p>
<p>In addition to that, I’m also doing fractional design leadership as well. This could take the form of creating the hiring process for product designers (especially technical product designers, like myself and the ones I hired at LaunchDarkly). It could mean helping companies adopt a user-centered design process. It could also start as IC work, and I transition into helping my clients hire a designer and onboard them and hand off my work to them and integrate them into the company’s product development process.</p>
<p>I’m also very passionate about designing interfaces that have a unique personality and stand out from the crowd. I take a lot of inspiration from branding projects, which have really interesting visual assets and evoke emotional responses in people. I’d like to find projects where I can bring a branding perspective to product design by defining a unique visual language, tone of voice, and core components and patterns (like a design system, but more strategic).</p>
<p>I also have some interest in doing <em>actual</em> branding. More specifically, logos for technical products. I’ve done <a href="https://www.instagram.com/p/ClFzcdGMEdn/?igshid=NTc4MTIwNjQ2YQ==">logo design for friends and side projects</a> a few times and find it really fun. Doing logo design for developer and technical tools would be really rewarding. And because I have a CS degree and a product background, I could bring that unique advantage over general brand designers to this market.</p>
<h2 id="why-a-company-of-one">Why a company of one?</h2>
<p>So why a company of one? Why not just a freelancer or contractor or something? Freelancing is the starting point, but I want to build up multiple revenue streams and sell more than just my time, like courses or design resources or something. I’m not sure what that is just yet, but I will be paying attention to the work I’m doing as a freelancer to see what could be spun out as a sellable resource.</p>
<p>I also want to approach this venture as a <em>business</em> that I put intention and effort behind finding consistent revenue streams, rather than looking at freelancing as a holdover until the next thing (such as going back in-house or something).</p>
<p>Additionally, the biggest motivating factors is to mold my career around my life, rather than the other way around. As Paul Jarvis says in <strong>Company of One</strong>:</p>
<p>“If you’re a company of one, your mind-set is to build your business around <strong>your</strong> life, not the other way around.” (p. 9)</p>
<p>I want my life to be my first priority, and to be in control of how I use my time, rather than feeling like the company I work for has first dibs on my time.</p>
<p>Jarvis also says, “A company of one is simply a business that <strong>questions</strong> growth.” (p. 6) After working at startups my whole career, where growth is the goal and anything that doesn’t scale is seen as not worth doing, I want to be out of that environment. I want to focus on quality and building relationships over growth and scaling and profit. I don’t want to compromise my values or do things that feel unnatural that you’re required to do when employed by someone else.</p>
<p>Could this expand into some sort of studio or agency in the future where I do take on a few employees, or have partners I work with? I wouldn’t rule it out. But I’d only do that if I feel like I’ve really nailed the services I’m offering, and the market I’m serving, and expanding would help me deliver better services to my clients. But for now I need to focus on making this successful for just me.</p>
<p>If you want to read more about companies of one, then I highly recommend the book I quoted above, <a href="https://amzn.to/3LMGN1U"><em>Company of One</em></a> by Paul Jarvis. Another great resource is the <a href="https://zebrasunite.coop/">Zebra’s Unite Coop</a>, which bills itself as “A founder-led, cooperatively owned movement creating the culture, capital & community for the next economy.” They fund companies that value quality and service over growth and profit.</p>
<p>So that’s where I’m at. I’m very excited about how this will evolve, and already have some clients in the mix. And if you know of any technical tools that need design help, then HMU <a href="mailto:jlzych@gmail.com">jlzych@gmail.com</a></p>
2022 Reading Listhttp://jlzych.com/2023/01/02/2022-reading-list/2023-01-02T18:41:00Z2023-01-02T18:41:00ZJeff Zych<p>I read 25 books in 2022, which is actually 1 more than in 2021. I definitely thought I read fewer then last year since we welcomed our daughter to the world this year (welcome Poppy!), but it turns out I maintained my reading pace.</p>
<p>Of note: I read 33% fewer fiction books this year (only 2 this year, down from 3 hah). Most of the books I read continue to be art and design related. Only 8 were by women, and 1 by a person of color. I did a much worse job at reading perspectives of under-represented peoples compared to prior years. This is also a reflection that most art and design books are written by white people.</p>
<h2 id="some-faves">Some faves</h2>
<ul>
<li><em>Understanding Comics</em> by Scott McCloud: This has been on my reading list for years, and is recommended in basically every list of “X books every designer should read,” and I’m glad I finally did. It’s full of great principles of storytelling and visual communication.</li>
<li><em>How Buildings Learn: What happens after they’re built</em> by Stewart Brand: Yet another book that’s been on my list for years, and is also on every recommended reading list for designers. But I see why – it’s a super interesting read about buildings and how they learn and adapt to use (or don’t). It lowered by respect for architects since it describes them as “stylists” and people who care more about awards and getting in magazines over listening to what the building inhabitants want (this is a broad brush, and I’m summarizing what was said in the book, but I know not every architect is like this). Especially surprising to me was to learn that post-occupancy evaluations (POEs), which is when architects talk to their building’s inhabitants to learn how well it works for them in day-to-day use, is rare. This is unthinkable to me as a designer since my bread and butter is talking to the users of the products I design to understand if they work for them or not, and using that to improve the product.</li>
<li><em>Creative Doing: 75 practical exercises to unblock your creative potential in your work, hobby, or next career</em> by Herbert Lui: I love books about creativity, the creative process, and exercises to become more creative. This book has all 3. Now if only I had more time to do the creative exercises…</li>
<li><em>Barbarian Days: A Surfing Life</em> by William Finnegan: This is part memoir, as told through stories of surfing. I didn’t expect to enjoy this as much as I did. It starts slow, but then finds its groove as the author takes us through his surfing adventures he’s had all over the world. Learning about what makes for the perfect wave, the conditions to look for, the type of coastline, and so on, was surprisingly interesting. And he weaves into that the spiritual side of surfing, why he does it, and what drives him to keep doing it as he ages.</li>
<li><em>The Passage of Power (part 4 of The Years of Lyndon Johnson)</em> by Robert Caro: And of course, Robert Caro’s last published volume of the LBJ biography makes this list. Yet another fascinating read about the man himself, presidential power, and how our government actually runs. This volume features the assassination of JFK and Lyndon’s ascension to the presidency, during which time a lot was happening behind the scenes that I had never heard about before (since most historical records focus on the assassination itself): multiple scandals closing in on LBJ, his incredibly smooth assumption of power and continuation of JFKs agenda despite being almost completely excluded from his predecessors administration, and the very short amount of time he had to break the logjams in Congress and show the American people he was a president who could get things done (and therefore get re-elected the following year). Really good read, and now I’m eagerly awaiting the 5th (and supposedly final) volume to be released, except Caro is in his 90s so… 😬</li>
</ul>
<h2 id="full-reading-list">Full reading list</h2>
<p>As always, you can view the full list and follow along with my current list in <a href="https://www.notion.so/42711b1983f74be698cdeac8c9bb3da2">Notion</a>.</p>
<ul>
<li><em>Color Scheme: An Irreverent History of Art and Pop Culture in Color Palettes</em> by Edith Young</li>
<li><em>The Overstory</em> by Richard Powers</li>
<li><em>A Roomful of Hovings</em> by John McPhee</li>
<li><em>White Fragility</em> by Robin DeAngelo 👍</li>
<li><em>The ABC of Lettering</em> by Ivan Castro 🖌</li>
<li><em>Understanding Comics</em> by Scott McCloud 👍</li>
<li><em>Cribsheet: a data-driven guide to better, more relaxed parenting, from birth to preschool</em> by Emily Oster 👨👩👧</li>
<li><em>Accelerate: Building and scaling high performing technology organizations</em> by Nicole Forsgren, Jez Humble, and Gene Kim</li>
<li><em>Design: Type. A seductive collection of alluring type designs</em> by Paul Burgess 👍</li>
<li><em>1000 Record Covers</em> by Michael Ochs</li>
<li><em>New Retro: Graphics and logos in retro styles,</em> Designed and published by Victionary 🎨</li>
<li><em>Not All Diamonds and Rosé</em> by Dave Quinn</li>
<li><em>About Face: The essentials of interaction design (4th edition)</em> by Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel 👍</li>
<li><em>Severance</em> by Ling Ma</li>
<li><em>Creative Doing: 75 practical exercises to unblock your creative potential in your work, hobby, or next career</em> by Herbert Lui 💯</li>
<li><em>Drunk: how we sipped, danced, and stumbled our way to civilization</em> by Edward Slingerland 🍻</li>
<li><em>Graphic Design: The New Basics</em> by Ellen Lupton & Jennifer Cole Phillips 🎨</li>
<li><em>Palette Perfect 2</em> by Lauren Wager 🎨</li>
<li><em>The Visual Display of Quantitative Information</em> by Edward Tufte 📈</li>
<li><em>Barbarian Days: A Surfing Life</em> by William Finnegan</li>
<li><em>The Pyramid Principle: Logic in Writing and Thinking</em> by Barbara Minto 👍</li>
<li><em>The World According to Color</em> by James Fox 🌈</li>
<li><em>Envisioning Information</em> by Edward Tufte</li>
<li><em>How Buildings Learn: What happens after they’re built</em> by Stewart Brand 👍</li>
<li><em>The Passage of Power (part 4 of The Years of Lyndon Johnson)</em> by Robert Caro 👍</li>
</ul>
Experimenting with layering, filtering, and masking in CSShttp://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/2022-11-17T18:53:00Z2022-11-17T18:53:00ZJeff Zych<p>I’ve recently been doing some experiments with layering, filtering, and masking in CSS. The language has come a long way in the past few years, with properties like <code>filter</code>, <code>mask-image</code>, <code>mix-blend-mode</code>, additional gradient types like <code>radial-gradient</code>, and more, opening the door for Photoshop-like effects that weren’t possible before.</p>
<p>I did these in CSS, as opposed to Figma or Photoshop (where they are usually trivial), partly to see if I could, and partly because CSS provides a lot of advantages over graphics programs: they can scale and be responsive to browser/device sizes, dark and light modes can be controlled via CSS variables (which I didn’t do but it’s possible), they can respond to mouse movement (which I also didn’t experiment with but it’s possible), and they can have scroll effects like perspective scrolling (which I did experiment with).</p>
<p>I followed some tutorials and tweets (which I’ll link to), and pushed some of those in new directions.</p>
<h2 id="adding-noise-via-svg-filters">Adding noise via SVG filters</h2>
<p>I was inspired by <a href="https://twitter.com/FonsMans/status/1569708218351247366?s=20&t=K2ImmxsO7p0NhVwAUwXEdg">this Tweet</a> by <a href="https://twitter.com/FonsMans">Fons Mans</a>, where he suggests adding noise to gradients to give them an extra level of polish and pop. This got me wondering how I could do this on the web, and I remembered seeing a tutorial on CSS-Tricks ages ago about how to add noise to backgrounds programmatically via SVG filters. Actually it turned out it was two articles: <a href="https://css-tricks.com/grainy-gradients/">Grainy gradients</a> by <a href="https://twitter.com/jimmmy">@jimmmy</a>, and <a href="https://css-tricks.com/creating-patterns-with-svg-filters/">Creating patterns with SVG filters</a> by <a href="https://twitter.com/finnhvman">@finnhvman</a>.</p>
<p>I decided to add some noise to a couple of gradients on <a href="http://jlzych.com">my site</a>
— the background of the main layout, and the header of the <a href="http://jlzych.com/writing">writing page</a>. It’s subtle, but interesting.</p>
<p><img alt="Before and after images of my site's background gradient" src="/images/2022-css-layering/bg-gradient-before-after.png" /></p>
<p><img alt="Before and after images of my writing page's header gradient" src="/images/2022-css-layering/writing-before-after.png?1668725562" /></p>
<p>It was a fun project to figure out how to do it in code. The tl;dr is I generated a noise filter with SVG, and applied it to an <code>:after</code> element and set <code>mix-blend-mode</code> to <code>overlay</code>.</p>
<h3 id="blobby-background-gradients-with-noise">Blobby background gradients with noise</h3>
<p>Fons’ tweet also shows how to layer, blur, and blend elements together to make interesting background gradients in Figma, which I also did in CSS:</p>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="gOzoymY" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/gOzoymY">
Background gradient blobs with noise</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>I also created these stage lights in CSS from a picture I saw in the NY Times:</p>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="dyemxrQ" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/dyemxrQ">
Stage lights</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>One last one inspired by the design on one of my wife’s purses:</p>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWzPyJE" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/NWzPyJE">
Blobby gradient background</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h2 id="halftone-patterns">Halftone patterns</h2>
<p>I saw this cool tutorial on creating <a href="https://css-irl.info/css-halftone-patterns/">halftone patterns in CSS</a> alone, so I followed that tutorial first to create this:</p>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="zYaONyJ" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/zYaONyJ">
CSS Halftone pattern</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>Then I extended that idea to do scan lines:</p>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYrBpEO" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/vYrBpEO">
CSS Scan Lines pattern</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>Then I extended <em>that</em> idea to do circles radiating out of Frank Zappa’s eye (which was inspired by a photo in the record <em>Absolutely Free</em>:</p>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjZjGNq" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/JjZjGNq">
Radiating circles overlay</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p><img alt="Zoomed in picture of radial gradient on Zappa's eye in Absolutely Free" src="/images/2022-css-layering/Zappa-eye-zoom-in.jpg" /></p>
<p>All of those inspired me to do a motion blur type pattern by blurring SVG noise in one direction, and layering that on top of some stripes. It didn’t quite come out how I had envisioned (I wanted to get it to look more like putting some paint on a canvas and scraping it down), but it’s kinda cool in its own way:</p>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBKBJej" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/qBKBJej">
Motion blur experiment</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h2 id="trippy-pop-art">Trippy pop art</h2>
<p>All of those led me to create some trippy pop art that uses layering and blending to get different colors, and perspective for different scroll speeds so each layer moves across each other at different rates. Scroll within each of these Codepen embeds to see what I mean.</p>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdKJdJX" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/mdKJdJX">
Trippy pop art stuff</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="XWYbYOv" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/XWYbYOv">
Trippy pop art with fade</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLENQyr" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/yLENQyr">
Trippy pop art waves</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>This one’s my favorite 😄</p>
<h2 id="card-with-fancy-border">Card with fancy border</h2>
<p>The last thing I did was create this card with a fancy gradient border, inspired by a design I saw somewhere else (I can’t remember exactly where), which uses some layering and blending techniques from above but isn’t nearly as experimental or “out there” as some of the previous stuff.</p>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjZbKbB" data-user="jlzych" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jlzych/pen/JjZbKbB">
Card with fancy border</a> by Jeff (<a href="https://codepen.io/jlzych">@jlzych</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h2 id="fin">Fin</h2>
<p>That’s all I’ve got for now. They’re fun to make, and I feel like I could make a lot more of these since each one inspires new ideas. Plus I’m a lot more attuned to seeing gradients and layers in the world now – lights, shadows, clothing, purses, etc. – which makes me want to figure out how to recreate them in CSS.</p>
<p>Bon appétit!</p>
Ingredients for a great product design case studyhttp://jlzych.com/2022/10/24/ingredients-for-a-great-product-design-case-study/2022-10-24T23:15:00Z2022-10-24T23:15:00ZJeff Zych<p>While I was the Head of Product Design at LaunchDarkly, I hired 12 people in a year and a half. In that time I looked at <em>a lot</em> of case studies from product designers (on the order of 100s, I’m sure) and saw examples of great ones and terrible ones and everything in between. I’d like to share more case studies of my work, so I wrote down what makes for great case studies and bad case studies to guide me when I start writing them.</p>
<h2 id="the-best-case-studies-i-ve-read">The best case studies I’ve read…</h2>
<ul>
<li>Are short and scannable, but had enough depth to answer questions I had while scanning, and enough detail to show me your skills.</li>
<li>Have plenty of pictures, from screenshots of the final work to process shots during the project (sketches and wireframes, the team at a whiteboard, etc.).</li>
<li>Provide enough context for me to understand the product, business context, users & customers, problem, goals, constraints, etc. (but kept just to the bare minimum so I can understand the work).</li>
<li>Also include context about your role, and what you did.</li>
<li>Are well-written and easy to follow. Writing the project like a story usually makes it more engaging (as opposed to just point-by-point saying the steps you went through. “First we did research. Then we…”).</li>
<li>Get me invested in the problem you’re solving and make me want to know how you solved it. This will hook me into reading the case study and pull me through to the end.</li>
<li>Have a clear impact that’s contextualized so I know if it’s actually impactful or just metrics theater.</li>
<li>Impress me with your craft and attention to detail.</li>
<li>Showcase projects with enough depth to highlight everything above, without being so sprawling and broad that they just skim the surface of what you can do. Some of the most interesting work I’ve seen in case studies (and in portfolio reviews) were smaller projects that went deeper into the decision making process and craft (but were still impactful).
<ul>
<li>That’s the advantage of smaller projects — they can go deeper on a narrower problem. Case studies of big projects can go too broad and lack the depth that really shows the level of care and detail a great designer will put into a project (of any size).</li>
</ul></li>
<li>Ultimately, a great case study shows me how you work and your strengths, leaving me wanting to work with you.</li>
</ul>
<h2 id="the-worst-case-studies">The worst case studies…</h2>
<ul>
<li>Are confusing, long-winded, and hard to scan.</li>
<li>Don’t show me the work, or just have 1 or 2 screenshots with no explanation of what I’m looking at. (This can be especially bad in product design work where the thing you did might be a small piece of the screen it lives in, and/or more conceptual work like system design and information architecture.)</li>
<li>Converse of the above, some only have pictures, with no context explaining what they are, what the feature/product does, who the users are, etc.</li>
<li>Lack context. Who was this for? What does the product do? What problem were you solving? Why was it worth solving? Etc.</li>
<li>Don’t show me your process, how you got to the end result, or how you make decisions along the way. They just show the final product.</li>
<li>Don’t emphasize your strengths. If you say you do everything, I’m left thinking you’re not great at anything (no one can master every UX skill).</li>
<li>Leave me wondering what you did versus the rest of the team (especially if you worked with any additional designers)</li>
<li>Don’t tell me the impact. So you designed and shipped a thing. Did it matter? What was the impact to customers and the business?</li>
<li>Go way too deep on theory and idealized product design/discovery processes rather than telling me what you actually did.</li>
<li>Formulaic. They followed a template and just rotely filled in the details (sometimes incorrectly). These are an instant turn off and boring to read and you can smell them a mile away.
<ul>
<li>This is most common with case studies of designers coming out of bootcamps, and I don’t want to come down too hard on people trying to break into the field of product design. Templates are useful in these situations, and for entry-level roles I won’t give negative marks to anyone who follows a template. But once you have a few years of experience under your belt, it’s time for your case studies to grow up.</li>
</ul></li>
</ul>
<hr>
<p>So where does that leave us? My ideal case study includes these ingredients (doesn’t need to be in this order):</p>
<ul>
<li><strong>Context</strong>: Help me understand what I’m looking at. Specifically, what’s the problem? Who is it a problem for? What are users trying to accomplish? What are their pain points? Is this an evolution of an existing feature or wholly new? What are the business goals and stakes? Why was this project important? Constraints? Scope? What’s the team team you worked with, and your role specifically?</li>
<li><strong>Solution</strong>: Show me the designs! How did you solve the stated problem? Ideal case studies have a screenshot with a “wow!” factor that draws me in, but that favors visual design (or designers who work with good design systems), so this will depend on the nature of the project.</li>
<li><strong>Process</strong>: How did you get to that solution? What alternatives were considered? Convince me that your solution was the right or best one given the context above. Also make sure to highlight:
<ul>
<li><strong>Attention to detail</strong>: What details did you obsess over? What made it special/unique/yours? Give me an indication of your craft skills.</li>
<li><strong>Strengths</strong>: Show off your strengths and how you applied them to this project.</li>
</ul></li>
<li><strong>Impact</strong>: What was the impact? Did it solve the problem? How did you measure that? Business impact? Customer impact? The best case studies have both business impact and customer impact, with both quantitative and qualitative measures (but not all projects have these, so at least one measure is better than nothing).</li>
</ul>
<p>Great case studies include the ingredients above while minding these constraints:</p>
<ul>
<li><strong>Short as possible</strong> (for busy recruiters and hiring managers), while providing enough detail to answer questions they might have while scrolling through the work, and showcasing strengths, craft, and attention-to-detail.</li>
<li><strong>Visual</strong>. Show at least one screenshot of the finished thing up top. Choose an image that looks appealing and makes me want to learn more. Include pictures throughout the case study to break up the text. Include in progress work, process shots, diagrams, the team together, etc.</li>
<li><strong>Scannable</strong>. I should be able to scroll through it and have a good sense of your work without reading (pull quotes, captions, and bolding help here).</li>
</ul>
<hr>
<p>These ingredients resonated with me as a hiring manager and are what I’ll be aiming for with my own case studies. I hope they help you, too.</p>