Appearance
Style tile
En esta actividad vas a definir el estilo visual de la aplicación web desarrollada en las actividades anteriores.
Para ello, investigarás diferentes alternativas y utilizarás los recursos proporcionados para tomar decisiones sobre la identidad visual, los colores, la tipografía, la iconografía y los componentes de la interfaz.
Deberás documentar el proceso seguido para tomar estas decisiones, incluyendo capturas de pantalla de los recursos y herramientas utilizados y una breve justificación de las elecciones realizadas.
Finalmente, utilizarás todas las decisiones tomadas para crear un style tile que reúna en una única composición visual el estilo de la aplicación.
Guías de estilo de referencia
En las guías de estilo de la UPV puedes consultar:
- Guía antigua: realiza un vistazo general a la guía completa.
- Guía actual: revisa las páginas 93-118, sobre identidad visual, y 178-195, sobre su aplicación a interfaces web.
A lo largo de la actividad se indican algunas páginas especialmente relacionadas con cada apartado.
1. Identidad visual
Define la identidad visual básica de la aplicación.
Incluye:
- Nombre de la aplicación.
- Logotipo.
- Variantes del logotipo, si son necesarias.
Antes de realizar la elección definitiva, busca y compara diferentes posibilidades. Documenta mediante capturas de pantalla algunas de las alternativas consideradas y explica brevemente el proceso seguido.
Indica finalmente qué pretende transmitir la identidad elegida y por qué resulta adecuada para la aplicación y sus usuarios.
Referencia
Consulta las páginas 93-110 de la guía actual de la UPV para observar cómo se define una marca, su logotipo, variantes y elemento gráfico.
2. Colores
Define una paleta de colores para la aplicación.
Utiliza los generadores de paletas y otros recursos disponibles en Recursos para explorar diferentes combinaciones de colores.
Documenta el proceso mediante capturas de pantalla de algunas de las alternativas consideradas y explica brevemente por qué has seleccionado la paleta definitiva.
Incluye, como mínimo:
- Color principal.
- Color o colores secundarios.
- Colores neutros para fondos, superficies y textos.
- Colores funcionales que necesite la aplicación, por ejemplo, para indicar éxito, información, advertencia o error.
Indica el código de cada color y especifica para qué se utilizará.
Comprueba que las combinaciones principales de texto y fondo presentan un contraste adecuado y documenta también esta comprobación.
Referencia
Consulta las páginas 178-179 de la guía actual de la UPV para observar cómo se define una paleta para web y cómo se tiene en cuenta el contraste y la accesibilidad.
En Recursos dispones también de herramientas para generar paletas y comprobar el contraste entre colores.
3. Tipografía
Utiliza Google Fonts u otros recursos disponibles para explorar diferentes tipografías que puedan resultar adecuadas para la aplicación.
Compara varias posibilidades y documenta mediante capturas de pantalla el proceso de selección.
Selecciona finalmente la tipografía o tipografías que utilizará la aplicación y establece una jerarquía básica.
Define, como mínimo:
- Títulos.
- Subtítulos.
- Texto normal.
- Texto auxiliar.
Para cada caso, indica la familia tipográfica, el tamaño y el peso utilizados.
Justifica brevemente por qué has seleccionado estas tipografías frente a las otras alternativas consideradas.
Referencia
Consulta la página 111 y las páginas 180-181 de la guía actual de la UPV para observar la diferencia entre tipografía corporativa y su aplicación concreta en una interfaz web.
4. Iconografía e imágenes
Explora las bibliotecas de iconos disponibles en Recursos y compara diferentes alternativas.
Selecciona una biblioteca o un estilo común y documenta mediante capturas de pantalla el proceso seguido para realizar la elección.
Muestra algunos ejemplos de los iconos que necesitará la aplicación e indica su función.
Si la aplicación utiliza fotografías, ilustraciones u otras imágenes, establece también qué características deberán mantener para que sean coherentes entre sí.
Justifica brevemente las decisiones tomadas.
Referencia
Observa también cómo la guía antigua de la UPV establece criterios específicos para el uso de iconos, fotografías y logotipos.
5. Componentes de interfaz
Define el aspecto de algunos de los principales componentes que se utilizarán en la aplicación.
Incluye los componentes que sean necesarios para tu aplicación, por ejemplo:
- Botones.
- Enlaces.
- Campos de formulario.
- Tarjetas.
- Alertas.
- Otros componentes recurrentes.
Cuando corresponda, define diferentes estados del componente, como default, hover, focus o disabled.
No es necesario definir todos los componentes que tendrá la aplicación. Selecciona los más representativos.
Consulta los sistemas de diseño y frameworks disponibles en Recursos, observa diferentes alternativas y documenta mediante capturas de pantalla algunos de los ejemplos que hayas utilizado como referencia.
Sistemas de diseño y frameworks
En Recursos puedes consultar diferentes sistemas de diseño y frameworks como referencia para definir los componentes de tu aplicación.
En los sistemas de diseño, revisa algunos componentes concretos y observa sus variantes, estados, jerarquía, espaciado y criterios de uso:
En los frameworks de interfaz, observa cómo esos componentes ya están implementados y qué posibilidades ofrecen para modificar su aspecto:
Consulta también la página 182 de la guía actual de la UPV para observar cómo se definen botones y enlaces y sus diferentes estados.
No es necesario revisar toda la documentación ni reproducir uno de estos sistemas. Utilízalos como referencia para tomar tus propias decisiones de diseño.
6. Espaciado y forma
Establece algunos criterios básicos que permitan mantener un aspecto coherente en toda la interfaz.
Define, cuando corresponda:
- Separación entre elementos.
- Márgenes y rellenos.
- Bordes.
- Radio de las esquinas.
- Sombras.
Puedes tomar como referencia los sistemas de diseño y componentes consultados en el apartado anterior.
Evita definir valores diferentes para cada elemento sin una razón justificada.
7. Creación del style tile
Una vez tomadas y documentadas las decisiones anteriores, crea un style tile que las reúna en una única composición visual.
Debe permitir identificar de un vistazo, al menos:
- Logotipo.
- Paleta de colores.
- Tipografías.
- Iconografía.
- Principales componentes de interfaz.
- Criterios básicos de espaciado y forma.
Puedes crear el style tile de dos formas:
- Mediante una herramienta de diseño, utilizando Canva, LibreOffice Draw, LibreOffice Impress u otra herramienta similar.
- Mediante una herramienta de IA generativa, proporcionando como instrucciones todas las decisiones de diseño que has tomado durante la actividad.
Si utilizas IA, incluye en la documentación el prompt utilizado y el resultado obtenido.
Comprueba que el resultado generado respeta las decisiones que has documentado previamente. Si no lo hace, modifica las instrucciones o realiza los cambios necesarios hasta obtener un resultado coherente con ellas.
Referencia
Consulta la página 183 de la guía actual de la UPV como ejemplo de presentación conjunta de diferentes elementos visuales de una interfaz.
Importante
El objetivo principal de la actividad no es únicamente obtener un style tile visualmente atractivo, sino investigar, comparar alternativas y justificar las decisiones de diseño.
El style tile final debe ser el resultado de las decisiones que has tomado y documentado durante la actividad.
Entrega
Incorpora a la documentación de tu proyecto:
- El proceso seguido para tomar cada decisión de diseño, incluyendo las capturas de pantalla de los recursos y herramientas utilizados.
- Una breve justificación de las decisiones finales.
- El style tile final.
- El prompt utilizado, si has empleado una herramienta de IA para generar el style tile.