Improve Your App's UI and UX

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings

JASON: Hello, everyone, and welcome to another episode of Learn With Jason. Today on the show, we have Lynne. Lynne, thank you so much for joining us. How are you doing?

LYNNE: I'm doing good. How are you?

JASON: I'm doing great. I'm super excited for today, because today is gonna touch on something that I think scares a lot of developers but that I think we all secretly wish we were better at, which is UI and UX work. We all  every time a developer makes something, we always say, well, I'm no designer, so, you know, this is  this is what it is. And then, you know, it's just, like, this source of, like, oh, I wish I could just make things pretty. But, okay, before we talk about that, I'd love to talk about you. So, for folx who aren't familiar with you or your work, do you want to give us a little bit of a background?

LYNNE: Sure. Well, I'm Lynne. I was  I'm here in Las Vegas. I was  I'm a selftaught designer and developer. Lived out in San Diego for most of my adulthood, but moved back here where I am currently. My original career was in healthcare. I worked in it for about ten years.

JASON: Okay.

LYNNE: In hospitals, pharmacies, and I was even a Program Director at a local college before I decided to design full time. Loving every bit of it. So, I love UIUX. That's what pulled me into actually getting into the tech world, was designing. So, that's where I'm at right now.

JASON: Nice. Very, very cool. So, Las Vegas. Are you, like, in Las Vegas proper? Are you in kind of the greater sprawl?

LYNNE: I am outside of Las Vegas. (Laughter) So, whenever they say Las Vegas, people think, like, oh, next to a casino? I'm probably a good 30 minutes away from, you know, like The Strip and the night life and the lights and everything. I would say where I'm at, it doesn't look like you're in Vegas. It looks kind of, you know, there's a little bit more trees. It's a lot cooler where I am. Because I live closer to the mountains.

JASON: Oh, nice.

LYNNE: I don't live in a casino. (Laughter)

JASON: Yeah, I figure that's how it works, right? Just the top floors are yours for the locals.

LYNNE: Yes, yeah. We have our own little section of the world above Las Vegas. (Laughter)

JASON: Oh, that's great. So, okay. So, let's talk a little bit about design. You mentioned that it's kind of what drew you into the tech world. So, you know, how was that journey? Like how did you  I guess, you know, you called yourself a designer, and so what was the journey for you from, like, in the before times, before you would call yourself a designer, until you felt like you were a designer. Like what was the tradition for you? What did kind of do to get to that level of confidence?

LYNNE: So, I always felt like I was a designer, you know, since Windows 95 came out with paint. I thought I was the greatest designer ever. So, I always thought of myself that way, but, you know, college, I had to choose something.

JASON: Okay.

LYNNE: So, healthcare it was. You know, parents' choice. So, went into that, and then, you know, as I was working, I would always try to find ways to design, you know, redesign things. Whether it was, you know, other applications or, you know, I worked to a school, so how to make their curriculum better. How to make it a little bit more interactive for the students. You know, especially with technology moving the way it is and the way that, you know, COVID happened, where everything went online, so that was kind of like the moving point where it was just like, I'm a designer. I want to do this. And this is, like, something that I feel like I'm good at and I like doing, so I transitioned that way. It was just  it was little trickles here and there, and then it just flooded.

JASON: Yeah, yeah. Well, that's great. So, there's a little bit of terminology that I hear thrown around, and so I think it might be cool to just kind of set some expectations, especially for, like, chat, for y'all who are watching, how many of you consider yourself to be designers? And if you don't consider yourself to be a designer, how, like, give yourself a letter grade on your design capabilities. Are you an Aplus designer? Are you a Cminus designer? How do you do when you have to make something look nice, right? While the chat is weighing in on their design  selfassessment of design skill, I'd love to just kind of enter some of the jargon. So, you hear about designer, right? Then you hear about subdisciplines of design that all kind of roll up to the broader things. We're talking about two of them today, UI and UX. So, UI is user interface, UX is user experience, and those aren't the same thing. So, could you talk a little bit about kind of what those are?

LYNNE: So, they work together, but they are pretty different. UI, like you said, user interface, that's visual design. So, like, how the buttons look, how the screens look, the pages, how everything is going to flow together and look together. UX is the functionality and experience of what's going to happen or what is happening. So, it's their journey through the beginning to the end from when they first land on your page all the way up until they hit that signup button. It's taking them on that journey. If UX typically comes first because it's thinking about the journey and how they move through the pages. And then UI kind of, like, brushes up and makes everything look good and it's that aesthetic part of it. They both come with, like, research and feedback and iteration and doing that whole process, but it's only to make the design better, to make the experience and interface cohesively work together.

JASON: Yeah, absolutely. And that's such a good point, too, because there are so many apps and sites that I use that I don't consider them to be aesthetically beautiful but they're so easy to use. Like when I go through all the buttons do what I expect. I can always find the thing that I'm looking for. I'm never lost. I'm never like, oh, crap, now what do I do? Then there are sites that are gorgeous, but I don't know where to click. A good example of what I would consider, like, the only focused on design sector of the industry is restaurant websites, right? You go to these fancy restaurant websites and they're beautiful. These big photos. And there's, like, you know, so many cool things happening. Soft music plays in the background. It's like, man, this is a beautiful website, and then you can't find the address. You can't find the  can't find their hours. You don't know what the menu looks like.

LYNNE: Exactly. They have to work together. You need to find a balance between, you know, beauty and functionality. And that's where UIUX comes in, is just that levelling of I need it work but still want it to look good and vice versa. We still don't want to reinvent the wheel and move buttons where they shouldn't go or that users aren't used to.

JASON: Absolutely. Yeah, yeah, that's a really good point of, like, what people are used to. If you have an expectation of how a website works, you better have a good reason as a designer to change all the expectations, right? There are reasons to do it. I don't want to have to learn a full bespoke visual language to use your website. Like, you know, that was always my complaint about Snapchat. I still don't know how to use Snapchat. I could never figure out all the controls because all the UI stuff changed.

LYNNE: Yes. Yeah. And I know that Instagram did their update, and there was a lot of complaint with the, like, the add to their story moved from the bottom to the top, and users were very upset at first because they didn't understand, like, why they would move it because they were already used to it being in a certain place.

JASON: Mmhmm.

LYNNE: I mean, it makes sense now because now it's all grouped together at the top, but a big change like that could potentially disrupt, you know, the experience for the user.

JASON: Yeah, absolutely. And so this is, you know, so, you talked about UI. You talked about UX. It starts to have a little bit of a gradient between, you know, like, UI, you can say, all right, so, this is pure aesthetics. You're going to be working in Photoshop or Sketch or Figma. Now talking about UX, you start talking about how some of them are going to fit together. Some of it feels like a design tool and some of it is code. So how much, like, code versus design. Do you find yourself doing both? Are you all on one side or the other? Where's your happy place on this?

LYNNE: For me, I really like both of it because I  when I was learning how to do UIUX coding, all of that, I felt like they all went together because, you know, I would start thinking about what I wanted to design, which is your UX. Then I started to think about how I wanted it to look, and that was UI. I decided, like, well, how is it going to translate? There came in, like, the coding part of it. And understanding the coding part of it was really helpful because then it just makes your design stronger, because you already know how it's going to translate, how it's going to look, how it's going to really be placed on the page, especially like responsiveness. You can't go too crazy with design because it may not be friendly to different browsers or to the way that the sizing are. It may load good on desktop, but it may not look good on mobile.

