Introducción

El programa de formación tecnológica en Integración de Contenidos Digitales

pretende otorgar al aprendiz SENA los conocimientos necesarios para desarrollar
estrategias de planeación y producción de contenidos digitales y multimedia que
las Mipymes del país requieren en el contexto de la cuarta revolución industrial, tal
como se puede apreciar en el siguiente video:

https://www.youtube.com/watch?v=UxbAz3Z0KMQ

Este componente iniciará con la conceptualización del diseño, desde la perspectiva de las
composiciones gráficas y digitales, con la que conseguirá crear imágenes.
Posteriormente, se le entregará información que le posibilite la elaboración de piezas
audiovisuales, para que finalmente pueda integrar ambos productos en estrategias
digitales que consigan la operatividad, funcionalidad, visibilidad, o cualquier otro proceso
necesario que contribuya a la conversión digital de las empresas del país.

1
Diseño
La comunicación es una necesidad innata en los humanos como seres sociales, y
es también una herramienta fundamental de la vida en comunidad. A lo largo de la
historia de la humanidad, la comunicación ha permitido que se gesten todos los
desarrollos que conforman el mundo actual. En las distintas épocas de la historia,
los formatos (verbal y no verbal) y los canales en los que se produce la
comunicación se han ido ajustando a los fines para los que se comunica, aunque
el propósito fundamental continúa siendo el de transmitir ideas de un emisor a un
receptor con una intención determinada.

El diseño es una manera de organizar las ideas para plasmarlas en una

comunicación de tipo visual y puede aplicarse en muchas áreas: diseño gráfico, de
interiores, arquitectónico, industrial, de modas, editorial, publicitario, artístico,
diseño digital y diseño web, entre otros.
Como está relacionado con tantas áreas, el diseño podría definirse como toda
acción creadora que persigue una finalidad.
1.1 Diseño gráfico
El desarrollo del diseño gráfico como campo creativo específico, puede
entenderse estudiando su trayectoria a lo largo de la historia.

En la actualidad, el diseño gráfico hace parte de la vida cotidiana y está presente

en todas las áreas de la comunicación. Con la aparición de la Internet en los años
ochenta, se ha visto acelerada su evolución gracias a los computadores y los
nuevos programas informáticos gráficos que cambiaron el papel por la pantalla y
ofrecieron a los diseñadores la oportunidad de experimentar con el texto y la
imagen, permitiendo el nacimiento de nuevas corrientes y especialidades como la
creación y el diseño de páginas web.

Pese a todas las transformaciones tecnológicas y sociales, las bases del diseño
gráfico continúan siendo las mismas que comenzaron a escribirse hace cien años
atrás, aunque enriquecidas a través del tiempo y gracias a la tecnología.
Fundamentos del diseño
Como disciplina, el diseño gráfico busca transmitir un mensaje definido a través de
elementos visuales que obedecen a parámetros establecidos, que a su vez se
rigen por fundamentos artísticos que tienen por objeto generar sensaciones
visuales placenteras que logren la conexión deseada entre quien mira y quien
comunica.

Con la idea de facilitar la comprensión entre los distintos aspectos que involucran
un tema tan extenso como el diseño gráfico, se opta por diferenciar entre los
aspectos conceptuales y los prácticos; los conceptuales se tratarán como los
fundamentos, ya que permiten una perspectiva más global de los productos
diseñados: la composición, el color, y las leyes del diseño. Los aspectos técnicos
se definirán como los elementos más adelante.

a. La composición
Puede interpretarse como la conceptualización primera que da origen al diseño,
entendiendo este como un producto con un fin determinado.

Se refiere a la organización o disposición de elementos dentro del espacio visual,

con el objeto de construir una imagen que transmita una idea de manera sencilla y
directa a un público objetivo. La composición define la relación entre el tamaño,
texturas, colores, pesos, la escala, cantidades y todos los elementos que se
incluyan.
A continuación, se expondrán los principios de composición.

Principios de la composición
Variedad, jerarquía, Unidad, Contraste, Ritmo, Equilibrio, Proporción Aúrea.

Cada uno de los principios anteriores tiene su propia relevancia en la composición,

y se estudian con el objetivo de que, usados en conjunto, consigan transmitir con
éxito el mensaje acordado.

b. La teoría del color

