Refactoring UI: WSS
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- For this edition of Refactoring UI, we're going to redesign WSS's plan details page, sharing lots of tips on hierarchy, table design and scannability.
📬 Updates/Submissions: refactoringui....
🔥 Design tips: / steveschoger
👨🏻🎨 Sketch files: www.dropbox.co...
👨🏼🔬 Multiply blending mode CodePen: codepen.io/ssc...
🎨 Sip (color picking app): sipapp.io/
👀 Icon sets:
Heroicons UI: github.com/ssc...
Zondicons: www.zondicons.com/
Entypo: www.entypo.com/
😍 Inspiration:
www.shopify.ca...
slack.com/pricing
Tabs that link to fixed scroll points! May god have mercy on the soul of whoever came up with that abomination.
I wish there were more of these videos so I could spend all day binge watching them. Amazing work.
I feel the same way!!!
Agreed, I've rarely found someone with videos this interesting.
Whenever I get stuck on a design problem, I catch myself going "what would Steve Schoger do?" So much wisdom packed into these videos!
The hint to point out that a table is horizontally scrollable in mobile is just next level, thanks Steve, this is so pro
You are awesome. Congratulations for your great job.
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.
The more I watch these videos the more I am convinced you're a wizard! Awesome stuff.
"Room to breathe" is becoming your catch phrase.
The solution at 9:00 was amazing. I couldn't think of how to approach that.
You teaches more in half an hour than any (most) design tutorials I been there in last year. Thank you.
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!
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!
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!
Woaw this is so weird I worked at the company that made this website. Your design is so much better :D
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.
sorry that red image backgrnd looks like murder college
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!
Yeah, it looks like Umbrella Corp. Someone I definitely don`t want messing with my health.
Much more cleaner and easy to navigate! Congratulations Steve!!
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.
I know I will never use these skills in my life yet I this find series so entrancing. Keep it up!
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!
Mind blowing how easy you make this look, incredible job
Great and extremely informative for anyone starting out and learning the thought process behind designing a ui. Thank you.
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!
Great stuff as usual!!
that's called craftsmanship! excellent presentation Steve
The red definitely gives a "remembering a school massacre" vibe, espeically with the flowers. other than that good job :P
Really practical, easy to understand, outstanding! Keep on giving us more! :)
This is the best channel on TH-cam
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!
These are the most useful design videos ever, keep on Steve
Great job! I really like your explanation. (Front end dev here)
Rom to breathe! A valuable lesson I've learn from you, thanks Steve!
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 TH-cam and Twitch channels where your creativity can be limited by the standard design set in place.
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!
I look forward to these videos. You're doing great
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
Awesome as always. Nice approach for tables on mobiles 💪
You're really good at what you do, Great work man.
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 😁👍
TBH I may have accidentally made a few mistakes when retyping some of the content. Good eye!
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 😉
Agree on the header background. Too spooky for me, other than that. Great! thank you
These videos are always really well done. Keep up the good work!
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.
Awesome content! Thanks for sharing! 🙌
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!
amazing content ive been looking for videos like this!
I enjoy these videos so much! Thank you.
Loving all your videos, you are awesome!
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.
Thanks, Steve for this video.
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!
Thanks for sharing, nice job!
Why are you so good! Thank you!
Your pronunciation of "eh" at 13:52 has me laughing hard. Great job by the way!
sameeee lmao
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.
Great job! I love your videos!
Once again, fantastic and educational. I would subscribe twice if I could.
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
Steve, love your videos buddy.
Thanks, Matthew!
Like the binging with babish of design
Wow! You did surgery! Awesome!
Amazing. Once again.
Enjoyed lot.
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?
So good!
It's great ! Thank's !
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.
That banner is terrible. Blood red covering a School ground... Was there a massacre?
Looks like a blood moon to me lol
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.
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
Loving these vids!!! It's unfortunate that the brand colour is red, as I don't think the colourised header image works very well.
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?
Please start uploading this type of video again.
Yeah boiii
Hey I went to Fanshawe!
Weird to see a video about a site I used, for a school I took web design at. I guess that's full circle
Had been waiting for this forever. Any chances of a weekly Refactoring UI? ❤️
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 :(
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.
Lmao Murder University.
Another slaaaaap refactor from the kid 🎯🎯
Great job but that red image is not going well with that logo. Maybe black filter with opacity would work on image.
FYI - the image in the codepen that you linked is broken
This video is amazing! Thank you for sharing! :) Which tool are you using to check responsiveness?
Awesome! But that darkred color... Why
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?
Check the Refactoring of WSS using tailwindcss : github.com/simoebenhida/WeSpeakStudent-Redesign-SteveSchoger
Notification squad! 🔔
Thanks for your work Steve
PS. What's the background music name?
Thanks for asking. It's an original track I produced. Music production is another hobby of mine 😁
Music and hamburgers
Thanks for replying! You are doing great stuff.
It adds nice "How it's made" kind of vibe to the video.
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
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.
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
Can you make some videos designing from scratch?
such a great channel! what is the multi-device you're using at 12:53?
Is the responsive design mode in safari! thesweetsetup.com/use-responsive-design-mode-safari/
That exact moment when you want to like twice
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.
12:53 can anyone please tell me which sites he is using to check see the responsive design of other websites.
13:44 Can you or anyone else pinpoint why you like the standard desktop website more over a mobile version? I'm really curious
I love the video but does anyone else feel like the new version feels a little bit too clinical / SASS -like? (mainly the table)
twitter.com/steveschoger
Is he doing frontend? waht software is he using?
Hey Steve, what are the top sketch plugins in your toolkit?
How to make a page in web can edits in sketch or adobe xd?
what's the software that you use? May I ask.
It's funny how several pages of the original design could have been condensed to roughly one page :J
The only problem I have with this redesign is that it looks much more dull. The original one looked more cheerful and creative.
How can I get the initial files?
What is the application you are using?
The ordering of some of the item was fucked up by the way, there were percentages and dollars in the same line.