Tommy Smith - How side projects can land you a dream job

00:00:00We've been talking a lot about thenewfound importance of side projects,but what's an example that actually gotsomeone hired?>> We're in a in a an era where these theseside projects can tell you so much moreabout a designer than work that theywere contracted to do and sort of, youknow, boxed into.>> How do you position yourself as a newdesign engineer in today's market?>> If you can build these interactions andyou know what makes them good and youknow what makes interacting with aproduct feel good, then you absolutelycan be a design engineer. There'snothing to stop you.>> Welcome to Dive Club. My name is Red andthis is where designers never stoplearning. Today's episode is with TommySmith who recently landed a job as apart [music] of the Dive Club talentnetwork and a really big part of it wasbecause of the quality of his portfolio.So, we're going to do a deep dive intohis strategy, his side project Krono,and all of the little details that makehis website so special. So, let's startoff by hearing why he decided to changehis portfolio in the first place.>> I think I really wanted to strip backhow I approached a portfolio. I thinkthis is a problem for a lot of designersreally is is like overg engineer it,overd design it, spend so much time likeback and forth in inside

00:01:15tools likeframer and and trying to get like somuch visual design in there that Ireally sort of neglected the content andwhat I was actually showing aboutmyself. So with this, I really wanted totake a sort of less is more approach. II didn't want to sacrifice any of thecool sort of detail parts. Um, but Ireally wanted to make sure this wasdigestible, easy to scan, easy to read.>> How did the homepage compare your lastportfolio and what you have now? Likeit's obviously very trimmed down, butwhere were you kind of coming fromroughly?>> It was almost designed like a product. Iquickly sort of learned that, you know,lots of drop shadows and highlightingand was just not the approach and itjust looked incredibly busy. I quicklylearned as well that that just doesn'twork for a portfolio layout particularlywell. It's just not doesn't lend itselfwell to to what people are used toseeing. I think in a weird way some ofthat essence has lived on here like youknow we we kind of have a sidebar here.It's it's like probably uh lesstraditional than like a top navigationyou know you'd see on most sort ofwebsites. So I think that was like alittle piece that I took over. I juststripped it back. I took all the sort ofunnecessary details off it and worked itinto like a much more sort of simple

00:02:31refined layout that I think works quitenicely in this context and still hasthat sort of uniqueness and a tinyinsight into like what I love buildingis is you know software and products. Soit felt like a natural sort ofprogression from you know this reallyoverdesigned heavy sidebar to this sortof like really stripped back but stillhas the the nuance and detail that Iwanted it to convey as well. It'sstripped back, but it also has thatlittle, you know, floating avatar at thetop. So, that juxtiposition of likehyper playfulness and then the reallyclean restrained design cuz I I've seensimilar portfolios that have kind of thethe work outlined like that and, youknow, simple paragraph above, but theydon't have this little guy here at thetop. So, talk to me a little bit aboutwhy you made that, what you were tryingto accomplish, and also how you made it.As you'll probably find out, like a lotof my work is just sort of the result ofan experiment and and going so like sofar with it that, you know, it wasresulted in in this. And this was meexploring Rive and just like falling inlove with it. I'm someone that's alwayswanted to be able to like build stuff inAfter Effects and you know that like thereally like fine-tuned detail and easingand stuff and I

00:03:46can't believe RIVE isn'tbigger than it is already. And I knowit's a big product, but like it shouldbe everywhere on the internet. Like it'slike it's like Flash 2.0, right? It's,you know, the stuff you can do with itis actually mindboggling. And>> as soon as I saw the eyes follow thecursor, I was like, "Ah, it's got to beright.">> Right. Yeah. And and like it's it's solightweight. It's so easy to integratewith iOS, Android, you know, web,whatever you're using it for. Like it'sit's awesome. And yeah, this is justlike a little illustration that I'd donewhen I was really bored and I was like,it'd be cool to have like a little, youknow, mascot or something that, youknow, that represents me. I felt like arobot was good, like big tech nerd. LikeI love everything technology, gaming,everything to do with with technology.So, I felt like it was quite nice andrepresentative of me. And then RI justallowed me to sort of animate it andmake it playful, a little bit squishy,like the the cursor following and stuff.And it I I guess it just sort ofelevates the platform here and itelevates like my work to to anotherlevel as well. And I think, you know, II'll talk a little bit more about likebeing a generalist and stuff, but likethis was a little glimpse into that aswell. You know, that I like to dip mytoes in in many ponds and this isdefinitely something that I'm

