Upload
others
View
22
Download
0
Embed Size (px)
Citation preview
| Iker Paredes Ramos
manual de identidad aplicativa
| 01
| manual de identidad aplicativa | imagotipo
imagotipo
tipografía
paleta cromática
iconografía
pantallas
navegación
02
08
12
15
21
33
índice
| 02
| manual de identidad aplicativa
imagotipoimagotipo
| 03
| manual de identidad aplicativa | imagotipo
El diseño del imagotipo de Orlain está basado en la fuente tipográfica Neuropolitical. Una fuente que aúna la limpieza de sus trazos sin serifa, con la sensación de modernidad y movimiento que trasmiten sus curvas. Se han ajustado los brazos y el asta de la r, el anillo de la a, el ápice de la i, los hombros de la n para unificar tamaños. También se modificó el tracking aumentando el kerning entre la O y la r y unificando distancias con las letras adyacentes a la l y la i.
4x
2x
4x 4x
11x
4x
9x
10x
21x
33x
98x
19x9x
4x
4x
3x
3x 3x 3x
4x
3x
2x
3x
3x
3x3x
3x
2x
x
4x
8x
7x
19x32x
3x 3x
14x
19x
OrlainTipo Neuropolitical 36 px
| 04
| manual de identidad aplicativa | imagotipo
El elemento pictográfico es un birrete que refuerza el objetivo final del aplicativo a la vez que estiliza la representación visual de la marca. Para una mejor integración con el elemento textual se añadió un curvatura al asta superior de la O.
| 05
| manual de identidad aplicativa | imagotipo
Para dejar respirar a la marca, el imagotipo siempre debe aparecer con un mínimo de padding lateral igual al ancho de la caja y de padding superior e inferior al cuerpo o altura de x.
19x
4x
14x
98x
32x
| 06
| manual de identidad aplicativa | imagotipo | variaciones
combinacionespermitidas
| 07
| manual de identidad aplicativa | imagotipo | variaciones
combinacionesNO permitidas
| 08
| manual de identidad aplicativa
tipografía
| 09
| manual de identidad aplicativa | tipografía
El tipo de letra utilizado en el aplicativo es Ubuntu, de estilo sans-serif humanístico según la clasificación Vox-ATypl. Es una familia tipográfica OpenType y ha sido incluida en la colección de tipografías de Google. Ha sido diseñada por Dalton Maag con la intención de aportar mayor claridad a los textos mostrados en las pantallas de computadoras de escritorio y dispositivos móviles. Además, su espaciado se ha optimizado para tamaños de texto de cuerpo.
Está liberada bajo la licencia Ubuntu Font Licence, basada en la SIL Open Font License. Al ser una licencia copyleft permite sean «usadas, estudiadas, modificadas y redistribuidas libremente» cumpliendo los términos estipulados en ella.
AaAaUbuntu
ABCDEFGHIJKLMNÑOPQRSTUWXYZabcdefghijklmnñopqrstuvwxyz
!@#$%^&*(),./?€¡¿{};:<>+-”~0123456789
Aa| 10
| manual de identidad aplicativa | tipografía
Ubuntu Bold
Títulos y botones
Cuerpos de texto
Formularios y migas de pan
ABCDEFGHIJKLMNÑOPQRSTUWXYZabcdefghijklmnñopqrstuvwxyz
!@#$%^&*(),./?€¡¿{};:<>+-”~0123456789
Ubuntu Regular
ABCDEFGHIJKLMNÑOPQRSTUWXYZabcdefghijklmnñopqrstuvwxyz
!@#$%^&*(),./?€¡¿{};:<>+-”~0123456789
Ubuntu Light
ABCDEFGHIJKLMNÑOPQRSTUWXYZabcdefghijklmnñopqrstuvwxyz
!@#$%^&*(),./?€¡¿{};:<>+-”~0123456789
Ub
| 11
| manual de identidad aplicativa | tipografía
Ubuntu Bold
Títulos y botones
Cuerpos de texto
Formularios e información
ESTO ES UN TÍTULO 28 px
ESTO ES UN BOTÓN 22 px
Esto es un título en un formulario 16 px
Ubuntu Regular
Este es el cuerpo de un texto 18 px
Ubuntu Light
Esto es parte de un formulario 16 px*este campo es obligatorio 10 px
Ub Ubuntu BoldUbuntu Regular
Ubuntu Light
| 12
| manual de identidad aplicativa
paleta cromática
| 13
| manual de identidad aplicativa | paleta cromática
La paleta cromática principal esta formada por un trío de colores: el marrón mostaza, un verde cerceta y el granate. A ellos, se les une el gris como elemento de neutralidad, el negro y el blanco para su uso en textos.
El mostaza es un color enérgico y estimulante, que desencadena sentimientos de calidez y aumenta las emociones positivas.R: 204 | G: 153 | B: 000
El verde cerceta combina la estabilidad y la calma del azul con el optimismo del verde, es un color que evoca a la tranquilidad y al equilibrio mental y espiritual. Su variación al 50% de opacidad puede ser usado como fondo.
R: 001 | G: 063 | B: 061 R: 001 | G: 063 | B: 061 | 50%
El color granate o rojo púrpura evoca la pasión, la moda, la magia y la fantasía. Además, aporta seriedad y elegancia y causa impacto aún en pequeñas dosis.
R: 091 | G: 030 | B: 014
R: 180 | G: 180 | B: 180
| 14
| manual de identidad aplicativa | paleta cromática
El mostaza puede ser usado indistintamente como color de fondo o de resalte con cualquiera de los 4, también funciona bien con el blanco y el negro. El verde cerceta y el granate solo pueden trabajar junto al mostaza, gris y blanco. Además, es posible utilizar el negro y el blanco con cada uno de ellos.
Un verde botella, un naranja melocotón y un rojo apagado serán usados en el menú desplegable.
R: 204 | G: 153 | B: 000
R: 091 | G: 030 | B: 014
R: 180 | G: 180 | B: 180
R: 001 | G: 063 | B: 061
combinacionespermitidas
R: 036 | G: 052 | B: 026
R: 163 | G: 097 | B: 007
R: 133 | G: 050 | B: 019
| 15
| manual de identidad aplicativa
iconografía
| 16
| manual de identidad aplicativa | iconografía
TEXTOSVÍDEOS ESTILO
ENTRAR
SUBIR UN NUEVO VÍDEO
CREAR ORLA
botones denavegación
98 px - radio 6 px
284 px - radio 12 px
220 px - radio 12 px
170 px - radio 3 px
36 px - trazo 4 px
170 px - radio 10 px
400 px
PROFESORES ALUMNOS 40 pxtexto 18 px
20 pxtexto 12 px
50 pxtexto 18 px
50 pxtexto 18 px
23 pxtexto 16 px
32 pxtexto 16 px
MIS VÍDEOS COMPAÑER@S MIS ORLAS
Administrar Perfil
Tutorial
Cerrar sesión
COMPARTIR VÍDEO
VÍDEO PERSONALIZADO
| 17
| manual de identidad aplicativa | iconografía
eliminar
buscar
check list
subir al servidor
editar
compartir
volverLos iconos se proponen en dos versiones, positiva y negativa, para su uso en función del color de fondo en el que se aplican
iconos y botones
75 pxtexto 14 px
220 px - radio 12 px
| 18
| manual de identidad aplicativa | iconografía
10:03
birrete
toga
beca
fondo
ajustes
iconos y botonesedición de vídeo
| 19
| manual de identidad aplicativa | iconografía
cambiar cámara frontal - cámara trasera
grabar vídeo
tomar foto
iconos y botonesedición de vídeo
volver
guardar
iconos y botonescaptura de imágenes
| 20
| manual de identidad aplicativa | iconografía
EDITAR
Iker Paredes Ramos Para Íñigo.mp4
EDITAR
Iker Paredes Ramos Para Íñigo.mp4
vídeo uso restringido
zoom vídeo play vídeo
vídeo uso libre
iconos y botonespermisos para vídeo
| 21
| manual de identidad aplicativa
pantallas
| 22
| manual de identidad aplicativa | pantallas
Los elementos gráficos de este aplicativo contenidos en este manual han sido desarrollados para un tamaño de pantalla de 712 px por 400 px con densidad media (mdpi) que son aproximadamente 160 dpi.
Para su adaptación a diferentes dispositivos se utilizará el factor de conversión de la siguiente tabla: • referencia de 1.0x para densidad media (mdpi) • 0.75x para densidad baja (ldpi) • 1.5x para densidad alta (hdpi) • 2.0x para densidad muy alta (xhdpi) • 3.0x para densidad muy, muy alta (xxhdpi) • 14.0x para densidad extremadamente alta (xxxhdpi)
712 px
36 px 16 px
400 px
| 23
| manual de identidad aplicativa | pantallas
EL diseño se ha ajustado a una grilla de 8 columnas de 36 px de ancho con un espaciado de 16 px.
| 24
| manual de identidad aplicativa | pantallas
pantalla home
| 25
| manual de identidad aplicativa | pantallas
pantalla login pantalla recupera contraseña pantalla signing pantalla perfil
| 26
| manual de identidad aplicativa |pantallas
pantalla inicio pantalla bienvenidaLa pantalla de bienvenida se mostrará, al logarse, solo mientras el usuario no tenga algún vídeo subido al servidor de Orlain en modo compartido.
Posteriormente se mostrará la pantalla inicio con información del número de vídeos en cada modo y las orlas ya creadas.
| 27
| manual de identidad aplicativa |pantallas
pantalla mis vídeos pantalla subir vídeo pantalla grabar vídeo
pantalla subir vídeo
| 28
| manual de identidad aplicativa |pantallas
pantalla mis orlas pantalla tomar foto
pantalla foto todo
| 28
| 29
| manual de identidad aplicativa |pantallas
pantalla edición vídeo pantalla vídeo compartido
En la pantalla edición de vídeo el usuario podrás recortar el vídeo, y otorgar permisos para que el vídeo esté disponible para todos los compañer@s o sólo para aquellos seleccionados.
El botón de editor de orlas aparece desactivado si el usuario no ha subido algún vídeo en modo compartido.
pantalla compañer@s
| 30
| manual de identidad aplicativa | pantallas
pantalla vídeo personalizado
El botón para enviar el vídeo está desactivado hasta que se haya elegido por lo menos un compañero.
Al tocar en la zona para escribir el nombre de los compañer@s a buscar se implementará el siguiente teclado:
pantalla selección compañer@s pantalla selección compañer@s 2
| 31
| manual de identidad aplicativa | pantallas
pantalla orla textopantalla orla vídeos pantalla orla estilo
| 32
| manual de identidad aplicativa | pantallas
pantalla visualizar orla pantalla renombrar orla
| 33
| manual de identidad aplicativa
navegación
| 34
| manual de identidad aplicativa | navegación
mapa de sitio
| 35
| manual de identidad aplicativa | navegación
flujo de navegación del proceso de registro
| 36
| manual de identidad aplicativa | navegación
flujo de navegación del proceso de grabación de vídeo
| 37
| manual de identidad aplicativa | navegación
flujo de navegación del proceso de creación de la orla