Categorías
Diseño Profesionales web

Imagen institucional del Gobierno de España. Mejoras necesarias.

Dramatización lúdica

La introducción de este artículo es una dramatización lúdica inspirada vagamente en Twilight Struggle.

Junio del año 2018.

Pedro Sánchez mira su mano de cartas y decide jugar el evento «Moción de censura» contra su contrincante Mariano Rajoy. Suma sus puntos de aliados, y compara su valor con los aliados del rival. Si saca un cinco o un seis, gana la moción de censura. Tira el dado, parece que va a salir un tres, pero en el último momento, sale un seis.

Como consecuencia, gana la moción de censura, dos puntos de victoria y el gobierno de la nación. Tendrá que asumir el Presupuesto del Estado, y tal vez el rival tenga una carta de evento que devuelva el control político. La gestión de las manos de cartas y el azar decidirá el resultado de la partida.

Fin de la prescindible dramatización.

Cambios, coste y resultado final de un cambio de nomenclatura ministerial

Con cada cambio de Gobierno, hay cambios ministeriales: de ministros y ministerios (nuevos, que desaparecen y que cambian de nombre).

Otra consecuencia adicional que se vive muy intensamente en los ministerios ya que un cambio de nombre implica la sustitución de textos e imágenes en muchos lugares:

  • Los cambios «digitales» van desde la firma en los correos electrónicos, literales en incontables páginas, las plantilla en los documentos de ofimática y los nuevos imagotipos en las diferentes webs públicas y privadas y otras externas pero que están obligadas a incluir el imagotipo.
  • Los cambios «físicos» incluyen señales, carteles, tarjetas de visita, trípticos, pegatinas, pendrives, felpudos, e incluso letras en metal fundido. Por decir algos ejemplos posibles.

¿Cuándo tienen que estar esos cambios? Lo antes posible.

¿Durante cuánto tiempo serán válidos? Depende: Hay nombres de Ministerios, como los de Justicia o el de Defensa, que suelen ser inmutables. Unos ministerios cambian cada legislatura, y otros tienen una duración efímera de tan solo una legislatura.

Como os podéis imaginar, todos estos cambios tienen un coste, ya sea en horas de trabajo, o en material. Hay cambios que se pueden realizar con relativa facilidad ya que su coste en tiempo-dinero-esfuerzo es residual. Otros, por diversos motivos, pueden eternizarse en una lista de tareas pendientes durante mucho tiempo. Con suerte, lo que hace dos etapas ministeriales era correcto, tal vez vuelva a serlo en una o dos legislaturas.

Hablando sólo de imágenes: Sobra decir que lo habitual es tener el logo, isotipo o imagotipo de cualquier entidad en diferentes tamaños repartidos por infinidad de sitios. Si se tiene un buen original en formato vectorial, puede ser sencillo obtener las diferentes imágenes bitmap en los tamaños que se necesiten (efecto pixel perfect aparte). La otra opción es redimensionar una imagen bitmap (jpg, gif, png) de incierto origen y hacer un apaño rápido con un programa de edición gráfica como el paint, que para eso está en todos los ordenadores con Windows.

Si se hace bien (imagen vectorial, exportar a diferentes tamaños, usar el timpo de fichero adecuado, seguir las normas de imagen institucional en el caso del Gobierno de España), estará bien durante una temporada (hasta el próximo cambio de gobierno). Si no es así, bueno. Nos lo imaginamos todos.

Un inciso, me ha tocado vivir desde dentro dos cambios de nombres de ministerios.

Imagen Institucional del Gobierno de España

En España, la imagen institucional se empieza a regular en el año 1999 (Real Decreto 1465/1999, del 17 de septiembre), pocos días después se aprueba el primer Manual de la Administración General del estado (Orden del 27 de septiembre de 1999).

Desde entonces, ha habido revisiones , que paso por alto, pero los últimos cambios a día de hoy son del año 2017 (Resolución de 3 de abril de 2017, de la Secretaría de Estado de Función Pública), en el que se actualiza el Manual de Imagen Institucional, en su presente denominación. Con respecto a los contenidos, se actualiza además con los cambios ministeriales.

Toda la documentación de la Imagen Institucional, está alojada en https://imagen.funciona.es. ¿Y qué característica tiene el dominio? Que sólo es accesible a través de una red interna de las administraciones públicas, SARA.

La Red SARA (Sistemas de Aplicaciones y Redes para las Administraciones) es un conjunto de infraestructuras de comunicaciones y servicios básicos que conecta las redes de las Administraciones Públicas Españolas e Instituciones Europeas facilitando el intercambio de información y el acceso a los servicios.

