- Step 4: Start designing. Use the UI kit as a starting point to create your own splash screen and combine it with the main screens of your app, such as a login screen, profile, payment information, and navigation screens.
- Step 5: Time to prototype. Simply wire screens together to create an interactive prototype you can share.
- Step 6: Publish your prototype and share on Twitter with hashtag #MadeWithAdobeXD.
Aurélien’s Top Tips for Building A Transportation App with The Navigo UI Kit
Aurélien Salomon is the designer with a passion for both UX and cars. Originally from Martinique, he studied engineering in Paris before landing in Montreal, where he now designs for a variety of startups along with top brands like Apple, Google, Lonely Planet, and of course, Adobe. His passions made him the perfect fit to design a transportation UI kit for XD.
“For transportation and navigation in general, the context in which people are using your app has a bigger impact. People might be walking, biking, or driving so their attention span is drastically lowered,” said Salomon.
“That’s why clarity and readability was something considered in Navigo even if building a UI kit it is very different than building an app. You are designing screens for designers, so flexibility start to be an important aspect as well.”
Here are Aurélien’s top tips for nailing the design using Navigo.
Designing The Splash Screen
The splash screen gives people feedback that your application has started and is loading. It was often used to reinforce the brand identity. Nowadays, however, faster loading times mean the splash screen might appear for less than a second. Generally you want the splash screen to be similar to the first screen of the app to create a visual continuity when your app starts.
Designing The Login Screen
For a Login screen, you want to make sure people can go through this process as fast as possible. People often forget their username or the email they have used for your app so you want should provide flexibility for identification. They should be able to use their email, username, or even their phone number as a login. You have to provide them a way to recover if they forget their password as well. Allowing them to login with Facebook, Google, LinkedIn, or Twitter can also alleviate some of the struggles.
Designing Navigation/Map Screens
One of the key aspects that is often overlooked is performance. Trying to navigate a slow map can be a really frustrating experience. You want to make sure that this experience feels fast and smooth. It is tempting to show a lot on a map, but you might end up with a cluttered experience. Prioritizing and showing relevant information at the right time is key.
Tips for Connecting Multiple Users
Generally, you want to identify what pieces of information need to be shared between two or more users. Privacy is critical, so it should be clear what is being shared, sent, and received, and what is remaining private.
More UI Kits, More Ways to Design with Adobe XD
For more ways to design, prototype, and share in Adobe XD, download these additional free UI kits to build travel, gaming, smartwatch, and dashboard experiences for apps and websites. Check out our full resource post, featuring more information about getting started with Adobe XD, and for UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.