Fortunately, there are many useful books and courses for designers seeking training in UI including several we’ve listed on the UI UX Training home page and in previous posts about UX research and UI and UX design. In this post we identify a range of training UI resources that designers can turn to when seeking ideas or solutions to specific design problems.
Training UI Resource #1: Design Podcasts
In My top 5 must-listen UX/UI podcasts Magica Dimitrova offers a useful summary of a variety of podcasts hosted by experts like Jared Spool and the designers at Google. For training UI purposes:
- High Resolution Video Series on Design—Watch this series featuring design leaders from Google, Spotify, Facebook, and other companies as they explain their design process and they use design to communicate.
- Google Design Podcasts—The method episodes guide listeners through designers’ career journeys at Google while the design notes episodes delves into how Google designers with in a variety of creative disciplines.
- UX Podcasts—As the name suggests, UX is the focus but don’t overlook episodes like Infused Design with guru Jared Spool where he discusses who should design, the role of designers, and why design leaders must help organizations reach a higher level of design maturity.
Training UI Resource #2: UX Laws that Influence UI Design
While the focus of this post is training UI resources many UX principles affect design. For example, the first UX law listed in Laws of UX is the Aesthetic Usability effect. This law states that users perceive aesthetically pleasing design as more usable.
The UX laws of similarity, common region, and connectedness inform layout, placement, choice of color and a variety of other UI design decisions. Study these basic UX laws to enhance your UI designs.
Training UI Resource #3: 20 Important Design Principles
With these UX laws in hand, turn to design principles that apply directly to UI design. 20 Important Design Principles Illustrated
is an infographic that illustrates key principles such as line, scale, balance, contrast, and hierarchy. Each illustration is followed by a brief explanation. For example, the image showing contrast includes three, short bullets:
- Light vs. dark vs. thin
- Helps create emphasis
- Makes designs ‘pop’
The illustrations are simple and herein lies their power for new designers and those seeing a quick review of important design principles and how they work.
Training UI Resource #4: Common UI Design Errors
While dismantling someone else’s design can seem unproductive or even uncharitable, flawed UI designs do offer lessons for designers at all levels. The team at AlexSoft Inc. offers such lessons in Airline Website UX Mistakes and Best Practices: Targeting Economy Travelers.
The subject is design problems with airline sites. The authors identify interaction design issues with localization, dates and flex search, checkout, baggage, mobile, and accessibility. The article is well organized with the UI problems clearly outlined followed by best design practices. For example:
- The authors cite a number of problems with the way baggage options are presented in the UI for most airlines. A major problem is the inability to check additional baggage unless the passenger upgrades a ticket. Another issue is confusion about whether a passenger can add extra baggage when using multiple airlines on the same trip.
- Best practice: Allow users to customize their baggage options separately from the chosen ticket package.
The point is not to pick on the airlines (that’s just a bonus). Rather, examining even a few of the many design flaws cited in this article is a training UI exercise by showing designers how to diagnose and resolve design problems.
Training UI Resource #5: Leveraging Animation
Avoiding distraction is a bedrock principle for UX and UI designers. The concern is that any aspect of the design that does not contribute to the user’s current task increases the likelihood that she will abandon the task. Task abandonment often means lost revenue and an unhappy customers.
Designers should not, however, confuse distraction with purposeful motion as Val Head explains in
Animation for UX: How Animation Adds Meaning to UI: “The best UI animations have both purpose and style — they have been purposefully placed in the interface for a user-centered reason, and they have been executed well visually.” Animation can be used to direct the user’s attention. For example:
- Codepen (an online tool for writing and publishing code-based experiments in a browser) includes a shaking-pulsing save button animation to remind users to save.
- Google docs: When users organize documents, animated feedback guides the through process to reinforce that the user is progressing as intended.
Sound UI design need not be flashy, but a robust user-centered design can leverage motion where appropriate for the user’s needs in a specific context.
Training UI Resource #6: Movement and Design Stories
Just as animation can serve a specific design purpose, movement can tell a story. In Use movement to make your design tell great stories, Nick Groeneveld advises using movement to:
- Depict a theme. For example, use a golf-themed progress bar for a mobile app about golf.
- Guide users through completing a task. For example, an element that users need to drag and drop can bounce in the general direction it should be dragged.
In short, properly applied, motion is an effective way to tell a story with design.
Training UI Resource #7: Honing the Hover Effect
In Hover States Adrian Zumbrunnen guides readers through the tricky terrain around hover states. Zumbrunnen begins by explaining that forcing users to hover over hundreds of thumbnails (in an agency portfolio for example) is akin to a treasure hunt.
This does not mean that designers should abandon hover altogether. Even though it’s not available on mobile, hover can still be useful. The trick is to use hover in meaningful ways. For example, subtle feedback, such as changing a button background color in hover state, can increase button affordance.
In terms of training UI resources the point is not obsess over hover states. Rather, this and similar articles show designers how to think through common design problems.