⚠️ Important Notice
This page contains intentional design and UI issues for testing and educational purposes only. These examples demonstrate common design mistakes like poor layouts, broken responsive design, color problems, and typography issues. Always follow design best practices and test across devices in production.
Design & UI Issues
The following examples demonstrate common design problems:
1. Chaotic and Inconsistent Layout Layout
Elements positioned randomly with no clear structure:
/* VIOLATION: Chaotic layout */
.element1 { float: left; margin: 5px 50px 1px 3px; }
.element2 { position: absolute; top: 100px; left: 200px; }
.element3 { float: right; margin: 0 0 0 0; }
.element4 { position: fixed; bottom: 50px; right: 30px; }
/* No grid system, no flexbox, inconsistent positioning */
Element 1
Element 2
Element 3
Elements positioned chaotically
2. Broken Responsive Design Responsive
Fixed widths that break on different screen sizes:
/* VIOLATION: Fixed widths, not responsive */
.container {
width: 1200px;
min-width: 1200px;
max-width: 1200px;
}
/* Breaks on mobile, tablets, small screens */
This container is 1200px wide and will overflow on smaller screens
Try resizing your browser window to see the problem
3. Poor Color Choices and Contrast Color
Colors that clash or have poor contrast:
/* VIOLATION: Poor color choices */
.element {
background: #ff00ff; /* Bright magenta */
color: #00ff00; /* Bright green */
border: 5px solid #ffff00; /* Bright yellow */
}
/* Clashing colors, hard to read */
This text is very hard to read due to clashing colors
Magenta background, green text, yellow border - terrible!
4. Inconsistent Spacing Spacing
Random spacing with no consistent rhythm:
/* VIOLATION: Inconsistent spacing */
.section1 { margin: 0; padding: 50px; }
.section2 { margin: 2px; padding: 1px; }
.section3 { margin: 100px 5px 1px 200px; }
.section4 { padding: 0 0 0 0; margin-top: 50px; }
/* No spacing system, random values */
Section with inconsistent spacing
Some elements have huge margins
Others have tiny padding
No visual rhythm
5. Poor Typography Typography
Typography that's hard to read or inconsistent:
/* VIOLATION: Poor typography */
.text {
font-family: Comic Sans MS, cursive;
font-size: 8px;
line-height: 0.5;
letter-spacing: 10px;
text-transform: uppercase;
font-weight: 900;
}
/* Hard to read, unprofessional */
This text is very hard to read
Mixed font sizes
And styles
Everywhere
6. Overlapping Elements Overlap
Elements that overlap unintentionally:
/* VIOLATION: Overlapping elements */
.element1 {
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
}
.element2 {
position: absolute;
top: 12px;
left: 12px;
z-index: 998;
}
/* Elements overlap, text unreadable */
7. No Visual Hierarchy Hierarchy
Everything looks the same importance:
/* VIOLATION: No visual hierarchy */
h1, h2, h3, p {
font-size: 14px;
font-weight: normal;
color: #999;
margin: 5px;
}
/* All text looks the same */
Important Heading
Subheading
Body text
All look the same!
8. Inconsistent Button Styles Buttons
Buttons that look completely different:
/* VIOLATION: Inconsistent buttons */
.btn1 { background: red; padding: 5px; border-radius: 0; }
.btn2 { background: blue; padding: 20px; border-radius: 50px; }
.btn3 { background: green; padding: 10px; border-radius: 5px; }
/* No design system */
Button 1
Button 2
Button 3
9. Poor Alignment Alignment
Elements that are misaligned:
/* VIOLATION: Poor alignment */
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
/* Random alignment, no grid */
Left aligned text
Center aligned text
Right aligned text
Indented text
Different indentation
10. Missing Focus States Focus
Interactive elements without visible focus indicators:
/* VIOLATION: No focus states */
button:focus { outline: none; }
a:focus { outline: none; }
input:focus { outline: none; }
/* No visual feedback for keyboard users */
11. Inconsistent Border Radius Borders
Random border radius values:
/* VIOLATION: Inconsistent border radius */
.card1 { border-radius: 0; }
.card2 { border-radius: 50px; }
.card3 { border-radius: 3px; }
.card4 { border-radius: 15.7px; }
/* No consistent design system */
Card 1 (0px)
Card 2 (50px)
Card 3 (3px)
Card 4 (15.7px)
12. Poor Image Sizing and Aspect Ratios Images
Images that are distorted or poorly sized:
/* VIOLATION: Distorted images */
img {
width: 200px;
height: 100px;
/* Forces square image into rectangle */
object-fit: none;
}
Distorted Image Area
Image forced into wrong aspect ratio
13. Inconsistent Shadows and Effects Effects
Random shadow and effect styles:
/* VIOLATION: Inconsistent effects */
.card1 { box-shadow: none; }
.card2 { box-shadow: 0 0 50px red; }
.card3 { box-shadow: 5px 5px 10px blue; }
.card4 { text-shadow: 2px 2px 4px green; }
/* No consistent design language */
No Shadow
Huge Red Shadow
Blue Shadow
14. No Loading States Loading
No visual feedback during loading:
<!-- VIOLATION: No loading state -->
<button onclick="loadData()">Load Data</button>
<!-- Button doesn't change, no spinner, no feedback -->
Load Data (No Loading State)
15. Poor Mobile Experience Mobile
Design that doesn't work on mobile:
/* VIOLATION: Not mobile-friendly */
.menu {
width: 800px;
font-size: 10px;
}
.buttons {
width: 200px;
height: 30px;
}
/* Too small, too large, not touch-friendly */
This menu is 800px wide with 10px font
Will be unusable on mobile devices
Tiny Button
Good Design Examples
The following examples demonstrate proper design practices:
1. Consistent Grid-Based Layout Layout
/* Compliant: Grid-based layout */
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
/* Consistent, responsive, predictable */
2. Responsive Design Responsive
/* Compliant: Responsive design */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
}
/* Works on all screen sizes */
Responsive container that adapts to screen size
Try resizing your browser - it stays within bounds
3. Harmonious Color Palette Color
/* Compliant: Harmonious colors */
:root {
--primary: #6366f1;
--secondary: #8b5cf6;
--success: #10b981;
--text: #e2e8f0;
--bg: #0a0e27;
}
/* Consistent color system */
Harmonious color combination
Good contrast, easy to read, visually pleasing
4. Consistent Spacing System Spacing
/* Compliant: Consistent spacing */
:root {
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
}
.section { margin-bottom: var(--spacing-lg); }
.card { padding: var(--spacing-md); }
/* Consistent spacing rhythm */
Consistent spacing
Creates visual rhythm
Professional appearance
5. Professional Typography Typography
/* Compliant: Professional typography */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 24px; font-weight: 600; }
h3 { font-size: 20px; font-weight: 600; }
/* Clear hierarchy, readable */
Main Heading
Subheading
Body text with proper line height and readable size
6. Proper Element Positioning Positioning
/* Compliant: Proper positioning */
.container {
display: flex;
flex-direction: column;
gap: 16px;
}
/* No overlapping, clear structure */
Element 1
Element 2
Element 3
7. Clear Visual Hierarchy Hierarchy
/* Compliant: Clear hierarchy */
.primary { font-size: 24px; font-weight: 700; color: #fff; }
.secondary { font-size: 18px; font-weight: 600; color: #cbd5e0; }
.body { font-size: 16px; font-weight: 400; color: #a0aec0; }
/* Different sizes, weights, colors show importance */
Primary Heading - Most Important
Secondary Heading
Body text - supporting information
8. Consistent Button Styles Buttons
/* Compliant: Consistent buttons */
.btn {
padding: 12px 24px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
}
.btn-primary { background: #6366f1; color: white; }
.btn-secondary { background: rgba(255,255,255,0.1); color: white; }
/* Design system, consistent styling */
Primary Button
Secondary Button
Tertiary Button
9. Proper Alignment Alignment
/* Compliant: Proper alignment */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
gap: 20px;
}
/* Grid system ensures proper alignment */
Aligned Item 1
Aligned Item 2
Aligned Item 3
10. Clear Focus States Focus
/* Compliant: Clear focus states */
button:focus {
outline: 3px solid #f59e0b;
outline-offset: 2px;
}
a:focus {
outline: 2px solid #818cf8;
border-radius: 2px;
}
/* Visible, accessible focus indicators */
Button with Focus Indicator (Tab to focus)
11. Consistent Border Radius Borders
/* Compliant: Consistent border radius */
:root {
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}
.card { border-radius: var(--radius-md); }
.button { border-radius: var(--radius-md); }
/* Consistent design system */
Card 1 (8px)
Card 2 (8px)
Card 3 (8px)
12. Proper Image Handling Images
/* Compliant: Proper image handling */
img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 16 / 9;
}
/* Maintains aspect ratio, responsive */
13. Consistent Shadows and Effects Effects
/* Compliant: Consistent effects */
:root {
--shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}
.card { box-shadow: var(--shadow-md); }
/* Consistent design language */
Card with Shadow
Consistent Shadow
14. Loading States Loading
<!-- Compliant: Loading state -->
<button class="loading" disabled>
<span class="spinner"></span>
Loading...
</button>
/* Visual feedback during operations */
15. Mobile-First Responsive Design Mobile
/* Compliant: Mobile-first responsive */
.container {
width: 100%;
padding: 16px;
font-size: 16px;
}
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
}
.button {
min-width: 44px;
min-height: 44px;
font-size: 16px;
}
/* Touch-friendly, readable on all devices */
Mobile-first responsive container
Touch-Friendly Button
About This Page
This page is designed for:
Testing design analysis tools
Training designers and developers on UI/UX best practices
Understanding visual design principles
Learning about design systems and consistency
Remember: Always maintain design consistency, test on multiple devices, use a design system, ensure proper visual hierarchy, and prioritize user experience. Design should be both beautiful and functional.
