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

[@pagenotfound_code_404]

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

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

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

[@kevinj3464]

u basically turned steam into epic store congrats

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

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

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

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

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

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

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

[@gizmotheking]

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

[@clxudzYT]

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

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

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

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

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

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

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

[@IslaTheCutie]

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

[@kennyPAGC]

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

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

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

[@ItsVindicated]

NAHHHHH BRUH Steam actually took this shit literally and implemented the changes that’s crazyyy

[@malwareinc]

Cybermonk 2099 is my new favorite game.

[@hyperprotagonist]

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

[@hman2875]

That redesign took all the character out of the original design

[@Farbfilmstudio]

the steam redesign is mindblowing 🤯🤯

[@Sipzostudios]

high quality videos, truly!

[@rmt3589]

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

[@AnthonySistilli]

Absolutely love your videos bro!

[@tonero5651]

This channel will soon hit that 500k subs soon

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

[@badizzl]

5:04 a hover effect for a mobile app? that's unpractical...

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

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

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

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

[@blaroe]

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

[@adityabisoyi1502]

The green discount shade on a blue background helps so much to know which games are on discount and which are not. The only change which I like are the category tiles, the new hamburger menu and left aligned logo. I still think there should be some blue in steam as that's it's identity. What you designed liked a lot like epic games store

[@kunehenry-sn5lg]

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

[@beatfly]

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

[@mzubair21]

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

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

[@maazshaikh2953]

The steam design looks great but with the theme it looks more like epic store

[@jpkral]

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

[@jackolli877]

you feel like the guy who wants their vcr to be controlled by a door with a doorbell alongside 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

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

[@madaotee]

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

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

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

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

[@tsyf1]

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

[@charleshenri4871]

Overall, I'd say that I like those redesign aesthetically, but I do think that there ate a few issues with them. Quora : + The overall design on desktop, the clarity of navigation and the removal of redundancy - While your new design looks good on desktop, I'm really not a fan of keeping it for mobile ; especially on the left, we're most users are going to have trouble reaching, Nd even more on the top left to toggle the menu. There's also the problem that it looks way too tiny for a mobile screen. Steam : I do think it looks great, but it perhaps look a bit to much like Epic. I'd also keep the price on the right, and put the platforms where you did put your prices. Those are only my thoughts. I thoroughly enjoy your videos and it's obvious you are putting a lot of care into them. I'm exited to see more.

[@Sekaro297]

Steam is nice, but the blue is iconic and I'd like that as a default with the option for dark mode or even a light if you're insane.

[@frcl]

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

[@kistelmodus43]

Dude your channel is too cool! Love it!!

[@jmg9509]

5:07 - Only problem there is that you can't hover on mobile 5:45 - As a former steam user, if I saw that standalone percentage next to the price, I'd feel like it represented either a discount percentage, or the current price as a percentage in comparison to the non-discounted price.

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

[@airboarvirus8521]

These videos are amazing! Please keep them coming.

[@das9115]

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

[@MrRedPortal30]

I love that Steam actually jsut updated their mobile app

[@sharkjarl1372]

This is legitimately incredible

[@michaelmao6180]

One thing I'd like to point out for the Quora redesign is that putting that vertical nav bar on the left seems like a bad call. Phone screens are so big today that putting the nav bar and nav icons on the left means most people (righties) will be straining to reach over the whole screen to interact with the nav bar. This is disaster for one-handed phone operation. So my suggestion would be to actually move the nav bar to the right.

[@natejohnson6269]

Hey yo! You used a picture of the bar I work at! At 5:09, the top right icon is of EightyOne Arcade!

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

[@lyan5198]

Im a juinior web designer and im starting to learn front end, recently found your youtube channel and its realy cool! i can watch design and coding videos realy well editied! Keep up, love the content!

[@MichaStolarskiPL]

Steam hover effect on the mobile device xD Brilliant idea xD

[@mohamed1996anda]

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

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

[@blasfah1909]

good stuff, but you cant really hover over things on mobile so hover effects dont work

[@justingolden21]

This is awesome, when UX meats UI! Subbed!

[@mu4784]

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

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

[@Brain4Brain]

I really like this type of video, and I think you should make more :)

[@geometrydashjowinator1936]

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

[@07Tarus]

The steam redesign looks like the epic games website for some reason

[@ivanlogiudice4464]

i love this series, keep it up!

[@Shaheer-xs5os]

The Steam redesign was super cool ⚡

[@jordanray1537]

Loved the video and it's super satisfying. Only thing I would change was with the steam games list. Was a bit too black for me (blue is steam feel) and the games list needs some borders to separate items I think. Other than that it looks awesome!

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

[@ИгорьСюльжин-й5о]

I'm not a UI/UX designer, but my user experience suggests that it would be better to move sidebar to the right on the Quora site, or even make a setting defining on which side sidebar will be. Yes, it is unusual, but for right-handed people tapping on the right side of screen will be much more convenient, than tapping the top left corner

[@SRautaro]

Loved the Quora redesign but the Steam seems to take away the brand's identity. It looks too similar to a competitor like Epic Games. I think it would be worth it to keep the blueish color scheme.

[@redrush-hp9li]

These design are so good

[@Vapor9473]

This is from a while ago, but I want to say: The icons stating what platforms games can be played on in Steam could just be placed next to the name of the game pretty seamlessly.

[@Centurion0419]

Step one, bludgeon every wisp of colour, dash of fun, and touch of soul with a large club. Step two, dark mode

[@songbirdsandsandwiches8217]

This video as taught me that web designers do not possess souls or at least not human ones.

[@damienpoke1428]

We need more of this💪🏼

[@rexster76]

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

[@stickmanonastick6089]

The steam redesign was incredible, though losing some of the characteristic blue makes it feel a bit less like steam. Maybe having the background a dark blue and making some of the chips a lighter blue could look good? In terms of dark mode, I feel the original website was already had a good (if a little high) brightness, so no need to make it black anyways.

[@skratymir]

He just made Epic Games Launcher: Mobile Edition

[@ib9427]

You’re extremely underrated! Keep up the great content ✌️

[@Landon_Hughes]

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

[@brightnights07]

We need so many more of these vids - Plus, a few in desktop mode would be awesome!

[@whoami2103]

Love this format :)

[@CyaxArt]

by far one of the most inspiring channels. Love ur voice and your style. Keep it up :)

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