¡Vamos a diseñar nuestro propio icono para la aplicación de Fray Filma!
Para ello, vamos a seguir las especificaciones de diseño de iconos de Google Play que están dentro de la página web oficial para Developers.
Especificaciones de diseño
Las aplicaciones de Google Play están adoptando un nuevo sistema de iconos, con formas uniformes, a diferencia de las que había hasta ahora:
Los requisitos que tiene que cumplir son los siguientes:
- Tamaño final: 512 px × 512 px
- Formato: PNG de 32 bits
- Espacio de color: sRGB
- Tamaño máx. del archivo: 1024 KB
- Forma: Cuadrado completo (Google Play realiza el enmascarado de forma dinámica; el radio será equivalente al 20% del tamaño del ícono)
- Sombra: ninguna (Google Play procesa las sombras de forma dinámica; consulta la sección «Sombras» más abajo para conocer cómo incluir sombras en el material gráfico).
Una vez que tienes el cuadrado (512×512), Google Play aplica una máscara y sombra:
Aquí tienes unos consejos para el diseño:
- Aquí tienes una plantilla con las especificaciones para abrir con Inkscape.
Diseño de un icono
Fase 1: Observación y análisis
Antes de comenzar a diseñar, vas a examinar los iconos de las aplicaciones que tienes instaladas.
- Identifica los elementos comunes y diferenciadores entre ellos.
- Presta atención a la forma, color, tamaño, estilo y uso de imágenes o texto.
Fase 2: Recopilación de ejemplos
- Selecciona varios ejemplos de iconos de apps que consideres efectivos o atractivos.
- Selecciona varios ejemplos de iconos que podrían ser mejorados.
Fase 3: Identificación de tendencias
Iconos de Google Calendar a lo largo de los años (filosofía de Material Design)
- ¿Qué tendencias observas? (uso de gradientes, ilustraciones, iconos planos,…).
Fase 4: Análisis de usabilidad
- Observa ahora los iconos de las apps que más te han gustado e indica:
- ¿Cuáles son esas aplicaciones?
- ¿Son intuitivos y fáciles de reconocer?
- ¿Comunican de manera clara y rápida su función?
Fase 5: Experimentación
Una vez analizados los iconos de tus aplicaciones y conocidas las normas de los desarrolladores de Google, puedes comenzar a experimentar con diferentes ideas para tu propio icono.
- Crea unos bocetos a mano alzada.
Fase 6: Prototipado con canva
Ahora que tenemos claras las especificaciones, vamos a utilizar canva para realizar el diseño.
Crea un diseño nuevo (1) y selecciona un tamaño personalizado (2):
Ahora introduce los valores proporcionados en la web de developers de Android, y luego Crea el diseño:
Como otras veces, antes de continuar modifica el nombre que viene por defecto:
En la barra lateral izquierda, busca los Elementos (1), y entre las formas selecciona un cuadrado (2) para que aparezca en tu ventana de trabajo:
Ya que tenemos el cuad
Para modificar el tamaño tienes que acceder a «Posición»:
En las propiedades de altura y anchura, escribe las indicadas para los desarrolladores (1), y en la alienación a la página, elige la mitad y el centro (2):
Ahora modifica el valor de la transparencia de este cuadrado:
¡Empezamos con el diseño!
Ahora modifica el color del elemento inicial. Nosotros vamos a utilizar el #D34118 (aquí puedes elegir otro código hexadecimal y compararlo con el RGB).
Aquí lo tienes:
En la parte interior hemos elegido el diseño que realizamos para el cartel del cortometraje JAQU3:
Aquí lo tienes situado en dentro del cuadrado de referencia:
Si aumentamos la transparencia al máximo del cuadrado interior, nos queda así:
Podemos ahora probar con el tamaño de los toros:
Vamos a probar otras fondos y combinación de colores: Duplica antes la página:
Aquí probamos con otro fondo:
Cuando termines debes dar al icono de Compartir/Share, Descargar/Download todas las páginas:
Así quedaría como icono (esta parte la realiza Google):
¿Te animas a realizarlo a partir del logotipo que realizamos para FrayFilma?
Fase 7 Feedback y revisión
- Finalmente, comparte los prototipos con el profesor y el resto de alumnos.
- Vamos a proporcionar sugerencias de mejora.
Tecnología E Ingeniería 
Deja un comentario