JASON: Sure.

LYNNE: So I think that I enjoy from beginning to the end. Like for the coders out there who are scared of design, it's actually not bad to go from coding to design because you already understand how it's going to translate and how it's going to work. It's just a matter of, like, taking the design and putting it into the code.

JASON: Yeah. And so when  so I think one of the reasons that certain folx are attracted to code is because there are rules and things work the same way and there's systems and you have predictability. And I think that design can feel more chaotic in that you can just make anything any color, and you can move this box to anywhere on the page and there's no rules. But, you know, I'm kind of asking this as a loaded question because I've also done design in the past, but, you know, how do you feel about, like, design as being a lawless area? Do you feel like there are no rules in design?

LYNNE: I feel like there's some rules. There has to be some rules because if we're talking about, like, the users, there are certain things that users are, you know, used to or they're, you know, the psychology of it. Like if we're going into that. I feel like there are boundaries to keep  to keep in design, but I  designing, like, graphic design I feel like doesn't have any rules. They're a little bit more open to designing everything and anything and whatever their mind can come up with, but then when it comes to, like, using different frameworks or translating it into different platforms, then I think that there should be rules. There can be rules. I mean 

JASON: Yeah.

LYNNE: Not everybody listens to the rules. So, I can't really say that there are. But personally, I have my set of rules on what I feel will be great UIUX when translating into code. When designing. But when it's, like, graphic design, I think that that's a little bit more open.

JASON:** For **sure. Okay. Well, maybe this is a good transition point then to actually start playing around with some designs here. So, let me switch us over into the pair programming view. And before we get started, let's do a quick shoutout to our captioning. We've got Jordan here from White Coat Captioning today taking all the things that we're saying and turning them into accessible captions, which I very much appreciate. That is made possible through the support of our sponsors. We've got Netlify, Fauna, Hasura, and Auth0 all kicking in to make this show more accessible, which means a lot to me. That is all available on the homepage of the site. So, go and check that out. While you're clicking things on the internet, you can go and follow Lynne on Twitter�@LynneCodes. And there is also Lynne on Instagram. Lynne.UIX. You said this is where you're posting a lot of your work.

LYNNE: Tips and tricks and, you know, some stuff that I do when designing.

JASON: Yeah, that's great. And then all of that is rolled up at Lynne.codes, which you can find there. And so today, I think we are going to just look at combining some of these tips and tricks. Your combined experience into how would one create a UI that has a good UX? So, and just, you know, as developers who are trying to get into this stuff, how can we make it so that when we're designing a new website, if we need to stand up something ourselves or if we're at work and we don't have design resources, how can we do better? How can we make something that's gonna get good results that people are gonna be able to use and be happy to use because it looks nice?

LYNNE: Mmhmm. Yeah, so  yeah.

JASON: Yeah. So, if we want to do that, I'm using Figma. So, for anybody who is not familiar, Figma is an online design tool. It is extremely good for this. And it has a lot, a lot available on the free tier. So, that's what we'll be working today. What should I do if I want to get started? Like what should my first move be?

LYNNE: First move is to create a frame. I mean, this comes also in when we're prototyping. Or wire framing. UX usually starts with the experience. So, we could create, like, a user journey map.

JASON: Sure.

LYNNE: If we wanted to. And that would just kind of go through the process of, like, what pages will be there. Where would the user go from start to end?

JASON: Hmm.

LYNNE: I mean, we create maybe just a simple app where we just have, like, the home screen and then we can go to, like, a settings page, and then their landing page.

JASON: Yeah. Ooh, question came in  hey, Cath, how are you doing. Do you base your website designs off of one thing, like a logo or button, or do you do something else?

LYNNE: Oh, well, that's a very good question. I usually base my  my personal designs, I usually base it off probably working inspiration, if there's, like, a picture, I start with that. If I'm feeling, like, beachy, I'll have a picture of a beach and then I'll just go from there. It's usually the feeling that the, like, an image would give me. That's where I get my inspiration when it comes to colors or if it's, like, for an app that's, you know, is supposed to help motivate you, then it would be like a motivational image. And then I'll just pull colors from there and the feeling of, you know, like, what gets, you know, people going and whatever that  kind of, like, that picture exudes or that image.

JASON: Nice.

LYNNE: Then if I've designing for someone or, you know, a client, then I would be looking at their logo, and then I would design based off of, you know, their color scheme and their look and feel of their branding and their values. Because, I mean, designing for  designing for a site that is mainly, like, for kids, it's different than a site that's gonna be, you know, their audience is more, like, tech.

JASON: Right.

LYNNE: So it's all on branding. And then that's where I start to draw inspiration from that and then colors and then finding what really the tone is.

JASON: Nice. Yeah. Okay. So, as we're starting, I've got this selection of frames here. So, when you design, do you prefer to start with a mobile layout? Do you start with a desktop layout? Do you try to do all of them at once? What's your typical starting point?

LYNNE: So, the rule is supposedly that you're supposed to start mobile first.

JASON: Okay.

LYNNE: And the reason for that is because mobile's a smaller screen. So, if you start on desktop, a lot of things that you're gonna be designing is really big.

JASON: Mmhmm.

LYNNE: Because your desktop starts to be, you know, 1440 and up. And once you try to view it on your phone, everything shrinks down quite a bit. So, designing on mobile first is the general rule. So that you know how it looks on mobile and then you can always expand your pictures. You can always expand, you know, the text, make them larger or to fit the larger screen, rather than bringing them down.

JASON: Yeah.

LYNNE: So, we'll do mobile first. Because that's general rule. And then, like, all good things on a homepage, we have our navigation.

JASON: Okay.

LYNNE: That's usually where I go next, because that's what users usually look for.

JASON: And so do you want to set this up as, like, a wire frame or do you want to kind of pick some navigation? So, let's say  so, our app, you said let's do an app where we've got some settings. Maybe what our app can be is  to give us a really simple workflow so that we don't have to get into a bunch of edge cases. It's an app where you push a button to get a photo of something cute.

LYNNE: Yeah.

JASON: So, I default to Corgis. What's your favorite  if you're looking for a cute animal to brighten your day up, what's your goto?

LYNNE: Cute animal to brighten my day up? Well, I have a dog, and I have a Shiba Inu. I think he's the best dog ever. So, I'm going to go with a Shiba Inu.

JASON: This is an app that will cheer you up. You click a button and open it up and get a picture of a Shiba Inu. Now we've got two flows, right? Push a button, get a picture. Go to settings and change the cute thing that you get.

LYNNE: Yeah.

JASON: Okay. All right. So, did you want to wire frame that or do you want to try to just let it rip and design it?

LYNNE: We'll just  we'll just let it rip.

JASON: Okay.

LYNNE: We'll just get going. Okay. So, since we're on mobile, since it's just going to be something that pulls up an image, there's not necessarily a navigation menu. Because  are we just talking about the page or are we going to start from the beginning where you can click to go to find 

JASON: Let's think about  let's probably keep it simple, right? Like you'll load this site. So, let's think about it like a website. So, you go to a web address, and the web address will be, like, showmesomethingcute.com. Or something like that. So when you show up, it's just a button.

LYNNE: Yeah, okay.

