INTRODUCCIÓN

AL DISEÑO
MULTIMEDIA
Diseño Multimedia

Bloque 1
Alumno: Norberto Calapucha

Carrera: Tecnología superior en

desarrollo del software

Docente: Ing. Fernando Nuñez.

Asignatura: Diseño y Multimedia

 DISEÑO
MULTIMEDIA

Introducción al diseño multimedia

1. Los sistemas multimedia

El rápido desarrollo de la tecnología y de la informática está proporcionando herramientas revolucio-
narias en todos los campos de la comunicación. En este sentido, para iniciar a englobar el tema de los
sistemas multimedia se deben comprender como el conjunto de herramientas caracterizadas por la ge-
neración, almacenamiento, manipulación, procesamiento, transmisión e interpretación de la información
que puede estar presentada como una imagen, sonido, video o animación.

Para lograr esto son necesarias herramientas digitales que requieren hardware y software de creación como
componentes básicos para desarrollar los distintos soportes de comunicación antes mencionados de una
forma interactiva creando un vínculo participativo con el usuario.

Los recursos indispensables sobre los que se basan los sistemas multimedia son:

⚫ Audio. Se conforma por sonidos, puede ser música, palabras, ruidos, efectos sonoros que dan
matices expresivos y que refuerzan los mensajes.
⚫ Imagen. Integrado a su vez por el grupo de gráficos (texto, fotografías, ilustraciones, animaciones,
video, diagramas y 3D) que provoca emoción, da ambientación y representación creativa.

Los componentes básicos de un sistema multimedia son mucho más complejos que un hardware y un
software, conllevan un gran volumen de información. Además, muchos no son estáticos, sino que se
ac- tualizan de acuerdo con las necesidades de quien los manipula. Esto explica que la multimedia
necesite de un hardware especial.

El objetivo de comprender los sistemas multimedia es reconocer los elementos que conforman el
diseño multimedia, a través de su origen, definición, características y relevancia para poder utilizarlos de
manera correcta.

1.1. Definición de multimedia

El término multimedia se refiere o indica la utilización por parte del usuario a través de múltiples
medios, utilizada en el contexto de las tecnologías de la información y en los múltiples intermediarios
entre el emisor y el receptor de información. En otras palabras, multimedia son los medios que se
utilizan para transmitir, mostrar, almacenar o percibir la información.

2
DISEÑO
MULTIMEDIA

La multimedia también puede definirse como la combinación de información visual y auditiva, imagen,
texto, animación, gráficos, sonido y video, presentada de manera secuenciada, ya sea estática o diná-
mica, por medio de la computadora u otros medios electrónicos, en su mayoría de los casos
generando una interacción con el usuario. Para su reproducción requiere de tecnología digital.

La multimedia fácilmente conduce a la impresión de ser un asunto de ejecución, debido a su poder

esti- mulante derivado de los diversos medios antes mencionados y de sus habilidades y destrezas;
sin em- bargo, no es del todo así. Es verdad que puede ejecutarse con el software adecuado o incluso
de manera intuitiva, pero el resultado no dejaría de ser debido al aprendizaje empírico, en cuyo caso
se alejaría de lo que la multimedia propone; crear un plan o proyecto.

¿Qué es el diseño multimedia?

El diseño multimedia se relaciona directamente con las necesidades del usuario para lograr un
objetivo, y para conseguirlo, la organización y desarrollo visual de una proyección multimedia tendrán
que incor- porar diversos elementos de las técnicas de lenguaje de la imagen y aplicarlos al medio
específico que tendrá la presentación multimedia.

El diseño multimedia, entonces, es capaz de integrar de manera estratégica, elementos básicos de

comunicación, como por ejemplo la interactividad, junto con aspectos del diseño en sus diversos
sopor- tes. Propone un aspecto innovador para desarrollar su contenido, apoyado en el dinamismo
visual, que capture la atención del usuario, y utiliza en su proceso de creación medios de expresión
digitales con el fin de comunicar. A su vez, abarca diferentes ámbitos y trabaja en sintonía con el
desarrollo constante de nuevas tecnologías. Ejerce su influencia en diversas áreas como la
educación, el entretenimiento, el arte, los entornos y realidad virtual y los videojuegos, entre otras; y
destaca en cada uno por el manejo de la imagen, su diseño, el diseño web e ilustración y la
animación.

