Here are some interesting finds on UI/UX of the week!
Branding Design Book. Very interesting article focused on the topic of branding. It’s an article that provides insight into the process of creation of a brand book, and how this powerful instrument supports the existence of a brand (and the core qualities that long lasting brands should have, such as principles, self awareness, deliberate focus, flexibility and adaptation). The article goes into details into what should comprise such as book, namely iconography, font/typography choices, colors, treatments/styles, among others. Highlight of the article includes:
“Put simply, a brand book (or brand guide) is an outline of your brand’s mission, image and core values. Above all else, it is the brand’s very identity, a DNA blueprint with layers upon layers of details, from the more general — such as brand purpose — to the more intricate nuances, such as specifics regarding the color scheme and fonts. With all of these elements combined, a comprehensive brand manual is born, providing staff and customers with a clear vision of the company and its product. Every big-name brand has a brand book, from Apple, to Google, to Coca-Cola, but even smaller-scale brands benefit from having one.”
UI Copy for Command Names. Another interesting article from the Nielsen Norman Group focused on the detail to be given to copy that is present in the lines of command of an application/software product. The article explains what UI copy effectively means, while suggesting guidelines for building copy that is meaningful and impactful (such as the utilization of specific verbal forms and also focusing on expected states and not current ones, in terms of commands, to name but a few). Highlight of the article includes:
“The phrase “UX copy” is also sometimes used to refer to these elements, but we prefer to use the more precise, less ambiguous term “UI copy” for these actionable items, as opposed to long-form content that’s intended to be read, but not clicked. UI copy is also different from microcontent (or microcopy), which represents very short content used for headlines, email-subject lines, page titles, or tooltips. UI copy is also different from link text. Links simply help users navigate through a linked content space, whereas commands are associated with interaction flows and typically change the state of the system. They are normally displayed as buttons, icons (preferably with labels or at least hover text), menu items, radio buttons, or other similar UI elements.”
Animation in Design Systems. Great article from Smashing Magazine, focused on Design Systems and more specifically, on how motion can effectively be rendered and included in them (ultimately reinforcing how important that is). The article details two very important items in regards to this topic: motion principles and implementation, both of which are crucial to understanding how animation is rendered in a particular product (or suite of products). Highlight of the article includes:
“The most effective design systems contain a branded point of view unique to them — things that make their design system more specific to the product they’re for — along with common design best practices. Spend a little time researching and reading through other systems’ motion guidelines, and you start to get a feel for which parts are best practices and which parts are customized to that brand or product’s point of view. Then you can decide which best practices you might also like to include in your guidelines, as well as where to customize the guidelines for your product. For example, using ease-ins for exits and ease-outs for entrances is a common best practice for UI animation. But the exact ease-in or ease-out curve is usually customized to a brand’s intended message and personality.”