I Redesigned Popular Websites (Quora & Steam)

#webdevelopment #webdesign #css

Attempting to redesign some popular websites. Part 2 includes Quora and Steam.

Watch the shorts here:

See the code here:

Music Credits:

Daze - StreamBeats - Lofi - Harris Heller

[Hyperplexed]

I'd highly recommend Font Awesome to anyone looking for a massive library of high quality icons. They're having a limited time sale of $20 off their Pro membership right now, definitely check them out and if you use my referral link you'll be supporting the channel too!

[cparker]

I feel like taking ALL of the blue out and replacing ALL of it with black just turned the final design into something pretty generic-looking. There's a reason that websites pick color schemes, brand recognition is important when designing a website.

[ade]

Not a designer myself, but I'm loving this roasting x website format. It's nice to see how apps i use every day could be improved in UI side, also educational :D

[theyoungestyoungling]

I wish you kept the blue theme a bit more prominent in the steam redesign, however I do think these are huge improvements overall.
Great video 10/10

[mustard_bread]

I need MORE. It is just so relaxing to watch him do it. It also helps to see your design choice as I am in a website building class through HTML, JS, and CCS.

[kevinj]

u basically turned steam into epic store congrats

[omersabic]

I love that you're looking at feedback and responding to it. Really love the series and appreciate the videos!
Best of luck man, doesn't look like you need it though ;)

[theneilpowers]

I love what you’re doing, so I’d like to add some feedback on the steam redesign.

Moving the price tags under the game title doesn’t make much sense to me. When I browse steam, one of the first things I look at is the price, so having it pop out somewhere on the right is very helpful. What you did looks good, but doesn’t make growing any easier.

Also, the images behind the originally blue tabs makes the page seem quite cluttered. I’d prefer something simpler.

[GabeBeyruti]

I love this. As a UX/UI designer this is great for inspiration, learning, and seeing what types of designs you would choose for these websites

[malwareinc]

Cybermonk 2099 is my new favorite game.

[celestialcolosseum]

Having watched 2 of these redesign videos, i have to say it reminds me of why all the new website/app interface designs feel so soulless and doesn't carry anything in the name of brand recognition. You always pick the safest route of simplicity and basic colors that work with anything, cool for a single redesign but a flaw when you reuse it everywhere. UX has also been affected by the redesigns as well, such as moving the hamburger menu into different places and changing the search bar placing on steam, it doesn't really make sense to have a search bar under some content rather than having it in the upper bar that always stays there even when you scroll down. Changing the aspect ratio of the steam game thumbnails is impossible since it has been that way for more than a decade and not everyone will update that. It would have bern better to work what you had in your hand instead of completely creating a new design that doesn't have the usability and UX of the original design.

[tanishqdaiya]

He's good, but I don't agree with most of his choices. Because he almost always removes the brand identity and makes it look generic and corporate.

[joaobonsegno]

5:12 I DEFINITELY agree that it was necessary to find another button for adding new content, but the Plus icon might confuse users, making them think that it is to add more options to the sidebar, instead of creating a new post. I'd go with the square and pencil icon that Apple usually uses in those cases, which suits much better the idea of creating a post IMO.

But other than that, amazing designs 🙂

[keokawasaki]

as much as i'm enjoying these roasting videos, i would prefer if you keep practicality in mind when redesigning. if that's too much work tho, i personally am cash money with the direction you are going!
+1 for "basic 2.0"
+1 for "fifty shades of blue"
lmao

[hman]

That redesign took all the character out of the original design

[Issvor]

I pretty much completely agree with the Quora redesign, but the Steam redesign is just way too bland; I would love to see more color. While I really like the hero section, Steam's original version makes more sense given that the user can instantly see that it's swipe-able due to partly seeing the next title. With yours, it's not apparent that there's anything else there other than the singular title, "Cyberpunk". I actually really enjoy steam's color palette for the most part, but I do agree that the blue gradient buttons "new releases", "specials" are a bit too much. However, I disagree with the new ones you picked out, mainly because the pictures have no correlation with the subject. I'm sure there's a way to make it work, but I'm not seeing it right now. The tabs vs tag chips works either way. I think Steam's works the way it is, but definitely like the tag chips based on your entire redesign. As for the pictures of the games, yeah that's a bit difficult. On desktop, it looks much better because there's no padding above/below the title, and my guess is that they just couldn't make the same look on mobile due to the limited real estate. Your redesign would definitely fix that problem as they can simply increase the image while still looking slick. And lastly, I 100% agree with the search bar redesign. Their current one is just awful and cramped.

Ultimately, good video. Really enjoying these redesigns you've been doing lately.

[gizmotheking]

Really calming. I really like this! Great job on the extended format, I feel this will be a hit!

[IslaTheCutie]

I actually like Steam web interface, it feels unique and consistent.

[Goodgu]

This is such a phenomenal series! I've been learning webdev and the biggest problem hasn't been the coding, but my complete and utter lack of styling. I can make things function, but they look like crap. Having the before, after, and and explanation of the decisions you made and the process you go through is by FAR the best way of learning styling choices. I wish there were more channels that did this type of redesign demonstrations.

Hover effect on your Steam redesign? ... You do realize it's MOBILE right, and you do realize mobile doesn't have a mouse cursor right