I Redesigned Popular Websites (Quora & Steam)

[@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! Link: fontawesome.com/referral?a=755e5ceb4c

[@Kat21]

what if i just _don't_ pay for font awesome

[@jeffrbake]

@@Kat21 the free version is nice, but the pro version is very useful. Don't bother with pirated copies though. A multi thousand dollar lawsuit isn't worth saving $20 in the professional world.

[@Kat21]

@@jeffrbake ah ok

[@chrizzzly_hh]

From a designers perspective: nice. From a sales perspective: make it pop again! No really. The design changes are great from a customer centric perspective. But those won’t sell - especially minimizing the call to action. Nevertheless great work

[@stevensu6699]

I want to get started with front end developemnt but idk where to start. Any tips?

[@cparker7992]

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.

[@Likeusb1]

Hm yes I do indeed love the awfulness of the steam colours so much that I'll keep them.

[@xcalium9346]

@@Likeusb1 Literally just pick one shade of dark blue and use that. It's not monochrome or nothing.

[@YaBoiiMarz]

True but the fact he makes them less cluttered and imo easier to use wins out for me. I mean I love steam and have been using it since 2011 but I mean I still struggle to find what I'm looking for on most occasions.

[@Anthony-qg5hj]

also the next game showing in the right corner makes users scroll more often

[@DaviAreias]

I was gonna say the same ☹️, this is why marketing has to come before design

[@samdabeast3186]

this is so satisfying for no reason

[@LeonardoOliveira-ko1rf]

It’s amazing

[@HereComesThe-Sun]

exactly

[@thebaconbreadful]

for no reason? lol

[@reevanthlama5278]

Istg

[@_invencible_]

i think it's the awesome editting

[@ade5324]

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

[@tempest3327]

Yes keep making more of this type vids

[@0xC4aE1e5]

me too

[@theyoungestyoungling1338]

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

[@TheFrok]

Exactly, I feel the "50 shades of blue" is integral to the steam store feel

[@ismaelmohamed4015]

Yh I think he should've gone with a really dark blue

[@autisticwitch7581]

Exactly, keeps it from looking like every other dark themed site.

[@anon_acc]

@@autisticwitch7581 exactly

[@mndlessdrwer]

Theming is easy enough to do, but the overall format changes are fantastic ideas. Also, I staunchly believe that every mobile app should have a dark theme option for people who don't want their retinas blown out when they want to doom scroll through stuff at midnight.

[@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.

[@Rash7]

ah yes, my favourite language, CCS

[@yumikotanashi]

@@Rash7 😂😂😂

[@670839245]

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

[@omersabic8555]

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.

[@calebhessing7593]

Agreed on the placement of the price. Additionally, he put the review rating percentage next to the price, which is confusing as it could easily be mistaken for a discount percentage.

[@hexagxn7403]

Wow i’ve waited so long for this video ❤

[@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.

[@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.

[@shadowyking123]

Honestly it's a little weird how every single Steam Redesign I see has the same issues and criticisms. I also strongly disagree with removing the game tags in favour of a % number, because that % number is utterly worthless while the tags are the most useful thing (even more useful than the game name, price or logo) when looking for it. Steam can definitely improve their layout but noooot like this.

[@timchanux]

@@shadowyking123 Exactly, that is the problem with 99% of redesign content out there is that they are re-designing it based on their personal preference, only focusing on the UI without fully understand the fundamental user base. Lack of research is the biggest cause here.

[@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

[@GabeBeyruti]

Please continue these types of videos

[@SchrodingersDinger]

@@GabeBeyruti Please note his designs aren't near perfect, but they give ideas. Steam users enjoy having more information and users in general don't like drastic changes. Also, a lot of this is his subjective opinion which is never a good thing to go off of when doing design.

[@alinedesouzarocha]

@@SchrodingersDinger I second you. It's nice to look at but that's not a design approach, there's no UX methods used. Just because it's prettier doesn't mean the experience will be better

[@joaobonsegno126]

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 🙂

[@keokawasaki7833]

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

[@TrueOracle]

I feel he added more practicality

[@keokawasaki7833]

@@TrueOracle he did a spectacular job at decluttering the ui! But, for these UIs I particular: For people using their right thumbs to navigate, it would be hard to use quora's side bar. Which is kinda why bottom navs are getting so popular On steam, he added some hover effects but hover effects don't work on mobile And he removed the discount tags, which is a major marketing decision and can potentially kill sales. Showing there's a discount is far more important than actually giving a discount yknow :P

[@chirag4382]

@@keokawasaki7833 yep UI should be ambidextrous, and only not so important options should be at the top, rest should be at the bottom. Or maybe 🤔 an In app setting to change UI for left and right handed people, and sidebar can also trigger unnecessary back gestures if it hides itself. He is only judging by look's not ease of use. I admit, his design's look awesome, but not so functional.

[@keokawasaki7833]

@@chirag4382 ooh a fellow Indian dev who talks sensibly~ hii

[@chirag4382]

@@keokawasaki7833 BTW, not a dev😅, just a tech nerd.

[@gizmotheking]

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

[@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.

[@Pixelcraftian]

Good news, Quora is a good upgrade, Bad news, Steam is a bad upgrade. Definitely a lot of personal preference there though (First thing I'd add back is the gradients, but I've touched on it in the short version), but I'll let everybody else be the judge haha. I do wonder what else you got prepared though, excited to see it! Cool video :)

[@IslaTheCutie]

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

[@OrangeC7]

I agree that Steam's website/app design could use a rework and I like your proposal better than the current one; If I'm honest though, I do think there's a bit of a charm to that "steely blue" color you mentioned that could be restored somehow. But of course, like you said, it's only a first draft and it's quite a good one at that!

[@Goodgu3963]

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.

[@mickys8065]

As is common with redesigns, they visually look great as art, but you need more colour, mainly for brand recognition. If someone looks over your shoulder, the company wants that person to recognise the app. But will all your redesigns, if the small logo isn't easily visible, they all blend together. For Quora, the background could be the red gradient, then the dark/light themed boxes are monochrome on top. Keeps the text readable, but adds a splash of colour, and registers with the brand. For Steam, picking one or two of their gunmetal blue gradients would help a lot, again keeping the greyer blue for the background, with dark/light themed boxes on top. I'd say the game % scores aren't important for the scrolling feed, but even if they're kept, absolutely shouldn't be near the price. It just looks like the game is "$29.99 at 89%", not "The game is $29.99, with a rating of 89%". Equally, the tabs at the bottom are way too similar to Google themes, and don't intuitively link to the content below, while the old tab format does. Easy way to fix that is to have the tab be open ended on the bottom, and then have the tab and content have the light blue gradient, very similar to what they previously had. The actual UI of it can be smoothed out, but not at the expense of ease. Finally, the search bar is far too hidden. If it isn't going to be at the top, then an easy fix is to either also reuse the light blue gradient (Keeping in mind we're trying to minimise the different types of blue), or have the bar be the opposite colour theme of the site. IE, if you have it on dark theme, the search bar uses the light theme. Makes it pop more, but doesn't steal your attention if you're looking for something else. But, the way you layout the game images, especially the topmost one, is great. Makes it look far neater, especially with how the game title text should be easier to identify given its larger font and tinted backdrop.

[@jshstuff]

Such a cool series idea. In my experience changing an image from contain display to cover is usually a risky move. I usually want to make images cover their container like you did with steam, but then stakeholders start complaining that their content is being cut off. Unless there’s an existing internal standard for image size/aspect ratio that usually gets shut down.

[@malwareinc]

Cybermonk 2099 is my new favorite game.

[@GoldenTV3]

I love this channel! There's so many sites where the company is too lazy to just do the most basic of improvements. Thank you!

[@rmt3589]

Awesome video! Will really help with my web simulator project!

[@Farbfilmstudio]

the steam redesign is mindblowing 🤯🤯

[@kennyPAGC]

I love these series and wouldn't mind longer videos focusing on a single redesign. Keep them coming please :)

[@mzubair21]

And steam has finally listened your advice. What a great man

[@tonero5651]

This channel will soon hit that 500k subs soon

[@hyperprotagonist]

I could watch these all day. Nothing wrong with a bit of scrutiny and banter. ANOTHER 🔨!!!

[@nbeerten]

That steam redesign is basically how Epic Games store looks

[@kevinj3464]

u basically turned steam into epic store congrats

[@Sipzostudios]

high quality videos, truly!

[@Dhoko]

I like how steam updated their mobile app as soon as you uploaded the redesign of the app

[@Mreoewwmrow]

the beta has been up for weeks

[@MrRedPortal30]

I love that Steam actually jsut updated their mobile app

[@sharkjarl1372]

This is legitimately incredible

[@tsyf1]

As a web dev who always struggles to find design ideas, your videos are gold.

[@musicsmash5740]

Dude I just discovered your channel and insta subscribed your content is exactly what I need to design good looking website _other than making everyone dark mode_

[@clxudzYT]

5:07 - _casually makes a hover feature for phone app_

[@madaotee]

now I have to subscribe I can't believe this channel is underrated

[@das9115]

These videos are scratching a part of my brain I didn’t know existed

[@vogelpapafinn8156]

I would love a video about tipps for gui/ux design (basic, intermediate etc.). And maybe even some template widgets (ideas) like side or top bars, menus, themes or maybe even a 'whole' newsfeed.^^

[@frcl]

steam redesign is excellent! but i prefer those blue designs , it gives character, and separates it from simplistic-uniform look from other sites

[@ADMANRed]

As of the 12th Oct, steam just updated the Mobile App. 🤣

[@mgames1710]

Only critique is that the lack of color makes it dull. Would be good to use a slightly navy-steam blue/subtle gradients for the background and some glow gradients on the main buttons to hold some color.

[@jackolli877]

you feel like the guy who wants their vcr to be controlled by a door with a doorbell alongside it

[@wlockuz4467]

This channel is a goldmine, I am confused why don't you get the exposure you deserve. Subbed and binge watching right now.

[@bigmistqke]

I mean, 150k for a programming channel is not bad

[@Shaheer-xs5os]

The Steam redesign was super cool ⚡

[@blaroe]

been watching a handful of shorts and man am i glad to see a longer version of this!

[@jpkral]

Man nothing is more satisfying then these redesigns, especially for how desperately of a change it needs but never gets enough attention for.

[@kirannbhavaraju5978]

Man oh Man! Only if meetings were this productive and straight forward.

[@kistelmodus43]

Dude your channel is too cool! Love it!!

[@kieranmccann94]

That steam redesign was really nice. Refreshed the whole experience.

[@grid3072]

It was bad

[@cheeseballs9962]

Its really bad, he removed the main color of steam, and you obviously have never used steam before

[@SonLeDang]

I love the series and alot of sites you made really improved by miles. Also agreed with a few comments that the Steam redesign strays too far away from its brand image and what we are used to see from steam store. I prefer the cluttered, image on blue feeling of steam.

[@redrush-hp9li]

These design are so good

[@justingolden21]

This is awesome, when UX meats UI! Subbed!

[@mohamed1996anda]

You are the best channel i have ever seen , i hope you continue, thanks a lot , please do more videos ❤

[@beatfly]

You are the King and this format is amazing. Great job! Thank You. Keep going. 🤟🏻

[@QueeeeenZ]

The steam redesign blew my mind 🤯

[@MidnightH3ro]

Your UX/UI skills are top notch, just found your channel, KZbin knows me well because I'm loving your content keep it up!

[@hman2875]

That redesign took all the character out of the original design

[@sircalvin]

i learn the most by hearing the thought process of someone else doing it, and these video are amazing. you walk though every step quickly but informatively and the pacing is on point

[@mamtapandey809]

I just discovered your channel and I love it already

Your videos are so satisfying. Cheers from a fullstack dev without ui/ux skills 🌟

[@hamburger0]

Great channel 👍👍 great content 👌👌

[@thespeedyyoshi]

I can definitely see why your steam design seems to be getting the most backlash, but I think you did a good job balancing what needs to shown, and what doesn’t, as well as giving things flare. The icon and pure black screen does look a TAD bit corporate and I do think some variation could do nicely, but for a rough draft, it definitely looks more than serviceable ^w^

[@creepychris420]

i like this design. i like overthinking it so it exactly what you want and makes sense to the user. every bit of half arsed design or shit code we write is permission for another dev to do the same and make something shitful on a site i love 😂😂 that sidebar interaction was overthought but it felt weird until you did it like that lol.

[@mohdizzmohdyacob3799]

God! This is exactly what happened in my head whenever I browse page with a lot going on and doesn’t know how to organise them. But I never did anything like this. You sir! Is brilliant. I love your videos. As a fellow front end developer I respect you for doing all the videos. Thank you.

[@RoGiftRBLX]

Just subscribed a couple hours ago, perfect timing! lol

[@Landon_Hughes]

I feel myself learning with every new video and short 😄 You are very entertaining and very knowledgeable!

[@DanielXavierDosReis]

That's... absolutely amazing... just... amazing

[@Karen-yb1so]

I found your channel via TikTok!!!!!! I just finished my full stack Boot Camp!!!!! Watching your channel helps motivate me and makes me wanna study harder ❤

[@whoami2103]

Love this format :)

[@kunehenry-sn5lg]

This is very entertaining. Hope you'll keep it coming!

[@Shamano79]

As a frontend developer I'm totally with you man, you rock! Keep on suggesting people how to conceive pro interfaces, it's good what you're doing :)

[@enesyurtsever]

I just discovered your channel and I really liked your roasting series 👍

[@geometrydashjowinator1936]

I love how he says “interesting” every time quora fucks up

[@MrElmi]

I could watch hours of this

[@mu4784]

Really lovely breakdown and great visuals, makes watching the transformation very pleasing

[@spencerbritton229]

Hey man I saw the Dominos video and I love your work! I am part of a program at Alamo Heights High School called business incubator. My group wants to design an app that allows orthodontists make sure their patients are wearing their rubber bands and allows the patient to take a picture each day with their rubber bands in the mouth to earn points. We have good connections in the orthodox field and are on track to make this a reality, but we would love some help in designing a simple, easy to use app that makes having braces not a chore. Keep up the great work I love your stuff!

[@dukkcc2]

I love this series please more

[@Strawberrybanana09]

I love watching these videos. Make more

[@Parzalai]

the steam concept looks reallllly good. but i feel like an unspoken thing about the steam site now is that it's very iconic, specifically the blue, the concept you made sort of looks like a mix between the Epic Games and Oculus store, which would not serve well for steam. probrably some more blue, plus keeping the green to symbolise discounts and keeping pricetags to the right would help it.

[@retraCnayR]

Loving these videos but just watch those mouse interact events on a mobile treatment 😊

[@Zhoxism]

2 times on the Steam design you show effects that appear on hover. Unless a mouse is plugged into your mobile device, those won't be seen. They might appear when you click the screen, but then you've already decided you want to go to e.g. "Specials", so the effect is pointless, unless you really wanna show that 'active' state of the link.

[@rohithande9750]

you are so smart , I think I'm in love with your brain

[@yamparalarahul]

love your work man, it helps me a lot

[@rexster76]

Cyber monk 2099 , cyber punk's long lost cousin 🤣🤣

[@Scratch_Fakemon]

I love these things! Maybe do KZbin next, also adding in features that some of us want? That would be cool! :D

[@rafaelurben]

I absolutely love this!

[@airboarvirus8521]

These videos are amazing! Please keep them coming.

[@Super-hn3hq]

awesome design, looks fresh and enhances user experience. we don't need to try the buttons one by one.

[@taofeeqomotolani2311]

126K subscribers now. power of quality content.

[@ju.ice-der-boi]

Don‘t reinvent the wheel so often ;) For Quoras side nav: why aren‘t you opting for a bottom nav with a contextual menu as the 5th option? Having a collapsable side menu without any context doesn‘t solve any problem, just makes it harder to reach. But cool stuff, love that zbe UI industry gets some more attention ;) Defo a job that needs a lot more great minds 🙏🏽

[@MichaStolarskiPL]

Steam hover effect on the mobile device xD Brilliant idea xD

[@arupball1505]

You're a inspiration bro

[@scarlitch6294]

dude this is insane in need more

[@austincodes]

I feel you steam. Centering a div is hard 😤

[@burnttoast5537]

We need more of this type of content (not the compilation of them, new)