Para hablar de color es necesario primero hablar sobre percepción, puesto que el
color en sí no existe. Se trata de un atributo de los objetos que solo es apreciable
cuando hay luz, y que se genera como resultado de la diferencia de percepción del
ojo a distintas longitudes de onda. Este fenómeno se conoce como “espectro" de
la luz blanca.

El color es el resultado de la descomposición de la luz blanca. Un rayo de luz

blanca, solar, al atravesar un prisma se descompone en varios colores…
Llamamos color luz al fenómeno óptico de reflexión de la luz sobre los cuerpos,
que al llegar a nuestra retina, nos permite captar ciertos estímulos que luego son
interpretados como color por nuestro cerebro. (Hernández Rentería,1976, p. 8).

En la retina hay unas células llamadas conos que reaccionan de diferente forma
según la longitud de onda de la radiación que les llegue. Esto se debe a que los
conos poseen distintas sustancias sensibles a una longitud de onda determinada,
aunque, en menor medida, también reaccionan ante longitudes de onda próximas
por encima y por debajo.

La percepción del color implica que nos lleguen ondas luminosas a los ojos, donde
se convierten en impulsos nerviosos que se envían al cerebro para que sean
interpretados y nos produzcan la sensación del color. (UCA, s.f., p. 15).

Isaac Newton fue quien descubrió que la luz blanca del sol al ser refractada, es
decir, al cambiar de dirección pasando oblicuamente de un medio a otro con
diferente densidad, se dividía en cada uno de los colores con una frecuencia
distinta de luz, dependiendo de una mayor o menor desviación.

Para entender mejor este concepto, a continuación se presenta la figura del

prisma de cristal.
Figura 1 Newton y el espectro de color

Respecto a la teoría del color, se puede hablar de dos tipos: la de la síntesis

aditiva y la de la síntesis sustractiva.

Teoría de la síntesis aditiva

Según Newton, los colores rojo, verde y azul, componen la luz blanca y no pueden
producirse mediante la mezcla de ningún otro color, por lo que se consideran
como colores primarios o colores RGB, (abreviatura del inglés Red, Green, Blue).
A partir de la combinación de dos colores primarios se obtienen colores
secundarios o colores aditivos secundarios, que serían el cian, el magenta y el
amarillo. Si se combinan los tres colores primarios se obtiene el color blanco,
mientras que si se combinan los tres colores secundarios, se obtiene el color
negro. La combinación de un color primario y uno secundario da como resultado
los colores terciarios.

Esta teoría se aplica en el funcionamiento de los televisores y de los monitores.

Mediante la combinación de estos colores se pueden obtener varios espacios de
colores, que son un modelo de composición de colores, como RGB, el VGA, el
LAB, el CIE XYZ, etc.

Teoría de la síntesis sustractiva

Según esta teoría, el color del objeto va en función de las longitudes de onda del espectro
electromagnético que son absorbidas y las que son reflejadas por él.

Esta teoría necesita tres condiciones: que exista una fuente de luz, una muestra y un
detector, que serían los ojos.

Por ejemplo, la cantidad de rojo que se mostrará, dependerá de la cantidad de cian que
apliquemos sobre un papel. En este modelo los colores primarios son el cian, magenta y
amarillo o colores CMYK (abreviatura del inglés Cyan, Magenta, Yellow, Key). Esta teoría
es utilizada en las impresiones a color y en las fotografías a color, las artes plásticas o la
pintura decorativa.

Este aspecto permite ampliar la comprensión sobre el significado y usos del color.
Sin embargo, para su correcta aplicación es necesario el poder entender las
propiedades del mismo.
Ahora bien, el uso del color en el diseño está basado en la selección correcta de los
mismos con el objetivo de lograr en el receptor, un efecto determinado. Este proceso
contempla varios aspectos que se tratarán a continuación:

 Nota personal: Cada color presenta unas características, una interpretación, y a

partir de allí se pueden hacer propuestas gráficas al cliente.

Una vez se comprende el uso de cada color, se hace necesario el conocer la base de
ellos, la cual se da a través del círculo cromático, el cual es un esquema gráfico formado
por una superficie geométrica circular que sirve para ordenar los colores primarios y
secundarios. Los colores que se encuentran enfrentados en él, se llaman colores
complementarios y se definen así cuando no contienen ninguna cantidad del color
opuesto. Así, el color complementario del azul cian es el rojo; el magenta es el
complementario del verde y el amarillo lo es del violeta. La siguiente figura ilustra cómo
está formado el círculo cromático.
Existen unas fórmulas basadas en el concepto “armonía del color”, y que se
consiguen a través del uso del círculo cromático:
Figura 4 Fórmulas básicas de combinación

