Steve Schoger | Refactoring UI | CSS Day 2019

Aug 15, 2023

Steve Schoger | Refactoring UI | CSS Day 2019

Sometimes when we look at a polished interface we can acknowledge that it looks good but it’s hard to articulate why it looks good. In this practical session, Steve will be explaining the why. He’ll be looking at a poorly designed UI and refactoring it while providing some of the strategies and techniques designers use to give an interface that polished look.

We’ll be looking at some of the more common problems faced by designers and developers—from simple forms to complex data—showing what a difference a few small cosmetic changes can do to bring design to the next level.

Slides: https://speakerdeck.com/steveschoger/…
About Steve: https://www.steveschoger.com
Follow Steve: https://twitter.com/steveschoger
Get his book, Refactoring UI: https://refactoringui.com
More videos: / @steveschoger

More about CSS Day: https://cssday.nl or https://twitter.com/cssdayconf
Receive conference announcements in your inbox: https://cssday.nl/subscribe

Content

0.34 -> (driving rock music)

5.93 -> Thank you.

6.763 -> (audience clapping)

11.133 -> - Okay everyone.

12.66 -> So yeah, I'm Steve Schoger.

14.251 -> I'm from Canada, as he said.

16.777 -> Any other Canadians in the audience?

18.394 -> (audience whooping)

19.227 -> Yeah there's one.

20.859 -> (audience laughing)

23.91 -> Yeah I'm from, I'm outside of Toronto.

25.89 -> Our local team just won the basketball tournament.

29.699 -> (audience applauding)

30.873 -> The championship, sorry.

33.91 -> And so, yeah, my entire Twitter feed

36.42 -> is all the Toronto Raptors and CSS Day.

41.326 -> Anyway so most people know me as the guy

43.34 -> who teaches design to developers.

45.52 -> So I like to show how you can use tactics instead of talent

49.693 -> to do a design.

51.09 -> Today I hope to do just that.

52.25 -> So in this talk I'm gonna be sharing a few tips

54.37 -> that will help you improve your own designs.

57.13 -> Now I found that the best way to teach this stuff

60.24 -> is by example,

61.073 -> so my approach today is not gonna be any different.

62.688 -> We're gonna be taking a look at an example that I created

66.01 -> that addresses some of the more common problems

68.47 -> that I've observed developers struggling with.

71.32 -> So it's gonna be filled with a ton of mistakes

72.68 -> I see being made.

75.36 -> And in that I'm gonna try my best to explain

77.8 -> what goes through my head

78.633 -> when I work on a project like this.

79.82 -> So let's start by taking a look at the example

83.82 -> we'll be refactoring today.

84.87 -> This is designed for like a fictional

87.21 -> flight booking application.

89.05 -> Now I just wanna emphasize that this is just

91.09 -> an arbitrary example that I made because I felt it covered

93.4 -> a lot of the concepts I wanted to share.

95.71 -> I realized that not everyone's working

97.1 -> on a flight booking application,

98.41 -> maybe you work at booking.com, I guess.

103.29 -> But I took a lot of ideas here from existing

107.46 -> booking application sort of get my own twist.

109.94 -> So this is our starting point.

111.97 -> So as you can see, it covers everything from form design,

115.03 -> table design, and data schemas.

118.82 -> It's more or less using a lot of bootstrap defaults,

120.95 -> which I see many developers relying on.

123.64 -> Now I don't want to like poo poo on bootstrap.

125.63 -> It's a great starting point

126.97 -> but there's a lot of quick wins here that we can apply

130.05 -> to make it more polished and just bring it

131.34 -> to that next level.

133.11 -> So like I said, there's a lot

135.21 -> of commonly used components here

138.45 -> that can use on a variety of applications.

140.04 -> So our goal today is just to touch on some cosmetic changes

144.08 -> so without affecting the overall structure.

147.11 -> So let's start by moving back to the top here,

149.25 -> and we'll just kind of work our way down

150.8 -> as I get through it.

153.36 -> So the most glaring problem here is,

156.72 -> it sort of starts that text on that background image.

159.27 -> So it's because it's on a photo, photos are pretty dynamic,

162.07 -> they have a lot of light areas and a lot of dark areas

164.91 -> and you need to give text consistent contrast.

168.57 -> So using a background image like this, it's really easy.

171.41 -> It's a really easy way to add impact to your Hero,

173.66 -> but without you run the risk of having poor contrast

177.38 -> with texts when it's overlaid on top,

178.96 -> especially on top of a busy area.

180.55 -> In this case, there's a source of background interference

183.37 -> with some of the labels on the left.

185.82 -> Now, the easy way to work around this is to find an image

190.01 -> that contains a lot of negative space

192.2 -> that provides you with like an area for text.

193.67 -> But sometimes that's easier said than done,

197.53 -> especially when you're like digging through

198.62 -> like a royalty free library for that perfect photo.

201.44 -> So the way to solve this problem is to limit the amount

205.15 -> of dynamic elements on the image.

207.33 -> So one way to do that is by simply adding

209.66 -> like a semi transparent overlay,

212 -> this will tone down the light areas,

213.19 -> giving them less contrast against the dark areas

215.06 -> and help the texting out

216.287 -> and of course, you can invert this treatment

218.09 -> and use like a white overlay with dark text.

221.71 -> Now you can do this in CSS, of course,

223.44 -> but for a little more control,

226.15 -> if you have access to graphical editing software

229.13 -> like Sketch or Figma, you can bring in the image there

231.93 -> and adjust the contrast and brightness for similar results.

235.41 -> But you can even take this a step further

236.91 -> and colorize the image with a single color.

239.9 -> This is just a great way to add impact to Hero

242.27 -> and parent with your existing brand colors.

244.81 -> So, again, this can be achieved in code

247.89 -> by using CSS blending modes,

249.35 -> but that does have limited browser support.

251.11 -> So again, I personally recommend bringing it

253.34 -> into some graphical editing software to create that effect.

256.82 -> So I'm gonna show you how to do that in Figma.

258.77 -> Figma, it's free until you start using projects

261.93 -> and so everyone should have access to this.

265.97 -> Now, when you import the image and click on it,

268.77 -> you'll be presented with a few options on the right sidebar.

272.33 -> Figma has this kind of progressive disclosure

274.82 -> where if you like, it kind of gives you the options

276.65 -> based on the stuff you're interacting with.

279.56 -> So the first thing you wanna do is desaturate the image.

282.3 -> So click on the thumbnail and you'll be presented

284.38 -> with a bunch of editing options.

286.77 -> From there, you can reduce the saturation to zero.

289.88 -> So it's a black and white image

