Top 10 User Interface Trends
0 likes474 views
The document outlines user interface trends for 2020, highlighting the dominance of flat design and the emergence of various new trends such as unique illustrations, animations, micro-interactions, and 3D graphics. It emphasizes the importance of simplicity, bold typography, and the integration of trends to create engaging and user-friendly designs. Presenters Antti Aaltonen and Shawn Dorsey draw on their extensive experience in UX and design across multiple industries to provide insights into these trends.
Top 10 User Interface Trends
- 1. 2020 User Interface Trends Antti Aaltonen & Shawn Dorsey September 2020
- 2. Antti Aaltonen is a Head of User Experience at the Qt Company and leads design of tools for UI designers. Antti likes working at the intersection of design, technology and product development and he has over 20 years of experience creating usable, delightful and polished experiences with products. Before joining The Qt Company, he was leading UX in Rovio, the creator of Angry Birds games, for seven years. Prior to that Antti worked for Nokia. He holds Ph.D. in Computer Science. Shawn Dorsey is a Sr. Technical Artist for the Qt Company. He has over 15 years of Design & Engineering experience in both the Aviation and Automotive industries. Before joining Qt in 2019, he worked as a Solutions Consultant for Dassault Systemes 3DEXCITE, designing custom marketing experiences in Augmented Reality (AR), Virtual Reality (VR), and WebGL. Shawn holds degrees in both Computer-aided Design/Engineering and Digital Animation/Visual Effects. 2 September 2020 © The Qt Company2 About presenters 2020 UI TRENDS
- 3. Introduction 2 September 2020 © The Qt Company3 2020 UI TRENDS › Flat design has been dominating trend for the recent years › What are the next trends? › Many of the trends are already big in the web › Lots of competition, need to find ways how to attract visitors and stand out › They are emerging on the mobile and finding their way to the desktop and embedded platforms https://www.apple.com/ios/ios-14-preview/
- 4. © The Qt Company4 The 2020 trends IN NO PARTICULAR ORDER 2 September 2020 Unique illustrations Animations Micro-interactions 3D graphics New skeuomorphism Asymmetrical layouts6 7 8 9 10 Bold typography Simplicity Subtle gradients Sounds 5 4 3 2 1
- 5. Unique illustrations 2 September 2020 © The Qt Company5 2020 UI TRENDS › Can be sketches, doodles, line drawings, cartoons, photos, 3D graphics, or a collage-like combination › Not only decorations, but a communication tool › Explain, complement and clarify complex concepts, actions or information visually › Seeing something unique, compelling or unexpected can… › catch the user’s attention › cause spontaneous positive reactions (wow effect) › For a product they can give… › Additional personality for the product and bring life in its design › Originality, set mood, evoke emotions and make it memorable › Can support the brand https://mailchimp.com/design/https://material.io/design/co mmunication/empty- states.html#content
- 6. Animations 2 September 2020 © The Qt Company6 2020 UI TRENDS › Add natural feel, life and personality to products › increase users engagement with product and make designs stand out › Can be used to guide user’s attention › Moving elements are strong attention grabbers › Effective way to tell the story about brand, product or services › Dynamic behaviour makes it easier to capture users’ attention and explain what brand or product can offer at a glance Weather iOS app interactionby Taras Migulko Mail Rebound by Yair Walden
- 7. Micro-interactions 2 September 2020 © The Qt Company7 2020 UI TRENDS › Delightful moments the users experience while using the product. › Great technique for giving extra insight or instant delightful feedback, improve customer satisfaction and increase retention. › An example how attention to details and subtle change can greatly improve UX and make big impact Design by Eugene Paryhin for Fireart Studio Social Share Microanimation / 010 by Miki M
- 8. 3D graphics 2 September 2020 © The Qt Company8 2020 UI TRENDS › 3D models show the product in order to emulate the in-store shopping experience › Presenting the product in a more interactive and engaging way › E.g. 3D renders of product could be viewed in 360 degrees improving the overall UX › 3D graphics with animations can improve the product UI and appeal www.apple.com/airpods-pro/ 3D fIip menu by Minh Pham
- 9. New skeuomorphism (neomorphism) 2 September 2020 © The Qt Company9 2020 UI TRENDS › Skeuomorphic refers to the design elements that are created in a realistic style to match the real-life objects. › Made popular with Apple iPhone in 2007 › Making comeback with a modern twist › Very detailed and precise design style › Attention to details, e.g., highlights, shadows, glows and subtle bevels Neomorphism Music App by uplabs.com
- 10. Asymmetrical layouts 2 September 2020 © The Qt Company10 2020 UI TRENDS › Add character, dynamic and personality to designs in order to create something that catches the user’s imagination › A room for creativity › An opportunity to highlight important content and functionality › Creating successful asymmetrical layouts requires skill, practice and time › Placing elements randomly on the grid wouldn’t work › Layout can include › Overlapping elements › Split screens › Generous use whitespace Asymmetrical Interface by Ingrid Sasu Curvy AF by Emre Mazursky
- 11. Simplicity 2 September 2020 © The Qt Company11 2020 UI TRENDS › A collection of UI, UX and visual design principles › Used together with › Gestalt principles › Bold typography › Minimalistic color palettes and gradients › Plenty of whitespace. › Reducing design to essentials is an effective way to achieve ease of use › Avoid illusion of simplicity: do not hide or remove necessary controls and information › When done well, it creates an elegant, high- quality feeling White Noise app (by Romeo M. for Queble).
- 12. Bold typography 2 September 2020 © The Qt Company12 2020 UI TRENDS › Draws the user’s attention to the message › Can be used to › Define visual hierarchy › Provide a sense of visual boundary to a section in the design › Attract customers with eye-catching design › Convey brand › Statements in bold typography highlight important information to the user › Has huge potential when it › Is use appropriately and purposefully in the right place and the right amount. › Provides a solution to the user’s need or a call to action that invites them to take the next step IOCO / Biocomputer by Mike | Creative Mints
- 13. Subtle gradients 2 September 2020 © The Qt Company13 2020 UI TRENDS › Gradients are needed in visual design to give volume and depth › Bright and flashy gradients are no longer in trend › Part of flat and minimalistic design, which aims at reducing and simplifying colours Quota - Get your daily quote by Sebastian Jungbluth
- 14. Sound 2 September 2020 © The Qt Company14 2020 UI TRENDS › An essential part of sensorial design that is easy to forget during the design phase › Can be used, e.g., › Amplifying feedback to user on successful and unsuccessful actions › Notifying about event on background › Branding
- 15. › Flat design has been dominating UI design trend for the past years › Designers are seeking new ways how to attract the users’ attention and to stand out from the competition › Many of the trends are not new, but they are growing more and more especially in the web › Simplicity remains one of the core drivers for design also after pure flat design › The trends are not isolated but connected to each other. For example › Neumorphism uses subtle gradients and refined 3D graphics › Unique illustrations and 3D graphics are combined with bold typography and asymmetrical layouts › Micro-interactions rely on animations on visual feedback 2 September 2020 © The Qt Company15 Conclusion 2020 UI TRENDS