In such a small size for design, it's important to know how to add information that's useful without overloading the user. Join Renata as she shows you how to layout your screens in an app.
- [Instructor] It's important in layout that we think through the architecture of the information on our screen. What are the key elements the users need to see first, second, and then third. Make sure when designing your screen layout not to fill it with too much information. Don't clutter it with so many details that you overwhelm your user. Give them a chance to scroll to see more information. Create visual groupings to help users find the information they need. Use the full width of the screen.
For Apple Watches the default screen sizes are 38 millimeter and 42 millimeter. That gives to 272 pixels width by 340 pixels in height for a 38 millimeter screen and 312 pixel width by 390 pixels height for a 42 millimeter screen with which to work with. However, for the Google Watch it depends. Seen here are the hardware technical drawings that you can download from the Google Android Wear site.
If we take a look at the drawings we have a round version and a square version. You see if we look at our circular models here we have sizes that range roughly from 320 by 290 pixels, we scroll over though we can go as high as 400 by 400 pixels. You'll notice here if we look at our square versions that we have 320 by 320 and then, again, our smallest is 280 by 280.
So essentially what you're seeing here is that much like Android phones there's small and large sizes. Although unlike their phones, there's round and square faces. And in some cases because of the round face some of your components could be off screen. So this puts more pressure on you to make sure when you're designing to do your best to try to design and test on a variety of resolutions. Unfortunately, breaking down how to do that is beyond the scope of this course.
For the Apple Watch OS the majority of your screens will start with the navigation at the top. However, this is not true for your home screen. You'll note that the header starts on top, the body is in the center, and then our calls to action are on bottom. And this is true for the majority of your Watch app experiences on Apple Watch OS. Exceptions to this might be things like fitness apps, apps like Spotify that play music or video, where you'll have a slightly different layout, because your center body may be things like what music you're listening to, raising and lowering the volume.
Because apps like the Spotify app work mostly like a remote control for your phone your app looks a lot more like a remote control or a smart remote control, because you can actually see as well what you're listening to, and so it's not just a bunch of buttons like what you normally would think about with a remote control. For Android Wear the navigation relies mainly on gestures. You have a header at the top, you have your body, and then you have your CTAs.
So very similar layout as what you have on Apple Watch OS. So much like Watch OS, Android also has a header, body, and call to action at the bottom. Very similar layout in most of their applications, however, because their overall architecture acts differently than Watch OS these don't always behave the same way as Watch OS. It's really something to pay attention to in your designs, is making sure that the behavior on the Apple Watch behaves like an Apple Watch, and again, the behavior on an Android Wear device behaves like an Android Wear device.
So while the overall layout of your screens may be very similar, behaviors are very different, and that's something to really take note of in Watch apps. Also keep in mind that the Android Wear can also have apps like Spotify, that look different and function differently than this very typical layout. And that's a brief overview of screen layouts.
- The history of wearables
- Environment and context
- Interactions and IA
- Haptics, gestures, and motion
- Voice interactions
- UX considerations
- Game design basics
- Prototyping a game