Complementarios:
Son opuestos uno al otro en la rueda. Por ejemplo: azul y naranja, o el clásico rojo
y verde.

Para evitar que la paleta te quede muy simple, puedes agregar tonos más claros,
oscuros o con poca saturación.

Tríada:
Se forma un triángulo en el círculo cromático y se usan los colores que están en
cada esquina.

Estas combinaciones tienden a ser bastante impactantes, particularmente con

colores primarios y secundarios, así que piénsalo bien antes de elegirlas.

Análoga:
Se eligen los colores que se siguen uno al otro en el círculo cromático, como los
rojos y anaranjados, o azules y verdes.

Complementarios divididos:
Se utilizan los colores que están junto al color complementario. Esto te da el
mismo nivel de contraste, pero más opciones de tonos y mejores resultados más
interesantes.
Tetraédrica:
Forma un rectángulo en el círculo, por lo cual no usa uno, sino dos pares de
colores complementarios. Esta fórmula funciona mejor si dejas un color como
dominante y los otros tres como auxiliares.

Monocromática:
Se utiliza un solo color. Modificando la saturación y brillo se crean variaciones en
el tono y se tiene la garantía de que combinarán.

Para profundizar en el tema de las combinaciones, se sugiere ver el video.

https://www.youtube.com/watch?v=L2Q2_d4TyVk

c. Leyes del diseño gráfico

Otro aspecto conceptual del diseño son las denominadas leyes o reglas que se
aplican al diseño y la composición. Estas leyes resultan de diversos estudios sobre
la percepción y psicología humana.

Ley de tercios
Ley de horizonte
Leyes de la Gestalt
Ley de la figura-fondo
Ley de la buena forma
Ley de cierre
Ley del contraste
Ley de la proximidad
Ley de la semejanza
 Elementos del diseño gráfico
Se trata de herramientas visuales que se combinan para crear un diseño
determinado, buscando, al igual que los fundamentos, comunicar una idea o
significado de la manera más eficaz posible.

Wucius Wong, artista chino y autor del libro Fundamentos del diseño bi y tri
dimensional, reconoce cuatro grupos de elementos: conceptuales, visuales, de
relación y prácticos. Para este apartado se tratarán solamente los elementos
visuales, ya que son los que permiten configurar las imágenes necesarias para la
producción de contenidos gráficos.

Además de los definidos por Wong, se incluyen cuatro elementos más (línea,
objeto, tipografía y espacio), al considerarlos necesarios para el diseño. En la
siguiente figura se explica un poco más acerca de cada una de ellas.

Figura 5 Fórmulas básicas de combinación

1

Forma
Todo lo que se puede ver tiene forma. Una forma es un espacio delimitado y
plano, de dos dimensiones: anchura y altura. Según el punto de vista del
observador se puede hablar de dos grupos diferentes de formas de la imagen:

1. A
Geométricas: pueden dibujarse con ayuda de una regla o un compás: triángulos,
cuadrados, círculos, etc.
2. B
Orgánicas: son formas menos esquemáticas, más libres, que se asemejan a las
que se encuentran en la naturaleza.
2
Medida
Todas las formas tienen un tamaño. Al comparar diferentes elementos se puede
percibir tamaño, forma, distancia, peso y ubicación en el espacio. El tamaño es
relativo si lo describimos en términos de magnitud y pequeñez, pero así mismo es
físicamente mesurable.

Color
Generalmente la forma no puede separarse del color, pues el color es
sencillamente la reacción de un objeto a los rayos de luz mediante los cuales lo
percibimos.

4
Textura
Es la apariencia externa de la forma que se percibe a través de la vista y genera la
ilusión del tacto, según el tratamiento que se le dé a su superficie. Las hay
naturales y artificiales y se crean usando patrones o repitiendo imágenes que dan
a los objetos planos realismo y tridimensionalidad.

La línea
Según Jaime P. Llaseras (s.f.), en su blog, está formada por una sucesión de
puntos y es el elemento visual básico de todo diseño gráfico. La línea, conecta la
trayectoria de un punto a otro. Sus cualidades son el grosor, el color, la textura y el
estilo.

