Design Evolution 3.0 - D2W

Take a design comp and turn that design comp in Photoshop directly into a mobile app with AEM and PhoneGap integration with a one button click.

Transcript

1. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Design Evolution 3.0 | Photoshop | PhoneGap | AEM Renée Lance | @AdobeGeekGirl D2W
2. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2 Generate for AEM & PhoneGap. Photoshop AEM PhoneGap
3. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3 “Great designers and developers see creativity as a key part of their craft, but the connection between the two is rarely made…Great code is its own form of artistry” Ivana McConnell – Smashing magazine Help me!
4. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4 Current workflows for frontend design. Photoshop AEM PhoneGap <h2> Code </h2>
5. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5 “Every good work of software starts by scratching a developer's personal itch.” Eric S. Raymond
6. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 Automated workflows for frontend design! Photoshop AEM PhoneGap No Coding Demo “Any tool should be useful in the expected way, but a truly great tool lends itself to uses you never expected.” Eric S. Raymond
7. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7 Web server AEM folder or CC folder linked to DAM Framework API’s generate site and mobile components Design tool Artboards, Folders, Content, Assets, Design properties
8. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8 “Good programmers know what t o write. Great ones know what to rewrite (and reuse)” Eric S. Raymond Design element are used much the same way they are currently used App components are still editable, shareable and functional
9. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 Current workflows for frontend design. Photoshop PhoneGap AEM Design as usual Reduces coding Re-Usable Components Dynamic prototype Customise code after generation of app or create custom components. PhoneGap integration with AEM generates the App shell and mobile specific functionality
10. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thank you @AdobeGeekGirl