Speakers: John Gallant & Scott Tran
What's Hot Studio working on? Here are a few of the apps that Hot Studio has worked on. Check out these apps there is some pretty solid design here.
Pop Tech
Limos.com
Zinio
Brooks Brothers
Other Apps with Good Design
Jetsetter
Tweetbot
Imovie
Kayak
Design Considerations
Scanning Effect - Never feel lost in an app or website
Hands Per Device - http://www.slideshare.net/HugoMNL/hands-per-device-hpd
Design for Mobile first then other platforms next. This will keep your designs simple and focused. http://www.lukew.com/ff/entry.asp?933
Affordance – making sure there is enough space for the user to easily touch a button or hot spot with out accidently clicking on the wrong button.
Consistent Interactions – Apple has developed a set of consistent interactions throughout mobile devices. If you are going to stray from these interactions, there should be a good reason.
Content Delivery – Does my app need to be connected to the internet to work? This can interrupt user experience. Is my App gigantic due to all of the info people have to download? Will this cause users to abandon my app before it gets a chance to download?
Input Types – Mobile Forms. Make sure things are clear and there is a definite order to how you interact with input types. Put input info titles inside form boxes to save space.
Behaviors and Transitions – when you use your smartphone and you don’t get a typical user interaction it can be very confusing.
Compatibility – Make sure you know what types of devices and platforms you will be designing for.
Test and Refine – test your app or you are setting yourself up for failure. Keep your design focused and simple.
Hardware Features
Think about all of the hardware features of your devices and how you can incorporate those features into your design.
Front and Rear cameras - augmented reality, remembering, video conferencing, optical recognition,
Microphone - voice recognition, siri
Headphone - sound output
Haptic technology - sense of touch, vibrating,
Accelerometer - measuring proper acceleration
Gyroscope – measuring or maintaining orientation
GPS – Location based services, fencing (keeping a child or pet in bounds)
NFC – near field communications, used in payment such as Google wallet
Bluetooth 4 – used in payment systems
Gestures
Make sure gestures flow logically with what you are trying to design.
Common gestures: Tap, double tap, tap and hold, long hold, swipe, wipe, drag, pinch open, pinch closed, multi touch (using more then 2 fingers), flick, shaking
Web App Vs Native Apps
Where does your app exist?
Yelp has both. One on the web, and one that is only an app.
Go for simple. Web Apps typically load slower where a Native App can be faster.
Advantages to doing a Mobile Web app: it’s available because all Smartphone’s have a browser, its familiar to users, updates are quicker because you do not have to go through an app store
Advantages for Native Apps: Performance is better because info is not on the web, integration into the smartdevice hardware features ie: phone book, camera, see hardware features list
Hybrid app: Both Web and Native use, usually you can not tell this is happening.
Process and Teams
Waterfall process – User Experience, discovery sessions, project management, Engineering
What’s the great idea of the app?
What are the goals and needs for the app?
What is the environment where the app exists?
What is your device plan? What devices will you be using?
Design, prototyping,
Development, developers are a designer’s best friend
Testing and optimization
Tools for Developers
iOS Human Interface Guidelines
Mobile First by Luke Wroblewski
Wireframing tools for Interaction Designers
Visio for Microsoft
Omnigraffle for Mac
Adobe Illustrator
Adobe InDesign
Balsmaiq
Tools for Designers
Adobe Photoshop
Screen Resolutions for different devices at punchcut - http://punchcut.com/company/news/punchcut-releases-toolset-multi-screen-ui-design
For iPhone designs start designing at retina resolution then use Unretiner a Mac App, to downsize all elements from iPhone 4 to iPhone 3 resolution
Icon generation from the Mac App store. Use Iconizer to generate all of the sizes for your icon that you will need to launch your app across platforms.
LiveView Screen Caster – Easily see your designs on your mobile device or tablet. Your best friend!
Air Display – Extend your desktop wirelessly to your iPad, iPhone, iPod touch, or Mac as a wireless display
Punchcut Templates
Sketching out your ideas – no link here, put your pen or pencil to paper and draw out your ideas first
Mobile Patterns – Like Pinterest for mobile apps, good to get ideas!
Teehan + Lax
Tools for Prototyping
GoodReader – Put your files on an FTP and use GoodReader to show clients
Minimal Folio
Tools for Engineers
Xcode
iOS Simulator
App Sketch
Design a Coffee App so Zach can order and purchase the best cup of coffee. I sketched this App concept in 10 minutes at the talk. Really got me thinking.
No comments:
Post a Comment