6
El objeto
Se trata de una forma que adquiere propiedades tridimensionales, creando la
ilusión de profundidad y realzando el volumen a través del uso de la luz, la sombra
y la perspectiva. Los objetos se miden por su anchura, altura y profundidad. Al
igual que las formas, los objetos también se dividen en geométricos y orgánicos.
 7

El espacio
Es la distancia o área alrededor o entre los elementos de un diseño que determina
la esencia visual y el dinamismo de la composición y puede ser de dos tipos:

1. A
Positivo: incluye las formas de los objetos, o donde recae la atención del diseño.
2. B
Negativo: es la parte del diseño que no está ahí, el resto del espacio que está
entre los elementos. El espacio negativo puede llegar a ser igual de crucial para
un diseño que el espacio positivo, porque enmarca y contiene la composición.
8
La tipografía
El uso de letras o palabras es una de las formas más directas de comunicar
visualmente y por tanto, es uno de los elementos visuales más usados en diseño
gráfico. La tipografía no solo es importante porque pueda comunicar palabras, sino
también porque su estilo y disposición en el diseño contribuye a dar significado a
la composición. Un carácter tipográfico está formado por la combinación de formas
geométricas y orgánicas, que resultan en una nueva forma.

Sobre la tipografía se pueden estudiar tres aspectos principales:

Anatomía tipográfica
Psicología de la tipografía
Familia tipográfica y su clasificación
Tipografía digital
 1.2 Diseño digital
Al ser un área relativamente reciente, las definiciones de este tipo de diseño
pueden provenir de diferentes perspectivas, lo que dificulta ofrecer una definición
ampliamente consensuada.

 Puede decirse que, con respecto al diseño gráfico tradicional, el diseño digital
nació y se desarrolló para ser usado en la virtualidad de Internet y las aplicaciones
digitales. Aun así, esta frase puede dejar por fuera los diseños que se realizan
bajo programas informáticos, pero son para el mundo “real”.

 También podría entenderse que el diseño digital está más enfocado en los
desarrollos para el marketing digital y abarca todos los productos que permiten la
publicidad digital: newsletters, banners, videos, infografías, etc., pero esta
definición dejaría por fuera otro tipo de productos que no tienen que ver con la
publicidad como la animación, la producción de contenidos digitales, o incluso la
fotografía digital (retoque).

 Igualmente se puede designar como diseño digital el enfoque que se encarga de

dar solución a problemas reales entre la interacción de las personas y la presencia
digital de las empresas (páginas web).
Por tanto, la definición que mejor se ajusta a los contenidos formativos del
programa tecnológico “Técnico en integración de contenidos digitales” es la
siguiente:
El diseño digital comprende la creación de productos visuales como herramientas
principales de los contenidos digitales, ya sea con fines publicitarios, informativos
o de entretenimiento; también se encarga de ofrecer soluciones para la mejora de
la experiencia de los usuarios en Internet. El diseño digital crea y programa.

En el siguiente video es posible ampliar la comprensión sobre el concepto de diseño

digital:

https://www.youtube.com/watch?v=4nRHvBi9afc

El diseño web
Es un área del diseño digital que se encarga de desarrollar interfaces digitales,
sitios y aplicaciones web, utilizando lenguajes específicos como HTML.
El diseñador web tiene la misión de enlazar al usuario con el mundo informativo de
manera eficaz y agradable. La hipermedia permite, además de tener acceso a la
información, satisfacer los requerimientos y gustos de millones de navegantes. Por
lo tanto, es primordial tener un criterio de diseño antes de crear un sitio.
(Bustos, p. 29).

Es común confundir los términos diseño web y desarrollo web, pero ambos tienen

propósitos distintos, aunque estén profundamente entrelazados.

El diseño web cubre las fases del proyecto que se ocupan de la navegación, la

usabilidad, la interacción, la arquitectura de la información y de la parte gráfica de
la web. Por otra parte, el desarrollo web es la programación necesaria para la
construcción del sitio web. Se divide en dos partes que pueden estar o no
conectadas, la parte del cliente y la parte del servidor.

