I Redesigned Popular Websites (Quora & Steam)
HTML-код
- Опубликовано: 14 июл 2024
- #webdevelopment #webdesign #css
Attempting to redesign some popular websites. Part 2 includes Quora and Steam.
The icons I use: fontawesome.com/referral?a=75...
Support the channel: ko-fi.com/hyperplexed (accepts PayPal, card, etc).
Watch the shorts here:
Quora Redesign Short: • Quora's Website Site G...
Steam Redesign: • Steam's Website Gets A...
See the code here:
Quora: cdpn.io/dyeKgNq
Steam: cdpn.io/jOxMejd
Music Credits:
Daze - StreamBeats - Lofi - Harris Heller
![Veeze - F.A.F (ft. Rylo Rodriguez) [Official Music Video]](http://i.ytimg.com/vi/7hlz2S2GmIY/mqdefault.jpg)
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
what if i just _don't_ pay for font awesome
@@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.
@@jeffrbake ah ok
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
I want to get started with front end developemnt but idk where to start. Any tips?
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.
Hm yes I do indeed love the awfulness of the steam colours so much that I'll keep them.
@@Likeusb1 Literally just pick one shade of dark blue and use that. It's not monochrome or nothing.
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.
also the next game showing in the right corner makes users scroll more often
I was gonna say the same ☹️, this is why marketing has to come before design
this is so satisfying for no reason
It’s amazing
exactly
for no reason? lol
Istg
i think it's the awesome editting
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
Yes keep making more of this type vids
me too
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
Exactly, I feel the "50 shades of blue" is integral to the steam store feel
Yh I think he should've gone with a really dark blue
Exactly, keeps it from looking like every other dark themed site.
@@autisticwitch7581 exactly
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.
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
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.
ah yes, my favourite language, CCS
@@Rash7 😂😂😂
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.
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.
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.
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.
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.
@@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.
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 ;)
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.
Really calming. I really like this! Great job on the extended format, I feel this will be a hit!
I love these series and wouldn't mind longer videos focusing on a single redesign. Keep them coming please :)
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
Please continue these types of videos
@@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.
@@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
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.
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
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
I feel he added more practicality
@@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
@@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.
@@chirag4382 ooh a fellow Indian dev who talks sensibly~ hii
@@keokawasaki7833 BTW, not a dev😅, just a tech nerd.
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.
been watching a handful of shorts and man am i glad to see a longer version of this!
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!
Wow i’ve waited so long for this video ❤
Awesome video! Will really help with my web simulator project!
Man nothing is more satisfying then these redesigns, especially for how desperately of a change it needs but never gets enough attention for.
Really lovely breakdown and great visuals, makes watching the transformation very pleasing
As a web dev who always struggles to find design ideas, your videos are gold.
I actually like Steam web interface, it feels unique and consistent.
I‘m learning front development and when I compare my designs to that of what you create it's impressive. Love your content there's a lot to learn from!
I could watch these all day. Nothing wrong with a bit of scrutiny and banter. ANOTHER 🔨!!!
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 🙂
Cybermonk 2099 is my new favorite game.
Im really new into html, css and js and I gotta say im so jealous of your immense skillset that you've got. Keep up the work buddy!
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 :)
The alignment of the prices and discounts on the original steam page makes the easy to view instead of being cluttered in with more text/characters as per your changes
I feel myself learning with every new video and short 😄
You are very entertaining and very knowledgeable!
love your work man, it helps me a lot
You are the best channel i have ever seen , i hope you continue, thanks a lot , please do more videos ❤
These design are so good
Ive been learning all the stuff to making websites and video games and this was a huge inspiration!
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.^^
We need so many more of these vids - Plus, a few in desktop mode would be awesome!
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!
Love this format :)
love this series
These videos are amazing! Please keep them coming.
I just discovered your channel and I love it already
You are the King and this format is amazing. Great job! Thank You. Keep going. 🤟🏻
I love this series please more
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.
Your UX/UI skills are top notch, just found your channel, RUclips knows me well because I'm loving your content keep it up!
I just discovered your channel and I really liked your roasting series 👍
This is legitimately incredible
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!
I absolutely love this!
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.
I love watching these videos. Make more
This is very entertaining. Hope you'll keep it coming!
These videos are scratching a part of my brain I didn’t know existed
That steam redesign was really nice. Refreshed the whole experience.
It was bad
Its really bad, he removed the main color of steam, and you obviously have never used steam before
dude this is insane in need more
Dude your channel is too cool! Love it!!
Really awesome series. Please continue this. I can hardly find such visual step by step case studies for ui redesign in RUclips. Highly appreciated. Keep doing such awesome work
And may be you can add some redesign tag to the video for better reach
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 :)
I really like this type of video, and I think you should make more :)
Love this longer video
We need more of this💪🏼
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_
the steam redesign is mindblowing 🤯🤯
As of the 12th Oct, steam just updated the Mobile App. 🤣
You're a inspiration bro
And steam has finally listened your advice.
What a great man
i love this series, keep it up!
by far one of the most inspiring channels. Love ur voice and your style. Keep it up :)
high quality videos, truly!
Your videos are so satisfying. Cheers from a fullstack dev without ui/ux skills 🌟
steam redesign is excellent! but i prefer those blue designs , it gives character, and separates it from simplistic-uniform look from other sites
The steam redesign blew my mind 🤯
This is awesome, when UX meats UI! Subbed!
Love these videos
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.
This channel will soon hit that 500k subs soon
now I have to subscribe I can't believe this channel is underrated
This is so nice!!
Absolutely love your videos bro!
LOVE THE CONTENT !
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.
I love that Steam actually jsut updated their mobile app
you feel like the guy who wants their vcr to be controlled by a door with a doorbell alongside it
This is so good!!!
Man oh Man!
Only if meetings were this productive and straight forward.
5:07 - _casually makes a hover feature for phone app_
awesome design, looks fresh and enhances user experience. we don't need to try the buttons one by one.
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!
I love these things! Maybe do RUclips next, also adding in features that some of us want? That would be cool! :D
That redesign took all the character out of the original design
Lovely breakdown on both the sites. But I felt you missed that hover does not work on mobile 😅
Hahaha oops
Ahh great catch. I code these on my desktop so I'm just dumb and didn't think about it.
Hmm let's just call it carry-over from the desktop version of the site (which doesn't exist 😆).
@@Hyperplexed Ahha I understand. As a UX/UI designer myself, this slipped my mind the whole time until a mentor mentioned it 😂
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 ❤
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.
I love your video editing style. Can you make a video over how you edit your videos and make all the content so dynamic. Would really love that ☺️
That's... absolutely amazing... just... amazing