3
DISEÑO
MULTIMEDIA

1.2. Hipertexto

El hipertexto es una de las tantas tecnologías de la información que hacen posible la navegación y el
enlace de la información textual o gráfica. Tiene como función principal organizar la información a
través de un entramado de nodos que son bloques de contenido conectados gracias a una serie de
enlaces que permiten vincular la información relacionada con las preferencias o necesidades
particulares de infor- mación que se busque representar en la proyección multimedia.

El hipertexto no se limita a información escrita o textual, a pesar de su nombre puede enlazar con
imáge- nes, documentos audiovisuales, sonidos, páginas web enteras o cualquier otra forma de
acción digital. A la combinación de estos formatos se le denomina hipermedia.

El hipertexto más conocido es la World Wide Web y cualquier hipertexto puede interpretarse por
medio de un navegador. A la acción de conectarse de un hipertexto a otro hipertexto por medio de
internet se le conoce como navegación.

1.3. Navegación

La estructura realizada en una aplicación multimedia es de gran importancia debido a que determina el
grado y modo de la interactividad que tendrá la aplicación, por esto, la selección de una estructura
condiciona al sistema de navegación empleado por el usuario a su interacción con la aplicación. No se
considera que existan estructuras mejores que otras, en realidad depende de la finalidad de la
aplicación multimedia.

Los sistemas de navegación más comunes en la estructura de las aplicaciones son:

⚫ Lineal. Como su nombre lo dice, es un sistema de navegación recto o secuencial para acceder
a diferentes módulos de la aplicación, por lo que únicamente se puede seguir un determinado
recorrido.
⚫ Reticular. Permite que el usuario tenga total libertad para elegir los diferentes recorridos cuando
navega por el programa, adaptados a sus necesidades, deseos y conocimientos. Es la más
adecuada para aplicaciones relacionadas a la consulta de información.

4
DISEÑO
MULTIMEDIA

⚫ Jerarquizado. Es la combinación las dos modalidades antes mencionadas. Es un sistema muy

utilizado debido a que cuenta con las ventajas de los dos sistemas anteriores; por un lado, tiene la
libertad de selección por parte del usuario del sistema reticular, y por otro lado, la organización de
la información del sistema lineal, atendiendo a su contenido y dificultad.

1.4. Ramificación

Se conoce como ramificación a la capacidad o habilidad que tiene un sistema para responder a las necesi -
dades del usuario, dándole los datos precisos entre todos los datos disponibles. Gracias a la ramificación
cada usuario puede acceder a lo que le interesa y necesita prescindiendo del resto de datos, para
esto es indispensable generar un mapa de arquitectura de la información, en el cual se ramifican los
datos disponibles jerarquizando su importancia de acuerdo con las necesidades del usuario.

1.5. Transparencia

En cualquier presentación de información el usuario final debe enfocar su atención en el mensaje que
se quiere exponer, más que en el medio empleado para que pueda llegar al mensaje sin estar
obstaculizado por la complejidad del medio.

La tecnología de hardware debe ser lo más transparente que se pueda, permitiendo al usuario tener
fácil acceso a la información de manera rápida.

5
DISEÑO
MULTIMEDIA

1.6. Interacción

La interacción es la capacidad de un sistema multimedia para permitir al usuario poder controlar acciones
y respuestas, y no únicamente ser un observador cuando se presentan ciertos elementos. Esto
permite que el usuario explore la estructura del sistema en la secuencia y momento que él decida.

Por este motivo, es necesario comprender las acciones que tendrá el proyecto multimedia, y el grado
de interacción que tendrá con el usuario, en otras palabras, el nivel de acción y su reacción, como
tocar la pantalla, introducir texto, realizar determinadas acciones con ayuda del mouse o las flechas,
entre otras acciones. El sistema de navegación determinado para el usuario viene subordinado por la
estructura de la aplicación, debido a que ésta debe atender a la finalidad y características de la
aplicación multimedia interactiva.

1.7. Hipermedia

Hipermedia = Combinación del hipertexto y la multimedia

