Podcast Awesome

Behind the Pixels: Designing Icons the Font Awesome Way

September 18, 2023 Season 1 Episode 17
Podcast Awesome
Behind the Pixels: Designing Icons the Font Awesome Way
Show Notes Transcript

Dive into the minds of Font Awesome's Jory Raphael and Noah Jacobus as they discuss their unique approach to design process. Discover how they balance structure and creativity in the ever-evolving world of icon design.

[00:01:23] Design process.
[00:05:01] High level sketching.
[00:07:45] Figma for interface design.
[00:10:39] Designing dinosaur icons.
[00:14:08] Messy creative process.
[00:17:13] Creative process and productivity.
[00:20:31] Brain science in music.
[00:23:38] Creating a new schedule.
[00:26:52] Creative process and pressure.

The Font Awesome theme song was composed by Ronnie MartinAudio mastering by Chris Enns and Lemon Productions

Stay up to date on all the Font Awesomeness!

00:00 Matt: Welcome to Podcast Awesome where we chat about icons, design, tech, business and nerdery with members of the Fawn Awesome team. I'm your host Matt Johnson and today I'm joined by the fabulous Fawn Awesome design team. Uh, really it's just two people. Jory Raphael and Noah Jacobus. We talk about their approach to design and their philosophy of design. Is it a process? Is it not a process? Listen in and you decide. Uh, we're talking about design process today and I thought it would be nice to take some time to pick your guys' brains about that. Design process.

01:13 *Jory: * How do you think about that in a broad sense? That's a great question. Noah's kind of tilting his head towards me. I'll take this one. Geez. For the longest time, I don't know that I necessarily had a design process or, or if I did, it was kind of by accident or, um, I would hear someone say like, I felt like I needed to have one. Let me put it that way where it was an expectation that, you know, when you're writing, um, in the olden days, I'm like, I'd read client proposals. They would often ask for what the process was and sometimes it'd be like, I'd make it up because I never, it was never codified in my mind because the creative process in general is so by its very nature, amorphous and all over the place. If we're thinking about icon design in general and icon design at Fawn Awesome, the process is as, you know, this is going to sound like a cheap answer, but as little process as we need, I guess it's different when we are designing a new icon that's going to go into the existing Fawn Awesome icon set, or if we are thinking through an entirely new icon style or, or things like that. Because at this point, when I sit down at least, and I know you can correct me if you have a, if I'm wrong or if you have a different approach to this, but the, the rules around designing an icon for Fawn Awesome are so kind of baked into my bones at this point that I just kind of know, you know, I sit down and I draw and that's kind of it. In some cases I will sketch things out like by hand beforehand if it's, if it's a complicated enough icon or problem, but in a lot of cases I just literally sit down and draw in, in Figma and move points around until it feels right and then step away from it and come back and look at it again or share it with Noah and he'll have some feedback on placement of something. And, and we also kind of have a rhythm. I'm talking a lot, so I'll shut up in a second. But we also have a rhythm where sometimes I will design something, take a kind of a first pass at it, kick it across the fence to Noah and he'll go in and tweak it and add, improve it generally from in most cases and maybe kick it back over and I'll make a few minor tweaks. So it's, it's kind of collaborative when it needs to be and isn't when it doesn't need to be. And that is a lot of word salad and vomit.

03:25 *Noah: * So I'm going to shut up. You said I could tell if you were wrong and you are. No, but actually, yeah, my process is, is very similar to your point, like having so many rules already figured out for Fawn Awesome. It does speed up the process considerably because you're not having to spend a lot of time spinning up stylistic rules for the most part. Really the only real time and effort comes in, like, as you said, with complex stuff, if you're having to figure out maybe how to bend some of the existing rules to, to fit whatever the new thing is you're trying to do. But I often just hop right in and start. That is my sketching process is like digitally drawing right in the program itself. And it's interesting having being on this end of that process for the most part in this job because in the past life working at an agency that was almost always the front end of it, which is a different process that I had to kind of codify of figuring out like all of our time was spent figuring out what the rules are for like the minimum viable set and spinning that up as quickly as possible and then not being able to expand on it any further. So it's really nice to kind of experience the other side of the coin and maintaining

