UX & UI Real World Vademecum
Part I: Invisible Foundations
Welcome to the world of visual engineering. Here, we don't talk about "making things pretty," but about building structures that stand up. If the UI were a house, these would be the reinforced concrete foundations.
Structure and Perception
1. Wireframe vs. High Fidelity
The Myth of Paper Wireframes
What it does: Defines the raw structure before investing time in visual design.
The Analogy: We are often taught to always start with pen and paper. But beware: drawing on paper is like being an architect drawing 10-centimeter thick walls on an A4 sheet. On paper, everything fits: 5 columns, 3 giant buttons, and a title. When you bring everything into software (the "reality"), you discover that the human finger is bigger than you thought and the title wraps three times.
The "Reverse" Strategy: Unless the client is a corporate giant requiring months of bureaucracy, skip the low-fidelity wireframe. Jump directly to a Grayscale High Fidelity UI. It’s like building the skeleton of the building with real steel beams, but without painting the walls. You save double the work and avoid the trap of "impossible dimensions."
2. Visual Hierarchy
Don't Scream Everything
What it does: Guides the user's eye through the importance of elements without forcing them to think.
The Analogy: Imagine walking into a crowded room where everyone is shouting at the same volume. You understand nothing. Most amateur UIs do this: everything bold, everything big, everything colorful. The result is white noise. A good UI is like a polite conversation: the title speaks loudly, the subtitle uses a normal tone, and the footnotes whisper.
The Gray Trick: Don't use size as the only tool for hierarchy. Use contrast. A dark gray text on a white background is perceived as "less important" than black text, even if they are the same size. De-emphasize the secondary to make the primary pop.
3. White Space
The Oxygen of the Interface
What it does: Separates, groups, and defines relationships between elements without using lines or boxes.
The Analogy: Think of an art museum. The paintings aren't stuck next to each other like flyers at a supermarket. They have meters of empty wall around them. That empty space isn't "wasted space"; it’s what gives value to the painting. In code, we are used to filling containers. In design, we must learn to subtract.
The "Start Wide" Rule: It is much easier to tighten a layout that is too loose than to try to make a suffocated layout breathe. Start with exaggerated margins. If it feels empty, tighten it gradually until you reach the desired balance.
4. Alignment and Grid
The Invisible Rhythm
What it does: Creates a subconscious order that makes the page readable and professional.
The Analogy: It’s like the layout of a book or the structure of a building. If the windows are misaligned by even a few centimeters, the building looks unstable. The human eye loves to trace imaginary lines.
The Pixel Discomfort: If an element is shifted by 2px relative to the one above, the user won't say "it's misaligned," they will say "I don't trust this site." Always use multiples (e.g., the 8px rule) to space everything. If everything follows a mathematical rhythm, the design "sounds" right even to those who don't understand music.
Universal Laws
5. Affordance
The Door Handle
What it does: Visually suggests how an object should be used, without the need for labels.
The Analogy: This comes straight from Don Norman. If you see a flat plate on a door, your reptilian brain says "PUSH." If you see a handle, it says "PULL." If you put a handle on a door that needs to be pushed, you've created a cognitive trap (a Norman Door).
Digital Application: A button must look pressable (shadow, relief, color). A text field must look empty and ready to receive input. If the user has to read a label to figure out if something is clickable, engineering design has failed. Aesthetics is not decoration; it is functional communication.
6. Jakob's Law
The Force of Habit
What it does: Leverages mental models the user has already learned elsewhere to make your site immediately familiar.
The Analogy: Imagine renting a car. You expect the brake pedal on the left and the accelerator on the right. If a "creative" engineer decided to swap the pedals because "it's more innovative," you'd cause an accident at the first turn.
The Lesson: Users spend 99% of their time on sites that are not yours. They expect the cart to be in the top right, the logo to link to Home, and the magnifying glass to mean "Search." Don't reinvent the wheel. Innovation in UI should be dosed with a dropper: innovate only if it drastically improves efficiency; otherwise, take inspiration from the standard. Familiarity (unfortunately) beats creativity.
7. System Feedback
The Silent Conversation
What it does: Confirms to the user that their action has been received and processed.
The Analogy: You flip a light switch. The light turns on instantly. You have immediate feedback. Now imagine flipping it and nothing happens for 3 seconds. You'd think it's broken and flip it 5 more times in anger.
The 100ms Test: Software must respond within 100 milliseconds. If the operation is long (like a database fetch), you must immediately show a spinner or a skeleton screen. The user should never ask "Did I click it?". If the interface doesn't respond, the user loses trust in the system, not in themselves.