La hipermedia se define como la estructura que liga la información del hipertexto, con la multimedia,
por medio de hipervínculos que pueden ser botones o imágenes, con los cuales el usuario navega y
controla la información.

A su vez, es un medio de comunicación que llega a los usuarios rápidamente por medio de diversos
canales sensoriales organizados por asociación de ideas relacionadas. Se considera hipermedia a las
páginas web que integran información en distintas formas, por ejemplo, texto, gráficos, sonidos y vídeo,
entre otras.

6
DISEÑO
MULTIMEDIA

1.8. Usabilidad

La usabilidad web es el nivel de facilidad de uso que tiene página web, para los usuarios que entran e
interactúan con ella.

Hablando de la facilidad de acceso de un sitio web, se busca siempre que el sitio sea amable y fácil
de navegar en él, es decir que sea lo más claro posible y no se pierda entre los contenidos, que los
menús sean fáciles de encontrar y que se logre cumplir con los objetivos del sitio web, ya sea
informar, comprar, descargar, etcétera.

Por este motivo debemos tomar en cuenta la usabilidad al momento de diseñar, desarrollar y/u
optimizar un sitio web. Entre los beneficios que podemos encontrar en la usabilidad destacan:

⚫ Mayor satisfacción de los visitantes

⚫ Mejor experiencia de uso
⚫ Mayor comunicación usuario y empresa
⚫ Aumento en el tráfico
⚫ Aumento en la duración de las visitas en la web
⚫ Disminución en el porcentaje de rebote
⚫ Lograr que los usuarios vuelvan a visitar la web
⚫ Generar mayores recomendaciones
⚫ Hacer que el usuario se familiarice con la página
⚫ Aumentar los ingresos y las ventas de la página

7
DISEÑO
MULTIMEDIA

2. Principios básicos de la edición digital para el diseño web

En el diseño web, al igual que en cualquier disciplina del diseño, existen estilos y tendencias influencia -
das por una serie de factores sociales y tecnológicos. El factor tecnológico, como era de esperarse, ha
condicionado el diseño web desde el inicio de la World Wide Web, debido a su estrecha relación con la
tecnología, no sólo en aspectos técnicos, también en su concepción, como es el caso del diseño
orienta- do a dispositivos de menor tamaño que va desde un SmartTV, computadora de escritorio,
laptop, tablets y smartphones a lo que se le ha definido como Responsive Design.

Crear un sitio web atractivo, profesional y funcional es el objetivo de cualquier diseñador web, la orga-
nización y las buenas prácticas al desarrollar un sitio web comienzan desde su diseño, por lo que hay
elementos importantes para tomar en cuenta. Se pueden ahorrar recursos de una manera significativa
al momento de la implementación de un sitio web si se tiene una comprensión correcta de la
estructura, maquetación y compresión de código.

A continuación, se enlistan las características básicas que constituyen una página de internet.

⚫ Texto. Es el elemento más importante y significativo de cualquier sitio web debido a que los
usuarios navegan principalmente en busca de información expresada en hipertexto. Al calce, que
en mercadotecnia digital significa tener datos o información contundente y eficaz, le ayudará a
nuestro sitio a posicionarse en un mar de páginas que hablen de un mismo tema; la ventaja por
excelencia de tener un texto auténtico y claro nos puede ayudar a llevar más tráfico orgánico (SEO)
que ponga un diferenciador ante nuestra competencia, para obtener así, un sitio web exitoso.
⚫ Imágenes. No se debe abusar de la cantidad de imágenes por el riesgo de aumentar el peso de
la página innecesariamente, y, por lo tanto, aumentar los tiempos de descarga que hacen que el
usuario abandone el sitio. A pesar de esto, hay que considerar que las imágenes representan una
parte muy importante del contenido web, pues aumentan el atractivo visual y ofrecen información
importante al usuario, para que, de esta forma, obtenga una navegación más intuitiva y
entretenida durante su estancia.

Todo lo que compone el diseño y parte del desarrollo de un sitio web corresponde al diseñador web,
ya que es indispensable en el proceso que se conoce como Front-End.

