This Summer we invited one of our favorite designers and community members, Seungmee Lee, to collaborate with us on a template for our new Sites product. Lucky for us she said yes, and today we’re excited to share her template, Booklet! It’s a delightful portfolio template that feels like flipping through colored craft paper.
We also took this as opportunity to chat with Seungmee about her background and approach to design and engineering.
Hey Seungmee! Where in the world are you writing us from right now?
Hey Andy! Singapore has been my home for 2 years now. I’m enjoying the perk of being a designer, finding jobs in different countries to see and experience more things.
Can you tell us a bit about your background and how you first got into design?
I was a kid fascinated by the first iPhone, and I thought it was because of its hardware design. So I chose industrial design as a major, but I made a switch to interaction design after finishing the degree. Only after making that switch, I realized that it was the interaction design behind iPhone that I was fascinated by. I don’t regret studying industrial design as it built a foundation of my taste and thinking, but it’s just hilarious how I misinterpreted my obsession to iPhone.
You’re also a designer who builds their own ideas. Can you tell us how you first learned to code, and would you consider yourself an engineer as well?
Even when I was studying industrial design, I was constantly frustrated about how static my design is. I can make a paper prototype, 3d print the shape and all, but I couldn’t make it react when I press a button. That’s when I started to learn how to make videos to animate my ideas, and eventually start learning basics, like html and css.
Framer is now a web builder with no-code features, but I started learning it when it was a ‘prototyping tool with code’. I took some classes, and started having some fun building weird ideas. My first prototype without following existing tutorials, was for typing a morse code (I don’t even know how to translate morse code and I’m still not sure why I did that). But the process of figuring out how to detect ‘long press’ versus just a press was a fun challenge. It felt like I now have a freedom to go beyond what’s given from a tool. And I’m still doing the very same thing, building and experimenting those little ideas in my free time.
I always find something that feels new and innovative in your work that I haven’t seen before. It perfectly bridges the gap between playful experimentation and functional products that other people can use. Can you tell us a bit about your inspiration both inside and outside of software, and also about your process when coming up and refining ideas?
That’s sweet, thanks!
One thing I often do is finding an analogy from the real world. Sometimes it’s quite literal and visible (like the template I worked on, Booklet), and sometimes it’s more of an mental image for myself (for my personal website, seungmee-lee.com, I took the idea for the structure from an elevator). That really helps to refresh the perspective, thinking about what connects the analogy and the idea that I’m building, and coming up with a little new detail that’s not common but relevant.
And new technologies and libraries always give new ideas. It’s like expanding your vocabulary for visuals and interactions, so once you learn how to do a certain thing, it stays with you and comes up naturally when it’s relevant. Even for the Booklet template, I learned about extracting color when I played around with a library called color.js, and I used it here to get colors from an album cover and I’m using it again!
That’s why when I meet designers who’re intimidated by learning and mastering how to code, I always say it’s enough if you learn how to steal things out there, those open source libraries.
In terms of process, when I have some ideas that I’m interested in building, I’ll start prototyping on Framer or with code first, to see how it works (or whether it works). So after seeing that, then I’ll think about how it looks, like layouts and all those. So the actual design comes later, and usually just squeezed into what’s already working. Even for the template I worked on this time, the idea was about extracting colors from your projects to create an abstract pattern, and after building those parts, then I thought about how the information for each project should fit in there. So I didn’t really have any screens or sketches for the template in the beginning.
I love the Booklet template you created for Read.cv. Can you tell us a bit about the template (maybe design process or who it’s for), and maybe some ideas that had to get thrown out while working on it?
Initially, I wanted to make something that turns out differently for every individual. Like a personality test that shows who you’re. And one idea was to extract the color from photos and videos of their projects, to form an abstract pattern. Then, everyone will be visualized differently as they have different works. So I built the basic structure, stacking long rectangles with the prominent color from each project. That looked like colored papers stacked together, so I turned it into a concept of a booklet, making interactions to look like flipping papers. I thought the analogy makes sense, as designers used to print and bind their portfolios back then.
I tried different profiles from Read.cv to test and see how websites turn out differently, and it was really cool that these sets of colors somehow show what type of designer they are - some are very vivid, some are quite toned down, and so on. It’d work well for illustrators, graphic, branding, UI designers who have a unique color assigned for each work, so give it a shot! It gets tricky to extract right colors from photos and videos taken from a camera (that’s me).
I still have another template I’m working on, so hopefully you’ll see another one from me soon! I had another idea that I threw away. It was a template that looks like a video player, with a play/pause button, caption for project title, but once you pause, then video turns into a grid of all the projects in that video. But I ended up liking other ideas than this one :)
What advice would you have for younger designers who want to create the type of work that you do?
I’ve talked to some younger designers about that question. I always recommend them to start with fun ideas that they can willingly spend their weekends figuring things out just because it’s fun. You can watch youtubes or take online courses to learn how to code, or you can do a project that might be more meaningful like for side incomes, or to put up on a portfolio. But learning something can be tiring, and it gets hard to sustain if it’s too serious. It’s easier when you’re working on something fun, stupid, or useful only for yourself. Then you’ll just do it because you’re curious how it’d turn out, and later realize that you learned something out of it.
Even these days after I got used to building stuffs, I can feel how unproductive I am if it’s not really fun. I’m doing all those projects after work, so if there’s any pressure (e.g. I need to nail it or I need to prove myself), then it just becomes an overtime work.
So thank you Andy, for letting me work on a sites.cv template, which was just another fun project I purely enjoyed, carving out those papers and shadows!