Diseño web

(Introducción)
 Indice

01 El guión multimedia

02 Psicología del color

03 Tips
 El guión
multimedia
¿Qué es un guión?
Un guión es un texto o esquema que muestra de manera lo más clara y
detallada posible el contenido de una obra (película, libro, historieta,
juego, programa de radio o televisión, web, etc).

Dicho de otra manera, un guión muestra de manera visual las indicaciones

de todo aquello que se requiere para poner en práctica y finalizar de
manera exitosa la obra.
¿Qué es un guión multimedia?
El GUIÓN MULTIMEDIA es un documento que contiene una descripción
detallada de todas y cada una de las escenas del producto audiovisual.

Es muy útil para poder estimar los recursos técnicos y humanos.

De igual manera, sirve para orquestar, organizar y dirigir la estructura y los

contenidos de una aplicación interactiva multimedia con la finalidad de
conseguir un producto final lo más parecido posible a las exigencias
finales.
Características

● Es el elemento inicial de la producción

● Es la herramienta directriz para la dirección técnica
● Es una guía para los desarrolladores
● Es una previsión de presupuesto humano y técnico
Fases

● Idea
● Sinopsis
● Presentación
● Storyboard
○ Grafo general
○ Grafo exhaustivo
Idea

Motivo principal para la realización de la aplicación. Debe concretarse en

un máximo de 2 líneas. Sencilla y de rápida comprensión.

Ejemplo:
En “Age of Empires” el usuario es el guía de una tribu en la edad de piedra
y su misión es dominar el mundo creando y conquistando imperios.
Sinopsis
Desarrollo más amplio de la idea original. Ésta debe ser expandida entrando
en detalles poco concretos e ideas generales, destacando lo esencial y
ofreciendo una idea global del contenido de la aplicación/obra.

Ejemplo:
Con la ayuda de un grupo de amigos y valientes aliados, Frodo Bolsón
emprende un peligroso viaje hacia el Monte del Destino con la misión de
destruir el Anillo Único. Pero Sauron, el Señor Oscuro creador del Anillo, envía
a sus servidores para perseguir al grupo. Si Sauron logra recuperar el Anillo,
será el final de la Tierra Media. Este inmortal relato sobre el bien y el mal, la
amistad y el valor, te transportará a un mundo más allá de tu imaginación.
Presentación
Debido a la singularidad de algunos tipos de proyecto multimedia en los que
su creación es “no lineal”, se redacta la presentación antes de pasar al
storyboard.

El objetivo es describir con mayor detalle las características del proyecto y su

interacción con el usuario.

La finalidad es doble; por una parte tiene una finalidad didáctica (ayudando al
cliente a la finalidad y uso concreto del proyecto), y por otra parte persuasiva
(contribuyendo a vender el proyecto)
Storyboard
Clásicamente se relaciona el storyboard con el mundo cinematográfico.

Es una herramienta visual que constituye el boceto de un guión. Cada viñeta

corresponde a un plano (en el mundo cinematográfico).
Storyboard
Storyboard
Storyboard
Funciones:
● Plasmar de forma gráfica la estructura de los contenidos y sus
interacciones
● Servir de guía para todo el equipo, incluído el cliente.
● Permite transcribir acciones, estructuras e interacciones complicadas de
explicar verbalmente y que podrían llevar a equívoco.
● Documento flexible que permite hacer ajustes al equipo.
● La corrección de problemas en el storyboard es menos costosa que en
estadios más avanzados.
● Ayuda a ver la estructura general del contenido de la aplicación y ver su
magnitud.
Storyboard
Psicología
del color
Psicología del color
La psicología del color se refiere al estudio complejo de cómo
los colores definen la percepción humana del mundo.

El cerebro humano experimenta ciertas reacciones fisiológicas

como reacción a ciertos colores.

Una mala elección de los colores en el sitio web puede hacer

