Artist and designer Lynn Fisher, currently working at software consultancy &yet, is all about light-hearted side projects that make people scratch their heads and say ‘I don’t get it’. She’s so passionate about her own online creations and keeping things fresh, she’s created 10 different versions of her portfolio site over the last 10 years, starting every time with a blank CSS file.
But this latest portfolio refresh almost didn’t happen. Lynn has struggled with burnout, an experience that she has written about in &yet’s Leadershippy newsletter, and shared in a video for The Call of the Wildling, a platform the agency created to help others deal with burnout and the pressures of modern creative life.
We caught up with Lynn to find out more about the annual refresh and how she managed to overcome burnout, creating a new portfolio site once again.
Why do you redesign your portfolio site every year?
I studied fine art at university, so most of my early design and development learning was on the job. It didn’t take long to realize there was just so much to learn and my work projects couldn’t possibly cover it all or keep pace with how quickly things were changing.
I found redesigning my portfolio site was a good way for me to practice and build my skills. I had the freedom to experiment with new techniques (and to try some weirder things). I remember getting home from An Event Apart many years ago so pumped to redo my portfolio with a responsive design. Another year, I was excited to try Flexbox. And this time, CSS Grid.
It also ensures I’ll finish at least one non-work project each year. Completing side projects energizes me, so it’s a commitment I’m happy to fulfill. I always think I’ll be bummed when it’s time to redo it, but I’m usually ready and eager to try something new.
Lynn Fisher. Image by Karolina Szczur.Why have you created a different design for every breakpoint for your latest refresh?
I know a lot of people that view my site are other designers and developers who probably, like me, resize every site to see how responsive it is. I wanted to see if I could surprise them by making super dramatic layout and style changes at each responsive breakpoint.
I realized to really subvert expectations, I needed to go beyond the typical desktop, tablet, and phone breakpoints we’re used to. So I made 20 breakpoints in total, one for every 100 pixels of browser width. It’s pretty ridiculous, honestly, but does provide that jarring surprise I was going for.
I took inspiration from the Kuleshov Effect, a term in film editing that describes “a phenomenon by which viewers derive more meaning from the interaction of two sequential shots than from a single shot in isolation.” Each of the designs isn’t all that unique on its own; it’s the relationships of the 20 different designs to each other that make each one feel special.
Also, it was just really fun to do!
What tools and technologies do you use to design and why?
I start with pen and paper and then jump into Sublime Text and design the site in the browser, usually Chrome or Firefox (those Firefox DevTools are so great). When I need to create mockups I use Illustrator, but if I can start with markup and CSS I prefer it. It’s where I’m most creative and in my element.
For the site, I use Pug for templating and Stylus for CSS preprocessing and Grunt to compile everything into a static site. This makes it quick to set up and easy to keep things clutter-free as I go.
With this refresh I used some new-to-me CSS properties. CSS Grid made creating all those layouts really easy. Blend modes and filters allowed me to style the main image differently for each design without having to pull in new assets. And of course, the site gets a lot of mileage out of media queries.
What were the main challenges you encountered, and what have you learned from your portfolio refreshes?
I originally started with each breakpoint having its own typefaces and colors, in addition to a unique layout, but quickly found it was just too much. I wanted a subtle unifying thread, so I decided to keep consistent typefaces and a consistent color scheme (black, white, red, and gold). This helped keep things manageable and created a nice constraint to work within.
Halfway through the redesign, at about 12 layouts, I needed to take a few days break. I hit a creative wall and struggled to come up with something for each new breakpoint. Turns out 20 designs is a lot! I eventually found fresh inspiration from unconventional layouts in movie title cards, print magazines, and vintage posters.
I also gained some experience designing for really large browser widths. I usually don’t like working on a big monitor, but for the larger breakpoints I had to design for a huge canvas. It’s an interesting exercise in scale and makes you think about the different ways your site can be viewed.
The different designs feature consistent typefaces and a consistent color schemeWhat’s the feedback been like?
The response has been amazing! I think a lot of people do get what I was trying to do and shared really kind words with me about it. I’ll never get over how awesome it feels to receive encouragement from my peers and people I admire in the industry.
Some pointed out that many people don’t resize their browsers at all. Totally fair and I think that’s just fine! The site still functions even if you don’t see all of the various designs.
Another critique is that switching layouts so drastically can be a confusing user experience. I agree! I did want a bit of that confusion. But yes, for a lot of projects this absolutely wouldn’t be a good approach.
The site refresh allowed Lynn to experiment with CSS Grid, blend modes, and filtersThis isn’t the only slightly unusual site you’ve created. Others include CSS drawing project A Single Div, airportcod.es, and a tribute to your home state Arizona. What’s the benefit of having side projects?
I get a lot of joy and energy from my side projects. It’s so much fun to take a project from idea to completion and share it with those who might get some joy from it too.
I’ve previously written a bit on creating projects that have no practical purpose (which is feedback I often get). In fewer words though, I do these projects to stretch creatively, to challenge people’s ideas about the web as an artistic medium, and to invite people to share in the things I love. It’s just so cool — I’ve connected with a lot of people who relate to my weird obsessions.
Every airport has a unique three-letter code. Lynn’s site features over 1000 airports and their codes from almost 200 countries.What part did your side projects play in overcoming the burnout you experienced last year?
Because my side projects bring me such joy, it was a good warning sign for me when I started to avoid working on them. I’m usually excited when I revisit them, and I always have a list of projects to work on next. But I found myself feeling tired and dreading doing this work, and I knew something must be wrong.
After discussing my feelings with my boss and coworkers, we decided I should step down from my role as a team manager and project lead and into a role that would allow for more creative freedom. Almost instantly I was able to jump into my portfolio redesign with intense focus and excitement. It became obvious that this was something I needed in my work and my side projects were the proof.
What advice do you have for fellow designers who are struggling with burnout?
I’d recommend exploring what you specifically need to be your best self and to do your best work. We are all energized or drained by different things and what works for someone else might not work for you. For a lot of people, doing side projects might be the cause of their burnout and not the relief from it. We often try to fit into roles or meet other people’s expectations and that can be hard to sustain long term.
Also, talk to someone if you can, whether it be a manager, coworker, friend, or therapist. Sometimes others can see us or our situation more clearly than we can, or they can provide encouragement and support which makes a huge difference too.