Chapter 8: User Interface Design on Tablet, Desktop, and the Web

In the previous chapter, we made significant progress in designing layouts for our mobile app by completing two more views and we also created some important reusable components that are now easily accessible from your library. According to the brief that was defined in Chapter 2, Structuring Moodboards, Personas, and User Flows within FigJam, our application should run not only on smartphones but also on tablets and desktops, so in this chapter, you will learn what you need to do to make your design responsive and how to make it look good on large screens. You already know about functions that prevent your interface from breaking when resizing, such as constraints and resizing. It is true that if you apply them correctly, you can avoid many unwanted problems while scaling your layouts. However, this is not enough to make your design fully responsive, especially if you are creating a product for different platforms, as...

Discovering responsive design

In this section of the chapter, you will be introduced to the concept of responsive design, which is very important to know about and keep in mind when designing any digital product. You'll learn all the basic techniques on how to make your interface design as flexible and responsive as possible. This is a huge topic to learn, but you will start with simple things, such as adding missing elements and making sure the app looks good in different screen resolutions on your mobile device.

So, as you know, on the Hi-Fi page, you designed your application for streaming video within one specific screen size of a mobile device, which is the iPhone 11 Pro / X. But, as mentioned earlier, it's important to make sure your product looks decent on all major device resolutions it can be used on. To do this, you don't have to create new views from scratch. Instead, you focus on the ones you have so that they are perfect for any screen size.

Even...

Adjusting the interface for tablets

In this section, you will take a step further and learn how to design your tablet app using ready-made Hi-Fi mock-ups for your mobile app. You will discover the best methods for adapting your design to significantly higher resolutions so that it looks great in all views, from simple to complex.

In the previous section of the chapter, you saw how a fluid layout adapts to different mobile resolutions, so it was pretty easy to properly configure our interface for each smartphone model in the presets. But just because our interface can scale automatically doesn't mean it will look good on larger devices, such as the iPad, without additional adjustments. Want to see a practical example?

The following screenshot shows the Login screen of the app immediately after switching to the iPad preset, without additional changes to the originally existing interface design:

Figure 8.13 – Testing the Login view on iPad

...

Adjusting the interface for the web and desktop

In the previous section of the chapter, you created the interface of the tablet app, making it look like a native mobile app as much as possible. The next step is to move to bigger resolution screens, namely desktop and browsers. You always have to remember that web and desktop applications are completely different platforms. But aren't browsers part of the desktop, as well as smartphones and tablets? Let's clarify this point. Today, as stated earlier, development has really changed a lot. Year after year, application and website development have become more and more intersecting, and now thanks to scalable frameworks and programming languages, it is really difficult to draw a clear line between the two. So far, you have worked on the interface as if it were an application, but the application itself can be easily rendered in a browser and turned into a web application, with most of the functionality still present. A practical...

Summary

Responsive design is one of the principles that a designer must always stick to when working on any interface. An app or website you create might have a great user experience and a stunning user interface, but if it's not properly adapted for all the resolutions and devices it needs to run on, your good work will be diminished all at once. And in this chapter, you have done everything to prevent this from happening with your application. You have completed your mobile app interface by creating additional reusable components and making sure all layouts are fluid by testing the views in different smartphone presets. Also, you have adjusted the design of your app for tablets by redesigning a couple of views specifically for this platform, that is, creating a breakpoint, so now you know when and why it is worth doing it. Finally, you've learned how to scale the interface correctly for desktop and the web while maintaining the harmonious and consistent look of your designs...