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.
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)
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.
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.
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.
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
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.
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.
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
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
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
@@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.
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.
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.
@@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.
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
@@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 !
@@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
Those animations and transitions were so smooth! This guy not only knows his CSS well, he also edits like a pro, and knows how to create a story with editing. This guy is an inspiration, and more people should be aware of him!
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.
Another way to make the diagonally striped pattern scroll is by: making a div the height of the screen, then you give it a repeating-linear gradient background thats rotated 45deg and repeats two lines of different colors, then you make it slightly wider than the screen itself (like 110vw), before making an animation, you need to take note of the total with of your gradient. If some color start at 0px ends at 20px, then another starts at 21px and ends at 40px, the amount your div will scroll is gonna be 55px. Im not exactly sure why, but this way it looks perfect. Im guessing its for some trigonometry reason or something. next you make an animation to scroll the div by 55px to one side and voilla. you need to make the animation linear, infinite and you can choose the speed by setting some lenght.
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.
On console too? That'd mean the game need a fully functional browser engine, I think it wouldn't be practical but maybe they have a similar markup specific to each console
the conclusion you should've reached is that star, soft colors and stripped patterns are good design choices, but instead you saw the appeal in the programming for some reason many websites do this anyway, they just show different graphics.
Wouldn't redrawing so many layout animations on the repeating divs be expensive compared to 1 large div with its repeating pattern? Or did you go with this solution because the image served will be smaller
I clicked on this for the thumbnail, and the difference between that and the actual video was crazy.
Clickbait is for free thinkers.
Same
Yesir.
@@poleve5409Lmao.
@@poleve5409I tought it was some kind of shitpost but this is better.
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💀
Meanwhile over at Nintendo HQ:
The Graphics Team: *signature look of superiority*
The Legal Team: "Can we sue him?"
@@randomdude7386 lol
mario? i fucking love that guy. he's awesome
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.
@@distractioncat7285 is that fucking disttraction piza tower
The transition from the save progress window to the watch next suggestion.. Perfection.
was freaking top-iest of top tier
pause at 1:32 and read the chatgpt message...
"Kick sand, you incapable little mort-"
lovely touch
Lol
AGI achieved. elon was right all along
Same
Mort the chicken (2000)
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)
Our Lord and Saviour Super Mario Maker 2
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.
@@webbowser8834What game was that lmao. 💀
@@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.
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.
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.
oh my god yes exploring them was so much fun
warioware website the goat
@@trixaquilon2786 dang man! I just check it out and it is insane
Mario UI: Cute, simple, effect
Splatoon UI: Sick, Fresh, Off The Hook
What would 3DS era Pokémon be?
@@Someone-sq8im Thick outlines, and I don't know what else.
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.
that's probably because we grew up with a lot of nintendo UI elements and we feel nostalgic for them
@@Piano_Boardthat might be a part but I think it just looks nice, it feels kinda pessimistic to equate everything to nostalgia
I never played a mario game in my life yet I still think this looks good
1:32 ChatGPT informing the incapable mortal to kick sand.
Not sure how large companies never thought about making their website look like this, literally everyone would love something like this!
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
Editing on point, code on point, ChatGPT telling you to kick sand on point. 10/10
Haha misswd that the first time around.
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.
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.
You notice subconsciously.
You’re playing with fire using Nintendo’s copyrighted work in the thumbnail.
😂😂😂😂
it looks like Mario is about to teach me about HTML3 so i think it's marketable as parody
This is a simple video concept in under 2 minutes. Genius idea.
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
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
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
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
It's called Skeuomorphism
@@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
@@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.
@@ManuFortisWell, design trends come and go so we may see such designs make a comeback.
@@roguealien666they were mostly apps, not websites as far as I know.
Hyperplexed makes complex things simple things complex makes hyperplexed.
I feel like I had a stroke reading that
what?
Almost a palindrome sentence
@@MakerManX now it is it now
@@realthatsman splendid
1:00 That solution will make the website more laggy
Soothing voice, concrete advice, thank you for this!
Love the simplicity of the video to inspire creativity in the viewers. Nice!
Fun fact: you can also create a star pattern by just putting one star in the middle of your repeated square!
That was my thought the moment I saw him doing that.
Yeah but then every other row of stars wouldn't be offset the way it is
@@Anyashiina Ahhh, yes! I see it now!
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.
Yes the website just neeeds to take up more RAM, more moving objects, more effects
Your ability to make such satisfying recreation of animations in a short format is unmatched. Such a joy to watch you do your magic.
Best video I've seen this year and probably won't be surpassed
CSS triangles really are a nightmare
Nintendo’s website has a better interface than the current switch. Let that sink in.
Isn’t that good?
@@vroom0925 nope…the switch is a dead console. No music or life whatsoever
@@itstoasty7089 oh no… the switch is.. sovless…
if this catches on we’re gonna be begging them to stop
Sure, but I think this allows more room for creativity than the current norm does, so its a better default to have
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.
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?
Guys you don't know how this video montage is really well thought out and long to achieve. That's an amazing job.
You take your viewers on a journey every single video, amazing!
If many websites had Mario style UI, Nintendo's lawyers would go nuts
You yoinked the idea from my mind! Also, the official super mario wonder website has some cool elements to it too.
I mostly work on backend and devops just because I don't like front-end .. but man you get my respect
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
This channel supports creativity of the viewer more than any other I've seen so far ❤
Nice editing! There's no need to chop the stars in half in the source image, just have two stars in diagonally opposite corners
- Ok a little smaller this time please
- Kick sand, you incapable little mort
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?
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
@@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.
@@Norsilca i dont think that would tile correctly in both vertical en horizontal directions like this does
@@duon44 I just tried it and it works!
wow this is so satisfying to watch and so informative in such a short period of time!
Nintendo and epic have the best ui in my opinion, they’re just so easy to use and pleasing to look at
The UI in modern Nintendo Games is disgustingly clean.
And the sound effects as well….hmmmm
Can someone please let me know of the list of programs being used ? I’d like to try this for myself !
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
@@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 !
@@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
"kick sand you incapable little mortal" has me dead
Those animations and transitions were so smooth! This guy not only knows his CSS well, he also edits like a pro, and knows how to create a story with editing.
This guy is an inspiration, and more people should be aware of him!
2024: Matt glass, godrays, shimmer, gradient stroke, fluid buttons.
2025: Mario
graphic design is my passion
Love the calm and kind way you made that video. 🌸
this was smooth. my brain expected the video to go on for a while longer for some reason :D good video!
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.
3 stars per pattern (or texture as you might call it) vs 1 star per pattern
This method makes each row/column appear offset by half the length, so that it isn't just a grid
Another way to make the diagonally striped pattern scroll is by:
making a div the height of the screen,
then you give it a repeating-linear gradient background thats rotated 45deg and repeats two lines of different colors,
then you make it slightly wider than the screen itself (like 110vw),
before making an animation, you need to take note of the total with of your gradient.
If some color start at 0px ends at 20px, then another
starts at 21px and ends at 40px, the amount your div will scroll is gonna be 55px.
Im not exactly sure why, but this way it looks perfect.
Im guessing its for some trigonometry reason or something.
next you make an animation to scroll the div by 55px to one side and voilla.
you need to make the animation linear, infinite and you can choose the speed by setting some lenght.
I am blown away!
Guess i'll just start putting ultra instict mario in all my websites
I kinda like when you explain stuff, asking chat gpt kinda ruined it a little bit. Soothing voice, but I feel like I didn't gain any knowledge.
Simple and straight to the point, love it
Just beautiful.
Keep going please, that was too short 😢
I've always loved using repeating background in css, texture makes stuff give so much more personality
why was this video so ethereal
That's an amazingly well done video. Glad it got recommended to me!
Everything needs more Mario UI.
The return of the king!
this men is GOATED!!!
Finally someone gets it
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.
1:43 best outro ever
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.
I just binge watched all your videos...it was an experience ❤
Sees fun UI
Me happy to click on website
the editing dude the editing... It's amazing!
ive always said that web designers need to learn more from ui in games
I love beating myself to peak design
Literally every time I watch one of your videos I learn some random cool hack. Thanks for making these.
1:31 LMAO CHATGPT'S RESPONSE IS LEGIT CRAZY
a beautiful poem of Mario
Ironically the nintendo website is one of their weaker ui's
I'm more interested in how insanely good the editing in this video is than the actual contents. What did you use to make this? e.g. around 00:35.
I don't know about Mario, but a _lot_ of games these days use html/css/js for their UI. So, this may be how that UI was made in the game as well.
On console too? That'd mean the game need a fully functional browser engine, I think it wouldn't be practical but maybe they have a similar markup specific to each console
the conclusion you should've reached is that star, soft colors and stripped patterns are good design choices, but instead you saw the appeal in the programming for some reason
many websites do this anyway, they just show different graphics.
Wouldn't redrawing so many layout animations on the repeating divs be expensive compared to 1 large div with its repeating pattern? Or did you go with this solution because the image served will be smaller
Nintendo In-Game UI: Beautiful and simple
Nintendo System and Store UI: 10,000 options all on one page?
Even the UI that the Wii had still looks really good even by today's standards as well.
This will take 50% of my gtx 4070 to run.
The most satisfying editing ever. Good job 👍
PLS MAKE MORE CONTENT I NEED THEM😭😭🔥🔥
Great vid. You should totally do Dark Souls next on survive or thrive:)
lil bro is a genius
A header obviously goes there.
Dang. Gotta go make my website like that now
MEGAMAN BATTLE NETWORK DESIGN NEEDS TO HIT THE LIMELIGHT
the editing oh my god its perfect
The Joe Goldberg of Front End Design
Hyperplexed never fails to make my 11-year-old website so much mor complex even if I made it in 2005 and bullies me about it. 😊
Nintendo is going to find any excuse possible to sue- for anything involving their work
I don't know why I got website vibes specifically while playing the Mario Vs. Donkey Kong demo.
fun fact: the mario vs. donkey kong entry on wii u (tipping stars) was made as a demo to show programmers what they can do in html5 on the wii u.