Software de diseño que permite la reutilización de elementos comunes, como el principio DRY de programación

A menudo, cuando estoy diseñando para la web (ya sean simulacros o extensiones completas de sitios web), tengo muchos elementos que se repiten a lo largo de mi documento. Busco seguir la filosofía Don't Repeat Yourself ( DRY ).

Un caso: estoy diseñando una maqueta para ilustrar el camino del usuario a través de un sitio web. Hago esto comenzando en una página de tabula rasa que incluye el estado predeterminado del sitio web. Luego, copio esta página y la modifico para que se ajuste al siguiente paso de la interacción del usuario. Luego, cambiará un pequeño aspecto de la página (el color del encabezado, por ejemplo), y me veré obligado a realizar ese cambio en cada paso de mi simulación.

Entonces, ¿hay algún software que me permita hacer secciones de mi diseño una vez (encabezado, pie de página, barra lateral, un conjunto de botones, etc.), reutilizarlos y luego hacer cambios en un solo lugar si es necesario?

Esto es algo parecido a los parciales de Rails o Microsoft MVC si está familiarizado, pero para el software de diseño.

¿Ha excluido/considerado Fairworks y Photoshop (usando objetos inteligentes o composiciones de capas)?
No conozco ningún acrónimo o eslogan en el mundo del diseño que sea equivalente a DRY, pero el concepto es familiar, bajo el encabezado general de mejorar la productividad con plantillas, activos reutilizables y acciones registradas. Puede encontrar cosas útiles buscando en la productividad del diseño. También será muy familiar para cualquier diseñador que haga mucha codificación CSS...

Respuestas (5)

La mayoría del software Creative Suite/CC de Adobe tiene herramientas para cosas como esta. He aquí algunos de los principales:

  • Todas las aplicaciones

    • Acciones , que son como macros grabables: guardan un conjunto de acciones y luego las ejecutan con un botón.
  • photoshop:

    • Objetos inteligentes (paquetes de capas y datos vectoriales que se pueden reutilizar)
    • Capas de ajuste (capas donde el propósito es alterar las capas debajo de ellas sin dejar de ser independientes de las capas debajo de ellas, útiles para su reutilización)
    • Estilos básicos de párrafo y carácter para texto
  • Ilustrador:

    • Símbolos (que se pueden guardar como bibliotecas de símbolos y cargar en documentos)
    • Colocación de documentos externos ( File > place, coloca una referencia a un documento externo para que varios documentos puedan compartir un elemento)
    • Estilos gráficos (permite guardar elementos de la apariencia de un elemento, aplicarlos a muchos elementos y actualizarlos a la vez) y estilos de carácter y párrafo para texto
  • InDesign:

    • Páginas maestras (permite que las páginas hereden los mismos elementos; las páginas maestras pueden heredar de otras páginas maestras)
    • Colocación de documentos externos (como Illustrator, pero mucho más utilizado)
    • Estilos para la mayoría de tipos de elementos: estilos de párrafo muy sofisticados (incluidas las reglas GREP que aplican estilos de carácter automáticamente), estilos de carácter, estilos de objeto, estilos de tabla, estilos de celda de tabla...

Las personas a veces usan InDesign para maquetas de sitios web, aunque está diseñado para documentos impresos, debido a las funciones anteriores, que son útiles para crear plantillas y evitar repeticiones. Más información: ¿ Qué software es mejor para el diseño de GUI?

Adobe Fireworks también tenía/tiene algunas características útiles similares, pero Adobe nunca se tomó en serio Fireworks, tiene errores y recientemente anunciaron que lo eliminarán y lo reemplazarán con nada más que vagas pelusas de marketing .

Las herramientas de creación de prototipos interactivos como Axure están diseñadas específicamente para esto.

Si hablamos de diseño web, la creación de prototipos en HTML es mi método preferido, ya que se vuelve muy fácil reutilizar elementos.

Como han dicho otros, muchos productos de Adobe también ofrecen esta capacidad desde la propia herramienta de diseño.

Hay software disponible específicamente para maquetas de interfaz de usuario. Visio tiene un conjunto de gráficos, Balsamiq Mockup , Microsoft Expression Blend (aunque eso es un poco avanzado) y un rápido Bing/Google para UI Mockup Tools produce una gran cantidad de resultados, muchos de los cuales son gratuitos.

Parece que Sketch 3 tiene esta función. Lo llaman Elementos Reutilizables .

Demostración: https://www.youtube.com/watch?v=DLQ1BAvJYNE


También para Sketch, pero en la versión 2 conocí el complemento Symbols, que tiene una funcionalidad similar, pero de hecho no tiene GUI para eso

Sitio: https://github.com/tisho/sketch-plugins/tree/master/Symbols

Es posible que esté contento con las composiciones de capas en Photoshop, pero puede ser bastante frustrante a menos que organice meticulosamente sus capas. A menos que tenga una metodología muy particular, puede ser confuso volver a las composiciones que ha diseñado de esta manera.