Refactoring UI: WSS

[@hollylovejoy5073]

I wish there were more of these videos so I could spend all day binge watching them. Amazing work.

[@mollylentz9422]

I feel the same way!!!

[@tokqgfx3360]

Agreed, I've rarely found someone with videos this interesting.

[@mju135]

Tabs that link to fixed scroll points! May god have mercy on the soul of whoever came up with that abomination.

[@wideeyedali]

Whenever I get stuck on a design problem, I catch myself going "what would Steve Schoger do?" So much wisdom packed into these videos!

[@enotirab]

The more I watch these videos the more I am convinced you're a wizard! Awesome stuff.

[@borsaniasushant1]

You teaches more in half an hour than any (most) design tutorials I been there in last year. Thank you.

[@AvereeChaloupka]

I love these videos so much. Watch them as soon as they're up. I personally love how you explain why something doesn't work, or when you have one of those "we could do this option, but that would introduce this problem that wasn't there before". Definitely have the brain for something like this. Keep up the good work!

[@pepper-wood1289]

I'm only 5min in, and it's absolutely phenomenal how many seemingly little changes you do really condense the information. Like putting the icons in the slightly transparent circles is such a massive difference.

[@TonyCassara]

As a front end engineer I love watching your videos. You have a great perspective on user experience that translates well to your designs. Wish every designer was like this!

[@JoelPiccoli]

Much more cleaner and easy to navigate! Congratulations Steve!!

[@wuelbercastillo4367]

The hint to point out that a table is horizontally scrollable in mobile is just next level, thanks Steve, this is so pro

[@kurtfattig9370]

That is some nice work. You completely de-kludged that site. I like how you mention about the licensing regarding fonts and icons. The addition of the mobile/responsive treatment really helped. It's great to see how you go about your work and reason through these issues and apply really good visual design and logical principles to refactor these UI's.

[@gonzalochristobal]

Mind blowing how easy you make this look, incredible job

[@ASadTeddyBear]

I know I will never use these skills in my life yet I this find series so entrancing. Keep it up!

[@josecage]

You are awesome. Congratulations for your great job.

[@red_cape.]

Man you are amazing!!! This is better than TV. I think you should get your own show like those ones that the guys flip a house or something. Or maybe the internet provides all things necessary. Dude, Great job!

[@meeraramachandra]

Great channel, so glad to have bumped into it from a suggestion on Designers Guild (facebook group)! Please keep up the great work you're doing! I'd love to see more of your process of recreating UIs in sketch, and how you go about mimicking the exact style :) thanks a ton!

[@karamanliev]

I love your videos, watching how a bad UI transforms to something modern is oddly satisfying. It soothes me so much, I'm looking forward to seeing more videos from you!

[@burakd.2139]

Great and extremely informative for anyone starting out and learning the thought process behind designing a ui. Thank you.

[@1877theflip]

The solution at 9:00 was amazing. I couldn't think of how to approach that.

[@michellemills197]

This is fabulous! I really would like to see your preparation before you begin designing. Maybe you can make a video chatting about conversations you have with your clients. You seem to really understand the content of every page.

[@Maheurt]

Woaw this is so weird I worked at the company that made this website. Your design is so much better :D

[@aliselcuk7005]

that's called craftsmanship! excellent presentation Steve

[@UXDesign]

Excellent video Steve, it’s like a higher level tutorial than getting into the nuts and bolts of every change. Definitely needs that fade to imply the horizontal scroll on mobile, a tricky problem to solve that!

[@GamingNinjaSheep]

This is always so interesting to watch. You explain everything you do in such clear detail and even describe why you do it, keep it up! Would be interesting to hear your thoughts on designing KZbin and Twitch channels where your creativity can be limited by the standard design set in place.

[@vm-dev]

Really practical, easy to understand, outstanding! Keep on giving us more! :)

[@jerryg.8767]

Great stuff as usual!!

[@nourdined.9616]

These are the most useful design videos ever, keep on Steve

[@fatal510]

"Room to breathe" is becoming your catch phrase.

[@jacobcole1271]

These videos are always really well done. Keep up the good work!

[@powrslave]

sorry that red image backgrnd looks like murder college

[@ChristianGenco]

This is the best channel on KZbin

[@hackafro1271]

I look forward to these videos. You're doing great

[@AndrewGray-natreve]

You're really good at what you do, Great work man.

[@cecilelebleu5984]

These videos are awesome! I personally don't love the red tint, but that's just such a small detail it doesn't really matter!

[@diegoorellana5706]

Awesome as always. Nice approach for tables on mobiles 💪

[@bm2ilabs]

i don't think you should use the term "compare" because its incomparable , astonishing, Thank you so much Sir for this insight in how to do things in better way . i never used sketch before and this days i only work on it so easy and clear to work with to have good sense in what you and do it fast while the idea's are fresh and clear. i don't think i could thank you enough

[@crysfelvilla3655]

Rom to breathe! A valuable lesson I've learn from you, thanks Steve!

[@saptarshic]

