2:46 Give text consistent contrast. 11:07 Don't use grey text on color background. 12:22 Use perceived brightness. 14:46 Start with too much whitespace. 17:18 Balance weight and contrast. 17:56 Supercharge the defaults. 20:31 Overlap elements to create depth. 20:56 Use shadows to convey elevation. 23:23 Create depth with colors. 24:20 Align with readability in mind. 25:04 Use fewer borders. 25:59 Think outside the database. 30:28 Alternate backgrounds. 33:28 Greys don't have to be grey. 36:01 Use good fonts. At first glance i thought his name was Steve Roger Lmao.
This was excellent. I like the part where he mentioned you can learn design by following good tactics and not necessarily design because you're talented.
14:57 Add just a what?!?! Hahaha I had to go back and listen to it again. Amazing talk overall, really considering picking up his book. I'd buy it in a heartbeat if it were a physical book.
Box shadows 21:10 create depth with box shadows. Larger shadow creates more elevation 22:50 css code Color (depth) 23:22 Use color to convey depth. Lighter feel closer. Raised effect, use off white Colors (grays) 33:30 grays don't have to be gray 34:06 neutral grays / cool grays HSL Increase saturation to get effect 35:30 grays colors compared
Awesome as usual! I have to say though - I'm not a fan of that Subscribe input at the bottom. The yellow and white makes it look like a cigarette, and I can't unsee it!
catching up to this just now. really enjoyed this. however, cannot agree with using yellow for a CTA. it's universally a warning selector and a call to halt. tip: use it in accents instead.
Great stuff. In 'Our Best Flights to Toronto table' styling for 'Book now' button seems a bit to close to what users would interpret as disabled state. Is it just me?
@@WebConferencesAmsterdam I reckon it's YT putting up the video asap after posting on a high priority job, then I adds in the bells and whistles on low priority jobs
I disagree with not using default fonts. They're default because users can easily read them, browsers load them quickly, etc. It's like saying "stop signs are boring, why are they all red"?
2:46 Give text consistent contrast.
11:07 Don't use grey text on color background.
12:22 Use perceived brightness.
14:46 Start with too much whitespace.
17:18 Balance weight and contrast.
17:56 Supercharge the defaults.
20:31 Overlap elements to create depth.
20:56 Use shadows to convey elevation.
23:23 Create depth with colors.
24:20 Align with readability in mind.
25:04 Use fewer borders.
25:59 Think outside the database.
30:28 Alternate backgrounds.
33:28 Greys don't have to be grey.
36:01 Use good fonts.
At first glance i thought his name was Steve Roger Lmao.
Steve Roger that! :) And thanks for the TOC!
Doing the Lord's work...
He makes it look so easy....
I love that the Canadian said sorry within 60 seconds of his talk. :) Really awesome talk. Thanks so much.
This was excellent. I like the part where he mentioned you can learn design by following good tactics and not necessarily design because you're talented.
I really enjoy Steve's sense of style! Thank you for the great talk.
obviously this is a great talk but also the interviewer came in prepared with great questions, shoutout to the guy
Thank you for this. Even in 2021 it's still one of the best talk for improving my design. From beginner to hero
Good talk. It's not often you hear a designer explain their design rational.
Most developers and product mangers should watch this lol. Great talk
This guy's book is crazy good!
I absolutely love it !
14:57 Add just a what?!?! Hahaha I had to go back and listen to it again. Amazing talk overall, really considering picking up his book. I'd buy it in a heartbeat if it were a physical book.
I've read the book en it's definitely worth it. Now I'm gonna redesign a project with the book on another screen and work it through
Fonts are biggest challenge for me. Great insights. Thank you.
Following steve for a year now, great content and practical tips.
Box shadows
21:10 create depth with box shadows. Larger shadow creates more elevation
22:50 css code
Color (depth)
23:22 Use color to convey depth. Lighter feel closer. Raised effect, use off white
Colors (grays)
33:30 grays don't have to be gray
34:06 neutral grays / cool grays HSL Increase saturation to get effect
35:30 grays colors compared
I love his designs.
Awesome as usual! I have to say though - I'm not a fan of that Subscribe input at the bottom. The yellow and white makes it look like a cigarette, and I can't unsee it!
catching up to this just now. really enjoyed this. however, cannot agree with using yellow for a CTA. it's universally a warning selector and a call to halt. tip: use it in accents instead.
Super interesting, thanks for sharing. Have been on the fence about getting the book but this shoved me over!
Thank you Steve. These small things but have large impact 🙏
THIS IS AN EXCELLENT EDUCATION!!!
with simple tips and colors you can have a great site, thx for the talk
Loved the talk. So many practical tips with immediate demonstration of the impact and application. Not sure about dude with no shoes though!
What about him?
Brilliant talk. Learned so much from this!
This is very helpful and easy to follow talk. Thank you!
Incredible! This really helps. Thanks a lot, Steve!
Great content and tips Steve. Learned a lot.
This is really great talks. And i love his approach
This guy rocks.
Great job! Great talk!!
Great talk, Thanks for sharing.
Good content... Thanks Steve
Brilliant!
Great talk!
awesome
Great stuff.
In 'Our Best Flights to Toronto table' styling for 'Book now' button seems a bit to close to what users would interpret as disabled state. Is it just me?
This is awesome.
Where can I find more content like this?
Over at www.refactoringui.com/ ?
i love you steve
wow this great
Schoger for president haha! Thanks man ;)
Haha did he call him Dave at the very end??
Isn't the book for designers?
What do you mean?
@@WebConferencesAmsterdam there it says Make your ideas look awesome, without relying on a designer.
Fly Inthesky the book is targeted to developers who want to learn design 🤙🏻
👏Hercules! 👏Hercules!
I don't understand why videos get uploaded that don't allow watching at x2 speed...
It allows it for me
@@edforrest9826 same for me now. Maybe RUclips being weird?
@@beauremus I guess so!
We don't even think this is something we can turn off on our side.. :)
@@WebConferencesAmsterdam I reckon it's YT putting up the video asap after posting on a high priority job, then I adds in the bells and whistles on low priority jobs
that yellow button with brown fonts failed the contrast ratio test. It only scored 3.86.
Yes but it passes the yellow button itself to the white background plus high contrast is harder to read on the eye
I disagree with not using default fonts. They're default because users can easily read them, browsers load them quickly, etc. It's like saying "stop signs are boring, why are they all red"?
Great talk!! Thanks