Designing a dashboard with AI

0:00Today I'm going to be designing an application UI using Claude code. Now in my last video, I put together a marketing page for this [music] finance dashboard that I made and a bunch of people wanted to know how I go about designing something like this. So I thought it would be cool to make another dashboard like this one and then I can

0:16record the entire process. Now I'm not going to do the same design because that would be boring. I do want to give it like a new flavor, but I will give it the same elements and structure. So what I did is I took a screenshot of this design and then I asked ChatGPT to come up with a new design that shares the same structure without providing any stylistic ideas. And it gave me a prompt for an API backend observability

0:40dashboard. [music] Now since my last video, I did make a major upgrade by subscribing to Whisper flow, who is not a sponsor, but if they want they can sponsor future videos. But it was just the one voice-to-text app that was recommended to me the most. Now I already do have a new project created here. Uh I'm just going to go ahead and run Claude

1:01and I'm going to copy this prompt here. So what it says is design a web application dashboard for monitoring backend APIs and system performance. And then it goes ahead and describes sort of the layout and structure. To be honest, I didn't really look over these these details here. I'm just going to wing it here and see what it comes up with. And once again, there's no there's no skill file in this. I'm just kind of going from a blank state here. There's

1:31no UI.sh. Maybe I'll do something like that in a future video, but for now I just want to start from scratch. So we're from like a dark mode looking site. So that's cool. I'll I'll run with that. I'll I'll keep this kind of dark theme going on. Um one thing I think it did a good job of is like the depth [music] cues. So um one thing I like to do on dark mode sites is uh stuff that is sort of intended to feel closer to me is uh I make it I like to make it a lighter gray [music] and stuff that's further back I like to

2:07make it darker gray. So it's sort of done that here with these these [music] cards, these panels and the background here to separate them. Um [music] now I'm not a crazy into these card based layouts. [music] I think they kind of feel a little bit dated. So I might do away with those either way, but I still appreciate that [music] it respected that. Um now another thing I don't really like is once again, it's doing its typical AI thing using [music] indigo as the default color. So I might pivot away from that just cuz I'm sick of seeing it. Yeah, I might restructure this a little bit. Like I think there's

2:46almost room to put [music] these two panels side by side. Um Yeah, okay. Is this all functional? No, so if I put this nothing really changes. [music] Okay. Can you update this to be everything to be functional? So when you click on the timestamps at the top, it changes all the content with like new fake data. Clicking the toggles in the

3:17traffic overview will update the chart. Uh yeah, just put new fake data in.

3:28So this looks like it's changing as I play around with this. Yep. Okay, before I get too carried away here, um I do want to preserve this this version of the design. So can you preserve this version of the design? I'm going to make a bunch of design changes, uh but I want to be able to compare my new design when I'm done making changes [music] to this current one. So can you place this design in a on a new [music] page? Just call it {slash} old and uh any changes I make forward don't let it don't let those changes affect this

4:08design. Okay, so it looks like it moved it to a new local host. I don't know why. Um [music] that's fine. That doesn't really affect me at all. Now that I've done that, I also just want to check. Let's see what the responsive design looks like. Okay, so it gets pretty pretty squishy and there's just no responsive considerations at all for the navigation. It's just not [music] really responsive. Okay, so that is another thing I want to I want to

4:43address in this in this video. Okay. Um [music] let's see. I think the first thing I'm going to do is I'm going to make some global changes to this design. Uh one of those being is just so the gray is being used on the site right now. It's sort of using like the Tailwind default gray, which is a little bit saturated with some blues. Um I like just using very neutral grays nowadays. Um so I'm going

5:10to go ahead and update that. Can you update all the grays to be using like a neutral Tailwind neutral grays instead of the sort of default cool grays?

5:25Okay, so the next thing I'm going to do is update [music] the icon set. I can already see that the the these alert icons, they're getting kind of squished. They're looking pretty mushy. [music] So and then I'm going to use Heroicons by yours truly. So can you update the icon set to use Heroicons, the micro

5:44version of the set? Um make sure you're using [music] them in like the 16 by 16 pixel view box. I specify the 16 by 16 pixel view box. I really like when the icons [music] are at their intended size that I drew them at. Um I don't like when they are they're scaled up [music] or resized in any way.