Podemos definir el Front-End como las tecnologías de diseño y desarrollo web que corren en el navegador,
dando como resultado un sitio web, refiriéndonos sólo a lo que es visible para el usuario final, como
las imágenes, texto, animaciones, menús, etcétera. Mientras que su contraparte lo llamamos como
Back- End, que se refiere a lo que hace funcionar una web, lo que el usuario no ve a simple vista, como
una base de datos, el código que hace funcional un sitio, etcétera.

8
DISEÑO
MULTIMEDIA

2.1. Composición de páginas

Los componentes de una web se adaptarán convenientemente a las necesidades de comunicación

que se tengan como objetivo en cada desarrollo web, pero existen elementos a tomar en cuenta que
son indispensables para una buena navegación dentro del sitio que es vital para la experiencia de
usuario.

De acuerdo con Fogg (2002), en un estudio realizado por la Universidad de Stanford se demuestra
que las páginas web con diseños correctos son más aceptadas por el usuario que navega en ellas, y
por lo general suele ser más sencillo interactuar con éstas (ver primer cuadro).

La Cabecera El header. Este elemento es fundamental para tu sitio, ya que le permite al usuario identificar
un grupo de elementos que le ayudan a la navegación, permitiendo que tengan una buena
experiencia de usuario; dentro del header podemos incluir diferentes componentes como:

⚫ Logotipo. Posicionado naturalmente en la parte derecha o bien al centro de tu header, garantiza

una fácil identificación de tu empresa o marca. Desde otro punto de vista el hecho de que el logo
se posicione fijo en la parte superior del sitio nos permite tener un componente clave para la
navegación: irá acompañado de un enlace que nos llevará de regreso a la página principal del
sitio; siendo un elemento fundamental en la navegación y experiencia de usuario, busca de forma
fácil e intuitiva interactuar con tu sitio web.
⚫ Menú de navegación. Para una correcta distribución dentro de tu sitio es indispensable tener un
menú de navegación principal para tener un fácil acceso a las diferentes páginas con la que ésta
cuenta. Considerando la estructura y jerarquía de la información, se recomienda posicionar un
menú lineal o desplegable de acuerdo con las necesidades de tu sitio. Así, de acuerdo con Soler
(2019), para crear un menú desplegable hay que cuidar la jerarquía y la navegación, la saturación
de información o el mal uso de colores puede hacer que el usuario abandone la página y tomar
en cuenta que los sitios en la actualidad responden al ancho de la pantalla de acuerdo con el dispositivo en
el que se visualice. Para dispositivos con dimensiones inferiores a las 14 pulgadas, existen
soluciones, por ejemplo, el denominado menú hamburguesa que funciona de manera que el usuario
pueda mostrar u ocultar la información de un menú según sus necesidades.
⚫ Menú de Idiomas. Otro elemento es un menú de idiomas, que es posible posicionar en la
distribución de nuestro header para indicar al usuario que se puede permitir seleccionar el idioma en el
cual se requiera visualizar el sitio web, esto funciona bien para marcas que tienen presencia
internacional.
⚫ Redes sociales. Tener presencia en la web es fundamental para generar más tráfico orgánico
hacia nuestro sitio web, por eso es importante tomar en cuenta dentro de la estructura de nuestro
header hacer mención iconográfica de las redes sociales con las que cuenta la marca, generando
algunos call to action que les permitan dirigirse a las cuentas oficiales en redes.
⚫ Información de contacto. Tomando en cuenta que los usuarios ingresan a nuestro sitio para
tener un contacto directo con una fuente oficial, es importante darle opciones de fácil acceso a
este elemento, naturalmente podemos colocar íconos, texto o bien ambos. Podemos generalizar
como información a un teléfono, correo, botón de registro o inicio de sesión, etc.

9
DISEÑO
MULTIMEDIA

Esta información no sólo debe ir en el header si no en diferentes partes de tu sitio.

El cuerpo

La experiencia de usuario dentro de tu web es un elemento importante y para obtener una cómoda
nave- gación se debe jerarquizar la información en cada uno de nuestros bloques, dando como
resultado fácil acceso de información al usuario dando un valor agregado a tu sitio. A continuación,
hacemos mención de algunas de estas secciones:

⚫ Slider o Carrusel de imágenes. Crear un banner con un Call to Action es beneficioso para tu sitio,
pero colocar un conjunto de banners nos da como resultado un slider o carrusel en donde podamos
mostrar imágenes o información importante, incitando al usuario a interactuar con éste para
obtener más información. Es recomendable no crear un carrusel con más de tres imágenes, dado
que esto puede afectar a la velocidad de carga del sitio web, que por experiencia propia induce al
usuario a abandonar la página.
⚫ Servicios. En esta sección dentro de tu sitio es importante recalcar un diferenciador de marca,
colocando así lo que ofrece nuestro producto o servicio que tenga un valor agregado. Para esta
sección es sustancial añadir una diagramación atractiva, añadir animaciones y call to actions e
imágenes que cautiven a tus visitantes y los lleve a querer conocer más acerca de lo que ofreces.
⚫ Casos de éxito. Para dar credibilidad a nuestro servicio o producto, es importante que
agreguemos una sección dedicada a que el usuario conozca casos de éxito, valoraciones, testimonios
y opiniones. Esto habla muy bien de tu marca y es una estrategia efectiva.
⚫ Formularios de contacto. Hoy en día un sitio web debe tener un formulario de contacto dentro
de su composición, acorde a las necesidades de tu sitio, éste puede ayudarte a resolver dudas,
generar leads y canalizar un contacto directo y oficial con el usuario.

10
DISEÑO
MULTIMEDIA

Footer (pie de página)

Identificado como la parte inferior de nuestro sitio, este elemento puede ser replicado en todas las páginas
que conforman tu sitio web, dentro de éste puedes poner tu logo, un menú de navegación rápida, enlaces
más visitados, información de contacto, aviso de privacidad, términos y condiciones, etc.

2.2. Formato y dimensiones

Millones de usuarios poseen un dispositivo con unas dimensiones de pantalla diversas que van desde
las 4 hasta las 5.5 pulgadas de media en smartphones y alrededor de 10 pulgadas en tablets, además
existen monitores de escritorio que llegan desde 13 hasta 50 pulgadas.

A la hora de navegar dentro de un sitio web en diferentes dispositivos, el diseño de las páginas puede
verse afectado acorde a la resolución en la que se visualice y dar como resultado un diseño poco
com- prensible para el usuario.

Éstas son las resoluciones de pantalla más comunes en todo el mundo a tomar en cuenta a la hora de
diseñar tu sitio web:

⚫ 360×640 (móvil pequeño): 22,64 %

⚫ 1366×768 (ordenador portátil medio): 11,98 %
⚫ 1920×1080 (escritorio grande): 7,35 %
⚫ 375×667 (móvil medio): 5 %
⚫ 1440×900 (escritorio medio): 3,17 %
⚫ 720×1280 (móvil grande): 2,74 %

11
DISEÑO
MULTIMEDIA

Diseñar con buenas prácticas es maquetar de la manera correcta, es decir, para que nuestra web esté
optimizada a todos los tamaños debemos comenzar a diseñar con las resoluciones más grandes, con
esto nos aseguraremos de que tu sitio web se vea profesional con imágenes en alta calidad que
generen gran impacto y mejoren la experiencia de usuario. Cabe destacar que lo ideal es diseñar el
sitio en tres partes para ordenadores, tablets y smartphones, así nos aseguramos de no dejar a la
interpretación del desarrollador el diseño de tu sitio en sus diferentes resoluciones.

2.3. Reticulación, márgenes y plecas

Diseñar con buenas prácticas es hacer uso de una retícula para crear una buena estructura en tu sitio
web. Esto consiste en colocar guías o líneas sobre las que ubicar tus elementos dentro de tu diseño,
consiguiendo así reforzar tu composición de forma racional.

A continuación, definiremos los elementos que constituyen una retícula:

⚫ Unidad. Es un bloque vertical de construcción básico de toda retícula.

⚫ Medianil. Se define como el espacio que separa una unidad de otra, es un espacio en que
proporcionan a la retícula algo de espacio para respirar.
⚫ Columnas. Múltiples unidades y medianiles juntos forman columnas que son los contenedores
reales en los que ubicar el contenido estratégicamente.
⚫ Sectores. Divisiones horizontales de las páginas que separan una sección de otra. Un aspecto
para tomar en cuenta es buscar que los bloques o sectores sean simétricos, esto genera un
agrado visual y aumenta la interactividad en el sitio.