Red SARA

Dentro de https://imagen.funciona.es (accesible sólo desde la red SARA), están alojados los siguientes recursos entre otros:

  • Manual de Imagen Institucional, (aquí puedes ver la portada). Se trata de un documento en formato pdf de 146 páginas sobre la imagen institucional (escudo, fuente, colores, dimensiones, imagotipos ministeriales), normativa para material impreso, publicaciones, señalización, etcétera.
  • Imágenes en formato vectorial (fh11 y ai) y mapa de imágenes en dos tamaños (jpg y gif) del Escudo de España, y los imagotipos de los diferentes ministerios. Me sorprende que todavía se use el formato de Freehand 11 (la última versión del programa es del año 2004, hace 14 años), y que no esté disponible en formato svg (lo que permitiría utilizarlos sin problemas en inkscape, el programa de software libre de edición de imágenes vectoriales).

Algunos aspectos concretos de la Imagen Institucional del Gobierno de España

Un elemento básico de la Imagen Institucional, es el escudo. La descripción oficial está publicada en la Ley 33/1981 del 5 de Octubre. Cito, porque me parece un texto hermoso, aunque con un complejo vocabulario heráldico:

Artículo primero

El Escudo de España es cuartelado y entado en punta. En el primer cuartel, de gules o rojo, un castillo de oro, almenado, aclarado de azur o azul y mazonado de sable o negro. En el segundo, de plata, un león rampante, de púrpura, linguado, uñado, armado de gules o rojo y coronado de oro. En el tercero, de oro, cuatro palos, de gules o rojo. En el cuarto, de gules o rojo, una cadena de oro, puesta en cruz, aspa y orla, cargada en el centro de una esmeralda de su color. Entado de plata, una granada al natural, rajada de gules o rojo, tallada y hojada de dos hojas, de sinople o verde.

Acompañado de dos columnas, de plata, con base y capitel, de oro, sobre ondas de azur o azul y plata, superada de corona imperial, la diestra, y de una corona real, la siniestra, ambas de oro, y rodeando las columnas, una cinta de gules o rojo, cargada de letras de oro, en la diestra «Plus» y en la siniestra «Ultra».

Al timbre, corona real, cerrada, que es un círculo de oro, engastado de piedras preciosas, compuesto de ocho florones de hojas de acanto, visibles cinco, interpoladas de perlas, y de cuyas hojas salen sendas diademas sumadas de perlas, que convergen en un mundo de azur o azul, con el semimeridiano y el ecuador de oro, sumado de cruz de oro. La corona, forrada de gules o rojo.

Artículo segundo

El Escudo de España, tal como se describe en el artículo anterior, lleva escusón de azur o azul, tres lises de oro, puestas dos y una, la bordura lisa, de gules o rojo, propio de la dinastía reinante.

BOE: Ley 33/1981, de 5 de octubre, del Escudo de España.

Hay una interesante evolución histórica del Escudo de España en la wikipedia. Los cuatro cuarteles hacen referencia a los reinos de Castilla, León, Aragón, Navarra además del reino de Granada en la parte inferior. En el centro las tres flores de lis que se corresponde a la dinastía de Borbón-Anjou. Las dos columnas son las de Hércules, y tienen sobre su capitel la corona del Sacro Imperio y la corona española. Flipante.

Imagotipos ministeriales

Los imagotipos del Gobierno y los Ministerios en la web (puedes encontrarlos todos en Wikipedia: Ministerios de España), incluyen una columna con parte de la bandera de la Unión Europea (con tres estrellas), otra barra con la bandera de España, el escudo, el texto Gobierno de España (con la fuente Gill Sans Regular, de origen británico), una delgada columna de separación y el nombre del ministerio en cuestión (en la misma fuente Gill Sans Regular, pero un punto menor). Hay dos unidades básicas, que sirven para definir los tamaños y separación de los diferentes elementos y son:

  • El ancho del escudo, ya que un cuarto de esa medida, se utiliza para separar horizontal (a la izquierda) y verticalmente el escudo con la banda envolvente.
  • La altura de la fuente del texto «Gobierno de España», siendo el ancho del texto, la anchura del escudo. El doble de esa medida, se utiliza en el ancho de la columna de las banderas de Europa y España, la separación entre el escudo y el texto «Gobierno de España», y de separación del texto Gobierno de España y el texto con la denominación del ministerio de la delgada columna amarilla que los separa.

Si no te has enterado del todo, tal vez la siguiente imagen te ayude (hay un enlace para ver la imagen a tamaño completo):