I enjoy these videos so much! Thank you.

[@claudrocker]

Great job! I really like your explanation. (Front end dev here)

[@Nervecell]

amazing content ive been looking for videos like this!

[@rayfront7390]

Loving all your videos, you are awesome!

[@TheShoxter]

Awesome video Steve! Great to watch this with a morning cup of coffee. I think going with a horizontally scrolling table on mobile could potentially have some issues, because trying to scroll sideways on a mobile device is nearly impossible to do without accidentally scrolling vertically at the same time and leads to some awkward user interactions. That being said, great video with wonderful tips!

[@maker_aleks]

Awesome content! Thanks for sharing! 🙌

[@ankurbhatt007]

Thanks, Steve for this video.

[@DougLopes]

I am really loving this series...a little thing i'll add to de redesign is grab some more attention to the CTA buttons ( Select Plan ) maybe with the blue or orange from the brand.

[@elis2781]

Why are you so good! Thank you!

[@TheChillBison]

Such a good redesign! One thing I think is still lacking would be toggle-able help text given that many of these insurance terms are nuanced and may not mean what the user thinks they mean, or being students may never have heard of things like "coinsurance" and so question mark icons or other affordances to explain what the titles mean would probably be needed in a production design.

[@reemtos]

Your pronunciation of "eh" at 13:52 has me laughing hard. Great job by the way!

[@questreal5812]

sameeee lmao

[@RasmusSchultz]

Just wondering, the labels you erased from the table weren't actually identical - for example, you had "major restorative" in one column and ended up removing "extractions and major surgery". Seems like some information was lost in the process, but presumably you talked to the client and they agreed to this? Also, maybe just personal preference, but the red tint on the photo was a bit horror movie murdery for my taste 🔪😅 Again though, I would have scrapped that design and started over, but you totally rescued it and made it look super pro 😁👍

[@SteveSchoger]

TBH I may have accidentally made a few mistakes when retyping some of the content. Good eye!

[@RasmusSchultz]

Steve Schoger ah, so the table content in the original did have repeated text in those columns! Gotcha 😊 I watch these videos 2-3 times and rewind a lot, so nothing gets past me 😉

[@knuppelwuppel]

Agree on the header background. Too spooky for me, other than that. Great! thank you

[@WyzrdCat]

The red definitely gives a "remembering a school massacre" vibe, espeically with the flowers. other than that good job :P

[@Dr_Pickle]

That banner is terrible. Blood red covering a School ground... Was there a massacre?

[@tanh8285]

Looks like a blood moon to me lol

[@ghostpearl8301]

I love everything except I'm not a huge fan of the red. Otherwise, STUNNING! You are so talented! I learn so much from your videos!

[@Mattheus94]

Steve, love your videos buddy.

[@SteveSchoger]

Thanks, Matthew!

[@travis940]

Great job! I love your videos!

[@skylandmedianl]

Thanks for sharing, nice job!

[@pleasuredunes]

Great video demonstration and tutorial (your whole series). I think my only real issue would be with the hero banner - that apocalyptic red overlay is too overwhelming in my opinion, even if it does happen to make use of brand colors. Color psychology could be interesting to consider in this example. The tone of red and the overlay kind of makes me think of blood, which is amusing since the business is a provider of health benefits for students.

[@elephant742]

Great videos. Just wanted to know , what is that software that let's you watch the mobile version of the website ? It's shown at 13:05 in the video.

[@leuchtelicht]

Another great episode, Steve! The only thing I don't like is the red tinted background. But other than that it's really awesome and MUCH easier to navigate. I also got a question: Does good design come automatically if the design has a good user experience?

[@havanejp]

such a great channel! what is the multi-device you're using at 12:53?

[@sergioescalante8066]

Is the responsive design mode in safari! thesweetsetup.com/use-responsive-design-mode-safari/

[@mahpikena]

This video is amazing! Thank you for sharing! :) Which tool are you using to check responsiveness?

[@chadandcalebsadventures4950]

What program were you using to do that stuff, that looks awesome. I am in school for HTML/CSS right now and that program would be extremely useful.

[@DesignerMehedi]

12:53 can anyone please tell me which sites he is using to check see the responsive design of other websites.

[@CharlesALacroix]

Amazing. Once again.

[@juoen]

It's great ! Thank's !

[@cram.design]

Once again, fantastic and educational. I would subscribe twice if I could.

[@davidvuong]

Great video is always! Curious how you go about producing sketch versions of websites. Is there a tool you use to autogenerate it or is it all done by hand? P.S. I'd love to see episodes on refactoring mobile app UIs

[@SteveSchoger]

No fancy tools. Recreate designs in Sketch from hand :) I'm going to try to focus more on responsive solutions in future episodes. I don't get a lot of submissions for mobile apps tbh.

[@davidvuong]

Impressive. I can see why each video takes so much time! I have a few mobile apps I'm working on/off ATM with not so great UI, perhaps I could submit them one day to get the ball rollin'. Anyway, I look forward to future videos :D