6:11Okay. That's looking pretty good. Um Okay, the next thing I want to change here is um what what font's being used here? [music] I guess it's just like the system font. Yeah, it's just using a system font here. [music] Um and then it's got a mono font being used as well. What font is it using there? Just sort of the system default,

6:38I guess. Okay. Um I mean that's fine. I'm going to update that [music] just do something for no particular reason, just to make it more interesting. Um can you update the sans font to use Mona [music] and update the monospace font to use Geist mono. And let's do that. Just just for a new flavor. Mona is the the GitHub font. I

7:07really like using it on marketing pages. It's got like a really It's got a wide variant in its set, [music] which I like using. Um and so I typically use it on marketing pages, but I think it also works [music] great on application UIs. It's super clean looking. So there is updated. [music] Yeah. Okay. Now like I said earlier, I want to keep it pretty flat [music] looking. Um I want to do away with all these panels and cards. I think like I said, I think

7:41they're just looking a little bit dated. Uh I just want everything kind of just looking clean and minimal and kind of just sitting on the background. Um but I still want to divide these these elements. So uh I think what I'm going to do is get rid of the cards, but use like just a really subtle border to divide everything. Um so get rid of all of the cards containing all the content in the main content section. Um instead replace it with dividers between all of these elements. So just um use like a white 10% [music] border to

8:23divide everything. [snorts] Oh, it it misunderstood me. So use a white 10 pixel border to divide everything. Let's see how that goes. Yeah, it's using a white. [music] Oops, I meant a a one pixel white border with 10% opacity, [music] not 10 pixels. Now the reason I like using opacity on borders is because I This is something I find more helpful on like marketing pages. Like so on like marketing pages, when I if I have like a sort of a decorative background element [music] um sitting kind of behind everything, if I have a divider on the site, I want to make sure that background element sort

9:13of bleeds through those dividers. It doesn't look so it doesn't look really muddy. If you're using a solid color, you're going to get some clashing with the the solid color in the background visual. [music] So I've kind of just created this habit of using low opacity borders [music] for everything. And I've just kind of carried that habit over into application

9:33UI design as well. Uh so it corrected that. Um Now it didn't provide a lot [music] of space between these stats. So um I'm going to correct that and then I'm going to and then I'm going to move on. I'm just going to work from the top down after I correct that. I want to get all these sort of global ideas in and then I want to kind of work in a more

10:03structured order. Can you add spacing between the dividers on the top stats? Just add inner padding to all those elements and make sure those those in between borders touch the top and bottom borders of that section. [music] So what I want is each of these sort of [music] cells to sort of have their own

10:26internal padding. And then I want Yeah, I want these borders to be kind of glued together with these top and bottom borders. Okay, it didn't quite do I asked. You know what? I'll get to that in a bit. I'm going to work my way down here. So starting at the top, um this top bar here. [music] Um you know what? I also want this top

10:49bar sort of sitting on the background. Same with the sidebar. Um Can you also make the top bar and sidebar, can you sort of make those sit on the background as well? I don't want them to be a different color than the rest of the site. Okay, I also want to I think it'd be cool if this this search was sitting like right on the background. I think that would look really clean instead of kind of contained in an input. It'll still be an input, but it'll just sort of be hidden and it'll look like it's just sitting right on it'd be kind of

11:24part of that top bar. So can you [music] get Can you kind of hide the search input container? I just want the icon and placeholder text. I want it sitting like a I want it appear to be sitting [music] right on the background of that top bar and not contained. [snorts] Okay. And I just want to make sure it lines up with all the other content. [music] Can you get rid of some of the padding that is surrounding the magnifying glass icon? I want to make it look like that magnifying glass is aligned with left aligned with the rest of the content

12:02below it. [music] Cool. That looks pretty good [music] just eyeballing it. Um next thing I'm going to do is I'm going to I think I can just make this like just [music] the avatar. Like I think that's pretty conventional nowadays where it's like you don't need to have this whole name here. You can just have the avatar and it's a drop down to some of your personal settings and stuff. So um [music] Update the user information at the top right corner. Just get rid of the name and the chevron and just make [music] it the avatar. And uh make it a square icon with Make it a square avatar with like

12:48rounded corners instead of a circle. [snorts] Why am I making it a square instead of a circle? I don't know. I'm just kind of into that look lately. Okay. It's pretty big. What size is [music] that? 32 by 32. That could be a bit smaller. Make the avatar a bit smaller. Make it like 28 [music]