Medidas usadas en la imagen institucional de los Ministerios de España

Un poco más de información: a continuación dos tablas, una con los colores oficiales del escudo y otra con los de los imagotipos.

Tabla con los colores institucionales del Gobierno de España
Color Denominación Pantone RGB numérico RBG hexadecimal
Amarillo envolvente Pantone 116 rgb(255,219,0) #FFDB00
Azul Europa Pantone Reflex Blue rgb(0,51,153) #003399
Amarillo Europa Pantone Yellow rgb(255,204,0) #FFCC00
Rojo Bandera rgb(173,21,25) #AD1519
Gualda Bandera rgb(250,189,0) #FABD00
Amarillo separador Pantone 116 rgb(245,227,38) #F5E326
Tabla con los colores institucionales del Escudo de España
Color Denominación Pantone RGB numérico RBG hexadecimal
Negro rgb(0,0,0) #000000
Rojo Pantone 186 rgb(181,0,39) #B50027
Plata Pantone 887 rgb(178,178,178) #B2B2B2
Oro Pantone 872 rgb(159,126,0) #9F7E00
Verde Pantone 3415 rgb(0,111,70) #006F46
Azul Pantone 2935 rgb(0,68,173) #0044AD
Púrpura Pantone 218 rgb(216,90,174) #DB5AAE
Granada Pantone 1345 rgb(243,203,126) #F3CB7E

Observación: no siempre se utilizan los colores correctos. Sugiero el ejercicio de ver todas las páginas de los ministerios y comparar los imagotipos oficiales (lo único que está especificado). Luego ya si eso, comparar las webs, e intentad adivinar si hay algún objetivo más allá de servir de fuente de noticias ministeriales.

Guía de Comunicación Digital del Gobierno de España

Tras hablar extensamente (perdón si ha sido demasiado) sobre el Manual y la Imagen Institucional, toca ahora hablar de otro documento: la Guía de Comunicación Digital para la Administración General del Estado. Se trata de un documento en formato pdf bastante extenso (365 páginas, en la última versión publicada a día de hoy, en el 2014), y a diferencia del ya mencionado manual, está disponible para su consulta y descarga.

Guía de Comunicación Digital para la Administración General del Estado.

La Guía trata sobre la imagen institucional, documentos electrónicos y ofimáticos, accesibilidad,… se puede descargar como un documento completo, o bien por fascículos. Yo destaco para el tema que nos ocupa el Fascículo 1: Aspectos generales y el Fascículo 2: Imagen institucional. En el primero (de ochenta páginas), nos encontramos con una serie de requisitos técnicos básicos y legales sobre los sitios webs. Os invito a ojearlo.

Desde mi punto de vista tiene al menos dos problemas:

  • Se queda algo anticuada en algunos aspectos —recordemos, cuatro años sin modificarse—.
  • El alcance propuesto es muy limitado. Comparando con…

GOV.UK Design System: tomemos nota

De vez en cuando he seguido las novedades del gobierno británico con respecto a su estrategia web. La última noticia, muy reciente: Introducing the GOV.UK Design System, en la que presentan GOV.UK Design System. Un sistema de diseño para las webs institucionales. Junto con GOV.UK Prototype Kit y GOV.UK Frontend.
El proceso detrás del resultado, se puede consultar en A GDS Story. Porque no se trata únicamente de usar cajas y colores.

The Design System and all of its contents are now fully supported by a dedicated team at the Government Digital Service (GDS).

Un equipo que centraliza el diseño y que desarrolla de forma abierta y público una sistema de diseño, plantillas, patrones,… para crear sitios y aplicaciones web con componentes reutilizables, aportando una imagen coherente y poniendo el foco en la accesibilidad.

¿Cómo se podría mejorar? Problemas.

Vemos el ejemplo británico, y por otro lado, aquí en España, tenemos algunos documentos muy completos en ciertos aspectos (imagen institucional, papelería y documentos ofimáticos,…), pero que flojea a la hora de ofrecer pautas para tener unas webs de la Administración General del Estado que tengan en común mucho más que unas guías para los imagotipos (y que no siempre se cumplen).

Entiendo las dificultades y desafíos de una propuesta similar a la británica, dada la situación actual:

  • Equipos de desarrollo, presupuestos y jerarquías independientes.
  • Diversidad en las aplicaciones webs desarrolladas: gestores de contenidos, lenguajes de programación, empresas proveedoras,…
  • La cantidad de trabajo que ya está hecho, y la dificultad para actualizarlo. No me hago una idea del presupuesto y el tiempo necesario para hacer algo así.
  • Inercias.
  • Encontrar un equipo capaz de gestionar un departamento así, dejarles trabajar, y que su trabajo no quede en un limbo administrativo.

