Design a mobile app based on an existing desktop app, web app, or website

Introduction & App Design 101

Choose the website, web app or desktop app to base your mobile app on
Many websites and web apps now have a mobile counterpart, and sometimes mobile apps are later brought to the web. Some easily identifiable examples include Facebook, Twitter, Pinterest, LinkedIn, Spotify, Rdio, Evernote, Email clients, etc. These websites and desktop apps all serve a specific purpose when a user is on their computer, but their functionality on mobile devices can differ significantly.

Some things to consider:
- Select a website/app that makes sense to bring to mobile
- Try to choose a website/app that doesn't yet have a mobile app. It will allow you to be more creative and make it your own!
- Choose something you use yourself; you'll likely be more invested in getting it right
If you're having a hard time choosing, you can always pick something that already has a mobile app. Take a different angle or approach to the app, and think of ways you'd prefer to use it. (Many mobile apps aren't great, this could be your chance to make one stand out!)

App category ideas:
- Lifestyle
- Food/Cooking
- Travel
- Planning
- Music
- News
- Entertainment
- Social Networking
- Sports
- Utilities
Define the goal of the app
Most websites, desktop and web apps are very robust and have a lot of features and content packed in. It's easy to create numerous sections and still maintain good organization online, but mobile is where it gets tough.

Try to determine what you want users to accomplish with the mobile app. Chances are it's only a handful of things. Make a list of the most important features you want to include. This will help inform how you will architect your app, and what screens you'll need to design. Remember: keep it simple!
Familiarize yourself with mobile best practices and standards
While you are most likely very familiar with apps if you have an iPhone, it's still important to learn and review the standards before you start designing.

Things to remember:
- Retina and non-retina screens
- Touch targets
- Layout constraints (fixed vs. flexible)
- Navigation standards
- Less bitmap images (use repeating patterns & textures)
- More scalable graphic assets and shape layers
In the resources section below, I've provided several links to learn more about best practices and iOS platform standards.
Deliverable: Project Plan
Create a project plan document. Include the website or desktop app you will base your mobile app on, your goal(s), and the feature set you want to focus on.

Your document can be any file type you choose: PDF, Word, JPG, etc.

Inspiration & Sketching

Brainstorm and get inspired
Like any design project, I begin by looking around the web for inspiration. There are tons of websites to browse and find great design work, but there are a few which really stand out for mobile app design. The great thing about these websites is it's easy to search for specific UI elements or patterns, such as navigation, drop down menus, button styles, layouts, typography, etc.

Here are some of my favorite places for inspiration:
- Pttrns http://pttrns.com/
- App Design Served http://www.appdesignserved.co/
- Dribbble http://dribbble.com/
- Behance http://www.behance.net/
- Apple App Store! Don't underestimate using the app store as a resource for finding great app design. Look for the featured apps in all of the different categories.
- Your favorite apps! What makes the apps you use all the time so compelling? Is it good design? Are they easy to navigate, and easy to do exactly what you want?
Start sketching
You should have plenty of ideas swimming around your head now. But instead of jumping right onto the computer, grab a pen (or sharpie in my case) and a good old pad of paper. I've provided links to iPhone templates and other downloads below in resources, but I prefer to start out with no constraints.

If you haven't already, decide which key screens you want to design for your app. This will likely include the "home" screen, as well as those screens where the main interactions will occur.
Decide navigation and flow
When you have a basic idea of how you want to structure your app, sketch out a flow map, or how you envision the user getting from one place to another. Decide the navigation for your UI, whether it's a conventional tab bar at the bottom of the phone, a drawer-like panel that is revealed on the left, or any other way.

The bottom tab bar and now the left-panel drawer have both become iOS standards for navigation. Users come to expect these behaviors, so generally it's a good idea to stick with what people know. However, other apps have been quite successful creating their own navigation paradigm, as long as it's quick and easy for users to learn the behavior. A great example of this is the app, Path, which uses a round plus button in the bottom left corner, and tapping that lets users add different content to their Path timeline.
Deliverable: Refine sketches or wireframes of key screens
Typically the next step after sketching is transforming the sketches into wireframes. The wireframes can be super simple; literally just a cleaner version of your sketches, or they may be more detailed, depending on the complexity of your app.

Some designers prefer to spend more time wireframing to work out many of the details, since it can be much faster to iterate in a low-fidelity format. Others like to get a basic shell down quickly, then let their creativity fly with high-fidelity mocks.

For your deliverable, please share your hand-drawn sketches and/or wireframes you've created.

Setup & Initial Designs

Set up your files
First decide which program you want to design in. My personal preference is Photoshop, but I know many designers who swear illustrator is superior. Either way, the first step is to set up your canvas size to 640x1136px. This is the dimensions of the screen real estate for the Retina (or 2x) iPhone5. Next you'll want to include a black status bar with a height of 20px at the top. You can use the Teenhan Lax template PSD for the status bar and any other UI elements you may need to get started.

Orientation

Also note that we will be designing in portrait mode for iPhone. Some iPhone apps have modified layouts for landscape mode, while others ignore landscape all together and nothing happens when you turn the device. This is much more important for tablets, since these devices are used in both modes all the time. For the purpose of our exercise, we only have to worry about portrait.
Design in 2x (Retina)
I prefer to design for iPhone at 2x for a couple of reasons. One is you get more pixels to play with and therefore more detail you can add. Secondly, I find it's easier to build everything at double size and then scale down to 1x, instead of having to scale up. (There is an app called Slicy which works wonderfully for saving out 1x assets from 2x files. I'll explain more about it in the next unit.)