que nuestro target se sienta incómodo y decida abandonar la
página antes de tiempo.
Psicología del color
Debemos también tener en cuenta que la experiencia
personal de cada uno será determinante para la asociación
emocional que un color evoque en el usuario.

Los sentimientos, actitudes y valores que se asocian a un

color, son una generalidad que debe aplicarse, puesto que es
imposible (al menos de momento), variar la paleta de colores
de una web dependiendo del usuario.
 Azul
Se asocia con: Cuando usarlo:
● Calidad ● Centros de salud
● Calma ● Ciencia
● Paz ● Tecnología
● Confianza ● Política
● Seriedad ● Servicios públicos
● Inteligencia ● Entidades bancarias
● Seguridad
● Frialdad
● Pasividad
● Soledad
Verde
Se asocia con: Cuando usarlo:
● Crecimiento ● Blogs de viajes
● Salud ● Turismo
● Naturaleza ● Comercios de salud
● Calma ● Mensajes de validación
● Bienestar ● Vida saludable
● Dinero
● Relax
● Buena suerte
Amarillo
Se asocia con: Cuando usarlo:
● Felicidad ● Sitios infantiles
● Alegría ● Decoración
● Optimismo ● Belleza
● Juventud ● Viajes
● Mala suerte ● Productos familiares
● Cobardía
Rojo
Se asocia con: Cuando usarlo:
● Pasión ● Restaurantes
● Amor ● Sitios deportivos
● Emoción ● Alertas de error
● Movimiento ● Moda
● Guerra
● Fuego
● Peligro
Naranja
Se asocia con: Cuando usarlo:
● Energía ● Botones acción
● Diversión ● Tiendas
● Creatividad ● Entretenimiento
● Aventura ● Infantiles
● Entusiasmo
● Advertencia
Negro
Se asocia con: Cuando usarlo:
● Elegancia ● Joyas
● Lujo ● Productos de lujo
● Sofisticación ● Concesionarios de coches
● Poder ● Moda
● Seriedad ● Cosméticos
● Misterio
● Muerte
● Tristeza
Blanco
Se asocia con: Cuando usarlo:
● Pureza ● Salud
● Luminosidad ● Artículos de lujo
● Limpieza (combinado con negro o
● Minimalismo dorado)
● Sinceridad ● Estilo nórdico
● Inocencia
● Higiene
Marrón
Se asocia con: Cuando usarlo:
● Tierra ● Gastronomía
● Naturaleza ● Animales
● Fiabilidad ● Finanzas
● Estabilidad
● Amistad
Colores a evitar
Todos los colores son igual de válidos, pero entendiendo la
psicología del color, lo ideal para un centro médico sería una
combinación de azul/blanco/verde y evitar combinaciones
como rojo/negro.

De igual manera, para un público infantil es mejor elegir una

combinación blanco/amarillo/naranja/verde en vez de
negro/marrón/gris
Armonía del color
● Colores monocromáticos: Diferentes tonos de un mismo
color.

● Colores análogos: Situados próximos en la gama

cromática

● Colores complementarios: Situados en el lado opuesto

de la gama cromática y que ayudan al contraste

● No abusar de los colores: 2 o 3 son suficientes. Intentar

que haya un color predominante
Armonía del color
Tips
Tips
● Usar imágenes de calidad
● Optimización de imágenes para que carguen rápido
● Piensa SIEMPRE en tu público objetivo
● Invierte en tu nombre de dominio
● IMPORTANTE: Definir bien el logo (con fondo transparente)
● Tipografía sencilla de leer
● Prestar atención al SEO
● Prestar atención a los requisitos legales de tu web
Tips
● Mantén el sitio limpio
● Utiliza la jerarquia visual (forma Z)
● Cuida especialmente la versión móvil de tu web
● Los títulos son MUY importantes (h1, h2…)
● No aburrir al usuario con textos demasiado largos
● Respeta la imagen y colores de tu marca
● Si tienes un blog, actualizalo
● Actualizar el contenido de la web
● Tener claro quien es tu público objetivo y hacer la web para
ellos