Puestos a sugerir…

Crear un equipo independiente, transversal, con experiencia en diseño, experiencia de usuario, accesibilidad y tecnología. Los objetivos serían:

  • Mentalizar a quien haga falta, que el cambio es necesario, y beneficioso.
  • Crear una nueva versión de la imagen institucional web (creo que los imagotipos actuales no son los más adecuados, el texto suele ser ilegible). Pero ir más allá de los imagotipos.
  • Desarrollar un sistema de diseño que incluya los componentes necesarios en las webs institucionales, de acceso público y revisado periódicamente. Implica, obviamente, un rediseño de las webs, poniendo siempre el foco en los ciudadanos y sus necesidades. El Gobierno de Aragon ya lo ha hecho: DESY, el primer sistema de diseño en abierto de una comunidad autónoma en España.
  • Buscar algún sistema para que una URL siempre tenga el destino original, independientemente de los cambios en nomenclaturas. Las URLs molonas no cambian, que decía Tim.
  • Facilitar, y no entorpecer, el trabajo de los profesionales.
  • Etcétera

¿Es fácil? En absoluto. ¿Es posible? Debería serlo. ¿Es necesario? Creo que sí.

Categorías
Desarrollo web Diseño Diseño de interacción

Diseño web: de la teoría a la práctica

Uno puede leer Universal Principles of Design, y aprender más o menos sobre diseño. Pero de la teoría a la práctica, a veces falta «algo más» que ayude a afrontar con confianza un proyecto.

Aquí van algunos recursos que nos muestran algo de teoría y práctica aplicada en el diseño web. Comencemos:

  • Laws of UX: probablemente conozcas la Ley de Fitt, la Ley de Hicks, la Regla de Occam,… en esta página se recopilar 13 leyes y aparte de una breve descripción, incluye algunos recursos adicionales.
  • En Las leyes de UX con casos prácticos, vemos algunos buenos ejemplos de cómo aplicar esas leyes.

Por otro lado, un par de enlaces para terminar:

  • 7 Practical Tips for Cheating at Design, tenemos algunos buenos consejos para mejora el diseño de páginas o aplicaciones.
  • Y en Redesigning Laravel.io, vemos como los mismos autores, explican el rediseño de un foro, basándose en muchos de los consejos del enlace anterior, y argumentando las decisiones.
Categorías
Diseño

‘Call to action’ como ‘fuente de luz’

El cerebro es capaz de detectar una serie de atributos precognitivos, mediante una serie de «procesos mentales de bajo nivel» que se detectan antes incluso de pensar conscientemente. Son los siguientes:

  • Proximidad
  • Color
  • Tamaño
  • Orientación
  • Dirección
  • Forma
  • Sombreado

El origen es biológico: cuestión de supervivencia de la especie. Más de un astuto lector de xposible confimará su certeza de que las fuentes del diseño son muy profundas…

Dejando de lado las cinco primeras, me centraré en la última, el sombreado. Muy relacionado con el sol, una fuente de iluminación y calor. Viendo la dirección de la sombra, los hombre primitivos (hablo de cuando twitter no existía en incluso antes) sabían cómo encontrar el sol o la hoguera.

Ahora es cuando doy una pirueta en el discurso, para recordar una frase que me dijo hace unos meses un compañero: en el diseño gráfico, la sombra en los elementos suele estar debajo, porque el sol está arriba. Con el tiempo, me he hecho una pregunta: ¿y si el sol no está arriba? Traduzcamos la pregunta a algo relacionado con la web: ¿Y si el call to action no está arriba?

Por si eres uno de los pocos que no conoce qué narices es un call to action (yo hace poco lo era), basta con resumir que es un elemento que debería captar nuestra atención para realizar una acción concreta: darnos de alta, suscribirnos a sus noticias, buscar, ver las ofertas,… cosas así. En ocasiones se destaca usando apropiadamente los atributos precongnitivos mencionados al principio, entre los que seguramente destaquen el color, el tamaño y la forma.

La tesis que defiendo, y bienvenidos sean los comentarios al respecto, es que la sombra o la intensidad de la luz, puede ser un factor importante a la hora de destacar adecuadamente los elementos, y como extra, puede proporcionar una dirección a seguir, y dentro de esa dirección, una orientación hacia el call to action. Como diría Chicho Terremoto Tres puntos, colega.

