UX/UI Design Guide

UX (User Experience) focuses on how the user feels when interacting with your website: is it easy to use? do they find what they are looking for? do they achieve their goal? UI (User Interface) focuses on the visual part: colors, typography, icons and graphic elements.

Good UX can exist with mediocre UI, but not the other way around. First design the experience (flows, hierarchy, interactions) and then apply visual design. Many beautiful websites fail because they do not solve the real user needs.

The most important UX principles are: clarity (the user understands what they can do), consistency (elements behave the same throughout the website), feedback (the website responds to user actions) and efficiency (the user achieves their goal with minimum effort).

The 3-click rule says any important information should be accessible in a maximum of 3 clicks. Hick's law states that more options mean more time for the user to decide. Simplify navigation and reduce options on each screen.

A coherent color palette conveys professionalism. Use a primary color for main actions (buttons, links), a secondary for accents and neutral tones for backgrounds and text. Limit the palette to 3-5 colors to maintain coherence.

Typography is 90% of web design. Choose maximum 2 font families: one for headings (display) and another for body. Minimum text size should be 16px for good readability. Use typographic scale to create clear visual hierarchy.

Main navigation should be simple and predictable. Maximum 7 items in the main menu (Miller's rule). Use clear and descriptive labels, not creative ones: "Services" instead of "What we do". Include a search if your website has more than 50 pages.

Information architecture organizes content logically. Use card sorting to discover how your users group information. Create breadcrumbs so users always know where they are and can navigate back easily.

Forms are the point where visitors become leads or customers. Minimize fields: each additional field reduces conversions by 5-10%. Ask only for essential information. For a contact form, name, email and message are sufficient.

Use real-time validation so users can correct errors immediately. Show clear and specific error messages ("Email is not valid" instead of "Error"). Group related fields and use floating labels to save space without losing clarity.

Web accessibility is not optional. In Spain, Law 11/2023 requires WCAG 2.1 level AA accessibility for public sector websites and large companies. Additionally, making your website accessible expands your audience and improves SEO.

Accessibility basics include: sufficient color contrast (4.5:1 ratio for text), alternative text on all images, complete keyboard navigation, correct heading structure and forms with associated labels. Use tools like WAVE or axe to audit accessibility.