JASON: And then maybe we can, like, have a settings thing that would  so, what is that? Like a little logo that says what the site is. A little settings thing so that you can change what the thing is that you're gonna see and then a button. And when you click the button, it shows a photo. That's a pretty straightforward app, right?

LYNNE: Yeah.

JASON: Okay.

LYNNE: Okay. So, then we want to make the header bar.

JASON: Okay.

LYNNE: And then we want to put that logo for our  for this get cute photo app right there on the top lefthand corner. That is something that is mainly  don't reinvent the wheel. Most logos are located on the top lefthand corner. And that's where the users usually go when they want to go back to the home screen. They mostly automatically know to click that, that it just automatically takes them there. So, our logo would go on the topleft. And if it's just an icon logo, then we will have it spelled out. So, for example, if it's just a logo of a dog, so, we'll write "get cute photo app" on there, unless the logo is "get cute photo app," we don't want to repeat it on the logo and right next to it. So, we'll have that there. And then right in the middle is where we're going to generate the photo. So, what we're going to do is we are going to make a space for the photo to generate.

JASON: Okay. So, like, the photo goes here or something?

LYNNE: Yes. Yeah.

JASON: Okay.

LYNNE: That looks good. We can move it down a little bit, because we want  we are able to change the settings on what we're looking for. That, right above the picture, because now we're talking about hierarchy. A good thing about hierarchy is that it's also good for accessibility when there's screen readers or anything like that. So, the user can go through so they know that the logo's at the top and then they can edit what they're searching for, and then that picture's supposed to pop up right on the bottom of it.

JASON: Great.

LYNNE: Otherwise, if we had it the other way, if the picture was on top of that, then it would say, like, oh, here's the picture of this. And then they would have, like, the settings on the bottom, which wouldn't really make any sense because it already generated a picture on there without 

JASON: Mmhmm.

LYNNE:  them being able to select their options. So, above that, we're going to put a space for  choose your animal, I guess, that's what it is.

JASON: Okay.

LYNNE: And then  or choose your preference or picture or  so, a good thing to know when making search bars. I was going to say we could do a search bar, but that would be us being very familiar with the developer's perspective on how they're going to pull the images and how they're going to be able to search the data for all the pictures that are generating. It's not an easy, like, the easiest task to do if  when working with developers. So, that would be  that would be us talking to them saying, like, hey, is  can we do a search bar here? Or a dropdown? Or how are we  how are we gathering the information? That would be something good to know as, like, the UX and UI, in the process of designing in.

JASON: Yeah.

LYNNE: Get that question from the developer answered on how they pull information.

JASON:** So, **let's assume for our purposes, we're gonna use Dog CEO. So, the only thing you can choose is a dog. But I think in here, we can  you can get a random. So, maybe by default, you just get a random dog, but then I think you have an option to  here's the documentation. You can get any breed.

LYNNE: Okay.

JASON: And so I think we can get, like, so, if I  I can't change that, but if we do any hound, right? So, if you chose a Shiba Inu, it would pull a random image of a Shiba Inu every time you pushed the button. That would let us  look at that one.

LYNNE: Hmm, that's a very prettylooking dog.

JASON: That is a well quaffed dog. It also looks like a unicorn.

LYNNE: It does. So, we can actually  since that's what  if that's what we're pulling from, if we can filter by breed, then we can actually put that option on there to filter by breed, so at least they have that option. If we're  okay. So, say that we're using this. So, it will be cute dogs  cute dog app. Then we have a photo filter right there. So then they can find their breed. And then that photo will generate  it'll generate in this box. Then right under there, that's where we'll have the button to generate. On most buttons, the call to actions are after, you know, the information that we're using. So that the users know to click that and then it'll go somewhere. Buttons usually stay at the bottom of your page.

JASON: So, like, here?

LYNNE: You can do it there, but I would put it closer to the photo just so they know that they're together.

JASON: Cool.

LYNNE: I was just saying at the bottom of the information.

JASON: The bottom of whatever the thing is that we're doing. Gotcha.

LYNNE: Yes. Just so they know it's a go button. It's like a next button, you know? Their experience wise, the users are looking for that button at the end of a document, you know, to go next or to click "go" or to do  for it to do something on that page.

JASON: Gotcha.

LYNNE: So, we'll have that there, and then the photo would generate here.

JASON:** Sema**ntics dev with a double raid. Interesting. Two raids from Semanticsdev. I hope you had fun on your stream today. Welcome. We're designing stuff. It's already  we're doing an app where you're going to be able to go to an address and then you're gonna be able to push a button and get a picture of a dog. And I already have an idea for the URL, but I have to go see if it's available, and then I'm gonna actually build this because it makes me smile.

LYNNE: That would actually be really fun.

JASON: Yeah, I think this is gonna be a fun one. I really love the idea of just, you know, it's like, hey, you're having a bad day, come push this button a few times.

LYNNE: I think Kapehe said  I can't read that.

JASON: Is there a design ruler how big it should be compared to the other things? Should it be bigger? Smaller?

LYNNE: I would say it depends on how many buttons there are. I mean, 70% is good. If we're aligning  if the button's going to be a square like this, I think the button's actually okay to be the size of the photo. If the photo's going to be square. If we're looking from a rounded, I would make it a little smaller, only because then the rounded starts to take up too much of the space. As we talk about desktop, then, yes, it's going to be probably about maybe I would say, like, 70% of the photo. Because the photo would be a little larger. But for mobile, I think that the size of it is good because when thumbs need to push the button, and we want it big enough for the thumb to actually press the button. But not too  not too  not too big where it's, like, taking over the whole page, but not too small that we can't find it or we can't press it.

JASON: Right.

LYNNE: On desktop, it will be a little smaller because, you know, we're using a mouse. We can click it, and against the photo, it will be too wide if we're looking at, like, a fullsize desktop.

JASON: Nice.

LYNNE: So, it'll just depend on mobile to desktop.

JASON: Yeah. So, I'm kind of just, like, blocking this out here. So, I figure we can go in and actually do a little bit of design once we've got the pieces in place. But, yeah, I've definitely found that, like, to me, the right size of a button is the thing that looks like a button that's big enough for me to click. If those two things are true, I tend to be pretty happy about the button on the page.

LYNNE: Yes. Yes. Exactly. You want it to be noticeable. You don't want it to look like just everything else on your page because then it'll just kind of, like, fall into the background. Then nobody knows it's a button. Nobody ever clicks on it. Then you'll never get any cute photos of dogs because you never click it.

JASON: That would be a tragedy.

LYNNE: Yes. So, we want it  we want it big enough on mobile for users to be able to find and click it using their thumbs.

JASON: Look at this dog. Okay. So, this got an actual, like, audible reaction from me, so I think this is a good starting point for our  you said that you use these for inspiration, right?

LYNNE: Yes, I do. I do. So, now we're going for that beachy fun dog in the sun feel.

JASON: Yeah.

LYNNE: So, it's gonna be a fun app.

JASON: Absolutely.

LYNNE: All right. Okay. So, basically, this is all the app's doing. Experience wise, what we want them to experience is we want them to experience the joy of finding photos of dogs. But by keeping it simple, by having just one button to show me a dog, and they'll be able to filter it and choose what breed of dog they would want it to generate or to see.

JASON: Mmhmm.

LYNNE: We don't have to worry about back buttons or we don't have to worry about any navigation, only because this is the only thing that the app is doing.

