I Redesigned Popular Websites (Amazon & Google)
Вставка
- Опубліковано 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.
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
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.)
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
Need more of these redesigns. It is like a makeover to the design brain.
0:06 I LOVE the website at number 4, great to know that it climbed into that place
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
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
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 :]
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'm a professional web/graphic designer... so from one to the other... you're the best on UA-cam! I always love your redesigns! Bravo! 👍
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.
Bro, eveything about your videos are goals. It just grabs my attention and holds it all the way to the end. Very nice execution.
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!
Would love to have more of these redesign website videos. Just subscribed to your channel.
You NEED to make more of these website/app redesign videos!
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
Really loved this vid. Always waiting for more!
You need to make more of these. Great job!
bro, you rock! keep up the good work, you inspire me to learn stuff!
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!
Awesome video as always! I like your videos and this is helping think about websites differently
i love how hyperplexed break down the problem one by one and give a better solution
i liked how you redesigned google but putting amazon search bar in middle doesnt look that good makes it a little confusing
really like all changes that you have put over there!
For amazon's redesign, you are using Instagram logo instead of the scanner logo. 5:27
As always.. KILLER re-designs.
Always a treat when you upload a video. Please upload more.
Bro redesigned Google to Bing
love this
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.
i absolutely love your videos. wish you could make them more often :)
Amazing as always!
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.
Need more videos like this. simply amazing! Thank you
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 🤣
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
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
Excellent work here!
cant wait for the next one
I really like this kind of videos. Great work!
Honestly your videos are best part of my week, ly!
Hyperplexed is the kinda guy who gets people fired, without firing them.
Keep ‘em coming
Another fantastic video
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.
I'm new here and I'm binge watching your videos. I love your content and how you present it
the comedic editing with the google search logo was great
YAYYY ANOTHER HYPERPLEXED UPLOAD :D
Never get tired of watching these videos
Bold of you to show your shearch history.
Amazing job 🔥
I like this series!
You good sir, are very talented indeed. Hats off to you!
Awesome job. I'd love to see you give a shot at redesigning the Xbox Series UI.
6:34 yo UA-cam music literally just made the GTA loading screen a gradient 😂
Amazing Redesign, by far better than the real one.
love your channel bro
So you basically removed Material You from the Google website, great.
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 🤙🏽
all of these look super cool. i find designing super hard
I might be bias but I kinda prefer the original Google design
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 your videos, do you have maybe some books people should read about design?
Great video! Although, the use of the Instagram logo as the camera icon for scanning at 4:51 is a bit weird :)
How smooth his editing is 😮 ❤
bro this content is so pleasing and comforting knowing I cant even code like this hahaha
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
Truly an Artist.
I love these videos, idk how you haven’t been hired by one of them yet
finally FINALLY ANOTHER POST
Looks fine -> Elite style🎉
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?
Awesome content
Great video :)
You know it goes crazy when vanced highlight on the video is the 6 second outro
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…
just CLEAN. nothing more to say
Please do a redesign of the Amazon desktop site and maybe also some pages deeper inside like the checkout.
this man did better than every google and amazon employee combined
This is more enjoyable than most Netflix series
Well
Thanks
Now I'll never not see it when visiting their sites hahaha
(Nicely done!)
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 should make chrome extensions for his redesigns
now time to recreate the entirety of the amazon website with your design
The redesigned Google one doesn't look Googlly
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?
5:20 that's why we developers love designers so much
As a product designer - I really love/appreciate your redesign videos 🥰
Yeah they need an entire revamp
Great video🎉 It would be nice😊 if you design a chat interface❤