Refactoring UI: Bad About

225K views · 8 years ago · tutorial · evergreen

A screencast from the Refactoring UI series by Steve Schoger, who takes a weak page design and improves it step by step. He shows practical changes to spacing, hierarchy and styling that make an interface look better.

HN points developers who cannot make a good-looking interface to it as the quickest way to pick up UI design skills they can apply right away.

“You can immediately learn a lot from the "Refactoring UI" series”

4 comments from Hacker News

w
@wonger_2024 · in “Ask HN: I cannot make a decent looking GUI from scratch. How do I learn?”
You can immediately learn a lot from the "Refactoring UI" series: ▶ this video These tips seem good too: link A lot of UI design is about spacing elements properly and consistently. Humans subconsciously notice when spacing is off. This video does a decent job showing examples: link Here's a good tool for making spacing and sizing scales in CSS: link link will show you the right CSS for common web layouts. They have a few free examples. Try practicing by coding some single page HTML/CSS experiments, or sketching some wireframes, or redesigning someone else's webpage. Use color palette generators unless you want to study color theory. Use other people's design systems if you want to ship something instead of just practice. Material Design, Pico CSS, component libraries, whatever looks good with minimal fuss.
RecommendsView on HN
s
@spartanatreyu2018 · in “Show HN: I built an open source event-management system”
I suggest the OP watch this as an example of improving UI, "Refactoring UI: Bad About": ▶ this video
RecommendsView on HN
p
@preinheimer2018 · in “Video: Watch a site's UI get refactored”
Submitted the video to Hacker News.
RecommendsView on HN
d
@demircancelebi2018 · in “Refactoring UI Screencast: Bad About”
Submitted the video to Hacker News.
RecommendsView on HN