The 5 Levels of Web Design - Worst to BEST UI/UX

[@Etalify]

as cool as the fifth one is, i honestly think number 4 is the best one. less distractions without all the animations and effects, and i feel like it's easier to get a grasp of what the site's offering. it looks impressive though, that's for sure!

[@sanicspeed1672]

Agreed. No animations, just good design, chefs kiss

[@DesignCourse]

The 4th one very well might convert better. In terms of frontend dev skills + motion skills to pull off the 5th one -- that's why I put it ahead. I think a list like this might be quite different if we were to look at pure conversion ratios/page performance.

[@TheNerdyPlayer]

@@DesignCourse i agree, the 5th one takes serious skill, but the 4th one would work best for most companies :) Great video!

[@zacmuturi4522]

I was about to say the same. No. 4 is what I would aspire to build.

[@Jennifer-fk5xi]

Dude, you spoke my mind!

[@DodaGarcia]

Number 5 is definitely the flashiest, but I can't agree it's the best design for the use case. The page sells web design much more than it sells the product, I can imagine far more users going "how did they do that?" than going "this product looks interesting". Good design should be calling attention to the message, not to itself. Number 4 is the best overall to me.

[@sam-j3z1y]

true tested pages with animations vs no animations and pages with complex design and simple design the simple design with no animations always wins xD I dont even use sliders anymore because nobody clicks on the and also almos nobody interacts with tabs

[@cryMoreLoL]

Animations don’t make websites great in fact I haven’t seen a study that said visitors “prefer animations.” Also, you shouldn’t be designing websites for ultra wide monitors. If you scale your text to be giant letters like every awwward submission then it no longer becomes a readable text and instead a visual image. For the record I like this channel and your videos. I don’t mean to throw any shade.

[@jasonshere]

I don't fully agree with everything he said; but he did mention that people prefer fewer animations; not that they "prefer animations" 6:30. Also, websites need to look good on every display nowadays, and should adapt accordingly to very small and very large screens.

[@KristianTheDesigner]

The last one is cool. But it feels inconsistent. Top half and bottom half is basically two completely different designs. Also, did not like the globe going away then coming back in for a second time…it was cool with the top one, the second time it was boring…because they were identical. Tbh, the 2nd to last was my fav of the bunch…it felt more serious in regards of what the field the webpage is representing. Good feedback for the people who made the different ones tho.

[@gamergrimoire]

4th one seems like the best one of them all. The last one seems like a good showing of web design knowledge skills. However, not the best UX I would say. It could work for 2 or maybe 3 sections, but the 3D sphere was right at your face almost the whole way. Also, optimization anyone? And lastly, how do you translate this design into mobile? Seems like it's really unresponsive and you would have to do quite the workaround for mobile or just scrap the idea altogether.

[@saturnteatree]

The last one was the worst - there was no design system, it was too busy, and not very intuitive. It felt overwhelming; if I visited that website to accomplish something, I'd be annoyed. Remember, the target audience is there for a purpose, not to play a game. The design should enhance information, not distract from it. However, the critiques were helpful for the others. Hopefully, I didn't offend you.

[@DesignCourse]

What level would you place yourself? 1 through 5! Be honest! 😂

[@RezaOpdebeeck]

I would be a 3 or a 4 depending on the client and the budget to be honest :) Btw, I didn't like the number 5: too much things going on for my tastes.

[@creatureoflegend2635]

-1 lol

[@TaranveerSingh-oz2jd]

2.96

[@inzdvl]

As others mentioned already, 4 is the best. Number 5 is like someone would try to put as many animations as possible to make user life miserable. The page and content inside should be clear to read, not flying like a god-damn rocket all over the place.

[@russia-yesterday]

The last design has the worst UX of the samples. Scroll hijacking and all the animations kill the experience. The overuse of visual effects take away from the content and add more load and complexity to the site. Designers should be careful to avoid something called 'The Illusion of Completeness'. If you have to add icons telling the user to scroll then you've failed and should re-think the design.

[@cryMoreLoL]

Thank you! I think scroll hijacking should be illegal. Literally the worst and one of the most annoying trends to ever emerge.

[@playmambo9573]

Exactly, web designers are the ones that like animations and complex designs and often dont care about real accessibility. Many web designers design for other webdesigners, only. And dont realize it.

[@kee04O]

same

[@sohaib07]

Agreed

[@user-dt9kk6sg8z]

