Quick Tips: App Design with Adobe DPS

Take a minute and think about what kind of designer you are. What category would you put yourself in? Print? Digital? Would you go more specific and say brand management or strategist? How do you define you and what you do? Chances are if you’re a designer — any kind of designer at all really — at some point, if you haven’t been already, you are going to be asked to help design an app or other media for mobile devices.

shutterstock_152402528

Image Courtesy of Shutterstock

With the world of print slowly aging out of favor more and more designers are making the switch from print only to a healthy mixture of both digital and print (some even have gone so far as to be digital designers only). In order to be the most versatile designer you can be, you have to be immersed in the world of digital design to some degree. Luckily there are many YouTube videos, books, and short online courses that can give you a crash course in how to start making beautiful apps.

If you’re already well versed with Adobe Illustrator, Photoshop, and InDesign you’re already in great shape to make this jump in to mobile app design with the use of Adobe Digital Publishing Suite. Adobe DPS is a comprehensive package that allows you to compile websites with ease. The best part is that it’s available in Adobe Creative Cloud so you can experiment without making a huge investment up front. To help you get started we’ve compiled five quick tips to help you get started using Adobe DPS:

Familiarize Yourself With Rules & Regulations

Before you start designing for any kind of app be sure to check out the requirements of an app. Apple and Android have all kinds of regulations for the size of tapable areas and icons, that you have to meet lest your app get rejected by the app store. Also know where you intend to sell your app, if you’re a Creative Cloud subscriber you can only publish through the Apple App Store, if you want to sell on the Google Play store you’ll need to purchase a full version of Adobe DPS.

Vertical or Horizontal or Both

responsivedesign

Image Courtesy of Shutterstock

Take a quick second and pick up your phone or tablet and open your favorite app. Are you holding your phone horizontally or vertically? Now flip it – if you were holding it vertically turn it horizontal and vice versa. Does the content shift? Does it stay stagnant? If it stays the same and is just now on it’s side and you have to crane your neck to read it on it’s side you’ve got a stagnant app, if it changes it’s a fluid app designed for both horizontal and vertical viewing.

If you want your app to be able to be viewed both vertically and horizontally you need to design it both ways, keep that in mind as each individual page will need to have both a horizontal and vertical view which creates a little more work for you. Keep in mind that there’s not a single correct method, many sites are stagnantly horizontal or vertical, and just as many are fluid. Decide which method is the most natural for your particular app; it’ll be unique in every situation.

InDesign. InDesign. InDesign!

You might think we’re trying to summon the second coming of Beetlejuice, but it is super important that you remember to design your app using InDesign. InDesign is the main home of your app, it is here that you’ll write your content, compile your pages, slice graphics, and more. Make sure you’re familiar with how InDesign operates and make sure you clearly label every part of each page with something obvious and consistent across all pages. This way when you test your app you can quickly note what isn’t working or doesn’t feel right and make the necessary changes without having spend a lot of time hunting and pecking for that small navicon on the top right of the page amongst all your other text and graphic entries.

What’s In A Folio?

shutterstock_124368175

Image Courtesy of Shutterstock

The newest item you’re going to run across when designing an app that you haven’t used before are folios. Essentially a folio is just a collection of all the individual InDesign pages like a portfolio. The folio is what turns your InDesign pages from individual static pages into a series of stacked interactive pages that you can navigate through with the use of your navicons or simple moves like swiping up or down, and left or right. Folios also do a lot of the heavy lifting for you when it comes to making a dual-orientation (fluid) app. Folios use Layout Adjustment and/or Liquid Layout rules to move and size many of the features for you. You may still have to change a few parts around, but that’s why you’ve already clearly labeled the pieces of each InDesign page so that minor tweaks between the vertical and horizontal pages are a breeze.

A few quick things to remember when creating your folio are that you shouldn’t bleed images or text off the page; you’ll lose them when displayed on an iPad or mobile phone. You are also going to get a 6 pixel scroll bar in many situations so make sure that your design accounts for that on the right hand side of both your horizontal and vertical designs; you’ll save yourself some major headaches in the long run. The biggest thing to remember is that you need to think in pixels since those are the units you’ll be using in the folio to make your pages interactive.

Have The Devices You’re Designing Your App For

This might seem like a no brainer, but it is a critical step in the entire process. If you’re designing an app for an iPad make sure you have one or you have easy access to one to test your finished design on. Adobe DPS had simulators, but nothing compares to having the real deal to try it out on to make sure that swipes, taps, pinches and other moves work how you want them to that the user navigation is friendly and natural. Remember that most users have apps of all sorts and the vast majority all use the same motions that your intended users will already be familiar with so don’t go too crazy with making up motions unless that is the M.O. for your app.

Using Adobe Digital Publishing Suite

 

For a quick step-by-step guide for building a slick new app using Adobe DPS and InDesign check out the Using Adobe Digital Publishing Suite e-book available now at MyDesignShop.com!

 

Want even more info on how to create a killer app and other ways to use Adobe DPS? Check out our February Kit of the Month, The Adobe Digital Publishing Suite Premium Collection that explores the many uses of Adobe DPS available now at MyDesignShop.com!

COMMENT