JASON: Yeah.

LYNNE: When we are talking about, you know, the apps and making sure that we are designing for UI, the three main things that I like to make sure is that it's consistent. So, consistent with the branding. So, here, beachy, dog theme, we're going to go with that. And then if it's responsive. So, we're going to make sure that we're going to respond this to desktop, starting with mobile. And then we're keeping it simple. So, simple is good. It's  we don't want to overcomplicate things, especially if it's a simple app like this. We don't want to add things or words that doesn't need to be there. And make things too wordy or confusing for users.

JASON: Mmhmm.

LYNNE: We can put a little instruction on there. But this is pretty much selfexplanatory. Where it says "show me a dog," you click it. "Show me another dog," you click it, it will show you another dog. When it becomes too complicated, we don't want too much information on the page. If we happen to have more information that we need to put out there for the users, breaking them town in different paragraphs or sections is very helpful. Readers usually tend to fall off when there's, like, a very long paragraph. Because they're not gonna read all of that. One, it hurts the eyes. Two, it's attention span.

JASON: Sure.

LYNNE: Yeah. So, big blocks of color and separation really helps.

JASON: Yeah.

LYNNE: Lots of white space helps as well, when it comes to, like, breaking down information.

JASON: Nice. And so speaking of spacing, chat just asked how do you decide on the spacing between various items on the page? Like do you have any kind of general guidelines or just mental rules you follow?

LYNNE: So, I think of them as, like, sections or categories. So, each section will stay together, and then there will be a bigger gap between  between the sections. So, go to filter photo and then show me a dog, those all go together, so I would space them a little closer together than say that we had, like, two sections of that. Like show me a dog, and the next one was, like, show me a cat.

JASON: Okay.

LYNNE: Then the show me a dog and show me a cat section would be spaced further apart.

JASON: Or we maybe have a footer, right? And the footer is going to be down below, and that'll have some extra details here. Like we want to have credits and stuff like that, you know? So, we'll want to make sure that we link to the Dog CEO API. And some stuff like that. Just link to the source code. Maybe link to the show where we designed it. So, more spacing here, and then these are kind of logically grouped.

LYNNE: Yes, logically grouped. They'll still have spacing between them. You don't want them to be too close together, only because then it just starts to mesh together and there's no way for the eye to separate, you know, the filter tab versus the photo versus the button. Because once the button is filled with color, it's going to merge into that photo and then you can't find the button again. So, we do want to have separation between, like, paragraphs in a section, but we want to have more spacing between different sections.

JASON: Right.

LYNNE: So just like how you were showing the footer at the bottom, there's a good separation between it. Because if the show me a dog is way too close to it, then it looks like the footer is a part of that show me a dog section.

JASON: Right. Yeah. For sure.

LYNNE: Mmhmm. So, my general rule is double the  at least double the space between sections of the actual spacing between paragraphs.

JASON: Yes. That totally makes sense.

LYNNE: Double to triple it.

JASON: And a little trick in Figma, if you're looking to do that, is if you select one of these and then you hold alt, it will show you how far it is between  like I'm just holding alt and hovering over something, and it's showing me how far it is. So, I can kind of see here this one is 42 pixels from the button and 29 pixels from the filter. So, maybe I want that to be more even, right? So, I can go here and I can go, like, down one. So, now it's 30 and that will take 

LYNNE: So, a really cool way to do that is if you just highlight or if you select those three boxes, and then on the top  oh, but you can't  I don't have the  okay.

JASON: Yeah, I think it might be 

LYNNE: Yeah, on the topright, you can  right there. You can just distribute them evenly. Evenly spaced. So then right  and so right below the degrees  so, if you go back into 

JASON: Yeah, let me get it open again. Right below the degrees.

LYNNE: Uhhuh. You can adjust the spacing between them there. So, if you make it lower. If you want it 20 pixels between.

JASON: Oh, look at that.

LYNNE: Yes. It'll actually, yeah, adjust it for you.

JASON: Very cool.

LYNNE: Then you can keep it consistent. So, when you start to have more pages, so, another UI rule would be to keep it consistent between all of your pages. So that there is that flow, that same flow. Then we can go back here and say, like, okay, there's 30 pixels in between each paragraph, so each paragraph is going to be 30 pixel spacing.

JASON: Nice. Okay. And when you  and then when the developer comes in and codes it, then they can go in there and look, okay, they used 30pixel spacing here. So, that's a really good tool to use.

JASON: It also does, like, no, not there. Inspect. Look, it will show you the CSS for this. Which is really, really, really cool. This part, like, the position absolute in the lefttop is a little bit less useful in most cases, but it'll show you the width and the height. It will show you the background. It's just very cool to have that kind of information where you can sort of see at a glance what each of these things is. And if you edit these to have actual names, like, they show up in the CSS with that label. So, Figma's a very, very cool tool, if you have not used this one.

LYNNE: It is.

JASON: Okay. So, let's see if we can start pulling some of this stuff in, right? So, if you're  we've got our wire frame and we know where things are gonna go. So, what would you do first if you were going to turn this into, like, a finished design?

LYNNE: The first thing I would do, if we have it, would be the logo. Or, you know, putting that name up there. Just so we  usually I pull from the logo first. Like that inspiration.

JASON: Okay. I have an idea to make this simple. So, what I'm going to do is I'm going to make us a little circular logo, and I'm going to take our dog and let's see, we'll move this back. So, what I'm gonna do here is I'm gonna work backward. How do I do that? I need to arrange. Send to back. And then if I click this one, then there is this mask button. I always get this wrong the first time, so, let's see if I got it right. Aha!

LYNNE: There you go.

JASON:** Whoo**ps. Got to group these two. And then I can, like, put a stroke on it?

Aha! Behold, my bucket.

JASON: That's not going to work. The reason is everything is masked. Which means if I want to do anything with this, I need to take this and put it up here so it's not a mask. There we go. And then I can get rid of this. Now we've got, like, kind of thing, right?

LYNNE: Yeah, it's cute.

JASON: Oh, I just realized all the colors in this that we can pull.

LYNNE: There you go. It will be very festive like a fiesta.

JASON: Yeah, maybe I'll pull, like, this one. You. You look happy. There. That's  okay. All right. What do you think about that?

LYNNE: That's actually a very good way to do it, too, when you're thinking about UI, is to pull colors from, you know, like if you're pulling from the logo or from, like, an image like this, I usually get my color schemes that way. Is not just inspiration, but everything from it.

JASON: Yeah, I  that tends to be, like, I feel very much the same about that. Where I'm always, like, all right, did they send me a logo? Great. Let's pull all the colors from the logo.

LYNNE: Yes.

JASON: Did they send me, like, here's the promotional image. Let's pull all the colors out of the promotional image. Then you start with a palate. Like it all feels cohesive.

LYNNE: And the great thing about it is because it's an image, you already know that the colors go well together.

JASON: Mmhmm.

LYNNE: So, that's, like, a way to cheat, you know, finding a color palette or finding a good color scheme is to just pull it from images because you already know how they visually look together.

JASON: Okay. So, let's maybe put this at, like, let's go with 80 pixels, that seems look a good size. And then this can be our logo.

LYNNE: Mmhmm.

JASON: So, then I can drop out the logo part here. And then do we need a header bar?

