I Redesigned Popular Websites (Amazon & Google)
HTML-код
- Опубликовано: 1 май 2023
- Get your FREE Frontend Masters courses: bit.ly/FrontendMastersTrial
Attempting to redesign some popular websites. Part 4 includes Amazon and Google.
Support the channel: bit.ly/SupportHyperplexed
Tools used: HTML, CSS
CodePen Links:
Google - bit.ly/GoogleSearchRedesign
Amazon - bit.ly/CodePenAmazonRedesign
Music licensed by Artlist:
Sero - Roses - Instrumental Version
Get your FREE Frontend Masters courses: bit.ly/FrontendMastersTrial
CodePen Links:
Google - bit.ly/GoogleSearchRedesign
Amazon - bit.ly/CodePenAmazonRedesign
I fully appreciate the Amazon design, Lord knows their website needs an entire makeover
they are like craiglist
Man always hated how Amazon never prioritises their UI. They don't seem to have a consistent design system over Amazon retail and AWS website. And don't get me started over their mascot
Yeah they've got too much junk
it shouldn't get a makeover anytime soon, just like Craiglist, for the same reason as Craiglist. It's mostly used by boomers who don't like change or fancy UIs. They only want something that works, that's why corporate software looks ugly as hell.
In this case I'd say that it just works, no need to get fancy about it. You have to take into account that for a company as big as amazon, a complete UI redesign, even if it is made in steps, can bring a ton of problems related to how people interact with the page, and to the interaction of the frontend and backend of the app.
Also this is a mobile redesign, they'd have to redesign for every type of screen, again the risk of losing customers due to change can be big. Think about how a lot of big retail sites look kinda the same: amazon, craiglist, ali baba and aliexpress all have this old fashioned "just works" type of design, meaning that most people are already used to it and know how to interact with it.
Google's alignment of the logo and doodles doesn't really bother me; it's pretty classic to the experience of the plain page with the centered Google logo. Sure, it doesn't always look the greatest in all situations, but it's familiar and iconic.
Amazon's layout has always been a trainwreck dumpster fire.
last line lol
Yeah the change to the Google logo was unneeded and seemed like filler for the video.
the iconic part is probably why its difficult to make HUGE changes. i get someone relalllly high up will need to give an ok lol
I'm honestly surprise by the fact that amazon being a multi-million dollar company has such a terrible UI/UX. It's just bad...
@@ignacioalvarez6382 It feels like it's on purpose to make browsing exhausting...
The human brain loses patience and makes worse purchasing decisions.
Buys the first thing on a list etc.
I really hope I am wrong
Regarding Google, the Search bar should stay more prominent. You've made it take too little space and increased other aspects in size. I agree that it looks nice, but this design takes away from its main function and what everyone knows Google for.
Thus from a more strategic standpoint, this design wouldn't work.
It can just expand on click
It also pushes key features further down the page, likely beyond the fold on landscape devices. And uses the design language intended for lists of the same thing to combine non list elements (logo and search bar). He also made the text on the buttons so small that it'll fail accessibility guidelines. In reality, OP just aligned some elements but doesn't really understand what they really represent or usability best practice. The designs are worse than the originals. This is a graphic designer, not a UI designer.
that's the difference between UX and UI
As a frontend developer, it's amazing to see how a series of small changes can make such a huge impact on a product.
I will say it ... I like banner ads. Not as in: "Oh man, I can't wait to see what the next banner ad will be". But rather as in I enjoy and appreciate them because they are not intrusive. In an age where pop-ups, auto-play, mid-video and pre-rolls are commonplace, banner ads are the silent heroes. They're there, getting their share of the revenue without disrupting my reading or viewing flow the way every other ad does. Great video though as always.
AND They catch your attention enough, so if the content interest you... You'll click it.
much better than those Scroll-Though ads
they are the worst thing in the world if you get one of those blinding white ads while in dark mode though
I use adblock
Only when they don't pop out of nowhere and don't shift the entire content. A lot of blogs/article websites do that and it's extremely annoying
Regarding light vs dark theme: it’s not a matter of aesthetics but accessibility. You need both. Many people hate light mode, but there are also those (e.g. with astigmatism) to whom dark mode is not legible.
And also I like dark mode, because it by itself is easier for my eyes, but not all apps/websites are adapted to it. So when navigating there is an occasional flashbang effect. So I stick to light mode just to avoid it.
@@go_better You can use a browser extension to force dark backgrounds on every website. It probably won't look pretty, but at least it won't blind you.
(If the website is using images with a lot of white, that won't change, though.)
Also just pure aestethic sometimes, I for example like to use dark mode on every website but twitch because I think the twitch purple meshes well with the white
Some sites change their accent colors slightly to adjust to dark/light mode
I recommend considering relationships while exercising the redesigns. As an example, the doodle has nothing to do with search so having the gap be the same as the buttons makes it seem like the doodle is a part of the search feature. I also believe there was a lot of above-the-fold consideration here. A smaller doodle allows for more content to be shown below, along with the 4x2 grid over a 2x4.
Google: Why make the image the same size if the purpose is general search?
To keep size of page elements consistent for visual purposes (Or at least that's what I got from it.)
Need more of these redesigns. It is like a makeover to the design brain.
Honestly thank you, you have opened my mind to more ideas than I can count with this channel. I truly appreciate what you're doing here. And honestly, Google and Amazon needed that re-design XD
0:06 I LOVE the website at number 4, great to know that it climbed into that place
"only 39$ a month" 10 is already a lot for me lmao
As a front-end dev who works with VueJS, I love your videos and actually try to incorporate a lot of the ideas into my applications, thanks for doing what you do and never stop please
Moving the Amazon search bar to midway down the screen is gonna kill usability for people who have lived a lifetime of search bars always being at the top for shopping apps.
Exactly! Also, the virtual keyboard pops up as soon as you click in the search box and this causes the position of the box to wobble. The autocomplete dropdown list can only open to the top in this situation. The classic search bar at the top is super easy to find, always stays in that place and just allows for very long lists. Maybe the design teams intentionally implemented it the way it is now. Crazy thought, I know ...
"Kill usability" People who use the app often will adopt to such a change quickly lol. That's not a problem. "A life time" the app hasn't been in existence for that long anyway...
@@xthedanix what if the view scrolls down a bit so the search bar is back on top when you type?
how is it to get used to clicking at a search bar on the screen no matter where it is , thats the lamest excuse ever XD
I like that you redid your redo on Google due to realising that the doodle wasn't a permanent part of the site lol.
Some pretty good concepts, I think my biggest issue on these is that the font is same for everything but aside from that it looks good 👍 Cool video :]
Google UI doesn't bother me that much, it looks good to me, i think the doodle size is small because they don't want more focus to go there, they want most focus on their search bar.
I'm a professional web/graphic designer... so from one to the other... you're the best on RUclips! I always love your redesigns! Bravo! 👍
Bro, eveything about your videos are goals. It just grabs my attention and holds it all the way to the end. Very nice execution.
You NEED to make more of these website/app redesign videos!
Hyperplexed is the kinda guy who gets people fired, without firing them.
Unfortunately I think there are a lot of inaccessible patterns that become enforced in these fly by night redesigns. For instance, ellipses are not helpful and forcing them to dark mode kind of destroys brand consistency. But I guess you never claimed these to be pro designs so I’m being pedantic lol
Well, he always claims he's "fixing" them
I think most of his redesigns are pretty good, but the Amazon one is extremely un-user friendly. I can’t stand when a screen has huge tiles on it. Because then you have to scroll forever to find what you’re looking for. Especially on mobile.
Hey :), I don't normally write comments, but I just wanted to say Thank you for these redesgin videos. I am no designer or anything like that but I do find these videos soothing and relaxing. Keep up the good work!
Bro redesigned Google to Bing
I love it! Could you do one of these for Pinterest’s landing page? I love animation of the cards and how it is synced to the same timer.
i liked how you redesigned google but putting amazon search bar in middle doesnt look that good makes it a little confusing
Would love to have more of these redesign website videos. Just subscribed to your channel.
You need to make more of these. Great job!
i love how hyperplexed break down the problem one by one and give a better solution
For amazon's redesign, you are using Instagram logo instead of the scanner logo. 5:27
Really loved this vid. Always waiting for more!
As always.. KILLER re-designs.
really like all changes that you have put over there!
Always a treat when you upload a video. Please upload more.
6:34 yo RUclips music literally just made the GTA loading screen a gradient 😂
Need more videos like this. simply amazing! Thank you
love this
I love your video how you explain things. Is there any issues when you copy design? 😅
You might get copyright issues, for coping elements of website
I don't think there could be a problem
There shouldnt be any problem. He is just showing the home page which counts as free advertising/promotion I guess
I've watched every one of these you've made, and have never once realized that you actually code the designs, I thought they were just in Figma or something. Nicely done!
bro, you rock! keep up the good work, you inspire me to learn stuff!
Amaizng, seriously amazing. The way you think about changing the UI for all these sites has had me reconsider my designs ive done for them for my portfolio.
Awesome video as always! I like your videos and this is helping think about websites differently
Excellent work here!
5:33 you could also add a gradient on the right edge that fades the button to 0 opacity so that you can see it is going on for longer
You good sir, are very talented indeed. Hats off to you!
i absolutely love your videos. wish you could make them more often :)
Dude you are an absolute legend. I am a front end web dev and I wish we had you making all our mock ups at my company.
Honestly your videos are best part of my week, ly!
the comedic editing with the google search logo was great
I'm new here and I'm binge watching your videos. I love your content and how you present it
Bold of you to show your shearch history.
Cant' wait for a re-design vid on the number 4 site on that most visited list
You should make a course on FEM!
Yes! Great idea.
bro this content is so pleasing and comforting knowing I cant even code like this hahaha
all of these look super cool. i find designing super hard
i love this series, i learn a lot from your creativity, it is so enjoyable to watch this lame sites from the bigest companies out there get a good ui/ux, thank you for that haha
Never get tired of watching these videos
I love these videos, its a great casual way to learn what feels good for designs (or at least what might be worth considering) and Its entertaining/enjoyable to watch without taking too long. I like when I can learn something while on the Toilet 🤣
Amazing as always!
I really like this kind of videos. Great work!
Truly an Artist.
cant wait for the next one
This is more enjoyable than most Netflix series
I might be bias but I kinda prefer the original Google design
How can one person do wayy better than all of google 🤯
Keep ‘em coming
So you basically removed Material You from the Google website, great.
I like this series!
Looks fine -> Elite style🎉
YAYYY ANOTHER HYPERPLEXED UPLOAD :D
Amazing Redesign, by far better than the real one.
This man should make chrome extensions for his redesigns
Amazing job 🔥
Developers trying not to make the same design, font and icons for every website IMPOSSIBLE CHALLENGE
You know it goes crazy when vanced highlight on the video is the 6 second outro
How smooth his editing is 😮 ❤
what aplication do you use for this videos or your desings? photoshop?
I feel like the sharp corners of the doodle separate it from the rest of the page and make it stand out more
Another fantastic video
Great video! Although, the use of the Instagram logo as the camera icon for scanning at 4:51 is a bit weird :)
Awesome job. I'd love to see you give a shot at redesigning the Xbox Series UI.
finally FINALLY ANOTHER POST
You really need to make a video on how you make such videos, imo it looks more complicated than to develop a new ui for each of those apps
And this is what I love to watch and learn while, I am having my breakfast
Coders thing😅
Well
Thanks
Now I'll never not see it when visiting their sites hahaha
(Nicely done!)
Its unbelievable that a youtuber makes more attractive and designs than google and amazon designers teams, WOW !!! ❤
It's easy when you don't need to keep accessibility or user experience in mind.
I love these videos, idk how you haven’t been hired by one of them yet
Yeah they need an entire revamp
I love your redesign videos!
But after watching any video from you I keep asking myself: how do you record it that sharp?
I heard of a method where everything is illustrated in Illustrator but that would be way too much affort for a normal video right?
this man did better than every google and amazon employee combined
I love your videos, do you have maybe some books people should read about design?
Your editing is literally next level! The amount of effort that you go through to just give us a clearer understanding of what you're trying to say is crazy!
I think you bingfied Google again with those grid gaps.. but your Amazon is on point
You know it's okay to say that something works, no matter who is using it (be it Bing, or RUclips, or Twitch or Twitter or ). Who gives a fuck if it "is in a grid like ? Oh, you do? If it works, it works. Period.
5:20 that's why we developers love designers so much
How did you make the Google one so much worse? You genuinely ruined it lol
love your channel bro
I've loved all your videos. You need to be making at least 1million dollars per redesign because they are so good. You've picked all the right companies to redesign. My favorite was Costco, I can't stand navigating there app. Keep it up 🤙🏽
I just realised that the theme he chose for the Amazon redesign is the same cor that the Amazon music unlimited site uses
Awesome content
Nice, you made chrome look like edge