290.777 -> and then you can adjust the contrast

292.587 -> and a few other things just to level things out of it.

296.24 -> Then you're gonna add a filter on top of that

298.34 -> by clicking the Plus icon

299.438 -> next to the Fill title on the sidebar,

302.82 -> and then from there, you can choose the color you want,

304.4 -> so I chose this blue.

306.01 -> And then in the color panel,

308.29 -> go up to that little drop icon up in the top right corner

311.84 -> and from there, you're gonna wanna change

314.61 -> the blending mode to multiply.

316.14 -> And what this does is it allows the image

318.81 -> to sort of show through,

320.63 -> and after this, you can even adjust the opacity

322.51 -> to like of the solid color

324.25 -> and just bring some of those more details out of it more.

328.36 -> Now, if you're working with a darker color,

329.97 -> like this blue I'm using here,

331.32 -> you'll definitely have enough contrast free text.

334.66 -> Now, Figma is free, like I said,

336.69 -> you should have access to it,

337.523 -> but another great tool I found,

338.69 -> someone told me about it on Twitter.

340.27 -> I wish I can give them credit but I was trying to dig it up,

342.56 -> I couldn't find who told me about this,

344.75 -> but it's this web tool called Duotone,

348.43 -> it's by ShapeFactory, it allows you to take two colors

350.679 -> and use them on the highlights and lowlights of an image.

354.44 -> So in the example here, using the bright sign

358.31 -> for the highlights and a purple for the lowlights.

359.94 -> So you can mix it up and choose two completely

362.67 -> different colors that sort as if you want like

364.87 -> Spotify those album covers have that that effect to it.

367.64 -> So check it out, play around with it, it's pretty cool.

371.84 -> And this web app actually allows you

373.29 -> to upload your own images

374.54 -> or search for images from Unsplash.

376.97 -> By the way, I thought everyone knew about Unsplash

379.75 -> but every time I mention it

380.583 -> I always get a few surprised faces.

382.11 -> So it's basically just a great resource,

384.56 -> if you're looking for high quality free Royalty free images,

388.26 -> basically, you can just search based on the subject

390.72 -> and you'll get a ton of great results.

393.95 -> Oh, yeah, like I said, it's just a great way to add impact

397.44 -> to Hero and pair the image

399.84 -> with your existing brand colors so.

401.37 -> And of course it gives you a nice consistent contrast

404.6 -> in the background, so our text is much more legible.

407.49 -> Now I chose this dark blue for the site,

409.5 -> but I do want to just glaze over that,

410.71 -> I thought it'd be helpful to share

412.18 -> how I choose primary colors for a site,

414.589 -> the answers to that is quite simple, I steal them,

418 -> I spent a lot of time looking on inspiration sites,

420.69 -> I go to landbook.com, land-book.com.

425.28 -> Another one is siteinspired.com,

426.91 -> these are all just web galleries,

428.86 -> we're all familiar with them.

431.221 -> They're usually created by designers,

433.46 -> so there's a few just to name a few.

435.91 -> And while browsing if I see a combination of colors

438.37 -> or I mean book market or just sample

440.21 -> the colors for reference later.

442.82 -> Another great place we're all probably

444.15 -> familiar with is Dribbble.

445.657 -> Now, if you have a general idea of what colors

447.69 -> you wanna use already, Dribbble has this color picker tool,

451.633 -> so you can access it, so if you gonna look

453.21 -> that three dotted menu thing up at the top

457.1 -> and open that up, it has this color link at the bottom

460.696 -> and there you can search for shots based

462.11 -> on a specific color you have in mind.

463.7 -> So having like a limited palette like this should make

468.7 -> that a bit easier to make that decision.

470.36 -> So from there, you get a ton of great results

473.04 -> using colors handpicked by professional designer.

475.45 -> So once I find an example I like,

479.406 -> I usually sample the colors found in the bottom right

481.86 -> of the Dribbble shot.

484.25 -> Now, to be perfectly honest, I usually find something I like

487.08 -> like the blue and yellow from the shot

490.36 -> and then I end up using Tailwind CSS default colors.

494.57 -> So Tailwind CSS, it's a framework created

496.91 -> by my friend Adam Wathan.

499 -> It takes utility first approach,

501.68 -> I'm not gonna get much into Tailwind

503.03 -> that's a whole another thing.

505.33 -> But I'm quite involved with this project.

507.75 -> So admittedly, I'm quite biased

509.13 -> but I spent a ton of time choosing these colors

512.46 -> on the framework, so the default colors,

514.71 -> so I mostly just wanna emphasize the benefits

518.07 -> of working with a constraint palette, right?

521.09 -> So if Tailwind is such a thing, that's fine

522.7 -> but approach a project with a constraint set of colors.

527.28 -> So in this case, if I'm using the blue and the yellow

531.08 -> from that Dribbble shot,

532.79 -> I might just use the blue and yellow or an orange

536.39 -> from the Palette and Tailwind

537.55 -> so I find it much easier to work with constrained palette

540.94 -> this instead of aimlessly picking colors

542.59 -> from a color picker,

545.22 -> I like to have like nine or 10 shades

546.5 -> with single hue to work with,

547.91 -> in by using a constrained palette,

549.42 -> you avoid having 40 unique text colors

552.52 -> and 50 unique background colors

554.67 -> where many of the colors are very close to each other.

557.71 -> So this data comes from css.stats.com.

560.94 -> And these are the stats from Facebook.

562.9 -> And so for example, if we take a closer look

565.3 -> at the text colors here, you can probably consolidate

568.44 -> all these dark grays into a single text color, right?

571.75 -> The same could probably be said

572.89 -> about some of the reds you see there

574.71 -> all the reds are really close to each other,

576.35 -> and some of the blues there too.

580.44 -> So yeah, now we've added the blue,

583.98 -> we'll be introducing that yellow from the shot shortly.

586.85 -> But I just wanna get into the navbar.

588.27 -> So first, navbars don't need to be in a bar.

592.27 -> And by putting a navigation elements

593.77 -> directly on the background, it helps things.

597.65 -> I'll open up a little bit more

598.747 -> and makes things more comfortable,

600.02 -> gives everything more room to breathe.

602.52 -> So and if you wanna give it a little more subtle boundary,

605.64 -> you can add a light border like I did here.

608.74 -> I just use a single white pixel border with reduced opacity.

613.33 -> This wall, so kind of ...

614.483 -> I like using borders like this, where it sort of draws,

617.93 -> it kinda connects to the elements

620.22 -> with the left of the elements on the right,

621.43 -> it's sort of associated to them a bit better.

