Most times, when we are designing our apps, we forget how app will look on landscape mode, tablet or tv. This a real problem because in larger screens, content may be displayed in a very different way. We need to think in adaptive design for different screen sizes. Although this post consists in a brief and interesting lesson about what I have learnt in the course Material Design for Android developers, it can be applied to another platforms such as web design or other operating systems.
Before optimizing our UI for large screens, we should think what aspects we should optimize. Some of these aspects could be:
Image Quality
Avoid blurred images when it is upsized from its original size. Images should be beautiful and sharp in any size. Use vector images as much as possible and you won’t worry about adaptive design.
Reading Comfort
To read better the content of your app, keep in mind these suggestions:
- Font size according to text, avoiding too small font sizes.
- Line length between 45 and 75 characters. Otherwise, your content will be hard to read.
- Apply margins to container. It helps to identify lines.
- Apply the correct line spacing. Too much, the text would seem disconnected; too little, cramped.
- Margins to container should be larger than line spacing.
Balanced use of space
Imagine that every component of your app as a black block over a white background, content should be uniform across the screen, or at least centered, avoiding uneven big seas of white spaces. All your content will be well distributed making your with a good adaptive design
Maintaining context
If a view, e. g. details screen, does not require a lot of space, let’s redesign it as a dialog or just increasing its size.
Clean, clear and beautiful aesthetics
- Make sure you are clear with all content on your display
- Don’t overload your screen with a lot elements, it will reduce users attention over your interface.
- Apply current styles, forget retro ones or something were being applied years ago.
