I Redesigned Popular Websites (Amazon & Google)

  Рет қаралды 267,356

Hyperplexed

Hyperplexed

Жыл бұрын

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

Пікірлер: 436
@Hyperplexed
@Hyperplexed Жыл бұрын
Get your FREE Frontend Masters courses: bit.ly/FrontendMastersTrial CodePen Links: Google - bit.ly/GoogleSearchRedesign Amazon - bit.ly/CodePenAmazonRedesign
@therealist2000
@therealist2000 Жыл бұрын
I fully appreciate the Amazon design, Lord knows their website needs an entire makeover
@tovape
@tovape Жыл бұрын
they are like craiglist
@mnnptl
@mnnptl Жыл бұрын
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
@sambeg2
@sambeg2 Жыл бұрын
Yeah they've got too much junk
@YuriG03042
@YuriG03042 Жыл бұрын
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.
@pedroyanez2638
@pedroyanez2638 Жыл бұрын
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.
@kingoffongpei
@kingoffongpei Жыл бұрын
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.
@cuteagrawal
@cuteagrawal Жыл бұрын
last line lol
@AbsoluteWoo
@AbsoluteWoo Жыл бұрын
Yeah the change to the Google logo was unneeded and seemed like filler for the video.
@pvic6959
@pvic6959 Жыл бұрын
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
@ignacioalvarez6382
@ignacioalvarez6382 Жыл бұрын
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...
@mu4784
@mu4784 Жыл бұрын
@@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
@Streamerabi
@Streamerabi Жыл бұрын
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.
@Streamerabi
@Streamerabi Жыл бұрын
Thus from a more strategic standpoint, this design wouldn't work.
@Roxve
@Roxve Жыл бұрын
It can just expand on click
@sonicthefraghog4478
@sonicthefraghog4478 Жыл бұрын
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.
@gravity3.8
@gravity3.8 5 ай бұрын
that's the difference between UX and UI
@Blearky
@Blearky Жыл бұрын
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.
@TheAndroid128
@TheAndroid128 Жыл бұрын
AND They catch your attention enough, so if the content interest you... You'll click it.
@Zeragamba
@Zeragamba Жыл бұрын
much better than those Scroll-Though ads
@onatic8058
@onatic8058 Жыл бұрын
they are the worst thing in the world if you get one of those blinding white ads while in dark mode though
@anonimes4005
@anonimes4005 11 ай бұрын
I use adblock
@davidkonevky7372
@davidkonevky7372 4 ай бұрын
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
@fever656
@fever656 Жыл бұрын
As a frontend developer, it's amazing to see how a series of small changes can make such a huge impact on a product.
@verified_tinker1818
@verified_tinker1818 Жыл бұрын
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.
@go_better
@go_better 10 ай бұрын
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.
@verified_tinker1818
@verified_tinker1818 10 ай бұрын
@@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.)
@davidkonevky7372
@davidkonevky7372 4 ай бұрын
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
@gracelandtoo6240
@gracelandtoo6240 2 ай бұрын
Some sites change their accent colors slightly to adjust to dark/light mode
@donniedamato
@donniedamato Жыл бұрын
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.
@alguem24
@alguem24 Жыл бұрын
0:06 I LOVE the website at number 4, great to know that it climbed into that place
@Sonic612
@Sonic612 Жыл бұрын
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
@riddhesh5541
@riddhesh5541 Жыл бұрын
Need more of these redesigns. It is like a makeover to the design brain.
@CouchSquirrel
@CouchSquirrel Жыл бұрын
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.
@xthedanix
@xthedanix Жыл бұрын
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 ...
@alevanderBatman
@alevanderBatman Жыл бұрын
"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...
@AndiArbeit
@AndiArbeit Жыл бұрын
@@xthedanix what if the view scrolls down a bit so the search bar is back on top when you type?
@klajdisinanaj3977
@klajdisinanaj3977 Жыл бұрын
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
@astrailiaous_Sempticreed
@astrailiaous_Sempticreed Жыл бұрын
Google: Why make the image the same size if the purpose is general search?
@lantern9817
@lantern9817 Жыл бұрын
To keep size of page elements consistent for visual purposes (Or at least that's what I got from it.)
@Pixelcraftian
@Pixelcraftian Жыл бұрын
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 :]
@masala-tea
@masala-tea Жыл бұрын
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
@whoman0385
@whoman0385 Жыл бұрын
"only 39$ a month" 10 is already a lot for me lmao
@justoneofthosedaves
@justoneofthosedaves Жыл бұрын
I'm a professional web/graphic designer... so from one to the other... you're the best on KZfaq! I always love your redesigns! Bravo! 👍
@RayfuzuLearning
@RayfuzuLearning Жыл бұрын
Bro, eveything about your videos are goals. It just grabs my attention and holds it all the way to the end. Very nice execution.
@DvntyDigital
@DvntyDigital Жыл бұрын
love this
@ondar02
@ondar02 Жыл бұрын
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!
@adityakumarsingh7648
@adityakumarsingh7648 Жыл бұрын
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.
@cbassntow
@cbassntow Жыл бұрын
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.
@PenguinByte
@PenguinByte 9 ай бұрын
You NEED to make more of these website/app redesign videos!
@karlokidd
@karlokidd Жыл бұрын
As always.. KILLER re-designs.
@inasuma8180
@inasuma8180 Жыл бұрын
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
@randoguy7488
@randoguy7488 Жыл бұрын
Well, he always claims he's "fixing" them
@jonathanbroughton604
@jonathanbroughton604 10 ай бұрын
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.
@ethan_groot
@ethan_groot Жыл бұрын
Would love to have more of these redesign website videos. Just subscribed to your channel.
@FunFoxRR
@FunFoxRR Жыл бұрын
You need to make more of these. Great job!
@kentokun005
@kentokun005 Жыл бұрын
Really loved this vid. Always waiting for more!
@unattended129
@unattended129 Жыл бұрын
Always a treat when you upload a video. Please upload more.
@Kadori328
@Kadori328 Жыл бұрын
I might be bias but I kinda prefer the original Google design
@JEsterCW
@JEsterCW Жыл бұрын
really like all changes that you have put over there!
@invysible
@invysible Жыл бұрын
i love how hyperplexed break down the problem one by one and give a better solution
@MrAlexutzu007
@MrAlexutzu007 Жыл бұрын
bro, you rock! keep up the good work, you inspire me to learn stuff!
@thepro4805
@thepro4805 Жыл бұрын
YAYYY ANOTHER HYPERPLEXED UPLOAD :D
@imrlyunoriginal
@imrlyunoriginal Жыл бұрын
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!
@OrangeSectorFN
@OrangeSectorFN Жыл бұрын
Awesome video as always! I like your videos and this is helping think about websites differently
@ryo_pf
@ryo_pf Жыл бұрын
Never get tired of watching these videos
@x0x0ROCKx0x0
@x0x0ROCKx0x0 8 ай бұрын
Need more videos like this. simply amazing! Thank you
@yeshuadcosta
@yeshuadcosta Жыл бұрын
Truly an Artist.
@danielzuzic7054
@danielzuzic7054 Жыл бұрын
Honestly your videos are best part of my week, ly!
@Metalvain4
@Metalvain4 Жыл бұрын
Excellent work here!
@erickcabrera2679
@erickcabrera2679 Жыл бұрын
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
@naturelist
@naturelist Жыл бұрын
Amazing as always!
@antonyefanov
@antonyefanov Жыл бұрын
i absolutely love your videos. wish you could make them more often :)
@alexmagwe
@alexmagwe Жыл бұрын
cant wait for the next one
@jonniem
@jonniem Жыл бұрын
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 🤣
@GabeBeyruti
@GabeBeyruti Жыл бұрын
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.
@jalalhamza1344
@jalalhamza1344 Жыл бұрын
i liked how you redesigned google but putting amazon search bar in middle doesnt look that good makes it a little confusing
@AliciaSykes
@AliciaSykes 4 ай бұрын
You good sir, are very talented indeed. Hats off to you!
@moka7911
@moka7911 Жыл бұрын
finally FINALLY ANOTHER POST
@bidhanmarasine7105
@bidhanmarasine7105 Жыл бұрын
For amazon's redesign, you are using Instagram logo instead of the scanner logo. 5:27
@JonAndTheo
@JonAndTheo Жыл бұрын
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.
@shokhdev
@shokhdev Жыл бұрын
I love your video how you explain things. Is there any issues when you copy design? 😅
@Millenial_Live
@Millenial_Live Жыл бұрын
You might get copyright issues, for coping elements of website
@blackmarston
@blackmarston Жыл бұрын
I don't think there could be a problem
@Amelpe
@Amelpe Жыл бұрын
There shouldnt be any problem. He is just showing the home page which counts as free advertising/promotion I guess
@CrazyDiamond24
@CrazyDiamond24 Жыл бұрын
I'm new here and I'm binge watching your videos. I love your content and how you present it
@Ron-op8es
@Ron-op8es Жыл бұрын
the comedic editing with the google search logo was great
@omarvpg4006
@omarvpg4006 Жыл бұрын
I like this series!
@TheScriptingLegend
@TheScriptingLegend Жыл бұрын
Keep ‘em coming
@dietherdave37
@dietherdave37 Жыл бұрын
bro this content is so pleasing and comforting knowing I cant even code like this hahaha
@farsal6271
@farsal6271 Жыл бұрын
Amazing Redesign, by far better than the real one.
@htga75
@htga75 17 күн бұрын
Looks fine -> Elite style🎉
@KonflictYT
@KonflictYT Жыл бұрын
You should make a course on FEM!
@FrontendMasters
@FrontendMasters Жыл бұрын
Yes! Great idea.
@Akshat_jain1008
@Akshat_jain1008 Жыл бұрын
How smooth his editing is 😮 ❤
@carterdee7084
@carterdee7084 Жыл бұрын
Cant' wait for a re-design vid on the number 4 site on that most visited list
@SirBobBotsalot
@SirBobBotsalot 8 ай бұрын
Bold of you to show your shearch history.
@Daddel2021
@Daddel2021 Жыл бұрын
I really like this kind of videos. Great work!
@willi1978
@willi1978 10 ай бұрын
all of these look super cool. i find designing super hard
@kohelet910
@kohelet910 Жыл бұрын
Amazing job 🔥
@allan_archie
@allan_archie Жыл бұрын
Another fantastic video
@PaulPlay
@PaulPlay 9 ай бұрын
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
@x_x8491
@x_x8491 Жыл бұрын
Its unbelievable that a youtuber makes more attractive and designs than google and amazon designers teams, WOW !!! ❤
@randoguy7488
@randoguy7488 Жыл бұрын
It's easy when you don't need to keep accessibility or user experience in mind.
@juestone
@juestone Жыл бұрын
Hyperplexed is the kinda guy who gets people fired, without firing them.
@abdulrahimss
@abdulrahimss Жыл бұрын
Great video! Although, the use of the Instagram logo as the camera icon for scanning at 4:51 is a bit weird :)
@klsb
@klsb Жыл бұрын
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 🤙🏽
@TaimoorShahzada
@TaimoorShahzada Жыл бұрын
love your channel bro
@RockuMan
@RockuMan Жыл бұрын
Awesome job. I'd love to see you give a shot at redesigning the Xbox Series UI.
@yansoares4194
@yansoares4194 Жыл бұрын
Well Thanks Now I'll never not see it when visiting their sites hahaha (Nicely done!)
@trueberryless
@trueberryless Жыл бұрын
just CLEAN. nothing more to say
@justkoru
@justkoru Жыл бұрын
So you basically removed Material You from the Google website, great.
@ShepTheCreator
@ShepTheCreator 7 ай бұрын
6:34 yo KZfaq music literally just made the GTA loading screen a gradient 😂
@randomdamian
@randomdamian Жыл бұрын
I love your videos, do you have maybe some books people should read about design?
@jorget9179
@jorget9179 Жыл бұрын
I love these videos, idk how you haven’t been hired by one of them yet
@AndreiBoghiu
@AndreiBoghiu Жыл бұрын
This is more enjoyable than most Netflix series
@krateskim4169
@krateskim4169 Жыл бұрын
Awesome content
@morrou
@morrou 10 ай бұрын
5:20 that's why we developers love designers so much
@heynicolas
@heynicolas Жыл бұрын
Great video :)
@billibobbarbar
@billibobbarbar Жыл бұрын
And this is what I love to watch and learn while, I am having my breakfast Coders thing😅
@OlenAutumn
@OlenAutumn Жыл бұрын
This man should make chrome extensions for his redesigns
@sarabnadeem868
@sarabnadeem868 Жыл бұрын
I really like the google redesign.
@Samstercraft77
@Samstercraft77 Жыл бұрын
this man did better than every google and amazon employee combined
@noromi
@noromi Жыл бұрын
Bro redesigned Google to Bing
@migishaboyd
@migishaboyd 6 ай бұрын
can't even begin to imagine the amount of work it took to make this video. wow. thanks for this! God bless you!
@EmM-ko7mu
@EmM-ko7mu Жыл бұрын
How can one person do wayy better than all of google 🤯
@yoaiou
@yoaiou Жыл бұрын
You know it goes crazy when vanced highlight on the video is the 6 second outro
@nxtintime
@nxtintime Жыл бұрын
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
@Mikasks
@Mikasks Жыл бұрын
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!
@sabaris2008
@sabaris2008 Жыл бұрын
Great video🎉 It would be nice😊 if you design a chat interface❤
@lorygames
@lorygames 4 ай бұрын
Developers trying not to make the same design, font and icons for every website IMPOSSIBLE CHALLENGE
@cineverseproductions
@cineverseproductions Жыл бұрын
bro make some design ideas on ikea, airbnb, ps app, tesla app too. so good. 👌
@injSrc
@injSrc Жыл бұрын
The redesigned Google one doesn't look Googlly
@ronniebasak96
@ronniebasak96 11 ай бұрын
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.
I Redesigned Popular Websites (Quora & Steam)
6:25
Hyperplexed
Рет қаралды 320 М.
Are You At Least at Level 4 of UI?
10:57
Malewicz
Рет қаралды 68 М.
⬅️🤔➡️
00:31
Celine Dept
Рет қаралды 47 МЛН
The perfect imperfection of Google's Material You
15:47
David Imel
Рет қаралды 400 М.
I Redesigned the ENTIRE Spotify UI from Scratch
19:27
Juxtopposed
Рет қаралды 1,1 МЛН
Все что нужно знать о REACT для НОВИЧКА за 15 минут | Изучаем Реакт
15:12
Frontend Fundamentals | Александр Караджиков
Рет қаралды 9 М.
I Redesigned Popular Websites (Costco & Domino's)
6:31
Hyperplexed
Рет қаралды 448 М.
How Google's Chromium Took Over the Browser World
9:59
Eric Murphy
Рет қаралды 233 М.
Software engineer interns on their first day be like...
2:21
Frying Pan
Рет қаралды 13 МЛН
It's time to talk about these UI trends
9:09
Juxtopposed
Рет қаралды 466 М.
I Made a Neural Network with just Redstone!
17:23
mattbatwings
Рет қаралды 646 М.
The Linux Experience
31:00
Bog
Рет қаралды 308 М.
How AI Stole the ✨ Sparkles ✨ Emoji
28:57
David Imel
Рет қаралды 363 М.
⬅️🤔➡️
00:31
Celine Dept
Рет қаралды 47 МЛН