624.81 -> So it's much cleaner than like having it contained in a bar.

630.667 -> Now we've adjusted the background,

633.28 -> this headline, it's looking better.

635.57 -> But I wanna create a little more contrast

637.07 -> between the headline and the subtitle,

639.08 -> right now just kinda using size, which is fine.

641.21 -> So it does create that contrast,

643.53 -> but it's not the only way like to approach that.

647.79 -> Another way to do that is by using a softer color.

650.18 -> Now to make white text softer on a dark background,

653.67 -> your first instinct might be to darken in the text

655.7 -> by decreasing the lightness,

657.42 -> so it's like a light gray.

659.083 -> And this does that trick of de-emphasizing it,

662.34 -> but it always looks a bit off on a colored background.

664.86 -> So, tip number two,

666.56 -> don't use gray text on colored backgrounds.

669.71 -> You need to consider that what we're trying to achieve

671.76 -> is reduced contrast, and that you want to make text closer

675.73 -> to the background color, not gray.

678.69 -> Now, you might think the best way to do this

680.32 -> is by reducing the capacity.

682.12 -> Well, this does reduce the contrast,

683.77 -> it often results in the text looking

684.72 -> a little dull and washed out.

687.44 -> So I find a better approach to this is to handpick

691.22 -> a color based on the background color.

694.36 -> Now if you're using something like I do,

696.4 -> I use the Catalan colors, so it already considers this.

701.36 -> And you can just use one a little lighter colors, right?

703.11 -> But if you're choosing your own colors,

705.59 -> I typically just start by sampling the background

707.636 -> and adjusting the saturation

709.69 -> and lightness until it looks a bit bright.

711.64 -> So if you're familiar with the color picker like this,

714.46 -> this is HSB picker, that's what you get

716.24 -> on most graphical editing tools and browser DevTools.

720.09 -> Even though they use HSL,

721.33 -> they give you an HSB picker, whatever.

724.15 -> I would just drag the picker

725.5 -> to the top left for a lighter color.

728.58 -> And the end result might look something like this.

731.12 -> So it's a subtle change, but it looks better.

733.2 -> Now, you can even take this a step further

735.82 -> by rotating the Hue,

736.95 -> by using the perceived brightness to your advantage.

740.28 -> So what do I mean by that?

743.49 -> Well, every Hue has an inherent proceed brightness.

746.66 -> So in this diagram, I have the Hue shown on the left

751.24 -> and then on the right,

752.08 -> I'm showing how they're actually perceived,

753.91 -> how blackness is actually perceived.

755.15 -> So when you're working with colors like yellow and blue,

758 -> even when each Hue have the same light

761 -> and small yellow still, it's brighter, right?

762.56 -> So this is called luminance, that's a technical term.

766.74 -> And by taking samples of different use

768.83 -> with 100% saturation and 50% brightness,

772.97 -> we get a good sense of how the proceed brightness

775.97 -> of different colors work.

776.98 -> So if you look at this chart,

779.45 -> I plotted all the different hues to show

782.07 -> what colors have the highest and most proceed brightness.

784.73 -> So you can see that yellow is the brightest,

788.04 -> like I said and blues is the darkest.

791.09 -> One thing that's notable

792.02 -> is that it's not like a linear pattern.

793.96 -> So how does all this help us?

796.43 -> Well, the cool part about all this,

798.83 -> is that normally, when you want to change

801.11 -> how light a color looks,

802.89 -> you can simply adjust the lightness value, right?

805.31 -> As shown on the top here.

807.65 -> Well, this does work to light and dark in color,

810.65 -> you often lose some of the colors intensity.

813.21 -> So since different hues have a different proceed brightness,

816.84 -> you can also change the brightness of a color

818.69 -> by rotating the hue to the nearest bright color.

821.06 -> So if we go back to our chart here,

823.7 -> because the background you're using is blue,

826.55 -> we're going to rotate the hue to the nearest bright color.

829.57 -> So saiyan in this case.

832.1 -> And so going back to this,

833.51 -> you can see that it's a pretty nifty trick

835.21 -> to create some like sexy looking gradients,

838.14 -> but this trick also works great

839.72 -> when we're working with white text on colored backgrounds.

841.9 -> So if we go back to our design here,

844.17 -> here's what our original just lighter blue.

847.83 -> But if we rotate the hue, it's just a great way to make text

852.49 -> a little bit more accessible

854.4 -> but while still keeping a colorful.

856.91 -> Okay, so it's starting to get

858.21 -> a little more interesting here.

861.22 -> Now, as much as this dark background

863.53 -> helps to distinguish individual inputs,

867.15 -> it's still tricky to just see some of those labels,

870.32 -> because the text is pretty small.

871.8 -> So I'm gonna contain this whole component

874.88 -> into just a white container.

878.47 -> Now adding a panel like this,

879.73 -> so you're gonna wanna introduce some a bit of space,

882.26 -> just to give some everything more room to breath.

886.11 -> Lack of white space,

887.4 -> it's probably one of the biggest mistakes

889.53 -> I see developers make when designing for the web.

892.99 -> So I wanna share a little bit of a framework I used

895.5 -> to help solve this problem.

896.47 -> So the common approach to introducing space

899.96 -> is to add just a bit at a time,

904.3 -> and if it still feels too tight,

905.54 -> you continue adding a bit more, right?

907.81 -> But the problem with this approach

909.4 -> is that you're only adding like the minimum amount of space

912.92 -> until the site no longer looks bad.

915.11 -> So as you introduce more space, it's gonna look better

917.86 -> than your cramp starting point.

919.09 -> But this may cause you almost stopped too early

922 -> when trying to find that right amount

923.46 -> and sort of leaving you a bit uncertain.

926.07 -> So I find a better approach

927.21 -> is to start with way too much white space

929.42 -> and then remove it until you're sort of happy

931.96 -> with the result.

932.793 -> Now, at first, when focused on an individual component,

936.55 -> you might think it feels like too much white space,

940.154 -> but in context of the rest of the UI

942.676 -> ends up looking like just the right amount.

945.97 -> Next, let's take a look at these inputs.

948.13 -> So first, always remember to use input length in accordance.

952.92 -> You wanna create an expectation

954.59 -> of how long and entry should be.

960.08 -> All these cases, you can probably fit the input

962.15 -> into a field that's about half the size of the current one.

965.43 -> So in this case that allows us to comfortably fit

968.06 -> all the fields into online,

970.2 -> went on a full desktop view like this.

972.59 -> Now, major elements like the container aren't the only thing

975.31 -> on the page that needs room to breathe it.

977.22 -> This also applies to components like inputs,

