Nintendo Switch UI Design

Daniela Li
Mar 6, 2017 · 4 min read
Image for post

I finally got my hands on the Nintendo Switch this weekend. I couldn’t feel better.

As a “hybrid” console, the modular design and multi-mode have generated lots of heat in game fans, there are unboxing and game videos everywhere right now, but what I want to share is not about hardware specs or any game, I just want to talk about the new UI design of Nintendo switch.

When turned on the power at the first time, I could feel the clear user interface came from the screen. I still remembered the terrible user experience when I played Wii and Nintendo 3Ds, I meant the games were good, but the system settings and UI always made me confusing, the meaning of icons was ambiguous too. But the UI of Nintendo Switch was pretty clean and simple, added more white space in the design, and thankfully all icons were more readable right now.

The color palette in Nintendo Switch UI looks like this:

Image for post

There are two default themes which are white and dark, the text readability and legibility are pretty good in either one.

Image for post
Image for post

In the home screen, the 3-level structure shows clear hierarchy. At the top of the screen, upper-left are account icons for switching users, upper-right are time, wifi and battery icons. At the center of the screen, the main part of the whole screen shows game list in a line, and the navigation bar shows six icons for News, Nintendo eshop, Album, Controllers, System Settings, and Sleeping mode.

Image for post

At the bottom of home screen, lower-left shows current game console mode, when detaching the controller on the side, there is a quick animation effect on the side of screen, which I think is a visual treatment. Lower-right shows actions guide.

Image for post
Image for post

The border will show a high-light animation effect when an item is selected, smart and beautiful.

Into the News page, the UI keeps 3-level structure, title on the top, main part which is a grid layout news on the center, the same border animation effect will be shown up when an item is selected. The bottom of the screen is as same as the home page.

Image for post

News article page, the main part uses 1 column layout. Since the width of the screen is pretty wide, the text doesn’t spread to the whole page, just uses approximately 2/3 for reading convenience.

Image for post

The text button just uses a static border without animation effect.

Image for post

In Nintendo e-shop page, the color uses the same one in the website.

Image for post
Nintendo eshop page in Switch
Image for post
Nintendo eshop website

Album page.

Image for post

Controller page uses for controller settings, like pairing a new controller. Unlike other pages, there is a floating pop-up window, and I’m a little confused why Nintendo didn’t keep consistency here.

Image for post

Setting page, the main part uses left-right layout, by adding illustrations for describing clearly.

Image for post

Overall the UI design of Nintendo Switch has a clear hierarchy, easily recognizable icons, structured color scheme, high-level text legibility and readability. I can feel Nintendo worked really hard on UI design this time. The logo design is also remarkable. Do you know? The logo as it is looks symmetrical even though it’s not.

Good job Nintendo! Well played, everyone involved.

Daniela Li

Written by

SF bay area based product designer. I design for the other side of screens to solve real problems. http://danielalidesign.com/

Daniela Li

Written by

SF bay area based product designer. I design for the other side of screens to solve real problems. http://danielalidesign.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store