00:05:01quiteproud of because I'm not a motiondesigner and like it's not my my maindiscipline. But I just had so much funbuilding it and I think it turned out sowell that I thought it would be criminalnot to include it and I think you knowit becomes very boring without it aswell. Like it's can just easily bemissed as like a another portfolio in myopinion but>> I mean it would have been clean andminimalist but yes it would have feltlike a lot of other portfolios thatimmediately separates it. Real quickmessage and then we can jump back intoit. Big news, animations just launchedin Mobin. So you can see how world-classapps use motion to guide, [music]delight, and create seamlessexperiences. It's just another reasonwhy Mobin is an absolute [music] cheatcode for your entire design team. We useit all the time, and I can't wait tostart sending animation ideas to therest of the team. So head todive.comclub/mobinto check it out today. That's m ob i n.You probably already know about papershaders. It feels like every time I openup Twitter, I see somebody creating somenew beautiful halftone effect, [music]but did you know paper uses real CSS asyou design? That means your layouts arealready code. So you can just one-clickcopy [music] as React and paste into

00:06:16your coding agent of choice. Paper isshipping more of their core editor everysingle week. And it's becoming so clearto me that this is what the future ofdesign tools should look like. So, ifyou haven't tried it yet, head todive.club/paper [music]and start designing today. Okay, now onto the episode. The other thing that didstand out to me when I was originallylooking at this portfolio is it's clearfrom how you're even designing [music]the content that you want me to clickthrough to Chrono, which is just a sideproject. It's not actually like yourprofessional portfolio piece. I thoughtthat was really interesting. So talk tome a little bit about how you thoughtabout the hierarchy of content and whyyou made that decision.>> Yeah, and I think this this is a reallylike interesting topic for me because itcame so naturally to want to push Chronobecause a lot of the work that I wasdoing before and the industry that I wasin just like it was just almostimpossible to showcase what I actuallycould do and what I wanted to be doingin the future as well. and I was reallyconscious of of sort of uh sort ofgating myself into an industry or aculture that I just didn't want to be apart of anymore. So, you know, thenatural progression was like, right, Idon't have much work,

00:07:31you know, to showpeople in a professional setting thatI'm truly like proud of and that I trulydistinguishes me as a as a designer. So,like let's build stuff. Let's let's showthe side projects. let's let's put themlike front and center so that everyonecan see what I want to build and what Ihave been building. It was justsomething I was super proud of and Ithink I'd urge anyone in a similarposition, you know, where they haven'thad at this point in my career, I hadn'thad like tons of clients. I hadn't had,you know, and in the last 6 monthsthat's obviously changed quite a bit forme as a result of this portfolio andstuff. So, anyone in the position that Iwas in, if you have side projects toshow, like put them front and center. Ifyou're proud of stuff, put it up and andshowcase it, you know, don't don't buryit. Don't sort of let it just be a sideproject because um we're in a in a anera where these these side projects cantell you so much more about a designerthan work that they were contracted todo and sort of you know boxed into. Butyeah, so that that's kind of why I Iended up showing Chrono as like asidebar item here and then in the in thebiography and then as like the secondbody [clears throat] of work as well inthe list of work.>> You should take us on a little tour.It's cool because even just for contextlike your website came through the divetalent network. I was kind of looking atyour

00:08:47stuff. You got me to click onChrono. I wasn't familiar with Bal. So Iit wasn't like you had this pedigreethat would immediately make someone belike, "Yes, they're in." But then Iclicked on the side project. I playedwith it for like 20 seconds and I waslike, "Oh yeah, Tommy's amazing." Like,"Of course he should be in." So show usa little bit. It's really worth it.>> Yeah. Chrono is a creation that was bornfrom a lot of like frustration withmodern calendar apps and sort of taskapplications and uh and heavily inspiredas well. I think it's worth saying by byAmy as well um that product and I knowthey've gone a different route with withwhat they've done now uh with meetingnotes and stuff, but I just loved theirattention to craft and and detail andand the way they'd integrated tasks andstuff was was super inspiring to me. SoI felt like I had to build it. I feltlike I had to build something similar. Ihad some front-end experience like myinterest and curiosity had sort of ledme into to learning react and you knowtailwind and all the natural things uhto do with sort of basic front end butwhere I really lacked was like logic anddeep logic and complex front ends andit's like

