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: speakerdeck.com/steveschoger/...
About Steve: www.steveschoger.com
Follow Steve: / steveschoger
Get his book, Refactoring UI: refactoringui.com
More videos: / @steveschoger
More about CSS Day: cssday.nl or / cssdayconf
Receive conference announcements in your inbox: cssday.nl/subscribe

[@luniousm3246]

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.

[@WebConferencesAmsterdam]

Steve Roger that! :) And thanks for the TOC!

[@othnielmclean8612]

Doing the Lord's work...

[@nikosc]

He makes it look so easy....

[@designisvoice]

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

[@DmitrySharabin]

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

[@nandhagopalgopalsamy1726]

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

[@eliodrallag4806]

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

[@PeterNixey]

Super interesting, thanks for sharing. Have been on the fence about getting the book but this shoved me over!

[@DanTuber]

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

[@swyxTV]

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

[@NguyenDuy-mj3wh]

Thank you Steve. These small things but have large impact 🙏

[@arioseno8320]

This is really great talks. And i love his approach

[@thihanchooo6213]

Incredible! This really helps. Thanks a lot, Steve!

[@mosesnandi]

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.

[@rpwarp]

Fonts are biggest challenge for me. Great insights. Thank you.

[@xerxius5446]

This guy's book is crazy good! I absolutely love it !

I love his designs.

[@OlegYuzvik]

This is very helpful and easy to follow talk. Thank you!

[@anasamati]

with simple tips and colors you can have a great site, thx for the talk

[@Andrew24wow]

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

[@BlueprintBro]

Brilliant talk. Learned so much from this!

[@borys1142]

Great talk, Thanks for sharing.

[@bradfranklin-j66co]

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

[@AmandaLucaseu]

Great content and tips Steve. Learned a lot.

[@jonathanbaker7136]

Great job! Great talk!!

[@MolinaNilson]

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.

[@BboyKeny]

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

[@NQuiz52]

THIS IS AN EXCELLENT EDUCATION!!!

[@surprisingstuff]

This guy rocks.

[@chamugas888]

Schoger for president haha! Thanks man ;)

[@LucasBhEh]

Great talk!! Thanks

[@tarunagrawal999]

Good content... Thanks Steve

[@DouglasFigueredoNYC]

Brilliant!

[@lewis6590]

Loved the talk. So many practical tips with immediate demonstration of the impact and application. Not sure about dude with no shoes though!

[@WebConferencesAmsterdam]

What about him?

[@brunohplemos]

This is awesome.

[@VGColosseum]

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!

[@goroh83]

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?

[@ZhengCheng]

Great talk!

[@mikegleeson4670]

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.

[@ioannisme7495]

awesome

[@kevinivan91]

i love you steve

[@minhhuynh3332]

wow this great

[@DonaDogs]

Where can I find more content like this?

[@WebConferencesAmsterdam]

Over at www.refactoringui.com/ ?

[@spencereverett2455]

👏Hercules! 👏Hercules!

[@flyinthesky3927]

Isn't the book for designers?

[@WebConferencesAmsterdam]

What do you mean?

[@flyinthesky3927]

@@WebConferencesAmsterdam there it says Make your ideas look awesome, without relying on a designer.

[@SteveSchoger]

Fly Inthesky the book is targeted to developers who want to learn design 🤙🏻

[@DavidRoyer86]

Haha did he call him Dave at the very end??

[@beauremus]

I don't understand why videos get uploaded that don't allow watching at x2 speed...

[@edforrest9826]

It allows it for me

[@beauremus]

@@edforrest9826 same for me now. Maybe KZbin being weird?

[@edforrest9826]

@@beauremus I guess so!

[@WebConferencesAmsterdam]

We don't even think this is something we can turn off on our side.. :)

[@edforrest9826]

@@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

[@USONOFAV]

that yellow button with brown fonts failed the contrast ratio test. It only scored 3.86.

[@neil340]

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"?