Websites Need More Mario UI

CodePen: bit.ly/HyperplexedMarioUI
Music Licensed by Artlist:
Harvest Moon Waltz - Ziggy

Пікірлер: 405

  • @misfeasor
    @misfeasor3 ай бұрын

    there are giant companies with dozens of ui experts trying to make their website look good and you just did it with a mario background💀

  • @randomdude7386

    @randomdude7386

    3 ай бұрын

    Meanwhile over at Nintendo HQ: The Graphics Team: *signature look of superiority* The Legal Team: "Can we sue him?"

  • @rafi-leigh

    @rafi-leigh

    3 ай бұрын

    @@randomdude7386 lol

  • @lmnk

    @lmnk

    3 ай бұрын

    This bg would suck on legacy phones and pcs though. So no no for this in prod, without JS events and media queries for simplified no-animation version at least.

  • @hflyer222

    @hflyer222

    3 ай бұрын

    @distractioncat7285 is that fucking disttraction piza tower

  • @OpenKeith

    @OpenKeith

    3 ай бұрын

    ​@@lmnkScrolling a background pattern isn't that resource intensive compared to what most Web apps do these days.

  • @Wiref.
    @Wiref.3 ай бұрын

    I clicked on this for the thumbnail, and the difference between that and the actual video was crazy.

  • @HydroSnorter3000

    @HydroSnorter3000

    3 ай бұрын

    Clickbait is for free thinkers.

  • @BakBakRishit241

    @BakBakRishit241

    3 ай бұрын

    Same

  • @jumentoqueanima

    @jumentoqueanima

    3 ай бұрын

    Yesir.

  • @jumentoqueanima

    @jumentoqueanima

    3 ай бұрын

    ​@@poleve5409Lmao.

  • @jumentoqueanima

    @jumentoqueanima

    3 ай бұрын

    ​@@poleve5409I tought it was some kind of shitpost but this is better.

  • @shaalan5672
    @shaalan56723 ай бұрын

    The transition from the save progress window to the watch next suggestion.. Perfection.

  • @TheT8or

    @TheT8or

    3 ай бұрын

    was freaking top-iest of top tier

  • @EvokerKing
    @EvokerKing3 ай бұрын

    pause at 1:32 and read the chatgpt message... "Kick sand, you incapable little mort-"

  • @Schmodin

    @Schmodin

    3 ай бұрын

    lovely touch

  • @Beni_dude30

    @Beni_dude30

    3 ай бұрын

    Lol

  • @ultr7acookieknife658

    @ultr7acookieknife658

    Ай бұрын

    AGI achieved. elon was right all along

  • @cph101dev

    @cph101dev

    Ай бұрын

    Same

  • @JHWaWa

    @JHWaWa

    Ай бұрын

    Mort the chicken (2000)

  • @StefanH
    @StefanH3 ай бұрын

    Nintendo is amazing at UI design! I keep coming back to their UIs for inspiration. Mario maker really nails visible focus. You can look at a screen and immediately know which element on the screen is currently focused. A lot of UIs fail at this. (Looking at you steam deck)

  • @SobmicSSBB

    @SobmicSSBB

    3 ай бұрын

    Our Lord and Saviour Super Mario Maker 2

  • @webbowser8834

    @webbowser8834

    3 ай бұрын

    I remember one game that would highlight the selected option in red and the other option in yellow, and I could never, and I mean NEVER figure out which option I was actually clicking. It drove me utterly insane.

  • @SimoneBellomonte

    @SimoneBellomonte

    3 ай бұрын

    @@webbowser8834What game was that lmao. 💀

  • @webbowser8834

    @webbowser8834

    3 ай бұрын

    @@SimoneBellomonte Super Monkey Ball Banana Mania, a game that I really wanted to like but has just a few too many flaws for me to truly enjoy.

  • @EphemeralPseudonym

    @EphemeralPseudonym

    2 ай бұрын

    A lot of multipurpose UI/UX designers are trained to produce dark pattern UX whether intentionally or not. It's a feature and not a bug. Every time the cookie toggle pop up comes up I have to gamble on which end of rhe slider disables or enables the cookies.

  • @HigherQualityUploads
    @HigherQualityUploads3 ай бұрын

    The Nintendo Japan website design from the Wii U era is probably the most beautiful corporate site I've ever seen. Even better than Apple. A shame they changed it to look just like every other Asian e-commerce site when the Switch launched. But their microsites they have for each first party game still look great.

  • @luk72

    @luk72

    3 ай бұрын

    oh my god yes exploring them was so much fun

  • @trixaquilon2786

    @trixaquilon2786

    3 ай бұрын

    warioware website the goat

  • @guillaumeaujapon5008

    @guillaumeaujapon5008

    2 ай бұрын

    @@trixaquilon2786 dang man! I just check it out and it is insane

  • @wchorski
    @wchorski3 ай бұрын

    Mario UI: Cute, simple, effect Splatoon UI: Sick, Fresh, Off The Hook

  • @Someone-sq8im

    @Someone-sq8im

    3 ай бұрын

    What would 3DS era Pokémon be?

  • @Evdafawth

    @Evdafawth

    3 ай бұрын

    ​@@Someone-sq8im Thick outlines, and I don't know what else.

  • @breadcrummz
    @breadcrummz3 ай бұрын

    1:32 ChatGPT informing the incapable mortal to kick sand.

  • @nicholasyoa86
    @nicholasyoa863 ай бұрын

    I actually really loved this. It's actually some really nice UI as well probably perfect for landing pages, Nintendo's got some nice-looking elements.

  • @Piano_Board

    @Piano_Board

    3 ай бұрын

    that's probably because we grew up with a lot of nintendo UI elements and we feel nostalgic for them

  • @matthewmurdock6187

    @matthewmurdock6187

    3 ай бұрын

    ⁠​⁠​⁠​⁠@@Piano_Boardthat might be a part but I think it just looks nice, it feels kinda pessimistic to equate everything to nostalgia

  • @thismakesnosense

    @thismakesnosense

    Ай бұрын

    I never played a mario game in my life yet I still think this looks good

  • @PSIwolf39
    @PSIwolf393 ай бұрын

    Not sure how large companies never thought about making their website look like this, literally everyone would love something like this!

  • @flamewave000
    @flamewave0003 ай бұрын

    I worked on Words With Friends for the Windows Phone way back. I created a striped background that was set to a perspective angle and would ever so slowly animate the lines using a vertex shader. It looked really really cool, but it killed phone battery and sadly had to be removed.

  • @FireyDeath4
    @FireyDeath43 ай бұрын

    One time I made a really tiny animated repeating gradient stripe. Probably 4×1 or something. And I saved it to a wiki's CSS file, and it made everyone's computers start running very hard

  • @Gamewithstyle
    @Gamewithstyle3 ай бұрын

    Editing on point, code on point, ChatGPT telling you to kick sand on point. 10/10

  • @MrRobotman

    @MrRobotman

    3 ай бұрын

    Haha misswd that the first time around.

  • @Trixe-space
    @Trixe-space3 ай бұрын

    Its impressive how small things like the UI here have so much detail that no really pays attention to. The amount how hard work being done by people only to go unnoticed is sad.

  • @bicyclesoda716

    @bicyclesoda716

    3 ай бұрын

    You notice subconsciously.

  • @ninjanerdstudent6937
    @ninjanerdstudent69373 ай бұрын

    This is a simple video concept in under 2 minutes. Genius idea.

  • @games_are_good
    @games_are_good3 ай бұрын

    In college for an ASP NET site project I turned a theme into retro Mario style, then my teacher gave me an old flash dev book that I eventually started going through years later

  • @Zorgosto
    @Zorgosto3 ай бұрын

    The video is so nice, idk why, it just flows well, not too much explaining but I feel like I still learned how to do this, perfect middle ground

  • @roguealien666
    @roguealien6663 ай бұрын

    Well these was a thing back then on the earlier iphones where everyone wanted to recreate real design. For example a note app would have yellow background with lines like those yellow notebooks and every line of text had a border on the bottom to mimic the notebook... it was cool for a year or two and then it disappeared

  • @amaryllis0

    @amaryllis0

    3 ай бұрын

    It's called Skeuomorphism

  • @roguealien666

    @roguealien666

    3 ай бұрын

    @@amaryllis0 yeah, that’s it. But made websites to had extra an unnecessary weight just because of the images. It was way better when that trend ended

  • @ManuFortis

    @ManuFortis

    3 ай бұрын

    @@roguealien666 It can probably be done without the extra 'weight' as you put it. Most websites have so many extra connections going on due to ads, tracking, etc... remove most of that, if not all of it; and the skeumorphism can probably continue without issue. Also, our network speeds and data limits have greatly improved since then.

  • @hayden.A0

    @hayden.A0

    3 ай бұрын

    ​@@ManuFortisWell, design trends come and go so we may see such designs make a comeback.

  • @blueshoes7519

    @blueshoes7519

    2 ай бұрын

    ​@@roguealien666they were mostly apps, not websites as far as I know.

  • @standlethemandle
    @standlethemandle3 ай бұрын

    hi, I'm a programming student taking web development classes and I'd just like to say that your channel has done wonders for me I obviously don't copy and paste code made here, but videos like this have helped me get out of a block I frequently find myself in when it comes to assignments. Thank you

  • @jora9655
    @jora96553 ай бұрын

    Soothing voice, concrete advice, thank you for this!

  • @SylvanSerenity
    @SylvanSerenity3 ай бұрын

    Love the simplicity of the video to inspire creativity in the viewers. Nice!

  • @adhs
    @adhs3 ай бұрын

    wow this is so satisfying to watch and so informative in such a short period of time!

  • @Qwernasivob
    @Qwernasivob3 ай бұрын

    Best video I've seen this year and probably won't be surpassed

  • @CESTLEDU
    @CESTLEDU3 ай бұрын

    I used Super Mario Wonder as a reference to make one of the tabs of my management game and ever since then my other tabs seem so blend in comparison. Hats off to the people who made the UI of Mario Wonder, they made... wonders.

  • @realthatsman
    @realthatsman3 ай бұрын

    Hyperplexed makes complex things simple things complex makes hyperplexed.

  • @astral6749

    @astral6749

    3 ай бұрын

    I feel like I had a stroke reading that

  • @MrRando-yl7tc

    @MrRando-yl7tc

    3 ай бұрын

    what?

  • @TälgatVerner

    @TälgatVerner

    3 ай бұрын

    Huh

  • @MakerManX

    @MakerManX

    3 ай бұрын

    Almost a palindrome sentence

  • @realthatsman

    @realthatsman

    3 ай бұрын

    @@MakerManX now it is it now

  • @logandunlap9156
    @logandunlap91563 ай бұрын

    if this catches on we’re gonna be begging them to stop

  • @corvacopia

    @corvacopia

    3 ай бұрын

    Sure, but I think this allows more room for creativity than the current norm does, so its a better default to have

  • @old.angelless
    @old.angellessАй бұрын

    That's an amazingly well done video. Glad it got recommended to me!

  • @rupel190
    @rupel1903 ай бұрын

    Love the calm and kind way you made that video. 🌸

  • @progidy7
    @progidy73 ай бұрын

    Fun fact: you can also create a star pattern by just putting one star in the middle of your repeated square!

  • @Akuba

    @Akuba

    3 ай бұрын

    That was my thought the moment I saw him doing that.

  • @Anyashiina

    @Anyashiina

    2 ай бұрын

    Yeah but then every other row of stars wouldn't be offset the way it is

  • @progidy7

    @progidy7

    2 ай бұрын

    @@Anyashiina Ahhh, yes! I see it now!

  • @vellbear
    @vellbear3 ай бұрын

    You yoinked the idea from my mind! Also, the official super mario wonder website has some cool elements to it too.

  • @NicolasCoffez
    @NicolasCoffezАй бұрын

    You take your viewers on a journey every single video, amazing!

  • @risatam8879
    @risatam88792 ай бұрын

    I just binge watched all your videos...it was an experience ❤

  • @asianck
    @asianck3 ай бұрын

    Your ability to make such satisfying recreation of animations in a short format is unmatched. Such a joy to watch you do your magic.

  • @austiyful
    @austiyful3 ай бұрын

    1:09 "Much like our stars, since the default behaviour is for it to repeat itself..." Perhaps a missed chance to say the de-FAULT in our stars?

  • @TheMehranKhan
    @TheMehranKhan3 ай бұрын

    the editing dude the editing... It's amazing!

  • @DenylR
    @DenylR3 ай бұрын

    - Ok a little smaller this time please - Kick sand, you incapable little mort

  • @ferresmeets1937
    @ferresmeets19373 ай бұрын

    "kick sand you incapable little mortal" has me dead

  • @lukeh990
    @lukeh9903 ай бұрын

    You’re playing with fire using Nintendo’s copyrighted work in the thumbnail.

  • @bachirmo7

    @bachirmo7

    3 ай бұрын

    😂😂😂😂

  • @abyssalplanes

    @abyssalplanes

    Ай бұрын

    it looks like Mario is about to teach me about HTML3 so i think it's marketable as parody

  • @ChutneyGames
    @ChutneyGames3 ай бұрын

    Yes the website just neeeds to take up more RAM, more moving objects, more effects

  • @Lyle_Plays
    @Lyle_Plays2 ай бұрын

    this was smooth. my brain expected the video to go on for a while longer for some reason :D good video!

  • @1SquidBoy
    @1SquidBoy3 ай бұрын

    Literally every time I watch one of your videos I learn some random cool hack. Thanks for making these.

  • @TaimoorShahzada
    @TaimoorShahzada3 ай бұрын

    what a magical video. love your content

  • @YuriGen2423
    @YuriGen24233 ай бұрын

    this video made me smile :) you have a soothing voice too and your words sound like a poesy! you may as well be a poet.

  • @KawaMood
    @KawaMood2 ай бұрын

    Guys you don't know how this video montage is really well thought out and long to achieve. That's an amazing job.

  • @TodoWarcraft
    @TodoWarcraft3 ай бұрын

    Now this is a clean video

  • @xReTuneSx
    @xReTuneSx3 ай бұрын

    Keep going please, that was too short 😢

  • @pandapan5797
    @pandapan57973 ай бұрын

    Nicely edited

  • @froodlenoodle
    @froodlenoodle3 ай бұрын

    the editing oh my god its perfect

  • @no_hacker2
    @no_hacker23 ай бұрын

    CSS triangles really are a nightmare

  • @Norsilca
    @Norsilca3 ай бұрын

    Wait, what's the point of using four stars cut off on every edge? It repeats anyway so why not just put one star in the middle?

  • @duon44

    @duon44

    3 ай бұрын

    It repeats it in a diamond pattern this way, if you put it in the middle and use regular tiling they would repeat in a square pattern

  • @Norsilca

    @Norsilca

    3 ай бұрын

    ​@@duon44 Ohh, I missed that this is four halves = two stars, not one star. You could still just stick two whole stars in the middle, with one below and to the right of the other, instead of cutting them in half.

  • @duon44

    @duon44

    3 ай бұрын

    @@Norsilca i dont think that would tile correctly in both vertical en horizontal directions like this does

  • @Norsilca

    @Norsilca

    3 ай бұрын

    @@duon44 I just tried it and it works!

  • @AndrewMycol
    @AndrewMycol3 ай бұрын

    I am blown away!

  • @in.vasive
    @in.vasive3 ай бұрын

    Just beautiful.

  • @josejoestrela493
    @josejoestrela4933 ай бұрын

    If many websites had Mario style UI, Nintendo's lawyers would go nuts

  • @looper59
    @looper593 ай бұрын

    a beautiful poem of Mario

  • @itstoasty7089
    @itstoasty70893 ай бұрын

    Nintendo’s website has a better interface than the current switch. Let that sink in.

  • @vroom0925

    @vroom0925

    3 ай бұрын

    Isn’t that good?

  • @itstoasty7089

    @itstoasty7089

    3 ай бұрын

    @@vroom0925 nope…the switch is a dead console. No music or life whatsoever

  • @vroom0925

    @vroom0925

    3 ай бұрын

    @@itstoasty7089 oh no… the switch is.. sovless…

  • @jakemoss8700
    @jakemoss87003 ай бұрын

    Actual legend, you make it looks so easy 😅

  • @aaravasawa
    @aaravasawa3 ай бұрын

    1:00 That solution will make the website more laggy

  • @CTRL585
    @CTRL5853 ай бұрын

    Love The Vid Keep it up!

  • @christensen.kruize
    @christensen.kruize3 ай бұрын

    Looks good!

  • @sparkler5313
    @sparkler53132 ай бұрын

    why was this video so ethereal

  • @kinesta
    @kinestaАй бұрын

    Really dope tutorial

  • @HiteshJetwaniTechtesh
    @HiteshJetwaniTechtesh3 ай бұрын

    I mostly work on backend and devops just because I don't like front-end .. but man you get my respect

  • @WhyDoesYTUseHandlesNow
    @WhyDoesYTUseHandlesNow3 ай бұрын

    I've always loved using repeating background in css, texture makes stuff give so much more personality

  • @TSSwikia
    @TSSwikia3 ай бұрын

    Great vid. You should totally do Dark Souls next on survive or thrive:)

  • @muntedfinger
    @muntedfinger2 ай бұрын

    Nice editing! There's no need to chop the stars in half in the source image, just have two stars in diagonally opposite corners

  • @ParadoxReason
    @ParadoxReason3 ай бұрын

    The goat is back !

  • @whizzamend
    @whizzamendАй бұрын

    PLS MAKE MORE CONTENT I NEED THEM😭😭🔥🔥

  • @Atonks
    @Atonks3 ай бұрын

    The most satisfying editing ever. Good job 👍

  • @creechieuihana
    @creechieuihana3 ай бұрын

    I thought this was going to be about multiple different Mario UIs and how good they are and why and now I'm kiiiiiiinda disappointed a little bit

  • @bakubaku4333
    @bakubaku43333 ай бұрын

    graphic design is my passion

  • @OLIVER427
    @OLIVER4273 ай бұрын

    Dang. Gotta go make my website like that now

  • @hkayrad
    @hkayrad3 ай бұрын

    This is why I'm subscribed to this guy

  • @VaibhavShewale
    @VaibhavShewale3 ай бұрын

    it was magical!

  • @diegocabreraesquivel2058
    @diegocabreraesquivel20582 ай бұрын

    te quiero mucho hyperplexed que cosas tan bonitas hacés

  • @Ridlay_
    @Ridlay_3 ай бұрын

    Simple and straight to the point, love it

  • @Pantherasinleopard
    @PantherasinleopardАй бұрын

    This video is so beautiful 😢😢

  • @Trazynn
    @Trazynn2 ай бұрын

    2024: Matt glass, godrays, shimmer, gradient stroke, fluid buttons. 2025: Mario

  • @NeaPlaysRBLX
    @NeaPlaysRBLX3 ай бұрын

    Can someone please let me know of the list of programs being used ? I’d like to try this for myself !

  • @totallynotemma

    @totallynotemma

    3 ай бұрын

    From the looks of it, it looks like he created the star background using Canva, a free-to-use website where you can create a whole bunch of graphic designs, and the rest looks to just be regular HTML and CSS :) If you didn't want to use Canva I'm sure Figma (another cool design resource) could do something similar too

  • @NeaPlaysRBLX

    @NeaPlaysRBLX

    3 ай бұрын

    @@totallynotemma ah thanks ! I figured it was canva by the colours but didnt really like it as i had some bad experiences with their paywalls so thank you for suggesting an alternative for it !

  • @totallynotemma

    @totallynotemma

    3 ай бұрын

    @@NeaPlaysRBLX that's okay!! they both have their premium feature crap, but canva has a ton of free shapes, while I think figma you'd just have to draw the shape yourself (they have some svg drawing tools in the app) or you could use an icon as figma has a bunch of plugins by devs. figma is more complicated tho to export what you do as images and such tho, so be sure to look up tutorials on what you might need :) also yeah i think the weird colours are just the dark mode canva added a while back

  • @piplup2884
    @piplup28843 ай бұрын

    Guess i'll just start putting ultra instict mario in all my websites

  • @alekxsander
    @alekxsander3 ай бұрын

    Beautyfull! Bring more game UIs gui!!

  • @Desauce512
    @Desauce5123 ай бұрын

    this men is GOATED!!!

  • @Crowdraws_
    @Crowdraws_3 ай бұрын

    This is insanely good what

  • @itryen7632
    @itryen76323 ай бұрын

    Finally someone gets it

  • @UxBurn
    @UxBurn3 ай бұрын

    I enjoy your videos so much, they're just incredible. Your way of developing is incredibly well thought out, as a Fullstack develeoper myself I know how people in my line of work tend to "do first, think later" type of deal. Especially when I'm called to fix a website someone else made and I have to spot all the mistakes and refactor the entire thing almost entirely. Thanks a lot Hyperplexed, you're amazing.

  • @aPOPblops
    @aPOPblops3 ай бұрын

    3D artist here, I deal with a lot of repeating patterns, but I don’t do any web design. Was there any need to have the stars on the edges and do all the work to duplicate them like that? As far as I can tell if you had just a single star in the center it would have caused the same pattern upon repeating.

  • @electrolyteorb

    @electrolyteorb

    3 ай бұрын

    3 stars per pattern (or texture as you might call it) vs 1 star per pattern

  • @limelad1

    @limelad1

    3 ай бұрын

    This method makes each row/column appear offset by half the length, so that it isn't just a grid

  • @theskylord16
    @theskylord163 ай бұрын

    Nintendo and epic have the best ui in my opinion, they’re just so easy to use and pleasing to look at

  • @dj_timoy
    @dj_timoy3 ай бұрын

    Everything needs more Mario UI.

  • @gabrieldantas1179
    @gabrieldantas11793 ай бұрын

    Is this that bob ross everyone’s been telling me about?

  • @Thaereos12

    @Thaereos12

    Ай бұрын

    bob ross v2

  • @Tenkite001
    @Tenkite001Ай бұрын

    1:43 best outro ever

  • @Starpotion
    @Starpotion3 ай бұрын

    Although they're not nearly as intricate as their predecessors, Nintendo still makes really snappy and pleasant microsites that they use to promote their games.

  • @bradenborman4396
    @bradenborman43963 ай бұрын

    Very nice! 🤩

  • @sg5sd
    @sg5sd3 ай бұрын

    Sees fun UI Me happy to click on website

  • @rogermanea2140
    @rogermanea21403 ай бұрын

    That was smooth

  • @Fish-E-13
    @Fish-E-133 ай бұрын

    your back

  • @Gigaveld
    @GigaveldАй бұрын

    lil bro is a genius

  • @drgabi18
    @drgabi183 ай бұрын

    Really easy to make a cigarette pattern, nice!

  • @trueberryless
    @trueberryless3 ай бұрын

    This channel supports creativity of the viewer more than any other I've seen so far ❤

  • @thespiralofpowah
    @thespiralofpowah2 ай бұрын

    A header obviously goes there.

  • @DuckPersons
    @DuckPersons3 ай бұрын

    HE IS BACK LETS GOOOOOOO

  • @thabreez456
    @thabreez4563 ай бұрын

    The UI in modern Nintendo Games is disgustingly clean. And the sound effects as well….hmmmm