979.62 -> so I'm gonna increase the height of the inputs,

982.25 -> I can be generous with space on inputs,

984.09 -> like usually give them a total height of 40 or 48 pixels,

988.01 -> that so that's like the size of the font

989.7 -> plus the padding around it.

992.95 -> Now at the moment, the inputs have just a simple border

995.26 -> around them in the right space.

998.17 -> This isn't that distinct

999.19 -> when the inputs on a white background.

1001.93 -> A nice way to add a bit more distinction

1003.43 -> is to add like a subtle off white background to the input.

1006.4 -> I find there's like a fine line of just enough to create

1010.96 -> that distinction, but not too much where it looks disabled.

1014.647 -> And just to give you the inputs,

1015.48 -> a little more visual interest in scalability,

1017.03 -> we're gonna add some icons.

1019.23 -> Now we're not gonna replace the labels with icons

1021.2 -> because the icons we're using aren't that obvious,

1024.03 -> and it's generally just bad for accessibility

1025.84 -> to remove the labels.

1028.01 -> But when adding icons to support text,

1030.02 -> it might make sense to give them the same color as the text.

1032.97 -> But the problem with this is that icons,

1034.7 -> they end up looking more emphasized as you see here.

1038.74 -> You want a balanced weight and contrast.

1040.84 -> So when working with solid icons like this,

1043.88 -> they tend to look heavy

1045.01 -> because they cover a lot more of that surface area.

1047.9 -> And this creates that unbalanced contrast

1050.11 -> when placed next to text that contains

1051.74 -> a lot less that surface area.

1053 -> So a simple way to reduce the contrast

1055.97 -> is by giving the icons of softer colors.

1057.7 -> So this sort of works like a counterbalance

1060.13 -> making heavier elements feel lighter,

1062.37 -> even though the weight hasn't changed at all.

1066.15 -> Now, we've given these inputs a nice treatment.

1068.98 -> What about the radio buttons and the checkboxes?

1071.09 -> Like right now they're just

1071.923 -> that boring browser default look.

1074.69 -> If you're on like Safari, for example.

1077.08 -> So sure way to make an App look more polished

1078.85 -> is to work moving either browser defaults

1081.13 -> with something more custom,

1082.96 -> this is a great opportunity to add some color

1086.22 -> and take something from feeling boring

1087.62 -> and feeling more well designed.

1089.76 -> This goes the same for inputs,

1091.22 -> you can change that drop down arrow

1092.69 -> to something that's more consistent

1094 -> with your icons you're using on the set.

1095.48 -> So that's a small change there.

1098.17 -> In that change also reduce the size of the labels,

1100.63 -> just so they're not taking away from the value itself,

1105.67 -> they're just there to support the value.

1109.44 -> Let's also better utilize the horizontal space here

1112.92 -> by moving the search button to the far right,

1114.77 -> so it's aligned with the checkboxes on the left.

1119.28 -> So overall, reduce the overall vertical space,

1122.15 -> which is always nice.

1123.7 -> And this also lines up nicely.

1125.69 -> So it's below the last input users

1127.88 -> are likely to interact with,

1128.93 -> so they aren't jumping from left to right.

1132.85 -> Let's also increase the height of the button

1135.2 -> so it's consistent with the inputs,

1138.15 -> plus, we can add an icon to the...

1140.21 -> Just provide a little bit more clarity

1141.68 -> to so add a search icon to that.

1146.76 -> Let's introduce that yellow now,

1149.48 -> that I found on the Dribbble shot.

1153.24 -> Now, it's always difficult to achieve high contrast ratios

1156.29 -> with white text on bright colors like yellow or green.

1159.55 -> So like if you wanna get a high contrast ratio with yellow,

1162.22 -> you end up getting something closer to bronze,

1164.17 -> and that's not really any good.

1166.53 -> So the creative way to work around this

1167.85 -> is to invert the colors.

1169.53 -> So instead of using white text on a dark background,

1171.58 -> you need to use dark text on a white bright background.

1174.58 -> Now we already learned in the subtitle

1176.04 -> that we don't want to use black or white text

1177.63 -> on a colored background.

1179.34 -> So once again, we're going to saturate

1181.07 -> this with a bit of the background color.

1183.03 -> So and again, if I'm using the Tailwind colors,

1186.02 -> I would just take a darker yellow or orange.

1191.718 -> So we're sort of doing the opposite

1192.7 -> of what we did with the subtitle,

1194.01 -> because yellow is brighter color

1195.55 -> we need you to find a darker color.

1198.42 -> Now just to better associate the check boxes

1201.76 -> on the far left here,

1204.24 -> we're going to just contain them in a gray box here,

1210.06 -> it's a nice way of creating a border

1214.05 -> without actually having a border, so it's a lot cleaner.

1219.03 -> So now having the panel here like this,

1223.38 -> it does a great job of standing out,

1224.49 -> but it's not very interesting.

1225.674 -> So an easy way to get this pop out more

1227.79 -> is give it some depth, now there's a few ways of doing that.

1230.64 -> One way is to overlap elements to create that depth.

1233.7 -> In this case, instead of continuing the card entirely

1235.87 -> within the Hero section, you can offset it,

1238.04 -> so it sits between the two background sections

1240.45 -> using a negative margin.

1242.77 -> So that looks sort of cool but because the panels shares

1247.21 -> the same background color as the panel below,

1249.64 -> it's looking a bit funny,

1250.473 -> so we need to add some distinction.

1251.88 -> So since we're trying to give it some depth

1254.57 -> let's give it a heavy back shadow to convey elevation.

1260.27 -> That gives us some nice depth,

1261.47 -> but I want to explain my process

1262.8 -> for creating shadows bit more.

1265.8 -> So the first thing worth noting,

1267 -> is that I often use multiple shadows within the design

1270.33 -> to position elements differently on the virtual Z index.

1274.56 -> The larger the shadow you use,

1276.08 -> the closer is gonna feel to the user.

1277.63 -> So usually how it goes is I'll have a small shadow

1281.75 -> for elements that are closer to the background of the page.

1284.3 -> This is typically for buttons or inputs.

1287.44 -> Then I'll have one that's a little further off the page,

1290.2 -> usually for the elements like drop down menus

1291.955 -> or small panels.

1294.03 -> And then sometimes I'll have an additional one

1296.14 -> for large panels.

1297.096 -> For example, if I'm using, I'll be using this one

1299.67 -> on the panel we're currently discussing,

1301.7 -> because I really wanted to pop.

1303.31 -> And then finally I'll have a large one for modal.

1305.5 -> So I might go between one of the two shadows

