Average vs AMAZING Web Designs - COMPARED

bit.ly/4bTD5zu 👈 Design & code like me. Use "UI2024" for 25% Off!
-- Today, I'm going to provide you with 4 excellent examples of average web design, vs designs in the same niche that go above and beyond.
Examples shown:
grabandgo.pt/
ahfire.ru/en
dontboardme.com/
openbook.im/
0:00 - Intro
0:40 - Example 1
2:43 - Example 2
5:28 - Example 3
8:03 - 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!

[@DesignCourse]

Which of the 4 did you like/dislike the most?

[@cyanbeam]

The forest fire one was 🔥!

[@kushi1515]

Yes they look more beautiful, absolutely, but if I’m looking for information, I still prefer the „boring“ one because I‘ll get my information much faster. I know I know, you already mentioned this in the video, but I don‘t want to scroll through half the site to get the info, I want two clicks, that‘s it. All this stuff moving around, it‘s distracting. Maybe I‘m too old fashioned 😄

[@DesignCourse]

That's why I think long scrolling sites need a fixed nav in place so that you can quickly reach your intended destination.

[@0-Will-0]

@@DesignCourse And a toggle for animation (Default off) for people that don't know about system preferences.

[@magnoid]

The dog boarding site probably did it best. But honestly, I can't wait for the excessive scroll animation trend to be over. They have their place, but it strikes me as mostly gimmicky and used too heavy-handedly.

[@DesignCourse]

Finger fatigue from scrolly sites can be a big UX issue. I did experience that a bit with the final example (dream site). It's a really fine line you've got to play.

[@senatrius1968]

Maybe I'm wrong but I feel like these next level interactions should be used sparingly. Majority of people visiting a website, any website, are not going to it for "The Experience." For informational websites like the smoky bear one it's fine. The animations don't take too long and they're definitely grabbing the attention which is the whole point of those informational websites. But websites like a restaurant, or that dream dictionary, just keep it simple please. First time someone visits the page, sure, the animations are nice, flashy, visitors will go "oh wow, that's pretty cool". Then visiting the page for a 10th time it's just going to be annoying and by 50th time you visit the website, either to check the menu, or the opening hours, or place the order, whatever, most people will just go "oh for fucks sake, I have to scroll through all of this shit again, just show me the menu already" and I doubt that's the intended user experience. Same with that dream dictionary, first couple times it's cool, scrolling through it for the 10th time, just show me what I'm looking for, I don't care about your $30,000 dollar animations. These fancy animation and interaction heavy websites absolutely have their place in certain settings, but it depends on what the purpose of the website is. If it's a website that you expect users to visit regularly over and over, dozens of times, maybe cut back a bit on "The Experience" and if it's something that you expect people to visit once or twice and not much more after that, go wild.

[@tocj]

Yh I agree, I believe that the animations used in the informative websites should be like whats on our phones. It's there, it's professional but doesn't dustract you or annoy you.

[@theidealneal]

I think the forest fire website is the perfect example of when to use animations like that - purely informational. However, sites that are trying to sell a service or product, I tend to prefer no animations as it's less distracting. Like if you're trying to sell a product, do you really want to force a potential customer to learn a unique UI layout, spend time waiting on loading screens, and scroll more to find what they're looking for? You're just building unnecessary conversion barriers.

[@DesignCourse]

That's what I mentioned during the 4th example in the video. The ugly site has better UX for that purpose. It's not a landing page, it's a service. As such, people want their info fast.

[@jonathanbaird1633]

Personally I hate animations on websites. They're distracting and annoying when you need to find legit information about something.

[@GabrielDoesAThing]

I've seen quite a few of these types of sites and I feel like they're all built with the same tools, because they all seem te behave the same, like in all of the 'fancy' site examples; they all require loaders, use custom scrolling behavior and speed, and are entirely animated - what I mean is the snazzy animations and scroll behaviors are used throughout the entire website, not just a specific section or element, granted these may not be a part of a 'standard' UI kit, but you can still see a consistency in the elements that feels indicative of a 'higher-level' tool or library, almost certainly a low-code to no-code one.

