Cómo crear un marco de diseño efectivo (incluye un marco de interfaz de usuario de Sketch gratuito)
Publicado: 2022-03-11Si ha estado en el mundo del diseño por un tiempo, probablemente haya escuchado estos términos: marco de diseño, marco de interfaz de usuario, kit de interfaz de usuario o biblioteca de patrones. Todos se refieren a lo mismo: un sistema de estándares de diseño, plantillas, patrones de interfaz de usuario y componentes que se utilizan en todo un producto y sirven a su lenguaje de diseño.
Si no ha creado un marco de diseño antes, comenzar uno puede parecer abrumador y llevar mucho tiempo, pero acelerará su trabajo de diseño y lo hará más eficiente en general.
Describamos los problemas principales que resuelve un marco de diseño, por qué necesita uno y los componentes que necesitará crear al construir uno. Encontrará un marco de interfaz de usuario de Sketch descargable y gratuito más adelante en el artículo que le permite crear su propio marco de diseño.
¿Qué es un marco de diseño?
Cada diseño de interfaz de usuario comienza con una mesa de trabajo vacía, y cada diseñador tiene un proceso que utiliza para transformar ese lienzo en blanco en un producto completamente funcional. Este proceso incluye todos los pequeños componentes de diseño creados y los pasos que sigue el diseñador para construir un todo cohesivo, desde colores hasta botones y todo lo demás.
A menudo, este trabajo es repetitivo y se puede consolidar y hacer más eficiente mediante la creación de un sistema de patrones y componentes interrelacionados. En otras palabras, un marco de diseño .
Los marcos de diseño resuelven varios problemas, que incluyen:
- Eliminación de inconsistencias en el diseño del producto.
- Aumentar la colaboración, la eficiencia y la comunicación entre los equipos de diseño y producto.
- Hacer que las actualizaciones de diseño más adelante en el proceso de diseño sean menos frustrantes.
El primer problema: inconsistencia en el producto
La consistencia transforma un buen diseño en un gran diseño. La consistencia mejora la UX, la usabilidad general y la eficiencia con la que los usuarios pueden usar los productos digitales. Ya sea un sitio web pequeño, una aplicación o un producto SaaS grande, las inconsistencias en el diseño comprometen la apariencia, la sensación, la credibilidad y la experiencia del usuario del producto.
Las inconsistencias a menudo ocurren cuando un equipo o un diseñador hace las cosas demasiado rápido o hace cambios sobre la marcha. A veces, un diseñador responde a un cliente o parte interesada que solicita algo diferente mostrándoles rápidamente cómo se verían esos cambios. De repente, el equipo de diseño se encuentra con cuatro tonos diferentes de verde y nadie está seguro de cuál es el color principal del botón.
Los marcos de diseño resuelven este problema al establecer estándares consistentes.
El segundo problema: brechas de colaboración y comunicación
A menudo, durante el proceso de desarrollo, cuando hay varios miembros del equipo involucrados y muchos trabajan en el diseño en diferentes puntos del proceso, puede volverse confuso si no hay un conjunto de estándares para guiar al equipo.
Un marco de diseño impulsa la colaboración y la eficiencia al agilizar el proceso de comunicación y proporcionar estándares y dirección claros. No pierda más tiempo corriendo de un lado a otro tratando de averiguar qué color o fuente es la correcta para usar.
El tercer problema: cambios de diseño en etapa tardía
¿Cuántas veces los diseñadores tienen que hacer un solo cambio de color en el archivo de diseño con 120 mesas de trabajo ya desarrolladas? ¿Cuántas veces es necesario cambiar un icono que forma parte de 200 componentes?
El cambio es inevitable a lo largo del proceso de diseño, es cómo mejora el producto, pero a menudo ocurre más tarde de lo que les gustaría a los diseñadores. Un marco de diseño hace que esos cambios de última etapa sean mucho menos dolorosos, porque se basa en un sistema de componentes orientados a objetos. Cámbielo una vez y se extenderá por todo el diseño.
Cómo crear un marco de diseño
Ahora que sabemos qué es un marco de diseño y los problemas que resuelve, hablemos sobre cómo crear uno (y qué hay en la descarga del kit de interfaz de usuario de Sketch que se proporciona más adelante en este artículo).
El marco de diseño utilizado para este artículo es un solo archivo de Sketch que se presenta utilizando una jerarquía específica de componentes, conocidos en Sketch como "símbolos". Estos símbolos facilitan la implementación de cambios en todo el archivo con un solo clic. Un cambio en el componente "maestro", el "símbolo", se refleja instantáneamente en todas las demás instancias.
Jerarquía del marco de diseño
Para crear un marco de diseño que funcione bien, comience configurando una jerarquía visual sólida. Diseñe primero los componentes más omnipresentes, como el color y la tipografía. Luego trabaje con los más pequeños, como botones y componentes de entrada. Piense en ello como construir una casa: primero construya los cimientos y luego agregue las otras piezas a medida que avanza el proyecto.
Color
El color es el elemento más importante en la jerarquía de un marco de diseño de interfaz de usuario: cada componente de un diseño usa color. El color provoca fuertes reacciones y emociones en las personas y establece el aspecto general, la sensación y el tono de un producto.
Una buena práctica es dividir los colores en grupos:
- Los colores primarios son los principales colores de la marca y se utilizan normalmente para crear el esquema de color general de un proyecto y para componentes cruciales como los botones.
- Los colores secundarios complementan la paleta primaria; a menudo son diferentes tonos, saturaciones o matices de los colores primarios. La escala de grises se usa comúnmente para tipografía o fondos. En algún lugar entre cinco y ocho niveles de gris debería ser suficiente.
- Los colores de retroalimentación del sistema son un grupo importante que los diseñadores suelen olvidar. Estos colores muestran mensajes del sistema, incluidas alertas, advertencias y notificaciones.
Grid: el espacio de diseño
Una vez que se seleccionan los colores, el siguiente paso es configurar una cuadrícula. Una cuadrícula mantiene todos los demás componentes de la página en el lugar y orden correctos. Este es el espacio de diseño general.
Hay dos tipos de rejillas: verticales y horizontales .
La cuadrícula vertical es la que más se usa y mantiene todo alineado horizontalmente. Hay muchos sistemas de cuadrícula populares como Bootstrap o la cuadrícula anterior de 960px.
Una cuadrícula horizontal no es tan común. Una cuadrícula horizontal se utiliza para la tipografía. Crea ritmo vertical para los párrafos y se ve comúnmente en los periódicos.
Modificadores: reglas estilísticas
Además del color y la cuadrícula, hay un componente más que ocupa un lugar destacado en la jerarquía del marco de diseño: los modificadores. No se pueden usar como componentes autónomos, se usan para modificar o diseñar otros.
Este grupo aporta estilo a un proyecto e incluye componentes responsables de la estética, como formas o sombras ; cambiarlos individualmente en las últimas fases del proyecto puede ser engorroso.
Trate los modificadores como parámetros para todos los bloques de construcción subsiguientes. Cree símbolos de Sketch a partir de tres formas diferentes: rectángulo, rectángulo redondeado y círculo. Utilice estas formas para crear todos los componentes de una interfaz de usuario, incluidos botones, componentes de entrada, campos de formulario, etc. y elementos de fondo.
Esta técnica permite a los diseñadores centrarse más en la experiencia de usuario que en la apariencia de los componentes de la interfaz de usuario. También facilita volver a la forma básica, cambiar su estilo (por ejemplo, el radio de la esquina) y todo lo conectado se actualizará automáticamente.
Tipografía: el contenido
La tipografía es el último componente importante del marco de diseño. Se puede dividir en dos grupos: copia de página estática, como encabezados y párrafos; y copia de componentes interactivos, como botones, navegación o campos de entrada.
Diseña el estilo y tamaño de todos los encabezados (H1, H2, H3, etc.) y párrafos. La copia de página estática no suele tener muchas variaciones estilísticas (color o peso). La única variación, en relación con el estilo de copia de página estática, es si está sobre un fondo claro u oscuro. Por lo tanto, es mejor crear dos conjuntos de colores para asegurarse de que la copia de página estática funcione en ambos.
El texto que aparece en los componentes interactivos, como botones o mensajes de retroalimentación del sistema, puede tener múltiples variaciones. Por ejemplo, los mensajes de retroalimentación del sistema podrían mostrarse en cuatro colores de fondo diferentes según el tipo de mensaje (advertencia, error, éxito, etc.); las etiquetas de los botones también pueden tener diferentes fondos.
Incluir a este grupo en el marco de diseño es útil al pensar globalmente sobre la tipografía. En primer lugar, cree el texto de la etiqueta del botón normal y, en segundo lugar, cree sus variaciones; esto ayudará a evitar terminar con demasiados tamaños de fuente. Al crear nuevos componentes de interfaz de usuario en el marco, siempre verifique si hay un estilo de tipografía existente que se ajuste.
Iconos
Hay dos grupos de iconos en un sistema de diseño: iconos informativos y de interfaz de usuario. El primer grupo suele formar parte de un sistema de ilustración y no se utiliza para ningún componente de interacción de la interfaz de usuario (como los botones). El segundo grupo, los íconos de la interfaz de usuario, agregan significado a componentes más complejos: botones, etiquetas o tablas, mientras ocupan una cantidad muy pequeña de espacio. Los íconos en la interfaz de usuario también se pueden usar como activadores de funciones como "editar", "copiar", "descargar" y "eliminar".
Comience con íconos simples utilizados para las interacciones de la interfaz de usuario, como flechas, "agregar" (+) o "cerrar" (x). Una buena práctica es diseñarlos en diferentes tamaños (12px, 16px, 24px 32px).
Componentes
Botones
Los botones son, sin duda, uno de los componentes más importantes en el diseño de la interfaz de usuario y, a lo largo de los años, han sufrido muchos cambios a medida que las tendencias de diseño han ido y venido.
Al diseñar botones, asegúrese de diseñar sus "estados" individuales. Por regla general, un botón tiene varios estados y proporciona información visual a los usuarios para indicar el estado actual (inactivo, flotante, presionado, deshabilitado, activo, etc.).
Hay dos formas de hacer esto: la primera es diseñar la apariencia de los botones por separado para cada estado (regular, activo, flotante y presionado). Esta solución puede llevar mucho tiempo, pero posteriormente ofrece mucha flexibilidad. (Este método se usó en el marco de interfaz de usuario gratuito de Sketch que se incluye a continuación).
La segunda forma es diseñar todos los estados basados en el inicial. Por ejemplo, cree un símbolo de Sketch que cambiará el color, la saturación o el brillo de cada estado.
Para hacer esto, coloque el símbolo como una superposición del botón con uno de los modos de fusión de Sketch: matiz, saturación o superposición. Use un rectángulo negro con modo de fusión de tonos sobre el botón normal para cambiar su saturación. Cambiar la opacidad de la superposición más tarde lo convierte en un botón más o menos saturado.
Componentes de entrada
Las entradas permiten al usuario comunicarse con la aplicación y cargar datos. El uso de componentes como campos de entrada junto con botones permite la creación de una aplicación web simple. Al igual que con los botones, es mejor crear componentes de entrada con diferentes estados. Depende del marco de diseño, pero como mínimo, considere crear estados vacíos, llenos y de error.
Componentes complejos
En esta etapa, el marco de diseño podría considerarse completo porque tiene todo lo necesario para crear un producto funcional. Sin embargo, a menudo vale la pena dedicar más tiempo a crear componentes de interfaz de usuario más complejos para el marco de la interfaz de usuario, como tarjetas, tablas, selectores de fechas, gráficos y formularios.
Secciones
En esta etapa, el marco de diseño se puede desarrollar aún más mediante la creación de las secciones más comunes de aplicaciones o sitios web. Al diseñar cosas como navegación, encabezados, una sección "acerca de nosotros" y galerías, un diseñador puede ahorrar tiempo en las fases posteriores de un proyecto. La creación de varias variaciones de diferentes secciones del producto hará que sea más fácil adaptarse a diferentes proyectos en el futuro.
Prácticas recomendadas del marco de diseño
Probar constantemente el marco de diseño
Las pruebas deben incluirse en cualquier proceso de diseño o desarrollo. Evite errores y componentes faltantes creando pequeñas piezas de diseño y "probándolas". Por ejemplo, verifique si cambiar un componente creado al principio también cambia un componente agregado recientemente.
Crear componentes de interfaz de usuario simples
Mantenga los componentes simples mientras piensa en tantos casos de uso de diseño como sea posible, para que en el futuro, se pueda cubrir cualquier estilo. Lo mejor es crear componentes de interfaz de usuario con formas simples, manteniéndolos lo suficientemente flexibles para adaptarse fácilmente a cualquier proyecto.
No te enfoques en un solo estilo
Un marco de diseño debe ser universal, por lo que en lugar de centrarse en un estilo específico, céntrese en los componentes que se pueden usar para crear un estilo.
Cree su propio marco de diseño
En su próximo proyecto, tómese el tiempo al principio para construir cuidadosamente un marco de diseño. Descubrirá que mejora el proceso de diseño general, aumenta la eficiencia y mejora la consistencia del diseño del producto, lo que mejora la facilidad de uso. Ahorrará tiempo, comunicará ideas de diseño de manera más efectiva y hará felices a los clientes y partes interesadas cuando esas ideas cobren vida en solo unos segundos en las mesas de trabajo de 120 Sketch.
¿Está listo para comenzar su propio marco de diseño?
Descargue el archivo Sketch aquí. Se incluyen instrucciones sobre cómo usarlo.
Sistemas de diseño inspiradores y marcos de interfaz de usuario
Una de las mejores maneras de comprender más acerca de los marcos de diseño es examinar cómo los usan las empresas grandes y establecidas. Siga este tipo de empresas y conozca su enfoque.
Material Design de Google: actualmente uno de los marcos de diseño más populares del mundo. Descubra cómo Google superpone todo el proceso de diseño y construye una útil jerarquía de componentes.
Lenguaje de diseño de IBM: IBM comparte todo su proceso de diseño, incluida una explicación detallada de cada detalle. También comparten muchos recursos de su lenguaje de diseño, desde íconos simples hasta una biblioteca de animación de interfaz de usuario.
Atlassian: otro gran recurso de aprendizaje. Su guía de estilo de productos es un excelente sistema de diseño para estudiar. Comparten su paquete Web GUI, un archivo Sketch con toneladas de componentes y conceptos.
• • •
Lectura adicional en el blog de diseño de Toptal:
- eCommerce UX: una descripción general de las mejores prácticas (con infografía)
- La importancia del diseño centrado en el ser humano en el diseño de productos
- Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
- Principios heurísticos para interfaces móviles
- Diseño anticipatorio: cómo crear experiencias de usuario mágicas