1307.53 -> on the far right there.

1310.21 -> So here it is, again, in context.

1311.96 -> So you can see that the middle shadow on the previous page,

1314.96 -> it's quite heavy in context.

1317.72 -> But there's a bit more to that

1319.02 -> than just offsetting a block shadow without the blur.

1321.53 -> You need to consider that shadows have two parts.

1325.21 -> So what do I mean by that?

1326.91 -> Well, when you look at shadows in the real world,

1328.95 -> they are typically created by more than one light source

1331.8 -> that gets disrupted by an object.

1333.8 -> One is usually an ambient light

1337.41 -> and the other is a direct light source.

1342.21 -> The shadow created by the ambient light is usually

1346.05 -> a tighter and darker with less of a vertical offset

1349.4 -> and a small and blur radius.

1350.7 -> So that's kinder seen below the base there.

1352.79 -> And the shadow created by the direct light source

1355.6 -> is usually a larger and softer with more of a...

1359.21 -> it has more of a vertical offset

1360.84 -> than with a larger blur radius.

1362.48 -> So I like to get through

1363.76 -> to that when I want to make the shadows on the web.

1371.223 -> So furthermore, as an object gets further,

1372.73 -> it's solely covers the direct light source.

1375.3 -> So consider that by introducing a negative spread value.

1378.56 -> So if you're gonna use this to shadow technique

1381.67 -> on your own projects, make sure you make

1383.47 -> the direct light shadow more subtle

1385.81 -> for shadows that represent a higher elevation.

1388.53 -> And this just gives you a little bit more creative control

1390.63 -> when then working with a single shadow.

1393.35 -> Okay, back to the design.

1397.11 -> Now, though you offset the background below,

1399.62 -> it gave it and we give it a shadow.

1401.22 -> We're gonna do one more thing,

1402.053 -> and that is to use color to convey depth.

1405.99 -> So in general, with screen design,

1409.32 -> lighter objects feel closer to us than darker objects.

1411.42 -> So to make something feel more raised off the background,

1413.86 -> we can make it a subtle off white,

1416.51 -> just create that additional contrast.

1419.98 -> So yeah, that helps a pop out a lot more.

1421.88 -> There's three little techniques there.

1426.036 -> So now that we made the background off light,

1427.49 -> sort of push the table back,

1429.55 -> still further emphasizing my point about color and depth.

1433.04 -> So we're gonna contain that in a panel too.

1435.73 -> Now we don't want this to have the same amount of depth

1438.08 -> as the search panel,

1439.75 -> we want this to send this back of it further.

1441.42 -> So just going back to the shadows we have,

1446.217 -> we're gonna use the second shadow shown here

1448.1 -> just to bring it back a little bit.

1450.81 -> Now, styling tables, it can be tricky.

1452.86 -> It's often a lot of data to present in the condensed space.

1455.92 -> So there are a few tricks that will go through here.

1459.02 -> The first thing is, we're gonna use alignment.

1463.32 -> So for most content,

1464.33 -> it makes sense to left align the content

1467.61 -> but for content like dollar values sometimes

1469.99 -> and sometimes dates, it's always nice to write align them,

1472.75 -> just so the decimal places are in columns

1474.167 -> and makes much easier to compare the numbers magnitudes.

1478.38 -> Now, here's a cool little CSS trick since it's a CSS day.

1483.05 -> (laughing)

1483.883 -> Another cool thing you can do is apply tabular numbers.

1486.97 -> So this can be achieved by setting

1489.3 -> the font features-settings tnum as seen here.

1492.42 -> And it basically makes the text value

1494.55 -> act like a model space font

1495.69 -> without actually using amount of space font.

1500.67 -> Now the borders on this table, they're looking a bit busy.

1504.69 -> So whenever possible, use fewer borders

1508.15 -> to make a design look pretty cluttered.

1511.78 -> A nice way to do that with what table designers use

1514.76 -> Zebra striping, of course.

1517.47 -> Okay, let's also look at the headings on here.

1520.32 -> There's sort of this preconceived notion

1521.9 -> that headings need to be big and bold to stand out

1524.61 -> against the rest of the page text,

1527.34 -> but in many cases, headings like this,

1529.02 -> they're more or less acting like labels that they're,

1531.06 -> there to support the content,

1533.62 -> they shouldn't be stealing the attention away.

1534.92 -> So that means that headings like this

1537.07 -> should be a bit more subtle.

1539.08 -> So I find a great treatment for headings like this,

1540.95 -> is that small, bold uppercase text with the softer color

1544.62 -> that the small, softer treatment helps them stand back

1547.87 -> against that table content,

1549.23 -> but that bolder uppercase treatment

1551.55 -> helps them maintain that heading status.

1553.12 -> So I like to use that quite a bit.

1555.83 -> So that's looking cleaner but striking more ideas here.

1560.5 -> Think outside of the database.

1563.2 -> Now if columns don't need to be sortable,

1565.61 -> try consolidate secondary information

1567.44 -> just for like a bit of a cleaner,

1568.39 -> look it opens things up a little bit.

1571.94 -> Consider de-emphasizing that with smaller and lighter text

1574.86 -> so to highlight but like that primary information

1578.37 -> and if the data calls for try enhancing it using images

1582.985 -> and also these book now buttons on the right there,

1585.92 -> it's looking pretty heavy on the right

1588.84 -> because it darkening a single column.

1590.46 -> So it really draws you away

1591.89 -> from the other important elements on it.

1594.7 -> So we wanna give them more of a secondary treatment.

1596.57 -> So a popular approach to this is styling buttons

1599.3 -> by simply aligning them.

1601.52 -> This does give them that secondary appearance

1603.27 -> but I find a great alternative to this

1605.71 -> is to give the buttons soft,

1607.53 -> solid background based on the text color.

1610.57 -> So it's just isn't quite as heavy, it's a lot cleaner.

1614.45 -> Let's also make this text link the same color

1617.53 -> as the top, like the text link up on the top.

1620.16 -> We'll make it the same colors

1621.017 -> of brand colors everywhere else.

1624.64 -> So there, and just to give it more of a link style,

1628.34 -> we often use an underlying to solid as links,

1630.47 -> but I find like something to give it a little bit more style

1634.46 -> to use like a generic icon, like a chevron to the right

1637.26 -> of it makes it look more clickable.

1640.92 -> Okay, so I think that's in a pretty good spot now.

1645.23 -> Let's review these vacation package deals at the bottom.

1648.9 -> So there I'm using cards to display them.

1651.27 -> Often working with images like this,

1652.66 -> you may run into the issue

1653.58 -> of having different aspect ratios.