00:10:02so what's the most complexfront end you can build right it's it'slike a calendar dealing with time zonesit's it's like there's there's so manyfacets to it that I felt like as a sideproject, it would be such a goodlearning tool to just progress myknowledge of understanding how differentcomplexities are handled in the frontend. And I think that just made mebetter as a designer like understandingthe nuance of you know implementing likethis drag to create an event or just allthe small things. It really surfacedthem to me and I think that made me abetter designer undoubtedly. The basicpremise is um it's like a traditionalcalendar app really and it's got a lotof sort of my love and care into a lotof the details and transitions andthings. So, like I just showed the sortof drag to create>> the transition was what the first thingthat caught my mind. Like you're doingsome kind of like a scale tilt thingthere and like even like how you thoughtabout the origin point. Like everythingabout how that thing came in>> was such a good initial experience whereit immediately just checked my box oflike, okay, yeah, Tommy cares.>> Yeah. And I think that's the thing withside projects as well, right? Like if Itold you how much time I spent gettingthat right, like you'd probably laugh.And>> you can tell though, you can feel it,you know?>> Exactly. And and I think that's

00:11:17that'sso important and integral to who I am asa designer and who I want to be as adesign engineer going forward is I Iwant everyone to know that they'veinteracted with something I've built.Like it has to feel natural. It has tobe timed right. The easings have to becorrect. And and these things are likewhy it's so important to do this inthese kind of sandboxed environments islike you can learn these things. And nowgoing forward, I know what made thisfeel good. You know, I'm not with aclient sat down with the timeconstraints, with the the PRD, and Ihave the freedom to experiment withthings and and just go crazy with it.And I landed on this. And little thingslike that are what makes an experiencetruly different from just anothergeneric app or product. And I thinkthat's my job as a design engineer is toget those things right and to make itfeel like you really have had anexperience when interacting with theseproducts. You hit on somethinginteresting that I've been thinkingabout a lot, which is Claude Code is sogood at extrapolating an interaction ora visual style. And if you can nail itone time, then you can point at that andbe like, "Hey, use that interaction asinspiration for how this should move andfeel and make it all cohesive."

00:12:32And it'sshockingly good. And so if you sweat thedetails and really obsess over onepiece, it significantly decreases themarginal cost of those types ofinteractions in other parts of theproduct. Yeah, you've hit the nail onthe head there really. Like once you'vedone it once, this can be reused inloads of different interactions, youknow, and it might be slightly differentper one, but like it's like thefoundational work. And I think that'swhat AI does so well. It's like thefoundations allow you to just go and becreative. And I think a lot of peopleare scared of AI, you know, takingcreativity and and stripping people ofcreativity. But to me, it's it's enabledthe opposite. Like it does the thingsthat I don't want to have to think aboutso that I can spend time being creative,opening my mind and and trying thingsout. And I guess it kind of comes backto like this whole new paradigm with theskills and stuff. And I know there'sbeen loads of sort of like front-endmotion skills floating around fromcourses and stuff. I think it's Emilthat has like an unbelievable one um anunbelievable course as well. And thosefoundational elements are really trulywhat like unlock us to to just take ourcreativity to the next level. And I canunderstand why people are scared of ofAI and the the sort of stripping ofcreativity. But

00:13:48I'd urge people to likeframe it in a different way and you knowuse it as you know the blocks and thenspend more time on the the humaninteraction and the things that thatmatter about these products and theseinterfaces.>> I don't know if this example that I'mgoing to share is a good example ofsomething that really matters. But I dothink that what AI has unlocked for meis it's created different types ofplaygrounds and opportunities for me tobe creative. One example is actuallysimilar to your portfolio. If you goback to that tab, you have this pageennav here on the left. And it reallystood out to me how you're doing thehover states. Like you have a little bitof an X slide right on the label andthen you are using this like subtleprobably what like a three four pixelblur with the opacity to fade it in likethat. And this is a technique thatfrankly just is irrelevant when you'redesigning in vector, right? Like I wouldhave never thought about that level ofdetail. Maybe I'd have the slide, but Idefinitely wouldn't have been able toaccomplish that type of blur effect. Butnow once I've kind of figured that outand actually Emil was one of the mainpeople that kind of made me realizelike, oh wow, he sent me a pre-launchpage

