Designing for iOS 7: Working With and Breaking Conventions

Sarah Mick, Designer, Illustrator & Photographer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (35m)
    • 1. Trailer

      1:41
    • 2. Welcome & Intro to iOS 7

      5:41
    • 3. Researching, Reading User Reviews and Note Taking

      6:34
    • 4. Taking Notes to Sketching

      6:17
    • 5. Wireframing

      8:22
    • 6. Designing in Photoshop

      6:32

Project Description

Re-design an app based on iOS7 design and usability standards

Introduction

  1. Download Slides

    Here are the lecture slides for the Introduction.

  2. Check these out

    In the slides, I provided some examples and chatted a bit about UX and UI. Here are some links that you can check out recapping those examples:

  3. Start picking an app

    Choose a few apps that you either use frequently, know quite a bit about or have an interest in. It doesn’t need to be an app that has made the iOS 7 transition. It’s also okay if it has made an iOS 7 update. What’s important is that you pick apps that you think may need updates based on usability or design.

  4. Play around

    Play around with the apps. Use these apps for their intended purpose. If the app is for taking photos, take a bunch of photos. If it’s for posting blogs, use it heavily to post blogs. Basically, your homework is to be an avid user. Get to know the apps you’ve chosen inside and out.

  5. Make your selection

    Now that you have chosen several apps and have gotten familiar with them, narrow your focus down to a single app you’d like to work with.

Researching, Reading User Reviews and Note Taking

  1. Download Slides

    Here are the lecture slides for this unit.

  2. A few links

  3. Start taking notes

    Based on the process from the video, print screenshots of the one or two screens you’d like to improve upon and begin taking notes on what does and does not work.

  4. Read reviews

    Use the app store (as well as feedback from friends and family) to provide pertinent user feedback in your note taking.

    Don’t just focus on what’s unsuccessful. Make sure you make what is working, because you don’t want to lose that during the redesign process.

  5. 1st post time!

    Prepare your initial notes and selected screens for redesign and post them in the class project section for everyone to see.

    • You'll be posting photos of your printouts with your sketches, notes and thoughts written on them
    • Include the digital screenshot of the actual app for a better view
    • If the app HAS been redesigned for iOS 7 already, please include the iOS 6 screenshots for this post, too

    Please review at least two other students’ initial posts. You’re likely to learn quite a bit in seeing how other people approach UX and UI problems.

Turning Notes Into a Plan: Sketching Ideas

  1. Download Slides

    Here are the lecture slides for this section!

  2. Read Apple's HIG

    Get familiar now with iOS 7 once and for all by reading through the updated Apple Human Interface Guidelines. There's really no way around this and no substitute for the basics: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

    Here's the link for the entire toolkit in case you want to check into more specifics: https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289

    Links

  3. Review and select

    Review your notes carefully and select the most important changes you’d like to make. Make two lists: what to keep and what to change.

  4. Start sketching

    Using the final printouts/notes from the last unit as well as your list of improvements and design elements you’d like to keep intact, start sketching how you imagine the app will look.

    Don’t worry about being too detailed here, just work quickly to get out all of your ideas. The more you sketch at this point, the more resolved your final designs will be.

  5. Keep looking at other apps

    Don’t be afraid to look at other apps. There’s no reason to reinvent the wheel. For example, if you’re wondering how to improve upon a basic text input field, check out how the top 20 apps do that type of text input field. You’ll likely come up with one of the following two scenarios: there is a very definite convention or you’ll see that it is open to interpretation. Either way, you can learn the rules and then start to iterate on a new way to break them by getting creative.

  6. Post final sketches

    Your homework at this point is to sketch a bunch! Work from your general ideas until you’ve come to a fairly resolved version of the screen(s) you will be redesigning.

    Then, post your final, cleaned up sketches in the class project area for everyone to critique. Please include an example of the current app as it is designed as well as an explanation of what you changed and why you’ve chosen to do what you’ve done. Also review and comment on at least two other students’ sketch posts.

     

Using Illustrator for Wireframing

  1. Download Slides

    Here are the lecture slides for the 4th unit.

  2. Apply feedback

    Using your final sketches from the previous unit, apply any feedback you received from other students in the class. Add in notes on how you may be able to improve your final sketch using this feedback.

  3. Start wireframing

    Using Illustrator and tips from the lesson, start creating clean and simple wireframes of your ideas.

    A few things to think about as we move into wireframing:

    http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/

    Downloadable Illustrator Template: http://miketheindian.com/2012/09/28/iphone-5-wireframe-sketch-template/

    Amazing Wireframe Resource: http://ui8.net/wireframe-kit

    Simple mobile wireframe kit: http://ui8.net/wireframe-kit-v2

    In-depth discussion on why wireframing matters: http://www.seguetech.com/blog/2013/12/31/importance-wireframing-responsive-design

  4. Keep iterating

    Don’t be afraid to do a bunch of versions for each screen at this point. Now that you’re working digitally, it may become clear that certain design ideas aren’t working. That’s totally fine. It’s great to keep iterating here.

  5. Time to post again

    Once you feel that you’ve got some nice, clean robust wireframing done, post your sketch and your final wireframe(s) side-by-side for each screen you’ll be redesigning in the class project section.

    Comment again on at least 2 students’ posts of the same content.

Using Photoshop for Final Design Mockups

  1. Download Slides

    Here are your lecture slides for the final unit!

  2. Apply feedback, again

    Apply any pertinent feedback you received in the post section for the class to your wireframes. You'll want this added in there for moving into Photoshop.

    Check out the following for inspiration: http://www.pttrns.com

  3. Download a toolkit

    Nice toolkits for laying out your final mockups: http://www.teehanlax.com/tools/iphone/

    10 Column Grid System with Gutters:  http://dribbble.com/shots/866205-iPhone5-Grid-System-PSD

    iOS Design Cheat Sheet:  http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

    Make your life easier with repeatable Photoshop guides (plugin): http://guideguide.me

  4. Design time

    Building upon the final wireframes from the last unit, design the final screens for the app.

    We've focused a lot on usability, but now is the time to think about the visuals. 

    Get creative here and use all of the knowledge from the course as well as all of the design you personally draw from.

  5. Keep iterating if needed

    Don’t be afraid to continue to iterate here. If you realize, even at this stage, that you don’t want a button or an icon to live where it currently is, you can change it. Nothing is so sacred that it can’t be improved upon.

    Use all of your best Photoshop skills to make this file pixel perfect. Don’t just focus on the colors and the styles — focus on the grid and the measuring. Is it crystal clear what section is which? Is everything perfectly lined up? Have you named your layers? Love your developer! Give them a file that not only looks good, but makes perfect sense.

  6. The final post

    Post a mockup of your final screens in a “before and after” format in the class project section. Show us how you went from concept to sketching to wireframing to finished design.

    Use an iPhone 5 or 5s in the mockup to contain the screens you’ve designed. Explain your final decisions using a summary of the class and the process.

    If you’d like, include a link to the Photoshop file so others can see how your file is structured flawlessly. Finally, comment on as many students’ projects as you can!

Student Projects

project card
Tom Svoboda
7 comments
project card
Daniel Racca
project card
Ben Hsu
1 comment
project card
Niko Mani
1 comment
project card
1 comment
project card
1 comment