Aplicando una guía de estilo
Margarita González del Hierro
Created on December 5, 2018
More creations to inspire you
SLYCE DECK
Personalized
LET’S GO TO LONDON!
Personalized
ENERGY KEY ACHIEVEMENTS
Personalized
HUMAN AND SOCIAL DEVELOPMENT KEY
Personalized
CULTURAL HERITAGE AND ART KEY ACHIEVEMENTS
Personalized
DOWNFALLL OF ARAB RULE IN AL-ANDALUS
Personalized
ABOUT THE EEA GRANTS AND NORWAY
Personalized
Transcript
PEC 3
María Margarita González del Hierro
Diseño de interfacesGrado en Diseño y Creación DigitalesSemestre 1 - Curso 2018/19
Aplica una guía de estilo
Índice
01 Guías de estilo
04 Conclusiones
2
3
8
03 Prototipo gráfico
02 Guía seleccionada
1
05 Referencias
9
06 Anexo
10
Guías de estilo
Repensando la interfaz
01
En la red pueden encontrarse innumerables guías de estilo que determinan las pautas de diseño a nivel funcional y gráfico de sus respectivas interfaces. A la derecha, se muestran las guías que más han captado mi atención durante el proceso de investigación por tratarse de documentos que tienen una gran coherencia y un alto valor estético que se define en su gama cromática, tipografía, estructuras, iconos, elementos y, en definitiva, el conjunto de pautas de diseño que definen a la marca. Puede accederse a cada una de las guías pulsando sobre la imagen correspondiente.
1
Mastercard
fitbit
SWISSCOM IO
Starbucks
uber
genially
spotify
genially
Genially es una herramienta online orientada a la creación de contenidos interactivos y animados. He seleccionado esta guía de estilo por varios motivos:Por un lado, el aspecto visual de su interfaz es completamente distinto al diseño original de la aplicación móvil de Ascaso, así podré testear la versatilidad de mi aplicación y valorar los aspectos de la interfaz que favorecen la usabilidad. Por otro lado, las pautas descritas en la guía de estilo establecen algunos requerimientos en el diseño de la interfaz que, considero, pueden enriquecer el conjunto de la aplicación.
Guía de estilo de Genially
2
Guía seleccionada
02
wireframes originales
3
Prototipo gráfico (I)
03
El prototipo gráfico de la aplicación móvil para el Festival de Cine de Ascaso es el resultado de un conjunto de etapas de diseño iterativas que comenzaron con un primer prototipo bocetado a partir de los resultados de una investigación de diseño de interacción, un modelado y conceptualización en base a arquetipos de usuarios y una formalización de la interacción con una arquitectura orientada a la consecución de los objetivos que los usuarios requerían para esta aplicación.
A la izquierda, se muestra el primer prototipo que realicé de la aplicación, bocetado a mano, en el que se representan los wireframes que permiten la consecución de los objetivos propuestos para los usuarios: visualización de la cartelera y sus tráilers y compra de entradas. Estos wireframes se pueden ver en detalle en el anexo.
aplicando una nueva guía de estilo
4
Prototipo gráfico (II)
03
Prototipo Interactivo de la aplicación
Tomando como base los wireframes realizados a mano, he procedido a aplicar la guía de estilo de Genially y algunas de sus imágenes corporativas. Para ello, he hecho uso de la herramienta, Adobe Xd, creando así un prototipo interactivo.
Dentro del proceso de aplicación de la guía de estilo, he realizado algunas mejoras a las pantallas tales como una reconfiguración del menú de inicio; La incorporación de imágenes en la programación, para que la aplicación sea más visual; La presencia de un listado de películas en la cartelera y una redistribución de los elementos en la información de la película. En las siguientes páginas pueden verse capturas de las diferentes pantallas.
Página de carga de la aplicación. Imagotipo creado sobre el original de Genially,
5
Prototipo gráfico (III)
03
6
Prototipo gráfico (IV)
03
7
Prototipo gráfico (V)
03
8
Conclusiones
04
Aplicar una guía de estilo a mi interfaz gráfica ha sido muy enriquecedor, pues jamás habría elegido esta estética de no ser por las directrices marcadas por Genially.La mayor dificultad ha sido mantener la jerarquía tipográfica, pues Genially hace uso de titulares de gran tamaño. Esto me ha hecho reconfigurar, en varias ocasiones, la disposición de los elementos y repensar su diseño para ser fiel a la guía de estilo a la par que mantenía la funcionalidad y la usabilidad.La modificación visual de los diferentes elementos de la interfaz ha incrementado la coherencia, tanto estética como funcional, que tiene ahora la aplicación. Se ve cómo las páginas, a pesar de tener contenidos diferentes, forman parte de un todo. Esta coherencia, en mi opinión, incrementa la usabilidad de la aplicación, mejorando el diseño en todos sus aspectos.
Referencias
05
- Fitbit. Visual Styles. https://dev.fitbit.com/build/guides/design-guidelines/visual-styles/
- Genially. Identidad visual corporativa. https://www.dropbox.com/s/0v17f8tjazs2fp5/MANUAL_GENIALLY.pdf?dl=0
- iOS Guidelines (Apple iPhone y iPad) https://developer.apple.com/ios/human-interface-guidelines/overview/themes/
- Mastercard. Branding Guidelines. https://brand.mastercard.com/brandcenter/mastercard-brand-mark.html
- Material Design (Google para Android) https://material.io/guidelines/
- Microsoft. Windows UI Guidelines. https://msdn.microsoft.com/en-us/library/windows/desktop/dn688964(v=vs.85).aspx
- Monjo, T., Mora, A. (2018). Interface Toolkit. Capítulos: Guías de estilo; Agrupamiento; Alineación; Coherencia; Confirmación; Control; Disonancia cognitiva; Proximidad y Restricciones. UOC.
- Spotify. Branding Guidelines. https://developer.spotify.com/branding-guidelines/
- Starbucks. Logo Usage Guidelines. https://solutions.starbucks.ca/media/100227321/wps_logo-guidelines_april-2014.pdf
- Stribley, M. 50 meticulous style guides every startup should see before launching. Canva.com https://www.canva.com/learn/50-meticulous-style-guides-every-startup-see-launching/
- Swisscom iO. Visual Identity. https://weandthecolor.com/swisscom-io-visual-identity-moving-brands/35305
- Twitter. Recursos de la marca. https://about.twitter.com/es/company/brand-resources.html
- Uber. Rebrand 2018. https://www.uber.design/case-studies/rebrand-2018
- Whatsapp. Brand Guidelines. https://whatsappbrand.com/
9
bocetos de la aplicación móvil
Prototipo realizado a mano en el que se representan los wireframes que permiten la consecución de los objetivos propuestos para los usuarios: visualización de la cartelera y sus tráilers y compra de entradas.
10
Anexo
06
PEC 3Aplica una guíade estilo
Margarita González del Hierro