Quick tip: when you go over a section to critic it, first quickly describe what we see, then continue to critic and opinion. Great video so far! (haven't watched all yet)

[@nidodson]

...5's homepage is almost worse than 1, the only saving grace is nav being fixed, but the product page forces #5 to being the worst, because causing seizures is an auto fail of any design. The sitemap colors are less readable than 1's contact and autopay text section, and the globe is way too distracting for the level of value it carries, both covering up the Trusted section the majority of the time it's on the screen, and creates a level of activity that makes it hard for users to realize the testimony section is interactive and has multiple testimonies, which the navigation of doesn't stand out enough even on it's own compared to the testimony content. [Warning: If you are photosensitive, avoid the product page of #5 or scroll very slowly if you insist on going to it, because the globe texture is made full screen and spins entirely too fast if you scroll too fast.]

[@DesignCourse]

I wouldn't say a fixed nav is any type of difference maker. But I 100% disagree if you're trying to state that #1 and #5 are at all close together if we're strictly talking about UI and modern design. UX could be a different story, assuming #5 was overdoing it with animations, which imo, they don't. I've seen scroll high jacking and excessive animations before (many Awwward winners, actually), but this is relatively tame compared to some of those examples. I was only judging the home page in this video, not sub pages -- but I do agree, the page transition animations are a bit much on example #5.

[@worm3196]

@@DesignCourse I'd say when talking about UI, you have to talk about UX, you can't separate them. #5 has animations that get in the way of the content, for example, in the hero section and the trust symbol section, it blocks the content.

[@nidodson]

@@DesignCourse that's fair, and thank you for the reply. I am being more curious than anything here, because I want to understand the gap of perspective. If we are going off of beauty and cool features, it's great. I know there are many that go significantly overboard, I would be curious what user eye tracking would show. I would think the spinning globe would pull attention to the point it's a disservice to the website. I know I have a very analytical/utility mind, and see websites as having goals. Marketing websites for establishing a brand, and bridge the gap for users to become customers, and maybe that is where a bigger divide is than I am realizing.

[@YaZha46]

The Level 5 looks great..... until you open it on Firefox based browser :)))

[@shakeelquadri1901]

I couldn't agree more with your last points regarding the pricing point and quality. Unfortunately a lot of business owners do not understand or appreciate this concept and they think that they should get more for their money. Great points about each design, and solid examples, if I was to be critical, i'd welcome more comments away from just a lack of white space (white space can be a good thing in design, done well) or just animation = good design. I know that they are the 2 extremes and I get your points but just wanting a little more on both spectrum's.

[@krtuts]

4th design is best

[@justsaybobby]

for the final design, its good to point out that there is most likely a WHOLE TEAM behind the whole site as opposed to someone thinking its one person.

[@-The-Golden-God-]

It's interesting, the one you pick as the top level design, I like the least. I find the animations to be very distracting and there's far too much going on. I would place #2 as the best designed site and I would place #1 much lower on the list. I think this is the difference between what a designer thinks and what the audience might think. I see this EVERYWHERE in tutorials; designers who are obsessed with showing off what they can do, but who don't stop to think whether they should be doing it. When I've asked my clients what they prefer, they want information delivered to them in a clear and concise manner and they don't care at all about animations etc. ps. Niche = Neesh not Nitch ;)

[@maximkurochkin6855]

Hey! The topic that you touched is very good! But IMAO: 3th work is 2-level work because of almost similarity with previous one, 4th work is 3-level beacause of full absence of interactions, is not modern approach yet, 5th is 4-level because is too interactive and entails problems to user, but at all is imressive work, more modern than previous Please make new movie with topic: 5/5 Web Designs // where UI would be on top, but animation will make better for UX than its absence

[@user-ii7xc1ry3x]

Gotta love these videos.

[@TamaraLukic-u7m]

Not sure if this was already commended upon but these websites might not be the 1:1 copy of what the designer did. As we all know, developers like to just add their own interpretation of the design so I would be weary of missing CTA buttons, miss alignments, typography issues etc...And not just developers, the clients can often come and change the design as the developers are creating the page without the designer knowing.

[@dailychinese1396]

How to design a landing page with animation like at No5?

[@minhtranbinh8962]

how can you know that much website, I really need to know where to find a large list of websites so I can get like button animation or layout inspiration

[@vashhazzelrobenta6122]

For Me the best is number 4. Simple and elegant. 5 i can say is too much animation and also when there is too much happening in a website that is not easy to reload when the signal is not too good.

[@storygod101]

Hey guys, how much can you make by making a landing page like 3rd one?

[@hydyravezberdiyew676]

yeap comments section helped more than the video)) thanks

[@stanyt3rive725]

4th is the best. Period

[@ApurvaKashyap-kj6qz]

please upload a tutorial teaching Ui #5 with nextjs, gsap and threeJs

[@Osandajayawar]

Hey Can you do More of these Video. I prefer this kind of videos because it's teaches.

[@belezyc]

There are so many rules to follow to be an proficiency web designer that at the end i feel that all good web designers are doing the same work and and are not really creatives.

[@uifry]

Love this :)

[@jonathanseetoh9396]