04:32 Matt: and flushing things out. I imagine too, depending on what you're designing, of course, the process is going to look a lot different, you know, when you're just sitting down to do icons, you have a few different parameters and you can sort of take it one step at a time, whatever your style of process is. But if you're doing UI elements or things like that, you might map it out quite a bit differently. Right. It could be more involved.

04:55 *Jory: * Yeah, that's true. Because when I'm designing, when we're working on the product itself or our website or the flow that our customers are using to grab icons, we will do sketching, like actually very high level sketching. We call it fat marker sketching, where the actual goal is to be as low fidelity as you can. Use a big fat marker. And I'll do it on my iPad, but I set the width on the pencil tool or whatever to pretty big. And you're just kind of generally sketching out flows and placement so that you can kind of keep your mind in that free state where you're not being too prescriptive. Because it's really easy to get down into the weeds and want to, you know, you mentioned a button. You could look at a button and tweak the corner radii or change the padding or dropshatter or whatever. And you can really get into the weeds pretty quickly. So kind of knowing where you are in the process is helpful. And I think with icon design, we just happen to with Fawn Awesome icon design anyway, for most of our stuff, we happen to be able to kind of skip a bunch of steps and jump to the end because we kind of have already done all that work originally.

05:59 Matt: Right. And I see, I can see how this would the process of something creative, I mean, not even necessarily creative, but the process of creating something, creating, I guess, is automatically automatically

06:12 *Jory: * creative. Are you saying that word too many times? Has it lost its meaning? Yes.

06:17 Matt: Create the creative creation. But I can see how process could sort of fit into any of that. I'm thinking in terms of as a writer, when I write a blog, I may not outline anything. I might just start going and then I flesh it out as I go. If I'm writing a longer essay, I need to do a little bit more planning and at least start with like a premise and put some headlines in there. If I'm writing a short book or something, it's a totally different process. So some of that creation process doesn't necessitate a lot of steps or process, whereas something bigger, if you're building a site, you're going to want to sketch it out. We've talked really broadly, but then if you zero in a little bit on, I don't know, different things you might create, like when you approach an icon or if you're approaching how to lay out UI or whatever, you would take different approaches and use different kinds of tools. We use Figma and the actual tool itself is going to inform how you create because of what's built into the tool. We've talked a little bit before in a separate podcast how we moved from Illustrator to Figma. Maybe you could just give an overview of what makes Figma so great and how that helps you

07:42 *Noah: * approach icon design. Sure. Well, Figma is primarily built to be an interface design tool. So it is at its core much more suited towards doing web layout and that kind of thing or app design. That is what it is primarily made for, but there are surprisingly some pretty robust vector drawing tools that are baked into that as well. So it was that capability kind of coupled with some of its features that are more product focused things like components and variants and things when you're building out a design system and need 50 different kinds of buttons and cards and whatever else. Some of those features that actually lend themselves really well to creating an icon design system, especially one like ours that has so many different repeating pieces that need to be reused and things that modify other icons and stuff like that. So that's that and its collaborative features, which is something that Illustrator didn't have at the time, maybe still doesn't. I haven't really kept up with it. Just kind of made it a no brainer for that, especially once we started adding more folks who needed to access all that stuff at the same time.

