Aug 2024
A Trip Down Memory Lane: DS Design System
Intro
This idea all started while I was listening to “Relaxing Gen 3 Pokémon Music,” a go-to of mine. My first gaming console was a Black Gameboy Advance SP, and my first game was Pokémon Ruby. As a kid, I was obsessed with Pokémon, eventually playing through all of Gen 4 and 5 on the DS. I stopped at Generation 5 and was never really interested in the 3DS era or beyond.
Generation 3 Pokemon Intro
Inspiration
But, what better way to satisfy the nostalgic itch I've been feeling from listening to Pokémon music and playing MMOs than by incorporating the DS/Gameboy into my current work? At first, I thought about creating this design system for the Gameboy, since it was my very first gaming console, but it doesn’t have a dedicated BIOS system, so that idea got tossed quickly.
I also thought about focusing on the DSi, since it was another console I used a lot after upgrading from my DS Lite. But, the DSi BIOS didn’t give me that same sense of excitement as the original did. It felt like a step down in terms of design and detail compared to the DS.
So, I went into my closet and grabbed my red DS. I'm not sure how, but it still had battery after all these years of sitting in my closet. Not sure what kind of batteries they used in these things, but they definitely seem to last longer than smartphone ones.
Changing Theme Color on DSi (Top) vs DS (Bottom)
Process
The way I designed all of these components was through a BIOS emulator. While I wanted to use my actual DS to create these, I couldn't figure out how to project the DS screen, or even take snapshots of my actual screen without a very special capture device. So, I opted for an emulator, where I could crank up the resolution and get the components to be pixel perfect.
Timelapse for GBA Selection
This time-lapse is a small glimpse into the process of creating the GBA Selection component. The grids are done by hand with rectangles and I then grouped them into sections for better organization. This approach allowed me to easily adjust the colors later on, which is a big aspect of the BIOS since many of the elements change colors based on themes.
Also, you might wonder why I didn’t simply copy and paste grids or gradients from one component to another. While that could have saved time, I chose not to for a couple of reasons. Each grid and gradient in the DS BIOS has subtle variations in the sizing of the rectangles, so they all had to be done individually.
I could have done it and saved time, but the goal of this project was to create a design system for an important part of my childhood. I wanted the components to be as close to the real thing as possible, even if it meant drawing 8,000 rectangles. Skimping on the tedious process of laying rectangles didn’t sit well with me in terms of maintaining authenticity.
Also, you might wonder why I didn’t simply copy and paste grids or gradients from one component to another. While that could have saved time, I chose not to for a couple of reasons. Each grid and gradient in the DS BIOS has subtle variations in the sizing of the rectangles, so they all had to be done individually.
I could have done it and saved time, but the goal of this project was to create a design system for an important part of my childhood. I wanted the components to be as close to the real thing as possible, even if it meant drawing 8,000 rectangles. Skimping on the tedious process of laying rectangles didn’t sit well with me in terms of maintaining authenticity.
Components
I won’t drag this entry on by listing every single component included in the design system—that’s what the Figma file is for. :-)
Looking back at the BIOS system now, it's amazing to see how intuitive and responsive it is. Navigation is quick and snappy, with smooth animations that seamlessly transition elements in and out of the grid. Everything feels well-organized and works together.
Looking back at the BIOS system now, it's amazing to see how intuitive and responsive it is. Navigation is quick and snappy, with smooth animations that seamlessly transition elements in and out of the grid. Everything feels well-organized and works together.
BIOS Settings
Grids
That being said, the first thing we’ll explore is the grid system, since most of the components are designed around it. There are two main grids: a large one and a small one.
XL Menu Grid
The large grid primarily serves as the foundation for the main settings screen, the home screen where game cartridges are displayed, as well as Pictochat and Download Play.
The smaller grid is used throughout the menu system and is the home of the main calendar and clock on the top screen of the DS.
The smaller grid is used throughout the menu system and is the home of the main calendar and clock on the top screen of the DS.
1. Menu Grid Small, 2. Calendar, 3. Clock, 4. Frame Gradient
Creating all these components involved drawing out countless rectangles in Figma—I think I used about 8,000+ rectangles by the end of the project....
Button
Buttons consist of an outer border, background, button border (which defines the gradient), and a gradient pattern, which typically took the longest to create, since most of the components with a gradient had unique patterns, so I wasn't able to recycle them.
Each button has a default state, as shown below, as well as a press state and a focus state. The focus state adjusts the button’s color based on the user’s theme selection. Focus states happen when the user presses the button, then moves their stylus away from the element while keeping it pressed on the screen.
Each button has a default state, as shown below, as well as a press state and a focus state. The focus state adjusts the button’s color based on the user’s theme selection. Focus states happen when the user presses the button, then moves their stylus away from the element while keeping it pressed on the screen.
NDS Pixel Art
The NDS pixel art is used in the BIOS settings for selecting the “GBA Mode,” which determines whether your DS loads Gameboy games on the top screen or the bottom screen. This element was honestly the most satisfying to build out, even though the GBA screen took forever as I did it row by row.
Frame Gradients
The frame gradients play a vital role in the UX of the DS. With 16 color choices in the settings, you can customize the feel of your system. This adds a level of personal touch to every DS and allows people to use their favorite colors.
The bottom gradient, which includes the buttons, has a more spread-out and larger pixel array. Whereas, the header gradient is more tightly packed and displays the username, time, date, GBA selection, startup mode, and battery symbols.
The bottom gradient, which includes the buttons, has a more spread-out and larger pixel array. Whereas, the header gradient is more tightly packed and displays the username, time, date, GBA selection, startup mode, and battery symbols.
Future Plans
Since this project focused on the BIOS system and covered everything in that scope, there isn’t much left to do except maintaining it and updating components if any issues or errors are found. Creating a similar design system for Pokémon games or my other favorite DS games is certainly a possibility for the future, but for now, I’ll be taking a break from it. Maybe on day I will do Pokémon Diamond or something.
Community File
Finally, it’s all done. As I mentioned before, I didn’t want to cut any corners on this one, so it definitely took longer than I initially anticipated. I'm excited to see members of the community use this file, whether for nostalgic purposes, incorporating these elements into their portfolios, or exploring new creative possibilities.
Thank you for taking the time to read this post! I hope it brings back memories and inspires new ideas. If you have any feedback or thoughts on how to use these components, I’d love to hear from you, feel free to email me or comment on the community file.
Thank you for taking the time to read this post! I hope it brings back memories and inspires new ideas. If you have any feedback or thoughts on how to use these components, I’d love to hear from you, feel free to email me or comment on the community file.