Journalism
App Prototyping without Code Paul Niwa, Associate Professor & Journalism Chair Emerson College, Boston
More Learning Excursions than any other Journalism Program
Journalism
Best Journalism Program in America
The next 1:20 • What is prototyping and why do it? • Basic skills. • Building your first interface. Avoiding pitfalls. • Testing & refining. • Slides on paulniwa.com/thoughts
What is your big idea?
Emerson Journalism App!
Emerson Journalism App •
Your Professors!
•
Courses to take.
•
Where is my class?
•
What club to join?
Why Prototype?
$
Why Prototype?
$
Why Prototype?
$
Emerson Journalism App •
Your Professors! Reserve Gear.
•
Courses to take.
•
Where is my class? Cool Trips.
•
What club to join?
Prototyping: Fake It Until You Make It
•
I am not a good at code.
What do you need? •
A MacBook.
•
Keynote. (Free download since Mavericks).
•
Apple ID with iCloud Account.
•
iOS device. (lightening cable optional).
Bugs Happen •
Take a deep breath.
•
Think through the problem.
•
Google: Keynote [what your are looking for]
•
paulniwa.com/thoughts
Basic Skills
•
Links.
•
Magic Move.
Keynote • Links. • Magic Move. • Instructions. • Tutorial
Building Your First Interface
Apple’s iOS Tools
•
Creates a consistent experience.
•
Lets users learn and use your app quickly.
iOS Human Interface Guidelines
Set up your Keynote Document •
Find your iPhone Screen Resolution
•
iPhone 7 = 1334x750
•
(flip it)
First Test •
Name and save your keynote in iCloud.
•
Open keynote on your phone. Select the file.
•
Make sure that your phone is connected to iCloud.
Take Screenshots •
All apps use the core iOS layouts.
•
Take screenshots of layouts similar to your own sketch.
•
Screen shot = Push the home button and power buttons simultaneously. The screenshot will go to your photos folder.
Strip the Screenshot
Create your own style! •
Use iOS Native Fonts •
Download SF from developer.apple.com.
•
iOSFonts.com
•
Use paragraph styles in Keynote.
Replace the content with your own
•
Use paragraph styles.
Add links to buttons
•
Remember to add your transparent screen.
Test and Learn •
•
Hand your prototype to others. •
How did they react?
•
What did they want to click on?
•
Did they find their way easily?
•
Where did they stumble?
Revise and try again!
The next 1:20 • What is prototyping and why do it? • Basic skills. • Building your first interface. Avoiding pitfalls. • Testing & refining. • Slides on paulniwa.com/thoughts
Help me! •
What would you like me to talk about at the next JEA/NSPA?
•
Paul Niwa
•
paul_niwa@emerson.edu.
•
paulniwa.com/thoughts.