13:13by 28. Mhm. And let's put uh I'm going to put a real image in there. Just I know it's all fake, but whatever [music] just to make it look a little bit more just to clean up this design a little bit. So I'm going to go to go to a good old chat GPT and uh [music] generate

13:34uh an image to use as a profile pic.

13:42Cool. I think I want it more focused [music] on the center. Can you focus on the head a bit more, not show so much of the body and leave a little bit space between the the head and the [music] top of the image. Cool. Look at this handsome dude. Sure. Update the avatar and to use instead of

14:05using an initial use this image. [snorts] Okay, seems [music] fine. Uh last thing I'm going to do is just make that dividing border between the I think that dividing border's fine [music] between the the user between the user and the alerts icon. I'm just going to make it the same sort of contrast as the rest of the dividers in the page. [music] Um Update the divider between the alerts icon and the avatar to be the same contrast of as the rest of the borders

14:41on the page. Okay. Uh next section. This top section here. What do we got? We got this toggle. Okay, I'm going to do away with this page title. It's it's just it's next to the nav. It feels repetitive here. [music] Get Get rid of the page title. Okay. And this toggle That seems fine. Um You know, I was really happy with the the pattern I came up with on this design. I don't know if it's an original design. Like maybe I but I don't

15:31remember copying anything when I did it. I I think I thought it up all by myself, but the idea here is um like this is obviously a toggle with some fixed dates. But if you want to have some custom dates, you can click this [music] the range right here and that brings up a calendar picker and you can select a range from there and apply that and that will change the dates. But uh and then [music] that sort of this custom selection will now be the selected state. But if you want to go back to some those some of those other fixed options, you can click on those and then

16:08this date will update to align with that information. So I thought that was a cool idea. Again, [music] I don't I never directly ripped it off anything, but maybe it's it's probably been done before, [music] but it's just one of those things like now I feel I feel like now that I'm working with AI, I'm spending less time fidgeting with the design and spending more time thinking about the product design. I'm not using all this brain power on on fidgeting with with uh like auto layout and whatnot. Um I find it's giving me much more flexibility

16:43there. So I want to bring this idea over into this design. So I'm going to try [snorts] and describe that. So [music] I want to introduce a custom date picker along with those fixed times that you can toggle in the top left corner. Uh I want to be a date picker with like two calendars so I can pick from a range

17:12or just pick an individual date. Let's start there and see what it does. And then we'll massage it from there.

17:43Okay, so that's a starting point I can work with. I just I think it still needs some massaging here. So [music] um instead of showing the word custom, I want you to show the actual dates that are selected. If one of the fixed dates, so like the 1-hour, 6-hour, 24-hour, 7-day, 30-day is selected, it'll show the date for [music] that period. But if it's a custom date, I want you to show those [music] dates that are selected and that will be the active state if it's like the custom

18:16selection. I find that when Now that I'm using WhisperFlow, um [music] everything I'm saying is much more incoherent. Um I'm I'm not putting like as much thought [music] into what I'm trying to say to it and they're much larger phrases instead of me sort of thinking up what to how to condense it. And it's

18:37it still gives me the results I want. Okay, let's see now. Okay, yeah. Now that's the selected state and if I select this, this is [music] updating to align with that. That's exactly what I want. Um now again, I I really liked how the the design of this how it's all kind of sharing the same container. It It feels like the same. They're all cuz they're all kind of working together. So I feel like they should be all kind of contained together. They're all working to do the same job. So um Can you contain the date picker [music] in the same container as those fixed dates? So let them share the same

19:25container, but just add a small divider between the fixed dates [music] and the custom date picker.

19:39Okay. Yep. And do away with that calendar icon. Now I'm sure the code for this is horrendous. I wouldn't even I wouldn't even be able to tell you if it's good or not. But I'm just So I'm just going to focus on the the cosmetic design for this video. Um Now, I'm I'm going to rework sort of the the look of this [music]

20:11toggle. And uh [music] even the button styles over here to sort of match the look I come up with. So, [sighs] again, I want to do away with this [music] indigo. Um Maybe I'll go for more of like a pill shape. [music] What size of font is it using here? Text 12 and 1/2 pixels. That's a weird