En la parte del cliente estaríamos hablando de HTML y CSS, código básico para
creación de páginas web, y JavaScript y DOM, para la interacción con el usuario.
En la parte del servidor se trabaja con código más complejo, como es PHP,
ASP.NET, JSP, etc. Con este código se construye el back-end, la parte de
la web que el usuario no ve. Su objetivo es el diseño de bases de datos y asegurar
la seguridad de la web. Cuando ambas partes se comunican, se habla de
programación cliente-servidor. Esta comunicación permite la interacción del
usuario con los contenidos alojados en bases de datos, el registro de nuevo
contenido y de cuentas de usuario. (Barba, p. 8).
A la hora de diseñar un sitio web se debe tener en cuenta los principios clave para
que el usuario al que está dirigido pueda realizar todas las actividades o procesos
dispuestos por el diseñador de la web en cuestión. A continuación, se exponen los
tres aspectos que se deben tener en cuenta en el diseño web y a los cuales se les
conoce como los principios de diseño web.

Navegabilidad
Accesibilidad
Usabilidad

Arquitectura web

El diseño y la arquitectura de información de las páginas web son “el resultado de

la actividad de clasificar, describir, estructurar y etiquetar los contenidos del sitio”.
(Leyva, Alarcón, Barrera & Ortegón, 2017).

Antes de proyectar o diseñar una página web, es necesario seguir los lineamientos

de la etapa de creación, tal como se observa en la siguiente figura.
Figura 6 Lineamientos
La arquitectura web incluye también pensar en si el resultado final será un sitio que pueda
resolver las necesidades de negocios y servir mejor a las de los clientes. El
arquitecto web diseña y coordina el desarrollo de sitios web, ya que estos son una
compleja integración de distintos sistemas (bases de datos, servidores, redes,
componentes de backup y seguridad, etc.).

El desarrollo web requiere de protocolos de comunicación entre dispositivos hardware,

conocimientos de lenguajes de programación y estructura de bases de datos, el protocolo
TCP/IP, el lenguaje HTML y muchos otros.
El concepto de HTML es la pieza más importante que atañe a los contenidos de este
programa. Se trata de una sigla que corresponde a Hyper Text Markup Language, es
decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de
Formato de Documentos para Hipertexto. Es el principal lenguaje de marcación que se
utiliza para el desarrollo de páginas web.

Una definición bastante descriptiva es la que se encuentra en la web Next U (s.f.), que

habla de que el HTML es un lenguaje abstracto que usan las aplicaciones para
representar documentos (se les llama documentos a instancias completas, como lo son
las páginas web) y que puede ser transmitido fácilmente por algún medio, como Internet.
Los navegadores de Internet procesan e interpretan documentos descritos en HTML
usando un analizador de HTML.

En los temas tratados en el Componente Formativo 2 se ampliará la información

respecto a este tema y otros aspectos que tienen que ver con el
desarrollo web desde el punto de vista técnico.
Experiencia de usuario (UX)
Según Bigné, Ruiz & Andreu (2004), la experiencia del usuario se refiere a los
factores que ejercen influencia en la exploración, la satisfacción y las intenciones
de comportamiento o transacciones electrónicas futuras, tanto personales como
externas que pueden afectar la experiencia del usuario en una página web.

Aunque guarda relación con la usabilidad, el diseño de la experiencia de usuario

abarca más aspectos como lo afirma Nielsen (2003):
Para crear una buena experiencia al usuario, el diseñador debe comprenderla y diseñarla
de principio a fin, y no solo desde el aspecto estético y funcional, sino también desde la
psicología cognitiva y las necesidades del usuario, al igual que desde los requerimientos
del negocio. Los pensamientos de los clientes sobre un producto y/o servicio suelen estar
influenciados por las experiencias y sensaciones que tuvieron mientras lo usaban.

Una buena experiencia de usuario produce clientes satisfechos que estarán dispuestos a
pagar más por productos y servicios de calidad.

Diseño de contenidos
Ahora bien, un aspecto a tener en cuenta, y aunque no se desarrollará con
profundidad, es el diseño de contenidos. Sarah Winters, fundadora de Content
Design of London, lo define como:
Software y herramientas de diseño digital
Las herramientas de diseño son elementos, formatos, medios o programas de
computador que se pueden usar para diseñar. Pueden influir en el proceso de
producción, expresión y percepción de las ideas de diseño y, por lo tanto, deben
aplicarse con habilidad.
La velocidad en la que avanza la tecnología hace compleja la permanente actualización
de las herramientas para todo lo que se refiere al diseño de contenidos para Internet.