Diseño sostenible y accesible
Consejos, estrategias y buenas prácticas para un diseño corporativo sostenible y accesible
Desde la Unidad de Imagen Corporativa y Comunicación Gráfica del Área de Comunicación, queremos darte consejos útiles que subirán el nivel de tus comunicaciones institucionales.
Además de poner a tu disposición plantillas para que no tengas excusas a la hora de hacer una buena comunicación corporativa. ¡Trabajamos contigo para mejorar cualquier proyecto que tengas en mente!
/ yosedo
Diseño sostenible / Buenas prácticas
Qué consideramos estratégicamente como buenas prácticas para un diseño sostenible en la UPV –y en general para todas las organizaciones públicas–:
1. Diseño gráfico (materiales impresos, folletos, dípticos, etc.)
· Impulsa la comunicación digital: promueve la distribución y divulgación digital
· Minimiza el uso de recursos: menos tinta y papel
· Elige materiales sostenibles: papel 100% reciclado o Mixto y certificado FSC®
· Promueve la reutilización y el reciclaje: materiales fácilmente reutilizados o reciclados elementos gráficos y recursos digitales que puedan ser adaptados para diferentes propósitos
papel certificado FSC® y si es posible con tintas ecológicas
2. Diseño gráfico editorial (manuales, guías, libros, etc.)
· Planificación eficiente: evalúa evitar excedentes innecesarios, impresión bajo demanda
· Gestión de la tipografía: que consuman menos tinta y papel en la impresión
· Diseño modular: que sea posible actualizar y reutilizar secciones
· Uso de tintas y productos químicos sostenibles: impresión con base vegetal y proveedores que cumplan los estándares ambientales
3. Diseño para dispositivos digitales
Web y apps
Optimiza el rendimiento
Diseña interfaces digitales que sean eficientes en el consumo de recursos, como la energía de la batería y el ancho de banda de la red. Minimiza el uso de animaciones o elementos visuales que puedan consumir más recursos de procesamiento.
Diseño adaptable (responsive)
Utiliza interfaces que sean adaptivas. Reduce la necesidad de crear varias webs para cada dispositivo. Las nuevas microwebs son por defecto, un diseño adaptable.
Reducción de elementos innecesarios
Evita el uso excesivo de imágenes o gráficos pesados que puedan afectar el rendimiento y el tiempo de carga de la aplicación o sitio web. Utiliza formatos de imagen optimizados y comprimidos para reducir el tamaño de los archivos. Recomiendo usar formatos como png o webp.
Promueve la interacción sostenible
Diseña interfaces que fomenten comportamientos sostenibles, como la opción de modo oscuro para reducir el consumo de energía en pantallas OLED o la capacidad de desactivar funciones no esenciales que consuman recursos. En nuestro contexto lo que podemos hacer es jugar con elementos con fondos alternativos (que son fondos de un gris claro).
Buenas prácticas para www.upv.es/contenidos/diseño
en las instituciones públicas
Optimiza el rendimiento
Diseña interfaces digitales que sean eficientes en el consumo de recursos, como la energía de la batería y el ancho de banda de la red. Minimiza el uso de animaciones o elementos visuales que puedan consumir más recursos de procesamiento.
Optimiza el rendimiento
Diseña interfaces digitales que sean eficientes en el consumo de recursos, como la energía de la batería y el ancho de banda de la red. Minimiza el uso de animaciones o elementos visuales que puedan consumir más recursos de procesamiento.
Reducción de elementos innecesarios
Evita el uso excesivo de imágenes o gráficos pesados que puedan afectar el rendimiento y el tiempo de carga de la aplicación o sitio web. Utiliza formatos de imagen optimizados y comprimidos para reducir el tamaño de los archivos.
Promueve la interacción sostenible
Diseña interfaces que fomenten comportamientos sostenibles, como la opción de modo oscuro para reducir el consumo de energía en pantallas OLED o la capacidad de desactivar funciones no esenciales que consuman recursos. En nuestro contexto lo que podemos hacer es jugar con elementos con fondos alternativos.
Accesibilidad digital
Lograr que la transformación digital beneficie a todas las personas es un gran reto en cuanto a accesibilidad. No solo se facilita el uso a personas con discapacidades, sino a otros colectivos como personas mayores e incluso jóvenes con menos habilidades digitales, beneficia a todo el mundo.
La accesibilidad digital y web permite que cualquier persona pueda navegar por un sitio web. Cuando una página web está diseñada, desarrollada y editada de acuerdo con estos criterios, todos los usuarios, incluidas las personas con discapacidad, pueden acceder a la información.
Esto incluye el etiquetado de palabras, títulos de páginas, encabezados, gráficos, enlaces, tablas y formularios, que son esenciales para que los dispositivos de tecnología asistida, como los lectores de pantalla automáticos, ayuden a navegar por Internet.
Por ley, la administración pública, las universidades y algunas empresas, como bancos, empresas de electricidad, de agua o servicios de transporte, entre otras, están obligadas a proporcionar su contenido web de forma accesible.
El 28 de junio de 2025 entró en vigor en España la Ley 11/2023, que traspone la directiva europea 2019/882 sobre requisitos de accesibilidad de productos y servicios. Esta norma nos obliga a garantizar la accesibilidad de nuestros canales digitales. Hay muchas pequeñas acciones cotidianas que cualquier persona puede aplicar al crear o difundir contenidos digitales (correo, web, redes, documentos, vídeos…). ¡Infórmate!
La accesibilidad es una forma de comunicar mejor y de construir una universidad más inclusiva y abierta a todas las personas.
La accesibilidad digital debe formar parte de la calidad comunicativa y del compromiso de la UPV con una universidad pública, inclusiva y abierta a todas las personas.
yosedo _Unidad de Imagen · ACOM
IMPORTANTE:
Al incorporar contenido a la web, asegura que cumpla sobradamente con los criterios de accesibilidad de nivel AA, como mínimo para los textos con fondos de color.
Aviso importante:
La ley de accesibilidad es obligatoria para todas las comunicaciones y medios digitales.
Por ley, la administración pública, las universidades y algunas empresas, como bancos, empresas de electricidad, de agua o servicios de transporte, entre otras, están obligadas a proporcionar su contenido web de forma accesible.
Utiliza todos los medios para generar contenido accesible. Haz un uso del color de forma que cumpla la accesibilidad en web y en cualquier medio digital.
Todos los ciudadanos pueden contribuir a la accesibilidad web.
Diseño sostenible
El reto actual para las organizaciones públicas, es cuidar el diseño en términos de sostenibilidad.
©yosedo
Sostenibilidad digital
Algunos datos sobre la actividad digital, las comunicaciones y la sostenibilidad.
Si reducimos y optimizamos archivos mejoramos la eficiencia de nuestras páginas y avanzamos en nuestro compromiso social corporativo. Para reducir bytes y ser más sostenibles, optimiza imágenes a formatos modernos como WebP, comprime archivos multimedia, usa un diseño web minimalista y código limpio para reducir el consumo energético, gestiona la nube para almacenar solo lo necesario, etc. También es clave eliminar archivos duplicados e innecesarios y ser consciente del consumo de datos que suponen tenerlos en algún sistema como nuestro WP o nuestro OneDrive.
Una web también tiene una huella de carbono que reducir, ¡nuestro próximo reto!
Esta página web es más limpia que el 65% de todas las páginas web a nivel mundial, pero conseguiremos bajar nuestra huella de carbono.
“The communications industry could use 20% of all the world’s electricity by 2025.”
Fuente: Climate Home News
“The IT sector already consumes an estimated 7% of global electricity.”
Fuente: Greenpeace
Sostenible e inclusivo
Siempre hablamos de una manera que refleja nuestra marca y valores. Las palabras que elegimos siempre ponen a nuestros usuarios en primer lugar, ayudándolos a comprender mejor nuestra institución.
El tono de la comunicación
· Líneas principales
Seguir estos principios nos ayudará a escribir con identidad.
• Sencillo
Siempre se prefieren las palabras y oraciones simples.
• Humano
Deberíamos hablar con nuestros usuarios de forma cercana y relacionable, siempre es mejor que corporativo y frío.
• Considerado
‘Think about’ piensa siempre en el usuario. ¿Qué es lo más útil? ¿Qué es lo más relevante?
• Contextual
Siempre ten en cuenta el contexto. Ajusta el tono para que coincida con la audiencia a la que te diriges y con el tema sobre el que escribes.
· Gramática
La gramática adecuada promueve la claridad y nos ayuda a hablar con una voz ‘profesional’.
• ‘Voz activa’
– Siempre usa ‘voz activa’ sobre voz pasiva.
[ https://edu.gcfglobal.org/es/crecimiento-profesional/identifica-la-voz-pasiva-y-activa-en-tu-escritura/1/# ]
• Acrónimos
– Siempre deletrear las siglas palabra por palabra la primera vez que las uses.
– Primer uso: Universitat Politècnica de València
– Segundo uso: UPV
– No es necesario un paréntesis, pero puede hacerlo la primera vez para asociarlos (UPV).
• Contracciones
– Añaden un tono amistoso e informal, pero debemos medir el tono para no pasarnos.
• Uso de emojis
– Sé moderado. El emoji ocasional puede ayudar a transmitir emociones y agregar interés visual.
– Usa emojis con buen gusto y cuando la ocasión lo requiera.
• Argot y terminología
– Evita la jerga. Escribe en castellano correcto y sencillo.
– Los términos técnicos siempre deben ir acompañados de una definición clara.
El uso del lenguaje inclusivo
Ten siempre presente el uso del lenguaje inclusivo en cuanto al género. La UPV debe tener la diversidad como una de sus prioridades en las comunicaciones. Sobre todo porque el lenguaje inclusivo ayuda a disminuir los prejuicios, la exclusión, el sexismo, la brecha de género y salarial, etc.
:: Ya en 2018 una encuesta realizada por el Pew Research Center, concluyó que el 25% de los millennials y el 35% de las personas de la generación Z conocen a alguien que prefiere que se utilice un lenguaje de género neutro. [https://www.pewresearch.org](https://www.pewresearch.org/]
El género en el lenguaje
El valenciano y el castellano son idiomas que ofrecen suficientes soluciones a la hora de crear textos no sexistas sin necesidad de utilizar frases farragosas, plagadas de sustantivos en ambos géneros.
Diseñar para web en la UPV
Microwebs UPV en WordPress
Consejos sobre uso de patrones de WP, color e imágenes.
Para las nuevas microwebs hemos preparado unos bloques-secciones prediseñadas. La construcción es sencilla, similar al estilo de construcción de Lego.
Puedes añadir bloques de texto, noticias, banner de imágenes, galería, vídeos, audio, columnas, espacios…
Cada bloque tiene un comportamiento adaptable (responsive). Y una combinación de colores accesible. Mantén siempre la accesibilidad en cualquier combinación de color que uses.
Diseñar para web en la UPV
Microwebs UPV en WordPress
Accesibilidad/Usabilidad
Como institución pública estamos obligados por ley a ser accesibles. Como mínimo debemos de cumplir la AA de accesibilidad. Puedes consultar consejos sobre estructura web, arquitectura de información, pautas para AX/UX y el tono de la comunicación y el uso del lenguaje inclusivo en:
Consejos sobre uso de patrones de WP, color e imágenes.
Para las nuevas Microwebs hemos preparado unos bloques-secciones prewww.upv.es/contenidos/diseñadas. La construcción es sencilla, similar al estilo de construcción de Lego.
Puedes añadir bloques de texto, noticias, banner de imágenes, galería, vídeos, audio, columnas, espacios…
Cada bloque tiene un comportamiento responsive. Y una combinación de colores accesible. Mantén siempre la accesibilidad en cualquier combinación de color que uses.
Los patrones prediseñados de WP
Hemos diseñado una batería de patrones fáciles de usar para que solo tengas que añadir tus contenidos.
Titular 2
Estas imágenes están desarrolladas por inteligencia artificial. Si las comparas verás partes de la imagen que se usan en las otras. Y sobre todo los acabados de partes del cuerpo humano, como las manos, no son muy acertados. Por el momento, no usaremos imágenes narrativas de IA. Además, somos una universidad tecnológica y por supuesto disponemos de nuestro propio repositorio fotográfico.
Tutorial
Más abajo tienes un PDF y videos tutoriales, antes de empezar tu web estudia el tutorial para decidir qué elementos necesitas.
Usar los patrones
Esta sección ya está prediseñada, con lo que solo tienes que concentrarte en gestionar tu información y volcar tu contenido. Lo más importante para empezar es saber qué quieres poner y tener los textos/contenidos preparados, no te focalices en las imágenes, lo importante son los contenidos (el texto) para saber qué tipo de web necesitamos y qué módulos tendremos que usar según ese contenido [Arquitectura de la información].
Y recuerda que en diseño -MENOS ES MÁS-
Diseño sostenible
Un reto actual para las organizaciones públicas es cuidar el www.upv.es/contenidos/diseño en términos de sostenibilidad.
Aprender cómo hacer mi web en WP – ASIC
Material para aprendizaje en el desarrollo de las microwebs en WordPress
Sección de aprendizaje en el panel de WP
El ASIC ha preparado una guía con tutoriales y vídeos para que puedas familiarizarte con las microwebs y su funcionamiento interno, gestionadas a través de la herramienta WordPress. Está disponible en el propio menú de WP.
Un canal con Vídeo-tutoriales
Canal microwebs (MWP) UPV. Para más ayuda, puedes consultar los tutoriales del canal de WordPress en UPV Media.
Tutorial en PDF para microwebs con WP / UPV
Color digital y accesible
Te recomendamos que no cambies el patrón de color de los textos y bloques prediseñados. Si realmente necesitas destacar algo con colores comprueba siempre que la combinación que uses es accesible.
CC: yosedo / Yolanda Segura Domingo · Unidad de Imagen Corporativa y Comunicación Gráfica · ACOM