Categorías

Plantilla de componentes de diseño

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

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

Usar plantilla
Plantilla de componentes de diseño

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 usar la plantilla Componente 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
Atlassian

Tony Starr

Diseñador jefe de Contenidos @ Atlassian


Tony es diseñador jefe de Contenidos en Atlassian. Es un redactor de contenidos técnicos y multidisciplinares a quien le encanta establecer estándares y traspasar las fronteras de los ámbitos de aplicación de las directrices de creación de contenidos.

  • Content design glossary template

    Atlassian

    Content design glossary

    Teach writers how to use product names, industry terms, and other content with an A-Z guide.

    Usar plantilla Más información
  • Customer interview report template

    Atlassian

    Informe de entrevistas con los clientes

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

    Usar plantilla Más información
  • Design decision template

    Atlassian

    Design decision

    Use our design decision template to review design options, present design examples, and log design decisions. 

    Usar plantilla Más información