20:38number. Uh I don't like [music] it. Okay. In the toggle, update the font size to be text [music] XS. Um make the container for the toggle make it a pill shape instead of like rounded corners. [music] Uh make it a bit smaller. Make it like 28 pixels high in total. And make the sort of the active state make that like white with

21:1710% opacity. Uh [sighs] that's cool. All right. What's the um I'm using font medium here. And just use a font regular weight, not medium. [music] Cool. Um And then I'm going to update this button [music] drop down to sort of match this stylistically. Update the drop down and the [music] sort of live status indicator

22:09to share the same styles as that toggle. So, make it like pill shaped buttons [music] and uh text XS text regular. Uh yeah. Let's [music] see what that does. I don't even know what I just said. I'm just spewing out words now. Yeah. Looks like it captured [music] the vibe I wanted there. I mean, is there any reason to like consolidate [music] these two like this sort of light indicator? Can I just include that [music] in this

22:50button style? I don't see why not. I want to consolidate the live status indicator and the production [music] staging development drop down. I just want to include that green status indicator in that drop down and get rid of that live badge altogether. Cool. And I think I can tighten this up a little bit.

23:24What's the How's this built? Oh, these are all kind of grouped together here. I mean, that makes [music] sense. I want to reduce the spacing around the toggle and the production drop down. I want the padding above to be like 12 [music] pixels, same as the bottom like like the that separates those and the stats

23:51below. Okay. Did I reduce some of the padding there or was it always like that? [music] They probably just did that. Okay. Uh next thing I'm going to do is just rework these stats a little bit. [music] I'm going to get rid of these icons. I feel like they're not really doing anything. Uh let's start there. [music] Get rid of the icons in the stats

24:28section. Mhm. And instead of using these like trending icons I I just want to use like the typography and just use like a plus minus symbols that are part of the font. Um I think that'll look a little bit cleaner. Instead of using icons on the the trending stats at that are supporting the main stat, can you [music] just use text like plus and minus text to be part

25:04[music] of the actual value? Yeah, I like that better. A little bit I think that looks cleaner. [music] [snorts] Okay. And I'm not crazy about this uppercase [music] the text. I like using lowercase. I just find uppercase text kind of tricky [music] to read. I think sometimes it works when you're using a a monospace font for like um for like an eyebrow on like a marketing site site, but that's like more of like

25:38a stylistic thing. [music] And if you're going to do that, you want to use like really wide tracking. But in this case, I just find this information it's a little bit harder to read, so get rid of the uppercase text [music] on the label in the stats section. Just make it lowercase. Fine.

26:00[music] Okay. And um I'm also not really digging the the bold font on the stat itself. Um it just [music] looks so clunky. Um I really like I find like the little bit like regular weight, it looks super clean. Um [music] update the value uh instead of using bold, use just a regular weight font [music] on the main

26:33stat. Yeah, I dig that. And [clears throat] uh I think I mentioned this earlier. I want these these vertical borders. I want them sort of touching the top and [music] bottom lines. How's this built? [music] Okay, so it has like it's sort of like this. It has padding around the entire group instead of giving each stat its

27:02own [music] top and bottom padding. Okay. Um I want the the vertical borders between these stats in the top to be touching the [music] top and bottom lines in the section. So, instead of giving the entire group [music] its padding, I want each individual value to have its own padding in that container. Okay. And I also want this first item, I want it to align with the content on the rest of the page. So, So, I want to get rid of that

27:38left padding here. I want the the first [music] stat item, I want it to be aligned with the content on the rest of the page. Right now, it's indented a bit because of the sort of the container padding.

28:00Okay. That's looking better. Um Okay, I'm going to move down to this traffic [music] overview chart. What can I do here? Um [music] First, I'm going to correct the spacing issue. And then update the style of this toggle to match the style of this toggle up here cuz right now it's inconsistent. Um Add a little bit of space above the [music] traffic overview chart like separating the the stats and the title of that that chart title section. [music] And

28:46let's just say that for now. Baby steps here, one thing at a time. I was going to throw in changing the [music] toggle update, which I could have done, but let's just do one thing at a time here. Okay. Also, update the request errors latency toggle to match the styling of the time toggle in the top left. [music]

