Personalizar un tema para conseguir historias impactantes
Crear un tema
Para empezar, duplicará una historia existente y creará un tema nuevo para usarlo como estilo.
- Inicie sesión en ArcGIS StoryMaps con su cuenta de organización de ArcGIS.
Nota:
Si no tiene una cuenta de organización, consulte las opciones de acceso a software.
- Abra la historia Humo en el horizonte.
- Desplácese y lea su contenido.
La historia incluye un mapa, fotos, texto, botones y vínculos a fuentes de datos. Creará una copia de ella que será suya y podrá editar.
- En la cinta, haga clic en el botón Más acciones y en Duplicar historia.
- En la ventana Duplicar esta historia, haga clic en Sí, duplicar.
- Elimine el texto (Copia) del título para que solo permanezca Humo en el horizonte.
En la historia se utiliza el tema predeterminado, con fondo blanco, texto gris oscuro y tonos azules. Estos colores no son adecuados para su historia. El humo del incendio genera una sensación vaga, lúgubre y preocupante. El mapa y las fotos de la historia concuerdan con esta sensación, no así el tema. Buscará un tema diferente.
- En la cinta, haga clic en Diseñar.
- En el panel Diseño, en Tema, haga clic en Meseta.
- Desplácese por la historia para contemplar los cambios.
El tema Meseta combina mejor con los colores de la historia que el tema Cumbre, pero la sensación que crea es más ligera y transparente. Creará un tema personalizado para que la historia parezca más llena de humo, sombría y un poco preocupante.
- Haga clic en el vínculo Administrar mis temas.
- Haga clic en el botón Nuevo tema.
- En el panel Elegir un punto de partida, haga clic en Obsidiana y luego en Seleccionar.
Al elegir un tema como punto de partida, se cargarán los colores, las fuentes y otras características del tema en el editor como punto de partida. Dado que ha decidido darle un toque más oscuro y ahumado a la historia, el fondo oscuro y los colores rojizos de Obsidiana son un buen punto de partida para trabajar.
- En el panel lateral, elimine Tema sin título y escriba Humo.
Elegir fuentes y colores
A continuación, elegirá las fuentes y los colores que ayudarán a darle un tono serio a la historia. Tomará colores del mapa y fotos que ya existan en su historia y se asegurará de que estos colores cumplan las directrices de accesibilidad en cuanto a relaciones de contraste.
- En el panel lateral, expanda la sección Colores y haga clic en el menú Color de fondo.
- Borre #0e1116 y escriba #272520.
El color de fondo de la página cambia a marrón oscuro. Este color coincide con el color de fondo (color del océano) del mapa de previsión de humo.
Sugerencia:
Puede instalar extensiones en su navegador web que permitan encontrar los valores hexadecimales de los colores de los mapas, las fotografías y otros gráficos. Un ejemplo de extensión es Identificador de colores.
- En Color de encabezado, active Utilizar colores de tema.
Establecerá esta propiedad más adelante en la sección Tipología. Activar esta opción le permitirá personalizar aún más estos colores en esa sección.
- Haga clic en el menú Color de énfasis. En la lista Colores básicos, elija la opción naranja o escriba #C86624.
- Desplácese por la historia de ejemplo para ver dónde aparecen los tonos naranjas.
El color de énfasis afecta a los botones, los vínculos, los separadores y las citas. El naranja se asocia con el fuego, por lo que se adapta a la historia.
- Expanda la sección Topografía.
Las fuentes tienen carácter. Está intentando imprimir un tono serio con este tema, por lo que debería evitar cualquier fuente que parezca demasiado informal, alegre o decorativo. La fuente Charter BT tiene carácter formal, por lo que se adecua al tema. Muchas de las fuentes disponibles en este menú podrían resultar adecuadas, por lo que la elección de la fuente depende en gran medida del estilo. Al elegir fuentes, piense en lo que le sugiere cada una. Una fuente que le recuerde una invitación de boda, un libro infantil o un juego en línea podría no ser la mejor opción en el caso de una historia sobre un incendio forestal. Una fuente que le recuerde documentos oficiales es más adecuada.
La fuente Charter BT utilizada actualmente para el título es una buena opción para una fuente de aspecto oficial, por lo que la mantendremos igual.
- En Título y encabezados, haga clic en el menú de colores. Introduzca #A6671B.
El texto del título cambia al color amarillo anaranjado tomado de una de las fotos de la historia.
Junto al menú de colores aparece un símbolo de advertencia. Indica la existencia de bajo contraste entre los colores del texto y el fondo, lo que dificulta su lectura.
- En la ventana del selector de colores, haga clic en la flecha situada junto a No legible.
La información de esta sección permite saber si el color del texto contrasta con el del fondo. Los números que figuran son las relaciones de contraste. La relación de contraste se considera legible si satisface los umbrales establecidos por las directrices de WCAG 2.1 AA. En este caso, el color naranja contrasta bien con el fondo, pero no ocurre lo mismo con el fondo secundario.
El color del fondo secundario es una versión más clara del color de fondo marrón. Se genera automáticamente y no puede configurarse. Aclarará el color naranja para que pueda leerse con ambos fondos.
- En el cuadro del selector de colores, mueva el círculo un poco más arriba y a la izquierda. También puede introducir #BC7F38.
Los números de relación de contraste se vuelven verdes para indicar que el contraste con los dos colores de fondo es adecuado.
Las advertencias de contraste no deben ignorarse. Aunque pueda leer el título sin dificultad en el color elegido, es posible que otras personas no puedan. Tener en cuenta las advertencias permite crear una historia accesible.
Para el texto del párrafo, elegirá la misma fuente que para el título y los encabezados. En cartografía, a menudo se recomienda utilizar solamente una o dos fuentes porque resulta más fácil diseñar un mapa atractivo y efectivo con unos cuantos elementos que con muchos. Aplicará este consejo al diseño del tema y utilizará una sola fuente en toda su historia.
- En Párrafo, elija Charter BT.
Limitar su tema a una sola fuente permite utilizar más variaciones de colores.
- En Párrafo, cambie el color a #C8BEA4.
Este color es una versión más desvaída del color del título. Al estar menos saturado el color, da la sensación de que hay más humo y contribuye a que se ajuste al tema de la historia. También es más claro, lo que aumenta el contraste con el fondo. Cuanto menor es el texto, más importancia adquiere el contraste para la legibilidad.
- En Subtítulos, configure el color en #B5ADB7, que es un morado pálido y desaturado.
Los tres colores del texto están inspirados en una de las fotos de la historia.
Un método fiable para diseñar un esquema de color consiste en tomar los colores de las fotos y los gráficos. Estos colores ayudarán a establecer el tono de la historia en función del tono de la foto. Los colores naranja y amarillo del texto también combinan con la simbología del mapa.
No son exactamente los mismos colores, pero se parecen lo suficiente como para que la historia tenga coherencia.
El color morado pálido se ve bien sobre el fondo marrón, pero solo aparece en unos cuantos sitios. Es posible que quiera volver a utilizar este color en otros sitios. Lo configurará como un color de énfasis opcional para poder acceder a él más adelante.
- Desplácese hacia arriba por el panel lateral. En la sección Colores, en Colores de énfasis opcionales, haga clic en el menú del primer color y configúrelo en #B5ADB7.
Este color no se aplicará de manera inmediata a ningún elemento de la historia, sino que estará disponible más adelante en el builder de historias.
Configurar otros elementos de diseño
A continuación, cambiará el aspecto de los botones y los vínculos de su tema.
- Contraiga las secciones Colores y Tipografía y expanda la sección Botones.
La historia de ejemplo salta a la ubicación del botón de ejemplo.
El botón tiene un aspecto muy llamativo en color naranja. Los botones llamativos son adecuados en algunas historias. Por ejemplo, un botón de llamada a la acción debe destacar mucho. Sin embargo, en su historia no le conviene que los botones aparten la atención del texto del párrafo, por lo que cambiará su color por otro más mate que llame menos la atención.
- En el panel lateral, active la casilla Utilizar color personalizado.
- Establezca el color en #776f5b.
Este color marrón grisáceo tiene un tono similar al del cuerpo del texto de la historia. Es un tono más opaco que no desvía la atención del texto y es lo suficientemente claro en comparación con el fondo como para pasar las pruebas de accesibilidad.
El texto del botón también ha cambiado de negro a blanco para garantizar un contraste de color legible. También hará que el botón sea cuadrado para alinearlo mejor con la línea recta que usa el tema para el bloque de citas.
- En Botones, haga clic en el primer tipo de botón con las esquinas cuadradas.
- Expanda la sección Vínculos y elija la segunda opción.
El color de énfasis naranja era demasiado llamativo para los botones, pero parece adecuado para resaltar los vínculos, por lo que no lo cambiará por un color personalizado.
- Expanda la sección Separadores. En Posición, elija la última opción.
La línea de separación del ejemplo se extiende a todo lo ancho de la historia.
Hay más opciones para citas y mapas base. Como no se utiliza ninguna de estas en su historia, no tendrá que ajustarlas.
Publicar el tema
Publicará y compartirá su tema para que pueda aplicarlo a su historia.
- Desplácese por la historia de ejemplo y revise el diseño.
Tiene un aspecto serio y formal, y los colores coinciden con el tema de los incendios y el humo.
- En la cinta, haga clic en Publicar.
Ha previsto compartir la historia Humo en el horizonte con el público, por lo que el tema también tiene que compartirse con el público. De lo contrario, las personas que no tengan acceso al tema verán la historia con el tema predeterminado aplicado.
- En Definir nivel de uso compartido, elija Todos (público).
- En Opciones avanzadas, active la casilla Permitir duplicación.
Esta opción le permitirá hacer una copia de su tema y modificarla más adelante.
- Haga clic en Publicar.
Aplicar el tema a la historia
A continuación, aplicará el tema y revisará la forma en que cambia el aspecto y la sensación que produce la historia. Anulará uno de los colores del tema.
- Vuelva a la pestaña del navegador con su historia. Si lo desea, cierre la pestaña con su tema.
Nota:
Si antes ha cerrado la pestaña con su historia, inicie sesión en su cuenta de ArcGIS. Haga clic en la pestaña Contenido y en el elemento Humo en el horizonte ArcGIS StoryMaps. Haga clic en Editar historia.
- En la cinta, haga clic en Diseñar.
- Desplácese hasta la parte inferior del panel Diseño y haga clic en Examinar mis temas.
- En la galería de temas, haga clic en la tarjeta Humo.
El tema se aplica a la historia.
- Cierre el panel Diseño y desplácese por la historia para revisar la forma en que aparece con el nuevo tema.
El fondo del mapa se integra a la perfección en el fondo de la historia y los colores del texto y de énfasis se adaptan a las fotos y al mapa.
- Desplácese hasta el final de la historia.
En la primera línea de la sección de créditos se utiliza el color naranja del título y los encabezados.
Elige este color pensando en un texto más grande y preferiría algo con más contraste para esta fuente más pequeña. Anulará el tema y elegirá otro color.
- Resalte la línea de texto que empieza con Esta historia se creó para.
- En el menú que aparece, haga clic en el botón Color.
En Recomendado aparecen cuatro colores. Esto incluye los colores de énfasis y del título que ha configurado en su tema.
- En Recomendado, haga clic en el color morado pálido. Confirme que el contraste de color figura como Legible.
El color del texto cambia a morado.
Publicar la historia
Para terminar, publicará la historia y la compartirá con el público.
- En la cinta, haga clic en Vista previa.
- Haga clic en Sí, continuar.
- Desplácese por la historia para revisarla.
- En la barra de herramientas de vista previa, haga clic en el botón Cerrar vista previa.
- En la cinta, haga clic en Publicar.
- En Definir nivel de uso compartido, elija Todos (público).
- Haga clic en Publicar.
Su historia está completa. Gracias a su tema personalizado, su tono y la sensación que produce se adaptan a la trama. En este tutorial, ha aprendido las siguientes habilidades:
- Cómo crear un tema personalizado que confiere a la historia un tono adecuado
- Cómo crear una sensación coherente y cohesionada tomando colores ya presentes en la historia
- Cómo elegir colores que cumplan las directrices de accesibilidad
Encontrará más tutoriales en la galería de tutoriales.
