Challenge: Design for superheroic navigation
June 9, 2022
Calling all designers: We're inviting you to use your powers to design a "super" navigation experience for an app that helps our developer heroes fight code-tastrophes and design disasters.
In this challenge, you’ll design a tab bar and screen of a fictional app to help your favorite superheroes. Whatever kind of app you decide to create, your challenge is to organize its core functionality into sections on a tab bar.
Bonus: If you’re feeling super-creative, design the root screen of one of that app’s tabs. What would your heroes need to view? What actions would they take? (Note: Though you’re just designing one screen, the features designed in this view should work in harmony with the other tabs in your proposed app.)
We also welcome you to visit the Design Study Hall to collaborate on this challenge! Ask questions, connect with other developers, and share your creations.
Begin the challenge
To get started, we recommend watching “Explore design navigation for iOS” to learn how you can take advantage of existing navigation structures to simplify complex interactions in your app without compromising its personality. Explore best practices and common pitfalls when working with tab bars, modality, and more.
We also recommend checking out “Writing for interfaces” to find out more about creating clear, conversational, and helpful labels and writing in your app.
Explore navigation design for iOS
Familiar navigation patterns can help people easily explore the information within your app — and save them from unnecessary confusion. We’ll show you how to take advantage of existing navigation structures to simplify complex interactions in your app without compromising its personality. Learn...
Watch now
Writing for interfaces
The words and phrases you choose for your app matter. Whether you’re writing an alert, building an onboarding experience, or describing an image for accessibility, learn how you can design through the lens of language and help people get the most from your app. We'll show you how to create clear,...
Watch nowOnce you're ready to start designing, visit the Apple Design Resources page to download the iOS design template and get access to tab bar symbols and iOS system colors. We also recommend downloading and exploring the SF Symbols app to create compelling iconography for your tab bar.
iOS apps can have between two and five tabs — so consider which features would be most relevant for the superhero app you’re designing. Don’t forget to use descriptive and succinct labels for each tab!
Discover Apple Design Resources
Show us your super work by posting it on Twitter with the hashtag #WWDC22Challenges, or share your work in the Design Study Hall. And if you'd like to discuss other Design topics, join the team at events all throughout the remainder of the week at WWDC22.