how to design and build great apps

60
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)

Upload: magnolia-cms

Post on 10-May-2015

233 views

Category:

Software


2 download

DESCRIPTION

A great app empowers users by being both meaningful and supportive of their daily work. A great app consists of a narrow set of powerful and easy-to-undersatnd functions. Andreas and Mikael, Magnolia International, will show you how new app features in Magnolia 5.3 make your apps more powerful and also present you new app design guidelines to help you create consistent and intuitive apps.

TRANSCRIPT

Page 1: How to design and build great apps

GREAT APPS

HOW TO DESIGN AND BUILD

MCONF 2014 - ANDREAS WEDER & MIKAËL GELJIC

with 5.3https://www.flickr.com/photos/diegojack/7715969896/

Photo Credit: Le Lavaux, de l’est à l’ouestby Jacques (diegojack)

Page 2: How to design and build great apps

ANDREAS WEDER DESIGNER AT HEART ENGINEER BY TRAINING

Page 3: How to design and build great apps

MIKAËL GELJIC PROFICIENT CODER PASSIONATE ABOUT THE USER INTERFACE

´

Page 4: How to design and build great apps

®

Page 5: How to design and build great apps

IN THIS TALKHow 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

Page 6: How to design and build great apps

GREAT APPS ?

Photo: Therme Vals by Architect Peter Zumthor

Page 7: How to design and build great apps

A GREAT APPbrings value to users plays well with other apps

integrates well visually integrates well from a functional perspective

is easy to understand and use

Page 8: How to design and build great apps
Page 9: How to design and build great apps
Page 10: How to design and build great apps
Page 11: How to design and build great apps
Page 12: How to design and build great apps

LET’S BUILD A SMALL-BUT-GREAT APP

Page 13: How to design and build great apps

PHOTO SCOUT APPphotos 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

Page 14: How to design and build great apps

KONIGI

Page 15: How to design and build great apps

WHAT DO WE NEED?

Photo Credit:

https://www.flickr.com/photos/magdalenaroeseler/14045150739by Magdalena RoeselerUntitled

Page 16: How to design and build great apps

WE NEEDan 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/14045150739by Magdalena RoeselerUntitled

Page 17: How to design and build great apps

WE NEEDan 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/14045150739by Magdalena RoeselerUntitled

Page 18: How to design and build great apps

DESIGN & BUILD!

Page 19: How to design and build great apps

1. The app and its settings 2. Access photos on Instagram 3. Handle tasks in Pulse

DESIGN & BUILD!

Page 20: How to design and build great apps

THE APP & ITS SETTINGS

Page 21: How to design and build great apps

WHAT TYPE OF APP SHOULD WE BUILD?

Page 22: How to design and build great apps

APP DESIGN GUIDELINESQuick-bite recipe cards-style best practicesto ensure your apps look / work / play well.

Page 23: How to design and build great apps

Available as part of our online documentation https://wiki.magnolia-cms.com/x/CAFcAw

APP DESIGN GUIDELINES

Page 24: How to design and build great apps

CHOOSE THE RIGHT APP TYPE Content apps - great for managing custom data sets Custom apps - if you need something really different

Page 25: How to design and build great apps

Content apps - great for managing custom data sets Custom apps - if you need something really different

CHOOSE THE RIGHT APP TYPE

Page 26: How to design and build great apps

Content app - quick, no need for more, benefit from pre-built functions

CHOOSE THE RIGHT APP TYPE

Page 27: How to design and build great apps

HOW SHOULD WE CONFIGURE THE FEED?

Page 28: How to design and build great apps

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

Page 29: How to design and build great apps

Inform about basic settings. Show and enter license info. Example: „About“ app

SMALL APP CONCEPT

Page 30: How to design and build great apps

Tool to verify global settings. Example: „Mail tools“ app

SMALL APP CONCEPT

Page 31: How to design and build great apps

Form for global settings. Example: „Mail tools“ app

SMALL APP CONCEPT

Page 32: How to design and build great apps

We’ll use it to define the photo feed to access.SMALL APP CONCEPT

Page 33: How to design and build great apps

MOCKUP

Page 34: How to design and build great apps

MOCKUP

Page 35: How to design and build great apps

BUILD

Page 36: How to design and build great apps

ACCESS THE PHOTOS

Page 37: How to design and build great apps

HOW TO ACCESS PHOTOS ON INSTAGRAM?

Page 38: How to design and build great apps

Content apps may access content outside JCR e.g. files on the file system; data in a relational DB; …

CONTENT CONNECTORS

Page 39: How to design and build great apps

BUILD

Page 40: How to design and build great apps

TASKS IN PULSE

Page 41: How to design and build great apps

BUT… TASKS IN PULSE???

Page 42: How to design and build great apps

Tasks are listed in a separate tab and display their current status. Tasks are independent from work flow.

TASKS IN PULSE

Page 43: How to design and build great apps

Tasks can be sent to groups and assigned to group members. Tasks are available in CE.

TASKS IN PULSE

Page 44: How to design and build great apps

OK. HOW DO I ADD A TASK?

Page 45: How to design and build great apps

MOCKUP

Page 46: How to design and build great apps

A REGULAR DIALOG?

Page 47: How to design and build great apps

Designed for heavy duty editing with complex fields and forms.REGULAR DIALOGS ARE FOR EDITING

Page 48: How to design and build great apps

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

Page 49: How to design and build great apps

Example: „Rename item“ dialogUSE LIGHT DIALOGS FOR QUICK INPUT

Page 50: How to design and build great apps

Example: Chooser dialog (narrow)USE LIGHT DIALOGS FOR QUICK INPUT

Page 51: How to design and build great apps

Example: Chooser dialog (wide)USE LIGHT DIALOGS FOR QUICK INPUT

Page 52: How to design and build great apps

We’ve updated regular dialogs…REGULAR DIALOGS IN 5.3

Page 53: How to design and build great apps

… to offer a WIDE settings as well.REGULAR DIALOGS IN 5.3

Page 54: How to design and build great apps

We’ll use a light dialog for picking the task.USE LIGHT DIALOGS FOR QUICK INPUT

Page 55: How to design and build great apps

BUILD

Page 56: How to design and build great apps

PHOTO SCOUT APPan 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

Page 57: How to design and build great apps

YOU’VE SEENSome new features of 5.3 in action

connectors for content apps handle tasks in Pulse „open location“ action focused, single task, light dialogs

Page 58: How to design and build great apps

YOU’VE SEENMeasures 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

Page 59: How to design and build great apps

QUESTIONS?

Page 60: How to design and build great apps

THANK YOU!

Photo Credit:

https://www.flickr.com/photos/timcaynes/6681394555/

switzerland12by Tim Caynes