A continuación tienes una imagen que pretende ilustrar lo que digo: en una rejilla con nueve elementos, el elemento central actua como «sol» que «ilumina»,siendo el sol del ejemplo oscuro el resto de los elementos. Desde cualquiera de esos otros elementos, la dirección de la luz, nos conduce al centro, lo que se supone que es el centro de atención (no sólo por estar en el centro, aunque así sea en el ejemplo). He usado un degradado con dos colores del tema de xposible,… y así ha salido…

Rejilla de nueve elementos con un foco de luz en el centro.

En el segundo ejemplo, trasladamos ese centro de atención (de luz y de calor) a la esquina inferior izquierda.

Rejilla con nueve elementos, con un foco de luz en la esquina inferior izquierda.

El caso es que los ejemplos usados tienen truco, porque dejo de lado otros factores (color, tamaño, forma y proximidad) que obviamente cambian la relación entre todos los elementos que entran en juego.

De postre, Fundamentos de diseño: Economía de Recursos, de Ale Muñoz, que habla un poco de espacio, color y forma.

Imágenes actualizadas tras el comentario acertado de David

Categorías
Diseño

No hagas lo que te digo…

Una de las tareas adicionales que surgen cuando eres padre es ir al cine para ver películas como… los pitufos. Pero ojo, recordaré la película por una frase que dijo la jefa al protagonsita (un muchacho de marketing):

No hagas lo que te digo, haz lo que quiero.

Muy grande. Muy cierto.

Otra frase que dice un compañero, desarrollador también tiene miga:

Me gustaría ser al menos una vez cliente para pedir en vez de intentar adivinar lo que quieren.

Dos caras de la misma moneda. El origen es algo muy sencillo: falta de comunicación. En sus dos vertientes, desde el punto de vista de lo que se quiere hacer:

  • El cliente no sabe o no quiere explicar lo que quiere.
  • El diseñador-desarrollador-gerente (llámalo «X») no entiende o no sabe cómo saber lo que el cliente quiere.

Por otro lado, lo que se puede hacer que viene a ser lo mismo, pero cambiando los papeles.

Evidentemente no pueden faltar otros detalles como el tiempo, el presupuesto y las consideraciones técnicas. Pero no es de eso de lo que quería hablar.

Para terminar no puede faltar una referencia obligada a Aprende a preguntar de Ale Muñoz, por la parte que nos toca.

Categorías
Diseño Libros

Libro: elementos del diseño japonés

The philosophy and ethics of Japanese design concepts are revealed in key words that are laden with cultural meaning. Over the gerations, the Japanese created an extensive vocabulary of aesthetic terms that made it possible for them to describe the physical as well as the metaphysical attributes of their culture, and of their arts and crafts. Although often relatively simple in their original meanings, the terms were expanded to encompass the basic principles and elements of beatuty and design that evolved in the unique Japanese enviroment. The Japanese also created a variety of ritualized practices form enhancing their ability to recognize and appreciate beauty and good design.

Boyé Lafayette De Mente autor de Elements of japanese design.

Un libro con ciertas analogías a Universal principles of design. Tras una introducción (arriba puedes leer un extracto) expone de forma clara una serie de elementos en los que se fundamenta el diseño japonés. En total son alguno más de setenta, expuestos brevemente —dos o tres páginas—, de lectura fácil. Algunos de esos elementos son lo suficientemente genéricos como para aplicarse, porqué no, al diseño web. Y puede dar muchas y buenas ideas cuando buscamos la inspiración. Es un buen libro para leer y releer.

Para situarnos mejor en el cotexto, profundiza levemente en las raíces históricos del diseño japonés (influencia de China, Corea, budismo, sintoísmo,…) y las características geográficas del archipiélago japonés. Es una gran ayuda. Personalmente echo en falta ilustraciones, pero eso elevaría el precio del libro (ahora mismo en the book depository cuesta poco más de cinco euros y no cobran gastos de envío), y siempre podemos contar con internet para intentar buscar imágenes relacionadas.

He leído también el libro Leonard Koren (Wabi-Sabi for artist, designers, poets and philosophers) en principio bastante relacionado, y me ha parecido bastante más limitado. Cuestión de gustos.

Termino algunos elementos que se desarrollan: wa (armonía), heisei (mente en paz), kaizen (búsqueda de la perfección), kanso (conseguir más con menos), makoto (construyendo sinceridad en los productos), miekakure (la atracción oculta), medatsu (crear puntos de atención), kuwashii (belleza en los detalles),… y por supuesto wabi (belleza desolada), sabi (objetos «gastados») y  shibui (eliminación de lo no esencial).