[@tykill]

13:44 Can you or anyone else pinpoint why you like the standard desktop website more over a mobile version? I'm really curious

[@justkailash]

Thank you very very much for sharing these tips . . honestly i am fed-up with my design skill . . i tried a lot to improve my design but i am not getting where i am doing wrong . . i was searching for these kind of tutorial which is focused on the tricks . . all the tutorial i found they all said basic (yes important) like use nagtive space .. well alignment etc. . but still i am not getting good result from myself . . but this video made me think again and i got few points what wrong with me. but i am not sure that these is the actual answer of my question . . that will be very thankful to you if you can give me some time (personally) ?? so that i can ask you few things and share some of my design to get feedback . . do you use slack workspace?

[@mikeynma]

There are two channels I look forward to releasing new vids...Honest Trailers and yours! /me settles in with a coffee for some knowledge bombs

[@chrishampshire]

Like the binging with babish of design

[@scottstewart9660]

So good!

[@timc5347]

Loving these vids!!! It's unfortunate that the brand colour is red, as I don't think the colourised header image works very well.

[@drrrw]

what's the software that you use? May I ask.

[@dipenparmar2273]

Enjoyed lot.

[@SyanArtStation]

Finally I found something that I'm not agreed with. Right at the beginning when you decided to tint RED and black the background image. I find It a bad choice for "school" context as RED is easily associated with blood, hospital, hardcore, even vampires. Also just to match the logo preference I'd go with an orange or blue. But that's it. I mean.. this is the only tiny little detail I could say against your whole redesign, and it's not even a major issue. great work!

[@oels9507]

Yeah, it looks like Umbrella Corp. Someone I definitely don`t want messing with my health.

[@priscillaknight4678]

Wow! You did surgery! Awesome!

[@LeFru]

Hey Steve, what are the top sketch plugins in your toolkit?

[@liamelliott3779]

Hey I went to Fanshawe!

[@srezas3580]

What is the application you are using?

[@Pedantic_Pete]

Weird to see a video about a site I used, for a school I took web design at. I guess that's full circle

[@sin.pottery]

How can I get the initial files?

[@monkeysgone2heaven1]

FYI - the image in the codepen that you linked is broken

[@wendellkwang3724]

love your videos man, but one thing; the red overlay on the school image looks a bit scary. Especially when it is showing the college name, it feels like I am playing a horror game. That's the impression I thought when I visit the website for the first time. What do you think?

[@Wruczek]

Notification squad! 🔔 Thanks for your work Steve PS. What's the background music name?

[@SteveSchoger]

Thanks for asking. It's an original track I produced. Music production is another hobby of mine 😁

[@francismori7]

Music and hamburgers

[@Wruczek]

Thanks for replying! You are doing great stuff.

[@mosquitlo]

It adds nice "How it's made" kind of vibe to the video.

[@BrianClay]

Why do you wait until the end to change the fonts? Wouldn't it save you a lot of time to select the font at the start?

[@SteveSchoger]

From a viewers point of view, I think the font change has higher impact when its updated with the final version of the design.

[@DesignerMehedi]

Please start uploading this type of video again.

[@la_lumiere7571]

Awesome! But that darkred color... Why

[@sheikhadnan4074]

Is he doing frontend? waht software is he using?

[@irbazahmed]

What's the background music you use in all you videos?

[@SteveSchoger]

Original composition I made for the screencast :)

[@irbazahmed]

Steve Schoger it's very nice :)

[@pelegred6123]

Yeah boiii

[@maximoprincipe3859]

Can you tell me what program you use to edit the web page? psdt: I'm new to this

[@SteveSchoger]

Sketch. It's a graphical editing software.

[@mottosson]

I love these videos! In this one the table design was definitely an improvement, but I think the page lost a lot of it's playfulness and became quite boring tbh.

[@philipps258]

I was about to comment the same :/ Although i really liked the work going on! But this reddish header now looks like it's a school from hell

[@sham3k]

Had been waiting for this forever. Any chances of a weekly Refactoring UI? ❤️

[@SteveSchoger]

Ha! I wish! These take waaayyy too long to produce to get them out weekly. Plus, I can only produce them in the evenings/weekends. Sorry :(

[@leuchtelicht]

I'm sure that if you give it some time and keep posting, you can make a living from it! The channel has already grown so fast, it's insane! And it provides a massive amount of value.

[@Sohrabziagoogle]

Great job but that red image is not going well with that logo. Maybe black filter with opacity would work on image.

[@rizkywahyu9256]

How to make a page in web can edits in sketch or adobe xd?

[@vivavillain]

Lmao Murder University. Another slaaaaap refactor from the kid 🎯🎯

[@Ralphunreal]

Can you make some videos designing from scratch?

[@joshuajaydan]

twitter.com/steveschoger

[@herrDOS]

That exact moment when you want to like twice

[@benhidamohamed9943]

Check the Refactoring of WSS using tailwindcss : github.com/simoebenhida/WeSpeakStudent-Redesign-SteveSchoger