Puntos clave
1. Comienza con una función, no con un diseño
La forma más fácil de frustrarte y quedarte atascado al trabajar en un nuevo diseño es empezar intentando "diseñar la aplicación".
Concéntrate primero en la funcionalidad. Empieza diseñando una función específica o una pieza de funcionalidad en lugar del diseño general o la "estructura" de la aplicación. Este enfoque te permite tomar decisiones informadas sobre la navegación y la estructura basándote en el contenido real y las necesidades del usuario. Por ejemplo, al diseñar un servicio de reserva de vuelos, comienza con los elementos esenciales como los campos de salida y destino, los selectores de fecha y el botón de búsqueda.
Evita decisiones prematuras. Al enfocarte primero en las funciones, evitas tomar decisiones sin fundamento sobre la navegación, el diseño y otros elementos estructurales. Este método te ayuda a construir un diseño más centrado en el usuario que evoluciona de forma natural a partir de la funcionalidad principal de tu aplicación.
2. Diseña en escala de grises antes de añadir color
Al diseñar en escala de grises, te ves obligado a usar el espacio, el contraste y el tamaño para hacer todo el trabajo pesado.
Enfatiza la estructura y la jerarquía. Diseñar inicialmente en escala de grises te obliga a centrarte en los aspectos fundamentales de tu diseño: la disposición, el espacio y el contraste. Este enfoque asegura que la estructura básica de tu diseño sea sólida antes de introducir la complejidad del color.
Refina sin distracciones. Trabajar en escala de grises te permite tomar decisiones críticas sobre la jerarquía y el énfasis sin la posible distracción del color. Una vez que hayas establecido una base fuerte, puedes introducir el color de forma estratégica para realzar el diseño, en lugar de depender de él para crear estructura o significado.
- Comienza con wireframes o bocetos básicos
- Refina la disposición y el espacio en escala de grises
- Establece una jerarquía visual clara usando contraste y tamaño
- Introduce el color solo después de que el diseño central esté sólido
3. Establece jerarquía visual mediante tamaño, peso y contraste
La jerarquía visual se refiere a la importancia que aparentan tener los elementos en una interfaz en relación unos con otros, y es la herramienta más efectiva para que algo se sienta "diseñado".
Usa múltiples técnicas. Crea jerarquía variando tamaños de fuente, pesos y colores. No te bases solo en el tamaño de la fuente; combinar diferentes técnicas suele dar mejores resultados. Por ejemplo, usa un peso de fuente más grueso o un color más oscuro para enfatizar elementos importantes, manteniendo tamaños razonables.
Considera el contexto. Adapta tu jerarquía según las necesidades específicas de cada elemento de la interfaz. Por ejemplo:
- Titulares: tamaño mayor, peso más grueso
- Texto principal: tamaño medio, peso regular
- Texto secundario: tamaño menor, color más claro
- Botones de llamada a la acción: color contrastante, texto en negrita
Recuerda que la jerarquía no solo consiste en destacar elementos, sino también en desatender los menos importantes para crear un camino visual claro para el usuario.
4. Crea profundidad con sombras y capas
Las sombras pueden ser más que un efecto llamativo: usadas con intención, permiten posicionar elementos en un eje z virtual para crear una sensación significativa de profundidad.
Usa las sombras con propósito. Las sombras pueden transmitir elevación e importancia en tu interfaz. Establece un sistema de tamaños e intensidades de sombra para representar diferentes niveles de elevación de forma consistente en todo tu diseño.
- Sombras pequeñas: elementos ligeramente elevados (por ejemplo, botones)
- Sombras medianas: elementos flotantes (por ejemplo, menús desplegables)
- Sombras grandes: diálogos modales o elementos prominentes
Superpone elementos para dar profundidad. Solapa diferentes componentes para crear una sensación de capas en tu diseño. Esta técnica añade interés visual y ayuda a organizar la información jerárquicamente. Por ejemplo:
- Desplaza tarjetas para que se superpongan a fondos
- Permite que elementos se extiendan más allá de sus contenedores
- Usa "bordes invisibles" para separar imágenes superpuestas
5. Usa un sistema consistente de espacios y tamaños
Un enfoque sencillo es comenzar con un valor base sensato y luego construir una escala usando factores y múltiplos de ese valor.
Establece una escala. Crea un sistema de espacios y tamaños basado en una escala consistente. Este enfoque asegura armonía visual y acelera el proceso de diseño al limitar las opciones. Comienza con un valor base (por ejemplo, 16px) y crea una escala usando múltiplos o factores de ese valor.
Aplica de forma consistente. Usa la escala establecida para varios aspectos de tu diseño:
- Márgenes y rellenos
- Tamaños de elementos (botones, campos de entrada, etc.)
- Espacios en la cuadrícula
- Tipografía (altura de línea, espaciado entre párrafos)
Al seguir un sistema consistente, creas un diseño más cohesivo y reduces la fatiga de decisiones durante el proceso. Recuerda que tu escala debe ofrecer suficientes opciones para ser flexible, pero no tantas que resulte abrumadora.
6. Elige tipografías con criterio y establece una escala tipográfica
Para diseño de interfaces, la opción más segura es una sans-serif bastante neutra — piensa en algo como Helvetica.
Selecciona tipografías apropiadas. Escoge tipografías legibles en varios tamaños y adecuadas para el propósito de tu diseño. Para interfaces de usuario, las fuentes sans-serif neutras suelen ser la mejor elección. Considera factores como:
- Legibilidad en tamaños pequeños
- Pesos y estilos disponibles
- Compleción del conjunto de caracteres
- Licencia y derechos de uso
Crea una escala tipográfica. Establece un conjunto consistente de tamaños de fuente para usar en todo tu diseño. Esto ayuda a mantener la armonía visual y acelera el proceso.
- Comienza con un tamaño base (por ejemplo, 16px para texto principal)
- Crea una escala de 5 a 8 tamaños para diferentes usos (titulares, leyendas, etc.)
- Usa una escala no lineal para mayor flexibilidad (por ejemplo, 12, 14, 16, 20, 24, 32, 48px)
7. Desarrolla una paleta de colores completa
Una buena paleta de colores se puede dividir en tres categorías.
Construye una paleta versátil. Crea un sistema de colores que incluya:
- Grises: 8-10 tonos para texto, fondos y elementos de interfaz
- Colores primarios: 5-10 tonos cada uno para colores principales de marca y acciones
- Colores de acento: colores adicionales para resaltados, advertencias y visualización de datos
Considera la psicología del color. Elige colores que se alineen con la personalidad de tu marca y evoquen las emociones adecuadas. Por ejemplo:
- Azul: confianza, profesionalismo
- Verde: crecimiento, positividad
- Rojo: urgencia, importancia
Recuerda probar tu paleta para accesibilidad y asegurar suficiente contraste entre texto y fondo.
8. Optimiza las imágenes para legibilidad e impacto
Para resolver este problema, necesitas reducir la dinámica en la imagen para hacer que el contraste entre el texto y el fondo sea más consistente.
Mejora el contraste imagen-texto. Al colocar texto sobre imágenes, asegúrate de la legibilidad ajustando la imagen o añadiendo superposiciones:
- Reduce el contraste de la imagen
- Añade superposiciones semitransparentes
- Usa filtros de color para unificar la imagen con tu diseño
- Aplica sombras o brillos sutiles al texto
Controla el contenido generado por usuarios. Al tratar con imágenes subidas por usuarios:
- Exige proporciones y tamaños consistentes
- Usa bordes o sombras sutiles para separar imágenes de fondos
- Implementa estilos de reserva para imágenes faltantes o problemáticas
Estas técnicas ayudan a mantener la integridad del diseño mientras se adapta a contenido variable.
9. Presta atención a los pequeños detalles para un acabado pulido
No siempre tienes que añadir nuevos elementos para dar vida a un diseño — hay muchas formas de "potenciar" lo que ya está ahí.
Eleva los elementos estándar. Mejora componentes comunes de la interfaz para añadir interés visual:
- Sustituye viñetas por iconos personalizados
- Estiliza las comillas en testimonios
- Crea estilos personalizados para casillas y botones de opción
- Añade bordes de acento a tarjetas o secciones
Usa decoraciones de fondo sutiles. Rompe la monotonía en tus diseños:
- Aplica degradados o patrones suaves en fondos
- Usa colores de fondo diferentes para distinguir secciones
- Añade texturas ligeras o ilustraciones sutiles
Estos pequeños detalles pueden mejorar significativamente la pulcritud y profesionalismo de tu diseño sin requerir cambios mayores en la estructura.
Última actualización:
FAQ
What's "Refactoring UI" about?
- Design principles for developers: "Refactoring UI" by Adam Wathan provides practical design advice specifically tailored for developers who may not have formal design training.
- Focus on UI improvement: The book emphasizes improving user interfaces by focusing on hierarchy, layout, color, and typography.
- Actionable tips and techniques: It offers actionable tips and techniques to make interfaces more visually appealing and user-friendly.
- Systematic approach: The book encourages a systematic approach to design, helping readers create consistent and efficient UI designs.
Why should I read "Refactoring UI"?
- Enhance design skills: If you're a developer looking to improve your design skills, this book provides clear, practical guidance.
- Bridge the gap: It helps bridge the gap between development and design, making it easier to create aesthetically pleasing and functional interfaces.
- Time-saving techniques: The book offers time-saving techniques and systems that streamline the design process.
- Real-world examples: It includes real-world examples and case studies that illustrate the application of design principles.
What are the key takeaways of "Refactoring UI"?
- Start with features: Begin designing with a focus on features rather than the overall layout to avoid frustration and inefficiency.
- Hierarchy is crucial: Establish a clear visual hierarchy to make interfaces more intuitive and user-friendly.
- Limit choices: Define systems for colors, fonts, and spacing to reduce decision fatigue and maintain consistency.
- Emphasize simplicity: Avoid over-designing and focus on creating the simplest useful version of a feature.
How does "Refactoring UI" suggest starting a design?
- Feature-first approach: Start with a specific feature rather than the entire layout to gather necessary information for design decisions.
- Example of flight booking: For a flight booking service, begin with the search functionality, including fields for departure and destination cities.
- Avoid shell design: Avoid starting with the app's shell, such as navigation bars, until features are defined.
- Iterative process: Use an iterative process to refine features and layout as more information becomes available.
What does "Refactoring UI" say about visual hierarchy?
- Not all elements are equal: Recognize that not all elements in an interface hold the same importance and should be styled accordingly.
- Use size wisely: Avoid relying solely on size to establish hierarchy; use font weight and color to emphasize important elements.
- De-emphasize to emphasize: Sometimes, de-emphasizing less important elements can make the main elements stand out more.
- Separate visual and document hierarchy: Ensure that visual hierarchy is distinct from document hierarchy to maintain clarity.
How does "Refactoring UI" recommend using color?
- Ditch hex for HSL: Use HSL color values for more intuitive adjustments based on hue, saturation, and lightness.
- More colors than expected: Prepare a comprehensive palette with multiple shades for greys, primary, and accent colors.
- Define shades upfront: Establish a fixed set of shades to avoid inconsistencies and maintain a cohesive color scheme.
- Accessible design: Ensure color choices meet accessibility standards without compromising aesthetics.
What does "Refactoring UI" suggest about layout and spacing?
- Start with too much space: Begin with excessive white space and reduce it to achieve a clean and balanced design.
- Establish a spacing system: Use a non-linear scale for spacing and sizing to simplify decisions and maintain consistency.
- Don't fill the screen: Avoid using the entire screen width unnecessarily; give elements the space they need.
- Grids are overrated: Use fixed widths for elements when appropriate, rather than relying solely on fluid grid systems.
How does "Refactoring UI" address typography?
- Establish a type scale: Define a type scale with a range of font sizes to ensure consistency and speed up decision-making.
- Avoid em units: Use px or rem units for font sizes to maintain consistency across different contexts.
- Good font selection: Choose fonts with multiple weights and optimize for legibility, especially for UI text.
- Line length and alignment: Keep line lengths between 45-75 characters and align text for readability.
What are some design systems recommended in "Refactoring UI"?
- Color systems: Define a comprehensive color palette with multiple shades for each color to maintain consistency.
- Typography systems: Establish a type scale with specific font sizes and weights to streamline text styling.
- Spacing systems: Use a non-linear scale for spacing and sizing to simplify layout decisions.
- Shadow systems: Define a set of shadows to convey elevation and depth consistently across the UI.
How does "Refactoring UI" suggest creating depth in design?
- Emulate a light source: Use light and shadow to create the illusion of depth, making elements appear raised or inset.
- Shadows for elevation: Use shadows to position elements on a virtual z-axis, enhancing the sense of depth.
- Flat design depth: Even in flat designs, use color and solid shadows to convey depth without relying on gradients or textures.
- Overlap elements: Create layers by overlapping elements, adding a sense of depth and complexity to the design.
What does "Refactoring UI" say about working with images?
- Use high-quality photos: Choose professional or high-quality stock photos to enhance the design.
- Consistent text contrast: Ensure text on images maintains consistent contrast for readability.
- Intended size for images: Use images at their intended size to avoid quality loss and maintain clarity.
- User-uploaded content: Control the shape and size of user-uploaded images to maintain layout integrity.
What are the best quotes from "Refactoring UI" and what do they mean?
- "Start with a feature, not a layout": Focus on designing specific features first to gather necessary information for layout decisions.
- "Hierarchy is everything": Establishing a clear visual hierarchy is crucial for making interfaces intuitive and user-friendly.
- "Limit your choices": Define systems for design elements to reduce decision fatigue and maintain consistency.
- "Accessible doesn’t have to mean ugly": Ensure designs meet accessibility standards without compromising aesthetics.
Reseñas
Refactoring UI ha recibido críticas abrumadoramente positivas, con lectores que destacan su enfoque práctico y conciso sobre el diseño de interfaces. Muchos lo consideran especialmente valioso para desarrolladores que desean mejorar sus habilidades en diseño. El libro es elogiado por sus ejemplos claros, consejos útiles y su capacidad para explicar conceptos complejos de manera sencilla. Los lectores valoran su énfasis en crear diseños consistentes y funcionales, así como en construir sistemas de diseño efectivos. Aunque algunos diseñadores experimentados lo encuentran básico, la mayoría lo considera un recurso esencial para cualquiera que participe en el desarrollo web o de aplicaciones, sin importar su formación en diseño.
Similar Books
