Looking for more podcasts? Tune in to the Salesforce Developer podcast to hear short and insightful stories for developers, from developers.
72. Designing with Lynn Fisher
Hosted by Charlie Gleason, with guest Lynn Fisher.
Lynn Fisher has been designing websites for over 15 years. When she's not occupied by &yet, a software and design consultancy, she's working on art projects and illustrations that push the capabilities of frontend development. In this conversation with Heroku designer and developer Charlie Gleason, we'll explore her methodologies and interests in making unique web projects.
Charlie Gleason, a designer and developer at Heroku, is joined by Lynn Fisher, a designer, CSS developer, and a software and design consultancy at &yet. Lynn went to school for Fine Arts, majoring in inter-media art. She found her unique perspective on art and design gave her a leg up in working with HTML and CSS projects in the mid-2000s, and from there, moved into working in frontend development.
Her personal work has explored the creative possibilities of web design. A Single Div shows the incredible possibilities when drawing with a single div and CSS. The Food Place (from The Good Place), Top Chef Stats, and Dress David Rose (from Schitt's Creek) explore pop cultures through through minimal illustrations, and emphasize the flexibility of pure web development. US Flags [dot] Design is an exhaustive design guide to the flags of the United States, while Airport Codes demystifies the IATA three-letter airport code. Their discussion probes these projects, and how Lynn balances her work responsibilities with her creative (and time-consuming) artwork.
Links from this episode
- A Single Div, a compilation of CSS drawing experiments
- Dress David Rose, which features illustrations of every shirt, sweater, and jacket David Rose wears on Schitt's Creek
- Lynn's portfolio refreshes, since 2007
- The Food Place, which includes all the food, drink, and restaurants you remember from the television show “The Good Place”
- Airport Codes, which helps you to make sense of those three-letter airport codes
- US Flags [dot] Design, a design guide for the flags of the United States
- WhyAZ, a microsite of reasons it's awesome to live and work in Arizona
- Top Chef Stats, an exhaustive compilation of stats and facts across many seasons of Top Chef
- Hollywood Age Gap, which shows the age difference in years between movie love interests.
- Jen Simmons and Rachel Andrew provide guidance on using CSS Grid
- Heroku Hanafuda cards collaboration, and the award in Japan
Charlie: Hello and welcome to Code[ish]. I am Charlie Gleason, a designer and developer at Heroku, and today I am super excited to be joined by Lynn Fisher. Lynn, maybe you want to introduce yourself.
Lynn: Yeah. My name is Lynn. I am a designer and CSS developer. I work for a little company called &yet, we're a software and design consultancy, and I kind of specialize in making weird web projects, which we're going to talk about a little bit, but things that are fun and silly and hopefully bring joy to people.
Charlie: Which I am genuinely obsessed with your work, so that's why-
Lynn: Thank you.
Charlie: ... this opportunity came up and I was like, "Oh my gosh, I would love to hear more about where you get this inspiration from," because you had some pretty internet famous projects. I mean, your Single Div project has been around for a long time where you see how far you can push a single div in terms of illustrating in that medium. Would that be a fair way of describing that? I never tried to explain a single div before, out loud.
Lynn: Yeah, it's essentially a CSS drawing experiment. Lots of people are doing CSS illustration, which is so cool. There's some really, really amazing ones that have come out really recently, but single div is putting some really strict constraints on it and so it's basically what kind of things can I create with one HTML element?
Charlie: Oh my gosh, it's so great. I will put a link to it in the show notes. But just to step back, I'd love to hear kind of more about your background, have you always been in the design industry, and then kind of how you progressed into web as well?
Charlie: There was a project that you did a few years back which was based on your personal site and I know that you refresh your personal site once a year with some kind of incredibly creative hook, which is why every time you relaunch it, I'm so excited for it. And I think the one that really jumped out and got, the first time I saw it, kind of get a huge amount of attention, was when you set it up so that at every break point it would have an entirely different layout and design.
Lynn: Yeah. I think the previous years, I'd been redesigning it every year, but that was the first year where I was really, I think, experimenting and trying something really kind of different.
Charlie: Was that a challenging project in terms of getting so many different layouts out of the same set of markup? Like in terms of the markup, did you have to put it in a certain way or make compromises there?
Lynn: I don't know that it was challenging, it actually went pretty quick. I think once I found some inspiration, it was fast moving. I looked at a lot of magazine layouts, some traditional graphic design, as inspiration, and I think the thing that made it really easy from a development standpoint was CSS Grid. That essentially allowed me to keep the markup super simple and basic, and be able to make lots of different layouts with not a lot of additional markups, so that was really nice, kind of at the right time, to use CSS Grid.
Charlie: Yeah, and it was really when that was just kind of also emerging as something that people were super excited about. I think it was Jen Simmons did a ton of really great work around educating on CSS Grid and a couple of other people whose names are going to escape me, but I will put links to some of the CSS Grid explorations that were coming out around that time as well into the show notes.
Lynn: Yeah, Jen Simmons and Rachel Andrew, I saw both of them speak on Grid and I think both of their work really, really was helpful for me in understanding it, grokking it, and also inspiring that like there were so many new possibilities with Grid that we had been kind of struggling with from a CSS standpoint for years. So yeah, they were immensely helpful.
Charlie: So, a lot of the time I've noticed your work centers around television as a medium?
Lynn: Uh huh.
Charlie: I mean, you have the incredible The Food Place, which takes all of the food items from The Good Place and turns it into a giant menu. Similarly, your Top Chef Stats, and then most recently the project that I could not have been more excited about personally because it's my favorite television show of all time and I think I've seen every episode a thousand times, would be Schitt's Creek. You made Dress David Rose, which was an illustration of every sweater, or every outfit sorry, that David Rose wore throughout Schitt's Creek.
Charlie: I'm really curious about the inspiration for these projects. Is that kind of sitting absentmindedly watching TV and then being like, "I should do something with that," or do you go into it more like looking at a show you like and thinking, "I'm going to try and find something I can make around this?"
Lynn: I think it's a little bit of both. I was thinking about how did I get here? Right? And I was thinking back ... Actually, I feel like something came to light, which was I took a web Fine Arts class in college. We were creating Flash sites, which is back in the day, but it was always our sites had to be from a fine arts perspective or like a different approach. And so there was this guy in my class, I wish I remembered his name, I have to go search for it, but what he did is he actually took a photo of every single item that was in his apartment and cataloged it. And you could search by color or search by purpose and stuff, and I think luckily we were in college, so his house probably wasn't full of lots of stuff. I mean, still a really intense endeavor, right? But I think that had a huge impact on me.
Lynn: And also, one of the first sites I ever made was just a fan site for a local band in town that I loved. And so those things I think kind of coalesced into this glorified fan site approach that I take to personal projects, which is like, "Oh, I'm just obsessed with this thing right now, and I potentially love this particular part of this thing, and what can I do with that? How can I express that creatively and share that kind of like weird niche love," because I'm sure there are other people out there that also would respond well to it or be excited about it.
Lynn: And so that's kind of where that comes from. And I do watch a lot of TV and so I think just naturally I have inspiration from that. And there's so much content to work with from TV shows, especially these ones that are maybe long running or they really work on their special continuity or in-jokes, right? And so yeah, that's kind of where things sprout from.
Charlie: I saw that Dan Levy, who plays David Rose and wrote the show and is the executive producer with his dad I think, tweeted about it, which must've been an incredible feeling.
Lynn: Yeah, that was unreal. You know, I mean, you always kind of hope that someone involved with the show will see it or feel flattered that their fans are so into it and I can express the gratitude that I have for them of making something that I love so much. So yeah, it was really, really cool to get a response from them.
Charlie: Yeah, that's amazing. I genuinely jumped up off my couch and ran to my laptop to message you when I saw it. I was like, "Lynn, have you seen this?"
Lynn: That's amazing.
Charlie: It's just like, I don't know, I think that a lot of the time you kind of do this stuff in a vacuum, right? I know exactly what you mean that it's like, "I made this because I like you, or I like the thing that you've made or I feel a connection," and then to have that returned. So I think, yeah, there's something really, I don't know, I just love it.
Lynn: Yeah, it feels special for sure.
Charlie: So one of the other things I noticed is that there are like statistics come across a lot in your work, like the Top Chef Stats site, which kind of covers all of the stats of Top Chef. I think you updated it really recently. And then also the Hollywood age gap, which shows the age gap between, was it characters?
Lynn: It basically calculates the age gap between movie love interests. So there's a trend that older Hollywood men get paired up with really young Hollywood women. It's just strictly data. I mean, you can draw whatever conclusions you want from it, but it just calculates that and then orders them in kind of this big grid.
Charlie: Wow. It's well worth checking out and I love that use of kind of data to present even just like not necessarily having to do much more than just put the numbers there in a way that makes them easy to kind of digest and then all of a sudden it kind of paints a much bigger picture than just the numbers themselves.
Charlie: But I think the other thing that I loved as well was the idea of looking back on old work because I think one of the challenges ... Like URLs were originally meant to be forever and if you had a URL that was always meant to exist and that was kind of the whole idea of a GET request for the URL. But in this day and age a lot of stuff has disappeared. GeoCities, there was a huge effort to kind of immortalize that and to rescue it, but I saw that you keep every version of your portfolio from 2007 to now, which is amazing.
Lynn: Yeah. I know. It's funny. I didn't intentionally start doing that until later, but I just happen to not delete things and so I did have static HTML and CSS files from way back in the days so I was able to piece everything back together and create a full archive, which was pretty cool.
Charlie: That is so cool. Yeah, it's definitely worth going, it's lynnandtonic.com. But yeah, it's also, I think, kind of amazing as well because there's a certain tendency in the way that we approach social media now to be more kind of temporary or ephemeral, so I think looking back on that stuff is so great though because it was all made without that kind of context. I think when we look at social media now, everyone's very aware that it's there and that it can have an impact further down the line, and so people will either make a decision to leave stuff or to delete it, but I think back then no one really knew what the internet ... I mean, the internet existed and people were putting things on it, but it was still kind of this niche thing. So I think it's really interesting because you don't get to see as much of that kind of content. 2007 internet was a very different internet, you know?
Lynn: Yeah. Probably more people have seen my 2008 redesign now than they did in 2008, right, and so it's interesting how that content can stick around. And I think what's important for me too is that, you know, I think a lot ... There's this kind of phrase that people say, which is like, "Oh, if you're not embarrassed by the work you did six months ago, that means you're not learning or not growing," and I don't necessarily think that's true. I think it's cool to look back at the work and see how far you've come, sure, but also that it's okay to be proud of the work that you did 10 years ago, you know? I mean, you were a different person, the world was different, and I think it's cool to be able to see how people have changed, how work has changed, and to appreciate what it was at the time, you know?
Charlie: Sure. Yeah. And the constraints were entirely different. The means in which we were working was totally different. The resources were totally ... I think that it is so easy to look back at stuff and to be hyper critical of it, but I don't know. I was excited when I made my first website because I put something on the internet I could show people at another friend's house.
Lynn: I know.
Charlie: Oh my gosh, that was just like the best feeling. I try and capture that feeling still now and it's so much harder.
Lynn: Totally. But yeah, I remember a friend of mine introduced me to GeoCities and I remember sitting at her house and being like, "You can make websites?" It was like a bomb exploded in my head, right? I guess before it's like, "Oh, stuff on the internet is just like ..." Like obviously someone makes it, but not me, you know? So it was just really cool and yeah, I think capturing that feeling, my side projects for sure help with that where it's like, okay, this is just me sitting down and I'm just going to like make a thing. It's going to be weird and it's going to be just this weird thing that I care about and it's a cool thing that we can do that.
Charlie: The other thing I was going to say, speaking of fandom, it doesn't just have to be for TV, like you made Why Arizona or WhyAZ, as kind of a celebration or like a love letter to your hometown or to your home state. What was the inspiration for that and how did that kind of come about?
Lynn: Yeah, so I worked on that with a few of my friends at a company that I worked at previously called meltmedia. They're an agency in Tempe and we were talking a lot about recruitment and hiring and things, and us knowing that Arizona was a great place to live and work, but, you know, lots of people were at the time, and still, moving to the Bay or some of the larger cities where big companies have HQs. And so also, I mean unfortunately, there was a lot of bad Arizona press happening with our politics and our sheriff and all of that, and so we were like, let's put something out there that's just like, "Hey, this is the stuff that we like about living here and what's great and unique about Arizona," and see if people like that, you know? And we could send it, maybe if we're trying to recruit someone from a different state, maybe we'll send them that and be like, "Hey, this is why we like living here," you know?
Lynn: Like, "If you move here and maybe you don't work for us later, you could probably still have a great life here," right? You don't hire people and expect them to work for you forever, right? If someone moves there, you want them to love it as much as they can and make it a home. So yeah, that's where that kind of came from. And we put together a bunch of factual stuff, just stuff that we think is neat about Arizona. All the illustrations on WhyAZ are also done with CSS, and so that was like the first project where I worked on where I started the CSS illustration thing or trying that out.
Charlie: Oh wow.
Charlie: I didn't realize that. That's awesome.
Lynn: Yeah. We originally were wanting to do something that would, because we were a dev shop, like, "Oh can we do something kind of unique with this from a technical standpoint too, not just a content standpoint." So yeah, it was a really fun project and we've kept it alive. We haven't done a lot of edits just because when I left meltmedia, we were all kind of just working on it on a volunteer basis. I have a lot of plans for it, but you know, I've got to figure out how to make that work when we're all kind of working on it as individuals.
Charlie: And that actually kind of leads me into talking about these kind of projects generally, like looking at tools and new processes and the way you kind of approach it. How do you create space and find time to focus on these projects, because I think one of my favorite things ... So, Heroku works with &yet on a bunch of projects and it's great and I feel like half of our meetings are just us and team members from &yet talking about how we don't understand how you get so much done. You do have a day job, right, like working across a ton of projects and doing incredible work. But it's like how do you find the time? Do you sleep?
Lynn: It's funny because I actually do sleep a lot. I mean, I am lucky in that I don't have a lot of people depending on me so a lot of my time is my own. But I think it's a combination of things. I do work quickly. I've described one of my strengths as being able to make decisions and move on them. So I think where a lot of people struggle with like, "Oh, what should I do?" I think a lot of people have trouble working on their own work, especially where there aren't guidelines or constraints being given to them. So I think that's part of it. But also I do set aside time each evening and each weekend to work on this type of stuff. So having a lot of time that's my own and being strict with it.
Lynn: And I think also as much as I do set aside time and set expectations with my friends and family that I'm going to be doing that, but also that when I'm excited about a project, I want to work on it in a flurry and so it's easy for me. I think the David Rose project was a lot of work, it was a lot of illustration, and as I was going through it I'm like, "Oh my gosh, this is so much work," but it did go quickly. I was excited about it. It was fun. Probably the biggest thing is just that I love working on these and so it just kind of happens naturally I find the time because I want to do it.
Charlie: Well, it comes across because I think there's a certain part of me that when I see it I'm just like, "Wow, this is incredible," and then you start to think about the level of detail, because I don't know the exact number of sweaters off the top of my head or the exact number of outfits, but it's like at least a hundred, right?
Lynn: Yeah. I think an average of like 30 per season and there's six seasons.
Charlie: Oh my gosh.
Lynn: Well, we're almost done with season six and then there's two versions of each shirt also. There's the kind of like store version, like here's a picture of the sweater and then the illustration of David wearing it. So yeah, it was a lot. And as new episodes are coming out, the complicated ones with lots of graphics are actually pretty fun to do, but also, of course, much more time intensive. So when he wears a sweater that's like pretty simple, I'm like, "Oh this is a nice break. Just some stars on this one."
Charlie: When you draw, or when you're working on something like this, like let's say a heavily illustrative project, is that something that you would like go to a space, like a study to do, or do you kind of do it absentmindedly in front of the TV, especially when it gets to that kind of time intensive but not necessarily cognitively heavy work?
Lynn: Right. Yeah. So illustration is nice, sometimes I'll sit at my desk but also have Netflix on my monitor, or I'll sit on the couch with my husband and watch something while I'm working. So like yeah, those ones are nice where I'm focused but I can still process some things that are happening around me. My US flags site required a ton of research and reading, and so that one I really had to kind of lock myself in a room and really kind of buckle down. But yeah, I think with each project, one nice thing is they usually have a visual component along with a research component, and so I can kind of go back and forth between the two types of processes depending on how I'm feeling, and so I can still make progress.
Lynn: Like sometimes I'm just like, "I can not draw anything right now, so oh, I'll do some research or some HTML or something," you know. So doing this creative stuff is nice, like be able to kind of scratch that itch but also, you know, be making something.
Charlie: I don't know, I can't, yeah, I just, I don't know what that feeling is, but it's like it's very hard to ... Once you have it, it's pretty hard to ignore.
Lynn: Yeah, totally.
Charlie: So one of the other things I was kind of interested in, do you ever find yourself kind of iterating or pivoting around ideas or even walking away from something? Is there projects that you start and just think, "Maybe I've lost some of the spirit for this, or maybe I'm not enjoying it as much." Do you find that or do you tend to, once you've settled on an idea, see it through to the end and you know really like urr?
Lynn: The majority of my projects I kind of see through and it feels like there's a clear, "Okay I can put this out and it can exist in this state for forever, potentially, without me adding to it," or some of them I'll just potentially could be adding data to it for forever also, which is an interesting other problem. But, there's a couple of projects I abandoned this year. A friend of mine and I, we were working on an Academy Awards bracket, like betting-type app, and we would start working on it and then miss the Oscars and then like the next year start working on it and then miss it, right. We'd like miss the deadline. I think having a really strict deadline like that wasn't good for us, it seemed. I think it's been like three years we've tried to do it and we're like, "Okay, well this isn't going well," so we left that one. We're like, "We can enjoy the Oscars in our own way I guess."
Lynn: And then another project that I still have, I'm still toying with it, I don't know, but have you seen the show Mindhunter on Netflix?
Charlie: I've seen the name, yeah.
Lynn: Okay. So, it's a David Fincher series, it's pretty good, but because David Fincher is so artful in his work, the product placement in the show is really obvious. It takes you out of the show almost. But it's cool because it's a period piece, and so they're like period appropriate type product placements, so it's cool like old packaging and things. And so I went through and captured all the times that a product showed up in the show.
Charlie: Oh wow.
Lynn: Yeah, and so I still have that. It's sitting. I didn't put it out. I didn't know what format to do it in or how to present that in a way that felt right. And their season three just got postponed, and so that's one that's kind of on the back burner. Not totally abandoned, but I've kind of left it to sit for a while so we'll see if I end up doing something with it.
Charlie: So one thing I did want to bring up as well was the project that we collaborated on, which was Hanafuda cards. Hanafuda cards are a Japanese card game, and they're based around these really visually-led different illustrations to do with the seasons and to do with collections of items within the visuals. So you really have to see them. You worked on all of the illustrations for that. How was that process compared to something, say like digital given that it was much more kind of physical illustrative thing that was for print?
Lynn: Yeah, it was really, really fun. I think I speak for everyone at &yet that this was one of our favorite projects that we've ever worked on. We just love it so much. It was just such a fun process and so creative and unique. The main process for illustrating it was like there's this existing artwork that's very familiar for people who play with Hanafuda cards a lot, and so taking that artwork that's really iconic and recognizable and translating it to the Heroku line art style was challenging for sure, but I think once I kind of got the first couple cards going, I think from there it was really, really, really fun and easy to kind of translate the cards into this Heroku ecosystem.
Lynn: It was helpful to have Diana on our team who is really familiar with Hanafuda. She has a Koi Koi app, I think for sure iOS, maybe Android too, so I was able to show her and be like, "Is this recognizable as this card?" And she's like, "Yep," or, "No, it definitely needs to include this element or something like that." So that was a really interesting process of taking something and making it our own, but you know, keeping the essence and the joy of the original product.
Lynn: And what was extra special cool about it is how you all really took the printing and creation of these really seriously. And the cards are, you know, hand wrapped, they're printed so nicely, and when I got them and I was able to unbox them, it was just such a cool feeling. Working on the web, you know, I don't really get to hold something that I designed, right, and so that was really, really, really special. And you can just tell that they're very lovingly made. So it was really great.
Charlie: Oh, that's cool. That's awesome.
Lynn: Yeah, yeah. And I just think there's like some anxiety that I felt about, you know, something that's going to be printed. You know, with web it's like, "Oh yeah, just push an update," right? But here it's like, "Okay, this is like final, final, final." Right? But the seriousness and the joy and the excitement from the Heroku team, especially about creating these, really, really shines through. They're really, I think, really special swag.
Charlie: I think one of the biggest things with that, I mean, Jennifer was the real driving force behind this, so Lynn and I both work with Jennifer at Heroku. She's amazing, hi Jennifer, and I think one of the big things was that she wanted to be both really respectful of the tradition of the Hanafuda cards, which went into the production process, I can't even remember how many suppliers and different people we talked to, to try and get this very specific process of wrapping these cards. And then also just wanting to do justice to something, especially because it is really culturally significant in Japan and we wanted to make sure that we were being respectful of that and that we were doing it in the right way.
Charlie: And then also I think anytime that you're reinterpreting something, the most fun feeling is, like you said, taking this thing that's quite traditional and is seen in a certain way, and then trying to play with it and explore this whole other side but also still trying to kind of stick within staying within the lines of what's recognizable and appropriate and all that kind of stuff.
Charlie: So I definitely hear you as well on that weird feeling when you have something printed. I always think the weirdest thing about making stuff on the internet is if electricity ever stops working, we're all in trouble and no one will know anything I did and it will just be gone.
Lynn: Right. Oh my gosh.
Charlie: But then there's this other terror of like once it's printed, it's printed forever and you can't-
Lynn: Right. You can't take it back.
Charlie: Yeah. So yeah, I totally relate to that. If people want to check out the cards, you totally should. It's at heroku.com/hanafuda and I'll put them in the show notes.
Lynn: We talk about that project a lot still. We're just like, "Oh, how fun was that. Let's do more stuff like that."
Charlie: Ah, that's the best. Well, I could literally sit and talk to you forever because I think your work is incredible and I love what you're making and I love what you're putting out into the world. It's such a positive. I think the whole world, at the moment, just needs some good feelings, right. So cool. I really appreciate you taking the time to chat about your work and about your process and for being great.
Lynn: Thank you. This has been really fun.
Charlie: If people want to check out your work, they can visit lynnandtonic.com, that's L-Y-N-N and tonic.com, and your Twitter handle is the same. Thank you for tuning in.
A podcast brought to you by the developer advocate team at Heroku, exploring code, technology, tools, tips, and the life of the developer.
User Interface / User Experience Lead, Heroku
Charlie is a designer, developer, musician, and creative coding enthusiast. He can usually be found somewhere in London, probably on a bike.
More episodes from Code[ish]
Innocent Bindura and Greg Nokes
How do you know an application is performing well beyond the absence of crash reports? Innocent Bindura, a senior developer at Raygun, shares the company's tools and utilities, discusses the importance of monitoring P99 latency, and talks... →
Robert Blumen and Marcus Blankenship
How can developers learn from catastrophic errors such as airline disasters? Learn how understanding the root causes of failure in complex systems can prevent their recurrence. →
Karan Gupta and Marcus Blankenship
How can applying the right technology choices at the right time impact your coding and business choices? Karan Gupta explains how practicing “pragmatic engineering” can have an oversized impact on business and business efficiency. →