What are the first few things users see when they download your app? Your welcoming app screens. This is where your users get their first impression of your app and the experience they’re going to have, so it has to be an excellent one.
An app screen is just like a website page. For an app like Instagram, for example, that means a screen that shows the logo in the top corner, stories across the top, messages on the right, the scrollable feed underneath and the navigation bar at the bottom. Not only does it need to be responsive and fast loading, it needs to bring functionality that’s valuable to your target users and be intuitive and easy to use. This has a lot to do with the user interface and the user experience it offers. UX is the thing that makes all the difference between a good app and a terrible (and unsuccessful) one, so it’s vital you put some care and attention into your app screen design to meet users’ expectations.
So you’ve got an idea for your app, your brand is sorted and you’re ready to begin the design phase. Whether you’re taking care of this in house or heading to an agency like ours with wireframes sketched out, here are some key points to consider when starting on your app screen design.
This is the answer to the question we opened this article with. You get to choose the screen users land on when they first open your app. There are four main types:
This is the main screen of your mobile app. It should be the one your users interact with the most and feature all the menus and options. While your home screen design will be unique to your brand and your app, it should have some common elements, like a menu (or burger menu), tab bar in the footer, a search bar and buttons so users can navigate onwards easily.
A splash screen is like a loading or intro screen that pops up while the app loads up behind it. Typically minimalistic, it might show your logo and tagline and only stay up for around six seconds.
This is normally a series of screens that show up after users have logged in for the first that help them get started with using the app and understanding its features. They can highlight menus, navigation and features using an animation (of a mascot, for example) or illustration pop-up.
This type of screen is suited to apps that offer personalisation and community. This allows users to pop in information about themselves. If a user has downloaded your app for the first time, instead they can be presented with a login screen, displaying only the essential information they need to enter to create an account. Bear in mind that the profile screen can also sometimes mean the settings page, where they are often paired together.
Helping users navigate their way round your app should be at the top of your priority list. After all, what’s the point of creating amazing features and compelling content if your users can’t find them? They’ll just end up dropping off.
When you’re in the process of design, ask yourself: Where am I? What can I do on this screen? How can I move forwards and backwards? Make it so that users can explore your app intuitively and complete basic tasks without having to look for answers as to how.
Consider adding Contextual Onboarding, where guides and tooltips highlight features and functionality as users navigate around the app for the first time. Sometimes these are drip fed to users over the course of the first few logins.
And take a look at how other popular apps take care of navigation. It’s always a good idea to look at well-trodden design patterns. Start by checking out Google's Material Design and Apple's Human Interface Guidelines. These are the kind of patterns we use as designers as they are all industry standard and have undergone extensive user testing to prove their validity.
The importance of visual hierarchy is that it helps lead the eye and reduces the amount of effort users have to put into engaging with your app.
With an app, you’re dealing with a lot less space than you have with a desktop web page, so thoughtful spacing, alignment and proximity are key to an eye-catching and easy-to-consume app screen design. Think about using size and scale to pull focus, consider users’ viewing patterns (hint: it’s usually Z or F), pair different typefaces together and direct attention with texture and tone. For more ideas on how to rank your design elements, check out Adobe’s article on the key principles of visual hierarchy in UX design. Don't be afraid, though, to make a long page if required. It has been proven that users will explore an app using scroll.
Incredible app screen design isn’t just about the visuals - it’s also about the copy. You need engaging, imaginative copy to bring your brand message to life and clearly explain to your users what your app is all about. Make sure you have a clear idea of what each screen should say and where it should be placed - or, if you don’t have any words down on a page yet, get an agency like us to support you in creating sparkling copy.
Remember to be mindful of the size of the screen when you’re placing copy. It can be challenging to fit a lot of text into an app and it has to be readable. Users generally don't read large chunks of text, so keep it succinct and snappy, so they can understand the gist by scanning the screen and picking out key words and phrases.
Here’s where you should consider conventions and standards for app screen design. While you want your app to be original, conventions are important, as they help users to orientate themselves and recognise certain features without having to think about it.
Often logos are found at the top or in the corner (or are set as the home icon), as that’s where users’ eyes will go to find it. Add links in a contrasting colour to create a clear visual design language that the user can recognise a link and whether it’s clickable. Use further contrasts in colour or placement to highlight unique elements and, once you have established a design pattern for certain elements, repeat them for cohesiveness and recognition.
This follows on from placement. Always consider that you’re designing for a handheld device.
Where possible, always design for thumbs. Make sure you’re aware of touch targets - the areas on your app’s screen that respond to touch. Consider whether these touch targets - like buttons, menus and other interactive elements - are reachable by thumbs and that they’re large enough to be tapped on. There’s not a lot more annoying for users than missing a button or tapping the wrong thing.
Using the top of the screen for navigation and CTAs requires extra effort to reach for, so try to make sure if you put important functionality at the top of the screen, there’s a good reason.
Responsive screen design is all about ensuring that all components can respond quickly to different screen sizes and orientations, without compromising on user experience.
If you’ve created a cross-platform app, your users will be accessing your app from all kinds of different devices and screen sizes, so you want each app screen design to look good and perform well on all of them. For example, the iPhone 5 or SE has a much smaller screen and sometimes requires some extra thinking and design. Remember to consider tablets as well as smartphones. You can approach responsive design by creating certain screens that keep content centred right in the middle so it’s applicable to all devices, or by having a thorough understanding of the screen sizes and resolutions of the devices your target users use the most. Google Analytics reports can help you figure out what those might be if you don’t already know. Responsive screen design sounds like a lot of legwork, but it’s well worth it when every user has a smooth, seamless experience.
If you’re considering adding animation or motion graphics to your app screen design, think twice. Ensure they have a purpose and don’t just add them for the sake of it, as they are expensive to build in the development stage, as well as can cause bugs and issues with loading speeds down the line. Micro animations can really bring an app to life but should be used sparingly.
App screen design should aim for simplicity and transparency so that each screen is easy to use and understand for the user - and becomes more and more familiar every time they log back in.
You also want to avoid clutter. At all costs. Cognitive load - overloading users with too much information, from graphics and text to UI elements like buttons and icons - can have a negative impact on their ability to take everything in and enjoy their experience. Stick to features and placements that are absolutely necessary and throw everything else in the bin, to ensure you’re optimising UX for your app.
Now you’re armed with tips for app screen design - along with a strong sense of your brand, your target users, your product or service and your goals for what users do on the app - you can start to consider your next steps. If you could use some help with wireframes, copy, UX best practice, responsive screen design and advice on the differences between iOS and Android if you want your app on both platforms, we’ve got you covered.
Have an app ready for design? Let’s chat.
.png)
