Foundations of Designing UIs
I found this really comprehensive article by Christopher Murphy that presents a design approach to designing user interfaces.
He firstly defines the terminologies associated with UI:
UX, IA, UI: All of these abbreviations can be confusing. In reality, as designers, we’ll often be working across these different specialisms: designing the overall user experience (UX), organizing information logically as we consider information architecture (IA), and considering the granular design of the user interface (UI).
In the article, Murphy states his approach as "a systematic approach", one that works with a very structured framework. According to him, it's all about designing a system and not elements in isolation. For this idea, he credits Andy Clarke who posits that "we need to stop designing pages in isolation and instead focus on the creation of the systems out of which those pages are built." Murphy also recommends two books on the topic, namely: Brad Frost's Atomic Design and Alla Kholmatova’s book on Design Systems.
The Framework
Step 1: Create an Interface inventory
Step 2: Build a Pattern Library
Step 3: Consider the design of your interactions and animations
Create an Interface Inventory
"Building an interface inventory helps you to focus your time and effort on the elements you need at this moment in time, but — just like a style guide — it should be a living document that is extensible, growing as your product grows" (Murphy, 2018). Murphy also states that the rationale behind an interface inventory is that it imposes order and consistency in the process.
Components of an Interface Inventory include:
Typography
Headings and Sub-Headings
Text Elements (Standfirsts, Paragraphs)
Lists
Images and Media
Logos
Iconography
Images
Forms
Text Inputs
Radio / Checkbox Inputs
Select Menus
Build a Pattern Library
With an inventory in place, you can now "identify common design patterns and build around these"(Murphy, 2019). A pattern library will help in the identification and classification of design patterns that may help in addressing common design problems. Examples of these solutions are:
Calendar Pickers
Breadcrumb Trails
Carousels
What a pattern library does is that it breaks an interface down into smaller, modular elements (like LEGO). In a way, it creates a core visual language, ensures consistency and efficiency over time as the design develops.
Murphy also mentions something called Atomic Design principles which was established by Brad Frost in his book Atomic Design. This principles Frost mentions are comprised of five distinct levels: atoms, molecules, organisms, templates, and pages. The concept basically focuses on the smallest unit (atoms) and builds the entire system from it (e.g. atoms>molecules>organisms)
Consider the design of your interactions and animations
The last step on Murphy's approach focuses on animations and transitions. Because app design is a fluid (as opposed to static) medium, actual interactions and transitions from screen to screen (or interface to interface) must be considered. Interactions can either be on a macro level (at the page level) or a micro level (at the object level).
Unfortunately, for this particular project, due to time constraints, I won't be able to reach this level of UI design. Now that I had a grasp on basic UI design principles, I was time to move on to my actual app concept and design.
References:
Murphy, C. (2018, February 21). A Comprehensive Guide To UI Design. Retrieved from Smashing Magazine: https://www.smashingmagazine.com/2018/02/comprehensive-guide-ui-design/?fbclid=IwAR3naUKRh0OgxidHyub3I6g_w294TgFbrdcAw4HZYam9VgRqvpVLyI2W62Q
Bình luận