Watch this interface designer change a bad website design into a good one


Originally published at:


What program is he using to change the HTML like that?


The app is called Sketch and it is a very good, affordable tool. It’s mostly vector based and can use raster images as well. Best of all it’s not owned by Adobe yet.


The “IMPORTANT” and “CORRECT” counters still take up too much horizontal space… they should be stacked vertically IMO.


“More cleaner” — ugh


“Bad” and “Good” are so subjective in this instance. Good = today’s style, Bad = a few year’s ago style. Go back in time a few years and the “good” version would look alien at best.


Start and end both take up wayyyy more space than necessary.


I agree. But making a big deal about “IMPORTANT” and “CORRECT” is a mistaken venture in the first place. There’s redundancy: anything that is “Important” will necessarily be Correct. It’s basically just a Like (or Reddit upvote) button. No way that it should take up the inordinate amount of space that it does here. I’m surprised this wasn’t the first thing Mr. Refactoring refactored.


To me the biggest change seems to be in the numbers, eg fewer people think that Apple charge too much in the “after” than did in the before.

That, and the font is now too small to be comfortable for my aging eyes, but I’m used to that in web design, which all tends to be done by pre-presbyopics.

(My professional website is nearly flat, hasn’t changed much in decades, and is one of the things for which I get the strongest positive feedback from my students.)


Needs to work on his commentary. Tends to swallow words and gabble - makes the listener work hard to follow him. Distracts (and detracts) from his demonstration.


I get a odd 90’s vaporwave alt-universe Excite feel from the first, and a “this might be a pretty good site” vibe from the second.

This was a swell run though, and lots of lessons to be learned here.


I cannot like this comment a million times. All web designers (and app programmers too) need to be forced to have their vision decorrected before they are allowed to touch any websites anywhere ever.


I was thinking the same thing, but it does make sense that your eye would scan down as if they were columnar data. I kept waiting for him to give a bit more vertical space between the post title and username line. Anyone else?

Overall though, really confident and restrained choices, pushing focus where intended. Reminds me of the time I owned an ugly tract house and asked the painter to make the window frames and trim the same as the wall color. He was all, “Whaaa?” All the other houses around had their clunky details picked out in high contrast colors — lipstick on pigs. Within a year, half the neighborhood was dressed in modest colors, low contrast details, and looking a lot nicer, IIDSSM.


Does anyone else find the “before” much easier to read than the “after”?


That’s sort of the idea. Styles change, and your site has to change with it or it starts to look stale. Eventually, this new style will start to look stale, and will be revamped once again, with new design elements and features that align to what users will have come to expect by that point in the future. It’s the nature of the design beast. Failing to keep up means you’ll end up failing to engage the readers as whats old hat essentially becomes invisible. Like the furniture in your house, so familiar that you don’t even notice it anymore.


I will argue bad and good can also be timeless.

Good wil always be: simple, clean, intuitive
Bad will always be: cluttered, convoluted, disfunctional.


Great channel, great video. As a software developer, who is sometimes unintentionally thrust into the design space with absolutely no background in it, stuff like this is very helpful.


Can he address the non-/blog version of bb? And let’s face it, /blog is just less bad.


It looks like they enjoy the low contrast smaller type style that is making the web less accessible with each passing year. No thanks.


I had to stop after the ninth time he said ‘room to breathe.’