Double up!

There are some important things to remember when designing at 2x. Because it's double the pixels, you literally have to think in double...or in other words, divisible by 2! That means every number you enter, whether it's the heights or widths of shape layers, text sizes, or the pixel size of a dropshadow in your layer effects, they all need to be even numbers. If you draw a 1px line, this will not be rendered correctly, since half pixels are ignored. It's very important to keep this in mind, and after some time it will become second nature.
Consider your typography
One thing you'll quickly learn with designing for mobile apps is how to make the most of a limited font set. Apple has the basic web fonts embedded into the iOS, so you're able to use those freely. (Android only has one embedded typeface you can use!) You can use custom fonts, but you'll not only have to embed them into your app, but you'll also have to purchase a separate license for using them for mobile.

Here is the list of Apple's embedded fonts for iOS 5 and 6. http://iosfonts.com/

Another important thing to remember is font size. If you've never designed for a retina screen before, it takes a bit to get used to seeing font sizes in the 20s, 30s and even 40s! Just like you have to double pixels for everything else, the same applies for font sizes. A standard 12px font size will need to be doubled to 24px. You'll have to play around with different sizes and test it out on your device to check your sizing.
Using buttons and UI elements
There are a few things worth mentioning regarding UI elements on mobile and touch devices. The first is to remember users will be interacting with your app with their fingers, not a tiny mouse pointer. Therefore the size and "touch targets" of any buttons, text fields, menus, etc. need to be large enough to do just that – touch! There's few things more frustrating than accidentally tapping the wrong button and then having to navigate back and try again.

To help, iOS has developed a standard for touch targets, which is a 44px (or 88px in retina!) area for each actionable element. This doesn't actually mean that all of your buttons need to be 44px tall by 44px wide (that's 88px for retina if you've been paying attention :). Your actual buttons can be smaller (though they shouldn't be TOO much smaller), as long as the invisible tap-able area around your button is large enough. Also be mindful of spacing out buttons so they aren't too close together.

Additionally, hover (or mouse-over) states do not exist on mobile devices. Most people prefer to get some sort of feedback when they interact with UI elements, so it's a good rule of thumb to make something happen to buttons and other elements when they are touched. A few examples would be to simply created a "pressed" state of the button (make it darker, lighter, etc), or showing a loading spinner. This feedback lets the user know that the device acknowledges their action and should be processing it.
Keep your UI simple
By now you should have determined where your main navigation will live, and likely it will be in a "fixed" location. An example of fixed elements would be a top navigation bar or a bottom tool bar. These elements stay locked in their position while other the user moves through the "fluid" content on the screen, usually by scrolling, swiping, or interacting with buttons and other UI elements.

Because the iOS gestures are so intuitive and convenient, this greatly helps to control the amount of information one needs to present to the user at a time. Focus on determining what a user's goal(s) will be in each section of the app, as well as on each screen. Don't make the user have to decide between too many different things, or they may quickly lose what you are trying to help them accomplish.

For example, let's say the user is looking at a recipe in an app. Some functionality may include:
- Favorite or save recipe
- Add to a shopping list
- Share the recipe
- Go back to a list of recipes
These functions serve as quick actions a user can take, but do not overcomplicate the UI. For instance for sharing a recipe, it would not make sense to include all of the sharing options on the recipe screen, such as:
- Share to Facebook
- Share to Twitter
- Share to Pinterest
- Share via Email
- Share vis SMS
These actions are better served to be revealed on a subsequent screen, or in a pop-over menu, once the user has chosen to share.