08:51 *Jory: * Yeah, and it's become kind of a source of truth for all of our icons. So I guess I'll use an icon that I'm currently working on right now. So I'm trying to make a Tyrannosaurus Rex icon. And the process for me to make that icon has been I go into Figma and we have all of our existing icons in Figma. Noah actually recently created another dinosaur icon that is like a long neck dinosaur. Not a Brontosaurus. Is a Brontosaurus a real dinosaur? I don't know, they keep changing it. There's one dinosaur that I used to have a name that they said is not actually real or something. It's a land before time dinosaur. Yeah. So this is a long neck. This is dinosaur. And so Noah made this design great dinosaur icon. So the very first thing I did was I'm like, I'm making another dinosaur icon. So I'm going to grab the icons that Noah did. I'm going to pull them into just a little another page in our animals, nature and animals Figma file. And then I actually pulled in some other animals. So I pulled in the elephant and I pulled in a few things because the goal is to make a new icon that fits visually with those two others or with all of our other ones. But those I was using like the elephant and the long neck dinosaur is kind of my touch points. And so I start just, you know, kind of sketching out in Figma using blocks, sketching out and drawing shapes that kind of generally represent a Tyrannosaur. I'll go on, you know, image search on the web and find examples of illustrations or, you know, photos, you know, back when they took photos of dinosaurs way back when realistic photos, they're a little grainy, but yeah, I'll pull the old Polaroids up. And so you kind of create from that and from the existing icons, kind of a mood board, if you will, of what you're trying to go for. And you just start drawing and it's, that is like just a process of like trial and error, honestly, where I'm drawing a leg and moving it here and moving it there. And, you know, on top of that, we also have the issue of our artboard size because the icons have to work within those, a certain number of constraints. And so, you know, the Tyrannosaurus tends to be a little bit of a taller, you know, icon, but ours are a little, our icon artboard is a little wider. So you have to find a way like you can bend or is it squatting or is it what position it is in to make it work? And then it, you know, does it look like it's pooping instead of standing up instead of what? So it's hard. Honestly, it's not done yet. And I mentioned earlier that I'm trying, I want to kick that over the fence so that Noah can take a stab at, you know, using what I started and maybe, and ultimately make it better. Yeah, that's the process. We just draw it and tweak it until it's mostly right. And at some point we have to kind of throw on the towel and just like, okay, we're going to ship this one. And for different icons, there are kind of different inflection points and, you know, some are easier than others.

11:40 Matt: Do you ever ship something knowing that you've spent enough time on it, but you're going to come back to it because you know it needs something, but you're not sure what it is yet?

11:49 *Jory: * Yes, all the time. Yeah. With the caveat that I don't always know that I'm going to come back to it. Like it has, there are definitely icons that we have in our set today that are good enough.

12:00 Matt: And, you know. Good enough is not good enough, Jory.

12:04 *Jory: * I want you to get back in there. Well, you say that, but yeah. I mean, and occasionally we will do, we'll go in and we'll update them. We, I mean, we actually recently redesigned a bunch of our animal icons to make them cuter. I was thinking about that. So that's an example of ones that like, yeah, some of those are released and I was like, I don't know if I love them, but they're almost there. And you get to the point where you're spending so much time on them that you're not spending time in other places.

12:31 *Noah: * Right. Especially in things that are sort of visually similar, because then if you make one change, you're like, well, I really need to update all the rest and they can, they can snowball.

12:40 Matt: Yeah. So I think what I'm picking up is that they're going to be a category of dinosaur icons coming our way. I think that's what you're saying.

12:50 *Jory: * Yeah. I don't know if a full category, but they're, you know, I mean, if two icons constitute a category, sure.

12:57 *Noah: * Maybe. I mean, we are slowly but surely building out the paddocks and we will have, can I get a teratrachic park? We could. I think the width would support some sort of a winged beast, a pterodon of some kind.

13:21 *Jory: * What's interesting to me is like, you know, you, we started this kind of talking about design process and what ours is. And in the creative world, I think there is this idea that you have to do something in one way in a lot of cases, but you, you'll look at a designer, you look at someone's finished piece of art or finished icon or finished design. And if you look at their art, their actual art file and you kind of zoom out and you see like, you know, mine's a mess. Like I've got things all over. And I think that's one of the reasons I love quote unquote sketching in something like Figma because you can draw something quickly, duplicate it, do a variation, go back, make little tweaks. And it's just like throwing stuff against the wall and moving things around and trying different things. And you've got an undo button and you know, you're not kind of locked into anything, which is lovely.

