Loading summary
Transcript69 lines
- [00:00]
Thiago Costa
Design is at this weird intersection between art and science, and that part of redesigning and experimenting is the art side of it. I think everything outside UI and apps have something to teach you. You can grab a book and just study art, colors and lights and shadows. So there's a lot in FEH that was inspired by art. Exposing yourself to those things and understanding how these things make everything look is how you practice taste.
- [00:32]
Rid
Welcome to Dive Club. My name is Rid, and this is where designers never stop learning. This week's episode is with Tiago Costa, who's a co founder and designer of feh, which is one of the most beautiful products in the world today. I mean, Thiago's Twitter feed alone is like one of my favorite sources of design inspiration. So we're about to do a deep dive into the finer details of craft and what you can do as a designer to strategically hone your taste. But before we get into all of that, I asked Thiago to give us the backstory of FeH because it's actually quite unique how this product came to life.
- [01:09]
Thiago Costa
Well, we didn't start with feh. We started with narrative. And the goal with narrative was to fund ourselves to eventually start working on our own ideas. We hated our jobs back then in 2018, so we quit everything. So we were at this design studio and we tried to build a brand around that. Like, well, we have no client, we have no portfolio. How are we going to sustain our salaries and charge a lot? So that was all like, brand. We tried it. It was like, okay, let's try to build this thing that seems very premium and let's see how it goes. In the first year, we reached seven figure revenue. We got really good clients. A lot of companies back then in 2018 were looking to outsource this work. Hiring designers, engineers is really expensive. It takes time. So, like, what if we have a team that worked together in the past that you just buy this work and then three, four weeks later it's done and you don't need to worry about health insurance, you don't need to worry about if the team's going to work well together. So we tried to capitalize on that back then.
- [02:11]
Rid
So how did you get to finance then as the entry point? Because I know you don't have a finance background, so.
- [02:16]
Thiago Costa
No. Deniz and I, we were really into design and engineering since the beginning. Mac is a salesperson and Tom had a finance background back then. So they had this idea to build this trading journaling product. That was before narrative. I knew them from before. But I wasn't involved in FE at all. I was like, oh, let's build this MVP for ourselves. And then narrative happened. So we co founded, the four of us, and we put FE on the back burner because we were generating revenue through client work. When we reached a good Runway, we was like, okay, let's look into feh. It's a product that, it's kind of there already. The idea is kind of evolved, but we're going to have to start again because Dennett and I, we were not involved. They hired a couple of engineers to build it. There were no designers building it. I don't want to say it was awful, but it wasn't really a product that any of us would be proud of putting out out there.
- [03:11]
Rid
Maybe reflective of the broader industry at the time.
- [03:13]
Thiago Costa
Yes, it was the stereotypical finance app. It's not really what we would build. And on the flip side, Dennis and I, even though we didn't have a finance background like Mac and Tom, we invest our money and we've been doing this casually. We were buying ETFs and sometimes every now and then we were buying stocks. And as designers and people with very critical taste, we always hated the experience. So we started rebuilding fate based on our own biases and on our own needs. We had this Runway that we acquired from narrative and we were like, let's try this and see how it goes. And then we started seeing that we really cared about this product because there was nothing like it for us. We hated every single alternative. So we were our first customer. So we started building this from scratch. It took us a while because client work through narrative and product work, they are resource intensive. So every time that we went out to generate revenue, build a website for someone else or a brand, they would just like slow down a little bit because we couldn't do both at the same time, which also helped us and forced us to be more thoughtful about what we were building. So we put up a landing page with a really city alpha that no one had access to, just us. But we put some beautiful screenshots in there and see if people actually got interest in it. And after I think six months, we had like 4,000 to 5,000 signups. So we started type forming these people, like, what do you want on a product? What's your pain point? What's missing on your current workflow? So we started learning from these people. We interviewed one on one, a bunch of them, and we kind of had a direction. And then I think by the end of 2019 or 2020. We got our last client at Narrative, who was a pretty big branding project that gave us another boost of Runway. And we're like, okay, so let's put Narrative aside, remove the focus from this and focus on Faye, because it seems like people really want this. So we doubled down on Faye and we took a design approach to building this product. Like, how can we build a finance product that is primarily beautiful, simple, that I would understand all the complexities of finance? And if I understand it, I'm sure there's a lot of people like me out there. And the good thing about this is that when you have this beauty as a guiding principle, you are forced to simplify. You're forced to make something that most people would understand or even think about after, because finance is inherently boring and people don't really like to think about it. So how can you make a product that people care about in an industry that no one cares about, or at least no one likes it?
- [06:05]
Rid
It obviously resonated a lot. And so maybe even we could fast forward a bit in the story because you've went all in on fe. You've seen some success, obviously, all of the ups and downs that come with it, but you're now at this point where you drew this line in the sand to invest in a big 2.0 release. So can you talk to me a little bit about the why behind that decision and what were some of the opportunities that you've been trying to capitalize on with design? Real quick message, and then we can jump back into it. One of my favorite parts of the recent episode with Smith and Diction was hearing about Mike's experience generating brand imagery using Visual Electric.
- [06:47]
Thiago Costa
I was already in Visual Electric because it looks like figma, it feels like figma, it operates like figma. And that to. To me, I was just like, I was comfortable. I felt like I was like, I can move around in here with confidence.
- [06:56]
Rid
I think that's exactly why I love the product so much too. And sure, it's the most photorealistic image generator out there, but it's also so clearly built specifically for designers, and every single part of the UX is elite. So this is a reminder that you can get your first month for free using the Code Dive Club. Just head to Dive Club Electric to get started. Look, I don't know about you, but I've never been happy with the way that I get async feedback on my designs. Whether it's Figma, comments, loom videos, slack threads, it's a mess. So behind the scenes, I'm working on the product that I've always wanted to exist. It's called Inflight, and I'd love to show it to you before it goes live. So head to Dive Club Startup to get a little sneak peek of what's coming next. Okay, now onto the episode.
- [07:46]
Thiago Costa
There were actually two reasons why we thought about 2.0. The first one is more esoteric. It's more of designers always seek perfection, and perfection is like a goal post that keeps moving. So 1.0, we reached this goal post and then as soon as we got close to it, it moved kilometers away. And we were like, this is not it. We need to rethink how we can make this product. And the second reason is, the most important reason is more objective, which is AI. We saw it as an opportunity to use AI to even help the challenges that we faced in the beginning, learning finance and making things simple. And AI is really good at that. We have the data, we have the ui, we have the ux, we have the customers, we have a product with market fit. So we took a risk to pause everything and double down on this new industry. And the reason we wanted to do that right now is just to give us time to do this right. We basically started from scratch 2.0. There's a bunch of visual updates, but also the architecture is completely redone for us to grow and for us to use AI. As AI gets better, can we drill.
- [09:03]
Rid
Into some of those early explorations? Like, what were you even doing as a designer to figure out from scratch what an AI native FAE could look like?
- [09:13]
Thiago Costa
It's a great question. Finance can be summarized as, or at least financial products, research products, Bloomberg or whatever. It's just cramming up data and the user does the work. If you pay $2,000 a month to get a Bloomberg terminal, you'll see that there is a lot of data. But the user has to do the work to understand this data. So we saw an opportunity with education. How do you make your customer understand this data better, but without telling them what to do? AI is really good at that because AI is good at interpreting data. So we redesigned the product to put the data on the background, and AI will do most of the work for you to interpret what this data means.
- [10:00]
Rid
Okay, so you freeze 1.0 development, you're from scratch, cranking out an incredible amount of screens. You're the only designer, I would imagine, based off of just my reading between the lines of how you all work. You probably have pretty arbitrary release deadlines, like there's no one like over you cracking off kind of thing. So when you have this massive pile of screens that you need to get through, talk to me about the feeling that you get that gets you to the point where you're like, yes, this is good enough, this is ready to ship.
- [10:32]
Thiago Costa
Not having a deadline is a blessing and a curse because you can linger on this go post of perfection that keeps moving and then never ship, which is dangerous. We have a pretty well rounded team. As I mentioned before, we were friends for a long time. So we made it a point with narrative to always be policing each other on everything. We don't really care if we offend each other, we don't think about being polite to each other. So we always give feedback and expect feedback. So the deadline is basically us policing ourselves to not die, but at the same time finding this balance of sipping something we are proud of. Stopping 1.0 was a risk we knew from the beginning, but we didn't really care. As I mentioned earlier, we built narrative to pursue good ideas and to build good products we are proud of. So managing design and managing deadlines, it's almost like gut feeling in a way. Being the only designer is also a blessing and a curse. A blessing because I don't have to document everything that I do. I know where everything is. In Figma, we have a page that it's components. I think most designers do that. We have a bunch of components in there, so we have dropdowns and a bunch of things. Maybe this is awful because if I'm no longer here, if I get hit by a bus, our engineers are going to be lost. I think if we were a team of 30 designers will be harder because a bunch of designers would be working at the same time and increasing the complexity of these screens. And we also have a Figma file called graveyard. So when we retire a feature or a design, I move it there. I don't keep it on the main file to not cause any confusion for the engineers. So sometimes we also look at the graveyard to see how far we got into the new designs. Sometimes the old designs were better and we bring it back. Most of the. We tried most of the time to always improve it. But sometimes you have this idea, you're taking a shower and you have this. You think that you're fucking Jony I and you came up with this thing and it's like, no, this sounds amazing and your head sounds perfect and then you do it and you put it out there and people don't really get it.
- [12:57]
Rid
I'm laughing because we talk a lot about the lost in translation from Figma to code, but for me, most of my design quality is lost in translation from the shower to Figma. That's where the really steep drop off happens.
- [13:10]
Thiago Costa
Yeah, being a good designer is to say no to most of the ideas that you have and yes, the ones that could work within a context of your product. So even like when we get feedback from customers, the feedback on a surface is really good. Like when you read it, that makes a lot of sense. And then you start applying this to your product and it just, it just crumbles everything. It makes no sense within a context of how the product works right now. It's very easy to fall into the trap of feedback and good ideas. And it's very hard for you to say no to a good idea for the betterment of the product long term. There is a lot of shower ideas that then make into the product that were amazing. You feel like a genius in the shower, but a lot of the times they don't work.
- [14:02]
Rid
Let's talk a little bit about where those goalposts were moving from 1.0 to 2.0. And I want to kind of go deep into your visual design practice. For me, especially when I'm the only designer, you know, I'll work on something for like two years and you're kind of figuring out what the visual language even is along the way, and parts of it you love, and parts of it you're kind of just like, ah, man, I would have probably done that a little bit differently now this time around. And so the idea of the reset, the blank slate, the ability to take everything that I've learned, everything that I kind of hate in the interface, everything that I want to double down on to, to and to just try again, like, that's so attractive. And I don't think that a lot of designers get that type of opportunity. And so I'm curious, like from a visual standpoint, were there ways that you really wanted to capitalize on the clean slate that you were given with 2.0?
- [15:06]
Thiago Costa
Being a company that is growing and being a company that afford us time to think about these new ideas and feeding my design wishes and changing things all the time, not everyone has this. So we are in a position where changing is affordable in a way. Obviously we can't drastically change what the product offers because otherwise maybe everyone will cancel and we're going to not have a business. But, you know, validating your old work through your new work is how you improve as a Designer. So, as I mentioned earlier, having this beauty as a guiding principle is really what defines what we change in the product. And as you release something two years later, it can kind of look outdated. So design change all the time. Techniques change all the time. Maybe you watch a movie or you see a painting that just flick something in your brain and you start liking a different color, or you learn a technique that you want to apply in the product. So that's usually how you evolve as a designer as well, to keep trying things all the time. So, for example, I always hated our command line. The contrast was bad. It was in the middle of the screen. We use a command line to almost as a dropdown. Sometimes when you want to filter something, the command line just appears there. I always thought it was obnoxious. And first thing I wanted to do is to move away from the interface. So what if we move down and then you can still see a little bit of the interface? And then the idea started evolving and it felt weird and disjointed because the nav was on the side and then the command was at the bottom. So you're kind of looking at two things at the same time. So what if you move the nav down? Maybe you make the nav become the command. That's kind of a weird idea. It's been done before, but is it going to work? So that's kind of how your process starts evolving. You start redesigning some things, and then it doesn't really make sense. So you design the thing that doesn't really make sense into the new interface. There's not really a science behind it. It's just like gut feeling. Design is at this weird intersection between art and science. And that part of redesigning and experimenting is the art side of it, I think. So you're always not really thinking about data. Right now. You're not really thinking about your customers. You're thinking about making something that looks really good. You're thinking about making something that makes sense, that is cohesive. And then you start with an animation here and there, and then the animation doesn't really make sense with the color that you were using before. So you change the color, and then maybe it can look like an elastic, so you change a little bit the texture of it to look a little bit more tangible. So that's how you start redesigning a product. At least for me. I'm sure a lot of people plan and wireframe a bunch of things and you have these ideas. We don't do any of that. We go on Figma. We get a screen and we try to kind of, like, move things around. Sometimes you get into a huddle with the team. The team screams at me and say that it makes no sense. Sometimes you're like, oh, my God, you made it. This is the best thing ever. So there's always this collaboration between building something that works and building something at the same time. That is beautiful.
- [18:40]
Rid
Can we go deeper into the art side of things? I want to use that frame of reference for a little bit. Were there specific techniques that you were excited to experiment with on 2.0? When it comes to, like, the finer visual details or maybe even just ways that your own taste and preferences artistically had evolved over the last few years?
- [19:03]
Thiago Costa
Man, there's a lot you can learn from art. It was the original ui. So there's so many techniques that evolved for thousands of years that make art such a good reference. And it kind of pisses me off that a lot of designers don't leverage this. Like, I know personally friends of mine, designers that don't really care about movies, don't really care about art, don't really care about music, and they don't, you know, like, go out and try to be curious and observe everything. Everything outside UI and apps have something to teach you. And art is, for me, the most approachable. As someone who doesn't really like to go out too much, you can grab a book and just study art. Colors and lights and shadows. So there's a lot in FE that was inspired by art. There's this technique called pointillism or optical mixing. So you can make, like, some outlines here and there, some shadows, and some gradients that, from close, it doesn't really look like much, but when you reduce it and you see the UI in its hole, it looks like it's popping out of the screen sometimes. So part of the 2.0 redesign is that I was getting a little bit tired of the traditional flat dark mode that everyone was doing, and everyone still is feh included. Everything kind of looks the same from a color palette standpoint. So since we don't want to change our color palette right now entirely, you can add those textures and volume and elevation to kind of make face stand out a little bit from everything else. There's a lot of inspiration from movies as well in terms of color palette. We shamelessly take inspiration from Apple products, sometimes Apple UI as well, but we try to avoid taking inspiration from ui, because UI is basically taking inspiration from the world, from nature in general. So you're kind of like distilling down the steps of inspiration, you're breaking down the idea. So go to the source directly. It's kind of what I try to do all the time with my designs. These techniques can also help engineers because shadows and the lines and things like that, it's something that it's really easily codable. I posted once a button on Twitter, it's like a glass button and bunch of comments saying, like, oh, it's really nice, but it's impossible to do in css. But the button was in CSS because of those techniques. And I remember there was someone, Paco from Linear, he was like, I don't know, he did this in five minutes.
- [22:07]
Rid
Oh, I remember this. I have the codepen saved. I have this screenshot saved in my notion. Actually, I know exactly what you're talking about.
- [22:14]
Thiago Costa
So he went there on codepen and maybe five minutes after I posted, posted under the guy saying, that is impossible. Like, here it is. And just like we tried to kind of not think about development when we were designing. We try to figure this out later. Sometimes we change it, Sometimes it is impossible, sometimes it's possible. But performance is an issue. But usually when you use those techniques from art that are simple, that from far looks like it's complex, they tend to work really well.
- [22:46]
Rid
Yeah, I was interested to see if you would bring up some of the depth elements because that's like from my perspective, one of the things that I've kind of noticed is even like the filter ways that you do like the chips, like everything's kind of inset and the containers inset. And obviously you have the full blown like wallet with all of the stitching and everything that's next level. But a lot of really subtle details where I can tell, at least from my perspective, it looks like you're trying to find ways to add. I think you used the word tangibility.
- [23:13]
Thiago Costa
Yeah. I think when you're looking to art, when you're trying to make something grounded, you try to, you know, like make the light make sense. So if you're making something that is elevated and there's a shadow, there has to be a light somewhere. So you have to add the outline to make it look like the light is coming from there. Makes everything look more grounded and more realistic. Because just adding shadow on a flat button doesn't really visually make sense because where the light is coming from, so you have to create some gradient. And you kind of learn this studying art because art is from nothing. You just get a brush and then start painting and it looks like it's real.
- [23:55]
Rid
Let's get super specific here for a second, because in our little Twitter comments where people were asking questions, a few people asked about, like, how you think about an approach lighting. And, you know, you're kind of saying, like, yeah, you have to add the gradient in the border. And I know there's at least one person listening. They're like, what do you. What do you mean there? Like, how do you. What are you actually doing? So given this hypothetical light source, what are you doing to represent that in the ui? Or what different techniques do you have in your tool belt that you're pulling from?
- [24:24]
Thiago Costa
Yeah, good question. As a designer, you have to be very curious to see how things work and look. So right now, there's a light behind me, and the light is shining through the wall, and there's some crevices in the wall, and it's making shadow next to it. I also had experience with 3D and games and stuff like that. And you kind of. To save performance, you have sometimes to fake those lights in, because to render shadows and things like that is pretty expensive for games. So you have to observe how shadow works to kind of start making sense. So maybe for me, it's kind of second nature because I've been practicing this for a long time. But if someone is starting and wants to make something more grounded, I don't know, grab your iPhone, turn on the flashlight, put on a paper, put where you want the light to be and see how everything reacts and try to copy that. Look at some paintings and see where the light is coming from. Caravaggio is the master. I talk about this all the time. It's like the master of light. So he always uses a light source, even if it's obscure. You don't know where the light source is from when you're actually, you know, not analyzing everything. But it creates this depth and shadow and copy that. Like, you can put one of his paintings next to your UI and then start to copy, even copy, like, the light source. So if you put the light source there, the light's coming here. So the shadow needs to be a little bit to the left. So if the shadow's a little bit to the left and the light. Light is coming from the right, you may be like, if the object is elevated, you need to have a little bit of a light on the corner where the light is shining from. So we can do that with an outline or like a stroke, and then you put, like, a little gradient on the stroke. So from transparent to white. I don't know 10%. So you see this little reflection. And then because the light is coming from there, where it's reflecting, you have to add a little bit of a gradient because the top part needs to be brighter because the light is going there and you start getting really nerdy about it and then trying things. Unfortunately, Sigma doesn't really work like some 3D software where you put a light there and everything kind of calculates for you automatically. So you have to understand a little bit how light works. And I do the same for lines. So if there's a light coming from the top and there's a line, for the line to be grounded, the line needs to be kind of like punctured in the background or something, maybe floating. If you make the line floating, you're gonna have to do a shadow. If it's punctured, we need to do a little highlight at the top. And the line needs to be kind of like a hole, so the hole is black. So you start playing with those, I wouldn't call it techniques. Anyone can do this. It's just observing how light works. And then you can apply this to UI as well.
- [27:25]
Rid
Maybe. You know what I'm about to ask based off of our DM history, because I've been taught in my, you know, Visual Design 101, that when you're designing a dark mode interface, as you stack elements, they become lighter in color as they approach this hypothetical light source. And, you know, shadow contrast is a little bit harder to achieve.
- [27:44]
Thiago Costa
Yeah.
- [27:45]
Rid
And yet you kind of do the opposite as like the core pattern of Fae, where you have like the lighter page background and then darker containers. So my question is simple. Why?
- [27:59]
Thiago Costa
That's a good question. I say it, say it, Just make it look good.
- [28:05]
Rid
There it is.
- [28:07]
Thiago Costa
No, I. I honestly don't think about the rules when I'm designing. I just, I know it sounds simplistic, but I just try to make it look good. And also the rule is, oh, it's approaching the light source. But that makes sense if the light source is coming straight up in some cases from our ui. It's not like that. Maybe the light source is from the top or maybe the object that you're elevating is darker than the background. So the rule doesn't really make sense in the real world. You can have a darker keyboard on a lighter table. So I think those rules are really good to guide you. Just for you to not create something that makes absolutely no sense to anyone.
- [28:54]
Rid
Like a light colored shadow. Don't make a light color shadow, please.
- [28:58]
Thiago Costa
Also, that yes, I've seen some, some light colored shadows that actually look good because they make, they make it look like a glass. And then if the light is coming from whatever source and then there's the refraction and then refraction has to make a little bit of a shadow. But refractions don't really work like shadows. They are different. So you shouldn't use like a drop shot, a regular drop shadow and just put it blue. That could look weird. So the thing is like, it's not that hard if you observe how objects in real life work and you just try to emulate that on ui. Don't go too overboard otherwise. It's like those weird stereomorphism that has like really low contrast. No one can know what's what to press, what's a button, what's not a button. But I do like some skeuomorphism. I do like my stitches in the, in the wallet. That's the thing about having beauty as a guiding principle. You will do things because it feels right. The idea wasn't I'm gonna, I'm gonna do a wallet because I want to do some stitches. You're gonna do a wallet because there's a credit card. It's like you follow the narrative and then you build around it, you make it work. But if you think about making a wallet, you're going to do the fucking stitches. Because your wallets usually have stitches and you do it because it's right. It's just this thing that. Oh, no one's going to notice it if you don't do it. That's true. You don't steal a store because someone is watching you. Don't do that because it's right. And these things stack up. If you do a stitch there and the shadow here and any works as a cohesive product, the people sense it. Even people that are not really attuned to design, they feel the overall package, they feel the polish. And yeah, I probably took a good 40 minutes on this wallet and maybe no one notices the wallet by itself, but when you go in settings, it's just like a nice, grounded, beautiful page.
- [31:00]
Rid
I couldn't agree more. I mean, when we point at these companies that are high craft or whatever, it's pretty much like the sum of a thousand tiny little decisions that you might not notice individually. And so maybe I'll just give you another prompt and an opportunity to get a bit nerdy. Like what are some of the other very just small design details that you put into 2.0 that you're proud of. That, yeah, maybe people wouldn't even notice.
- [31:29]
Thiago Costa
Company logos is one of them. We handcrafted the logos one by one with optical alignment. We tried automating it. It didn't work because as a designer, you know, you cannot center a triangle in a circle because it's going to look off. So some logos have the same principle. You're going to have to move up a little bit so you can just like, scrape a bunch of logos and just put it there. You have to. You know, like, sometimes as a designer, you probably know that, but some, some companies that have their. Their logos in PNG just kills me. And then you have to trace it, and then you have to kind of like, look at their Instagram account to see how they use their logo, because you're not going to read the entire brand guideline. So these things take time. And I think it's something that I'm. I'm pretty proud of because I made it a thing and made it every day. I tried to do like 10 logos and then keep increasing the database of our logos. And they're all handmade. You can call it simple and say you're just putting a logo in a square. Yeah, that's true. Anyone can do that. But the principle behind it is what makes it special to me and what I take pride on. And there are other things. Like, our earnings icon is optically aligned with the text, because when you're using uppercase and lowercase, sometimes if you put something mathematically aligned at the end of the lowercase, it's going to look like it's slightly high. So on development, Dennis and Tom, they always follow Figma 1 to 1, so they lower a little bit so it can look optically aligned. Behind our charts, we have little dots that I find are really nice. The command. The command animation, I think, was the thing that took us the longest to get it right. Yeah, when you press command K, the nav morphs into that. We tried it so many, so many variations. I remember at some point we had like, my entire screen was like, screen recordings to compare them to see which one is it's better.
- [33:35]
Rid
I spent so many times just opening it and closing it, just seeing the different, like, animation details in their interaction. Like, I could tell you spent a lot of time on it because some of the things that you did in my mind are, like, not obvious and maybe even the opposite of what you would typically do. Like, a lot of times the intro animation would be where you would see more of the elasticity and maybe it's even like A slightly longer easing curve. Whereas this one's like really snappy. But then it's actually the closing animation that's like really elegant and has the balance and the icons slide in from the sides. It definitely stood out to me as a labor of love.
- [34:12]
Thiago Costa
Yeah, that was a lot of work. We love the result. There are more things coming to the command. So when you listen to an earnings call, the NAV is going to morph into a player. So that took us a long time too. And one thing that we added after was the icons have a motion blur now. So when they expand, the icons get slightly blurry and then they disappear again. Back to the grounding principle. Let's say this object existed in real life and kind of like. And you're recording it and it's in the screen, you have a little motion blur there when it's moving fast. So you try to apply that as well. I love our shadows as well. They're not the regular drop shadow in Figma. They're just a bunch of layers with stack of blur. So they look like it's cascading. Nowadays there are plugins to do that, but back then when we started doing it, it was just manual looks more realistic and grounded. Yeah, there's a bunch of little things in fade that I'm really proud of that probably a lot of people didn't notice. Our error page is something that I love. Hopefully you've never seen it. Hopefully you never will. But when there's an error or I don't know, something wrong happens. There's like this processor that has FEH etched in it and it was all done in vector as well. Empty states is something that we really like. It looks like a little paper that it's also etched with an icon. Yeah, there's a bunch of little things that I think adds up. Maybe if you ask most companies, they who say that is a waste of time. Maybe we make it a thing to not launch anything that we're not proud of. So we try to take our time. And also that's the fun part as a designer, to experiment these things and try to make something not unique, but something that kind of tells that it took some time doing it. You're going to make a button in literally 10 seconds. But what if you add some texture to it? Get a customer curious to click it. You want to just touch it. And that's usually how things work in real life too.
- [36:29]
Rid
Hey, it's rid. I'm constantly asked about my favorite products, so I'll take just one minute and give you a quick rundown of my stack. Destin is how I ship design changes without having to code. Framer is how I build my websites. Genway is how I do research. Jitter is how I animate my designs and Play is how I design and prototype my mobile apps. Visual Electric is how I generate all of my imagery and Raycast is my shortcut every step of the way. Now I've hand selected these companies to partner with me so that I can do these episodes full time. So the best way by far to support the show is to check them out. You can find the full list at Dive Club Partners. Okay, now on to the rest of the episode. Returning back to my tweet where quite a few people ask questions. There was a lot of interest around just like how you've grown as a visual designer over the years. So I'm wondering if there's any insight you can give us into how you have invested in that skill set and elevated your craft over the course of your career.
- [37:37]
Thiago Costa
I don't really like talking about myself, so I think I'm going to frame this as the people around me. As I mentioned earlier on this call, design is this intersection between science and art. And I grew up with my father being a doctor, he's a physician, a cardiologist, and my mom was an artist. She worked from interior design to decoration and then at some point she was doing pottery. So I think I grew up with the two worlds colliding between. And I think design is kind of like the consequence of those two brains. Because my mom always liked beautiful things. I've always surrounded myself with beautiful things. I always been fascinated by my beauty, by art, by films. And I think the best designers are the ones who leverage and observe those things that are curious. So I don't really try to be a good designer. I think I just try to build good products and I experiment a lot and I design and redesign many times. There are so many things that I design for fade that never saw the light of day. But I'm always doing these things and exposing myself to beautiful things. And I think by accident this made me a better designer or craftsman. Just practice repetition. Musashi said that practice and repetition until it's just second nature. And I've been doing this since I was a kid. I always liked to play on Photoshop back then, or paint. I always played video games a lot. So I remember back when I was a kid and Photoshop became a thing, I tried to kind of emulate their UI and my dad noticed that and my dad being a doctor, you know, like the whole medical industry is just plain ugly. But my dad has always been, maybe because of my mom, and it's probably one of the reasons why he married. Married my mom. But he always. He's been. His calligraphy is amazing. It's like the most beautiful calligraphy I've ever seen for a doctor. It's kind of. It's kind of rare. So he always cared about visuals. So he started to ask me to help him with charts and. And visuals for his articles. He published a bunch of medical articles. To this day, he still does it. Luckily, nowadays, AI is very good at this, so he doesn't need me. So he wrote a paragraph about. Or some articles about, you know, pallet palates or whatever, thrombosis and things like that. And he was explaining how the blood works. But the text was so complex to me, especially as a kid. I think it was like 16, 17 or whatever he was explaining. It's like, that makes no sense. Yeah. But I wanted to explain to a reader like you, I know you're not going to read, but I wanted to make it nice. So I started learning. Back then, Maya, I don't even know if it still exists, was Maya. And the renderer was called Mental Ray. He was like, what if we did like a vessel? And then the cells come in the blood and then you do some lines and whatever and explain what it is. So I started playing with it, and then when I showed to my dad, he was like, oh, my God, this is it. I'm just going to submit this. And that was the time where it was either a mistake or not, because every single week and every single article that he was writing, I was the one doing the graphs.
- [41:11]
Rid
So that's cool.
- [41:12]
Thiago Costa
It was a lot of 2D graphs and things like that. So I kind of trained since I was a kid in distilling very complex information into something that is kind of like, fun to look at. Until one day I received, like, I did, like, gastroscopy back then because I was having some stomach issues. And. And then when I received the prescription, it was a paper explaining what I had to take. And it was like, it made no sense. I. I would forget everything. I would take the medication wrong. So my dad came to me like, why don't you build a chart for this? Like a table? It's kind of a good idea. So I went there on Photoshop back then still. And then I built this. Very easy for me to understand what I needed to take. So that was the first time that I designed for, for a customer, for me. So I was like the, the user of this interface. It was the first interface I think I've ever built. And one of my dad said that he, he worked in the hospital and he had like this group with a bunch of doctors. Like this is how prescription should be, so people should understand them and not make mistakes. Once he did that, all his friends started to ask me to design business cards and prescriptions and things like that. So since back then I was kind of like training to distill complex data. So when I got into Faye, it was kind of second nature to me. Even though in the beginning, as I mentioned, I'm not a finance expert, but I am the customer. So how it was the same principle how I'm going to distill complex data into something that I understand quickly. It kind of fell on my lap that it fits to. It fits with something that I'm not terrible at designing charts.
- [42:56]
Rid
Underselling. You're underselling. You were, I mean, you were. You were born for this. And it's cool too that like not having a finance background but still having deep expertise in the core primitives is like the superpower, right? Where like you understand what needs to exist visually and from like a UX standpoint, but you're not so embedded in the old state of the world that it blinds you to these new opportunities for simplification.
- [43:25]
Thiago Costa
I really love that he mentioned that I once received a feedback from a very good friend that Faye is great, but we don't have founder market fit. And I never heard of this before. I know it's a YC term I never forgot nowadays. I think his feedback was wrong and I think it's kind of a blessing in disguise. Not having founder market fit, at least for our case, really helped us attract people like us to a product like Faye. Because you, for example, you don't have a finance background, I assume. I don't think you would ever download any other product. And here you are as a designer, similar to me using Fey. So it was easier to talk to the customer that we wanted to attract. And a bonus for that is that we are actually attracting finance people. There's a lot of hedge fund managers and there are people that are using Faye now in conjunction with the Bloomberg terminal that they work at banks, but the majority of our customers are just people like us. You are your biggest critic as a designer. You probably know that really well too. There's even this meme that you're going to redesign your portfolio 1 billion times, and you never do it because you're never satisfied. And I feel the same way with Faye. Not like Faye's on my portfolio, but he kind of is. And he always designing it. So you're never satisfied with it. And the customers love it. The feedback that we receive all the time is so positive. And also we're really lucky because our customers are just like good people. It's hard to explain. And it's just easier to design when you relate to your customers. So I think that's why I became a designer. I think because of, you know, like, this fascination with art and how things work. Being curious. I think it's like the number one quality that a design could have. Just ask questions. We're talking about the shadows. Why shadows are the way they are. Observe.
- [45:29]
Rid
It's like we were talking about earlier with the heightened awareness.
- [45:33]
Thiago Costa
Yeah.
- [45:34]
Rid
This time, everything around you.
- [45:36]
Thiago Costa
Yeah, Yeah. I think that's what defines taste. You're exposed to these underlying configurations of how things look. And we always search for symmetry. You always search for things that are in order. Accidentally. The nature is perfect, right? Everything is in order. It's mathematically perfect. But at the same time, they change, they move. Their colors, their light. So exposing yourself to those things and understanding how these things make everything look is how you practice taste. And then this awareness is something that you should embrace it. A lot of designers have this, but they are not aware that this is how you improve.
- [46:19]
Rid
It's definitely been a theme in these conversations where, at least for me, like the designers that I look up to, they have that answer where they're like, very clearly drawing the bulk of their inspiration outside of interfaces, which is like something that I'm trying to practice as a part of, like what I bring to the table as a designer. But also if, like, if it doesn't happen naturally, it is a little bit wishy washy, where it's like, okay, like, I saw something beautiful. An hour later I'm like in Figma. And I'm like, well, I'm not making a piece of art. You know, what do I take from that?
- [46:50]
Thiago Costa
I think people do that, but without realizing. It's not like I just realized because one day I was asked this question and I didn't know how to answer this question. And then I started reflecting on it. What defines taste? And I know taste now is this buzzword in itself. It's a buzzword in itself. Yeah. Everyone's talking about taste and craft, but what is it? Can you practice? Can you def. First of all, define what taste is. And I could never before recently define what this is. Because taste changes, it doesn't mean that someone has a better taste than someone else. It's just this heightened awareness of how things are configured. And then when you have this awareness attuned, you can learn from it and apply. One of the reasons why I co founded Narrative and Alfe with Dennis and Tom is because they had this too. I remember we really love architecture. We love, like, interior design. Maybe I have this for my mom, but Tom and Dennis are the same. And sometimes, you know, like this, this channel on YouTube, I recommend everyone looking at it called the local Project. And sometimes we share on our slack. We have a design channel on Slack. And sometimes, like, we. We notice things that probably no one would notice. So, like, oh, this looks amazing. But. And then there's a kind of a shot of the. The wardrobe or something, and it's misaligned. They were like, I would. I would like. It's misaligned. When I realized that everyone, like everyone in the company at Faye is the way that I am, I was like, maybe I'm not the only crazy one. There's a lot of designers that are gonna watch this, and probably they are the same. So this, I think that's what partially what makes a designer a designer. You care about these things. You know, like, there's a lot of talks on AI and AI is going to replace the designers and things like that. And. And I think he will, but not all of them.
- [48:54]
Rid
The heightened awareness becomes so much more important in the future too, when, yeah, the baseline for what good is. Is going to rise. Like, AI makes slop right now, but, like, there are so many beautiful framer templates. You know, for instance, it's very easy to make the jump where you can say, like, okay, yeah, AI is probably going to be really good at making what we would currently say is good, clean, pretty design. And the separation then comes from, okay, like, how can I draw from things that exist outside of this little tech bubble to let that influence my practice? And so that's where it's like, for people like you, it becomes a competitive advantage in that world.
- [49:42]
Thiago Costa
You know, yeah, maybe this is a hot take, but this paradigm shift, when a new technology comes and a lot of people lose their jobs, this is not new. And this thing that would replace labor is also not new. Since the Industrial revolution, this happened. And craft is still here, and they are still artisans in Japan making knives by hand. They make like five knives per year or some. Something. I don't know it takes forever. The thing is that is just the value of craft is increasing with the tools getting better. Because you can spin up a landing page nowadays in minutes for sure. But at least now they're not going to look or they're not going to feel the same way as someone pouring their heart and soul into it. Might be a hot take. I might be wrong in the future. Maybe one day you're going to go in Figma and there's a craft button and you press it and it's going to be like the most beautiful thing ever. So they could potentially replicate this. But craft also is going to evolve and the manual work, the stitching on the wallet, the care, these things add up and you can tell when something, even you mentioned earlier, you can tell when, when something was a labor of love.
- [51:07]
Rid
And also just like I think the value of teams that build products for themselves that maybe out of the gate aren't even trying to operate at a level of scale that has to appeal to everyone, where it's just like, no, like we just want a better product to suit to solve this problem and we are willing to put in the work and care. I think that is only going to become more sought after too.
- [51:33]
Thiago Costa
Yes, I agree.
- [51:34]
Rid
You all are a perfect example of the type of company that I'm excited for there to be more of as it becomes more feasible to create more niche opinionated software use cases.
- [51:47]
Thiago Costa
Building an opinionated software is the. I think it's the catalyst of going against AI a little bit. AI to build UI is going to be trained with other UI and everything that we've done in the past. So what if you want to break out of this mold? You're still going to need someone to just break the rules. No one knows what's going to happen. I am here for the ride. I'm very bullish on all this and I think this is going to happen again at some point in the future. There's always big leaps that happen cyclically and this is just one of them. And craft still valuable.
- [52:27]
Rid
All right, before I let you go, I have a tough question that came from Twitter. Robert Menke from 1Password. He says, how would you approach a curriculum if you were to teach a design course?
- [52:40]
Thiago Costa
I love Robert, by the way. He's been a customer for a long time and this is really, this is a really hard question. I think you have to start with history, art, ground them in the world, not go straight to tools. Tools come and go. Tomorrow maybe Figma is not going to be here I'm going to have to learn a new tool. So everything that I learned in this design curriculum, it's going to be wasted. By the way, I learned flash in university. So there it is.
- [53:11]
Rid
There you go.
- [53:11]
Thiago Costa
It's completely useless now. Also, designers really need to be good communicators. It ties back to that shower thought. Sometimes if you have this idea and you can't articulate them to your team, it gets really difficult to do something meaningful. But it's hard to teach this gut feeling that designers sometimes are born with. So I will be awful with this. I will be a terrible design design teacher. I'm terrible at teaching or even explaining my ideas. It's just really difficult. But even though it's like, it's paradoxical because I think that's what makes a good designer. But if I were to teach a design course or something like that, I would really try to get designers to understand that their work can actually make an impact. And it's just not just UI buttons and colors. A lot of designers are trying to be engineers nowadays because sometimes they have this impostor syndrome. Designing is just drawing rectangles, but it doesn't have to be. Design for me is from drawing rectangles to customer service to engineering. Even like when you're working with companies within companies, how do you sell beauty? Is beauty going to convert more? Because people are going to ask these questions, executives are going to ask these questions. They don't care. So how do you articulate that? Beauty is important. Beauty simplifies. Beauty makes people understand your product better, care about your product, Remember your product. When you're selling a car, when you're selling a video game. I think one of the first things that people think about is how beautiful he was, how he made you feel. And that's pretty overlooked in the profession of design. Not sure if maybe we can cut this to like a six second answer.
- [54:58]
Rid
But no, I thought it was great. I think it's great. I think it's great. There's plenty. There's plenty there.
- [55:03]
Thiago Costa
It is a really difficult question, I must say.
- [55:05]
Rid
It's super difficult. And I even, even thinking about my own journey where I'm like, because I didn't go to design school and I'm like, where. What am I actually drawing from? You know, what made the biggest difference?
- [55:21]
Thiago Costa
And like, that's what I mean.
- [55:22]
Rid
It's not really even related to like quote unquote design. You know, like the stuff that I use on my day to day that I think helps me. I'm not Even gonna like, say, be a better designer. Even though I do think this is what it is. But like, helps me succeed in my role. You know, I'm drawing from like my experience raising funds for a startup as like a early 20 year old, you know, and like getting people excited about concepts and thinking about product strategy and that kind of stuff. You know, it's like that's so much of what. So much of what dictates our effectiveness as designers exists outside of the. Outside of the pixels.
- [56:01]
Thiago Costa
Yeah. And being able to react to the environment, to feedback. A lot of designers don't really like feedback because they're very passionate about their work. But I think it's because how they are thought and how they are thinking about their work. They think about their work as goals and deadlines, but their work is just continuous. It's never going to end. So when you get a feedback, obviously you can ignore it sometimes. A lot of the times feedback is just wrong, but a lot of the times it's right. And then even if you don't apply it right now, even if it's not personal, it could make you a better designer if you learn how to listen. It's very paradoxical because design is a very visual profession. But I think the best designers are the ones who listen really well. And not only to customer feedback or to your team's feedback. Not even mentioning that kind of a given. But it ties back to what we were talking about on the inspiration, on the art, on the what makes the world look like. Like it looks so listening, I think it's, how am I going to teach that? I have no idea. But I think there's this part of ego a lot of people are scared of giving feedback and then you kind of grow up not having. You kind of grow up being sensitive because when you get a negative feedback, it's just like the first one you received or the second. But if you start receiving criticism from, from the beginning, you become more resilient and then you start listening a little bit more.
- [57:43]
Rid
Thiago, this has been amazing. A long time coming. This has been, yes, I think over a year in the works. It was worth all of the weight. This was a lot of fun. Really awesome to just hear how you think and talk about design. It's super inspiring. So thanks for coming on and sharing it with us today.
- [58:01]
Thiago Costa
Appreciate it, man. Thank you for having me.