For utility-based goals, group similar functions or actions together on one screen so the user doesn't have to dig for their options. For in-depth processes, try building step-by-step layouts to avoid overwhelming the user with too much. Play around with your favorite apps to familiarize yourself with patterns that work well.

Photoshop tips

If you are designing in Photoshop, I highly recommend using shape layers. Lots of shape layers. I can't stress enough how much this will help you when you have to save out assets for both 1x and 2x resolutions. Vector shape layers are easily scalable and more forgiving than anything that's rasterized.

If you are using any patterns or textures, make sure to build them as repeatable patterns. These will help keep file size down (and will make your life easier!).
Deliverable: Initial designs
Let's see what you've got! Share some of your initial mockups.

Finalize Designs & Next Steps

View your designs on a device!
Now that you've begun designing and getting type and graphics to size, it's incredibly important to see how your pixels actually render on the iPhone (or iPad).

There are two great programs to help you do this very easily: LiveView and Skala Preview. Both of these apps require the program installed on your computer as well as the phone or tablet you wish to use. Both are free apps! All you need to do is open the app on your iPhone and computer, and make sure both are connected to the same wi-fi network. Then your device name will display on the computer, and once you select it, an outline will appear to show what is being broadcast to your device.

You'll be able to view your designs at 100% on the device, and you can quickly determine if your font sizes, buttons and other UI elements look like the appropriate size. The best part is you can tweak something in your design file, and see the changes appear on the phone almost immediately.

It works great for comparing different layout options as well. Don't wait until your design is almost done to start previewing on your device – do this as you go. It helps. A LOT.
Finalize your designs
Continue refining and building out the key screens of your app. Include as many screens as you'd like to convey your app concept. Look at all of your screens together (you may want to print them out) to see how they flow architecturally as well as visually. Does your app feel cohesive? Did you keep it simple?
Design for development
I mentioned an app called Slicy in Unit 3. If you're at all familiar with saving out graphic assets for developers, Slicy will change your life. It's amazing. Slicy is a desktop app that does magical things to take your retina (2x) assets and save them out as 1x, or vice versa. With Slicy, you don't need to manually create two complete sets of assets!

This is where using shape layers, vector objects, and other scalable assets come in handy. Slicy won't work with rasterized layers or objects, nor smart objects.

Slicy's website has great instructions for prepping your Photoshop files. All you really need to do is name layers or folders as what you want the asset name to be and define whether it is a retina or non-retina asset.

For retina assets, label them in this format and the 1x assets will be automatically saved too: "my-button@2x.png"

For non-retina assets, include "+2x" at the end: "my-button.png+@2x"
Create a prototype
There are plenty of resources out there to help create prototypes, but in my opinion, none are as super simple and quick as InVision (www.invisionapp.com). With InVision, you can create click-through prototypes which simply navigate users from one screen in your app to another.

To start, all you have to do is upload JPGs or PNGs of the app screens you've designed. You then create hot spots on each image (by drawing an invisible target area around buttons and other UI elements) and define what screen each hot spot will navigate to. Once you've linked up all of your screens with hot spots, you can demo the prototype through the website, and you can even send the prototype to your phone!

This is where it gets really cool. You can save the prototype to your iPhone's home screen, and you're able to tap on each hot spot to simulate how users would move throughout your app. By doing this, hopefully you can spot any weirdness or confusion that you may not have noticed before.
Deliverable: Final designs
Show off the final mockups you've created! Make your app even more polished by placing it inside of the iPhone device.

Additional Resources

Download the entire class in PDF format to easily follow along while you are creating your project.
Apple iOS Human Interface Guidelines (PDF)
Wireframing kit and tips:

http://blog.mengto.com/how-to-wireframe-an-iphone-app-in-sketch/
Sketching and wireframing templates from Smashing Magazine:

http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/
Photoshop setup:

http://www.teehanlax.com/blog/how-to-design-pixel-perfect-photoshop-files-for-ios-apps/
Tips for designing for iOS

http://www.teehanlax.com/blog/5-things-to-know-when-designing-for-ios/
iOS design cheat sheet

http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/
iOS7 UI Toolkit from Teehan Lax

http://www.teehanlax.com/tools/ios7/
iPhone UI Toolkit from Teehan Lax

http://www.teehanlax.com/tools/iphone/
LiveView

http://zambetti.com/projects/liveview/
Skala Preview

http://bjango.com/mac/skalapreview/
Slicy

http://macrabbit.com/slicy/
InVision

http://www.invisionapp.com

Anticio Duke

Design with Life in Mind

9

104

Company

Community

Teaching

Mobile

Company

Community

Teaching