1656.19 -> This can really throw off the layout.

1657.42 -> If you're using multiple images, it might be working

1659.085 -> like you're doing like a Pinterest layout,

1660.92 -> you can do something like that.

1662.12 -> But when it's displayed side-by-side here

1664.277 -> you can really throw things off.

1665.58 -> So instead of just using the image

1667.99 -> at the current aspect ratio,

1670.87 -> we're gonna center the image inside of fixed container

1673.11 -> and then cropping on anything that doesn't fit.

1676.8 -> We all know the beauty of this is you don't have to edit

1678.59 -> the image in a tool before bringing it into the web,

1680.72 -> you can just make the image your background image

1684.446 -> and then setting the CSS background size property to cover.

1688.79 -> This cleans up the entire layout.

1691.75 -> Now we don't necessarily need these buttons

1693.48 -> at the bottom here, those those primary buttons.

1695.875 -> Sites like Airbnb, and YouTube, they're both great examples

1699.84 -> of how car-based layouts can get away

1702.23 -> without including buttons

1703.2 -> and they still managed to look clickable.

1706.76 -> Now the details of these cards, it's looking pretty busy.

1709.64 -> So let's see what we can do to clean it up a bit.

1712.7 -> The first thing I wanna address is the labels

1715.44 -> on the price in the website.

1718.41 -> In many cases, you don't need a label at all.

1720.69 -> So for example, 1295 is a price

1724.85 -> 'cause it has a dollar valuing

1725.95 -> and vacationspots.com is a website 'cause it has the dotcom,

1729.23 -> so you don't need a label to identify that.

1732.79 -> Now, when you're able to present data without labels,

1735.61 -> you get much more creative control

1737.69 -> and you can really emphasize important information.

1740.06 -> So in this case, the price is probably way more important

1743.26 -> to the user than the website it's getting the deal from.

1746.96 -> Let's also reduce the noise creative with these borders

1749.43 -> by just using that same technique I showed you earlier

1752.69 -> by using that subtle off white background

1754.99 -> to distinguish the sections.

1756.857 -> And again, try to get creative with the data hierarchy

1759.1 -> by using a combination of font size, weight color,

1764.28 -> and again, using that uppercase treatment,

1766.64 -> it's always a bit cleaner.

1771.41 -> Furthermore, we can also use color to enrich

1773.85 -> some of the data

1774.683 -> to make it a little bit easier to interpret.

1776.154 -> So for an example we have these offerings,

1778.42 -> so on the first card there has like only five left,

1781.327 -> and so

1783.98 -> we can put this into like a pill

1786.6 -> and using these colored badges,

1788.99 -> just to take them in on a quick glance.

1791.19 -> Much like our button at the top,

1792.42 -> we're gonna give these badges.

1794.34 -> So I have another one on the right here and green one.

1797.66 -> We gonna give that soft background color with dark text,

1800.42 -> just to make them a bit more subtle and more accessible

1802.27 -> because like if you put like white text on red

1804.64 -> sometimes it's tricky to work,

1807.01 -> it's tricky to get like those high contrast ratio

1809.01 -> so I find it better to make the background a bit lighter

1812.21 -> and using a darker text color.

1816.41 -> Let's also look at this newsletter section.

1818.9 -> We're getting close to the bottom here.

1821.22 -> So right now it's just sitting directly on the background,

1824.53 -> there's nothing distinguishing it,

1825.59 -> so it's not very compelling.

1827.61 -> So one way to add excitement to the background

1829.58 -> is to simply by changing the color.

1832.26 -> This is just a great way to distinguish,

1835.28 -> add distinction between entire page sections like this.

1839.92 -> This actually is a great technique to use

1841.75 -> on like marketing pages, you go to like marketing websites

1844.32 -> and it splits up the Hero two different feature sections.

1847.96 -> So I see that being used quite a bit.

1850.46 -> So here I applied the brand blue to the footer

1853.92 -> or to the newsletter section

1856.79 -> and then to the footer I use like a darker treatment.

1861.04 -> You can even go as far as like adding a background pattern.

1863 -> So, as mentioned earlier, I made this site a while ago

1865.57 -> called Hero patterns.

1867.57 -> It's basically a collection of SVG background patterns.

1870.24 -> It's great for backgrounds on like marketing pages

1872.56 -> or sections, like a word we're working with,

1875.6 -> that typography, one's pretty popular.

1877.85 -> I haven't updated this in a long time,

1879.563 -> I think there's about 100 patterns on there now.

1882.26 -> Maybe I'll update again soon (laughing).

1886.09 -> Now, next, let's make a few changes.

1889.01 -> So these elements are consistent

1890.41 -> with the changes we've talked about already.

1892.34 -> So I'm not gonna go through them all again.

1894.11 -> But basically, I made the newsletter description text,

1899.06 -> I made it that same...

1900.4 -> again, that same color treatment as the subtitle the top,

1904.12 -> I also reintroduce that yellow button

1905.48 -> as it has that great contrast on the blue background

1909.34 -> and then finally, I increase the size of the inputs

1912.42 -> to be the same as everywhere else.

1915.25 -> Now this section, it's a little heavy,

1917.35 -> it's taken up a lot more vertical space than it needs to.

1919.6 -> So if you working with design like this,

1921.87 -> that takes up a lot of vertical space,

1924.38 -> you can better utilize your horizontal space

1927.4 -> by trying to splitting up into columns.

1931.37 -> Sort of it works great,

1933.17 -> especially in a case like this

1934.462 -> where you have that solid background,

1935.9 -> that solid color background

1936.733 -> and still manages to associate the elements quite nicely.

1940.79 -> So yeah.

1943.26 -> Let's move on to the footer now.

1944.39 -> Now I love big footers like this,

1946.57 -> it's sort of acts like a catch all,

1948.55 -> if you have a lot of nav items,

1950.04 -> but you need to include but they're not important enough

1953.69 -> to occupy that real estate at the top, in the top nav

1957.86 -> but with that, it's still nice to have some structure

1960.62 -> when you have a large sitemap like this.

1962.37 -> So to handle this, I like adding those subtle labels

1967.1 -> to each section using that small bolts

1970.16 -> like uppercase treatment for headings.

1973.17 -> So I've used that quite a bit already,

1975.89 -> and finally, the last thing that stands out is legal jargon

1980.12 -> and social media links at the bottom there.

1982.32 -> Right now there is sort of floating there.

1984.99 -> Now, I know I mentioned like I keep preaching it,

1988.73 -> like use for your borders.

1989.74 -> But I talked about this earlier

1992.36 -> that on the top bar at how using borders,