14:06 Matt: There's nothing wrong with a messy process. I, this makes me think of, if you go to a guitar center and you talk to the guy at the guitar counter and he knows all about the gear, he knows all about the history of the gear. He knows how the circuits and pedal boards work and a lot of stuff. You do not want to go to that guy's concert. You don't want to see his band and not to, you know, Is this, this is one guy in particular you're talking about, isn't it? Not really. I mean, I think it's just sort of across the board. Like people, the point is that people who have an overly tidy process sometimes get enamored with the tools and it makes their creative process too stiff. I guess, I guess there are some people that probably have lots of processes and tools and are fantastic.

14:54 *Jory: * Well, and there's also, I think a level of expertise too, where you get to a point where some things you could just do really quickly and you have it down. I think it's pretty easy for both Noah and I to design a house icon at this point. Speak for yourself. Or the, you know, a very simple version of a house icon. So, you know, so some things go really quickly and then some things like this, this dinosaur I kind of working on is kicking my butt and it makes me feel bad at my job and like a bad artist and I have faith that we'll get there at some point. Let me ask you a question, Noah. Yes. Talking about design process, do you, when you sit down and you're like, I have this bunch of icons I'm doing. Yeah, I know there's probably a different state that you're in when you are at the start of a project versus when we are like right now, one of the icons that you're working on, you're kind of filling in the gaps and you're kind of like working through it. Do you do anything differently between those two states? Do you have any, you know, environment that you're setting up for yourself, either acoustically or visually or?

16:02 Matt: Um, nope. Love it. All right, folks.

16:09 *Noah: * Thanks so much for joining us. No, no, I actually do. I find that history and rules as say when we're working on, you know, vanilla font awesome and we don't needing to keep in mind the history of 30,000 other other things that we need to kind of match. So like my, my scratch page on, on some of that new stuff is just full of, you know, half baked things. I might still need this. I'm just going to keep it in case, you know, the version of this icon doesn't pan out. I want to go back to what it was before and keeping all of that stuff kind of collected and also kind of keeping a lot of the basic building blocks like handy at all times and like right there because I'm constantly re referencing them and pulling them in to build out new things. So it's kind of like, I feel like it's kind of constantly building an Ikea shelf and I've like got the instructions there all the time and I'm just constantly like rearranging pieces and and trying out different things. No missing parts like is often the case. All the screws are there. All the screws are there. I can make new screws if I need to.

17:07 *Jory: * But yeah, it is, it is a significantly more jumbly process. Do you do anything? And this is a little leading because I do do something in these regards, but do you do anything? Do do and it won't be the last time in your, your greater environment outside of the computer itself. Do you prefer to, you know, light yourself a candle when you're really diving into an

17:29 *Noah: * icon set or, you know, have a particular cup of tea or? I have found in terms of the audio choices when I am doing much more creative intensive things. So if I'm needing to generate a lot of brand new rules and content, I can't listen to anything with lyrics for whatever reason. It's the same when I'm writing. Maybe that's the same for you. Yeah. Where whatever part of the brain that's tapping into is the same as like linguistics for me. And so if I'm like, if I'm doing something that I know I can knock out pretty quick and it's like, Oh, whatever. I'm, you know, I'm making a house and then I can listen to whatever and it's not going to affect me, but whatever, whatever cross pollination synesthesia that is for me, I

18:13 Matt: have to be like either dead quiet or like light instrumentals. I almost burned my house down with the, uh, the candle routine. my desk set up all nice and I had this real nice musky candle that I would light and I'd put on the ambient music and I was wondering when you're writing. Yeah, sometimes. Yeah. I have sort of a thing that I do. I was looking at my external monitor one day and I was like, why is there, why is it misshapen at the bottom? Oh no.

