It's time to talk about these UI trends

Поділитися
Вставка
  • Опубліковано 17 лис 2024

КОМЕНТАРІ • 655

  • @juxtopposed
    @juxtopposed  Рік тому +296

    What do you guys think about these trends? It's time to share some unpopular opinions. ✨

    • @Poldovico
      @Poldovico Рік тому +41

      This just popped up in my recommended, this very much isn't my crowd, and since you asked I'm going to be a grognard about it.
      To me, these things look like ads, because in most situations I see them in, they are, and ads annoy me.
      In non-advertising-related contexts, these layouts and effects still invoke the intense annoyance that I feel towards advertising, and therefore on an emotional level they put me off whatever uses them long before I can be positively affected by any of their more practical merits.
      That said, even when I push past that annoyance, I find that in the way I use the web, such designs prove more often an obstacle than a help. The most immediate reason I can identify for why is the frequent lack of a clear index in a conventional location.
      My ideal interaction with a website is a lightning-fast affair: I quickly scan a complete and informative table of contents, open the one thing I came for in a new tab, and off I go on my merry way with the information I needed at my fingertips, never having to think about the rest of the website again. Anything that gets in the way of that process just accumulates as regret over choosing that particular website. Attempts by the site to "curate my experience" mainly surface the feeling of being manipulated, and that feels unpleasant and uncomfortable.
      In my mind, a website should be an open book, unafraid to direct the user to what they came for in the most expedient way possible. Hiding the data behind cute animations and curated layouts seems to me as absurd as a dictionary in flowery prose.
      That's not to say a site can't look beautiful. It can and as much as possible it should. Just please make that happen in a way that doesn't sacrifice usefulness. I'll drive an ugly car a thousand times if I have to, but I won't replace it with a beautiful statue of a car that doesn't get me to the office.

    • @Poldovico
      @Poldovico Рік тому +13

      Actually, I tell an accidental lie. I just realized I am subscribed from the color picker video. That video was very good and very clever, and I am glad to be reminded of it.
      The topic of this video just happens to be a compilation of everything that drives me up a wall about the modern web.

    • @richardmhain
      @richardmhain Рік тому +1

      Awesome! Good to see those cool ui, especially the 3d stuff. Looking forward using some of them someday :)
      Great job, thanks for sharing. Cheers!

    • @JerryLikeTheMouse
      @JerryLikeTheMouse Рік тому +19

      Those "cool" websites are annoying to use. Even Apple's product presentations on their website are leaning too far into this kind of design.

    • @osademe
      @osademe Рік тому +2

      Is there a course on this? My web pages are just bland 😞

  • @MrGrayNk
    @MrGrayNk Рік тому +5290

    As a user, I can't stress this enough: never ever ever highjack my scrollbar. I couldn't care less if it's boring or not to scroll, I just want all pages to behave the same. Don't do "smooth" scrolling, definitely don't switch from vertical to horizontal scrolling. Loading on demand / scaling during scrolling is fine, but those other effects are the worst of trendy effects IMO

    • @mandeadhungry
      @mandeadhungry Рік тому +254

      I agree, as someone who can't do those effects now I have the reason not to do them. lol

    • @anushgopalakrishnan
      @anushgopalakrishnan Рік тому +78

      what's wrong with horizontal scrolling? I think it's really cool

    • @wittywolk
      @wittywolk Рік тому +68

      I really like smooh scrolling, but I do it without highjacking.

    • @hermannpaschulke1583
      @hermannpaschulke1583 Рік тому +321

      And also don't hijack the browser back button

    • @majoralter
      @majoralter Рік тому +12

      ​@@anushgopalakrishnanI also don't get it 😂

  • @gameofpj3286
    @gameofpj3286 Рік тому +492

    Actually one important thing: If you add lots of animations to your site, please make sure prefer reduced motion works.
    Thanks

    • @ego-lay_atman-bay
      @ego-lay_atman-bay Рік тому +34

      I agree, but I also say that you should just put a toggle on your page, instead of only relying on the browser, because for some reason, I can't find that setting on mobile, and websites that have a lot of animations, just lag so much on my ipad. I'd say the nintendo websites are a good example, except for their menus, they're terrible on mobile.

    • @kijeenki
      @kijeenki Рік тому +8

      @@ego-lay_atman-baysettings>accessibility>motion

    • @theseangle
      @theseangle Рік тому +3

      ​@@ego-lay_atman-bayyeah it's most of the times configured globally in your device, not in the browser. The browser then just picks that info up from your device settings.

  • @johnw7707
    @johnw7707 Рік тому +430

    As a web developer, I find that the more javascript you have to load, the worse it gets. Not only because of the overhead, but because CSS and html standards were carefully designed for usability and accessibility, and javascript is your escape from all that. As a user, I actually don't mind the snazzy CSS effects as long as I feel like I'm navigating a website

    • @yonoseespanol
      @yonoseespanol Рік тому +9

      Largely true, except some UI components require javascript for accessibility (dropdowns, for example).

    • @sorcdk2880
      @sorcdk2880 Рік тому +5

      I seem to recall finding (or at least looking for) some css way to make dropdowns. Possibly some magic related to hover, like having different (and interactable) styling when its parent or itself is hovered over. I may be remember wrong, because I did end up not using it though, as it turned out to not be needed for the application anyway.

    • @kevgoeswoof
      @kevgoeswoof Рік тому +4

      ​@@yonoseespanolthough a simple dropdown should only add a few hundred bytes of uncompressed JS, which is negligible because that load can also be deferred.

    • @yonoseespanol
      @yonoseespanol Рік тому

      @@sorcdk2880 CSS-only dropdowns are possible, but are not accessible.

  • @roccociccone597
    @roccociccone597 Рік тому +817

    Thing is, instead of adding useless loading animations or even loading screens, focus on building your application with a focus on performance and you won’t need any of this. I’m a professional software engineer and I guarantee you response times and loading times contribute more to the user experience than any fancy mouse cursor or useless scrolling animation. We spend so much time making things look “good” and completely forget performance implications.

    • @juxtopposed
      @juxtopposed  Рік тому +117

      Totally agree with you. Still, I think such projects mainly aim to 'look good', so unfortunately, they don't seem to care about 'users'.

    • @roccociccone597
      @roccociccone597 Рік тому +64

      @@juxtopposed that’s because and I don’t mean to be offensive, those projects are often written mostly by people without a good knowledge of the actual technology they use, or they just get pressured into ignoring it by project management. Often I see horrendous JavaScript code that just strings together libraries, without knowing what it actually does under the hood.

    • @Stroopwafe1
      @Stroopwafe1 Рік тому +6

      I agree with you, but it's still better to have, say, a progress bar that only shows up for half a second, than it does displaying nothing for that half a second.
      Yes focus on performance and optimisations, but don't forget about informing the user what's happening

    • @roccociccone597
      @roccociccone597 Рік тому +13

      @@Stroopwafe1 of course just display a basic spinner and that's all you need. What I meant is theese interactive or special loading screens.

    • @jessemorningstar
      @jessemorningstar Рік тому

      "I'm a *professional* software engineer"
      👉Red flag. 🚩🚩🚩🚩🚩🚩🚩
      Anyways, everything exists on a spectrum: you can't put a blanket statement on these techniques/trends and say they're all bad or useless.
      As in all things that require taste you'll find more bad examples than good, just as there is more bad music being produced than good.
      Saying that all these techniques are useless is just snobbism.
      These sites winning awards are judged by people of very high artistic taste and technical competence.
      And they're being pinned and bookmarked and collected by designers because they have something other sites don't. That's why people turn to them for inspiration.
      So within their context or genre they're pushing the boundaries in exactly the right ways.
      At the end of the day, differentiation is what really wins and sells.
      As the legendary Tyra Banks teaches in her Harvard business school course: different is better than better.
      Some food for thought.
      PS: all this fuss about load times is nice, but have you ever gone to a nightclub, or to the launch of an anticipated product, or to a concert, or to the opening weekend of a summer blockbuster?
      How long do you think people wait standing in lines?
      Go figure right?

  • @kurtmueller2089
    @kurtmueller2089 Рік тому +221

    Peak UI design is archived only by those old academic university websites that include a ~ (tilde) in the URL and contain no CSS or JS whatsoever. Usually they contain the information about which version of Apache webserver they are running on in the footer of the site. The best ones also contain "last updated on XX/YY/199X"
    Even on dial-up, those were always blazingly fast.

    • @realjame
      @realjame Рік тому +2

      Well said!!

    • @Necrocidal
      @Necrocidal Рік тому

      No need for a search backend on those pages either, the whole page is a giant listing so Ctrl+F to find anything

    • @thezipcreator
      @thezipcreator Рік тому +26

      pure html (or almost pure html, maybe with like 20 lines of css to center text, change the font, or whatnot) is the best website design paradigm; it's usually always good for the user experience (unless the content is just random bullshit, ex. time cube)
      also imo all websites should work without javascript; disabling should just cause normally interactive elements (e.g. liking a video on youtube) to refresh the page. the small forum website Raddle is built with this mindset and it's so much better for it

    • @traveller23e
      @traveller23e Рік тому +6

      @@thezipcreator This, 100%. I sometimes end up using Lynx, e.g. when I have problems with my main browser or I just happen to be in a terminal at the time, and it's really depressing how many websites fail to function without js. First they try to set about ten or fifteen cookies, then they load the page but the top half is the cookie advisory (obviously) and when you scroll down you have weirdly formatted header menus (sometimes duplicated), and then the body of the site but none of the links work.

    • @GoogleDoesEvil
      @GoogleDoesEvil 11 місяців тому

      Sure they're fast but they look like garbage. Websites from the 2000s look and work fine, and they would be way faster than most websites today. There was still a good chunk of people on dialup those days after all.

  • @TheLexikitty
    @TheLexikitty Рік тому +622

    As a legally blind person that works in IT, I’ll never understand tiny text on websites that then block test size manipulation, or apps that ignore system fonts, I’m all for the large text haha

    • @naturegirl1999
      @naturegirl1999 Рік тому +19

      Yes, I’m also visually impaired and don’t know why text is small

    • @tomekk.1889
      @tomekk.1889 Рік тому +2

      What work in IT do you do?

    • @aftabqureshi7437
      @aftabqureshi7437 Рік тому

      +1@@tomekk.1889

    • @theseangle
      @theseangle Рік тому +7

      They probably use viewport based units for font-size. That's a very bad practice unless you at least tame it with a clamp

    • @TheLexikitty
      @TheLexikitty Рік тому

      @@tomekk.1889 Infra and network engineering

  • @ego-lay_atman-bay
    @ego-lay_atman-bay Рік тому +196

    As a pc, android phone, and slow ipad user, all these modern effects are terrible, and give me a degrading experience on many websites. I'm not even joking, these modern websites usually lag a whole lot on my ipad, which makes me click off the website. Horizontally scrolling is also the epitome of all evil, I mean, it's just super disorienting, especially on mobile. I mean, swiping up scrolls right? What kind of black magic is that? Plus, hijaking the scrolling, like stopping the scrolling to do some stupid animation that I don't care about is awful, and should never be done, because it makes me think I've hit the bottom of the page. Custom cursors are also terrible, especially if it's just an element that follows the mouse, because when it follows the mouse, it actually lags behind the mouse. Custom cursors are fine on game sites, but not on anything else. The biggest gripe I have is, it takes away any personalization that the user might have already done to make their experience better for them, for example, I made my cursor very large and black because I found it easier to find the mouse when it's that big.

  • @Issvor
    @Issvor Рік тому +208

    It's pretty crazy that almost every single site on awwwards look the same, and almost all have poor UX, or at least subpar UX. I honestly thought I was going crazy because "how could it win site of the month with bad UX?"
    Then after a few weeks of visiting I realized it's a design award site. Awwwards doesn't care about how intuitive a site is, or if it makes any actual sense for the end user.
    With that being said, the designs and efforts are very cool, and actually creating most of the effects is very impressive with vanilla JS, so I like to look for inspiration and try to recreate some design and features for the challenge

    • @Linuxdirk
      @Linuxdirk Рік тому +21

      It’s like “Unixporn” or absurdly complex setups in your favorite editor or IDE. It’s nice to look at, it flashy, and you can make great UA-cam videos with it. But in reality none of this is really usable.

    • @realopvisual
      @realopvisual Рік тому

      Awwwards, Behance, Dribbble are like fashion shows for the creative industries, they're fun to look at sometimes and where we go to for inspirations. But honestly they're full of bad practices and things that should never be implemented in real products.

    • @enkvadrat_
      @enkvadrat_ 5 місяців тому +1

      @@Linuxdirk those you do not force other people to use so I would say it is not a problem there

  • @trimonmusic
    @trimonmusic Рік тому +429

    Using CSS to add "scroll-behaviour: smooth", I have no problem with - it's not generally considered scrolljacking and is actually helpful to help the user understand how far they have jumped when navigating.
    I don't particularly mind horizontal scroll, when used tastefully and for more visual/marketing-focused sites.
    But if you modify the scroll speed or change the scroll friction via JavaScript, it's a race to see whether I can complete my task before I abandon your site for poor usability.
    I'm a web developer, my browser is like a car, I know how I expect it to act and if you mess with the pedals and gearbox I will not be traffic on your site for long.

    • @juxtopposed
      @juxtopposed  Рік тому +51

      Couldn't agree more.

    • @Linuxdirk
      @Linuxdirk Рік тому +21

      I consider sites forcing me to scroll how THEY want as hostile.

    • @TheBswan
      @TheBswan Рік тому +18

      Horizontal scroll is often non-conforming with accessibility guidelines, specifically WCAG 2.1 SC 1.4.10 Reflow. "Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for [vertical scrolling content at 320px width and horizontal scrolling content at 256px height". There are a few exceptions made for particular types of content like data-grids, but it's generally advisable for all content to fit in a single, vertically scrolling column.

    • @charlesm.2604
      @charlesm.2604 Рік тому +6

      ​@@TheBswan Horizontal scrolling breaks the flow of the page, users don't appreciate when they aren't in control.
      I think there are use cases where you want to display content in a horizontal fashion because it fits your layout.
      Sections like "recent blog posts cards", or "customers reviews". For those instances it makes sense to have overflowing rows as opposed to taking additional vertical space since the user is already familiar with the message of that content and would probably want to access the next sections, continue his navigation.
      But is horizontal scrolling necessary ? You could use carousels or Netflix-like sliders with navigation buttons. These should be prioritized.

  • @MobiusCoin
    @MobiusCoin Рік тому +222

    As a young developer, I used to cut my teeth on this kind of work. It was a showcase of my technical prowess. As a senior developer, I can't stand these sites anymore. None of them feel right. I always feel like I'm relearning how to use my computer just for this one context. Web Design tutorial content on UA-cam doesn't help in this regard. They keep pushing this kind of flashy design without any consideration of the user experience.

    • @owcaandroid
      @owcaandroid Рік тому +5

      Great point. I think this is like all of the trends in any field. That something was a trend and one technology rules but as a time goes by the visual demand is higher and higher because people tend to be "innovative" and creative and want to be remembered so when one tech replaced another the whole loop starts over. Sooo maaaaybeee we will face another tech soon and whole UX will reset to default, truly friendly to user.

    • @bokmcdok
      @bokmcdok Рік тому +6

      Makes me think of stacking shelves at a supermarket. I'd get into a flow opening boxes and quickly stocking shelves. That flow would be interrupted when I would come across a specially designed "easy-to-open" box, since I'd have to spend time figuring out how to open it. These flashy UI techniques are the "easy-to-open" boxes of websites.

  • @neo_uwuowo
    @neo_uwuowo Рік тому +238

    i feel like one of the worst thing a site can do is make it so if you hit the back button on the site it just sends you back to it. you have to right click the history to go back to whatever page was before it.

    • @thegardenofeatin5965
      @thegardenofeatin5965 Рік тому +77

      Yeah where it loads a page that redirects to another page in an effort to essentially disable the back button? Yeah that can die in a pit of burning spiders.

    • @CubicApocalypse128
      @CubicApocalypse128 Рік тому +37

      @@thegardenofeatin5965 that's unfair to the spiders, can't we just fill the pit with corium?

    • @Tetopettenson1
      @Tetopettenson1 Рік тому +11

      ​@@thegardenofeatin5965 what did the spiders do

    • @jmalmsten
      @jmalmsten Рік тому

      A site that messes with the back button is an intant ban and boycott for me. I do not trust anyone that would dare touch such basic functionality.
      Dear dog I hate sites that use tricks like that.
      It really.. truly. Should be goddamned illegal to mess with the back button. Prison time equivalent to tax fraud on nation wide scale or something.
      F those sites...

    • @LittleGoblinBoi
      @LittleGoblinBoi Рік тому +12

      Wait, it's a thing they actively do? I just thought my internet is slower than usual. Holy fuck, that's actually evil

  • @NFSHeld
    @NFSHeld Рік тому +111

    One of the things I think needs to be focused more on are user preferences, such as "prefers dark theme" or "prefers reduced motion". Because making your website good for your taste is easy, making your website also respect the taste of your customers is a lot harder.

    • @maggie3060
      @maggie3060 Рік тому +10

      Its not just about the taste of the customer, its about accessibility. Moving images can make people nauseous and flashing images can give people seizures. Having a reduced motion mode where the motion is fully controlled by the end user (eg scrolling) benefits them and others.

    • @traveller23e
      @traveller23e Рік тому +1

      Absolutely. And if your users have to scroll a meter to get to the end of the first sentence, this particular user will mutter "fuck this" under his breath and go to find a decent site with the same information.
      This is not unrelated to the tabs vs spaces argument. I say tabs on documents to be edited by multiple people, because people like them to be different sizes.

  • @boiimcfacto2364
    @boiimcfacto2364 Рік тому +303

    God bless this new trend of entertaining, funny and informative web dev UA-camrs. Hyperplexed and Fireship (and now you) are my go-to channels for dev-related content and I love your style of humour so please keep making more of these!

    • @aryansoni57
      @aryansoni57 Рік тому +10

      finally hyperplex getting recognition he deserves

    • @trimonmusic
      @trimonmusic Рік тому +9

      @@aryansoni57 hyperplexed has almost half a million subs, he's getting it! 😁

    • @iambluexd
      @iambluexd Рік тому

      Dont worry, theyre gonna fuck themselves up like every fucking new trend

  • @tr7zw
    @tr7zw Рік тому +111

    The best are websites that just display NOTHING unless you start allowing stuff in NoScript. Bonus points when apparently the entire CSS is done via js, so it's just an unformatted mess without allowing the js to run.

    • @rollinontheboard
      @rollinontheboard Рік тому +2

      is this bait

    • @colly6022
      @colly6022 Рік тому +8

      @@rollinontheboard no, its called a joke :)

    • @rollinontheboard
      @rollinontheboard Рік тому +1

      @@colly6022 i was just making sure because you should never feed the trolls

    • @louispluspizza
      @louispluspizza Рік тому +2

      ​@@rollinontheboardYou sir are one clever and careful guy!

    • @Jono997
      @Jono997 Рік тому +2

      ​@@rollinontheboardI feel like asking if it's bait is in and of itself feeding the troll if it is bait, but that's just me.

  • @ElvenSpellmaker
    @ElvenSpellmaker Рік тому +24

    Bento boxes that load as you scroll are a right pain. They never load in time (even on decent Internet) before you've scrolled past them and then realise you've missed a chunk of content.

  • @Aiden-ham
    @Aiden-ham Рік тому +27

    I don't think I've ever seen one of those pages where the animation progresses as you scroll that actually looks good

    • @anny8720
      @anny8720 10 місяців тому

      ⁠​⁠​⁠​⁠​⁠@@Aiden-ham on the mobile apple page the animations are tied to scrolling, I wish the non interactive portions became static after scrolling through the first time, it's really annoying to have that 'explore more' button and every horizontal scroller disappear and reappear with a whole animation when scrolling back and forth. Minus the animations the UI of the website is actually pretty good and very easy to read

  • @LifeAquaticSteveZissou
    @LifeAquaticSteveZissou Рік тому +103

    There's a lot of what I like to call Hipster UX Bullsh*t in these designs. I'd have a serious conversation if anyone on my team came to me with trying to pass off a lot of this as usable.

    • @hypelucas
      @hypelucas Рік тому +3

      you gotta stop using the term hipster bro, it really dates you

    • @LifeAquaticSteveZissou
      @LifeAquaticSteveZissou Рік тому +28

      @@hypelucas Agreed, that was the point. These design paradigms are dated.

  • @TotallyNotK0
    @TotallyNotK0 Рік тому +30

    Most of those modern day website designs hurt my eyes. I don't know if it's just me, but I feel like simpler designs (with some occasional smooth animation or maybe a few effects) is better than a website with a ton of stuff going on

  • @ddnava96
    @ddnava96 Рік тому +9

    Something that web designers SHOULD keep in mind is that laptops and touchscreens exist. Macbooks, Windows laptops with precision trackpads and touch screens can actually input HORIZONTAL scrolling, but several websites have horizontal elements that can ONLY be scrolled by clicking annoying buttons on each side of those elements, like the thumbnail rows in Netflix. The main page shows you several rows of thumbnails, one for each section, but scrolling those rows horizontally can only be achieved by clicking buttons in the far ends of each row even when I have an inout device that's perfectly capable of doing horizontal scrolling

  • @dhillaz
    @dhillaz Рік тому +250

    I think of these designs as 'spices' to be sprinkled in moderation on top of a content-focused design.
    Imagine going to a restaurant and being served a chicken wing buried under 2 ounces of paprika powder. Some users will refuse to eat it, some users will patiently brush the powder off, but all users will feel discouraged from visiting your restaurant again.

    • @juxtopposed
      @juxtopposed  Рік тому +21

      So true haha

    • @technoboop1890
      @technoboop1890 Рік тому +23

      thats a strangely fitting analogy

    • @solidad-29
      @solidad-29 Рік тому +6

      Well there's is a Chinese dish where cooked chicken is burried in chili pepers and you dig through those to find the Chicken. It's a good dish served with beer. 😅

    • @xDLiLi1337
      @xDLiLi1337 Рік тому

      just eat the chili@@solidad-29

    • @xelith6157
      @xelith6157 Рік тому +1

      ​@@solidad-29 Good counterpoint lol

  • @patricknelson
    @patricknelson Рік тому +11

    Snazzy effects _definitely_ have their place. That said, for _most_ sites... less is most definitely more. Speed and efficiency is key, especially for ecommerce or any very content heavy websites.

  • @aliengeo
    @aliengeo Рік тому +31

    My hot take is that it doesn't matter how pretty your site is on the optimal viewing device if on Joe Schmoe's low-end laptop running your non-preferred browser (I've heard professional designers act as if Chrome is the only thing that exists) it looks and runs like a potato. I see so many design trends that people talk about as being great and I can't relate because my experience of them is how they lag, how they break other things, etc. My hobbyist web design work involved trying to optimize from the very beginning because of limited storage and I think it's a good habit to have gotten into.

  • @du42bz
    @du42bz Рік тому +60

    I'm still all for bringing back pure html and minimal css websites

    • @TokyoXtreme
      @TokyoXtreme Рік тому +7

      Probably explains why Markdown is so popular. Nothing like an instantly appearing hierarchical document that gets right to the point.

    • @Cathowl
      @Cathowl 11 місяців тому

      When I actually start putting content on my site it's going to be so simple. Near naked HTML with some limited CSS primarily for making sure images are in the right place on the screen without abusing tables.

  • @Powertampa
    @Powertampa Рік тому +32

    Loading screens on websites should never ever be a thing. If it needs that much data to require one you are doing something wrong.

  • @Blio_
    @Blio_ Рік тому +6

    So many sites have literally no idea what subtlety means like IM NOT HERE FOR A LIGHTSHOW IM HERE TO HAVE YOUR SITE ACTUALITY *LOAD* WITHOUT SAFARI AUTO-RELOADING YOUR PAGE

  • @GoldenBeholden
    @GoldenBeholden Рік тому +18

    Websites that take over my scroll bar bother me irrationally.

  • @CentreMetre
    @CentreMetre Рік тому +6

    Another thing about custom cursors is them not being done correctly. One that springs to mind is one of the minecraft wikis where the cursor is a sword, but instead of the tip of the cursor (the pixel that clicks on stuff) it was somwhere in the middle of the sword. (This is from memory it couldve been a different wiki or site but has definitly happened to me)

  • @cristiancazares
    @cristiancazares Рік тому +3

    I've been struggled for weeks building a website for my porfolio as software engineer... AND ALL THIS TIME I WAS DONIG A BENTO GRID WITHOUT KNOWING. Thank you sooo much! Now I know how to look for more inspiration and whatnot!

  • @1e1001
    @1e1001 Рік тому +5

    my method for loading bars, buttons, and other fancy effects is to make sure there's a no-javascript fallback and add a transition off the fallback if javascript manages to load (not everyone has it enabled!), for example replacing a static css animation with one that reacts to your mouse cursor

  • @schockocraft4897
    @schockocraft4897 Рік тому +32

    The worst thing ever is that smooth scroll still happens when i am clicking a section link, or even worse when i jump between text search results (ctrl+f).
    Nothing worse then, when looking for the right search result and therefore stepping through a dozen of them, spending half the time looking at this godawful scroll animation

    • @juxtopposed
      @juxtopposed  Рік тому +1

      That's a great point you mentioned

  • @amir-ziaei
    @amir-ziaei Рік тому +13

    I just discovered this channel and I am surprised by the quality of the content. It deserves a lot more recognition. Well done!

  • @Zooiest
    @Zooiest Рік тому +74

    Discord's desktop client loads 26 megabytes of JS when it starts, which is 80% of all resources. On my current laptop, the TTI can reach several minutes.
    I both love and hate JS, and I wish people would start using simpler and smaller libraries and style sheets
    Also, there's a ton of hidden potential in hand-written SVGs: I made infinitely scalable icons for a dashboard UI and pride flags with SVG, and all of them combined took up only a few kilobytes

    • @juxtopposed
      @juxtopposed  Рік тому +7

      You're right, and still JS itself might not be the problem in many cases. We can use lighthouse and optimize the page speed, and many sites with heavy scripts don't really do that. I think that's the main issue.

  • @valrossenOliver
    @valrossenOliver Рік тому +6

    Finally someone else who mentions this. Tried to look for a new library for some thing at work and the scrolling made the entire screen jump around like an action sequence. Imagine me and the other two software engineers just looking confused while thinking "so, what're the specs?", "did they show information during this slideshow that we missed?", "what just happened?".
    Plain, easy to read, and A SINGLE DIRECTION TO READ IN please.

  • @gagaoolala9167
    @gagaoolala9167 Рік тому +4

    Since I have a pretty puny laptop, every time I use an overdone site like this, my browser slows to a crawl and completely ruins the UX. I want nothing more than to close the site immediately. I really appreciate a well-crafted site that doesn't slurp up my CPU time.

  • @sssamalander
    @sssamalander Рік тому +90

    Grid implementation could be much improved at 3:22 - First of all, I’d make the entire thing a grid, then control how big each box is with grid-column/row (e.g if it should go across to columns it should be grid-column: span 2;) Also, you should use fr instead of auto, and you can do repeat(5, 1fr) instead of 1fr 1fr 1fr 1fr 1fr

    • @oluwatayo.x
      @oluwatayo.x Рік тому +12

      yeah that’s what i was thinking as well. you don’t have to use flexbox cause the entire layout can be made with grid.

    • @jacoblockwood4034
      @jacoblockwood4034 Рік тому +3

      Was looking for this comment, thanks

    • @YuriG03042
      @YuriG03042 Рік тому +1

      it was just a simple example, it's not that deep

    • @jacoblockwood4034
      @jacoblockwood4034 Рік тому +8

      @@YuriG03042 I disagree, the creator is showing this as the best way to make layouts like this, especially since these videos seem to be somewhat aimed at beginners (given all the tutorials)

    • @NutchapolSal
      @NutchapolSal Рік тому

      for real

  • @Jet-Pack
    @Jet-Pack Рік тому +3

    As a user I have javascript disabled by default. Loading screens make me leave the page, custom cursor is a no go, overriding scroll is also a no go. Sure its fun the first time hut i immediately get distracted and look what happens if i unlock my scroll wheel and spin it at 1000 revolutions per second. I also click any link with middle mouse button and never use the back navigation. If your page can handle all that then great

  • @Jonas-Seiler
    @Jonas-Seiler Рік тому +38

    Personally, I like to make a distinction between ordinary websites and interactive web apps.

  • @DVSS77
    @DVSS77 Рік тому +1

    I am binging all of your videos right now. The editing, storytelling and simplicity in the explanations is just amazing. easily the best channel I have found that's related to frontend design , UI/UX

  • @JacobKinsley
    @JacobKinsley Рік тому +3

    I wish Websites were just like a brochure and not like a fucking powerpoint

  • @Stdvwr
    @Stdvwr Рік тому +2

    I'm so thankful that none of the websites that I use have any of the elements depicted in this video

  • @fdwr
    @fdwr Рік тому +2

    Faux pas for me:
    - smooth scrolling (I explicitly turned that off, and so do not override it)
    - large gaps of wasted space
    - zooming things in and out as you scroll
    - middle click not working to open new tab
    - preventing text selection

  • @Oneiroi0
    @Oneiroi0 Рік тому +1

    Ngl, The amount of high quality production in this video is amazing.

  • @CoolJRT2009
    @CoolJRT2009 Рік тому +4

    The loading screen I use is the browser loading images into the spaces already set out by CSS, just like the old days because that actually works from a UX standpoint

  • @snz_iisera
    @snz_iisera Рік тому +8

    As an average user, any time scrolling isn't moving the page up, like it suppose to, i instaclose the tab. Im not letting designers take away control from me. 😈

  • @be12
    @be12 Рік тому +5

    Very informative! I'd noticed this tendency now toward extra large font, but not so much the fancy scrolling (thankfully).

  • @letmewatch.
    @letmewatch. 4 місяці тому

    I love how you include little how-to's whilst you're presenting. You're targeting multiple audiences such as myself. I just learnt about the image blend

  • @hlavco
    @hlavco Рік тому +3

    I still hate infinite scroll websites. Sometimes I want to be able to navigate by dragging my scroll bar, and these sites keep changing its range.

  • @MarvinJWendt
    @MarvinJWendt Рік тому +14

    Your videos are so well-made and informational. Keep going like that, and you'll be in the top designer channels, for sure!

  • @honzapkcz
    @honzapkcz Рік тому +1

    As a user with potato PC, I hate when I have to wait 4 minutes to load Microsoft Office dashboard (no joking) then click on something to wait another 30 seconds to do it's fancy stuff to actually get to information I wanted before 10
    minutes.

  • @Roxor128
    @Roxor128 Рік тому +7

    A tip regarding buttons you left out: SHADE THEM! Make them look like a 3D object, not a flat-coloured rectangle. If there's one thing Microsoft got right in 1990s versions of Windows, it was making it clear what's clickable. Pity they forgot it when they made Windows 8 and brought back the flat UI from the 1980s.

    • @tookitogo
      @tookitogo Рік тому +2

      Yeah. Microsoft and Apple have both fallen down the flat UI rabbit hole, and IMHO the usability of all their products has suffered as a consequence. :(

    • @Roxor128
      @Roxor128 Рік тому +2

      @@tookitogo And every clueless dolt playing follow-the-leader, which is by far the worst thing about it. About the only kind of program that bucks the trend is games.

    • @tookitogo
      @tookitogo Рік тому +2

      @@Roxor128 Yup, totally agree.

  • @misho_dev
    @misho_dev Рік тому +2

    Impressed by how many quality vids you're releasing! Great point about those 'award winning' sites usually being product or portfolio sites too

  • @lance740
    @lance740 Рік тому

    I absolutely love the loading screen idea. It will most likely never appear because technology is just good but I still think it adds an immersive layer to the site.

  • @Sammysapphira
    @Sammysapphira Рік тому +24

    I can't stand this meta of everything being HUGE... it's so obnoxious. Screens are so big these days, why only show 1 thing at a time? Why do I have to scroll..scroll..scroll..scroll..scroll..scroll.. until I find the info I want.

  • @karanea
    @karanea Рік тому +14

    As a user, I just want to see the things that I visited the site for. Just give me the information in a way that is easy to read and doesn't require me to scroll if avoidable.
    When I am looking for a cooking recipe I just want to see the recipe and not 33 pictures, 17 titles and a story about the author. The less time the page needs to load, the better.
    EDIT: 90% of the time JS makes websites worse for the user imo

  • @j.9481
    @j.9481 Рік тому +8

    personally I really hate it when websites make fonts too big. I want to see more than a sentence at a time!!! do you think I have the ram to remember information that gets catapulted off the screen immediately when I continue reading >:-/

    • @chaosmagican
      @chaosmagican Рік тому +1

      The worst part is that they often somehow manage to destroy zooming, I zoom out, text stays the same

  • @rodrigoDSTC
    @rodrigoDSTC Рік тому +1

    I mostly agree but the fact is that most of the websites that require these fancy JS UI tricks are not e-commerce, and therefore they don't need to be as performant as an e-commerce. They just have different targets and purpose.

  • @Albert-lp8ql
    @Albert-lp8ql Рік тому +3

    I just started to learn UI/UX design and found this video and your channel. I really like your Fireship-style video with great content and practical instructions! Subscribed!

  • @ultrahalf
    @ultrahalf Рік тому +9

    scroll hijack should be a crime

  • @TheRealJoshuaYang
    @TheRealJoshuaYang Рік тому +2

    Wow, I'm just a beginner to web design and this was such a comprehensive video!

  • @Spikehead777
    @Spikehead777 Рік тому +3

    This is another reason I use things like NoScript.

  • @32pennies29
    @32pennies29 Рік тому +2

    Old basic plain html/css is the way I like it

  • @voidmind
    @voidmind Рік тому +2

    Your UA-cam channel is a great argument for quality over quantity (speaking about the low number of video). 21.6k subs after just 5 videos is pretty good growth

  • @RushabRayalwar
    @RushabRayalwar 2 місяці тому

    This channel is a blessing for front end developers ❤

  • @theoutsiderprod
    @theoutsiderprod Рік тому

    Very nice video. I think a greatly under discussed part of these modern ui is the accessibility. Everybodys vision degrades, so
    taking into consideration readability, and making sure your website doesn't break when zooming in not only helps visually impaired people like myself, but it futureproofs for everybody. Accessibilty really needs to be improved, far more than trendy animations.

  • @poooooow
    @poooooow Рік тому +2

    I remember Awwwards promoting sites with great UI and UX - now it just feels like a fever dream scrolling. Nothing to get inspiration from OR even remember what site I was watching/it was trying to sell me.

  • @Malweis
    @Malweis Рік тому +2

    Just to comment out there are pretty easy to make Onscroll effects with framer motion. You basically just set what animation should trigger when the element passes the viewport

  • @galvinvoltag
    @galvinvoltag Рік тому

    I love that running button and will definitely use it.

  • @johnson941
    @johnson941 Рік тому +1

    As a completely normal user, my experience is, that the websites where I most quickly get what I want is the websites without any of these trends. Just give me the information I need and stop wasting my time and my computer’s resources!

  • @kiricappuchin
    @kiricappuchin Рік тому +1

    JS is good in moderation for a cool effect or two. When the whole site becomes dependent on it, I’m really not a fan…
    Great vid! I really like your style 👍

  • @zoomxrist
    @zoomxrist Рік тому

    The content quality is amazing! First I thought it's a channel with the millions of followers. Thanks for the video))

  • @ohno5559
    @ohno5559 Рік тому +1

    I sure wish websites would stop trying to "immerse" me while I'm just trying to use them. I do not want to be immersed. Why would I want that.

  • @TheRoben
    @TheRoben Рік тому

    Am I one of the few who love bento layouts? they take longer to read but I love having all the most important parts summed up in 1 screen. And it looks great.

  • @itryen7632
    @itryen7632 Рік тому +3

    I still feel like i prefer websites without lots of effects.

  • @NikitaKaramov
    @NikitaKaramov Рік тому +11

    For me, nothing screams ‘unseriousness’ more than funky hover effects on buttons. Whenever I see something like 5:27, I immediately think that the company spend 99% of its budget to design and implement this button, and nothing was left for the actual product. Only startups that _desperately_ need to sell you their stuff will do something like this :D

    • @dhillaz
      @dhillaz Рік тому +1

      I think the effect is specifically useful for activities on an informal site/app where you want to reward a user for performing an action, and encourage them to do it more.
      For instance the UA-cam like button shows the confetti and it gives the sensation you are performing a meaningful action that makes a difference.

    • @AngelaTheSephira
      @AngelaTheSephira Рік тому +1

      ​@@dhillazNo, that's why I don't bother doing it. UA-cam is a corporation, they don't care. They just want you to think they care.

  • @velkb228
    @velkb228 Рік тому +5

    Once again I feel the urge to express how FREAKING GADAMN AWESOME this channel is

  • @Magnogen
    @Magnogen Рік тому +7

    Love this. Definitely some good inspiration!

  • @Zitrussaft
    @Zitrussaft Рік тому

    The video is very cool! And I'm surprised how many people in the comments share the same feelings of wanting a simpler web! Let's do more of that!

  • @ethandavis7310
    @ethandavis7310 Рік тому +1

    Recently I've encountered a lot of sites that just don't work as intended. I'll use a site with the worst design in the world as long as I can do what I expect to be able to do with it. As a developer myself, it fills me with a rage like no other when simple things are broken

  • @cphotos153
    @cphotos153 Рік тому

    Wow the Quality of this video is incredible

  • @RedmarKerkhof
    @RedmarKerkhof Рік тому +1

    I'm go glad I left this field years ago.

  • @بوتاريا1986
    @بوتاريا1986 11 місяців тому

    I love web development, tho, I'm a look dev. I think the best thing to me is that nowadays you can basically do anything on it, like a painting canvas. I like insane stuff, I do agree that business wise these aren't the way to go but for a personal or artistic website, it doesn't matter. do whatever you want.

  • @il_nostro_della_segreto
    @il_nostro_della_segreto Рік тому +1

    This made me think that the Internet is really becoming stratified by wealth. Bloated sites full of effects are virtually unavailable for people with low-end or older machines.

  • @MizManFryingP
    @MizManFryingP Рік тому +3

    I _despise_ custom cursors. Most of the time it's some element with rounded corners slowly following the main cursor. It makes using the website feel sluggish and it reminds me of early early internet cursors changing.

  • @remitiras
    @remitiras Рік тому +3

    I hate modern website trends. I miss the old layouts of websites. Everything was so much easier to see and process.
    I don't like big text. I don't like huge animations. I like the cool buttons but there's a limit.
    All the smooth transitions are so annoying to me. I want the old layout of category buttons on top with a cool header, buttons to sub categories on the side and text on the middle. Nowdays websites take the whole goddamn screen and I can't SEE it. I want to have everything in front of me. It's so messy.

  • @MarcV_IndieGameDev
    @MarcV_IndieGameDev Рік тому +4

    When going on any website, I just want to get to the point. I clicked on it for a reason, to get to a product, or so see the person(s).
    Move the filler stuff to the sides/top/bottom, keep the centre of attraction always clear.
    *Think of your monitor screen*, I don't know of anyone putting anything distraction in front of their screens, it would obstruct the whole idea of a window into the digital realm.
    Look around, and see the placement of your speakers. keyboard, mouse, bits and bobs etc and that's how a website should look (in relation of space).

  • @ltxr9973
    @ltxr9973 Рік тому +2

    As a PC user GUIs are just becoming increasingly annoying. You can really feel how everything is built around webapps and mobile phones. Doing everything more or less built on web technology decreases cost and doing everything in javascript means you only need javascript developers. But the advantages of the individual platforms don't play out anymore, especially not if it's a desktop PC. And when it comes to website, executing all that javascript takes a lot of time. Imagine how fast websites would finish loading on a modern internet connection if they didn't have to execute all of that and make a ton of additional requests.

  • @Snomadu
    @Snomadu Рік тому +1

    You most definitely can say Reese’s without smiling

  • @hrq007
    @hrq007 Рік тому +1

    oooooooh nice
    it's basically a summary of all the things I hate
    all I want is mid-2000s web (minus Flash)
    (your video is super cool, I'm just old)

  • @axmoylotl
    @axmoylotl Рік тому +1

    0:29
    How is this meant to be an example of portfolios being bad? That looks 10x better than the modern examples, because you can actually see the information. The modern ones just look like a confusing mess that are a pain to try and get actual information out of.

  • @imsamuka928
    @imsamuka928 Рік тому +3

    I can't even load 90% of the sites you just showed, specially the 3D and JS ones

    • @juxtopposed
      @juxtopposed  Рік тому

      Yup, unfortunately the problem is exactly that many people can't even get past the loading screen.

  • @lazarskiy
    @lazarskiy Рік тому

    I'm pretty sure that I haven't seen this cat meme in such high quality before. Thanks!

  • @dukkcc2
    @dukkcc2 Рік тому +2

    these are some cool tips, might use some when i code my website

  • @JorgetePanete
    @JorgetePanete Рік тому

    the best trend is making several overlapped banners like cookies, newsletters, ads, and login

  • @aidenburgess217
    @aidenburgess217 Рік тому

    Long gone are the days of radius : 10px, and leaving the button like that.

  • @fedo9644
    @fedo9644 Рік тому +1

    I miss simple old websites

  • @anny8720
    @anny8720 10 місяців тому

    For animations tied to scrolling progress, they should only happen on the first scroll and become static for backtracking until you reload the page

  • @Knopex
    @Knopex Рік тому +2

    1:10 javascript is not compiled, it's interpreted by the browser engine

  • @parry3439
    @parry3439 Рік тому +3

    as a ui designer, these kinds of pages are just people sucking themselves off. to be perfectly blunt. how about make a design that actually makes users, not other designers, happy?

    • @juxtopposed
      @juxtopposed  Рік тому +1

      It's "user" interface and "user" experience afterall.

  • @DavidJCobb
    @DavidJCobb Рік тому +1

    1:25 lying about load progress is actually a useful trick for managing the user's mood. funnily enough, The Elder Scrolls 4: Oblivion actually does this. it doesn't keep you on the loading screen for longer afaik -- 100% is 100% -- but the progress bar is secretly divided into four areas that fill at uneven rates, done by having X% of the load time take more or less than X% of the visible bar. the end of the bar fills much faster, which helps users feel like they're really about to get moving
    5:40 i dislike these particular progress bars so much tbh; they're a distraction. the scrollbar is an unobtrusive way to gauge your progress through content -- easy to check and easy to ignore -- and it's accurate as long as the page isn't bloated with unnecessary cruft