00:15:03for his course and I'm likewatching all of the content fade in. I'mlike, what is he doing? Why does it feelso much better? and he was doing thiskind of clever blur technique. It goes areally long way and now I understand, ohcool, that can be part of my practiceand I can very easily incorporate itwhere when I was just designing picturesof the product, I didn't even have theopportunity to think about that level ofdetail.>> Yeah, absolutely. And I think, you know,it blurs awesome. Like I I really justlike I have to refrain from using iteverywhere because it looks so good. Andyou're right, like you you don't youlose the ability to think in that thatparadigm when you're in just staticFigma files. Like you can't feel it. AndI think that's the biggest thing aboutmy transition to being a design engineeris like it's so important to feel thesethings. I've designed things that Ithink are the best thing ever and thenI've built it and it's terrible. Likeyou quite often don't know until youfeel it. And I think that's where, youknow, designers will be taken to thenext level as well because with next tono coding experience, you can kind oflike start to feel these things and andquickly prototype and and and like feelhow how [clears throat] you can interactwith things on the page. And that's likeso underrated as a skill for a designerto actually be able to feel it, learnfrom it as

00:16:18well and know that when youcome to design things statically in thefuture, like I'm going to do it this waybecause when I built that prototype thattime, I know that it felt horrible to tobuild it that way. So I'm not going todo that. I'm going to stare away fromthat direction. Um, and yeah, I thinkit's just all a learning tool. Like it'sall elevation to the next level of ofwhat being a designer is. Andspecifically, I guess a design engineer.You talked about this transition tobecoming a design engineer. Maybe wecould just touch on your career strategya little bit because you're only likefive years into your career. Like you'renot that far removed from having juniorin your title, which seems silly nowlooking at what the quality of whatyou're able to make, but you have been atraditional designer at least on paperin previous roles. You've mentioned thistransition a few times. How are youthinking about your career from thispoint on? It's it's such a aninteresting space now because I'd alwaysconsidered myself a product designer,someone that designed static assets thatwas then handed off to a developmentteam. And now I think with the advent ofAI, I just realized like I can take theplunge like I have enough front-endknowledge to be able to, you know,understand majority how these things areworking and how they're being built. Andthe AI pipeline

00:17:33just allows me to buildquickly and allows me to sort of liketake these static mockups, make theminto something interactive and and beable to know what is important for thedevelopers that they need to be able tocomplete the handoff as well. Do youknow to to be able to point out specificthings or um build it in a certain waythat fits with an existing system? A lotof the like design engineer role for meis is about not only enabling myself toto be able to build in in front-end codeand and and interactive prototypes, butlike my team around me as well, like I'mworking on a project at the moment umwith a client and I'm basicallyresponsible for their pipeline fromtheir designers being able to copy aFigma link into cursor and we use like aa a JSON schema that reads likebasically all of the tokens in the frontend uh and then connects with thefront-end system and they can makeupdates and and push PRs from just aFigma link and just making a systemthat's bulletproof. These AIs aren'tperfect and the the models aren'tperfect and the tools aren't perfect,but they're good enough now that we canbuild systems around, you know, taking astatic design and

00:18:49making those updatesand and pushing a PR in the front end.And I think that's as important as beingable to do something yourself andworking in a team and and enabling thoseother people that maybe don't have theexperience or the the front-endcapabilities to, you know, actually goand build that stuff themselves. Likeremoving that sort of barrier for anyonewith no technical experience is, Ithink, going to be an important part ofa design engineer's role as well as sortof just building and prototypingyourself. Do you plan on changing theI'm a product designer line to I'm adesign engineer? Like is that the extentto which you want to identify with thisor when you're even talking ininterviews with companies is it like Iyou know I'm a designer but I can own abunch of the front end like it's such agranular silly question but also I knowa lot of the industry right now is kindof wrestling with this and trying tofigure out where is the line betweendesigner who dabbles versus designengineer. is such a blurred line. Andyou know, I' I'd be comfortable sayingthat I'm a design engineer because I nowhave the experience and the knowledge toto build the interactions like you seeon my portfolio and to build them readyto be used in a front end. And