12
DISEÑO
MULTIMEDIA

Para lograr una página web equilibrada y bien diseñada existe un sistema de retículas que ayudan a
organizar mejor nuestro contenido, por ejemplo, puedes utilizar retículas de 12, 6, 4 y hasta 3
columnas.

Una retícula de doce secciones permite que el diseño se pueda adaptar de acuerdo con las
necesidades y gustos del diseñador, haciéndola adaptable a bloques de 6, tercios o cuartos de
manera simétrica.

Al hablar de márgenes en diseño web es recomendable evaluarlas de acuerdo con las necesidades de tu
sitio y el dispositivo en donde se visualice para mejorar la experiencia de usuario, por ejemplo, en un
sitio como un blog que se visualiza en un ordenador queremos que el usuario tenga su foco de
atención en lo que es importante para él, de esta manera liberamos elementos con los márgenes
laterales para tener su atención en donde el diseño se lo permita. Al Calce cada elemento debe tener
su respectiva área de seguridad para que nuestro diseño sea funcional.

2.4. Tipografía, fuentes del sistema

Uno de los principales elementos dentro del diseño web es el uso de texto, pero a la hora de diseñar es de
importante elegir sabiamente el tipo de fuente que vas a utilizar dentro de tu web, enseguida
enlistamos algunos puntos que debes tomar en cuenta sobre el uso de tipografías en diseño web:

⚫ Código web. Para desarrollar un sitio es necesario tener en código CSS nuestra fuente
tipográfica, en ocasiones esto no siempre resuelve el problema y nuestro sitio se puede ver
afectado en distintos dispositivos cambiando la tipografía que asignamos por la más parecida, por
lo que elegir sabiamente una fuente que sea capaz de visualizarse en cualquier dispositivo o
navegador hará que el diseño sea constante para cualquier usuario.
⚫ Lectura en pantalla. Elegir una fuente ilegible puede incitar al usuario a abandonar el sitio, es por
eso que a la hora de asignar una fuente es recomendable utilizar una sans serif o sans.
⚫ Temática de la página. Cada tipografía tiene un tono de voz, por lo cual, de acuerdo con el tipo
de publicación que generes, es válido utilizar diferentes fuentes para comunicar el mensaje que el
usuario necesita.
⚫ Combinación de tipografías. Combinar tipografías puede resultar benéfico en tu diseño para
diferenciar un título de un párrafo o hacer énfasis en algún mensaje importante. De igual manera
que en el estudio del color en diseño web, en la elección tipográfica debemos tomar en cuenta que
no todas las tipografías son compatibles entre sí, y no todas facilitan la lectura y comprensión del
texto a los usuarios. No hay que dejar de tomar en cuenta que existen excepciones a la regla; sin
embargo, para poder saltarse las reglas primero debemos dominarlas.
⚫ Tipografías compatibles con diferentes navegadores. Verificar que las fuentes que utilizas en
tu sitio sean compatibles con la mayoría de los navegadores evitará que tu diseño se vea afectado
cuando alguno de ellos no tenga la capacidad de procesar la fuente que elegiste, como solución
existen sitios que comparten fuentes gratuitas compatibles con los navegadores más populares.

13
DISEÑO
MULTIMEDIA

Para elegir una tipografía adecuada para tu web debes tomar en consideración lo siguiente:

1. Texto o texto rasterizado. Utilizar efectos que hagan más atractivo un título, por ejemplo, puede
llegar a ser un problema en su desarrollo, ya que los estilos son limitados. Crear una imagen
puede ser útil e inteligente en algunos casos muy necesarios sacrificando el incremento de
kilobytes que implica aumentar la velocidad de carga de tu sitio.
2. Tamaños legibles en tu diseño. Como norma general para definir el tamaño de un texto sin
perder legibilidad es recomendable usar un tamaño de 11 a 12 pixeles como máximo y 8 o 9 pixeles
como mínimo.
3. Uso desmedido. Hacer uso desmedido de diferentes fuentes tipográficas pueden afectar la
legibilidad y distorsionar el diseño de tu sitio.