29:16Cool. Oh, yeah. Okay, so we got indigo, red yellow Is this using like is this actually using red? Text red 400. [music] So, one thing I like to do and this is probably using like emerald. [music] Yeah, emerald. One thing I like to do to give it like a little bit of a twist [music] is instead of using like red for high severity and um [music] like green or emerald for for like sort of a positive indicator, I like maybe do a little twist in the color. So, I might lean into like more of like a pink or a rose for the the high severity colors and maybe I might

30:14use something like lime for the greens and this yellow, it's probably using amber. Yeah, and that's fine. I might make it a bit lighter than it currently is, but you know, everyone just kind of defaults to using like red, green, or yellow, but you can use different flavors of those colors just to sort of [music]

30:35make it a little bit more interesting. So, I'm going to do that. So, update all the reds [music] to use rose. Uh rose. Um and I'll say I'll let's try lime for the greens and update all of the greens or emerald to use lime. And make [music] all of the uses of amber to be a bit lighter.

31:08Cuz it's looking pretty pretty warm. Okay. [music] You know what? I'm I'm going to go back on that. I'm not crazy about the lime here. It's sort of it's kind of too similar to the yellow. Undo the lime change. Go back to emerald.

31:34That's fine. [music] Um Also, requests, I feel like it'd be makes more sense to make this chart green. Instead of using indigo on the requests chart line, make it emerald. Okay. That seems fine. Okay. Uh what does this dot represent? I feel like it's more confusing than it is helpful. [music] Like if I change the

32:15very unclear. Uh get rid of the dots in the chart. I find them confusing and not really helpful. Okay. I'm going to make this line a bit thinner, too. I think that would look a little bit cleaner. Everything's very refined on this design. It's coming This design that's shaping up is feeling really refined and I want to do the same for this [music] chart. I feel like it'll look a little bit more I don't know, just more defined. I don't

32:48know how to describe it. Uh can you make the the line on the chart can you make that one pixel thick?

33:04Mhm. Uh And these background borders, these dotted lines, I find them kind of distracting. I just want to use solid lines um and again, just have the same contrast as the rest of the lines on the page. The background lines on the chart, can you make them the same style as the rest of the dividers on the page? So, like white with 10% opacity [music]

33:37solid lines.

33:43Yep. [snorts] Okay. [music] And I think it'd be cool if these [music] values lined up with the lines a bit better. Like [music] I want the I think this value is kind of corresponding with this line and and so on. [music] I like when these values kind of sit below the line. Same here and it maybe the zero can kind of just be shared on both the [music] the amount of traffic and the date. So, it'd be like day zero [music] and zero users. It'll just kind of be a shared value right here [music] in the bottom

34:26left corner. Uh Can you align the values [music] on the left side of the chart so that each value is just sort of resting slightly underneath [music] the line that it corresponds to you on the chart? Let's just say that for now. [snorts] That's [music] better. Can you also right align those values with the chart so they're just kind of hug snug to the right side or sorry, the

35:08left side of the chart?

35:13[snorts] Cool. And like I said, I want that And like I said, I want this zero to represent both parts of the chart. So, the the horizontal axis and the vertical axis. So, [music] it'd be cool if this zero was sort of on the same baseline as these days. Get rid of day one. I want the zero to be sort of the first the starting point on the [music]

35:48horizontal axis. Okay. Okay, so we created a new zero. Um and [music] then I don't want to have two zeros in the corner. So, get rid of the zero on the horizontal axis [music] and make sure that the zero that's part of the traffic on the left [music] side, make sure it sort of baseline aligns

36:22with the values on the horizontal axis. Okay. Okay, so is that aligned there? Yeah, [music] that looks pretty good. Um next thing, should I add some vertical lines? Sure. [music] Why not? Uh can you also add some vertical lines that align with the values at the bottom? [music] Oh, yeah. That looks pretty good.

37:06Okay. There's a legend down here. Okay. You know what? Instead of having that sort of legend [music] in the bottom left corner of the chart just include a little make it part of the the toggle in the top right. So, [music] put like a little colored square next to the the label in the toggle.

37:44Okay, those dots are pretty clunky. Um Can you instead of like those dots, can you make it like a little square, like a 4x4 pixel square? Yeah, that's looking [music] clean. Now, I'm seeing a little bit of extra [music] space around this toggle. Do it on the side. Okay. And does it do it up here, too? [music] Okay, I didn't catch that earlier. So,

