Wire Framing a Tablet

wireframe-header.png

When comparing a phone screen to a tablet screen, the amount of real estate you gain in a tablet design is huge. Due to that fact, the process of designing an app for a tablet exclusively causes some key differences to become apparent in the design process.

Where phones and tablets differentiate

As an example, when designing for a phone, you're locked into a relatively small screen. This smaller screen forces you to limit your designs in certain ways so you can fit everything you need in this space. This means avoiding unnecessarily large buttons and over complicated designs. On the other hand, a tablet's screen space is much larger, giving you a lot more leeway into what you can and can't put in your designs.

On paper this makes it seem like designing for a tablet is much easier, as more space should give you a lot more freedom in what you make. This quote from Amit Ashwini though helps show that in practice, it's not quite that simple

UI elements must still defer to content and functionality. The uncomplicated, streamlined approach necessary for phones encourages good design and should also be part of your tablet design. Keeping everything exactly the same as for your phone view however, is not ideal. For instance, tablets do not necessarily need the one column layout used for phones, a two column layout, especially for landscape views, is a great way to go for tablets. Especially because tablet users favor video and game content, we should pay careful attention to aesthetic integrity in tablet apps.

While it's nice to have that space, in a way it could almost be a bit of detriment. With all this new space, you may start thinking big, potentially too big. It's natural to want to try to better utilize having more space, but as Ashwini says, the approach used for phones often encourages good design. This means for a tablet app, you have to limit yourself in certain ways similar to phone app, while also making sure you're able to properly utilize the strengths a tablet brings, making a much different and slightly more difficult process

My wire frames

When creating my wire frames, I tried using this thought process as well as other tips and hints I got from my research, though it proved to be a challenge at times. I’ve never truly designed for a tablet app before and even knowing a general idea of the differences between a phone and a tablet, doing it myself still proved difficult. With that in mind, it meant I had to use the fail safe I made during my project planning and readjust my workflow for this week and next. Originally, I was going to do multiple wire frames and decide on the final UI design this week. Due to the difficulties I had at some points trying to figure out the proper layout for a tablet app though, I only could make one design I felt comfortable with. This means next week I’ll have to not only design the UI, colors, and type, but also use that to make multiple design comps.

Beyond my struggles though, I did still manage a complete set of wire frames. I tackled this process going screen by screen through my information architecture and creating whatever screen needed. This meant first getting the main navigation screens, such as the home screen, settings screen, and collection screen, and then going deeper in all of those screens.

My home screen wire frame

My home screen wire frame

When beginning making those deeper screens, the first thing I focused on was making sure the physical scorecard itself. Using my previous research of scorecards and what, I used those references to make a fully detailed scorecard. I then used this sample of a scorecard to create many of the others screens, such as the detailed collection screen as well as how you can share and look up all different kinds of scorecards.

Speaking of the collection screen, the main concept I went for with that section, along with the community section that goes along with it, I wanted to make the app as all encompassing of different types of baseball as possible. I know from experience some people just love baseball, so providing a way to share not just American games, but games from leagues across the globe would be a great feature for people such as that. Overall, the app is relatively simple on the surface, which was part of my struggle, though creating some of the minor details and what not of how these screens interact and look when fully designed will be my main task for the remainder of this project.

Full set of wire frames

Production Journal

Previous
Previous

Narrowing the App’s Focus

Next
Next

Researching the competition