[@GabrielDoesAThing]

just checked, the fire website at least explicitly states it was built with something called Tilda, and while some of the others point to a firm or a designer - their sites are all kinda the same, that is to say very awwwards-like, very similar use of large fonts, scroll and hover effects, I've never delved into it too deeply, but I'd be shocked if all of these groups don't use the same resource for their sites

[@desu38]

I actually kind of hate overly showy websites. I'm not delighted, I'm just annoyed.

[@Osandajayawar]

Hey Can you do More of these Video It's Just unbelievably helpful.

[@r-i-ch]

Wish there were more "How Tos" online for these sort of UI...😊

[@user-ii7xc1ry3x]

Gotta love this kind of videos

[@AdamCanDoIt]

I absolutely love those websites, but have no idea where to start in terms of building them. I feel like I could probably add in one cool component or something, but it would look mismatched with the rest of the site. Any tips for how to make the whole site feel unified, and a similar feeling? Thanks!

[@_wtf]

I'm going in the opposite direction and advising clients, and up-and-coming designers, to "resist the urge to turn your website into an amusement park"

[@mgoodkin]

Hey Gary, great presentation on next level design. This is something I aspire to create. How do you think they made those animations and motion graphics? Do they use Javascript?

[@alperenisa]

personaly, i am going to prefer the boring one becaus' it just let me get the information, and done my work. also it opens fastly even on my lenovo z500 and google one second generation (general mobile gm 5).

[@darknezx9542]

I actually liked the ones that were less animated

[@noriller]

Its cool and all, but having to download 50+mb on a limited connection... also, not everyone is using the latest possible gear or even in a stable connection, and it can easily make it unusable.

[@jeangarant8915]

I feel like these websites were too animated

[@davidkim2016]

Meh, as long as performance is sufficient, they're definitely getting phone calls

[@furycorp]

@@davidkim2016 You don't know that until you see the numbers. Decisions on facts vs. fantasy. The fact that in some examples the user has to wait to see information creates an artificial drop in performance and frustrates a certain portion of users. From a brand perspective you can also convey "we're all pomp and fluff with no substance.... and overpriced" vs. your competitors.

[@OurLifeJourney365]

​@@furycorpthat's the biggest problem of oversaturating web design with "innovative" elemens/animations: people are not used to it, and shy away from it. Particularly when time is scarce. From a brand perspective, these websites do create lasting memory, but no one is willing to engage "too complicated".

[@Uzurpat0r]

I don't think they will get much conversions but maybe that's not the goal

[@Liquides11]

Beautiful designs, but a website is in the first place a practical information source. Like mentioned in other comments, the leas acrolls and clicks, the better. Practicial, to-the-point designs i prefer and most cliënts i work with. And then its always the question what wants your future cliënt that will visit your website and buys your product.

[@thewelnessinsider]

how to make websites like this ??

[@Tony-Red]

One important mechanism/feature that sites like this tend to miss is reducing the number of animations once the user has already seen them. We ought to do better at producing solutions that marry the delight and intrigue that can be achieved with awwwwards-type sites and the practicality that's needed by a user that's revisiting the site and just wants to get to the information as quickly as possible. I believe that any single animation that requires multiple scrolls to complete is a bad UX because why do I need to scroll 4 or 5 times just to get a card to animate into place? That's where such sites lose the plot for me. Anyway thanks for videos like this. They remind us that there a sweet spot somewhere in the middle that we should be striving towards to make the web better.

[@wilmeraderbertflorezlopez6991]

I feel more compelled to read the content on the "hidden meaning of dreams" website. On the other one, the one without animation, people are going to scroll thoughtlessly

[@s0l0r1d4]

I wanna take my work to the next level to be like that, but responsiveness have always been a concern, take for example the dream website, translating some of the elements to mobile is not impossible, but the end result will not be good from a ux standpoint. Are we going back to separating mobile sites?

[@cyanbeam]

Maybe these are good for portfolios?

[@s0l0r1d4]

