UI/UX Finals

design aesthetics

the visual elements designers use to stir audience emotions, creating work that is pleasing to the eye while meeting user wants and needs, includes shape, balance, white space, color scheme, and typography

why design aesthetics matter

creates positive first impressions, increases audience engagement, builds brand credibility

aesthetic-usability effect

users perceive visually appealing designs as easier to use, even when they are not, users are more tolerant of minor usability issues when an interface is visually appealing

impact of aesthetic-usability effect

positive emotional responses to visual design make users more tolerant of minor usability issues, improves how users perceive a product

limitations of aesthetic-usability effect

attractive designs can hide minor usability problems but cannot compensate for severe usability issues, functionality must not be sacrificed for aesthetics

usability-testing challenges

attractive interfaces can cause users to praise visual design while overlooking usability problems, aesthetics can obscure usability flaws and make problems go unnoticed

5 aesthetic design best practices

know your audience, make it useful, keep it simple, apply core principles, consider context

know your audience

understand user behaviors, preferences, and pain points

make it useful

form should support content and function with consistent UX

keep it simple

start with minimalism and include only relevant elements

apply core principles

use gestalt principles to organize visual information effectively

consider context

account for users' real-world challenges in every design decision

skeuomorphism

visual approach where design elements mimic real-world counterparts to bridge the physical and digital worlds, recycle bin icon is the most well-known example

purpose of skeuomorphism

helped first-time users grasp digital navigation intuitively

peak era of skeuomorphism

standard until around 2010, heavily used in Apple's early iOS

decline of skeuomorphism

faded as digital literacy grew and literal elements became unnecessary

minimalism

design approach rooted in the minimalism art movement, follows the principle "less is more", focuses on fewer elements, negative space, bold colors, and clean typography

dieter rams' design principle

"good design is as little design as possible."

origin of minimalism

emerged in the late 1950s and shaped subsequent trends, including flat design

flat design

shifted UI from real-life-looking objects to schematic simplifications, uses no shadows or decorative elements

flat design 1.0

uses no shadows, bright colors, and minimal elements

flat design 2.0

uses subtle shadows and color shifts to improve usability, restores affordances without sacrificing a clean aesthetic

flat design timeline

gained traction in 2012 with windows 8, ios 7, and google's material design, enabled faster loading on mobile

bauhaus style

UI style revolving around geometric graphics and innovative typography without distracting details, follows the principle "form follows function"

bauhaus geometric shapes

semicircles, circles, rectangles, and triangles

bauhaus origin

began in 1919 in weimar, germany

bauhaus design principle

form follows function, shapes are designed based on function to create a minimalist yet beautiful aesthetic

bold typography

type becomes the centerpiece of the design rather than serving only its traditional role, may use spinning, twisting, extravagant sizes, and word division when purposeful

bold typography best practice

must be planned carefully and intentionally, understand the rules before breaking them

neumorphism

combines flat design's minimalism with skeuomorphism's realism, elements appear to extrude from the background, also called soft UI

neumorphism creator

coined by michał malewicz in 2019

neumorphism key traits

low contrast, monochromatic palettes, subtle shadows, and gradients

neumorphism accessibility warning

low contrast creates challenges for users with vision loss or color blindness

glassmorphism

design style that gives elements the appearance of translucent frosted glass, uses layered elements and a sense of verticality

glassmorphism popularity

popularized by Apple's macOS Big Sur in 2020

glassmorphism transparency

background blur and semi-transparent outlines simulate glass edges

glassmorphism light borders

subtle borders define the glass edge

glassmorphism vivid colors

backgrounds need tonal difference to make the effect visible

animation and motion

motion UI adds customized animations and transitions to enrich user experience, guides users, provides feedback, and tells stories

guide actions

use motion to entice users toward specific actions or provide feedback

scroll storytelling

scroll-triggered animation creates an immersive, user-driven experience

boost engagement through motion

motion breathes life into static interfaces and improves engagement

illustration

helps products stand out and build empathy, can be digital or hand-drawn, 2d or 3d, and gives products a unique personality

custom illustrations

have replaced stock images and can boost conversion rates when used strategically

dark mode

places light text on dark backgrounds, reducing screen luminance and eye strain while conserving battery, focuses on low light and high contrast rather than pure black and white

dark mode origins

twitter experimented with light-on-dark in 2016, although older systems used similar schemes

dark mode breakthrough

apple's ios 13 made dark mode a mainstream standard across interfaces

dark mode best practice

use dark gray backgrounds with lighter rather than white text, as recommended by google's material design

when to use dark mode

consider dark themes for products where users spend long periods on-screen

design with purpose

every visual choice should serve the user

design trend takeaway

understanding why UI trends emerged and declined helps designers make smarter visual design choices, visual design should always support user experience