00:20:04I thinkthat is the sort of bar for me is likewould I be happy to hand this off to adeveloper this portfolio site? And theanswer was yes. So like why shouldn't Ibe able to do that in you know in a jobcontext handing off components anddifferent things like absolutely and Ithink it depends on the company as wellright I think>> totally>> in an early stage startup like someonemore like me with a probably a thickerdesign background and a less engineeringbackground is going to do better becausecan just iterate quickly and justprototype quickly in a more structuredenvironment where you know the codebases are mature and you knoweverything's done a certain way maybeless so maybe it's more suited to a moreexperienced developer and someone withmore engineering background but I thinkthe answer is like who knows like itreally depends like it depends on somany different variables that who is tosay really that you know this person isa design engineer or this person isn'tand my point to anyone like looking toapply for these roles or that has a bitof like I've had imposter syndrome withthis sort of thing for a long time likeI I've wanted to do this I've wanted totransition position. I don't think myknowledge was good enough. But it's liketo me, if you can build theseinteractions and you know what makesthem good and

00:21:19you know what makesinteracting with a product feel [music]good, then you absolutely can be adesign engineer. There's nothing to stopyou. Hey, really quickly, let me tellyou about the allnew dive talentnetwork. I've hand assembled over ahundred of the most talented designersand builders that I know so I canrecommend them to my favorite companies.So, if you're listening to this andyou're open to new opportunities, thetalent network is anonymous and superlow pressure. It's [music] just an easyway to see what's out there withouthaving to post on social media. So, ifyou're interested in joining or maybeyou're looking for your next hire, headto dive.comclub/talent. [music]

00:21:56Are there any other interactions on thissite that we haven't talked about thatyou feel like you've sweated the detailson? Yeah, probably another thing thatI'd like to show is like the themeswitcher. Um,>> I love that.>> That's another little subtle thing.>> How do you pull that off?>> I I actually don't think it works inevery browser, but it's like a it'sbasically like a new API for umtransitions between views and that's howI was able to do it. Um, so yeah, Idon't I'm not sure it works in likeFirefox. It's always Firefox, but yeah,it's something I wanted to include. Um,>> it's cool. Yeah. And then I think one ofmy favorite bits actually is actuallylike in the meat of the case studies andI I doubt anyone's really seen itpotentially and it's this sort of littlebar down here. So it's like a littleprogress bar. You can see as you go intonew sections the new one flips in. Umand then we can also expand it.>> Oh, it's so good.>> The the staggered animations as well.And uh we can just like navigate todifferent parts of the the uh the casestudy. Um, and I don't I I doubtanyone's ever clicked on it or evenprobably noticed it, but I had so muchfun building it. And again, I think it'sone of those things like it just itshows like an extra

00:23:11level of craft. And>> Mhm.>> I think there's a fine line between justlike throwing it all in there. Everyoneknows you can overdo motion on anythingand and it can feel overengineered, butI think trying to put these things insubtly is so much better than liketrying to make them, you know, stand outon the page or force them into someone'sface because they just feel natural tothe interface and they just feel likethey're part of the interface. Um, soyeah, that's>> 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 that wasreally good." you know,>> and it has no need to be that over thetop or it it doesn't even really have Idon't think serves probably that muchpurpose in like quite a short casestudy. But yeah, and especially thestuff like the progress bar and the thesort of sliding in and out of thesections is uh>> I mean again I was like what is the goalof the case study? The case study is towin over that hiring manager who youwere able to get them to go a little bitdeeper. And if it does nothing but justspeak directly to that person that'slooking for people who can handle thecraft, that really truly care about thepractice of design, like you nailed it.You know, like this would have been amassive green flag for me. And honestly,it leaves me wondering how the heck didyou

