How to design and build great apps
0 likes676 views
The document discusses designing and building effective apps, highlighting new features and guidelines introduced in 5.3 to enhance user experience. It illustrates the development process of a 'photo scout' app for accessing Instagram photos and managing suggestions for photo editors. Key design principles emphasize ease of use, integration with other apps, and maintaining a consistent user interface.
How to design and build great apps
- 1. GREAT APPS HOW TO DESIGN AND BUILD MCONF 2014 - ANDREAS WEDER & MIKAËL GELJIC with 5.3 https://www.flickr.com/photos/diegojack/7715969896/ Photo Credit: Le Lavaux, de l’est à l’ouest by Jacques (diegojack)
- 2. ANDREAS WEDER DESIGNER AT HEART ENGINEER BY TRAINING
- 3. MIKAËL GELJIC PROFICIENT CODER PASSIONATE ABOUT THE USER INTERFACE ´
- 4. ®
- 5. IN THIS TALK How to design and build great apps with 5.3 new guidelines to help you designing good apps new 5.3 features to make apps more powerful play with an actual example demonstrate how we build apps
- 6. GREAT APPS ? Photo: Therme Vals by Architect Peter Zumthor
- 7. A GREAT APP brings value to users plays well with other apps integrates well visually integrates well from a functional perspective is easy to understand and use
- 12. LET’S BUILD A SMALL-BUT-GREAT APP
- 13. PHOTO SCOUT APP photos are stored on Instagram scout looks at recent photos suggests some to photo editors ok photos are added to assets photos are used on web pages ! scout for great photos on Instagram
- 14. KONIGI
- 15. WHAT DO WE NEED? Photo Credit: https://www.flickr.com/photos/magdalenaroeseler/14045150739 by Magdalena Roeseler Untitled
- 16. WE NEED an app to view photos a way to access photos stored on Instagram an interface to select which photos we want to see Pulse to handle suggestions for photo editors to copy a photo to assets to be able to use the photos in our templates Photo Credit: https://www.flickr.com/photos/magdalenaroeseler/14045150739 by Magdalena Roeseler Untitled
- 17. WE NEED an app to view photos a way to access photos stored on Instagram an interface to select which photos we want to see Pulse to handle suggestions for photo editors to copy a photo to assets to be able to use the photos in our templates Photo Credit: https://www.flickr.com/photos/magdalenaroeseler/14045150739 by Magdalena Roeseler Untitled
- 18. DESIGN & BUILD!
- 19. 1. The app and its settings 2. Access photos on Instagram 3. Handle tasks in Pulse DESIGN & BUILD!
- 20. THE APP & ITS SETTINGS
- 21. WHAT TYPE OF APP SHOULD WE BUILD?
- 22. APP DESIGN GUIDELINES Quick-bite recipe cards-style best practices to ensure your apps look / work / play well.
- 23. Available as part of our online documentation https://wiki.magnolia-cms.com/x/CAFcAw APP DESIGN GUIDELINES
- 24. CHOOSE THE RIGHT APP TYPE Content apps - great for managing custom data sets Custom apps - if you need something really different
- 25. Content apps - great for managing custom data sets Custom apps - if you need something really different CHOOSE THE RIGHT APP TYPE
- 26. Content app - quick, no need for more, benefit from pre-built functions CHOOSE THE RIGHT APP TYPE
- 27. HOW SHOULD WE CONFIGURE THE FEED?
- 28. Design pattern that work well for editing settings, for tools and, in general, for things that users don’t need to touch often. SMALL APP CONCEPT
- 29. Inform about basic settings. Show and enter license info. Example: „About“ app SMALL APP CONCEPT
- 30. Tool to verify global settings. Example: „Mail tools“ app SMALL APP CONCEPT
- 31. Form for global settings. Example: „Mail tools“ app SMALL APP CONCEPT
- 32. We’ll use it to define the photo feed to access. SMALL APP CONCEPT
- 33. MOCKUP
- 34. MOCKUP
- 35. BUILD
- 37. HOW TO ACCESS PHOTOS ON INSTAGRAM?
- 38. Content apps may access content outside JCR e.g. files on the file system; data in a relational DB; … CONTENT CONNECTORS
- 39. BUILD
- 40. TASKS IN PULSE
- 41. BUT… TASKS IN PULSE???
- 42. Tasks are listed in a separate tab and display their current status. Tasks are independent from work flow. TASKS IN PULSE
- 43. Tasks can be sent to groups and assigned to group members. Tasks are available in CE. TASKS IN PULSE
- 44. OK. HOW DO I ADD A TASK?
- 45. MOCKUP
- 47. Designed for heavy duty editing with complex fields and forms. REGULAR DIALOGS ARE FOR EDITING
- 48. When the form is a very focused, clear, simple task. When a regular dialog feels too heavy. When you want to preserve the surrounding context. USE LIGHT DIALOGS FOR QUICK INPUT
- 49. Example: „Rename item“ dialog USE LIGHT DIALOGS FOR QUICK INPUT
- 50. Example: Chooser dialog (narrow) USE LIGHT DIALOGS FOR QUICK INPUT
- 51. Example: Chooser dialog (wide) USE LIGHT DIALOGS FOR QUICK INPUT
- 52. We’ve updated regular dialogs… REGULAR DIALOGS IN 5.3
- 53. … to offer a WIDE settings as well. REGULAR DIALOGS IN 5.3
- 54. We’ll use a light dialog for picking the task. USE LIGHT DIALOGS FOR QUICK INPUT
- 55. BUILD
- 56. PHOTO SCOUT APP an app to view photos a way to access photos stored on Instagram an interface to select which photos we want to see Pulse to handle suggestions for photo editors
- 57. YOU’VE SEEN Some new features of 5.3 in action connectors for content apps handle tasks in Pulse „open location“ action focused, single task, light dialogs
- 58. YOU’VE SEEN Measures that affect a user’s experience New app design guidelines lead to a recognizable, consistent experience your app plays well with other apps Some of many UI improvements wide dialogs clarified alerts and notifications keyboard support and focus indicators
- 59. QUESTIONS?