Want to make creations as awesome as this one?

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

whatsapp

Mastercard

fitbit

SWISSCOM IO

Starbucks

uber

twitter

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