Ti pografía

Tipografía
Tipografía
Tipografía
Ti pografíaTipografía
TDiipsoegñraofWía EB
Ti pografía
Tipografía Tipografía

2.5. Aplicación de color

La teoría del color es una herramienta muy útil para diseñar un sitio web exitoso y llegar a las metas
de comunicación preestablecidas.

Los colores primarios son colores que no se obtienen de la combinación de ningún otro, y son rojo, amarillo
y azul. No obstante, eso sólo aplica al hablar de colores pigmento, al hablar de colores luz (monitores) los
colores primarios son (RGB) rojo, verde y azul.

Lo primero es describir la psicología del color. Se trata de un estudio del color en la percepción y conducta
humana, incluso pueden llegar a influir en los sentimientos de las personas. Dependiendo del color
que capta retina del ojo dentro de un sitio, por ejemplo, seguirán visitando el sitio si los colores tienen
armonía entre sí o la abandonaremos rápidamente si la combinación genera un contraste desmedido.

14
DISEÑO
MULTIMEDIA

Es fundamental que el desarrollador de una web sea consciente en cada una de las tonalidades del
dise- ño, los estímulos visuales tienen una gran influencia en nuestro cerebro, por lo que el color es un
aspecto esencial en un sitio web.

⚫ Azul. Las tonalidades azules están generalmente asociadas con sentimientos de confianza,
calidez, eficacia, seriedad, fuerza, productividad, serenidad, sabiduría y seguridad.
⚫ Rojo. Es un color generalmente asociado con asertividad, la estimulación sensorial, pasión, amor,
virilidad y peligro, por lo que debe usarse con su debido cuidado.
⚫ Verde. Se considera el color de la esperanza, seguridad, relajación y tranquilidad, también se
vincula normalmente con la fertilidad, la calma, armonía, naturaleza, suerte, paz, abundancia y
crecimiento, es uno de los colores que mejor perciben y procesan los ojos.
⚫ Amarillo. Junto con el rojo y el azul, forman los tres colores primarios. Suele relacionarse con:
felicidad, alegría, amabilidad, optimismo, creatividad, sabiduría, espontaneidad o concentración.
⚫ Rosa. Es un color generalmente asociado con la niñez, la feminidad y la inocencia, transmite
sensaciones de amabilidad, amor, delicadeza, honestidad y amor.
⚫ Naranja. Para hablar de alegría o diversión lo mejor es utilizar tonos naranjas. Transmite energía,
vida, ambición, calor, emoción o entusiasmo.
⚫ Blanco. Se trata de un color que transmite paz, humildad, bondad, pureza e inocencia, limpieza,
nobleza, sinceridad o seguridad.
⚫ Negro. Conocido como la ausencia de color, se asocia con la elegancia, poder, estabilidad,
sensualidad, juventud, sofisticación, fuerza, inteligencia, autoridad o formalidad.
⚫ Gris. Es un color de la gama de los neutrales, no tiene demasiada fuerza, pero tiene valor al
combinarlo y utilizarlo de manera adecuada, es asociado generalmente al profesionalismo,
elegancia, lujo y es un color atemporal.

2.6. Imágenes y archivos para web

Es difícil saber con exactitud qué tipo de archivo de imagen es correcto usar en cada diseño web. Si
se guarda una imagen con un formato equivocado, puede resultar en imágenes pesadas, borrosas,
logos sin detalles o fondos transparentes transformados en negro.

Para los navegadores existen 4 formatos de imágenes: jpg, png, gif y svg. Cada formato tiene sus propias
características y ventajas propias. Cuando hablamos de optimizar una imagen significa guardarla en
el formato más conveniente para lograr el menor peso posible del archivo final. El peso de tus
imágenes influye en la velocidad de descarga del sitio, una variable que puede decidir si el usuario se
queda o se va.

⚫ Formato .jpg: joint photographic experts group. Es el adecuado para guardar fotos o imágenes
con degradados. El formato .jpg admite millones de colores debido a que cuenta con 24 bits, lo
que ayuda a mantener el modo RGB de la imagen. Al guardar una imagen en .jpg se debe
seleccionar una escala de compresión y no se recomienda que sea menos a 75 unidades.