LYNNE: We don't need a bar. No. A lot of  unless we're doing, like, a navigation, we really don't need the navigation bar, because this is all that's gonna go on there. But, yeah, there you go.

JASON: Okay. Do you have any, like, rules for choosing fonts?

LYNNE: That goes along with my inspiration. So, now that we're doing, like, a beachy, fun theme, I would say that a beachy, fun theme is Sans Serif/handwritingtype fonts.

JASON: Let's see what the handwriting is. Do any of these jump out at you? This one kind of does.

LYNNE: Pacifico is a good one for headers and titles. When you're using cursive, just to be careful. You don't want to put cursive all over your page. Because it's hard to read for some people. But if it's going to be a large heading, then cursive is okay. It works. If you're just using it maybe in, like, one or two places. But as, like, the whole app itself 

JASON: Gotcha. So, maybe not that then. Maybe not a cursive. We want to be able to use it in a couple of places, like the buttons and stuff. So, maybe we want. Do any of these jump out at you?

LYNNE: Let's see here. Scroll up a little  I mean scroll down. Wait.

JASON: Sorry.

LYNNE: Okay. Let's go with something that is a little  okay. I'm here, like, scrolling on my 

JASON: Sorry.

LYNNE: I was like why isn't it moving? I think the one in the middle works.

JASON: Sriracha. It is already loaded. I love that. Figma also has all of the Google fonts just, like, loaded which is so nice.

LYNNE: Yes, it is. So, that's a fun one.

JASON: And then maybe  how would you pick  okay, so, here's a question. Right now we have a white background and black text. This is pure black, and the background is pure white.

LYNNE: Mmhmm.

JASON: How do you typically, like, do you just roll with that or do you have some rules about the way you choose those?

LYNNE: I do have some rules when I choose those. Black on white and white on black is very bold. Very bright, I think, at some time  at some point. So, I would usually  if I'm keeping with a white background, I would go for maybe, like, a darker gray, and then if I'm going with, like, a black background, then it'll be a lighter gray, but not white or not black. Only because it's, like, on here, it's very bright. Like a bright black. And then if you see white on black, then it's pretty bright on the eyes.

JASON: Mmhmm.

LYNNE: And that's going a little into accessibility. Because we have to work with, like, contrasts and make sure that, you know, users are still able to read the text.

JASON: Right.

LYNNE: Whether what size it is and then what color it is.

JASON: Nice. Okay. So, one way that I've done this in the past, and you can tell me if I'm wrong, I'll start looking at an image and I'll look for some of the grays.

LYNNE: Yeah.

JASON: And they're never all the way black, right? So, this is, like, a dark gray. We could even look over here and, like, this is a little bit lighter. So then it's  like this is so subtle that you might not even notice the difference, but to the folx in the chat, like, look at the difference between  so, this is the 262D2F, right? So, it's like a, you know, it's a lighter gray. Then if I go back to the pure black, it just gets a little more, like, harsh on the eyeballs, right?

LYNNE: Yes, exactly.

JASON: Like you can see just that subtle shift. It  I swear, it makes all the difference in the world.

LYNNE: It does. And it's not noticeable. Some people will think it's black, so they kind of don't notice until it's put against black. And same goes for white when it's on a darker background. Like you don't notice until you see it side by side, but it does make a very big difference.

JASON: And to go back to your other point, because I used a gray from the image, now our font colors, like our typography is going to be, like, on  in theme with the image that we're using for our logo.

LYNNE: Mmhmm. It's just blending everything together.

JASON: Mmhmm.

LYNNE: And that's what we want to do.

JASON: I swear, like, the more I've learned about design, the more that I've started to just embrace that it's  it is tons and tons of subtle little things that make, like, make a page feel like it belongs together.

LYNNE: Mmhmm. Yep. Absolutely.

JASON: Okay. So, we've got  we've got a logo. We've got some logo text. We've got a font. I'm ready to rock and roll here.

LYNNE: Okay. So, let's start  so, speaking about, like, spacing. So, we gave spacing between this section and the footer. We want to do the same for the header.

JASON: Okay.

LYNNE: Because it looks like it's too far to the top. We want to, like, maybe  since it's the only thing on the page, maybe set it in the middle of the header and the footer. Just so it's visually symmetrical when you're looking at it.

JASON: Yeah. So, maybe we can put the credits in  so, we can say, like, you know, created by Lynne and Jason. We can make this font a lot smaller. Let's make it, like, 16 pixels. And then we'll center it. And then we can  all of this right here. And then maybe  okay. So, we'll have  I'll eventually add some more links and stuff in there. But for now, that will be roughly what it is.

LYNNE: Yeah.

JASON: So, this one, too, is set to be this pure black. But it feels like maybe I don't want to do this black. Wait, what did I just do? I feel  I'm on a smaller screen now, and so I can't see  can I get you to go away? Okay. You go away and I can actually see what I'm selecting here. So, let's select that. This feels like it should be a lighter color, right? So, how would you 

LYNNE: Yes. So, because it's a footer, we want to really separate it from, like, have that separation. So, we want to  we actually want to keep that background on the footer.

JASON: Oh, okay. Great. Let me put it back here.

LYNNE: Sorry. I was gonna tell you, but 

JASON: I mean, it's 

LYNNE: So, let's keep that. And I could show you  let's do it opposite. So, then we can put the background to that dark gray color.

JASON: Ahhh!

LYNNE: And then we can flip it so we'll have a light gray color for the text.

JASON: Okay. So, I've got that. And then our text is currently 

LYNNE: Yep. So, now let's look for a lighter color, like a lighter gray.

JASON: Okay. So, let's see if we can find one in here. So, I'm gonna grab my dropper tool again.

LYNNE: Mmhmm.

JASON: And let's move this out of the way. So, we can just kind of hop in here and look at  what about one of these?

LYNNE: That would work.

JASON: Tada! And so this has  I think this has good contrast.

LYNNE: Yeah, yeah.

JASON: Do we have testing here? I can't remember. I don't think it does. We don't quite have  I think  I feel like that's a tool that you can install but we don't have it yet.

LYNNE: Yeah, no, it's something  it's a separate thing. I know I had to install a separate thing, too. But it looks good.

JASON: Yeah. And then if we look at the whole thing together.

LYNNE: Mmhmm. It's coming together.

JASON: It looks pretty balanced, like, these pieces. I think this will shift even more when we turn these into actual controls.

LYNNE: Yep. Okay. So, now that we have our footer and our header, now we can go ahead and do our photo filter. Because that's at the top. If you want to do that.

JASON: Okay. All right. So, let's do this. Let's assume that it's going to be a dropdown because we get a list of breeds, I think. So, we need to  did I get a full list? I'll be able to find it. Oh, this is the full list.

LYNNE: Yeah.

JASON: So, we'll be able to kind of go through here and get all of these. Does it let me just, like, type Shiba? No. All right. So, this is what it will look like by default. Basically, we push a button and we get a random dog.

LYNNE: Mmhmm.

JASON: So, we'll need a dropdown like this so that we can choose what we want to see.

LYNNE: Awesome.

JASON: Okay.

LYNNE: Okay. So, first, we want to put the text on there. Choose your dog. Or 

JASON: We could even just default it to, like, Shiba.

LYNNE: Okay.

JASON: I guess we'll use what the Dog CEO thing uses, so we'll default it there. Then do you have a  so, we've used this as our heading font, but I assume that's probably not what we want to do for the whole app?