web content accessibility guidelines (wcag)

internationally recognized standards developed by the world wide web consortium (w3c) to ensure digital content is accessible to all users, including those with disabilities

world wide web consortium (w3c)

organization that developed the wcag standards

purpose of wcag

help UX designers create interfaces that are perceivable, operable, understandable, and robust

web accessibility initiative (wai)

launched by the w3c in 1997

wcag 1.0

released in 1999, focused on html content

wcag 2.0

introduced in 2008, established testable and technology-neutral criteria

wcag 2.1

released in 2018, expanded accessibility to mobile, low vision, and cognitive needs

wcag 2.2

published in 2023 with 9 new success criteria, current standard

types of disabilities requiring accessibility

visual, hearing, mobility, cognitive, and speech disabilities

visual disabilities

low vision, blindness, and color blindness

hearing disabilities

hard of hearing or deafness

mobility disabilities

motor and physical disabilities

cognitive disabilities

learning and neurological disabilities

speech disabilities

speech-related disabilities

pour principles

four guiding principles forming the core of wcag, perceivable, operable, understandable, and robust

perceivable

content must be presentable in ways users can perceive, examples include alt text for images and text alternatives for images and videos

operable

navigation and interface components must be operable by all users, examples include keyboard-only access and clear, consistent navigation

understandable

information and UI operation must be clear, examples include plain language, predictable navigation, and input assistance

robust

content must work reliably with assistive technologies and various user agents, uses compatible standard html/css

wcag compliance in the united states

ada is interpreted to require accessible digital content with wcag as a standard, section 508 mandates federal accessibility, ada title ii (2024) references wcag 2.1 aa for government sites

americans with disabilities act (ada)

law interpreted to require accessible digital content

section 508 of the rehabilitation act

mandates federal accessibility in the united states

ada title ii (2024)

references wcag 2.1 aa for government sites

wcag compliance in the european union

european accessibility act (eaa) legally applicable june 2025, requires websites, apps, and e-commerce to meet wcag 2.1 aa (en 301 549)

european accessibility act (eaa)

law requiring websites, apps, and e-commerce in the european union to meet wcag 2.1 aa, legally applicable june 2025

wcag compliance in canada

accessible canada act (2019) requires federally regulated entities to meet wcag 2.0 aa

accessible canada act (2019)

requires federally regulated entities to meet wcag 2.0 aa

wcag compliance in the united kingdom

public sector bodies regulations (2018) require wcag 2.1 aa, equality act 2010 requires reasonable digital adjustments

public sector bodies regulations (2018)

requires public sector bodies in the united kingdom to meet wcag 2.1 aa

equality act 2010

requires reasonable digital adjustments in the united kingdom

risks of wcag non-compliance

legal action, reputational damage, and loss of audience

legal action

organizations may face lawsuits, costly settlements, and legal fees due to accessibility violations

reputational damage

inaccessible websites signal a lack of inclusivity and may cause users to question the brand's values

loss of audience

users with disabilities may abandon inaccessible websites, resulting in lost customers and clients

benefits of accessibility

designing for accessibility benefits everyone, example: youtube captions help deaf users and users in loud environments

wcag conformance levels

level a (minimum), level aa (standard), level aaa (highest)

level a

minimum wcag conformance level, includes alt text, video captions, and ensuring color is not the only way to convey information

level aa

standard wcag conformance level, includes live captions, 4.5:1 contrast ratio for text, and logical heading structure, most organizations target this level

level aaa

highest wcag conformance level, includes 7:1 contrast ratio and sign language interpretation for video, ideal but not always feasible

recommended wcag conformance level

level aa, balances accessibility with practical implementation

perceivable design practices

provide text alternatives for images and videos for screen readers, adaptable content for assistive technologies, sufficient color contrast, do not rely on color alone

operable design practices

provide keyboard accessibility, clear and consistent navigation with headings and labels, avoid flashing content more than 3 times per second due to seizure risk

understandable design practices

use readable text with clear and simple language, define unusual terms, maintain predictable navigation, provide input assistance and error suggestions for forms

robust design practices

use compatible content with standard html/css for current and future assistive technologies

nhs website

example of understandable wcag design, especially valuable for users who are ill, anxious, or have disabilities

responsive design (rd)

approach to web design where the interface adapts to the device's layout to facilitate usability, navigation, and information seeking, uses media queries and relative units (%) to ensure content consistency across all devices

adaptive design

approach that creates several versions of a design with fixed dimensions optimized for different devices

responsive design vs adaptive design

responsive design uses a single flexible layout that stretches or shrinks to fit any screen, while adaptive design uses several fixed-dimension versions

fluid grid system

elements occupy the same percentage of space regardless of screen size, components scale up and down as users switch devices