00:24:26build it? you know, it's it'sthere's so many little details about howit moves that frankly are better thanwhat I've been able to get out of thebox with AI. You've obviously figuredout something there, you know, andthat's a great signal as well.>> Yeah. And I think I think to loop backto to what I talked a little bit aboutearlier, it's like the foundationalstuff, you know, I'm not expecting theAI to to be able to build something likethat out of the box. And I think that'san important sort of prerequisite. I'mgoing into these conversations with thethe model thinking as well. You know, II 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 inthe gaps. Like I know, you know, quite alot about like the easing curves and andstaggering animations and how to makethat feel good. So, I don't want the AIto try and do that. That's where mycreativity can take over and I can, youknow, experiment and and get dirty withit. That to me is like why my workflowhas just leveled up tenfold with thesort of advent of cursor and wind surfand all of those tools is I don't haveto worry about the foundational work. Ican just spend my time crafting thoselittle details tweaking those values.you know that that's what takes most ofmy time and making sure that like thenuance of of

00:25:41every interaction iscorrect and right and I don't have toworry about whether I'm using a shadensidebar or whether I'm you know I I canjust sort of allow it to you know buildthe foundations and then just focus onon being creative. You know, forsomebody who has only been doing thisabout 5 years, you've learned a lot andlistening to you talk, it's clear thatyou're able to grow quickly when youpoint at something that you want toinvest in. So even just stepping backfor a second because a lot of peoplemaybe feel like they're slightly earlieron the journey in dabbling in code,starting to build more, starting to workin tools like cursor and cloud code andmaybe they don't have the foundationalknowledge that you were able to gather.I'm kind of curious if you have anygeneral advice for learning, eitherspecific resources that played a bigrole in your journey or even justgeneral mindsets for how you approachdifferent materials or trying new toolsor frameworks for the first time.Anything that you think somebody who's afew rungs below you on the ladder couldbenefit from. My biggest asset in thatperiod it was staying curious and

00:26:56staying you know interested ineverything design. I think early on inmy career I used that as a selling pointand it was difficult to convey you knowthat I am I love this stuff like I livefor it like I absolutely love everythingabout software and building it anddesigning it. I have done since I waslike 14 or 15 way before I even thoughtI could do this as a career. And I wouldjust urge anyone to to stay curious andkeep pushing the sort of edges of ofwhat you know already, you know, and andkeep keep building, like keep seeingstuff, keep interacting with products,like try things, you know, I've gotprobably thousands of apps on my Macfrom interacting with one of them orinteracting with a specific part of oneof them. I've been able to like go,that's [clears throat] really cool. likehow could I use that in something I'mbuilding or can I recreate that? And Ithink when you start doing that, youstart to build up like a bank of ofknowledge of these things that you knowyou like and the things that you knowthat work well in certain scenarios. AndI think that's what's really led mywhole learning journey is like I love tolearn these things and I love to becurious about how things were built.And, you know, interacting withdifferent products is is

00:28:12like pivotal tomaking sure that you're sort of like atthe the precipice of what is isconsidered great. And I think, you know,we're in the software era now. You know,there's there's new tools coming outevery day. There's new products comingout every day. So, get like hands-onwith them, see how they approach certainproblems, evaluate them. You might notagree with how they approach something.And that's also like something to learntoo. You know, you you can be your ownperson in that regard. and you can haveyour own opinions and be strong in themas well. So yeah, that that would be mykey advice is always stay curious andstay interested in what the the sort ofindustry leaders are doing. And everypiece of design really is is lent fromsomewhere else. And I [snorts] thinkpart of my struggle into where I am nowwas the imposter syndrome of feelinglike I'm not this person, I'm not thatperson. Like you see something on on Xor on on back in the day on Dribble andyou think like, wow, how did they, youknow, ever come up with that? But whatyou don't realize, I think, in thosemoments, is that when you're viewingthose things, you're digesting it.you're you're learning from it, youknow, and that stuff starts to creep uplater in in your career.>> One of the things that I think feelsreally nice in your website is

