manual identidad aplicativa ORLAINopenaccess.uoc.edu/webapps/o2/bitstream/10609/132726/2... · 2021. 6. 30. · | manual de identidad aplicativa | pantallas pantalla vídeo personalizado

| 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


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


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


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


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


Ubuntu Bold

Títulos y botones

Cuerpos de texto

Formularios y migas de pan


!@#$%^&*(),./?€¡¿{};:<>+-”~0123456789

Ubuntu Regular


!@#$%^&*(),./?€¡¿{};:<>+-”~0123456789

Ubuntu Light


!@#$%^&*(),./?€¡¿{};:<>+-”~0123456789

Ub

| 11


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


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


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


170 px - radio 3 px

36 px - trazo 4 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


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


| 18


10:03

birrete

toga

beca

fondo

ajustes

iconos y botonesedición de vídeo

| 19


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


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


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


EL diseño se ha ajustado a una grilla de 8 columnas de 36 px de ancho con un espaciado de 16 px.

| 24


pantalla home

| 25


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


pantalla mis vídeos pantalla subir vídeo pantalla grabar vídeo

pantalla subir vídeo

| 28


pantalla mis orlas pantalla tomar foto

pantalla foto todo

| 28

| 29


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


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


pantalla orla textopantalla orla vídeos pantalla orla estilo

| 32


pantalla visualizar orla pantalla renombrar orla

| 33


navegación

| 34

| manual de identidad aplicativa | navegación

mapa de sitio

| 35


flujo de navegación del proceso de registro

| 36


flujo de navegación del proceso de grabación de vídeo

| 37


flujo de navegación del proceso de creación de la orla

Documents

manual identidad aplicativa ORLAINopenaccess.uoc.edu/webapps/o2/bitstream/10609/132726/2... · 2021. 6. 30. · | manual de identidad aplicativa | pantallas pantalla vídeo personalizado