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.
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.
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.
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 . They show realistic (live) designs in categories based on interaction or place in a journey.
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
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?