Apuntes Disseny Comunicación Audiovisual
Apuntes Disseny Comunicación Audiovisual
Apuntes Disseny Comunicación Audiovisual
Según Dan Saffer en Desinging for Interaction hay tres escuelas de pensamiento que se
centran en los objetivos del diseño interactivo:
a) Tecnológico: hacer que la tecnología -especialmente digital- sea fácil de usar. Los
diseñadores de interacción convierten el trabajo realizado por programadores e
ingenieros en un producto accesible para la gente.
b) Interacción social: facilitar la comunicación entre los usuarios que utilizan los
productos.
c) Conductista: integrar las dos vertientes mencionadas anteriormente. Dar lugar a la
funcionalidad de los dispositivos y el feedback hacia el usuario.
1
DISEÑO
El término se refiere tanto al proceso creativo de crear algo nuevo como a los objetos que son
el resultado de dicho proceso. El diseño no suele seguir un proceso lineal, sino que en su
desarrollo se van dando una serie de exploraciones e interacciones.
- Elementos de composición: colores, tipografías, puntos/líneas y formas
- Elementos de imagen: fotografías, ilustraciones, símbolos e iconos
- Elementos audiovisuales: videos, animaciones y sonidos
INTERACTIVIDAD
Hace referencia a la respuesta dinámica de los componentes, dispositivos y aplicaciones
frente a la interacción de los usuarios. Los sistemas interactivos tienen como objetivo
facilitar al usuario la visualización, procesamiento, almacenamiento y transmisión de la
información.
CENTRADO EN EL USUARIO
Da prioridad a los usuarios mientras se realiza el proceso de diseño con el fin de que el
resultado final sea un producto disfrutable con un uso sencillo. Esto se consigue pensando en
qué quieren las personas, conectando a la gente, implicando a los usuarios y diseñando para
la diversidad.
INTERFAZ
Son las partes del sistema con las que el usuario entra en contacto física, perceptual y
conceptualmente.
- Fisicamente: cuando pulsas botones o mueves controles, el dispositivo interactivo
responde proporcionando feedback sobre dichas acciones.
- Perceptualmente: el dispositivo muestra información en la pantalla o reproduce
sonidos.
- Conceptualmente: interactuando con el dispositivo se hace uso de sus funciones a
través de un determinado lenguaje.
WIREFRAMES
2
Son una jerarquización de los contenidos distribuida de forma visual con una
esquematización de la interfaz. Gráficamente es simple porque su objetivo es visualizar la
distribución de los contenidos en la pantalla. Se utiliza en la creación de cualquier tipo de
interfaz digital.
Puede realizarse en papel, que suele ser el inicio de su diseño ya que se puede trabajar de una
forma mucho más abstracta centrada en las áreas generales. Después, normalmente se recurre
a herramientas digitales en las que se puede comenzar desde cero o con el prototipo en papel
como base.
2. SEMIÓTICA DE LA MARCA
¿Qué es el branding?
Es el proceso de hacer y construir una marca -la identidad de la misma- a través de un
conjunto de valores y principios empresariales que se manifiestan gráficamente -directa o
indirectamente- a través de la marca-.
No es sólo la identidad corporativa de una marca sino que también es una filosofía, una
actitud y unos valores que se manifiestan a través de ella.
3
LA MARCA
Es el elemento de identidad más importante de las empresas, en ella residen los valores
institucionales y comunicativos de la empresa a la que representa siendo el primer elemento
visible de la identidad corporativa de las mismas. Para que una marca tenga éxito ha de ser
original y, además, cumplir en su logo con los siguientes ítems:
- Es legible
- Es escalable al tamaño requerido
- Es distinguible
- Es memorable
Naming
Es el proceso de creación del nombre de una marca, se ha de conseguir un nombre sencillo,
estético, elegante, potente, claro y, sobre todo, diferente. Es necesario que reúna todos los
valores de la marca y que sea fácil de recordar.
Cuanto más sencillo sea de recordar y pronunciar, más éxito tendrá. Para ello es importante
que sean nombres cortos y que tengan el dominio en internet libre.
Para conseguir ese nombre se puede recurrir a técnicas como jugar con algún seudónimo o
sinónimo, utilizar las iniciales de alguno de los valores que queremos transmitir…
4
Los claims sirven para aportar un mayor valor a la marca y puede contener en él los valores
de la misma o alguna alusión más emotiva. Puede ser de gran ayuda para que el consumidor
asimile la marca y la retenga.
Ej. SONY (sería el nombre) MAKE BELIEVE (sería el claim)
Identidad corporativa
La marca puede ser un símbolo, un logotipo o una combinación de ambos.
b) Formas
ICONOS
Pueden ser realistas, metafóricos o simbólicos.
5
Sus usos más comunes son para informar, sin vinculación con una función interactiva o para
provocar una acción directa del usuario cuando los pulsa.
COLOR
Sirve para comunicar información e influencia a las personas tanto a un nivel físico como
emocional. En una página web o app de una empresa el color puede servir para:
- Atraer la atención
- Sugerir significados
- Agrupar elementos
- Realzar la estética
Para describir exactamente un color visto por el ojo intervienen tres variables: tono,
saturación y brillo.
menor saturación.
A la hora de elegir los colores para una web o app hay que usar normalmente tres grupos:
- Color/es principal/es: ocuparán las zonas más amplias y establecerán el tono general
del diseño.
- Color/es secundario/s: apoyarán los principales y suelen ser tonalidades bastante
cercanas.
- Color/es de subrayado: enfatizan determinadas partes de la web. Normalmente
contrasta con los anteriores.
Es aconsejable limitar la paleta de colores a lo que la vista puede procesar de una sola vez
(alrededor de cinco) y no ha de ser el color el único medio para ofrecer información.
6
Sobre el uso de los colores cálidos y fríos vemos que se usan colores más cálidos para
elementos en primer plano, fríos para fondos y en ocasiones gris claro para agrupar elementos
sin competir con otros colores.
En lo que respecta a la saturación vemos que:
- Los tonos saturados se usan para llamar la atención, son más dinámicos e interesantes
pero pueden provocar fatiga visual.
- Los tonos no saturados se usan cuando los resultados y la eficacia son la prioridad
porque se ven más profesionales.
La proporción del color también es destacable y hay que tener en cuenta que hay que regular
la variedad (la repetición de color excesiva da un resultado monótono), la extensión de area
del color (la desigualdad resulta más atractiva) y la presencia de un color predominante. Para
que esto se cumpla hace falta que los colores se repitan de forma equilibrada y con una
variedad armónica.
Por último hay que pensar también en el equilibrio, que se basa sobretodo en dos puntos:
7
- Las masas se desequilibran por la Ley de áreas o fondos: cuanto más grande es el área
a cubrir, menos saturado ha de ser su color y viceversa.
- Los contrastes se equilibran igual, es decir, cuanto más grande menos contraste
admite y viceversa.
Simbolismo de colores
No hay pruebas sobre que los colores tengan un efecto en las emociones o estados de ánimo
ni existe un simbolismo universal sobre ellos, pero sí que hay una creencia cultural
comúnmente aceptada de lo que evocan.
a) Rojo
- De los que más cansan, no debe usarse en grandes áreas
- No es muy adecuado para fondos pero funciona muy bien en botones
- Es un color de advertencia
b) Azul
- La primera asociación que transmite es la inmensidad del cielo o el océano
- Se asocia con lo masculino
- Frío, tranquilo y ordenado. Sugiere confianza, fidelidad, estabilidad e inteligencia
siendo así un buen color corporativo
- Efecto opuesto al rojo, produce tranquilidad, calma
- Aumenta la sensación de profundidad
c) Verde
- Situado en el centro del espectro
- Ambivalente, simboliza vida, crecimiento y esperanza pero también veneno y envidia
- Fertilidad (naturaleza)
- Estabilidad, seguridad y facilidad de percepción
- Puede significar falta de experiencia
d) Amarillo
- Alegre
- Siempre es un color claro
- El color más reflectante
8
e) Púrpura
- Mezcla la estabilidad del azul y la energía del rojo
- Suele asociarse con la sabiduría, la creatividad, el misterio y la magia
- En tonos claros es visto como femenino
f) Naranja
- Combina la energía del rojo y la felicidad del amarillo
- No es tan agresivo como el rojo
- Se asocia con la diversión, la luz del sol, la juventud o la creatividad
TIPOGRAFÍA
La tipografía es la familia de caracteres que incluye diversos tamaños y estilos de fuente
mientras que, la fuente en sí es una representación específica de una tipografía con un tamaño
y estilo fijo.
9
Historia reciente de la tipografía
- 1076: primera letra estilo Gótico muy ornamentada y difícil de leer
- 1685: letra Janson, trazos gruesos y fuerte contraste utilizada actualmente en libros y
revistas
- 1750: John Baskerville crea más de 200 fuentes entre ellas la Baskerville que se
utiliza para textos de gran formato
- 1820: aparecen en Alemania las primeras tipografías sin serifa
- 1916: en inglaterra Edward Johnston diseña para las señales de las estaciones de
metro una letra sin serifa de trazo consistente
- 1923: el diario The Times encarga la renovación de la tipografía y se crea Times New
Roman
- 1927: asociada con la Bauhaus aparece la tipografía Futura que basa sus caracteres en
el cuadrado, el triángulo y el círculo pero suavizados para ser más legibles
- 1957: aparece la tipografía Helvética con formas limpias y directas
- 1984: con la aparición de los ordenadores se crean nuevas tipografías que se pueden
digitalizar
b) Tamaño
No se recomienda utilizar en web cuerpos de texto inferiores a 10 o 12 puntos.
c) Contraste
El texto ha de contrastar lo suficiente con el fondo como para ser de fácil lectura.
10
d) Espacio
El texto ha de respirar, tanto entre caracteres individuales (interletrado) como entre líneas
(interlineado) para así ayudar a focalizar la atención.
El interletrado es el espacio horizontal que separa unas letras de otras y puede ser fijo o
variable y el interlineado es el espacio vertical que va desde una línea de base hasta la
siguiente.
Teniendo esto en cuenta existen caracteres monoespaciados (todas las letras ocupan la misma
cantidad de espacio horizontal) y espaciados en proporción.
Para las personas, es más fácil leer un texto cuando las letras varían de tamaño de forma
proporcional que cuando todas ocupan un mismo espacio.
e) Bloques de texto
Los textos pueden agruparse:
- Alineados a la izquierda
- Justificados
- Alineados a la derecha
Variar las dimensiones de un texto es una de las mejores formas de diferenciar contenidos
señalando la importancia relativa de cada elemento de la página.
f) Rotación
Se usa para dar interés y dinamismo a la composición pero manteniendo la legibilidad del
texto en el que se usa.
g) Formas
El empleo de formas geométricas para contrastar con los bloques de texto añade interés al
diseño.
11
Recomendaciones tipográficas para la web
- Color de la fuente acorde con el fondo
- Tamaño de texto adecuado y escalable
- No muchas tipografías distintas (dos o tres suficientes). En caso de usar distintas
tipografías, hay que igualar los tamaños para que las escalas se correspondan.
Junto con el color, la elección de la tipografía puede alterar el significado que asociamos a un
diseño. En una composición visual, el tipo de letra nos comunica de inmediato un tono o
sensación e incluso a momentos en el tiempo, lugares físicos o iconos culturales.
12
TEMA 2: ESTRATEGIAS DE USUARIO Y MODELOS
DE NEGOCIO
1. ESTRATEGIAS DE USUARIO: CUSTOMER JOUTNEY Y BUYER
PERSONA
CUSTOMER JOURNEY
- Identificar al cliente: ponerse en su lugar para entender y registrar las características
de ese viaje
- Entender las etapas del vínculo: comprender cómo se siente frente a casa una de las
interacciones que realiza con la compañía, servicio o producto
- Registrar indecisiones y motivaciones
- Mapear las interacciones entre personas y empresas
BUYER PERSONA
Es un arquetipo de cliente ideal de un servicio o producto. Contiene datos sociodemocráticos
concretos e información sobre aspectos como su conducta online, personal, profesional y de
la relación con la empresa.
Además, en todo el proceso hay que entender que si los cambios se aplican muy despacio, los
usuarios sienten que su experiencia es obsoleta y si se realizan muy deprisa, los usuarios se
quedan atrás.
13
Qué es una UX (experiencia de usuario)
Es lo que experimentan los usuarios antes, durante y después de entrar en contacto con una
página web. Abarca tanto el diseño como lo que representa una marca y lo que hace sentir a
sus usuarios.
Ambas cosas son complementarias: no hay buena experiencia de usuario sin un buen diseño
de interfaz y, a su vez, la mejora de este diseño hará que la experiencia de usuario sea mejor.
UX e UI han de ir de la mano para lograr cumplir el objetivo que se tiene en una web.
La UI y el concepto de Usabilidad
La UI es el conjunto de elementos de la pantalla que permiten al usuario interactuar con una
página web. La UI es el medio por el que una persona controla un software o hardware.
La usabilidad es el grado de facilidad de uso que tiene una interfaz de usuario (web, app…)
para los visitantes que entran e interactúan con ella. Una buena usabilidad es aquella que
permite a los usuarios una interacción sencilla, intuitiva, agradable y segura.
Uno de los expertos a nivel mundial en UI es Jakob Nielsen, quien ha desarrollado una serie
de mejoras en cuanto a usabilidad e interfaz en la web.
Según Nielsen, los elementos más importantes de una UI para conseguir que tenga una buena
USABILIDAD son los siguientes:
- Propósito del sitio: tiene que quedar claro a quién pertenece la web y qué funciones
permite realizar.
- Ayuda al usuario: el sistema de navegación tiene que estar a la vista y también tiene
que incluir un sistema de búsqueda adicional.
- Mostrar el contenido: tiene que estar explicado de manera clara y con elementos de
texto que ayuden a su lectura (como títulos, negritas, etc.).
- Diseño gráfico funcional: los elementos gráficos deben ir dirigidos a ayudar al usuario
en encontrar lo que quiere, y no solamente como adorno.
14
Diferencias entre UX y UI
2. MAPAS DE CALOR: Con los mapas de calor conseguimos tener datos reales sin
tener que hacer ningún test. Se colocan sobre el producto final y estos scripts, lo que
hacen es grabar el número de clics hechos, en la zona que han hecho click, el scroll
que hace el usuario, etc.
Es decir, queda grabada cada acción del usuario, en una serie de imágenes
superpuestas en la web, lo que nos permite ver, de manera acumulativa todos esos
clicks hechos por los usuarios.
15
Nos facilitará saber qué zonas son las más calientes, cuáles son las más frías, qué
menús funcionan mejor, o por dónde acceden los usuarios a cada sección.
Proceso de diseño
Construir prototipos
A la hora de construir prototipos hay que tener diferentes aspectos en cuenta para crear
productos intuitivos.
Hace falta construir modelos que simplifiquen la complejidad y que muestren un diseño
anticipatorio, que permita al usuario saber que se va a encontrar y cómo interactuar con ello.
Algunos aspectos a tener en cuenta son:
- En formularios, a la hora de elegir opciones, la lectura vertical es más cómoda que la
horizontal,
- CTA descriptivas (por ejemplo poner los botones importantes de un color que
destaque)
- No esconder información relevante, que aparezca siempre visible
- Botones que diferencien las acciones principales de las secundarias (con colores por
ejemplo)
- Ajustar los formularios al contenido esperado por el usuario (por ejemplo si tienen
que introducir un número de 9 cifras, dejar el espacio necesario para ese número)
- Contextualizar errores (si por ejemplo una contraseña está mal, marcar en rojo la
casilla de esa contraseña y no simplemente decir que hay un error en el formulario)
16
3. BRANDED CONTENT Y STORYTELLING
BRANDED CONTENT
Consiste en generar contenidos vinculados a una marca que permitan conectar a esa
marca con el consumidor.
Un claro ejemplo de Branded Content es el caso de Popeye, que surgió por la necesidad de la
Cámara de Productores de Espinacas de EEUU de fomentar el consumo de espinacas en los
niños de la generación de los años treinta y, al final, se les ocurrió desarrollar una tira cómica
de un marinero musculoso que se hacía fuerte al tomar espinacas.
De lo que se trata es de saber entender las necesidades del usuario y darle lo que necesita
17
Cada aspecto genera ingresos de una forma como podemos ver en la tabla a continuación:
18
¿En qué consiste?
Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho
de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de
usuario. Se caracteriza porque los contenidos e imágenes son fluidos. El término fue acuñado
en 2010 por Ethan Marcotte.
Para entenderlo mejor, los diseños de las páginas web están basados en columnas, entonces
con la filosofía del diseño adaptativo, si una web a resolución de PC (1028x768 px) tiene 5
columnas, para una tableta (800x600 píxeles) necesitaría sólo 4, y en el caso de un teléfono
inteligente cuyo ancho suele ser entre 320 y 480 píxeles las columnas usadas serían 3.
1. App nativa:
- Mejor adaptación a cada teléfono
- Mayor velocidad de ejecución
- Acceso a los recursos del teléfono: memoria, GPS, cámara, contactos…
- Facilidad para acceder a contenido offline
2. Web app:
Son aplicaciones web optimizadas para su uso desde un dispositivo movil.
- Multiplataforma (con algunos ajustes) e independientes de una plataforma concreta
- Tecnología más sencilla y con mayor base instalada
- Distribución independiente de los canales de los fabricantes de sistemas operativos
19
7. LOS APP STORE: APROBACIÓN DE APPS Y MODELOS DE
NEGOCIO
Proceso de aprobación de una app
Antes de ser publicadas tus aplicaciones deben ser revisadas por el team de cada una de las
tiendas. Debes tener en cuenta estas estimaciones para una buena planificación de
lanzamiento de tus apps. Es importante tener en cuenta que no podemos acelerar este proceso
ya que no intervenimos en él. Si tu app es rechazada no significa que no puedas intentarlo
nuevamente.
- App Store: El proceso de aprobación y publicación tarda de media 2 días laborables.
Según nuestras experiencias. Se prolonga si es necesario hacer cambios o mejoras
solicitadas por App Store.
- Google Play: El proceso de aprobación y publicación tarda de media 4 horas. Puede
ocurrir que necesites hacer mejoras por lo que se puede extender.
20
TEMA 3: MARKETING ONLINE Y POSICIONAMIENTO
EN INTERNET
21
- Posicionamiento en buscadores. Las acciones de posicionamiento permiten a los
anunciantes aparecer en las páginas de resultados, cuando un usuario realiza una
búsqueda relacionada con un producto o servicio determinado.
- Programas de afiliación. Una web afiliada busca enviar tráfico a la página del
anunciante. Un gran número de empresas se promocionan siguiendo este modelo de
pago. Estas campañas pueden ayudar a extender el radio de acción de una empresa y
aumentar sus ganancias. El afiliado recibe una comisión por la visita, registro o venta.
4. PROGRAMAS DE AFILIACIÓN
Los programas de afiliación usan distintos sistemas de pago:
- Coste o Pago por Click (Pay-Per-Click): El comerciante paga dependiendo del
número de visitantes que simplemente hagan un clic en un enlace que lo lleve a su
web. No tienen necesariamente que comprar nada para pagar al afiliado.
- Coste o Pago por Acción (Pay-Per-Action). El comerciante paga al afiliado cuando
este le envía un visitante que realiza una acción determinada. Dicha acción puede ser
rellenar un formulario, registrarse en una web, pedir una tarjeta de crédito, etc.
- Pay-Per-Lead: Una empresa que ofrezca este mecanismo pagará a los afiliados si uno
de los visitantes referidos se registra en un producto del comerciante, mostrando su
interés, sin tener de momento que realizar la compra. Esto significa que el visitante
tendrá que dar algunos datos personales en la web del comerciante, lo cual será
utilizado para conseguir la venta.
- Coste por Impresión: En las campañas a CPM (coste por mil impresiones) se paga un
precio fijo por cada mil veces que se visualice el anuncio. De este modo, a diferencia
de la publicidad a coste fijo, te aseguras de pagar solo por el número de personas que
vean tu publicidad. No obstante, tiene el inconveniente de que si tu anuncio no
consigue clics (hay muchos motivos: la creatividad no es atractiva, el banner aparece
en una mala posición, el soporte o sitio en el que se lanza no contiene a tu público
objetivo, etc…) pagarás igualmente.
22
5. SEO Y FACTORES ON-PAGE Y OFF-PAGE QUE INTERVIENEN
EN EL SEO
- No basta con contar con una página web atractiva, sino que, sobre todo, lo que hay
que conseguir es que los buscadores encuentren dicha página para que así puedan
dirigir tráfico hacia ella.
- Es importante conocer cómo funcionan los buscadores y hacer que la web esté
optimizada para facilitar su inclusión en los índices.
- El posicionamiento debe formar parte de una estrategia completada con otras acciones
de marketing online, como la creación de artículos y contenidos, la emisión de e-
mailings o newsletters o la puesta en marcha de campañas de publicidad.
23
6. FUNCIONAMIENTO DE LOS BUSCADORES
El acrónimo SERP significa Search Engine Results Page y hace referencia a las páginas de
resultados mostradas por un determinado buscador. Hay 2 tipos de resultados:
- Resultados Patrocinados: Presentan los resultados en el que las personas o empresa
que los respaldan están dispuestos a pagar si alguien hace clic.
- Resultados Naturales: Son aquellos que los buscadores presentan en respuesta a una
búsqueda del usuario acorde con el algoritmo y con la ubicación geográfica del
usuario.
Hay dos conceptos básicos, relacionados con el tipo de resultados que podemos obtener al
realizar una búsqueda:
1. SEO (SEARCH ENGINE OPTIMIZATION): Engloba las actividades y técnicas
destinadas a mejorar el posicionamiento de una página web en los resultados naturales
de un buscador y aumentar así el número de visitas recibidas. (Medio/largo plazo)
2. SEM (SEARCH ENGINE MARKETING): Conjunto de acciones de marketing,
dirigido a mostrar o mejorar el posicionamiento y el retorno de inversión de enlaces
patrocinados en buscadores. (Corto plazo)
24
- Los procesos de búsqueda son circulares. El buscador es capaz de identificar si el
usuario ha culminado la búsqueda en tu página web o ha vuelto a la hoja de resultados
y ha hecho clic en otro.
25
Indexación que beneficia al SEO:
1. Rendimiento de nuestra web (Mobile First)
- Velocidad de carga (peso)
- Ratio código texto
- Rendimiento y respuesta del servidor (velocidad y tipo de respuesta)
2. Facilitarle el recorrido
- Habilitar un sitemap (ver www.sitemaps.org)
- Trabajar con Google Search Console
3. Proporcionarle información de utilidad
- Estructura general del encabezado <head> indicando:
- Lenguaje
- Codificación utilizada
- Metaetiquetas
- URL canónica
Popularidad y SEO
Uno de los factores más importantes dentro del algoritmo de Google, es la popularidad o el
número de enlaces que recibe nuestro sitio Web.
Los factores que afectan a los enlaces que recibe nuestro sitio son llamados factores Offpage
(también llamados factores externos), porque se encuentran fuera de la programación de
nuestra página.
26
7. LA BÚSQUEDA DE PALABRAS CLAVE
27
8. SEM
- El SEM (Search Engine Marketing) es una estrategia de marketing digital a través de
la cual se busca promocionar marcas y sitios web mejorando su visibilidad en las
páginas de los resultados de los motores de búsqueda. A diferencia del
posicionamiento SEO, donde se ganan posiciones de manera natural, las campañas
SEM implican anuncios de pago.
- En los últimos años, el marketing en buscadores ha surgido como una de las
principales formas de publicidad a la que las empresas destinan gran parte de sus
presupuestos. La gestión de una campaña de enlaces patrocinados se ha convertido en
algo primordial para el negocio de numerosas empresas.
- No hace falta realizar grandes inversiones, ya que es el propio anunciante quien
decide cuánto quiere gastar en su campaña: la publicidad en buscadores se ajusta a
todo tipo de presupuestos. Además, la gestión de la misma se realiza desde un sencillo
panel de control.
28
9. GOOGLE ANALYTICS
Google Analytics es una solución de anaítica web para empresas o dueños de sitios web que
proporciona información muy valiosa sobre el tráfico del sitio web y la eficacia de acciones
de marketing.
29