LYNNE: No. We can use just a San Serif I think will be fine for the rest of the text.

JASON: Okay. So, Roboto is a default. I think the computer default, like, I'm on a Mac, so this is, like, the Mac default. We can just set the app to use our default font, and that'll be good.

LYNNE: No, what's the sizing on that? It's pretty big.

JASON: It is pretty big. So I think we've got this thing set to be  it's, like, 60 pixels tall and 327 wide. Like it's pretty large.

LYNNE: Okay. Yeah, that's pretty big. We could probably decrease the size on it a little.

JASON: Okay.

LYNNE: Just because it's on mobile, it's going to be huge.

JASON: Mmhmm.

LYNNE: We have to think about that. And how it's going to look on our phones.

JASON: So, do you think, like, 50 tall or so?

LYNNE: I think 50. I usually go with 50.

JASON: Okay. And then our font size right now is 26. Which is a pretty decently big size. I think the default for a browser is 16. So, like, if we didn't touch it, this is what the default would be. Which feels a bit tiny.

LYNNE: It feels a bit tiny. We could probably do 20. Maybe somewhere in the middle.

JASON: Okay.

LYNNE: Yeah. I think 

JASON: That looks good. I like that.

LYNNE: Yeah, it's a good size. Because I know that it's  like when we're designing it, because I've come across this many times, where when I'm designing, it feels very small, so I try to make things bigger, but then when it's on the actual, like, phone or desktop, it's huge.

JASON: Mmhmm.

LYNNE: It's a lot bigger than what I expected it to be, because it's different than when you're actually holding it in your hand and looking at it, versus, like, I can zoom in on my computer or zoom out because it's not, of course, the actual viewing size.

JASON: Right.

LYNNE: Unless we're prototyping it, you know, and hitting that play button.

JASON: Yeah.

LYNNE: So I think 20's a good size. I think anything larger than that, then we start to get into, like, the headertype sizes. So I think that's good. That's going to have a dropdown. So, we can get a little icon for a little dropdown or a little carat. I think there is a triangle in there. Or polygon. Yeah. We can just do a simple one. Then we can actually choose the color for this, too.

JASON: Okay. So, I'm going to make this just so we can see it right now, I'm going to make it black.

LYNNE: Mmhmm.

JASON: And I think we can make that even smaller, so why don't we do, like, 15?

LYNNE: Mmhmm. And then also changing the background on that dropdown menu.

JASON: Mmhmm.

LYNNE: Instead of keeping it gray. We could go with a lighter gray close to white, just so we have  so it's, like, it's not blending into the page, but it's still  we're still able to see the Shiba, the wording and the carat is together.

JASON: Yeah. So, one way that I've done this, I've really been falling in love with HSL colors, which are just another way of kind of describing colors. And one way that I've kind of taken to doing this is I'll find whatever color it is that I'm using for my headings and start there. And then you can just take this lightness, which is  so, hue, saturation, lightness. That's the HSL, right? So, I can just go here and just like, boop, boop, boop, boop, until it starts to be the right color. So, now it's not just gray, it's like a 

LYNNE: It's falling into your color palette.

JASON: Right, yeah? You can see, too, check out the difference between this gray and this gray. And I'll even bump the lightness on this a little bit to be more similar. Just look at the  like this is subtle, again, but look at the life that comes into this.

LYNNE: Yeah.

JASON: Here. Compared to this one, which is monochrome. So, it makes a big difference.

LYNNE: Yeah, it's doing that same thing with the "show me a dog."

JASON: Mmhmm. And do do you want this to be  do you think this is the right amount of lightness? Do you want it lighter, darker?

LYNNE: Let's do it a little lighter.

JASON: Okay.

LYNNE: Yeah.

JASON: About there?

LYNNE: Yeah, that looks good.

JASON: Okay. That works.

LYNNE: Yeah, that looks good. And then we can actually  let's round out the edges a little bit.

JASON: Okay.

LYNNE: Just 

JASON: And we can do 

LYNNE: Do 

JASON: Like this is very subtle, so check this out, y'all. We're at 0, 1. Do you see it move? You can't even see it when you do 1. Just this tiny little bit. Then we go, like, 2, 3.

LYNNE: Yeah, it's really cool.

JASON: Okay. So, what do you think? Are you looking for, like, a really, really subtle?

LYNNE: Maybe like a 5.

JASON: 5?

LYNNE: Yeah.

JASON: I like that.

LYNNE: 5 is good. Okay. So, then we have that. We can even  okay. So, now on the photo, we can add that 

JASON: How about I just grab one of these? Let's get  let's get  it was almost as if this Shiba knew that it was about to be photographed.

LYNNE: Yes. Yes, he did.

JASON: So, here's 

LYNNE: Perfect.

JASON: Here's a photo. And I believe the frame is set up to be, yeah, it just pasted into my frame. So, this is another cool thing, is when you start changing the frames, Figma doesn't distort your images. Isn't that great?

LYNNE: Wonderful.

JASON: I feel like that has not been my experience with other design tools.

LYNNE: And then we want to round this out, too, just so it stays consistent.

JASON: Okay. Okay. Look at that  just, like, we did nothing. We did literally nothing here. We pasted in an image. We added a little bit of rounded corners. And look how nice, like, this looks like an app. If you opened this, you wouldn't look at it and go, well, this looks like somebody just threw something on a page. Like this looks nice.

LYNNE: It's those really small things.

JASON: It really is.

LYNNE: It's the rounded edges. It's the colors. It's just changing something very, very small, it makes a big impact.

JASON: Mmhmm. Absolutely. Okay. All right. So, let's do the button. So, for the button, do you keep the same radius?

LYNNE: I  let's see how it looks. Let's see the differences. So, we could keep it the same radius as the picture and the dropdown menu. And then let's change out the color, just so we can see how the button will look with this rectangle.

JASON: Yes. I'm going to make this a little bit bigger because I want to play with 

LYNNE: Colors. He looks so happy. I just love it.

JASON: So, if we have  oops. What do you think? Maybe a blue button? Like a nice calming blue button?

LYNNE: Yeah, let's do a blue.

JASON: I feel like we're going to have to mess with the HSL a little bit on this. So, here's another thing, we're still in the palette, even though this isn't exactly in the photo.

LYNNE: Mmhmm.

JASON: Right? Like that's another thing that I love about HSL is you kind of find the neighborhood that you're trying to be in. Here, this is similar, but this one's a green. So, if we, you know, kind of go, hey, let's bump the saturation up a little bit and bump up the lightness a little bit. What do you think? Do you like the green or the blue?

LYNNE: I like the green  I mean, green or blue works really well. Those are common colors for buttons to go somewhere. Of course you want to stay  you want to avoid, like, the reds and the yellows, because those are more of, like, warnings or don't do it or cancel buttons. So, green or blue, those are usually happy colors to get users clicking in the right direction. So, when we're talking  when we're talking about experience, like, user experience, this is the same thing where we want to keep it consistent with other applications.

JASON: For sure. And so do you think, like, going with this beachy vibe, do we want to go all the way up to like a sea foam here? What do you think? Do we want to keep it there? Do we want to go with more a darker, like, brighter green?

LYNNE: Let's find something in between that. Because we're using that dark gray at the bottom, I don't want it to be too far off, whereas just we see a bright green button and then a really dark footer.

