Style in
UI Design
by QuanLH24
A style in user interface design refers to the visual
appearance and interaction language that
contributes to the look and feel of a digital
product. It includes qualities like layout,
typography, color palette, illustrations, animation,
and micro-interactions.
Style helps establish the overall aesthetic quality,
personality, and brand identity of a digital product.
(Lidwell et al., 2020)
Style describes the appearance and
presentation of a design, independent of its
content or functionality.
(Lidwell et al., 2020)
The style of a user interface impacts user perception and contributes significantly to
usability and the overall user experience (Norman, 2013). As Norman explains, aesthetics
are an important contributor to apparent usability, with visually pleasing designs perceived
as more usable. Style also influences the emotional impact and appeal of a design.
Attritbutes of a style
Layout - The spatial arrangement and positioning of interface elements on the screen (Lidwell
et al., 2020). This includes composition, scale, proportions, balance, hierarchy, white space, etc
Typography - The appearance and styling of text, including font face, size, line height,
character spacing, etc. Typography greatly impacts readability. (Lidwell et al., 2020; Norman,
2013
Color palette - The set of colors used in a design. Colors evoke emotions and meanings that
shape aesthetic appeal. (Norman, 2013
Illustrations & icons - Visual symbols and imagery that communicate meaning and enhance
aesthetics. Style describes their form, complexity, and rendering. (Lidwell et al., 2020
Animations & micro-interactions - Motion and feedback cues for interactions. Style defines
their timing, physics, and personality. (Norman, 2013
Visual motif & ornamentation - Repeating visual elements and decorative flourishes that
provide visual interest. (Lidwell et al., 2020
Personality - An anthropomorphic quality that evokes certain feelings and conveys brand traits
through the style. (Lidwell et al., 2020
Texture and Depth: Texture in UI design refers to the visual surface quality of elements, which
can suggest how they might feel if touched. Depth in UI design refers to the illusion of three-
dimensional space within a two-dimensional interface.
Minimalist Style
Layout: Simple geometric layouts, clean lines, ample white space, flat hierarchies. Avoids clutter
Typography: Favors sans-serif fonts, generous line heights, large sizes. High contrast for easy reading
Color palette: Limited palette with bold accent colors against white/light backgrounds. Vibrant hues
Illustrations & icons: Flat, symbolic icons and illustrations. Avoidance of decoration and realism
Animations: Subtle and elegant transitions and micro-interactions. Avoidance of anything loud or gaudy
Visual motif: Repetition of geometric shapes, grids, clean lines. Continuity in typography and space
Personality: Sense of refined sophistication. Streamlined functionality over decoration
Texture & Depth: Minimalist designs avoid textures and gradients, opting for flat, clean surfaces. Any depth is
typically created using simple shadows or subtle layering to maintain a clean look while adding slight
dimensionality.
Style vs Sub-style
It is very common for broad design styles to have multiple subtype variations or "sub-styles"
within them. Some key points about sub-types
They allow designers to put a unique spin on an established style. Sub-styles add more
diversity and nuance within a style family
Sub-styles retain the core principles and aesthetic of the parent style, but have distinct
attributes like color palettes, typography, layout patterns etc
For example, Material Design has sub-styles like Bold Material, Outlined Material, Dark
Material that put small twists on the main style
Minimalism has many sub-styles like Flat Design, Brutalist, Monochrome, Retro Minimalism
etc. that focus on certain attributes
Giving names to sub-styles helps identify and discuss the nuances and variations within a
broader style
Sub-styles may emerge organically through experimentation by designers. Popular sub-
styles can become widely adopted
Companies may also deliberately define brand-specific sub-styles that diverge from
industry-standard styles.
Style vs Sub-style
Minimalist
Monochrome
Scandi/Nordic
Flat Design Brutalist Design Retro Minimalism
Minimalism Minimalism
Flat Minimalist Nordic Minimalist Retro Minimalist
Removal of stylistic Light and airy minimalism inspired by Nordic design Incorporates nostalgic elements like vintage
elements like gradients typography, buttons, and illustration styles from past
and shadows eras
Modern Minimal Soft UI
Group Research Assignment
Conduct research about all styles and their sub-
styles. Consider content: Flat UI Dark UI
Definition & Example
Attributes Definition
Sub-styles map (If any
Sub-styles definition & Examples (If any) Neumorphism Glassmorphism
Aurora UI Neubrutalism
Individual Assignment
Design 20 buttons in 20 styles
