Good Design Principles for App Developer (UAB) 2017
8 likes6,457 views
The document outlines Dieter Rams' ten principles of good design, highlighting the importance of aesthetics, usability, and sustainability in both hardware and software design. It emphasizes that good design should be innovative, useful, and unobtrusive, while also focusing on environmental friendliness. Additionally, it discusses user experience (UX) guidelines for app development, stressing the need for clarity, ease of use, and accessibility.
!["Whatworksgoodisbetter
thanlooksgood,because
whatworksgoodlasts."
—RayEames[aisleone.net]](https://image.slidesharecdn.com/gooddesignprinciplesappuab01eng2014-150518170857-lva1-app6891/85/Good-Design-Principles-for-App-Developer-UAB-2017-29-320.jpg)
!["Ifyou'reaUIdesigner,youshould
bemakingUXdecisions.
Otherwise,you'rejustadecorator,
nothingmore."
—ScottJensen[iPhoneBlueprints]](https://image.slidesharecdn.com/gooddesignprinciplesappuab01eng2014-150518170857-lva1-app6891/85/Good-Design-Principles-for-App-Developer-UAB-2017-41-320.jpg)
Good Design Principles for App Developer (UAB) 2017
- 3. • Chief Design Officer at Braun (1961–1995) • "Less, but better" DieterRams
- 4. Dieter Rams products are self-explanatory
- 5. Good design is innovative Good design makes a product useful Good design is aesthetic Good design makes a product understandable Good design is unobtrusive Dieter Rams Ten principles for good design Good design is honest Good design is long-lasting Good design is thorough, down to the last detail Good design is environmentally-friendly Good design is as little design as possible The power of good design Dieter Rams’s ideology, engrained within Vitsœ
- 6. Braun T2 Table Cigarette Lighter (1968) & Apple Mac Pro Braun T1000 radio (1962) & Apple PowerMac G5Braun T3 pocket radio (1958) & Apple iPod Braun LE1 speaker (1959) & Apple iMac DieterRams&Apple
- 8. Why is important to keep in mind the good design principles from the hardware design to the software design? Braun ET calculator (1981) & Apple calculator iPhone OS v2 Korg Electribe ESX1SD & Korg iElectribe for iPad Hardware use Touch screen Software use GoodDesignPrinciples&Apps
- 9. The User Interface of the BRAUN Receiver Regie 510 (1972) is: 1. Innovative 2. Useful 3. Aesthetic 4. Understandable 5. Honest 6. Unobtrusive 7. Long-lasting 8. Consistent in every detail 9. Environmentally friendly 10. As little design as possible GoodDesignPrinciples&Apps
- 10. “Pull-to-refresh” by Loren Brichter Technological development is always offering new opportunities for innovative design, Innovative design always develops in tandem with innovative technology, and can never be an end in itself. 1.GoodDesignisinnovative Material Design - Floating action button
- 11. Google Maps http://www.google.com/mobile/maps/ Good design emphasizes the usefulness of a product while disregarding anything that could possibly detract from it. The most important task of design is to optimise the utility of a product’s usability. 2.GoodDesignmakesaproductuseful
- 12. Currency http://simplesimple.co/currency The aesthetic quality of a product is integral to its usefulness because products we use every day affect our well-being. Only well-executed objects can be beautiful. 3.GoodDesignisaesthetic VSCO Cam http://vsco.co/vscocam
- 13. It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory. Weather Dial 1 http://wthr.co 4.GoodDesign makesaproduct understandable
- 14. It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept. WhatsApp http://www.whatsapp.com/ 5.GoodDesignishonest
- 15. Google App www.google.com/search/about/ Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression. 6.GoodDesignisunobtrusive
- 16. Paper by Fiftythree http://www.fiftythree.com/paper It does not follow trends that become out-dated after a short time. Unlike fashionable design, it last many years–even in today’s throwaway society. 7.GoodDesignislong-lasting
- 17. iOS 8 Clock iPad App Nothing must be arbitrary. Care and accuracy in the design process shows respect towards the user. 8.GoodDesignisconsistentineverydetail
- 18. Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the life cycle of the product. Don't drain the battery, save energy! 9.GoodDesignisenvironmentallyfriendly Compress and optimize images and assets
- 19. Less but better – because it concentrates on the essential aspects and the products are not burdened with non-essentials. Back to purity, back to simplicity. 10.GoodDesignisaslittledesignaspossible
- 21. Productivity Focus: easy task Human Interface Guidelines Game Focus: immersive experience 1.AestheticIntegrity
- 22. Human Interface Guidelines Allows people to transfer their knowledge and skills from one application to another. Use HI standards when necessary. 2.Consistency
- 23. Human Interface Guidelines The comfortable minimum size of tappable UI elements is 44x44 points! 3.DirectManipulation Press and hold to learn Tap for primary action Slide to pan Pinch and stretch to zoom Turn to rotate Swipe to refresh
- 24. Human Interface Guidelines Assures people’s actions that processing is occurring. Keep in mind to use: UI elements Animations Sounds 4.Feedback
- 25. Human Interface Guidelines Metaphors help user to learn how to use the app 5.Metaphors
- 26. Human Interface Guidelines User, not applications, should initiate and control actions. Keep in mind that a ‘home button’ click hides the App in any moment given YESNO 6.UserControl
- 27. Human Interface Guidelines 7.Accessibility Keep in mind Accessibility features! For i.e. the App should be ready for the use of large font sizes and text-to-speech technologies.
- 28. Human Interface Guidelines 7.Accessibility Accessibility features must be considered even when developing code and UI assets! Add proper names to each layer of the Photoshop PSD files, assets and image files. Code has to be ready for text-to-speech technolgies, too. Connect native Android app to Watson Text to Speech in under 10 minutes https://www.ibm.com/blogs/bluemix/2016/11/ android-app-to-watson-text-to-speech-in-minutes/ 7 Photoshop Master Tips to Boost Your Productivity https://www.sitepoint.com/7-photoshop-masters-tips-boost-productivity/
- 33. User Experience UX Guidelines Focusonthe PrimaryTask • Clarity of purpose • Ease of use • Optimize required input
- 34. Minimizing the number of controls from which people have to choose. Information paths have to be logical and easy for users to predict. Product Strategy Means Saying No http://insideintercom.io/product-strategy-means-saying-no/ Minimizeoptions User Experience UX Guidelines
- 35. Userealism (and skeuomorphism) • Aesthetically • Using physics User Experience UX Guidelines
- 36. User Experience UX Guidelines Alwayshaveareason forcustomization And remember: all apps need at least some custom artwork, for example, the icon
- 37. User Experience UX Guidelines Users usually spend no more than a minute or two evaluating a new App! StartInstantly • Onscreen User Help has to be minimal • Avoid asking to supply setup information • Launch in the device’s default orientation • Delay a login requeriment as long as possible. If not, showing before an onboarding tutorial would be a smart choice.
- 38. User Experience UX Guidelines Hierarchical Content/experience–drivenFlat (Tabs) There are three main styles of navigation, each of which is well suited to a specific app structure: Navigation
- 39. User Experience UX Guidelines • Preferably, use a single font. • Use hierarchy: - Font style (Bold, light, italic) - Size - Colour - Effect (Only as a last resort!) Typography
- 40. First Time Start-Up Tutorials types: Sliding cards (Prefereed) Step-by-step (Games)UI Overlay (Simple UI) User Experience UX Guidelines OnboardingTutorial
- 42. Reference Links Universal Windows Platform (UWP) apps developer.microsoft.com/en-us/windows/apps/design Introduction to Universal Windows Platform (UWP) apps for designers msdn.microsoft.com/library/windows/apps/dn958439.aspx Apple Design Resources developer.apple.com/design/ Google Design design.google.com/ Material Design www.google.com/design/spec/material-design/ Android Developers Design Guidelines developer.android.com/design/index.html IBM Design Language www.ibm.com/design/language/
- 43. Reference Links Device Art Generator developer.android.com/distribute/tools/promote/device-art.html Android DP / PX Converter labs.rampinteractive.co.uk/android_dp_px_calculator/ UX For Dummies www.dummies.com/how-to/content/ux-for-dummies-cheat-sheet.html Dieter Rams Wikipedia en.wikipedia.org/wiki/Dieter_Rams Typography in ten minutes practicaltypography.com/typography-in-ten-minutes.html Rethinking Mobile Tutorials www.smashingmagazine.com/