JASON: Okay.

LYNNE: So, we want to have something a little brighter but softer, if that makes sense.

JASON: Brighter but softer?

LYNNE: Yeah.

JASON: Okay. So, maybe hereish?

LYNNE: I think we're going in the right direction. Yeah. But we want to stay away from, like, neon.

JASON: Yeah.

LYNNE: Because neon against white, that's just  that just hurts.

JASON: Okay. So, how about this as a color? This is 

LYNNE: Okay. I think that looks good. I think the gray at the bottom looks a little greenish. So, it kind of  it goes together, I think.

JASON: So, this is definitely pulling out of the blue. So, if we wanted them to, like, really matchymatchy, we'd go with a blue button. Do you want to try that?

LYNNE: Let's try the blue.

JASON: Okay. So, I'm going to take this. I'm going to select here. And then let's pull it over to kind of like a blue.

LYNNE: There you go. That works a little better.

JASON: That maybe?

LYNNE: Yeah.

JASON: And now we've got. This is pretty dang cohesive.

LYNNE: The sunshine of our beachy  the blue skies.

JASON: I love this. This is fun. Okay. So, then the last thing that we need to do is get this text looking right. So, did we want to use the same font as here?

LYNNE: So, what I would usually do is I would use that same blue and go darker. That's 

JASON: Oh, so, you're going  all right. So, use the same blue.

LYNNE: And then go darker.

JASON: Okay. Are you going, like, the same darker like this dark?

LYNNE: Actually, you know what? I just thought of that, because we used the blue and we went lighter, so, it would be that same blue.

JASON: It definitely could be, yeah.

LYNNE: Yeah, it could be. And that would work. Just so it's not black, but it's not a different color.

JASON: Mmhmm.

LYNNE: Because if we were using, like, a dark green, then it would be, like, a dark green on a blue.

JASON: Right.

LYNNE: Then you want to keep the blue on blue. We're using a lighter blue and a darker blue. That's just, like, a  that, again, is, like, a subtle way to change the way something looks in a good way.

JASON: Yeah. This has got a nice  again, it's, like, subtly cohesive. We pulled colors out of this photo for, you know, every single color on this page with the exception of this photo is source right out of this image. Which is, I think, just so nice how quickly that all starts to feel like it belongs in the same page.

LYNNE: Yep.

JASON: And then would you go with, like, your San Serif font or your heading font here?

LYNNE: I would stick with the San Serif only because we don't have paragraph fonts for headings. The font we used to "show me a dog," I feel like that's more the header. So, we can keep that separate. And then keep everything else, the text the same at the bottom.

JASON: Okay. And what do you think about the sizing here?

LYNNE: I think it's a little big.

JASON: Okay. So, do you want to go  so, we did 20 on the other one.

LYNNE: Mmhmm.

JASON: Is that maybe a little small?

LYNNE: Probably a 24.

JASON: 24, okay. I like that.

LYNNE: Yeah, I think 24's good. Just so that there is space on the  on the sides of the text. Just so we know that it's a button and it  because if it fills it, it might look like just a block of text.

JASON: Mmhmm.

LYNNE: Here it kind of looks a little bit more like, oh, okay, show me a dog. Let me click on that.

JASON: Yeah.

LYNNE: And then we can also put a little shadow behind the button.

JASON: Oh, okay.

LYNNE: Just so it looks like it's popping out of the page a little bit. Okay, hey, this is a button.

JASON: Here are my effects.

LYNNE: Mmhmm.

JASON: I've got a drop shadow. I'm going to click this button here, which will actually let me change things up. So, let's see. This one goes left and right.

LYNNE: Mmhmm.

JASON: This one goes up and down. So we can move that shadow around. And then we've got the blur.

LYNNE: Mmhmm.

JASON: So, if I do  this is going to be easier to see if I move this out. So, if we've got 0 blur, it's just another rectangle.

LYNNE: Yep.

JASON: If we go lots of blur, it turns into, like, a smudge.

LYNNE: Mmhmm.

JASON: And then spread goes out. Okay. All right. I understand the mechanics. How would you approach doing this?

LYNNE: So, what shadows do is basically to give  when the user looks at something, they're drawn to shadows because it feels real. It feels more lifelike. So, we want to make sure that the shadows are going in the correct direction. That's probably why Figma's defaulted for the shadow to be at the bottom when you click on it. So, we can keep it at the bottom. We can move is a little left if we want. If we're thinking about, you know, the light's going to be on our topright or topleft, we can move the shadow either to the bottomleft or the bottomright. But I think that leaving it there is fine. I would blur it a little more.

JASON: Okay.

LYNNE: Only because this is very, very dark for the shadow. I would probably blur it to about a 10.

JASON: Okay.

LYNNE: So it's not too harsh. Then you can even change out the color of the shadow, too. I mean, you can keep it the black. That works. But I still keep it with going with the colors, so a darker blue.

JASON: Right.

LYNNE: Or if you're using green, then a darker green just so that then that shadow is kind of blending in with  or going well with the button color.

JASON: Yeah. And so if we have this up here 

LYNNE: You can change opacity.

JASON: You can do it a lot of ways. You can do it with alpha or we can pull it up into this kind of, like, gray register here. Just so everybody's looking, look at the naturalness of this shadow. So, when it's black, that doesn't look very natural. When we pull it toward this gray, it looks a little bit more natural but still priority extreme. Then when we start to pull it up into these, like, gray tones, like that kind of  I kind of believe that's popping out of the screen a little bit.

LYNNE: Mmhmm. So, that works.

JASON: Okay. So, we've got a button.

LYNNE: So, now it looks like a button.

JASON: It looks like a button. Should we play with the, like, weights or anything of this? Do you mess with light text, heavy text, things like that, to do any of that?

LYNNE: I do, depending on the size of it. So, if we were to make the text smaller, and say that we wanted to keep that size 20 on that text, then I could bold it and I can make the tracking of it wider so then it fills up a little bit more of the space. So we could bump that up. So, now we got, you know, that subtle change in it, I'm keeping the sizing consistent with the sizing of  the sizing of the buttons, texts, consistent with the sizes of the dropdown text. We can do that just by changing the weight of it and tracking of it, it makes that much of a difference.

JASON: Yeah. This is  and, like, I don't know about y'all, chat, but that little difference of, like, adjusting the tracking of the text where I  so, I just went over here and made it go wider. So, you can make this really absurd, right? But if you just do it subtly, it looks really nice.

LYNNE: Mmhmm.

JASON: And that extra weight. And so now, this really  this really looks like a button. Which is pretty dang cool. I'm going to group these real quick, because I just noticed we've got a different spacing here. So, let me group my buttons. This is  let's call this the button. And we've got our photo down here. Then we've got our filter, right? And then we can take our filter, our button, and our photo and we can run this, like, distribute vertical spacing.

LYNNE: Mmhmm.

JASON: Bada! Then if I want that to be 30, it's magic. Look how clean that is.

LYNNE: It does it for you. It the perfect. Then if we want to see how the button will look as, like, a pill button, you can do that as well. That's as easy as clicking on the background and changing that out. That's what I like about Figma, too, is that we can play around with things. And that it's easy to, like, see it  see how it's gonna look versus a different way.

JASON: Yeah. This is  this is fantastic. So, what do you prefer? Do you prefer the pill or the  or the rounded?