@@cyanbeam for ui designers, it does look good in a portfolio for a web developer however, it's impractical and I won't exaggerate if I said it'll be a dead weight for the portfolio. In fact since I've worked in both positions before, I think designers should know a little bit about coding, not like styling experts or anything... just enough to know the limitations for translating a design from figma to an actual code. And no, the code provided by figma isn't the best practice code, it needs to be refined in production

[@arxhominum8978]

I don't get the hate for the animated websites. Example 1 had all the necessary info compiled and easily accessible, wheras the simpler counterpart had so much content, it was almost difficult to find what you were looking for.

[@philramsay8222]

It's a massive trigger for me hearing "take it to the next level" because it's used by everyone in website services at this point and I hate it!

[@Isteyak-78]

most companies don't want that much "uniqueness" and its just too much confusing for users to navigate such unique websites

[@JoshuaRobertsCreates]

Maybe an easy solution from a UX point of view could be to have two different versions of the same site. One being the more generic one based on pure UX fundamentals, and the other being the magnificently animated eye-popping version. I dont think it would take very long for a designer to make a basic site if they are capable of those unique ones. And surely if the client is willing to spend tens of thousands on the unique site, they'll be willing to add a few hundred/thousand extra for the vanilla fallback site. Then there could be some sort of link or toggle which switches between the two versions on the fly so the users can decide for themselves which one they want to use.

[@DesignCourse]

Well, this can be done automatically to a certain extent. If a person has "prefers-reduced-motion", you can modify the code so that the animations are greatly reduced or eliminated. Still though, a button for everyone else that could toggle that would be great.

[@JoshuaRobertsCreates]

@@DesignCourse thanks for letting me know about that, I had no clue there was a dedicated CSS property for it.

[@elanges93]

Is it good for seo?

[@DesignCourse]

Sure. These aren't flash sites ;)

[@StefanMetze]

I like all the examples you show, but I wonder if it is worth this enormous effort if over 70% of web users access websites with a mobile device?

[@DesignCourse]

It entirely depends on the industry. On my site, 80-90% are desktop. Having said that, those sites perform well on Mobile, too.

[@ceomentalcom157]

Plot twist: People don't care about design in 2024. Until they can get job done with the page - its perfect, and you dont need more investments. In all cases you showed even white page with default elements and black font will work... Landings are already dead and old thing, business goes to mobile apps and chatbots where UI is standardized and simple all over all platforms. Just saying...

[@mckensis]

niche is pronounced "neesh" and not "nitch" btw - was trying to work out what you were saying at first

[@farhan-app]

I think the issue I have with web design is that I generally can look at a design and know if it's good or bad, but I myself cannot come up with a good design?

[@DesignCourse]

That's always the issue when you're trying to learn a skill. We're great at observing, but not great at creating as beginners. We've observed forever, but we have not created forever. They're 2 entirely different worlds, unfortunately. The solution is to practice a lot.

[@tsap1]

❤

[@Observeruniverse]

They maybe be more beautiful, but don't have any maintaining chance for most business

[@jamesvillamar3326]

I feel like trash now

[@AeroPhonk]

How he tried to hide the condoms 😂😂

[@outpost31737]

Next level is all well and good until mobile..

[@LudovicFontaine-lb9cy]

Next level coding also xDDDD

[@kaanbargeld]

Animations are trendy, that's fine, but I find them really useless. I'm not exaggerating, they really make me sick when I look at them. I can't even check out the products on Apple's official website because of these 3D models and animations.

[@dannycabrera8466]

30K? I've built plain jane sites that were 100k+ That site had to be way more than 30k.

[@DesignCourse]

I only mention that number as a low end. Most of the agencies at Awwwards for instance, note that $30k is the minimum project they'll tackle. So yeah, likely more.

[@dannycabrera8466]

@@DesignCourse yeah one of the things that is not clear to beginner developer is that most of these sites are running on a CMS. And most of the time clients will need custom functionality for maintaining features included on the site, so not only are you creating the front end but the backend. And it adds up to a lot of work that won’t even be seen by the user.

[@Igor-vk8fl]

Again, TERRIBLE websites. The first ones are simples and the BEST. The second version is really good though....to make the user/client leave the page in the first 5 seconds.