38:12yes, it is. Um There's a little bit of extra left [music] and right paddings on the toggles when I have it's it becomes clearer when I click on one of the items on the left or the right. There's [music] I want to make sure that the container hugs the pill shape nicely of the

38:37selected state. Cool. That's looking clean. [music] Yeah. These values are inconsistent the way they line up. On the chart, the the items on the horizontal axis they kind of they line up [music] with the the values line up with the lines kind of inconsistently. I'd like them to all appear just to the left of the line above them. [music] And I want the the very first value, whether it's zero or a specific day, I want that just gone. I want the zero on the horizontal axis to sort of represent that [music]

39:31part.

39:38Okay. Okay. [music] Next, I feel like there's enough room, especially on like on larger screens like this, I could [music] put these and this endpoints table in this recent events list [music] on the same sort of in the same space here. Um [music] and then maybe I can sort of stack this information a little bit better. And [music] this can be a little just a little bit more condensed. So, I think I'll give the table a little bit more real estate and then this recent events will take up maybe like 1/3 [music] of the space

40:20here. So, can [music] you put endpoints and recent events, can you put both of those lists [music] in the same row? I give endpoints the endpoints table like 2/3 of the space and [music] give recent events the the remaining 1/3 of that real estate. Okay. And instead of making the recent events a table, um sort of stack some of those elements. [music] So, uh put the timestamp and the status [music] in one line and then put the description

41:10on a second row. Mhm. And we what size of font are we using here? Is it using like 12 and 1/2? Yeah. Mhm, what's it using here? Same thing? 13. What a weird bunch of fonts. Okay. Um update all the font sizes in these sections to use text access. [music] None of this 12 and 1/2, 13 pixel font

41:44stuff that you're doing.

41:52Can you also add a divider between these two sections that goes that connects to the border above these two sections? [music] Cool. And it didn't quite understand my request. So, um once again, I just want to make sure that this divider, like it is up here, it's hugging the top and bottom borders. So, it's it's sort of just kind of

42:15connecting everything. Um can you make sure that the divider connects to the top? So, give each of those sections their own padding instead of like kind of grouping them together. So, the [music] divider can comfortably touch the top without that extra padding above it. [music] Once again, I'm just spewing words that are incoherent, but it's it's like I'm it's like working with a developer, but

42:44it's it's not getting annoyed with me. [music] Okay. And uh Okay. [music] Are these clickable? Well, I mean, I guess I see where where they could be clickable. Uh but right now they're not. I would I'd like it so like I I feel like the I want these to sort [music] of hug the container, but I feel like the the hover state is

43:11conflicting with that. Um I'm going to get rid of the hover state for now and then on the table, the endpoints table, can you make sure that the get rid of the outer padding, so the the two end columns are kind of going right to the edge of the table and get rid of the hover state.

43:40Okay. And I'm going to keep reworking this table a little bit and then come back to this recent events list. So, um [music] again, using uppercase fonts here, just I I want to do away with that just like I did up here. [music] Uh get rid of the uppercase text on the titles of the table. Just use lowercase. [music]

44:14And what else will I do here? It's [music] Admittedly, Mona and the heavier weights don't look [music] that great on on dark mode. They look kind of muddy. It's actually like medium weight is not as easy to read as like a regular weight font. Um use regular weight for the titles on the table. Same for the [music] the labels in the stats section. Use a regular weight instead of medium or

44:53semi-bold like you're currently using. Where else [music] is it doing it? It's doing it, I think these maybe I'll stylize these in badges. Yeah, we got a lot of badge styles here, like Okay. Um I find I think you typically use like a monospace font in these situations, like in these get, [music] post. So, um uh update the text in the method [music]

45:27column to use a monospace font. Um Is Is is the monospace like is it looking This is font bold, font mono. Font regular, too. Get rid of the the bold font. And what size of font is that?

46:03[music] Yeah, I feel like like especially when using a mono like mono fonts are like inherently bigger than sort of regular fonts. [music] So, if you're using the same size font, it actually just looks a little bit bigger. So, I always go at like a a size smaller on mono font. So, right now it's using 12, I might use 11 there. So, [music] um update all of the mono fonts on the table to use