15
DISEÑO
MULTIMEDIA

⚫ Formato .png: portable network graphics. Es la más usada para iconos o marcas, este formato se
puede aprovechar para guardar imágenes sin fondo o con transparencia, algo que el jpg no puede
lograr. Una transparencia en formato png a diferencia de una con formato .gif no genera un halo,
lo que permite generar imágenes de mayor calidad e independientes del fondo.

Un archivo .png tiene dos opciones, png8 que cuenta con 256 colores y png24 para imágenes con
transparencia.

⚫ Formato .gif: graphics interchange format. Este formato reduce la paleta a 256 colores como
máximo. Una ventaja que lo hace muy diferente a los anteriores formatos es que éste guarda
secuencias de imágenes, dando como resultado una animación. En el momento de guardar una
imagen como gif, lo más importante es decidir la cantidad de colores porque de esto depende el
peso del archivo: cuanto menos color, más liviano.
⚫ Formato .svg: scalable vector graphics. Es el único formato vectorial y por lo tanto al guardar
imágenes en este formato podemos manipular su tamaño sin perder su calidad. Se puede guardar
directamente como .svg desde programas como Illustrator y puede visualizarse en un navegador.
Esto le da infinitas posibilidades de uso para web, especialmente combinado con el lenguaje
javascript que nos permite generar animaciones.

2.7. Bocetaje, maquetación electrónica y vinculación

Tanto en el desarrollo web como en el de aplicaciones e interactivos digitales, hay una serie de
procesos que conviene seguir, aunque muchos profesionales, en función del tipo de proyecto pueden
obviar alguna o pueden hacer más o menos hincapié en alguno:

⚫ Realización de un sketch
⚫ Creación de un wireframe
⚫ Realizar un prototipo

16
DISEÑO
MULTIMEDIA

Sketch. Pensemos en el sketch como un primer paso a la hora de diseñar, prácticamente implica realizar un
boceto para un proyecto que queremos crear; son nuestros primeros trazos sobre una hoja de papel.
La clave para un buen boceto es jugar con elementos básicos del diseño como la forma en que los menús
o cómo hacer que aparezca una característica para una parte en particular del contenido. Se
caracteriza por generar ideas más claras de cómo comenzar tu proyecto.

Wireframe. De acuerdo con Salgado (2015), es una ilustración bidimensional que sirve para
ejemplificar la distribución y estructura de los elementos de una página, prioriza la asignación de los
elementos en el espacio y la jerarquización del contenido según sus funciones y comportamiento
deseado.

El objetivo de éstos es definir en qué posición debe ir el contenido y en donde colocar diversos
bloques de tu web. Esto incluye menús de navegación, secciones de contenido, etcétera.

En los wireframes solamente se utilizan grises con tonalidades diferentes para diferenciar los elementos.
Para las imágenes se utilizan figuras geométricas con una cruz y para los textos barras horizontales
que vayan de acuerdo con el espacio que se va a designar para cada texto. El aspecto más
importante para tomar en cuenta es la funcionalidad del sitio y la experiencia del usuario. La prioridad
son los contenidos de la web.

Vinculación y prototipo. Los prototipos son representaciones de media y alta fidelidad que incluyen
o simulan la interacción entre páginas, es decir: la interfaz y experiencia de usuario. El prototipo define
sobre todo cómo el usuario navegará dentro de tu sitio web. Debido a esto la interacción debe estar
per- fectamente definida.

Los prototipos son casi nuestro producto final que sirven para evaluar con usuarios. Al tener una
funcio- nalidad simulada y un diseño más definido que el wireframe, son más adecuados para definir
si el sitio web diseñado tendrá una cómoda y fácil navegación para el usuario.

17
 REFERENCIAS

Fogg, B. (2002). Stanford Guidelines for Web Credibility. A Research Summary from the Stanford Persua-
sive Technology Lab. Recuperado de:

Salgado, C. (15 de septiembre de 2015). Sketchs, mockups, wireframes y prototipos. [Entrada en blog].
Recuperado de

Soler, M. (06 de febrero de 2019). Elementos que componen la estructura de un sitio web. [Entrada en
blog]. Recuperado de

18