Modern App Design with Ext

A discussion of how we can pull the UI design and usability of Ext JS from 2007 into 2012, and introduction of an experimental theme/framework that can help.

Transcript

1. MODERN DESIGN APP Ext with BRIAN MOESKAU
2. App design trends Inspiration Existing tools Ext design trends DIY Strategies Extrovert
3. APP DESIGN TRENDS
4. Visual Design
5. Whitespace
6. Simplicity
7. Geometry
8. Color & Contrast
9. Typography
10. Interaction Design
11. Progressive Disclosure
12. Adaptive Layout
13. “Design is becoming a key differentiator –StartupsThisIsHowDesignWorks.com for companies to acquire funding, press coverage, and loyal users.
14. INSPIRATION Can come from many sources
22. “User experience is... the way a person feels –Wikipedia about using a product, system or service.
23. “User experience is... subjective in nature –Wikipedia because it is about an individual’s feelings and thoughts about the system.
24. Design is important
25. a competitive advantage! Design is important
29. Great user experience is... Difficult! really REALLY
30. TOOLS
34. These are awesome BUT...
35. Not useful for Ext Based on specific markup Difficult to mix CSS libs No component API No support for Ext widgets
36. So... How can we apply good design principles to Ext JS development?
37. EXT DESIGN TRENDS
40. 2012(?)
42. DIY STRATEGIES
43. Media Queries @media only screen and (min-width: 480px) and (max-width: 767px) { /* awesome CSS here */ } <link rel="stylesheet" type="text/css" href="small-device.css" media="only screen and (max-device-width: 480px)" />
44. Typekit, Google Web Fonts
45. Custom SASS / CSS .#{$prefix}tab-default-to -webkit-box-shadow: rgb -moz-box-shadow: rgba(2 box-shadow: rgba(255,25 border-bottom: 1px soli } .#{$prefix}tab button { padding: 2px; font-size: 12px; } .#{$prefix}panel-header-t .#{$prefix}panel-header-t text-shadow: 0 1px 0 rg }
46. But... “I’m not a designer!”
47. More like it?
48. Introducing... Extrovert Ext with a modern personality http://is.gd/extrovert
50. Demo!
51. Modern Design Goal
52. Incremental Design Goal
53. Easy Design Goal items: [{ title: 'My Awesome Panel', cls: 'extro-panel-warning' }]
54. Flexible Design Goal cls: 'extro-panel-child' cls: 'extro-panel-danger' cls: 'extro-panel-warning' cls: 'extro-panel-inverse'
55. Design Goal Adaptive
56. Mobile-ish Design Goal
57. Caveats Currently proof-of-concept quality Additional planned features Does not work in IE (yet) Ext ThemeGap?
58. It’s open source. Fork away!
59. A few final thoughts
60. Ext is NOT just for boring corporate applications.
61. You are not limited to stock themes or interactions
62. Everyone (even you) should care about good design
63. Everyone (even you) is capable of doing good design
64. Thanks BRIAN MOESKAU @bmoeskau http://ext.ensible.com http://is.gd/extrovert