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!

Пікірлер: 60

  • @DesignCourse
    @DesignCourse3 ай бұрын

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

  • @cyanbeam

    @cyanbeam

    3 ай бұрын

    The forest fire one was 🔥!

  • @kushi1515
    @kushi15153 ай бұрын

    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

    @DesignCourse

    3 ай бұрын

    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

    @0-Will-0

    3 ай бұрын

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

  • @magnoid
    @magnoid3 ай бұрын

    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

    @DesignCourse

    3 ай бұрын

    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
    @senatrius19683 ай бұрын

    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

    @tocj

    3 ай бұрын

    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.

  • @questfordopamine
    @questfordopamine3 ай бұрын

    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

    @DesignCourse

    3 ай бұрын

    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
    @jonathanbaird16333 ай бұрын

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

  • @desu38
    @desu383 ай бұрын

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

  • @GabrielDoesAThing
    @GabrielDoesAThing3 ай бұрын

    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

    @GabrielDoesAThing

    3 ай бұрын

    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

  • @r-i-ch
    @r-i-ch3 ай бұрын

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

  • @Osandajayawar
    @Osandajayawar3 ай бұрын

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

  • @jeangarant8915
    @jeangarant89153 ай бұрын

    I feel like these websites were too animated

  • @davidkim2016

    @davidkim2016

    3 ай бұрын

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

  • @furycorp

    @furycorp

    3 ай бұрын

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

    @OurLifeJourney365

    3 ай бұрын

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

    @Uzurpat0r

    Ай бұрын

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

  • @user-ii7xc1ry3x
    @user-ii7xc1ry3x3 ай бұрын

    Gotta love this kind of videos

  • @mgoodkin
    @mgoodkin3 ай бұрын

    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?

  • @_wtf
    @_wtf3 ай бұрын

    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"

  • @darknezx9542
    @darknezx95423 ай бұрын

    I actually liked the ones that were less animated

  • @alperenisa
    @alperenisa3 ай бұрын

    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).

  • @AdamCanDoIt
    @AdamCanDoIt3 ай бұрын

    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!

  • @Liquides11
    @Liquides113 ай бұрын

    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.

  • @noriller
    @noriller3 ай бұрын

    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.

  • @philramsay8222
    @philramsay82222 ай бұрын

    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
    @Isteyak-783 ай бұрын

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

  • @arxhominum8978
    @arxhominum89783 ай бұрын

    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.

  • @wilmeraderbertflorezlopez6991
    @wilmeraderbertflorezlopez69912 ай бұрын

    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

  • @Tony-Red
    @Tony-Red3 ай бұрын

    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.

  • @farhan-app
    @farhan-app3 ай бұрын

    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

    @DesignCourse

    3 ай бұрын

    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.

  • @s0l0r1d4
    @s0l0r1d43 ай бұрын

    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

    @cyanbeam

    3 ай бұрын

    Maybe these are good for portfolios?

  • @s0l0r1d4

    @s0l0r1d4

    3 ай бұрын

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

  • @JoshuaRobertsCreates
    @JoshuaRobertsCreates3 ай бұрын

    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

    @DesignCourse

    3 ай бұрын

    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

    @JoshuaRobertsCreates

    3 ай бұрын

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

  • @ceomentalcom157
    @ceomentalcom1573 ай бұрын

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

  • @StefanMetze
    @StefanMetze3 ай бұрын

    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

    @DesignCourse

    3 ай бұрын

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

  • @mckensis
    @mckensis3 ай бұрын

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

  • @elanges93
    @elanges933 ай бұрын

    Is it good for seo?

  • @DesignCourse

    @DesignCourse

    3 ай бұрын

    Sure. These aren't flash sites ;)

  • @Observeruniverse
    @Observeruniverse3 ай бұрын

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

  • @jamesvillamar3326
    @jamesvillamar33263 ай бұрын

    I feel like trash now

  • @tsap1
    @tsap13 ай бұрын

  • @outpost31737
    @outpost317373 ай бұрын

    Next level is all well and good until mobile..

  • @AeroPhonk
    @AeroPhonk3 ай бұрын

    How he tried to hide the condoms 😂😂

  • @kaanbargeld
    @kaanbargeld3 ай бұрын

    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
    @dannycabrera84663 ай бұрын

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

  • @DesignCourse

    @DesignCourse

    3 ай бұрын

    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

    @dannycabrera8466

    3 ай бұрын

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

  • @LudovicFontaine-lb9cy
    @LudovicFontaine-lb9cy3 ай бұрын

    Next level coding also xDDDD

  • @Igor-vk8fl
    @Igor-vk8fl3 ай бұрын

    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.

Келесі