I have a genuine question - is a CTA button on the hero section necessary when there is already a prominent CTA button on the nav bar above?

[@arpitshrmah]

Yea, you can skip the navbar but CTA on the hero section is like a standard

[@elenakusevska6266]

#4 is the best. #5 is too much...

[@crypt0w1tch]

Niche like SHEESH! 😭

[@AJ-qv1rs]

Made by Buro not my favorite tbh. When you work you way down to the illustrations, and the photos of the houses on the river just looked a little disconnected at times, a mishmash of styles. The page transitions remind me of something you would play around with in Powerpoint, but never commit to the final deck design .... Deel was cleaner, fresher, had better layout, and design aesthetic and overall more consistent ... I'm giving the Gold to Deel .. :) I'm a 4 ... teetering on 5 ...

[@adamzonnis980]

Hey Gary, do you gig and play shows at all? I host a music podcast for independent musicians, and it would be interesting to have you as a guest.

[@abdulhaqqbasintale9323]

hello Gary simon please can you make a crash course form ui/ux and front end development for a restaurant landing page .....you are so far one of the best tutors i have found on youtube...will be very happy to receive a response

[@brandonscott3012]

The last one gets you hired wherever you apply.

[@jadeskarlet]

I guess you applied at a noob company

[@MrTomas2280]

That last design has some poor accessibility. Keyboard navigation is confusing and lots of accessibility errors. Designing cool stuff on the open internet also means designing cool stuff that works for everyone.

[@mwultra]

5 has a flaw that even 1 has not, lack of snappy response. Who wants animations if it makes the site load lagging, and get to the point in such a sluggish way, it literally murders UX of the whole website. Atleast there should have been a button in the navbar that could toggle to an animated version of the website from a static website with little to no animations, for example 4.

[@VKumar-z7s]

Looking like Mark jukerberg 2

[@JawsoneJason]

What’s a nitch ?😊

[@DesignCourse]

Niche. I don't pronounce it that weirdo way, "Neesh" ick!

[@JawsoneJason]

@@DesignCourse that's the proper way. We don't call a quiche a kitch lol

[@edwardburroughs1489]

@@JawsoneJason Perhaps 'Sheesh' needs to be changed to 'shiche'?

[@troyd934]

Calling yourself a design masterclass and stating the last example is the best when it has the worst UX 😂

[@MedicoVisual]

I was thinking the same

[@gerkim62]

@@MedicoVisual i am thinking the same

[@mwultra]

Exactly, a quick google will tell you that design is for user's comfort, not their 'oh wow' or "eeh, is it going to take forever to load?' and 'ah man these animations, i hate them tbh'.

[@huyennguyenkhai7632]

I think 4 is generic, good design but nothing special. It is good for businesses like banking and shops where people refer info over design. So it makes sense to make it like that. The last one is good for the artist portfolio, event, fashion, game, and creative programming.

[@Kate_WebDesign]

What languages are used to create something like the fifth website?

[@ssawian]

The globe in the 5th is so horribly distracting! And it takes up so much real estate without serving any functional purpose. It’s probably the worst.

[@mwultra]

Agreed. But it totally depends on the seriousness of the website. Such professional websites serve for trust factor where there is macro finance involved. It really really conveys the message in a corporate tone to the people who are worried about authenticity and trustability.

[@TheWword]

nah. the 5th is not that good. I didnt like the ball in the middle of all the trust logos. it was unnecessary. But defienitely some of them were pretty good

[@usamasaad9334]

A thing which is very tasty for you might tasteless for me

[@AlldayIshid]

The last one's nav buttons being connected like that is... gross idk

[@mwultra]

the buttons would actually feel better, it's just the site is laggy that makes the UX experience worse.

[@davidomar742]

not sure why you thought a spinning globe was impressive

[@wentallout]

I'm not a fan of the 5th one really. the 3d stuff? difficult to implement, overusing a bunch of gsap animation doesn't mean anything when it comes to profit.

[@FunkCatherine-l8g]

Lee Susan Wilson Edward Perez Jeffrey

[@tonyt_mp4744]

I feel like 5 was a 3 design instead. Seemed too impressed with their animation. Just way to much going on. You excused their mistakes but didn't excuse the others. Its cool and pretty but I would be annoyed visiting that site. 4 is the best

[@delioJorge7]

now I kinda want to send some designs to be criticized!

[@gerkim62]

the last one (5th) is the worst

[@usmanrasheed9010]

Where I learn UI UX designing for free...

[@MultiSciGeek]

Let's just say this is an opinion

[@trafficzombie23]

Do you not bother about Pagespeed? Your best design in the list is terrible for Pagespeed

[@ABDURRAHMAN-xk3rf]

very bad highlight illuminate 👎👎

[@ABDURRAHMAN-xk3rf]

very bad 👎👎