46:34text. [music] Make it like 11 pixels. Yeah, that's looking a little bit tighter now. That's looking good. Okay. These badges, [music] they are they're looking pretty heavy. I think we can do away with the borders on the badges and just use like the subtle background color. Uh get rid of the borders on the on the badges in the method Well, no, on

47:03all the badges. So, I want the borders gone on the recent events [music] badges as well. Uh that's looking pretty clean. I think this is actually too small. So, make I want I think I these need to be like small. I find that like I usually want like the text in badges to be smaller than the the rest [music] of the site cuz like the badge itself is already taking up a lot more surface area. So, I want the text inside of it to be a little bit smaller. [snorts] So, it's not grabbing [music] too much

47:41attention. So, make the font size on the endpoint column, make that text [music] access.

47:57Yeah. [music] And [snorts] then I'm going to update the I'm going to put these in badges as well and get rid of the dot. Um put the items in the status column, put those in [music] the same style of badges as everywhere else. So, just like that subtle background with no border. [music] Get rid of the dot and make it font [snorts] normal. Get rid of like that semi-bold weight [music]

48:28or whatever it is. Yeah, and make that 11 pixel font as well. 11 pixel [music] font? Okay. That's looking cleaner. How can I clean this up a little bit? Again, I want to do away with this indigo. Um change the link style for view all logs to be white. [music] And I wonder if I can make these

49:11as well. Uh update the badges in the recent [music] events list to be the share the same styles as the status column in the endpoints table. [music] So, like lowercase font and [music] just like a regular weight and make sure the size is the same. They might be the same, [music] but got Got make sure. Oh, that actually looks like it's

49:38[music] pretty clunky. Info war. What if they What if we just What if I just put them as like little status indicators instead of this text? Is that just Is that communicated just as effectively? I'm going to do it. Instead of putting that information in a badge, can you just make them little dot indicators similar to the style we did for the uh the toggle, the request errors and latency toggle in the chart? Just that

50:16those little square dots. Can you just use the colors that you're currently using and just put them to the left of the of the timestamp?

50:31That's cleaner looking and, you know, it's The idea is that when you click on view all logs or you click on this, you're going to get more information, but I can see sort of the the status at a glance if there's anything high severity here that needs to be checked up on. Um [music] And then maybe uh I'm going to contain this into sort of a a subtle badge just to give it a little bit more distinction. I feel like it

51:00kind of gets lost. Um Can you contain the like the user SVC and the upload SVC like those little indicators, can you put those in [music] badges? Just make them like un opinionated, like subtle, like white 5% opacity badges. Mhm. I feel like it's a half-baked thought. Let's see what it looks [music] like.

51:33Mhm. That's looking clean. Uh what am I going to do next here? This sidebar. I think [music] I'll update this. I think what you typically do here is like I what I see on a lot of sites is it's like not the name of the app, but it's like the sort of the company profile drop-down and you can select like a different like

51:57service that you may manage. So, I'm going to update that to be [music] more of a drop-down. Um So, um and I'm going to put like a real logo in there, too. Um I'm going to go I did this in my last video. I'm going to go to my Again, this is one of the few reasons I still open up Figma is to is to work on like with for like vector

52:23graphics like icons and logos and stuff. I still open up Figma to grab some ideas there. So, this is my file of fake logos that I use for projects like this. [music] And I'm just going to use this Relay logo. So, I'm just going to grab this mark here. And I'm going to copy

52:41this SVG. And um Update the logo in the top left corner um in the navbar. Make it more of like a drop-down picker to pick different [music] sort of projects that you might be managing. Um and update the logo with this. And I'm [music] going to paste that. Okay. And I'm going to say, "By the way, call the company Relay." [music]

53:19Oh, it's already done. Cool. Call the company Relay. Just to match the logo. That's cool. It's not functional. I mean, I don't care about that right now. Um What is it doing? Is this a solid color? Is this doing [music] Is it a solid color? Yeah, it's like neutral 800. Again, the same reason I like using borders. I do the same thing on like hover states. I like I prefer to use um colors with like reduced opacity rather than solid colors [music]

54:02for the reasons I mentioned earlier. So, um Can you update the [music] focus state in the navbar to use like white with [music] 10% opacity? Okay, and that's about the same. And I bet this hover state's [music] doing the same thing. Okay, and I want these all these icons that right now they're using the same [music] color as the

