Loading summary
Transcript79 lines
- [00:00]
A
We've been talking a lot about the newfound importance of side projects, but what's an example that actually got someone hired?
- [00:07]
B
We're in a. In an era where these, these side projects can tell you so much more about a designer than work that they were contracted to do and sort of, you know, boxed into.
- [00:16]
A
How do you position yourself as a new design engineer in today's market?
- [00:20]
B
If you can build these interactions and, you know, what makes them good and you know, what makes interacting with a product feel good, then you absolutely can be a design engineer. There's nothing to stop you.
- [00:31]
A
Welcome to Dive. My name is Rid, and this is where designers never stop learning. Today's episode is with Tommy Smith, who recently landed a job as a part of the Dive Club Talent Network. And a really big part of it was because of the quality of his portfolio. So we're going to do a deep dive into his strategy, his side project, chrono, and all of the little details that make his website so special. So let's start off by hearing why he decided to change his portfolio in the first place.
- [01:02]
B
I think I really wanted to strip back how I approached a portfolio. I think this is a problem for a lot of designers, really is, is like over engineer it, over design it. Spend so much time, like back and forth in tools like Framer and. And trying to get like so much visual design in there that I really sort of neglected the content and what I was actually showing about myself. So with this, I really wanted to take a sort of less is more approach. I didn't want to sacrifice any of the cool sort of detail parts, but I really wanted to make sure this was digestible, easy to scan, easy to read.
- [01:40]
C
How did the homepage compare your last portfolio and what you have now? Like, it's obviously very trimmed down, but where were you kind of coming from, roughly?
- [01:48]
B
It was almost designed like a product. I quickly sort of learned that, you know, lots of drop shadows and highlighting and was just not the approach. And it just looked incredibly busy. I quickly learned as well that that just doesn't for a portfolio layout particularly well. It's just not. Doesn't lend itself well to what people are used to seeing. I think in a weird way, some of that essence has lived on here. Like, you know, that we kind of have a sidebar here. It's like less traditional than like a top navigation, you know, you'd see on most sort of websites. So I think that was like a little piece that I took over. I just stripped it back. I took all the sort of unnecessary details off it and worked it into like a much more sort of simple, refined layout that I think works quite nicely in this context and still has that sort of uniqueness and a tiny insight into like what I love building is, you know, software and products. So it felt like a natural sort of progression from, you know, this really over designed, heavy sidebar to this sort of like really stripped back, but still has the nuance and detail that I wanted it to convey as well.
- [02:54]
C
It's stripped back, but it also has that little, you know, floating avatar at the top. So that juxtaposition of like hyper playfulness and then the really clean, restrained design. Because I've seen similar portfolios that have kind of the work outlined like that and you know, a simple paragraph above, but they don't have this little guy here at the top. So talk to me a little bit about why you made that, what you're trying to accomplish and also how you made it.
- [03:21]
B
As you'll probably find out, like a lot of my work is just sort of the result of an experiment and, and going so like so far with it that you know, it was resulted in this and this was me exploring Rive and just like falling in love with it. I'm someone that's always wanted to be able to like build stuff in After Effects and you know that like the really like fine tuned detail and easing and stuff. And I can't believe Rive isn't bigger than it is already. And I know it's a big product but like it should be everywhere on the Internet. Like it's like, it's like Flash 2.0, right? It's, you know, the stuff you can do with it is actually mind boggling.
- [03:58]
C
And as soon as I saw the eyes follow the cursor, I was like, ah, it's gotta be.
- [04:02]
B
Yeah. And, and like it's, it's so lightweight, it's so easy to integrate with iOS, Android, you know, web, whatever you're using it for. Like it's awesome. And yeah, this is just like a little illustration that I'd done when I was really bored and I was like, it'd be cool to have like a little, you know, mascot or something that, you know, that represents me. I felt like a robot was good, like big tech nerd. Like I love everything, technology, gaming, everything to do with, with technology. So I felt like it was quite nice and representative of me and then Rive just allowed me to sort of animate it and make it playful, a little bit squishy. The curse of following and stuff. And I guess it just sort of elevates the platform here and it elevates like my work to another level as well. And I think, you know, I'll talk a little bit more about like being a generalist and stuff, but like this was a little glimpse into that as well. You know that I like to dip my toes in many ponds and this is definitely something that I'm quite proud of because I'm not a motion designer and it's not my main discipline, but I just had so much fun building it and I think it turned out so well that I thought it would be criminal not to include it. And I think, you know, it becomes very boring without it as well. Like it's can just easily be missed as like a another portfolio in my opinion.
- [05:21]
C
I mean it would have been clean and minimalist, but yes, it would have felt like a lot of other portfolios. That immediately separates it.
- [05:29]
A
Real quick message and then we can jump back into it. Big news Animations just launched in Maubin, so you can see how world class apps use motion to guide, delight and create seamless experiences. It's just another, another reason why Mobin is an absolute cheat code for your entire design team. We use it all the time and I can't wait to start sending animation.
- [05:50]
C
Ideas to the rest of the team.
- [05:51]
A
So head to Dive Club Mobin to check it out today. That's mo b I n you probably already know about paper shaders.
- [06:01]
C
It feels like every time I open.
- [06:02]
A
Up Twitter I see somebody creating some new beautiful halftone effect. But did you know paper uses real CSS as you design? That means your layouts are already code, so you can just one click, copy as react and paste into your coding agent of choice. Paper is shipping more of their core editor every single week. And it's becoming so clear to me that this is what the future of design tools should look like. So if you haven't tried it yet, head to Dive Club Paper and start designing today.
- [06:33]
C
Okay, now onto the episode. The other thing that did stand out to me when I was originally looking at this portfolio is it's clear from how you're even designing the content that.
- [06:43]
A
You want me to click through to.
- [06:45]
C
Chrono, which is just a side project. It's not actually like your professional portfolio piece. I thought that was really interesting. So talk to me a little bit about how you thought about the hierarchy of content and why you made that decision.
- [06:58]
B
Yeah, and I think this, this is a really like, interesting topic for me because it came so Naturally, to want to push Chrono because a lot of the work that I was doing before and the industry that I was in just, like, it was just almost impossible to showcase what I actually could do and what I wanted to be doing in the future as well. And I was really conscious of sort of. Sort of gating myself into an industry or a culture that I just didn't want to be a part of anymore. So, you know, the natural progression was like, right, I don't have much work, you know, to show people in a professional setting that I'm truly, like, proud of and that I truly distinguishes me as a designer. So, like, let's build stuff. Let's show the side projects. Let's. Let's put them, like, front and center so that everyone can see what I want to build and what I have been building. It was just something I was super proud of. And I think I'd urge anyone in a similar position, you know, where they haven't had. At this point in my career, I hadn't had, like, tons of clients I hadn't had, you know, and in the last six months, that's obviously changed quite a bit for me as a result of this portfolio and stuff. So anyone in the position that I was in, if you have side projects to show, like, put them front and center. If you're proud of stuff, put it up and showcase it. You know, don't. Don't bury it. Don't sort of let it just be a side project. Because we're in an era where these side projects can tell you so much more about a designer than work that they were contracted to do and sort of, you know, boxed into. But, yeah, so that's kind of why I ended up showing Chrono as like, a sidebar item here and then in the biography, and then as like, the second body of work as well in the list of work.
- [08:39]
C
You should take us on a little tour. It's cool, because even just for context, like, your website came through the Dive Talent Network. I was kind of looking at your stuff. You got me to click on Chrono. I wasn't familiar with Bally, so it wasn't like you had this pedigree that would immediately make someone be like, yes, they're in. But then I clicked on the side project. I played with it for, like, 20 seconds, and I was like, oh, yeah, Tommy's amazing. Like, of course he should be in. So show us a little bit. It's really worth it.
- [09:05]
B
Yeah. Chrono is a creation that was born from A lot of, like, frustration with modern calendar apps and sort of task applications and, and heavily inspired as well, I think it's worth saying, by, by Amy as well. That product. I know they've gone a different route with, with what they've done now with meeting notes and stuff, but I just loved their attention to craft and detail and, and the way they'd integrated tasks and stuff was, was super inspiring to me. So I felt like I had to build it. I felt like I had to build something similar. I had some front end experience. Like, my interest and curiosity had sort of led me into to learning React and, you know, Tailwind and all the natural things to do with sort of basic front end. But where I really lacked was like logic and deep logic and complex front ends. And it's like, so what's the most complex front end you can build? Right. It's like a calendar dealing with time zones. It's like there's, there's so many facets to it that I felt like as a side project, it would be such a good learning tool to just progress my knowledge of understanding how different complexities are handled in the front end. And I think that just made me better as a designer, like, understanding the nuance of, you know, implementing like this drag to create an event or just all the small things, it really surfaced them to me and I think that made me a better designer. Undoubtedly. The basic premise is it's like a traditional calendar app, really, and it's got a lot of sort of my love and care into a lot of the details and transitions and things. So, like, I just showed the sort.
- [10:49]
C
Of drag to create the transition was what the first thing that caught my mind, like, you're doing some kind of like a scale tilt thing there. And like, even like how you thought about the origin point, like, everything about how that thing came in was such a good initial experience where it immediately just checked my box of like, okay, yep, Tommy cares.
- [11:07]
B
Yeah. And I think that's the thing with side projects as well. Right? Like, if I told you how much time I spent getting that right, like, you'd probably laugh.
- [11:13]
A
And you can tell though, you can.
- [11:15]
B
Feel it, you know, and, and I think that's. That's so important and integral to who I am as a designer and who I want to be as a design engineer going forward is I, I want everyone to know that they've interacted with something I've built. Like, it has to feel natural, it has to be timed right. The easings have to be correct and, and these Things are like, why it's so important to do this in these kind of sandboxed environments is like, you can learn these things. And now going forward, I know what made this feel good. You know, I'm not with a client, sat down with the time constraints with the, the prd and I have the freedom to experiment with things and, and just go crazy with it. And I landed on this. And little things like that are what makes an experience truly different from just another generic app or product. And I think that's my job as a design engineer, is to get those things right and to make it feel like you really have had an experience when interacting with these products.
- [12:13]
C
You hit on something interesting that I've been thinking about a lot, which is Claude code is so good at extrapolating an interaction or a visual style.
- [12:22]
A
And if you can nail it one.
- [12:24]
C
Time, then you can point at that and be like, hey, use that interaction as inspiration for how this should move and feel and make it all cohesive. And it's shockingly good. And so if you sweat the details and really obsess over one piece, it significantly decreases the marginal cost of those types of interactions in other parts of the product.
- [12:44]
B
Yeah, you've hit the nail on the head there really. Like once you've done it once, this can be reused in loads of different interactions, you know, and it might be slightly different per one, but like, it's like the foundational work. And I think that's what AI does so well. It's like the foundations allow you to just go and be creative. And I think a lot of people are scared of AI taking creativity and stripping people of creativity. But to me it's enabled the opposite. It does the things that I don't want to have to think about so that I can spend time being creative, opening my mind and trying things out. And I guess it kind of comes back to this whole new paradigm with the skills and stuff. And I know there's been loads of front end motion skills floating around from courses and stuff. I think it's a mere that has like an unbelievable one, an unbelievable course as well. And those foundational elements are really truly what, like, unlock us to just take our creativity to the next level. And I can understand why people are scared of AI and the sort of stripping of creativity, but I'd urge people to like frame it in a different way and, you know, use it as the blocks and then spend more time on the human interaction and the things that matter about these products and these interfaces.
- [14:00]
C
I don't know if this example that I'm going to share is a good example of something that really matters. But I do think that what AI has unlocked for me is it's created different types of playgrounds and opportunities for me to be creative. One example is actually similar to your portfolio. If you go back to that tab, you have this page nav here on the left. And it really stood out to me how you're doing the hover states. Like you have a little bit of an X slide right on the label and then you are using this like subtle probably what like a 3,4 pixel blur with the opacity to fade it in like that.
- [14:41]
A
And this is a technique that frankly.
- [14:43]
C
Just is irrelevant when you're designing in vector. Right. Like, I would have never thought about that level of detail. Maybe I'd have the slide, but I definitely wouldn't have been able to accomplish that type of blur effect. But now once I've kind of figured that out, and actually Emil was one of the main people that kind of made me realize, oh, wow. He sent me a pre launch page for his course and I'm like watching all of the content fade in. I'm like, what is he doing? Why does it feel so much better? And he was doing this kind of clever blur technique. It goes a really long way. And now I understand.
- [15:15]
B
Oh, cool.
- [15:15]
C
That can be part of my practice and I can very easily incorporate it where when I was just designing pictures of the product, I didn't even have the opportunity to think about that level of detail.
- [15:25]
B
Yeah, absolutely. And I think, you know, blur is awesome. Like I really, I have to refrain from using it everywhere. Same looks so good. And you're right, like you, you don't. You lose the ability to think in that, that paradigm when you're in just static figma files. Like, you can't feel it. And I think that's the biggest thing about my transition to being a design engineer is like, it's so important to feel these things. I've designed things that I think are the best thing ever. And then I've built it and it's terrible. Like, you quite often don't know until you feel it. And I think that's where, you know, designers will be taken to the next level as well. Because with next to no coding experience, you can like start to feel these things and, and quickly prototype and like feel how, how you can interact with things on the page. And that's like so underrated as a skill for a designer to actually be able to feel it, learn from it. As well and know that when you come to design things statically in the future, like I'm going to do it this way because when I built that prototype that time, I know that it felt horrible to build it that way. So I'm not going to do that. I'm going to stay away from that direction. And yeah, I think it's just all a learning tool. Like it's all elevation to the next level of what being a designer is and specifically I guess, a design engineer.
- [16:40]
C
You talked about this transition to becoming a design engineer. Maybe we could just touch on your career strategy a little bit because you're only like five years into your career, like you're not that far removed from having Junior in your title, which seems silly now looking at what the quality of what you're able to make. But you have been a traditional designer, at least on paper, in previous roles. You've mentioned this transition a few times. How are you thinking about your career from this point on?
- [17:08]
B
It's such an interesting space now because I'd always considered myself a product designer, someone that designed static assets that was then handed off to a development team. And now I think with the advent of AI, I just realized like I can take take the plunge. Like I have enough front end knowledge to be able to understand majority how these things are working and how they're being built. And the AI pipeline just allows me to build quickly and allows me to sort of take these static mockups, make them into something interactive and be able to know what is important for the developers that they need to be able to complete the handoff as well, to be able to point out specific things or build it in a certain way that fits with an existing system. A lot of the design engineer role for me is about not only enabling myself to be able to build in front end code and interactive prototypes, but my team around me as well. I'm working on a project at the moment with a client and I'm basically responsible for their pipeline from their designers. Being able to copy a FIGMA link into cursor and we use a JSON schema that reads like basically all of the tokens in the front end and then connects with the front end system. And they can make updates and push prs from just uploading that FIGMA link and just making a system that's bulletproof. These AIs aren't perfect and the models aren't perfect and the tools aren't perfect, but they're good enough now that we can build systems around taking a static design and making those updates and pushing a PR in the front end. And I think that's, that's as important as being able to do something yourself and working in a team and enabling those other people that maybe don't have the experience or the front end capabilities to actually go and build that stuff themselves. Removing that sort of barrier for anyone with no technical experience is I think going to be an important part of a design engineer's role as well as sort of just building and prototyping yourself.
- [19:19]
C
Do you plan on changing the I'm a product designer line to I'm a design engineer? That the extent to which you want to identify with this or when you're even talking in interviews with companies, is it like, you know, I'm a designer but I can own a bunch of the front end? Like it's such a granular, silly question. But also I know a lot of the industry right now is kind of wrestling with this and trying to figure out where is the line between designer who dabbles versus design engineer.
- [19:47]
B
It's such a blurred line. And you know, I'd, I'd be comfortable saying that I'm a design engineer because I now have the experience and the knowledge to build the interactions like you see on my portfolio and to build them ready to be used in a front end. And I think that is the sort of bar for me is like, would I be happy to hand this off to a developer, this portfolio site? And the answer was yes. So like, why shouldn't I be able to do that in, you know, in a job context, handing off components and different things? Like absolutely. And I think it depends on the company as well, right? I think totally in an early stage startup up like someone more like me with probably a thicker design background and a less engineering background is going to do better because can just iterate quickly and just prototype quickly in a more structured environment where the code bases are mature and everything's done a certain way. Maybe less so maybe it's more suited to a more experienced developer and someone with more engineering background. But I think the answer is like, who knows? Like it really depends. Like it depends on so many different variables that who is to say really that you know, this person is a design engineer or this person isn't. And my point to anyone like looking to apply for these roles or that has a bit of like, I've had imposter syndrome with this sort of thing for a long time. Like I, I've wanted to do this, I've wanted to transition. I don't Think my knowledge was good enough. But it's like to me, if you can build these interactions and you know what makes them good, and you know what makes you interacting with a product feel good, then you absolutely can be a design engineer. There's nothing to stop you.
- [21:27]
A
Hey, really quickly let me tell you about the all new Dive Talent Network. I've hand assembled over a hundred of the most talented designers and builders that I know so I can recommend them to my favorite companies. So if you're listening to this and you're open to new opportunities, the Talent Network is anonymous and super low pressure. It's just an easy way to see what's out there without having to post on social media. So if you're interested in joining or maybe you're looking for your next hire, head to Dive Club Talent.
- [21:56]
C
Are there any other interactions on the site that we haven't talked about that you feel like you sweated the details on?
- [22:03]
B
Yeah, probably. Another thing that I'd like to show is like the theme switcher.
- [22:08]
C
Oh, I love that.
- [22:10]
B
That's another little subtle thing.
- [22:11]
A
How'd you pull that off?
- [22:12]
B
I actually don't think it works in every browser, but it's like a. It's basically like a new API for transitions between views and that's how I was able to do it. So yeah, I'm not sure it works in like Firefox. It's always Firefox. But yeah, it's something I wanted to include.
- [22:30]
C
It's cool. Yeah.
- [22:31]
B
And then I think one of my favorite bits actually is actually like in the meat of the case studies and I doubt anyone's really seen it potentially. And it's this sort of little bar down here. So it's like a little progress bar you can see as you go into new sections, the new one flips in and then we can also expand it, the staggered animations as well and we can just navigate to different parts of the case study. And I doubt anyone's ever clicked on it or even probably noticed it, but I had so much fun building it. And again, I think it's one of those things like it just, it shows an extra level of craft and I think there's a fine line between just like throwing it all in there. Everyone knows you can overdo motion on anything and it can feel over engineered, but I think trying to put these things in subtly is so much better than like trying to make them, you know, stand out on the page or force them into someone's face because they just feel natural to the interface and they Just feel like they're part of the interface. So, yeah, that's.
- [23:36]
C
It's unexpectedly good too. You know, when you don't know that it's coming, that's when you create that reaction. You're like, oh, wow, that was. Was. That was really good.
- [23:45]
B
You know, and it has no need to be that over the top or it doesn't even really have. I don't think serves probably that much purpose in, like, quite a short case study. But, yeah, and especially the stuff like the progress bar and the. The sort of sliding in and out of the sections. It's.
- [24:01]
A
I mean, again, it was like, what.
- [24:02]
C
Is the goal of the case study? The case study is to win over that hiring manager who you were able to get them to go a little bit deeper. And if it does nothing but just speak directly to that person that's looking for people who can handle the craft, that really, truly care about the practice of design. Like, you nailed it. You know, like, this would have been a massive green flag for me. And honestly, it leaves me wondering, how the heck did you build it? You know, it's. There's so many little details about how it moves that, frankly, are better than what I've been able to get out of the box. With AI. You've obviously figured out something there, you know, and that's a great signal as well.
- [24:39]
B
Yeah. And I think. I think to loop back to what I talked a little bit about earlier is like, the foundational stuff, you know, I'm not expecting the AI to be able to build something like that out of the box, and I think that's an important sort of prerequisite. I'm going into these conversations with the model thinking as well. I don't expect it to be able to do that. I just want it to build the foundations, and I think my knowledge lets me fill in the gaps. I know quite a lot about the easing curves and staggering animations and how to make that feel good. So I don't want the AI to try and do that. That's where my creativity can take over and I can experiment and get dirty with it. That, to me, is why my workflow has just leveled up tenfold with the sort of advent of Cursor and Windsurf and all of those tools is I don't have to worry about the foundational work. I can just spend my time crafting those little details, tweaking those values. That's what takes most of my time and making sure that the nuance of every interaction is correct and right. Right. And I don't have to worry about whether I'm using a Shad CN sidebar or whether I'm, you know, I. I can just sort of allow it to, you know, build the foundations and then just focus on. On being creative.
- [25:56]
C
You know, for somebody who has only been doing this about five years, you've learned a lot. And listening to you talk, it's clear that you're able to grow quickly when you point at something that you want to invest in. So even just stepping back for a second, because a lot of people maybe feel like they're slightly earlier on the journey in dabbling in code, starting to build more, starting to work in tools like cursor and cloud code, and maybe they don't have the foundational knowledge that you were able to gather. I'm kind of curious if you have any general advice for learning either specific resources that. That played a big role in your journey, or even just general mindsets for how you approach different materials or trying new tools or frameworks for the first time. Anything that you think somebody who's a few rungs below you on the ladder could benefit from.
- [26:52]
B
My biggest asset in that period, it was staying curious and staying, you know, interested in everything, design. I think early on in my career, I used that as a selling point, and it was difficult to. Difficult to convey, you know, that I am. I love this stuff. Like, I live for it. Like, I absolutely love everything about software and building it and designing it. I have done since I was like, 14 or 15, way before I even thought I could do this as a career. And I would just urge anyone to stay curious and keep pushing the sort of edges of what you know already, you know, and keep. Keep building, like, keep seeing stuff, keep interacting with products, like, try things, you know, I've got probably thousands of apps on my ma from interacting with one of them or interacting with a specific part of one of them. I've been able to, like, go, that's really cool. Like, how could I use that in something I'm building? Or can I recreate that? And I think when you start doing that, you start to build up, like, a bank of knowledge of these things that, you know, you like and the things that you know that work well in certain scenarios. And I think that's what's really led my whole learning journey. It's like, I love to learn these things, and I love to be curious about how things were built. And, you know, interacting with different products is, like, pivotal to making sure that you're sort of like, at the precipice of what is considered great. And I think we're in the software era now. There's new tools coming out every day, there's new products coming out every day. So get like hands on with them, see how they approach certain problems, evaluate them. You might not agree with how they approach something and that's also like something to learn too. You can be your own person in that regard and you can have your own opinions and be strong in them as well. So yeah, that would be my key advice is always stay curious and stay interested in what the sort of industry leaders are doing. And every piece of design really is lent from somewhere else. And I think part of my struggle into where I am now was the imposter syndrome of feeling like I'm not this person, I'm not that person. Like you see something on X or back in the day on dribble and you think like, wow, how did they ever come up with, with that? But what you don't realize, I think in those moments is that when you're viewing those things, you're digesting your, you're learning from it, you know, and that stuff starts to creep up later in, in your career.
- [29:23]
C
One of the things that I think feels really nice in your website is how you created these little video previews in the case study. I think that goes a long way and it ties back to something that you said earlier, where you wanted to position yourself for the type of work that you wanted to get, get. You wanted to be able to sweat the details and interaction design. And so you did that. I think it worked out really well. I'm kind of curious. Can we step back from there even? And, and maybe you could talk a bit about how did you think at a high level about the way that you wanted to present these different case studies down to the content, layout, anything that you think was intentional, I'd love to hear about it.
- [30:00]
B
I've read a lot of case studies and when I was doing my portfolio, I really struggled to articulate, especially in some of the other products that were like sort of company led at a company and that weren't the side projects. It was more like, okay, what's actually interesting about this? What can I extrapolate from this that shows that it was successful, that shows that it was like, well designed. I think interestingly, from a lot of, you know, the people that you've interviewed and just like general design influences and things like that, seeing those portfolios and what stood out to me really was like, they don't need to Be long, they don't need to be long winded. They don't need a lot of text. No one's going to read all of it. That's just the harsh reality that no one is going to read all of this content. So how can we make it stand out? In the case of Chrono, it was like these videos. So it was actually showing the interface working. If someone wasn't able to click on the link or didn't want to click on the link, they can still see the interface, they can still see how it works, works. It also gave me a chance to build this like cool video player.
- [31:07]
C
Oh cool. I didn't even notice that.
- [31:09]
B
Yeah, so like little like custom things like that and then in the case of Buddy Live where it was all static, making sure they can click on it and interact with them and like.
- [31:17]
C
Swipe through that little interaction there is so great. It's shocking how few portfolios allow you to just one click zoom in on the work and then the fact that you went one little deeper and allowed you to like almost treat it like a carousel. That's really smart.
- [31:33]
B
That was me again going back to what I was saying about no one's reading all the text. So like let's just give way to just go through the design. And in my experience a lot of the times I've been hired, people were just looking for the visual design. Like they don't really care specifically for my role. This is probably differs for like serious like system roles and those sort of things. But specifically in my role they could see that I had an eye for design and that was what was important to them. Having an easy way for them to view all the images and you know, be able to interact with them was like I think pretty important because like I said, I, I don't know. Obviously you can't predict how someone's going to interact with them, but giving them the chance to do that is like to me was a no brainer.
- [32:16]
C
So another really small detail that I think others can benefit from, again as someone who has looked through a lot of portfolios is you're really leaning into the extreme end of the typography hierarchy with like the super subdued gray and then even above where you kind of had the list items and then you had these white labels. It's really skimmable and I, I appreciate that because I am someone that is not going to read all the text, but I kind of do want to read a little bit just because it gives the gist and kind of sets the frame for what I'm looking at visually. And you've made it very easy for me to just quickly scroll the page and get those one liners, even the one, the section below. This is where it really stood out to me, where you wrote those out as sentences, where it's like I can 1, 2, 3, get the business goals. I do not care about that subtext, but I might read those business goals. And it's only because you made it easy for me to do so.
- [33:11]
B
Typography is like 90% of design. All of what we're doing is like rectangles and text. So if you're going to get one thing right, like get the typography right. And I think again, to anyone, like starting out, learning, getting into the industry, that's such a good place to start. It's like learn how to make text look good on a page and it's not as difficult as people think. I, I don't think, I think it often gets overcomplicated and it's like, use consistent font sizes. Don't use too many font sizes. Yeah. Use easily scannable colors and add like hierarchy with weights and things like that. It's such an easy place to start for anyone that really has limited knowledge or is just sort of like wanting to get into it. And that will just like elevate any interface so much by just like following like some basic rules about typography.
- [34:00]
C
I have a quick process question for you.
- [34:02]
A
How much, if any of this was.
- [34:04]
C
Made, made in figma or did you jump straight into code?
- [34:07]
B
This was actually quite heavily figma at the start. A lot of the iterations were designed in Figma and I still love figma. I still love figma as a product. I'm not really one of the design engineers or designers saying that figma is not going to exist because to me it's still so much faster to just iterate in figma to move things around to change layouts. See a world where that really changes that fast and certainly doesn't become easier than it is in just like a drag and drop tool. Right. So for me, figma's always heavily involved in my process and specifically this site went through many, many iterations of lots of different layouts. I don't see a tool better than figma. Even now with the sort of AI advent that would replace figma in my workflow. It's really essential in what I do and how I iterate quickly.
- [35:05]
C
A nice nuanced take there from a design engineer because I think the perspectives that are Often elevated right now from people like you are. Canvas is dead. But I couldn't agree more. I love exploring, especially when I'm early in the process. Like it's just nothing easier than Command D and making a mess and then doing it again and again and 15 more times.
- [35:24]
B
Yeah. And I think to me that's like the inherent difference between the designer and the engineer. You know, from a design background, creative background, a tool like figma is incredible if your brain works, like, just want to get ideas out, I want to get stuff down on the page. I don't care about structure particularly. I just want a canvas that I can navigate that's such a designer coded frame of mind. And then I think the opposite end of the spectrum is the engineer, the structured approach. And I think I almost go back to school and it's like the people that were good at maths or the people that were like good at creative writing and all those kind of things, like, to me they're like completely different frames of mind and therefore, you know, they need different tools to be able to basically get the best out of themselves. And I think from a designer background, like, I definitely put myself in like that camp, like the sort of, like, I love to just get ideas down. Like I'm a creative, really. Like I love making music, I love writing, I love, I love, you know, all those kind of things. So for me, Figma is just the tool that itches my brain, right, that I can just get everything that I've got going on up here, like out onto a page and just iterate quickly, quickly, quickly. And in my experience, a lot of the engineers just don't get it. They just don't get. They just don't understand why it's needed or why it's good. You know, part of my job now really as a design engineer, engineer is sort of crossing those boundaries and frames of mind of the two ends of the spectrum, how can we make it so that they can have parity on these different things? How can we make it so that these FIGMA designs make sense to an engineer? And how can we make it so that this code makes sense to a designer? And I see that as like a super interesting problem that still hasn't quite been solved.
- [37:16]
C
We've covered a lot of ground. I want to make sure that we're not missing anything. Are there any other intentional decisions that you made with this portfolio that you want to shine a light on before we head out here?
- [37:27]
B
I'm super proud of this and like my iconography experience in General. And I think this touches on what I was saying a little bit earlier about, like, I like to think of myself as a generalist, like, with the motion stuff in Rive and iconography was another avenue that I went down. And this has actually been probably more important to my progress as a designer than any other project I've done. Because really, I use this in absolutely everything I design. Like, it's a full suite now of icons that I design with, and it makes my designs me and unique. I loved having ownership of that. Like, I loved having, you know, like, this is my icon set. Like, I made this, only I use this. And like, you can see it in Chrono. It's used in everything in Chrono and all my other side projects, they all use literally just my icon set. And I had so much fun learning about the nuance of iconography and some frustrations learning geography. But it's like, it's at a place now where, like, I'm really, like, proud of it and, like, it really is uniquely me as well. And I think that's something that not. Probably not a lot of designers have as well, is, like, their own icons to use and stuff. And it was super worthwhile. And I don't regret spending so much time on it at all because like I said, it's just. It's sort of found its way into everything that I do.
- [38:51]
C
Really, I love that. And I think it says so much about. About your mentality and how you approach the craft. And honestly, you're on a heck of a trajectory. I'm really excited to see where you go from here. So, Tommy, thanks for coming on and pulling back the curtain, sharing a little bit about how you think and your journey, all this work, it's really, really inspiring stuff. Appreciate it.
- [39:12]
B
It's been awesome. Thank you for having me.
- [39:14]
A
Before I let you go, I want to take just one minute to run you through my favorite products, because I'm constantly asked what's in my stack. Framer is how I build websites. Genway is how I do research. Granola is how I take notes during crit. Jitter is how I animate my designs. Lovable is how I build my ideas in code. Mobin is how I find design inspiration. Paper is how I design like a creative. And Raycast is my shortcut every step of the way. Now, I've hand selected these companies so that I can do these episodes full time.
- [39:49]
C
So by far the number one way.
- [39:51]
A
To support the show is to check them out. You can find the full list at Dive club partners.