1995.63 -> it sort of helps associate elements a bit better.

1999.92 -> So yeah, that pretty much wraps everything up.

2003.52 -> I have a few more finishing touches, though.

2006.75 -> Just to bring this to the next level.

2009.05 -> First thing is grays don't have to be gray.

2012.03 -> Pure grays can make a UI look pretty dull and unnatural.

2015.51 -> So what I like to do saturate the grays with a bit of blue

2018.69 -> or brown for a cooler or warmer look.

2021.58 -> So the thinking here is that you're sort of adjusting

2025.21 -> the overall temperature of the site.

2027.44 -> This is similar to what you we experience in the real world

2029.68 -> by a combination of things, right?

2031.459 -> Maybe like a light source,

2033.32 -> like if you're using a warm light or like a white light.

2037.11 -> You may even get this effect

2038.2 -> by look like reflective surface,

2040.51 -> so it just makes everything feel more natural

2042.22 -> when you saturate the grays a bit.

2044.05 -> So if you wanna make your design more cool,

2046.16 -> saturate your grays with a bit of blue.

2048.16 -> I'm not sure if you can see it on this projector

2051.73 -> but the bottom one has a bit of a cooler look.

2054.413 -> So I just adjusted the saturation in here a little bit.

2058.28 -> And you want to make them a bit warmer,

2059.46 -> try saturated with a bit of yellow or brown.

2062.96 -> I mostly saturate my grays with a bit of blue

2064.87 -> because I'm working,

2066.45 -> especially in this case I'm working with...

2068.43 -> Like my primary color is blue, I might use warmer colors

2071.743 -> from working with warmer colors like red

2074.98 -> or sometimes purple.

2076.81 -> Sometimes it can work with blue,

2078.67 -> like I know Base Camp they consciously made their site,

2082.3 -> their primary colors blue but they

2085.23 -> use kind of some warmer colors to their background.

2087.25 -> So experiment and play with both.

2090.54 -> Now when doing this if you're working with like HSL

2093.74 -> which I recommend, don't forget to increase the saturation

2098.28 -> for the lighter and darker shades

2100.25 -> to maintain a consistent temperature.

2101.86 -> So if you don't, those shades will look a bit washed out

2105.32 -> compared to the grays that are closer to 50% lightness,

2109.04 -> and how much you wanna saturate your grays

2110.81 -> is completely up to you.

2111.79 -> So just a little if you want to tip the temperature

2116.3 -> slightly or crank it up if you wanna increase it

2119.34 -> to lean strongly one direction or the other.

2122.819 -> And just because it's hard to see on that chart,

2124.74 -> here's what it looks like on their side-by-side.

2128.084 -> So this is what it looks like

2130.57 -> when it's not quite as saturated,

2134.15 -> there's a bit more saturated,

2135.44 -> you can kind of see the change there.

2137.85 -> There they are if it's hard to tell, there they are stacked.

2140.15 -> So you can mostly see it on the latter grays there,

2143.26 -> so they're a bit more saturated at the bottom.

2147.13 -> Okay,

2149.17 -> so, I usually go for the more saturated look.

2152.34 -> So here's the difference that makes.

2155.32 -> So I'm just kind of liven things up a little bit.

2158.82 -> And finally, I just wanna share

2159.653 -> a few insights on choosing the fonts.

2161.96 -> This is one of the biggest mistakes I see developers make,

2165.137 -> and it does have one of the highest impact.

2166.64 -> So at the moment this designer here is using

2169.1 -> the system default stock.

2170.67 -> So in this case, San Francisco, CA Mac.

2174.62 -> This is a great font,

2176.13 -> but like actually quite like San Francisco,

2178.69 -> I especially like using the system font stack

2180.76 -> on a nap experience,

2182.64 -> and then if I'm working on a marketing page

2185.62 -> then I might use a custom font.

2187.78 -> But I think it's worth exploring a few different options

2190.33 -> 'cause this is a design talk,

2191.46 -> I think it's worth talking about fonts.

2194.26 -> So I thought I'd share how to discover new formats.

2196.5 -> So there's a lot of ways to do this

2201.49 -> for entrepreneurs everywhere.

2202.39 -> You can simply just search for popular fonts on Google Fonts

2206.268 -> or like Typekit or Adobe Fonts which it is now.

2210.252 -> They're all great services, but it's not very fun.

2212.18 -> I wanna get into a little bit more detail.

2216.57 -> I get much more interesting results by digging a bit further

2219.75 -> so this involves a combination of getting inspiration

2222.69 -> from existing sites,

2224.55 -> sort of the same way I find color combinations,

2226.24 -> I'll find a site I like

2227.7 -> and then look at the Browser DevTools

2229.81 -> and see what fonts are being used.

2231.17 -> Sometimes I go right to the Font Foundry website,

2233.1 -> so these are the companies that design the fonts

2235.23 -> and I see what fonts are they have available,

2237.61 -> I like going to have their fonts a lot.

2240.33 -> Commercial type is one of my favorites

2242.17 -> and the Current Typefoundry just to name a few.

2246.97 -> But I wanna share how I use a combination

2249.76 -> of these methods to choosing fonts,

2252.09 -> Highlander with the font

2252.95 -> that I'm gonna be using for this design.

2255.51 -> So just like choosing color,

2257.16 -> I go to all the same spots for inspiration.

2259.55 -> So I'll go to Land-Book, or I'll go to siteInspire

2262.05 -> and see what fonts are being used there.

2264.34 -> In this particular case, one time

2265.6 -> I was casually browsing the web looking for inspiration,

2268.91 -> I found myself looking at the official bootstrap themes,

2271.16 -> just kinda looking, see what they had there.

2273.56 -> I came across this one that had...

2275.72 -> was quite nice and excusable from being used,

2278.03 -> so from naturally open the DevTools

2279.78 -> to see what fonts was being used,

2280.91 -> but I didn't want to stop there,

2282.93 -> I wanted to learn more about this font,

2285.57 -> so I Googled it,

2287.67 -> and just to learn more information about it,

2290.26 -> and from there, I learned it was designed

2291.85 -> by a Foundry called Hanken Design, where they've designed

2295.71 -> a ton of custom high quality fonts.

2298.04 -> So I picked up the bundle they had for sale,

2301.52 -> and then from that bundle, I noticed a phone call,

2303.45 -> I found the phone called barter exchange

2304.99 -> that I thought would be perfect for this project.

2306.45 -> So let's take a look at that change.

2308.9 -> So here's what San Francisco

2311.43 -> and here's with barter exchange and it's not a crazy change,

2314.47 -> but it's something a little more unique.

