GUI Design Guidelines, Gestalt, Layout and Colour

Summary

GUI design depends on how users perceive, group, interpret, and act on visual information. Users bring expectations from past experience, current context, and current goals, so interfaces should be consistent, legible, unambiguous, and organized around what users need to do.

Gestalt principles explain how users group interface elements: similarity, proximity, common region, closure, continuation, figure-ground, and focal point. These principles help designers create clear grouping, hierarchy, and navigation.

GUI guidelines are not fixed recipes. Shneiderman, Nielsen/Molich, and WAI accessibility principles provide useful goals, but guidelines can be general and may conflict. Designers must balance consistency, minimalism, flexibility, accessibility, aesthetics, and feedback.

Layout work includes responsive grids, columns, gutters, margins, whitespace, rule of thirds, navigation structure, and visual hierarchy. Typography should prioritize readability: avoid decorative fonts for body text, excessive uppercase, noisy backgrounds, and centered long-form text. Colour should consider RGB/HEX, harmony, contrast, accessibility, colour blindness, and cultural meaning.

Key Terminology

• Gestalt principles: perceptual rules explaining how people organize visual elements into meaningful wholes.
• Similarity: similar-looking elements are perceived as related.
• Proximity: elements close to each other are perceived as grouped.
• Common region: elements inside the same boundary are perceived as belonging together.
• Closure: users mentally complete incomplete shapes.
• Continuation: users follow smooth visual paths.
• Figure-ground: users separate foreground objects from background.
• Focal point: visually distinct element that draws attention.
• Affordance: perceived action possibility suggested by a control or object.
• Feedback: system response showing what has happened or is happening.
• Recognition rather than recall: making options visible so users do not need to remember them.
• Wireframe: low-detail representation of interface layout and structure.
• Skeuomorphism: digital design imitates physical-world objects or materials.
• Flat design: minimal style with reduced realism and decoration.
• Neumorphism: soft pseudo-3D style using shadows and highlights.
• White space: empty space used to separate, group, and prioritize content.
• WAI accessibility principles: interfaces should be perceivable, operable, understandable, and robust.