LYNNE: Both look really good, but I actually do prefer the rectangle.

JASON: Okay. Let's go back.

LYNNE: Only because the other two are going with rectangles. We can even change out the photo to be a circle, just like the one that you have at the top, but I wouldn't do that only because the icon is already a circle. Then you're having a circle in a circle. So, I like keeping it like that just to show, like, different shapes.

JASON: Yeah.

LYNNE: You don't want too many of the, like, because it's it's own thing at the top, for it to take away from the one at the bottom.

JASON: I mean, like, what do you think, chat? We should ship this, right? I feel like we  I feel like we made ourselves an app. I'm gonna  one thing that I forgot to do is I made this solid black when we started. So, I can just make it the 

LYNNE: Oh, yeah, we can do that.

JASON:** This** color. And I believe that's all the things. Oh, wait, that also needs to be our fill color. Oh, goodness. Just with, like, it's so subtle and it makes such a big difference and I feel like we now have a , like, a really good-looking app over here. Let me just clear this stuff out of the way a little bit and then let's just simplify. Let's only look at the UI. Here's what we just built  what we just designed, right? And we started with nothing. We blocked this thing out. We, you know, so, let me just kind of recap, actually, what you did. Because I think it was so  it was so systematic and so effective. We started with our mobile design first. We blocked things out by thinking about what the necessary elements were on the page. We looked at how those blockedout elements relate to each other hierarchically. And then we picked our starting point for the design, which was this picture of this Shiba up here. And used that to pull out colors. And then we just did this grouping of, you know, making these things all use the same sets of colors, use the same border radius, the shadow on the button to make it look like something that you can click on, and that's really it, right? Like there's no magic that happened today, but look how nice this looks. I'm super impressed. So, Lynne, what, like, is there anything else that you would do in your normal process that we didn't have time for today that you wanted to shout out?

LYNNE: Research. But I guess we're doing it here when we're asking for everyone's feedback. (Laughter) That's something that's important to design, is asking others what they think of it, getting everyone's opinion. Only because it just  it just helps, you know, having a fresh pair of eyes after, like, looking at it for a while. Everything starts to blend together. But I think that's something that's important to know. Getting feedback is really good for, you know, new designs and coming up with new things or things that you didn't think of. So, play around with it. Playing around with design, especially if you're new to it, I mean, I still play around with design, like, all the time. Just so I can see how things, you know, will look. Just like what we did with the button. You know, maybe the pill button would have looked better. Or maybe it was this. Then we can ask, hey, what do you guys think? Is the pill button  like what's the consensus of it? So, just feedback and just, you know, see what looks good together. The colors really help. I think that's a very big thing in UI, is if you can get the colors to work cohesively. Then I think you got  you're on to, like, a really good start, like this app.

JASON: Absolutely, yeah. So, this, I think, is really nice. This actually might be a good question for you, Lynne. How do you not feel freak out when you're learning coding?

LYNNE: How do I  I always freak out. (Laughter)

JASON: You freak out and you do it anyways.

LYNNE: Yeah, you just power through. No. Well, I  it's  I think that understanding the coding part of it, like, as UX and, like, UI, it's just breaking it down. Understanding how to break down  like how we broke down the button itself. Work on that.

JASON: Mmhmm.

LYNNE: And then break down the dropdown. Work on that. It's just  it looks a lot to learn when it's all there at once, but when you start to take apart the components and focus, it was  it was easier for me anyway to break them down and to understand, okay, my header's first. So, then that's what I'm gonna work on. I know that my icon's gonna go to the lefthand side. So, let's start with the icon. And then the title. And then you work your way down the hierarchy. I think that was the best way to organize when learning to translate it into code.

JASON: Yeah. And I think, you know, what you're bringing up is  it's such an important thing for learning in general, right? If you  if you try to learn everything at once, it's always gonna feel really big. It's big. It's overwhelming. There's too many things. And so if instead you focused down to just one thing, like, I'm not gonna learn how to code. I'm gonna learn how to put a button on a screen. And that can be  that's a tractable exercise, you know? Because code is endless. I've been coding for 20 years now and I still feel like I don't know what I'm doing. But I know how to put a button on a screen, right? I know that one really well. And so breaking it down to each individual step and learning those steps in isolation and then, you know, you'll  as you learn, you start to connect dots and you realize that, oh, yeah, buttons are actually really similar to a lot of other elements that you put on the screen. So you don't have to learn from scratch every time, but if you get down to just, like, the task you're trying to do. This is why I'm so excited about, like, any time you learn by chasing your curiosity. It's like I want to accomplish a thing. Okay, great. You have a roadmap, right? It's not like, oh, well, I want to learn to code. What are you going to code? I don't know. What should I code. Instead, it's a conversation. Like I want to build this thing. Okay, great. What's the first step? That's what you should learn first. It tends to make things a little more  definitely a little more palatable, digestible, I guess.

LYNNE: Yeah, in small doses. Take everything in small doses.

JASON: Yeah. With that, I think we've reached an excellent stopping point. I mean, I am  we didn't have time to build this app, which was very much by design. We wanted to spend the whole thing on making it look nice, but I definitely want to build this app. So, I am very excited to take this thing all the way through to the finish line. But for folx who want to do more, are there  is there anywhere that you would recommend somebody goes if it they're excited about what they learned today and they want to go next steps?

LYNNE: I did a lot of reading. When I was learning and when I was starting out. A lot of, like, medium articles and, you know, a lot of just researching tips and tricks. There wasn't really a specific one that I got stuck on. It was just because I feel like design is very opinionated and everyone learns differently and, you know, grasps things differently. It was really good just to go down the rabbit hole and keep on reading and then trying it out. Like designing it and then reading again.

JASON: Mmhmm.

LYNNE: And just keep on going. So, I don't have anything specific. I mean, I could send you my Google search.

JASON: I have some specifics. Y'all should go and follow Lynne on Instagram. Because there are tips in here. We can see them happening right now. So, there are definitely some tips there that you can follow. You can go to Lynne's website at Lynne.codes. And there are  look, case studies. All sorts of good things here. And then you can also follow her on Twitter. So, get over there. Get those resources. And while you're clicking on things on the internet, make sure you check out the upcoming schedule because we got so much good stuff coming up. Later this week, we're gonna talk to Marie Poulin about Notion and managing team workflows. That's going to be amazing. I'm not even going to go into the relevant of it. I just want you to go and read this. Look at this list. And that's not even the whole list. We're still adding things all the time. If there's somebody you want to see on the show, make sure you let me know. Make sure you let them though you want to see them on Learn With Jason. Tweet at them or something. Make sure you click this add on Google calendar button. With that, let's do another shoutout to our captioning. We've had Jordan with us all day from White Coat Captioning. Thank you so much, Jordan. That's made possible through the support of our sponsors, Netlify, Fauna, Hasura, Auth0, all kicking in to make the show more accessible. Lynne, any parting words for the chat before we go and visit somebody else.

LYNNE: This has been really fun. I enjoyed this. Thank you for having me on this.

JASON:** I ha**d such a blast. I love doing design stuff. It was so much fun to design something with you. We got to look at Shiba Inu's all day. With that, chat, we are going to go find somebody to raid. You know, just sit tight, get ready. It's gonna happen. Lynne, thank you so much. Everybody, we will see you next time.

LYNNE: Thank you.