Steve Schoger | Refactoring UI | CSS Day 2019

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ธ.ค. 2024

ความคิดเห็น •

  • @luniousm3246
    @luniousm3246 5 ปีที่แล้ว +86

    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.

  • @designisvoice
    @designisvoice 5 ปีที่แล้ว +26

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

  • @nikosc
    @nikosc 5 ปีที่แล้ว +28

    He makes it look so easy....

  • @DmitrySharabin
    @DmitrySharabin 5 ปีที่แล้ว +29

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

  • @swyxTV
    @swyxTV 2 ปีที่แล้ว

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

  • @eliodrallag4806
    @eliodrallag4806 3 ปีที่แล้ว +3

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

  • @DanTuber
    @DanTuber 5 ปีที่แล้ว +4

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

  • @bradfranklin-j66co
    @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

  • @mosesnandi
    @mosesnandi 3 ปีที่แล้ว +4

    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.

  • @xerxius5446
    @xerxius5446 4 ปีที่แล้ว +1

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

  • @Andrew24wow
    @Andrew24wow 4 ปีที่แล้ว +2

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

  • @MolinaNilson
    @MolinaNilson 4 ปีที่แล้ว +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
      @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

  • @nandhagopalgopalsamy1726
    @nandhagopalgopalsamy1726 5 ปีที่แล้ว +1

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

  •  5 ปีที่แล้ว +6

    I love his designs.

  • @rpwarp
    @rpwarp 5 ปีที่แล้ว +1

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

  • @VGColosseum
    @VGColosseum 5 ปีที่แล้ว +1

    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!

  • @NQuiz52
    @NQuiz52 3 ปีที่แล้ว

    THIS IS AN EXCELLENT EDUCATION!!!

  • @PeterNixey
    @PeterNixey 5 ปีที่แล้ว +2

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

  • @NguyenDuy-mj3wh
    @NguyenDuy-mj3wh 5 ปีที่แล้ว +1

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

  • @mikegleeson4670
    @mikegleeson4670 2 ปีที่แล้ว

    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.

  • @anasamati
    @anasamati 5 ปีที่แล้ว +1

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

  • @BlueprintBro
    @BlueprintBro 3 ปีที่แล้ว

    Brilliant talk. Learned so much from this!

  • @goroh83
    @goroh83 5 ปีที่แล้ว

    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?

  • @OlegYuzvik
    @OlegYuzvik 5 ปีที่แล้ว +1

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

  • @thihanchooo6213
    @thihanchooo6213 5 ปีที่แล้ว +1

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

  • @surprisingstuff
    @surprisingstuff 5 ปีที่แล้ว +2

    This guy rocks.

  • @lewis6590
    @lewis6590 5 ปีที่แล้ว

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

  • @AmandaLucaseu
    @AmandaLucaseu 5 ปีที่แล้ว +6

    Great content and tips Steve. Learned a lot.

  • @arioseno8320
    @arioseno8320 5 ปีที่แล้ว +2

    This is really great talks. And i love his approach

  • @chamugas888
    @chamugas888 5 ปีที่แล้ว +1

    Schoger for president haha! Thanks man ;)

  • @jonathanbaker7136
    @jonathanbaker7136 5 ปีที่แล้ว +1

    Great job! Great talk!!

  • @LucasBhEh
    @LucasBhEh 5 ปีที่แล้ว +1

    Great talk!! Thanks

  • @DonaDogs
    @DonaDogs ปีที่แล้ว

    Where can I find more content like this?

  • @borys1142
    @borys1142 5 ปีที่แล้ว +1

    Great talk, Thanks for sharing.

  • @tarunagrawal999
    @tarunagrawal999 5 ปีที่แล้ว +1

    Good content... Thanks Steve

  • @DouglasFigueredoNYC
    @DouglasFigueredoNYC 5 ปีที่แล้ว +1

    Brilliant!

  • @ZhengCheng
    @ZhengCheng 4 ปีที่แล้ว

    Great talk!

  • @brunohplemos
    @brunohplemos 5 ปีที่แล้ว +1

    This is awesome.

  • @ioannisme7495
    @ioannisme7495 5 ปีที่แล้ว +1

    awesome

  • @minhhuynh3332
    @minhhuynh3332 3 ปีที่แล้ว

    wow this great

  • @flyinthesky3927
    @flyinthesky3927 5 ปีที่แล้ว

    Isn't the book for designers?

    • @WebConferencesAmsterdam
      @WebConferencesAmsterdam  5 ปีที่แล้ว

      What do you mean?

    • @flyinthesky3927
      @flyinthesky3927 5 ปีที่แล้ว

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

    • @SteveSchoger
      @SteveSchoger 5 ปีที่แล้ว +2

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

  • @kevinivan91
    @kevinivan91 5 ปีที่แล้ว +1

    i love you steve

  • @spencereverett2455
    @spencereverett2455 5 ปีที่แล้ว

    👏Hercules! 👏Hercules!

  • @beauremus
    @beauremus 5 ปีที่แล้ว

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

    • @edforrest9826
      @edforrest9826 5 ปีที่แล้ว +2

      It allows it for me

    • @beauremus
      @beauremus 5 ปีที่แล้ว

      @@edforrest9826 same for me now. Maybe TH-cam being weird?

    • @edforrest9826
      @edforrest9826 5 ปีที่แล้ว

      @@beauremus I guess so!

    • @WebConferencesAmsterdam
      @WebConferencesAmsterdam  5 ปีที่แล้ว +2

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

    • @edforrest9826
      @edforrest9826 5 ปีที่แล้ว

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

  • @DavidRoyer86
    @DavidRoyer86 3 ปีที่แล้ว

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

  • @USONOFAV
    @USONOFAV 4 ปีที่แล้ว

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

    • @writersnoise
      @writersnoise 4 หลายเดือนก่อน

      Yes but it passes the yellow button itself to the white background plus high contrast is harder to read on the eye

  • @neil340
    @neil340 5 ปีที่แล้ว

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