Plantilla Componente de diseño

de Tony Starr, Diseñador jefe de Contenidos @ Atlassian

Crea una biblioteca de componentes de diseño documentados con esmero

FUNCIONES CLAVE
Documentación
Requisitos
Centro de ayuda

Categorías

Diseño
Plantilla Página

Mantenerse al tanto de todos los componentes que usa tu equipo en sus diseños puede ser una tarea compleja, sobre todo cuando tu equipo está creciendo. La plantilla de componentes de diseño te ayuda a documentar todos y cada uno de ellos, desde cuestiones básicas tales como la función y la anatomía del componente en cuestión hasta los pormenores relativos a su apariencia y comportamiento en diversos contextos. Existe incluso una sección de instrucciones adicionales, donde puedes explicar las reglas específicas del componente relativas al contenido, la accesibilidad y los dispositivos móviles, entre otras cuestiones. ¡Podrás crear desde cero un biblioteca entera de componentes!

Cómo utilizar la plantilla de componentes de diseño

Paso 1. Empieza por los datos básicos

Antes de ponerte manos a la obra con las especificaciones de un componente, debes definir los aspectos básicos. Para empezar, rellena las filas de Componentes básicos: dale a tu componente un nombre, explica lo que hace y carga un diagrama de la anatomía con rótulos numerados. Utiliza estos rótulos para crear una clave y define todos los elementos de la anatomía del componente. El objetivo de esta sección es brindar a las personas que usan el componente una idea de cómo encaja todo en él.

Paso 2. Dispón las especificaciones

Llegados a este punto, empezarás a ponerte con las distintas formas de usar un componente dentro de tus diseños para una función más general. Explica para qué sirve el componente, incluido su objetivo en tu diseño en conjunto, y luego pasa a su apariencia y comportamiento en diversos contextos. Utiliza el código activo del repositorio de tu sistema de diseño para mostrar distintas variaciones. Por último, explica el estilo visual del componente. Asegúrate de incluir ejemplos de lo que hay que hacer y de lo que no se debe hacer.

Paso 3. Documenta los consejos, los trucos y las prácticas recomendadas

Cada componente tiene sus peculiaridades. Regístralas en Instrucciones adicionales. Empieza por el contenido: ¿presenta este componente alguna regla de puntuación específica? ¿Y etiquetas estándares? Pon todo esto por escrito, junto con cualquier inquietud específica del componente en materia de accesibilidad y consejos para aplicarlo en entornos móviles. Si hay prácticas recomendadas estándares del sector sobre el uso del componente, plásmalas también. Por último, añade enlaces a todos los componentes o patrones relacionados.

Paso 3. Documenta los consejos, los trucos y las prácticas recomendadas

Related Templates

glosario sobre diseño de contenidos

glosario sobre diseño de contenidos

Enseña a los redactores a usar los nombres de los productos, los términos del sector y otro contenido con una guía completa.

de Atlassian
Más información
estrategia de contenidos

estrategia de contenidos

Traza tu estrategia de contenidos y organiza tu calendario editorial

de Atlassian
Más información
glosario sobre diseño de contenidos

glosario sobre diseño de contenidos

Enseña a los redactores a usar los nombres de los productos, los términos del sector y otro contenido con una guía completa.

de Atlassian
Más información
estrategia de contenidos

estrategia de contenidos

Traza tu estrategia de contenidos y organiza tu calendario editorial

de Atlassian
Más información
Informe de entrevistas con los clientes

Informe de entrevistas con los clientes

Convierte las entrevistas a los clientes en conocimiento con el informe de entrevistas con los clientes.

de Atlassian
Más información