2316.73 -> And I've been doing a combination of these methods

2319.09 -> for Foundry Fonts for a long time,

2321.17 -> and I built up a decent collection

2322.66 -> so that I've been going back to regular,

2325.39 -> so it's just a great approach to finding new fonts.

2328.18 -> So that pretty much wraps everything up.

2332.521 -> Let's just compare this to what we started with.

2335.13 -> So here's our starting point,

2341.65 -> and here's where we landed.

2344.21 -> So, yeah, I think it just goes to show

2347.2 -> that it can be overwhelming to go from your starting point

2350.43 -> to the end point,

2352.05 -> but really, it's just a bunch of small little changes

2354.63 -> and at by the end, you'll end up

2356.99 -> with a more polished looking website.

2360.82 -> I'm gonna plug my book right now,

2363.1 -> if you enjoyed the talk and found it useful,

2364.58 -> I recently watch this book with my friend Adam Wathan

2368.224 -> and it's called "Refactoring UI".

2369.99 -> So it's loaded with a ton of practical tips

2371.61 -> like the ones I've shared today and it's 40% off right now.

2376.504 -> (laughing)

2379.672 -> I'm also quite active on Twitter,

2380.81 -> so you can find me @steveschoger,

2382.72 -> where I share a ton of tips like the ones I shared today.

2385.23 -> So thank you.

2386.447 -> (audience clapping)

2400.72 -> Bare feet very nice. - Always.

2402.86 -> Always.

2403.81 -> Anyone who's walked me previous talks

2405.84 -> knows that that's how I do.

2407.18 -> - Yeah.

2409.36 -> - First off, I love those sort of breakdowns

2411.01 -> and sort of comprehensive thing,

2412.29 -> that's always a beautiful thing to see.

2415.785 -> So we got a few interesting questions here.

2417.14 -> - Yes. - First off, you mentioned

2418.12 -> a little bit of color accessibility.

2421.92 -> But a lot of your changes

2423.31 -> seem to be like on a wild cutting and about,

2425.5 -> how much do you pay attention to color contrast,

2429.78 -> like in terms of WK Accessibility?

2431.7 -> - Yeah, I follow that quite closely.

2434.89 -> Like I have this menu bar tool called contrast,

2437.5 -> it was by Matt Smith and Sam Soffes.

2440.17 -> Their names are epic.

2441.65 -> I'm saying their name or his name, right.

2443.87 -> And I always kind of check that

2445.67 -> to make sure it's accessible.

2447.01 -> You're probably not like seeing the same thing

2448.34 -> that I'm seeing on my Retina Display monitors

2450.63 -> for this projector that's it

2452.03 -> but I'm always quite active on that.

2454.9 -> - Yeah, and now that's why WK Accessibility exists

2458.14 -> because these are still readable on this sort of scheme.

2460.037 -> And with a very depressed color depth.

2462.26 -> - Yeah, so I'm always using that,

2463.923 -> and the contrast app I use,

2466.75 -> I think it's just contrastapp.com

2468.49 -> and it's just a little menu bar tool,

2469.577 -> and I can just sample the colors and reference in there.

2473.42 -> - Very cool.

2479.605 -> Can I get to that.

2480.97 -> So interesting question here.

2481.92 -> So you did a lot of color theme

2483.92 -> and this was largely a blue like

2486.01 -> underlying theme - Yes.

2486.843 -> - For a lot of this.

2488.45 -> But some things come with their own color scheme,

2491.13 -> kinda naturally warnings and alerts and whatnot

2493.66 -> of in green, yellow or red or something.

2495.51 -> - Yes.

2496.343 -> - What do you do with the site's branding guidelines

2498.02 -> were already in those colors,

2499.86 -> and then they want to do - yeah, that's tricky.

2502.18 -> - Something like this. - Like if if the site's red

2503.24 -> but then you have like a red alert.

2504.48 -> - Yeah.

2505.46 -> - I still stick with red alerts.

2510.81 -> I've been asked this a lot

2511.84 -> and I don't know how to answer that question.

2513.97 -> But I usually just work with like, red is high severity,

2517.21 -> I think many people know that.

2522.72 -> Usually if the primary color is red,

2528.83 -> most sites are white and grays, right?

2532.65 -> White for backgrounds and gray for tax

2534.53 -> and then you use the primary color for black actions

2537.96 -> and so I might tone down and just use a cadence of the red

2542 -> and then that helps if you're using alerts and stuff

2544.76 -> you can emphasize that a bit more, right?

2547.46 -> - Mm-hmm, okay.

2551.92 -> So I notice that your placeholders for your input fields,

2556.2 -> it's gonna be styled the same as the value

2557.68 -> while you're typing.

2558.7 -> What's your opinion on styling

2559.97 -> or on placeholders for inputs?

2563.1 -> - Sorry.

2564.72 -> - I'm talking 'bout the feeling of the placeholder,

2566.61 -> they look the same, like color contrast whatnot.

2569.74 -> - Oh, yeah, I actually, like for my example,

2573.231 -> I had them look just pre-filled

2574.67 -> as if that was definitely the placeholder.

2576.553 -> - Oh, okay. - Yeah.

2577.386 -> I should have maybe mentioned that.

2579.415 -> - Okay. - But yeah, I'd make it

2580.248 -> a little bit lighter, like just enough

2581.76 -> where it's accessible on and make the value

2585.61 -> that you're typing in your normal text color, dark as gray.

2589.25 -> - Okay, final question before we head off to lunch,

2594.57 -> how important you think it is for designers

2596.23 -> to stay up with CSS progress

2598.77 -> in terms of new things available and not

2600.84 -> versus just learning some basics

2603.24 -> and then continuing to focus mostly on design sensibilities?

2606.57 -> What do you think the good balance is?

2609.93 -> - I think it's important to understand,

2613.95 -> what you're capable of, what CCS is capable of.

2618.59 -> I think that helped me early in my career

2621.17 -> is learning a little bit of code.

2623.88 -> It helped differentiate me from like other designers

2625.92 -> and I was able to, it's more like making it easier

2628.33 -> to communicate with developers,

2629.85 -> so like speaking their language a little bit.

2631.64 -> - Mm-hmm.

2633.04 -> - But if you work closely with developers,

2634.451 -> you can count on them to kind of teach you that stuff

2639.43 -> but I think it's important to learn the basics, right?

2641.83 -> Like how it actually works, yeah.

2643.971 -> - All right, well, thank you so much Steve.

2645.42 -> - Yeah, thank you. (audience clapping)

2648.049 -> (driving rock music)

Source: https://www.youtube.com/watch?v=7Z9rrryIOC4