Steve Schoger | Refactoring UI

Steve Schoger | Refactoring UI | CSS Day 2019

Рет қаралды 64,796

Күн бұрын

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

Пікірлер: 63

@luniousm3246 4 жыл бұрын

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 4 жыл бұрын

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

@othnielmclean8612 4 жыл бұрын

Doing the Lord's work...

@nikosc 4 жыл бұрын

He makes it look so easy....

@designisvoice 5 жыл бұрын

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

@DmitrySharabin 5 жыл бұрын

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

@DanTuber 4 жыл бұрын

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

@mosesnandi 3 жыл бұрын

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.

@eliodrallag4806 2 жыл бұрын

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

@nandhagopalgopalsamy1726 4 жыл бұрын

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

@Andrew24wow 4 жыл бұрын

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

@swyxTV 2 жыл бұрын

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

@PeterNixey 5 жыл бұрын

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

@NguyenDuy-mj3wh 4 жыл бұрын

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

@thihanchooo6213 4 жыл бұрын

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

@arioseno8320 5 жыл бұрын

This is really great talks. And i love his approach

@rpwarp 4 жыл бұрын

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

@xerxius5446 4 жыл бұрын

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

5 жыл бұрын

I love his designs.

@OlegYuzvik 4 жыл бұрын

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

@anasamati 4 жыл бұрын

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

@BlueprintBro 2 жыл бұрын

Brilliant talk. Learned so much from this!

@borys1142 5 жыл бұрын

Great talk, Thanks for sharing.

@jonathanbaker7136 4 жыл бұрын

Great job! Great talk!!

@NQuiz52 2 жыл бұрын

THIS IS AN EXCELLENT EDUCATION!!!

@chamugas888 4 жыл бұрын

Schoger for president haha! Thanks man ;)

@LucasBhEh 4 жыл бұрын

Great talk!! Thanks

@DouglasFigueredoNYC 4 жыл бұрын

Brilliant!

@AmandaLucaseu 5 жыл бұрын

Great content and tips Steve. Learned a lot.

@iancallaghan9987 4 жыл бұрын

This guy rocks.

@MolinaNilson 4 жыл бұрын

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 3 жыл бұрын

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

@brunohplemos 4 жыл бұрын

This is awesome.

@tarunagrawal999 4 жыл бұрын

Good content... Thanks Steve

@ZhengCheng 4 жыл бұрын

Great talk!

@VGColosseum 5 жыл бұрын

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!

@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

@ioannisme7495 4 жыл бұрын

awesome

@kevinivan91 4 жыл бұрын

i love you steve

@lewis6590 4 жыл бұрын

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

@WebConferencesAmsterdam 4 жыл бұрын

What about him?

@minhhuynh3332 3 жыл бұрын

wow this great

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

@goroh83 4 жыл бұрын

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?

@DonaDogs Жыл бұрын

Where can I find more content like this?

@WebConferencesAmsterdam Жыл бұрын

Over at www.refactoringui.com/ ?

@spencereverett2455 4 жыл бұрын

👏Hercules! 👏Hercules!

@flyinthesky3927 4 жыл бұрын

Isn't the book for designers?

@WebConferencesAmsterdam 4 жыл бұрын

What do you mean?

@flyinthesky3927 4 жыл бұрын

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

@SteveSchoger 4 жыл бұрын

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

@DavidRoyer86 3 жыл бұрын

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

@beauremus 4 жыл бұрын

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

@edforrest9826 4 жыл бұрын

It allows it for me

@beauremus 4 жыл бұрын

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

@edforrest9826 4 жыл бұрын

@@beauremus I guess so!

@WebConferencesAmsterdam 4 жыл бұрын

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

@edforrest9826 4 жыл бұрын

@@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 4 жыл бұрын

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

@neil340 4 жыл бұрын

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