00:29:27how youcreated these little video previews inthe case study. I think that goes a longway and it ties back to something thatyou said earlier where you wanted toposition yourself for the type of workthat you wanted to get. You wanted to beable to sweat the details in interactiondesign and so you did that. I think itworked out really well. I'm kind ofcurious, can we step back from thereeven and and maybe you could talk a bitabout how did you think at a high levelabout the way that you wanted to presentthese different case studies down to thecontent layout? Anything that you thinkwas intentional, I'd love to hear aboutit. I've read a lot of case studies andwhen I was doing my portfolio I reallystruggled to articulate especially insome of the other projects that werelike sort of companyled at a company andthat weren't the side projects. It wasmore like okay what's actuallyinteresting about this? What can Iextrapolate from this that shows that itwas successful that shows that it waslike welldesigned? I think interestinglyfrom a lot of, you know, the the peoplethat you've interviewed and just likegeneral design influencers and thingslike that, seeing those portfolios andwhat stood out to me really was likethey don't need to be long. Like theydon't need to be long-winded. They don'tneed a lot of text.

00:30:42No one's going toread all of it. Like that's just, youknow, the the harsh reality that no oneis going to read all of this content.So, how can we make it stand out? In thecase of Krono, it was like these videos.So, it was, you know, actually showingthe interface working. If someone wasn'table to click on the link or didn't wantto click on the link, they can still seethe interface, they can still see how itworks. It also gave me a chance to buildthis like cool video player. Um>> Oh, cool. I didn't even notice that.>> Yeah. So, like little like custom thingslike that. And then in the case of BaddyLive where it was all static, makingsure they can click on it and interactwith them and like swipe through.>> That little interaction there is sogreat. It's shocking how few portfoliosallow you to just one click zoom in onthe work. And then the fact that youwent one level deeper and allowed youlike almost treat like a carousel.That's really smart.>> That was me again going back to what Iwas saying about no one's reading allthe text. So like let's just give tojust go through the design. And in myexperience, a lot of the times I've beenhired, people were just looking for thevisual design. Like they don't reallycare. Specifically for my role, this isprobably differs for like serious likesystem roles and and those sort ofthings, but specifically in my role,they could see that I had an eye fordesign and that

00:31:58was what was importantto them.>> Having an easy way for them to view allthe the images and, you know, be able tointeract with them was like, I thinkpretty important because like I said, II don't know, obviously you can'tpredict how someone's going to interactwith them, but giving them the thechance to do that is like to me was ano-brainer. So,>> another really small detail that I thinkothers can benefit from, again, assomeone who's looked through a lot ofportfolios is you're really leaning intothe extreme end of the typographyhierarchy with like the super subduedgray and then even above where you kindof had the list items and then you hadthese white labels. It's really skimableand I I appreciate that because I amsomeone that is not going to read allthe text, but I kind of do want to reada little bit just because it gives thegist and kind of sets the frame for whatI'm looking at visually. And you've madeit very easy for me to just quicklyscroll the page and get those oneliners.Even the one the section below this iswhere it really stood out to me whereyou wrote those out as sentences therewhere it's like I can one two three getthe business goals. I do not care aboutthat subtext, but I might read thosebusiness goals and it's only because youmade it easy for me to do so. Typographyis like 90% of design.

00:33:13All of all ofwhat we're doing is like rectangles andtext. So, if you're going to get onething right, like get the typographyright. And I think again to anyone likestarting out, learning, getting into theindustry, that's such a good place tostart. It's like learn how to make textlook good on a page. And it's not asdifficult as people think. I don't thinkI think it often gets over complicatedand it's like use consistent font sizes.Don't use too many font sizes. Um yeah,use easily scannable colors and and addlike hierarchy with with weights andthings like that. It's such an easyplace to start for anyone that reallyhas limited knowledge or is just sort oflike wanting to get into it and thatwill just like elevate any interface somuch by just like following like somebasic rules about typography. I have aquick process question for you. How muchif any of this was made in Figma or didyou jump straight into code?>> This was actuallyquite heavily Figma at the start. A lotof the in iterations were designed inFigma and I and I still love Figma. Istill love Figma as a product. I'm notreally one of the design engineers ordesigners saying that Figma is not goingto exist because to me it's

