68
Lecture Tony Wang iOS Developer, Researcher, Mobile Designer Copyright © 2014 Tony Wang Steps to Design Great Mobile Apps

Steps to Design Great Mobile Apps

Embed Size (px)

DESCRIPTION

Guest lecture for 3rd year IT unit "Advanced Multimedia Systems" at Queensland University of Technology Brisbane, Australia.

Citation preview

Page 1: Steps to Design Great Mobile Apps

LectureTony Wang iOS Developer, Researcher, Mobile Designer

Copyright © 2014 Tony Wang

Steps to Design Great Mobile Apps

Page 2: Steps to Design Great Mobile Apps

Overview

• What makes a great design?

• Design process

• Iterations

• Tools to use

Page 3: Steps to Design Great Mobile Apps
Page 4: Steps to Design Great Mobile Apps

Intuitive.

Engaging.

Beautiful.

Page 5: Steps to Design Great Mobile Apps

It’s based on what you enable them to do,

how you makes them feel.

Page 6: Steps to Design Great Mobile Apps

Great design is about making decisions.

Page 7: Steps to Design Great Mobile Apps

Every great app starts with a concept.

Page 8: Steps to Design Great Mobile Apps

Defining the Concept

Page 9: Steps to Design Great Mobile Apps

Defining the Concept

• Who is your audience?

• What is the purpose of your app?

• What problem is your app trying to solve?

• What content will your app incorporate?

Page 10: Steps to Design Great Mobile Apps

Where’s the library?

Page 11: Steps to Design Great Mobile Apps

How to get there?

Page 12: Steps to Design Great Mobile Apps

Helps people to navigate within an campus, not only easier and also faster.

Page 13: Steps to Design Great Mobile Apps

Understand your users.

Page 14: Steps to Design Great Mobile Apps

Talk to users.

Page 15: Steps to Design Great Mobile Apps

Plan your key features.

Page 16: Steps to Design Great Mobile Apps

• View campus map

• Search for buildings

• See the photo of the buildings

• Get walking directions

Page 17: Steps to Design Great Mobile Apps

How to avoid getting wet?

Page 18: Steps to Design Great Mobile Apps
Page 19: Steps to Design Great Mobile Apps

Defining the Concept

Page 20: Steps to Design Great Mobile Apps

Defining the Concept

Designing a User Interface

Page 21: Steps to Design Great Mobile Apps

Designing a User Interface

• Design with “user in mind”

• Make it efficient

• Clear & straight forward

Page 22: Steps to Design Great Mobile Apps

Sketch it on papers.

Page 23: Steps to Design Great Mobile Apps

Sketch it on papers.

Page 24: Steps to Design Great Mobile Apps

Transform it to High-Fidelity

Page 25: Steps to Design Great Mobile Apps
Page 26: Steps to Design Great Mobile Apps

Defining the Concept

Designing a User Interface

Page 27: Steps to Design Great Mobile Apps

Defining the Concept

Designing a User Interface

Get Users to Test it

Page 28: Steps to Design Great Mobile Apps

Get Users to Test it

• Test with real users, find someone new.

• Ask them to “Think Aloud”

• Watch how they use the app

• Not everyone will like it, but choose the most appropriate one.

Page 29: Steps to Design Great Mobile Apps

Iteration

Page 30: Steps to Design Great Mobile Apps

Iteration Iteration

Page 31: Steps to Design Great Mobile Apps

Iteration Iteration Iteration

Page 32: Steps to Design Great Mobile Apps

Defining the Concept

Designing a User Interface

Get Users to Test it

Page 33: Steps to Design Great Mobile Apps

Defining the Concept

Designing a User Interface

Get Users to Test it

Page 34: Steps to Design Great Mobile Apps

Example

Page 35: Steps to Design Great Mobile Apps

Main Screen

Page 36: Steps to Design Great Mobile Apps
Page 37: Steps to Design Great Mobile Apps
Page 38: Steps to Design Great Mobile Apps
Page 39: Steps to Design Great Mobile Apps
Page 40: Steps to Design Great Mobile Apps
Page 41: Steps to Design Great Mobile Apps
Page 42: Steps to Design Great Mobile Apps
Page 43: Steps to Design Great Mobile Apps
Page 44: Steps to Design Great Mobile Apps
Page 45: Steps to Design Great Mobile Apps
Page 46: Steps to Design Great Mobile Apps
Page 47: Steps to Design Great Mobile Apps

Search Screen

Page 48: Steps to Design Great Mobile Apps
Page 49: Steps to Design Great Mobile Apps
Page 50: Steps to Design Great Mobile Apps
Page 51: Steps to Design Great Mobile Apps
Page 52: Steps to Design Great Mobile Apps
Page 53: Steps to Design Great Mobile Apps
Page 54: Steps to Design Great Mobile Apps
Page 55: Steps to Design Great Mobile Apps
Page 56: Steps to Design Great Mobile Apps
Page 57: Steps to Design Great Mobile Apps
Page 58: Steps to Design Great Mobile Apps
Page 59: Steps to Design Great Mobile Apps

Side Bar

Page 60: Steps to Design Great Mobile Apps
Page 61: Steps to Design Great Mobile Apps
Page 62: Steps to Design Great Mobile Apps
Page 63: Steps to Design Great Mobile Apps

7 Iterations

v1.00.1 0.2 0.3 0.4 0.5 0.6

Page 64: Steps to Design Great Mobile Apps
Page 65: Steps to Design Great Mobile Apps

Tools for Designers

Photoshop Slicy Skala PreviewOminiGraffle

Page 66: Steps to Design Great Mobile Apps

Tools for Developers

Bitbucket Dropbox Parse

Page 67: Steps to Design Great Mobile Apps
Page 68: Steps to Design Great Mobile Apps

Official Guide for TEDx QUT