Modern App Design
By: George Roscoe
Drivers for Innovation:
• Productivity in the driver’s seat
• Adaptive and responsive for all devices
• Single Page Architecture
• Angular and Material Design
• What Next?
Productivity
• Effectiveness of effort measured in terms of the rate of output per unit of input
• Increases in productivity leads to increases in the standard of living
• Companies invest for an economic return in order to deliver goods/services with an acceptable cost/value to the purchaser
Ubiquity
• The market is asking for services to be immediately available and easily acted upon
• Availability, security and power of technology, has lead us to reconsider practicality vs. functionality
• Experience has taught us to choose the least common denominator that can provide full functionality
Single Page Application
• What it is – Literally, an application with one page
• Why use it – new data sent out as needed
• Just in time data delivery for the next generation of users
• Pros:
Best choice for high interaction applications
Continuous Integration and Deployment
Device and browser agnostic
Next generation JS frameworks: Angular, Backbone, Ember, React
Future designed, future proof and scalable
• Cons:
Tends to be slower on initial page load
Can affect SEO Optimization
Angular Design
“Angular (commonly referred to as “Angular 2+” or “Angular 2”) is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer’s workflow while building complex web applications. Angular is a complete rewrite from the same team that built AngularJS.” *
“Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.” *
* – https://en.wikipedia.org/wiki/Angular_(application_platform)
Material Design
Material Design is founded on three principles: *
1. Material Is the Metaphor. Inspired by the study of paper and ink, the material lives in 3D space and is grounded in tactile reality. It gives the illusion of space by using realistic shadows.
2. Bold, Graphic, Intentional. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. The Floating Action Button, or FAB, is a prime example of this principle. Material Design makes it very apparent that this is an important button.
3. Motion Provides Meaning. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent. The main point here is to animate only when it has a purpose and not to overdo it.
* – https://material.io/guidelines/#introduction-principles
