Rally Reader
A fresh new look and feel for an educative app for kids
There are more differences between a desktop design and a mobile design than meets the eye, or… the screen size. It takes up a lot of creative energy to transform a desktop website or application into a mobile version. Working from small screens to bigger ones is called progressive enhancement, while the other way around is graceful degradation. You don’t want to overflow your smaller screen. But you definitely don’t want to leave out too much information. Adapting to various screen sizes means you give and take and need to prioritize your designs accordingly. Luckily there’s enough ways to go about that which we’ll talk more about below.
Other elements like micro-interactions, feedback loops and transitions can also play a big part in the mobile design experience. You can spice up the onboarding part of your app with illustrations, unique splash screens and sounds. You can also let users personalize their apps by offering a custom app-icon and switching between dark- & light mode. To be more inclusive you’ll not only want to design for that shiny new iPhone but also the previous size. Mobile phones can be found everywhere and used for anything. Ideally you’ll want everyone to access and use your product equally.
Some of our projects that involve
Things that help us create the best mobile designs
Unique style guide
Mobile designs have their own chapter in our brand and style guides. They have their own unique typographic scale so you’ll need to pick a font that works well on all fidelities (we like using starting out with Google Fonts or Lexend). The amount of words on screen also counts towards the legibility, so it’s good to keep that in mind when designing. Components like buttons also need to adhere to accessibility standards (your thumb needs to tap on it), and links can’t be too small.
Mobile HIG
We advise to stick with official Apple and Android Human Interface Guidelines (HIG), and beware of the many differences between the two. For example, the FAB (floating action button) only works on Android and iOS prefers their back button in the top-left corner. On a desktop, you design everything out in the open because you have a lot of space. On mobile we use progressive disclosure to present the same information in a fun & intuitive way with carousels, pop-ups, swiping, bottom sheets and sliders.
Figma Mirror
We use the app Figma Mirror to, well, mirror the experience we’re designing on our computers onto a mobile phone. This is so we can get a sense of the design before it has to go through the wringer and be developed. When you design for mobile it’s easy to turn it into a clickable prototype– perfect for testing parts of the User Experience and to get a feel on how things should animate on screen. Mirroring the design on your mobile device can also help to double check if everything has adapted to the right size.
Read more of our thoughts on Visual Design
Part of a bigger ecosystem
Mobile experiences usually don’t stand on their own but are part of a bigger ecosystem. It’s often your user’s first- & only touchpoint where they experience the product so it requires a lot of love and labor to perfect it. A great source of inspiration for both UX and UI patterns is Mobbin. They show realistic (live) designs in categories based on interaction or place in a journey.
Design for context
Mobile phones are used in more contexts than a laptop or even tablet. You take them with you out in the world; in the park, on the train, filming your rollercoaster ride (please don’t) so UI will need to always be clear, readable and usable. But this is an advantage as well: users can scan QR codes, purchase products on the spot, share their location for geo-tracking games and share their experience easily.
In mobile design, it’s important that we respect a user’s task and mindset, as well as the device’s limitations
Interaction Design Foundation
Educational organisation that offers open access material
Main takeaways
Stay true to guides provided by mobile phone manufacturers
Make them your own; bring your unique style to the brand guide
Understand the context; where is the app on the mobile phone being used?
