Refactoring UI: Bad About
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- For this edition of Refactoring UI, we're going to redesign the Bad About topic page, sharing lots of tips on organizing content, creating a hierarchy, and improving typography.
refactoringui....
Sketch files (fonts substituted with Roboto): www.dropbox.co...
Bad About: bad-about.com/
Fonts in use: fontsinuse.com/ - แนวปฏิบัติและการใช้ชีวิต
Loved it! One small thing, I felt like the orange button with a red text didn't really fit with the rest of the design... The dark red felt a bit "awkward" to me idk
It's not red text bro. It's black/dark grey.
Agreed. I think it also made it even harder to read which was a criticism of the original orange / white button.
@@SigmundJaehn the main point there was WCAG compliance. It was broken. He fixed it.
I have no experience whatsoever in this but it is bloody fascinating and you are supremely skilled.
From a front end engineer looking to eventually transition to Unicorn status: please continue making these! Your approach and narrative is gloriously enlightening. Thank you.
Most import point here: he didn’t over-design it. Most inexperienced UI/UX designers think "improve" means add a bunch of new colors and shiny crap. Don't do it.
It all makes perfect sense. This was very insightful. Keep em coming 👍🏻
Awesome. Thanks Steve. I used to always have white background and then gray content containers before. Following you and flip it to light gray background and white containers makes a huge difference. Dropping the border around the white content and using a box-shadow as well is priceless. Thanks a lot!
Loving these, thanks Steve.
I learnt a lot more and faster in this video format than the posts on Medium. The pace is excellent and the material is sufficient. The videos give me an idea of not only why the gui was refactored but also how. Really appreciate the effort. Thanks for making this video.
I started on WordPress, learned some basic html, CSS.... PHP and CSS basics... Then I realized.. I can build it all but I don't know WHAT I should make !! This was super helpful to get some general principles. Thanks. Please make more! Don't need to cover new things every time just let us watch your process and learn.
This is the most satisfying SketchApp porn I've ever watched- hope you continue with these, I'm quite enjoying them!
The quality of this videos are top of the charts!!!
Super helpful. Lots of great ideas. I noticed in the previous design that you have the title, and then everything else kinda scattered around the outside, so they all carry the same visual priority and lack hierarchy. The new design is easy to scan and comprehend. Nice work!
What this also emphasizes to me is that it's easier to land on a great design through redesign from something suboptimal but that you can look at and reason about, then trying to design the perfect thing up front, and that's an encouragement to me to just get something down that has all the necessary pieces, and then work on perfecting it.
I can't even explain how much I love these. Thank you - can't wait for the next one. This looks so much better by the way.
I love the format of these screencasts, Steve. I think it explains very clearly the practical application of some design principles and your mental process. Thanks for sharing.
Considering how difficult UI design is Steve makes it look so easy. Something quite cathartic about watching you design. Cheers
Thanks, the video was really good, this is the first video I've seen where a great designer actually explained why they did what they did. Super helpful.
Love this series, it's insanely helpful and interesting to watch :) Thanks for putting out such quality content, Steve!
These videos are incredibly useful and satisfying to watch. Please keep producing them!
This was awesome, as a UI/UX designer who is just starting. This was extremely useful and insightful. Thank you.
This channel has the potential to blow up
Some small feedback - the white-on-gray is extremely hard to distinguish on my (totally not color correct) monitor, especially the white selection highlight on "Facts" on the left at 10:04 . Without the orange bar, I'd have no idea whatsoever that it was highlighted. May want to separate the gray/white values a little more in the future!
Damn, I am impressed! Never took UI as seriously as this but I can see the difference it makes
Subbed
Was pleased that I came across this video earlier today. I love how quick and informative this series is. Keep them coming.
Awesome thanks Steve - I pause everything to watch these.
Amazing your capabilities and point of view to change it, I'll see your rest of videos to improve my vision of development. THANKS FOR SHARE IT, regards from spain!
Really brilliant. Love the way you reason about the design decision. Thanks a lot for sharing the post!
Awesome work and a great example of how typography can be make a impact.
I get the urge to yell "move that bus!" at the end of these videos.
Great work Steve. Love your insights and the way you explain things. Keep them coming!
I really enjoyed this video. Nice work Steve!
This is a super solid format you've got here! I love seeing this kind of stuff in action and seeing the really simple, fundamental reasons why designs are effective or not. Thanks for sharing and keep it up!
Thanks man, it's super interesting to see and also hear your process and thoughts!
You are really amazing! This is really helpful for someone who is getting into UI design. Much appreciated and keep up the great work.
This was another great refactoring! Thanks for making these and showing the justification for certain things you did! Definitely learned a few things :)
You are the new Bob Ross. Amazing job.
Great work Steve, you rock! Keep up with the refactoring videos.
Your videos have helped me get into UI, I love how important the little details are. Thanks for making awesome content!
Auto subbed for the clear and concise explanations
Beautifully done. Loving these. Thanks Steve.
You've got my subscription man, I loved the WP Pusher video and this one was just as good. Awesome tips and I love the video style. I'm following your journey and hope this keeps taking off for you!
Immensely helpful. It's like black magic, but explained.
this is amazing. you pointed out so much i never knew i appreciated about good design. thanks for the explanations!
Once again a great video, Steve! Thank you for sharing this. Keep up the good work!
Best idea for a channel in TH-cam yet
Another great video! Keep going, this is really a boost to UI knowledge.
Thank you so much Steve , your tips are really helpful , i definitely had improved from what i was before start following your tips . I hope your book will be released soon
These videos help me so much, thanks Steve!
Learned so much in such a short amount of time
OK! WELL, now I need more of these videos please and thank you.
Couldn't help but laugh at your struggle with orange as a color to work with because it is so true how problematic it becomes with legibility. Really great work, Steve, and another great video in less than a month. This video series is both welcoming and attention-grabbing, keep it up!
Very interesting, would love to see more!
Great work. Looking forward to seeing more!
This was a joy to watch! Thank you.
Loving this series!! Well done 👍
Great video. Steve, you are a master at your craft. Subscribed!
Really interesting series of videos. Please keep doing them! +1
So glad I discovered this channel. Sub'd and liked. Thanks Digg!
Love this series. Great work
Good stuff! Steve! Keep it up! I love these videos
Amazing. :) Love it. Very relaxing to watch. :)
This is extremely helpful - thank you for doing this!
Pretty cool, enjoyed a lot. Thanks!
Dope! great tips extremely helpful! keep them coming!
These videos are great. You're very good! :)
Thank you Steve, this really helps!
Amazing. More of these please!
Super interesting ! Thanks a lot for sharing this
This is amazing, please please keep these up! Subbed :)
Wonderful, thanks for the series
Great job Steve! Let us know if there are other places you would recommend for learning UI design!
Holy crapppp. This is amazing!
Very helpful. Thanks Steve!
Now I get it where did hyperplexed got his inspiration from
Super solid re-design. Only thing that still feels off for me is the alignment and sizing of the voting buttons / numbers. They feel a bit too big still, and I wish they had a better fit with the text above them.
Oh man, you make it look so easy... why is it so hard for me... lol I am cursed with the programmer eye for design.... lol I love your videos...
You sound like that guy from binging with babish. Which is great because it makes me want to keep listening.
I love Babish! Thank you!
Great work Steve!
This stuff is amazing!! Thank you so much!!
Awesome video. Thanks!
Great video!
thoroughly enjoyed
nice. looking forward another videos
random dude on reddit mentioned this channel and I'm bummed to see it's only a handful of videos. Despite that you got 40k subs and a lot of views. I hope you're off YT because you're making bank as a designer, and probably it's more fulfilling than making videos. Still, these are great and will likely be relevant for years.
I think I would make the titles of each facts post bold and reduce the line height of them, as well. That’s a lot of space between the lines of text. Or perhaps make the font a point or two larger. That is the most important info on the page. I would actually also remove the new post button. You can’t make a new post without signing in, so it doesn’t even make sense to have that. If anything, it should say “Sign in to post” or something like that. Otherwise, well done.
Great video! Even though I‘m not that satisfied with the chapter titles (since I don‘t think they need to be in the group and could stand out more to fit the sidebar navigation). Still looking forward to see more videos!
Subbed. I need more of these now.
This is what Mastery looks like
While the end result is certainly an improvement, you ended up with four different button styles: New topic, Sign in + New Post, Show More, and Load More. All of them lead to an action, they look nothing alike :)
Yes, but they all have entirely different emphasis and very different use frequency. There is a purpose that all of these buttons are emphasized differently.
Sign in button: you search it only once when you really want it. You dont want it to be blatant and into-your-face in any way. So, keep it as one with the background.
New topic: It's an action more related with the website's intentions/technical uses. So, let's emphasize more on it, but not too much as the user won't want to post a new topic often.
New post: It's an action that the user may want to do more usually than the rest, so we want to make it easy for him to find out.
Show more: It's near the title, and most of the time, the user just wants to read the title. Having a very contrasty/obvious "Show more" button means that the user's eye is more attracted to the button, than the title itself. Which is annoying when it happens for the user. So we want something calming and not distracting, and something that fits with the rest of the content.
Every button's appearance serves a very important purpose and the context behind it matters very much. You dont want your content to fit your buttons' style, you want your buttons to fit your content. You dont serve the buttons, you serve the content. So make sure your priorities are right :)
What apostolis was talking about was visual hierarchy. The most important items are the most visible. Also, he ended up with the correct amount of button types, which is a maximum of 3. Primary (new post), secondary (log in) and tertiary (new topic, load more and show more). Adding visual cues like icons or underlines for affordance or clarification are thankfully not to be counted as a whole new button type. Otherwise good ux would be very hard to attain with only 3 button types and no visual cues or affordance.
Me gusto mucho como explicas cada detalle, Like! --
Thanks, Steve for these videos! As a developer, I am paying more attention to UI and your videos are helping a lot. Are you planning on also sharing videos for projects that you are building from scratch? Sometimes I get too overwhelmed by how to use the data to create a good UI. Thanks!
Love what you do!
That was fantastic!
This is fantastic. 💚
Well done! Thanks.
GG you made a bootstrap theme
I need more of these!!!
You made me get your book!
This guy is amazing.
Mind blown
God level