54:33text. I like to use a little bit of a softer color for icons. I talk about We talk about this in Refactoring UI. Um just because icons they tend to [music] sort of take up more surface [snorts] area. They're heavy They're heavier in weight. So, they stand out a lot more. Um and I want them to sort of have be a Uh so, I like to reduce the the contrast of them them a little bit so [music] they kind of feel more balanced with the

55:03text beside it. Uh make the icons in the sidebar gray 500. Uh just the inactive ones. Keep the active one white. Cool. [snorts] That makes them [music] like sit back a little bit. And anything else here? Just this bottom all systems operational indicator. Uh the only thing I'm going to change here is [music] just that dot. I'm going to give it the same sort of physical size of this dot

55:42up here. Uh [music] In the all systems operational indicator at the bottom, can you just make that dot like the same size as the dot in the production drop-down? Okay. And I'm just going to look at the responsive design again. Okay. So, ooh, really [music] They just made no effort on responsive design. Like um You know what? Can you take a stab at the responsive design? It looks like there was no effort put into that. Uh

56:20just make sure everything stacks nicely. Make sure that the sidebar stacks Oh, sorry. Make sure that the sidebar uh sort of collapses when it gets to a certain point where it doesn't fit anymore. Uh typically anything below 1024. Um Let's [music] Let's start there. Yeah, if there's like a sidebar side I I find that Yeah, anything below 1024, [music] it just it doesn't really fit that well. So, I usually collapse it and put it into sort of a

56:55a collapsible menu. Okay. See what it did there. Oh, yeah. [music] Add a little hamburger button. [music] That's looking pretty good. Pretty good. I think

57:25I'm not going to dwell on this. I'm not going to spend too much more time on this. Um [music] I have some guests coming over very shortly. So, I'm going to wrap this up. It's I think what I would have done differently, [music] you know, I could probably talk about that on the design I made already for mobile. So, Yeah, so like a good example is Yeah, so I made this more of a drop-down

57:57on this design. I probably would have done the same thing on [music] this. Right now, I kind of copied it as a toggle. So, I'd And then I'd be able to put this on the same [music] row as this. This looks broken right now, too, where the the the chevron is sort of separated from this button. [music] Um Additionally, I was really happy with the the collapsible menu I did on this one. I probably do something similar. I really like this pattern, but what I did is [music] I added this icon, but it it sort of just pushes the entire site over and it comes out from the side instead of

58:39[music] overlapping right now. Cuz right now it overlaps it and I can click outside of it to close it, which is kind of cool. But I think this pattern's a little much [music] more sleeker. Um anything else just at a glance here? I mean, it really shrunk down this table here. Or sorry, they really shrunk down this chart here. I probably would have massaged that a little bit. Like it looks like it scales [music]

59:07as you get smaller. Yeah, so what I would have done here is [music] I'd probably keep this to be I wouldn't let it scale. I I [music] maybe keep the same height and let it just get squished and maybe reduce some of the dates or the sort of the horizontal items on smaller screens.

59:28But otherwise, it did a pretty good job. [music] I'd say I'd maybe stack this a bit earlier. Um [music] and I probably massage these these stats at the top a little bit. So they stack a little bit earlier or rework the way these are laid out. But uh yeah, once again, I have some guests going over so I have to head we

59:52have to run. But before I go, I do I let's compare this to where we started. So here's where we started. And this is where we landed. So um I think it's much cleaner looking. It looks a little bit more modern. [music] Um nothing groundbreaking here just you know, just a little more little more 2026 friendly. It doesn't look like it was generated by AI. That's for certain. Where this one sort of has a lot of AI red flags on it with uh it's sort of really saturated grays and the containers and the indigo. Um so I think I've done a good job [music]

1:00:39sort of deviating from those. So yeah. Now if you found the content in this video helpful and you want to make your designs look more polished like this one, go ahead and check out ui.sh. [music] This is essentially a skill file that we're baking all this knowledge into to give you more polished looking UIs. And we're basically trying to correct all the mistakes [music] that we're seeing

1:01:05getting generated by these LLMs. Now we do have some folks using it right now and we're making improvements every day. So if you want to check it out, head over to ui.sh to request an invite. [music] And yeah. And we'll see you next time.