00:34:28like it'sstill so much faster to just iterate inFigma like to move things around to youknow change layouts. I can't see a worldwhere that really changes that fast andcertainly doesn't become easier than itis in just like a drag and drop tool.Right? So for me, Figma's always heavilyinvolved in my process and specificallythis site went through many, manyiterations of lots of different layouts.I don't see a tool better than Figmaeven now with the sort of AI advent thatwould replace Figma in my workflow. It'sreally essential in what I do and how Iiterate quickly. A nice nuanced takethere from a design engineer because Ithink the perspectives that are oftenelevated right now from people like youare canvas is dead. But I couldn't agreemore. I love exploring especially whenI'm early in the process. Like it'sthere's nothing easier than command Dand making a mess and then doing itagain and again and 15 more times.>> Yeah. And I think to me that's like theinherent difference between the designerand the engineer. You know, from adesign background and a creativebackground, a tool like Figma isincredible. If your brain works likejust want to get ideas out, I want toget stuff down on the page. I don't careabout structure particularly.

00:35:43I justwant a canvas that I can navigate.That's such like a designer coded likeframe of mind. And then I think theopposite end of the spectrum is like thethe engineer the like structuredapproach. And I think I almost go backto school and it's like the people thatwere good at maths or the people thatwere like good at creative writing andart and all those kind of things. Liketo me they're like completely differentframes of mind and therefore you knowthey need different tools to be able tobasically get the best out ofthemselves. And I think from a designerbackground like I definitely put myselfin like that camp like the sort of likeI love to just get ideas down like I'm acreative really like I love makingmusic. I love writing. I love you knowall those kind of things. So for me,Figma is just the tool that itches mybrain, right? That I can just geteverything that I've got going on uphere, like out onto a page and justiterate quickly, quickly, quickly. Andin my experience, a lot of the engineersjust don't get it. They just don't get[laughter] they just don't understandwhy it's needed or why it's good. Youknow, part of my job now really as adesign engineer is sort of crossingthose boundaries and frames of mind ofof the two ends of the spectrum.

00:36:58How canwe make it so that, you know, they canhave parity on these different things?How can we make it so that these Figmadesigns make sense to an engineer? Andhow can we make it so that this codemakes sense to a designer? And I seethat as like a super interesting problemthat still hasn't like quite beensolved.>> We've covered a lot of ground. I want tomake sure that we're not missinganything. Are there any otherintentional decisions that you made withthis portfolio that you want to shine alight on before we head out here? I'msuper proud of this and like myiconography experience in general. And Ithink this touches on what I was sayinga little bit earlier about like I liketo think of myself as a generalist likewith the the motion stuff in Rive andiconography was another avenue that Iwent down and this has actually beenprobably more important to my progressas a designer than any other projectI've done because>> really>> I use this in absolutely everything Idesign. like it's a full suite now oficons that I design with and it makes mydesigns me and unique. I loved havingownership of that. Like I loved havingyou know like the this is my icon setlike I made this only I use this andlike you can see it in Chrono. It's

00:38:14usedin everything in Chrono and all my otherside projects they all use literallyjust my icon set. And uh I had so muchfun learning about the nuance oficonography and some frustrationslearning the iconography. Um [snorts]but it's like it's at a place now wherelike I'm really like proud of it andlike it really is uniquely me as well.And I think that's something that notprobably not a lot of designers have aswell is like their own icons to use andstuff. And it was super worthwhile and Idon't regret spending so much time on itat all cuz like I said it's just it'ssort of found its way into everythingthat I do really.>> I love that and I think it says so muchabout your mentality and how youapproach the craft and honestly you'reon a heck of a trajectory. I'm reallyexcited to see where you go from here.So Tommy, thanks for coming on andpulling back the curtain and sharing alittle bit about how you think and yourjourney all this work. [music] It'sreally really inspiring stuff.Appreciate it.>> It's been awesome. Thank you for havingme.>> Before I let you go, I want to take justone minute to run you through myfavorite products because I'm constantlyasked what's [music] in my stack. Frameris how I build websites. Genway is how Ido research. Granola is how I take notesduring

00:39:29crit. [music] Jitter is how Ianimate my designs. Lovable is how Ibuild my ideas in code. Mobin is how Ifind design inspiration. Paper is how Idesign like a creative. and Raycast ismy shortcut every step of the way. Now,I've hand selected these companies sothat I can do these episodes full-time.So, by far the number one way to supportthe show is to check them out. You canfind the full list atdive.comclub/partners.