Designing for the Nintendo Switch
App concepts and design explorations for a favorite new console.
Nintendo released its latest console, the Switch, to critical praise this past March. I bought mine with “The Legend of Zelda: Breath of the Wild” on the release date. While I love being able to hook the Nintendo Switch up to my TV, I’ve found myself using it primarily in handheld mode. It has quickly become my favorite portable device, displacing the PlayStation VITA atop my list.
However, there are a few apps that I miss with the Switch, like YouTube, Twitter, and Netflix. A web browser app would be fantastic for looking things up as you play, like a map for gathering Koroks in Zelda.
I decided to have some fun making concepts for each of these apps to share with you. With E3 2017 coming up, maybe Nintendo will announce a few new apps. I’ve also included some thoughts about Switch’s UI design, and made a UI kit for Sketch for anyone who wants to create their own app concepts.
Design
The Wii U’s system was criticized for being sluggish, but I really liked many of the visual design touches of the interface. Nintendo employed a lot of 3D with transparency and blur effects, which made for a fun visual experience.
Compared to the Wii U, the Switch UI is minimal and will feel familiar to iOS and Android users. It’s also a lot faster.
Nintendo has kept a sense of depth and delight in the Switch with drop shadows, glowing buttons that pulsate, subtle shadows, and background blur effects for detailed views. The user can also choose between light and dark modes. While I like both modes, I’m hoping Nintendo will create downloadable ones in the future, just like it did with the 3DS.
In terms of the system’s typography, Nintendo seems to be using a modified version of the font UD Shin Go NT with Regular and Bold font weights from the foundry Morisawa.
For example, characters like “g” are very different from the standard version of the font.
As of today, the Switch Home screen is composed of three layers:
- User accounts and system status.
- Games and system apps.
- Something I call the “actions bar.”
The actions bar is contextual and always visible. It shows which type of controller you’re using as well as various functions mapped to the controller buttons. You can also tap on these options on the touch screen instead of using the linked controller buttons. I’ve noticed that the actions bar doesn’t appear when alerts are shown and apps like the eShop hide it when scrolling down, leaving more room to view content.
“The Legend of Zelda: Breath of the Wild” shares the same concept of an actions bar at the bottom of the game’s menu. While the icons are different, it feels like the Switch UI took some design cues from the game.
Another interesting aspect of the Switch UI is the mapping of on-screen buttons to the controller. For example, the on-screen keyboard has buttons B linked to Backspace, Y to Space, and + to OK.
App Explorations
Nintendo elected to launch the Switch without app support, contrary to the Wii U. However, there seems to be interest in making video apps available on the eShop. We may well see some of these apps, like Netflix, Hulu, and Amazon, announced at this year’s E3.
The following app concepts were designed as closely to the Switch UI as possible, while exploring different navigation concepts.
Web Browser
Technically, the Switch has a basic web browser that allows users to share screenshots through their connected Twitter and Facebook accounts. I’m hoping Nintendo includes a full-fledged web browser in future updates.
In this web browser concept, the bar at the top contains Back and Forward arrow buttons as well as a text field. Both buttons are linked to the controller’s shoulder buttons.
Refreshing a page is done with the Y button on the controller. The Left stick is used to move a cursor and the Right stick to zoom in and out. Of course, users can also tap and swipe on the screen instead of using the controller’s buttons.
YouTube
Most of the entertainment I watch these days is on YouTube. The Switch has such a great display that a simple and clean YouTube app would be fantastic.
The navigation in this concept is very similar to Google’s mobile app and website with Home, Trending, and Subscriptions as the main categories in a menu at the top of the view.
More categories, such as History, Watch Later, Playlists, and My Videos, are in the user’s account screen. Search is linked to the Y button on the controller, so it’s available from any screen. Home’s content layout is a simple grid of cards similar to eShop’s.
The video details view is made up of two columns. On the left side is the video player with its buttons and description. On the right side, a vertical scrolling sidebar contains various details, such as the channel, number of views and likes, and options to share a video or add it to a playlist. The actions bar contains a new Menu item.
Tapping the + button on the controller slides in the navigation menu to go to different categories.
The account view is straightforward. On the left side, there’s a sidebar that contains various categories, and on the right side content is shown as a grid.
While it’s possible to tweet screenshots from the Switch, there’s no way to browse Twitter. Nintendo has announced a dedicated mobile app to invite friends and chat with them, but having a Twitter app on the Switch for sending and receiving direct messages about setting up multiplayer games would be a great benefit.
In this concept, the Twitter interface for the Switch is divided into two columns. There’s a navigation sidebar on the left side, and tweets are shown on the right side. Search is accessible from the sidebar and also with the Y button on the controller. Composing new tweets is done by tapping the + button on the controller.
A tap on a tweet slides in a tweet details view from the right side with Reply, Retweet, and Like actions. The sidebar navigation is reduced but always visible, so users can jump to different categories at any time. To go back, users can tap the B button or swipe the details view to the right.
The tweet compose view appears on top of the previous view and blurs it in the background. This view contains the user’s photo, a text field, a media button, and the Switch’s keyboard. A tap on the keyboard’s OK button or the controller’s + button sends the tweet.
A tap on the Media button replaces the keyboard with a simple screenshot picker. It’s still possible to send a tweet via the + button on the controller.
Netflix
Just like YouTube, Netflix is an obvious app choice and will likely be one of first third-party apps to land on the Switch.
This is a simple concept showing the Home screen of Netflix, with a featured show and carousels of other shows under it. Search is linked to the Y button on the controller.
A show’s details view contains the artwork on the left side, with episode information and functional buttons to the right. The user changes seasons by pressing the L and R shoulder buttons or tapping on the icons. The episodes are shown in a vertical scrolling list.
System UI Kit
I thought it would be a good idea to make a system UI kit for Sketch, so other designers can jump into app explorations for the platform. And who knows, maybe Nintendo will allow third-party developers to make apps in the future.
You can download the UI kit on Dribbble. It contains various system screens in light and dark modes as well as many elements and icons as symbols.
As I mentioned before, Nintendo uses a modified version of the font UD Shin Go NT with Regular and Bold weights, which is exclusive to the Switch. This UI kit substitutes Nintendo’s custom version with the font A-OTF UD Shin Go Pr6N. You can download A-OTF UD Shin Go Pr6N from Adobe Typekit if you’re subscribed to Adobe Creative Cloud.
I’m very much looking forward to this year’s E3 and seeing what Nintendo has planned for the Switch. Here’s to more games and apps!
What are your expectations for the Switch, and what do you think about Nintendo inlcuding apps in the system? Share your thoughts in the comments below.
For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.
Black Pixel is a creative digital products agency. Learn more at blackpixel.com.
