WEB DESIGN
Dr. Tuan Truong
Web analysis and design
2025
WEB DESIGN: DEFINITION &
IMPORTANCE
• Definition: Web design involves
creating visual, interactive, and
structural elements of websites.
• Importance:
• Influences user perception,
• trust, engagement,
• e-commerce conversion rates.
• Example: Amazon’s Web layout
overtime
Minimalist, Responsive Design
GESTALT PRINCIPLES
Psychological
Proximity concepts describing
how humans
perceive visual
elements as
organized patterns
Similarity rather than separate
components.
AAaaAA
Common fate
Improve user
experience (UX)
by leveraging
Closure natural human
perception
GESTALT PRINCIPLES
Proximity:
• Spatial or temporal proximity of elements may induce the
mind to perceive a collective or totality.
• Example: Group related navigation links or buttons closely
Similarity:
• The mind groups similar elements into collective entities or
totalities. This similarity might depend on relationships of
form, color, size, or brightness.
• Example: Use consistent colors and styles for related
interface elements
GESTALT PRINCIPLES
Common fate/Continuity : Elements with the same moving
direction are perceived as a collective or unit. Example: Apple's
product pages guiding eyes smoothly from top to bottom
AAaaAA
Closure: The mind may experience elements it does not perceive
through sensation, in order to complete a regular figure (that is,
to increase regularity).
ADDITION…
Figure-Ground:
• Users differentiate
between foreground
(figure) and background
(ground) elements.
• Use contrast and
whitespace clearly
distinguishing content
from background.
COMBINING GESTALT
Several Principles can be combined
PRINCIPLES
Proximity reinforces similarity
Proximity reinforces closure
[] []
Proximity opposes closure
][ ][ ]
GESTALT: GROUPING
Visual structure by
grouping & indentation Even more visual
No visual structure structure
(common fate)
Rotate X Rotate
Rotate Y X Rotate
Rotate Z Y X
Zoom In Z Y
Zoom Out Z
Zoom
In Zoom
Out In
Out
GESTALT: DIALOGUE BOX EXAMPLE
How can you improve the design of this
dialogue box?
Align Objects
Left sides L/R Centers Right sides
Tops T/B Centers Bottoms
GESTALT: DIALOGUE BOX EXAMPLE
Proximity
Align Objects
Left sides L/R Centers Right sides
Tops T/B Centers Bottoms
GESTALT: DIALOGUE BOX EXAMPLE
Reinforce proximity
Align Objects
Left sides L/R Centers Right sides
Tops T/B Centers Bottoms
GESTALT: DIALOGUE BOX EXAMPLE
Proximity + common fate
Align Objects
Tops
T/B Centers
Bottoms
Left sides L/R Centers Right sides
GESTALT: DIALOGUE BOX EXAMPLE
Weak visual structure
GESTALT: DIALOGUE BOX EXAMPLE
Strong visual structure
GESTALT: PROXIMITY
Items close together appear to have a relationship
Distance implies no relationship
Time:
Time:
GESTALT: PROXIMITY TO
CREATE STRUCTURE
Name Name
Name
Addr1
Addr1 Addr1
Addr2 Addr2 Addr2
City City City
State State
State
Phone Phone
Phone
Fax
Fax Fax
GESTALT: USE OF PROXIMITY TO FORM STRUCTURE
– AIDS DATA ENTRY SPEED
171 343 735
vs 171343735
Seconds per digit
20 25 54 83 28 0.8
vs 2025548328
0.6
0.4
0.2
0
1 2 3 4 5 6 7
Digits per group
McCormick, Human Factors in Engineering and Design, McGraw Hill, 1976
GESTALT: APPLICATION OF
PRINCIPLES TO SCREEN FORMAT
Before
PART NUMBER FILE: MISCELLANEOUS BRACKETS
PART: 0926431X LH BRONZE STUD BRACKET
GROUP: B BUDGET GROUP: 2413
CLASS: R SUB-ACCOUNT: 92
UNITS: DOZENS DEPRECIATION PERIOD 15
ACTION______ PRODUCT STATUS: NOT YET ALLOCATED
ADDITION DATE: 1 DEC 75 F. BRIGGS DES 9
T. Stewart,
LAST AMENDED: 14 MAY 75 R. SMITH PROC 11 Displays and the
Software Interface,
DELETION DATE: NONE Applied
Ergonomics, 1976,
MAIN SUPPLIER: J. BLOGGS & SON, ROTHERHAM pp. 137-146
GESTALT: APPLICATION OF
PRINCIPLES TO SCREEN FORMAT
After
PART NUMBER FILE: MISCELLANEOUS BRACKETS
PART: 0926431X LH BRONZE STUD BRACKET
GROUP: B BUDGET GROUP: 2413
CLASS: R SUB-ACCOUNT: 92
UNITS: DOZENS DEPRECIATION PERIOD: 15
ACTION______ PRODUCT STATUS: NOT YET ALLOCATED
ADDITION DATE: 1 DEC 75 F. BRIGGS DES 9
LAST AMENDED: 14 MAY 75 R. SMITH PROC 11
DELETION DATE: NONE
MAIN SUPPLIER: J. BLOGGS & SON, ROTHERHAM
GESTALT: APPLICATION OF
PRINCIPLES TO SCREEN FORMAT
Even Later (use upper & lower case)
Part Number File: Miscellaneous Brackets
Part: 0926431X LH Bronze Stud Bracket
Group: B Budget Group: 2413
Class: R Sub-account: 92
Units: Dozens Depreciation Period: 15
Action______ Product Status: Not Yet Allocated
Addition Date: 1 Dec 75 F. Brigs Des 9
Last Amended: 14 May 75 R. Smith Proc 11
Deletion Date: None
Main Supplier: J. Bloggs & Son, Rotherham
don’t overuse of upper case
Contrast CRAP
make different things different
brings out dominant elements
mutes lesser elements
creates dynamism
Repetition
repeat design throughout the interface
consistency
creates unity
Alignment
visually connects elements
creates a visual flow
Proximity
groups related elements
separates unrelated ones
Robin Williams Non-Designers Design Book, Peachpit Press
IMPORTANT CONCEPTS IN
DESIGNING WEBSITE
VISUAL BALANCE &
CONSISTENCY EXPLAINED
• Balance: Even
distribution of visual
weight, providing
stability (symmetrical –
đối xứng) or dynamism
(asymmetrical – bất đối
xứng).
• Consistency: Repeating
elements (fonts, colors,
buttons) to create
familiarity.
• Example: Apple's website
consistently uses
minimal colors, aligned
elements, and clear fonts
across pages.
WHICH ONE IS BETTER?
History of apple website
BE CONSISTENT
• Consistency of effects
• same words, commands, actions will always have the same
effect in equivalent situations
• Consistency of language and graphics
• same information/controls in same location on all screens /
dialog boxes
• same visual appearance across the system (e.g. widgets)
• e.g. different scroll bars in a single window system!
• Consistency of input
• consistent syntax across complete system
BE CONSISTENT
Don’t
be Van
Gogh
in
Web
design
CATER TO UNIVERSAL
USABILITY
Physical disability
Target size should be large enough for easy selection
Interface should not be crowded
Images should be accompanied with alt. text or numbers
Text bullets or links can be accompanied by numbers
Perceptual disability
Provide a text equivalent for every nontext element
Avoid using color to deliver critical information
Provide sufficient contrast between text and background
Avoid pull down and pop up menus
Avoid using image maps for navigation
Demo: Effect of Red-Green
Color Blindness
HIERARCHY &
READABILITY DETAILED
• Hierarchy: Organizing information to guide users,
often using size, contrast, and positioning.
• Readability: Clear typography, font sizes, and
spacing allowing easy scanning of content.
CONTRAST & COLOR THEORY
• Contrast: Significant differences in color, shape, or size to
attract attention and clarify content.
• Color Theory: Psychological impact of colors; warm colors
evoke excitement, cool colors convey calmness.
• Example: Coca-Cola uses vibrant red for excitement and
urgency, while PayPal utilizes calming blues.
ALIGNMENT, SPACING &
WHITE SPACE IN DETAIL
• Alignment: Structured placement of elements using grids for
harmony and clarity.
• Spacing & White Space: Gaps between elements that improve
readability, reduce clutter, and focus attention.
USER-CENTERED &
INCLUSIVE DESIGN
• User-Centered
Design: Creating
websites tailored
specifically to user
preferences and
behaviors.
• Inclusive Design:
Ensuring websites
are accessible to
all users, including
those with
disabilities
(following WCAG
guidelines).
GENERIC SYSTEM
RESPONSES FOR ERRORS
• General idea: Forcing functions
• prevent / mitigate continuation of wrongful
action
• E.g. modern widgets: can only enter legal data
ACTIVITY:
COMPREHENSIVE WEBSITE
CRITIQUE
• Objective: In-depth evaluation of actual e-commerce
websites (e.g., Amazon, eBay, Nike) based on principles
learned.
• site structures,
• design effectiveness,
• accessibility features
• ….
Your group could choose your group
project company for this activities
WEB DESIGN TRENDS
WHY KEEPING UP WITH
TRENDS MATTERS
• Reason: Trends shape user expectations, making websites
appear modern and trustworthy.
• Impact: Websites using outdated designs may experience
lower engagement.
• Example: Facebook web design overtime
Facebook – Harvard version (2004) Facebook – the Wall version (2008) Current Facebook version(2025)
still remember of yahoo failure???
we gotta see their web
MINIMALISM & CLEAN
DESIGN FULLY EXPLAINED
• Minimalism: Removing unnecessary elements to prioritize
essential content.
• Benefit: Faster load times, reduced cognitive overload, improved
clarity.
MOBILE-FIRST & RESPONSIVE
DESIGN EXPLAINED
• Mobile-First:
Prioritizing design
for mobile devices
before desktop.
• Responsive Design:
Automatically
adapting layouts to
different screens.
• Example: Airbnb
adapts content
seamlessly across
devices.
DARK MODE INTERFACES:
PROS & CONS
• Pros: Reduces eye strain, enhances visual appeal.
• Cons: Possible readability issues if poorly designed.
• Example: Dark mode design
MICRO-INTERACTIONS &
ANIMATIONS EXPLAINED
• Micro-interactions: Subtle animations providing instant feedback.
• Purpose: Enhance engagement, improve UX.
• Example: Facebook 'like' animation.
TYPOGRAPHY-DRIVEN
DESIGN IN DETAIL
• Typography:
Strategic font
selection to
communicate
brand identity.
• Impact: Strongly
affects user
perception and
professionalism.
CASE STUDY: TRENDS
APPLIED TO REAL
WEBSITES
• Detailed Analysis: Evaluate your project websites (if not, use
Nike or Apple). Insights: Trend effectiveness enhancing UX
and brand image.
• Criteria: Minimalism, responsiveness, micro-interactions,
typography.
• What design should we apply for our web?
ENOUGH FOR TODAY??
HELL YES!!!
This is for the rest of this
week and … week
Quiz – Web architecture design
Team Project Deliverable 1: Web Planning (Only EFC - ECom For Community
program + VECOM teams)
Next week (24-30/03)
Team Project Deliverable 2: Web Analysis
Following week (31/03 - 06/04)
Review group project design (in-class)
Team Project Deliverable 2: Web Analysis (Only EFC - Ecom For Community
program + VECOM teams)