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.

Рекомендации по теме

Комментарии

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.

luniousm

I love that the Canadian said sorry within 60 seconds of his talk. :) Really awesome talk. Thanks so much.

designisvoice

obviously this is a great talk but also the interviewer came in prepared with great questions, shoutout to the guy

swyxTV

Thank you for this. Even in 2021 it's still one of the best talk for improving my design. From beginner to hero

eliodrallag

I really enjoy Steve's sense of style! Thank you for the great talk.

DmitrySharabin

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.

mosesnandi

Good talk. It's not often you hear a designer explain their design rational.

DanTuber

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

bradfranklin-jco

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!

VGColosseum

This guy's book is crazy good!

I absolutely love it !

xerxius

Following steve for a year now, great content and practical tips.

nandhagopalgopalsamy

Most developers and product mangers should watch this lol. Great talk

Andrewwow

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.

mikegleeson

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.

MolinaNilson