I Redesigned Popular Websites (Amazon & Google)
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- Get your FREE Frontend Masters courses: bit.ly/Fronten...
Attempting to redesign some popular websites. Part 4 includes Amazon and Google.
Support the channel: bit.ly/Support...
Tools used: HTML, CSS
CodePen Links:
Google - bit.ly/GoogleS...
Amazon - bit.ly/CodePen...
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
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
As a frontend developer, it's amazing to see how a series of small changes can make such a huge impact on a product.
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.
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
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
Need more of these redesigns. It is like a makeover to the design brain.
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.)
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
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.
"only 39$ a month" 10 is already a lot for me lmao
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 :]
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 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
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.
i liked how you redesigned google but putting amazon search bar in middle doesnt look that good makes it a little confusing
Hyperplexed is the kinda guy who gets people fired, without firing them.
You NEED to make more of these website/app redesign videos!
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 love how hyperplexed break down the problem one by one and give a better solution
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!
You should make a course on FEM!
Yes! Great idea.
You should read the idea behind Google's Material Design 3. What you've shown goes in exact opposite of what Google is trying to achieve
Can you enlightened us on what google is trying to achieve?
@@ethan_groot yeah that would be interesting to know
ye this guy just strips the branding from all the websites he redesigns which makes everything generic and look the same
@@willy_gooseling69making everything look generic doesn't matter, it just shouldn't kill accessibility
@@goodshiro10 so what's the point of making at all generic then?
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.
For amazon's redesign, you are using Instagram logo instead of the scanner logo. 5:27
Bro redesigned Google to Bing
Bro, eveything about your videos are goals. It just grabs my attention and holds it all the way to the end. Very nice execution.
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 TH-cam, 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.
This is more enjoyable than most Netflix series
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!
6:34 yo TH-cam music literally just made the GTA loading screen a gradient 😂
5:20 that's why we developers love designers so much
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.
Great video! Although, the use of the Instagram logo as the camera icon for scanning at 4:51 is a bit weird :)
Would love to have more of these redesign website videos. Just subscribed to your channel.
love this
This man should make chrome extensions for his redesigns
the comedic editing with the google search logo was great
And this is what I love to watch and learn while, I am having my breakfast
Coders thing😅
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
bro this content is so pleasing and comforting knowing I cant even code like this hahaha
I might be bias but I kinda prefer the original Google design
How can one person do wayy better than all of google 🤯
You know it goes crazy when vanced highlight on the video is the 6 second outro
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.
Cant' wait for a re-design vid on the number 4 site on that most visited list
Bold of you to show your shearch history.
So you basically removed Material You from the Google website, great.
0:06 I LOVE the website at number 4, great to know that it climbed into that place
all of these look super cool. i find designing super hard
Always a treat when you upload a video. Please upload more.
How smooth his editing is 😮 ❤
These companies need to hire you
The redesigned Google one doesn't look Googlly
Never get tired of watching these videos
Developers trying not to make the same design, font and icons for every website IMPOSSIBLE CHALLENGE
Truly an Artist.
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
I feel like the sharp corners of the doodle separate it from the rest of the page and make it stand out more
this man did better than every google and amazon employee combined
Honestly, Amazon' UI is a nightmare. Is like navigating a maze trying to do anything. I really love Amazon Music's UI though.
really like all changes that you have put over there!
You good sir, are very talented indeed. Hats off to you!
cant wait for the next one
As always.. KILLER re-designs.
Looks fine -> Elite style🎉
Please do a redesign of the Amazon desktop site and maybe also some pages deeper inside like the checkout.
Amazing Redesign, by far better than the real one.
I work for amazon and I can tell you that if that UI sold more products, we'd use that. The misaligned 3 products sells more than aligned 2 products. And no business would prefer aesthetics over business value.
Also dropping to the second limit instead giving 2 limits for each image. Everything evolved over thousands of experiments and A/B tests. Even the font.
Excellent work here!
Nice, you made chrome look like edge
I'm a professional web/graphic designer... so from one to the other... you're the best on TH-cam! I always love your redesigns! Bravo! 👍
You might not be a great designer (yet) but damn, the fact that you deliver such quality content deserves a trophy on its own.
How is he not a great designer?
@@arjundureja He's a front end developer, if he was a UI or UX designer, he would know about the Law of proximity, where related elements are placed closer together.
For example, the original Google search bar has the "Search anything" text within the same rectangle as the microphone and camera icons, this tells the user that they can "Search for anything with text input, camera or microphone"
By splitting them into separate buttons it now implies "Search for anything with text" or "Take a picture" or "Record audio", three separate actions where only one of them searches.
As for the Amazon redesign, the icons within the search and the icon for the location are just too tiny to meet WCAG Guidelines both for readability and smallest "tappable" area, the same goes for the "select location" text.
Carousels in general are terrible for user engagement so changing from 3 cards to just 2, just so you can slap a smaller text and more words is not worth it from a click-through-rate perspective.
And adding a border around an ad willy-nilly "just to make it classier" implies that it is now an input field, confusing users even more because you break consistency.
You need to make more of these. Great job!
Need more videos like this. simply amazing! Thank you
Yeah they need an entire revamp
great as always, tho there is a bit of lack of inconsistentcy. You always put the buttons for the Account and stuff inside of the Search bar, so why didn't you but the buttons inside but instead made them seperate on the google one this time?
Don't you mean lack of consistency?
I really like this kind of videos. Great work!
now time to recreate the entirety of the amazon website with your design
Google please hire this man!
You‘re throwing the Chrome start page in the mix as a Google homepage. Even though that‘s stongly connected and to most end users might seem the same it‘s quite different. But I guess the user feel is what counts…
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 🤙🏽
Awesome job. I'd love to see you give a shot at redesigning the Xbox Series UI.
YAYYY ANOTHER HYPERPLEXED UPLOAD :D
finally FINALLY ANOTHER POST
This is more relaxing then a massage
The Google redesign is pretty good, however the way you designed the frequented pages section feels off. Maybe because it takes too much space on screen.
Otherwise, it's pretty neat! :)
Both google and amazon should incorporate this to their design.
Honestly your videos are best part of my week, ly!
I didn't even know that you could scroll to see more on amazon
Well
Thanks
Now I'll never not see it when visiting their sites hahaha
(Nicely done!)
I'm new here and I'm binge watching your videos. I love your content and how you present it
Honestly i don't think the google logo and searchbar needed that redesign. You made the logo too big (drawing too much attention) and the search bar too small (which in my opinion should be the focus). But the shorcuts change was definitely an improvement.
I got an Amazon ad before this video. I think I'm gonna cry
I think the Google app is fine already but I like your Amazon redesign
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