18:46 *Jory: * I realized I'd put my candle directly under my monitor and it melted part of it. So be careful folks. But it was the best writing you'd ever done. It was. I mean, I was on fire. That's funny. Cause I, so my, um, I'm kind of the same way. Like when I'm writing, I find that like listening to something like Baroque music actually helps because it does do that little disconnect where I can kind of, it helps me focus in a certain part of my brain to write things. But when I'm designing icons, when I'm doing the production work of icon design versus the, uh, well, even some of the creative stuff, even like with the dinosaur where I'm just trying to throw a bunch of things out against the wall, I often will put like a movie or a TV show on my little side monitor that I can kind of pay half attention to or a show that I've seen before or like an action movie or something that, you know, really has, isn't good or, you know, it doesn't require too much brain power to enjoy. And I find that just having that little thing going off on the side that every now and then I can just look over at and switch my attention briefly helps me just get into a zone where I can draw, which is weird. I think to have a show, you know, something visual going on when I'm trying to do something

19:57 Matt: visual, but it works for me and kind of gets me into a little bit of a Zensate sometimes. It's different strokes for different folks. I mean, for some people that would be a nightmare. They can't multitask like that. They need to focus, but I think it's, everybody has to figure out what works for them.

20:15 *Noah: * You know, I wonder if there's a connection between working in a more freeform creative way when a more structured thing is happening nearby because thinking about Baroque music, for example, and having studied that in college and how very rigid and highly structured it is like the forms, the use of dynamics, instrumentation, everything is locked down tight. And so being able to have something that is incredibly built out and structured happening in your periphery. Yeah. More maybe even a film that you already know the structure of it. It's something you're familiar with and it's kind of a comfort watch or something that you don't really have to pay attention to. I wonder if there's something there that is like, this is something that is easily digestible and I already am familiar with or something that is very structured and already makes

20:58 *Jory: * a lot of sense that allows you to. I absolutely believe that's true. I mean, you look at the, I forget the name of it, but like you'll see those like sand patterns, like when you do sand and you're playing certain tones or music or certain whatever, they'll adjust themselves into different states. And that like that has to happen in your heads as well. If you're listening to a certain thing and you kind of just get, you know, your neurons

21:21 Matt: firing in the correct direction or something. There's got to be brain science to this stuff for sure.

21:26 *Jory: * Get out on MIT, figure it out. Yep. Yeah. We're not the people that dive into that science, but we just draw small pictures, Matt.

21:35 Matt: Small pictures and it's a process. There is a process and there's not a process.

21:40 *Noah: * It all boils down to probably my favorite responses on Twitter and social media. And that's always those questions of like, should designers blank or whatever? It's just, it depends, man. It depends. It's the same with process. Maybe. Sure. No. Yes. And especially when, you know, process is vastly different if it's just you versus if it's you and another person or a team or, you know, thinking about what we talked about with icons, you know, versus product designer, you know, web design. You know, it's, if you have more people that you need to communicate information to, that's a vastly different process needs, probably needs to be more rigid, more documented versus when, you know, it was just you making icons and that's when illustrator worked mostly okay for you because, you know.

22:25 *Jory: * Yeah. Yeah. And when there were fewer icons and fewer styles, I mean, we're, you know, we're, we're struggling a little bit with that whole idea with our company as a whole. Right now we have what we have almost 20 people now. Um, when I started, there were only five or six of us and what works when there's a smaller, you know, group of people doesn't work necessarily as well when there are more people and there is always the question of like, how much is too much, you know, how much scheduling, how many meetings, and we always air on the side of less is more and you know, honestly, like some of the things that drew me to this company in the first place, and I'm sure others would say the same is kind of the way we do things a little bit differently, just some of that doesn't scale quite as well. And I know other, you know, there are other companies that have the same issue. And so we're just trying to like, we put in as much process as we need to. Yeah. Um, and that's constantly evolving and constantly changing. I mean, right now we're at the snuggle or twice yearly snuggles. Are, you know, we are, as we grow, we're finding like, I think this one has been pretty successful. There's some things that might change, but like we actually put a schedule in place for the first time, you know, we're, it was still open. We had a lot of free time, but it was like at this time in this time block, we're generally going to be doing this. And then this time block, we're generally going to be doing that. That never used to be the case. Right. Um, and it just kind of knowing what to expect is helpful, I think for some folks and gives it there, there, like we're recording this right now because we put it on the calendar.

