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

bit.ly/4bTD5zu 👈 Design & code like me. Use "UI2024" for 25% Off!
-- Today, I'm going to show you 5 different landing pages in the same niche (payroll taxes, exciting!). We'll start with a beginner-level landing page, all the way to a super-duper pro level landing page.
Designs featured in order, from 1 to 5:
auto-pay.com.au/
chimoney.io/startups
www.revelo.com/
www.deel.com/
remote.madebyburo.com/
0:00 - Intro
0:51 - Level 1
2:36 - Level 2
4:02 - Level 3
5:52 - Level 4
7:18 - Level 5
10:14 - Final Thoughts
Let's get started!
#uiux #webdesign
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@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.

[@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.

[@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

[@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.

[@user-ii7xc1ry3x]

Gotta love these videos.

[@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.

[@YaZha46]

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

[@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.

[@uifry]

Love this :)

[@user-hg6vx8jz7q]

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

[@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

[@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.

[@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

[@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

[@brandonscott3012]

The last one gets you hired wherever you apply.

[@user-xo8sr6ny8m]

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.

[@ApurvaKashyap-kj6qz]

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

[@krtuts]

4th design is best

[@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.

[@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

[@storygod101]

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

[@stanyt3rive725]

4th is the best. Period

[@hydyravezberdiyew676]

yeap comments section helped more than the video)) thanks

[@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.

[@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.

[@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.

[@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.

[@crypt0w1tch]

Niche like SHEESH! 😭

[@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

[@gerkim3046]

@@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'.

[@DesignCourse]

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

[@user-hj5mz4lz1x]

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

[@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

[@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.

[@Kate_WebDesign]

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

[@elenakusevska6266]

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

[@davidomar742]

not sure why you thought a spinning globe was impressive

[@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

[@gerkim3046]

the last one (5th) is the worst

[@usamasaad9334]

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

[@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 ...

[@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.

[@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.

[@delioJorge7]

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

[@usmanrasheed9010]

Where I learn UI UX designing for free...

[@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

[@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