24:03 Matt: Whereas last time we just kind of went by the seat of our pants, like, Hey, anybody want to go over there and podcast? Yeah.

24:08 *Jory: * And I, you've probably recorded a lot more of this, this trip than you did last time. So for sure. So we are playing around with some new icon styles right now that are outside of the kind of the classic and the sharp icon icons that we currently have at Fawn Awesome. And so that is, that's a different process than what we've been, you know, how we, how we would go in and build new icons for, for Fawn Awesome. That is, is, and you recently know, uh, uh, I did a little bit, but you mainly recently spent some time like at a very high level, exploring different visual directions, we could take these styles. How did that feel? Was that, was that fun? Was that a break from, from the current way of doing things?

24:58 *Noah: * Very much a break. And it was a whole ton of fun because when you're designing icons, no matter what new stuff, old stuff, there's always different visual ideas that are kind of rattling around in your head or that you see something out in the world that inspires you to be like, I wonder if you know what this would be like, or seeing something that maybe you feel could have been accomplished a little bit better in some way, um, or something you never got to try in a client project, because it's a little, little wild or a little out there and doesn't really match up a brand per se over years, I've collected a lot of different visual ideas that might just be like one bird and that I'd have a general idea of what that might mean or how that might be fleshed out. And so. Yeah. We had the time recently to be able to kind of document, like write all these things down and just be like, Hey, we have the time, let's just explore some of these things. If we were to flesh out a whole icon set in this style, what would that look like? And being able to kind of going through multiple layers of a process of very high level, sketching things out, seeing if something even has legs to function and being able to drill down and start setting up rules and having feedback back and forth and everything. So it's kind of been an interesting microcosm of, of a design process, um, at many different layers.

26:19 *Jory: * And it's been a ton of fun. And there's a weird, at least I found, cause I dabbled in a little bit. There's this weird freedom that you get, you know, we try and produce things as a company, we try and ship features and ship new icons and stuff, but there's taking every now and then taking a step back and just kind of doing a brain dump, a visual brain dump or exploring these different styles or directions you could take with the, uh, knowing that some might not work and that's okay. And, and that's part, that's part of the process, which is, you know, the key word here that we keep talking about, but that like, you, we're going to see if something works and it might not. And that's okay. We're going to, then we'll try something else and kind of knowing that there's that escape hatch as part of this little project that we're working on is kind

27:05 *Noah: * of, it's freeing and nice. Yeah. We're not on the hook to force anything to work. It can be much more freeform.

27:12 *Jory: * Versus like when someone commissions us to design an icon, we were like, okay, this has to get done. They paid us for it. We have to design it. It has to match, match Fawn Awesome's existing style. It has to like do these things. And there's a little bit of a pressure there. Like, okay, okay, I gotta get this done. And you know, very rarely, I'm not sure if it's happened yet. Do we have to say like, nope, sorry, can't do it. Um, cause that feels bad.

27:35 *Noah: * Yeah. And then again, that's another very different process of working with the commissioned clients because you're running things back and forth with them and checking that it's fitting with what, with what they want and what they need and everything else.

27:48 Matt: So it's, yeah, that's different too. Process. Process. Process. We love the process. Sometimes we don't love the process. Jory and Noah, thank you so much for taking time to talk about design process with me today.

28:04 *Jory: * Thank you. I think, I think they've probably the flow of our conversation is very similar to our process.

28:09 Matt: Which is messy and maybe they're nuggets of gold in there. Ultimately futile. Well, obviously not futile, Mr. Noah Jacobus, because look at all those thousands of beautiful icons our designers have created. So props to those guys. And thanks again, Jory and Noah for coming on the show. So if you like what you've heard here on Podcast Awesome, go tell a pal to listen, maybe give us a like, send us a rating and review. Five stars always help. As always, this podcast was produced and edited by yours truly, Matt Johnson. The Fawn Awesome theme song was composed by Ronnie Martin and audio mastering was done by Chris Enns at Lemon Productions.