M1 - Diseño Gráfico Computacional

Área: Tecnología
Diseño gráfico computacional
M1 Conceptos básicos de diseño web

Módulo: 1
Curso: Diseño gráfico computacional
Mapa de Contenido
Conceptos básicos de diseño web
Diseño orientado a
Diseño web Navegación web
la interacción
Imagen digital Interfaz de usuario Navegación contextual
Cinco principios de
Proporción Mapa de sitio
interacción
Diseño con cuadrículas Metadata
Tendencias futuras Resultado de búsqueda

Módulo: 1
Índice
Introducción ............................................................................................................................................................................................................ 5
1. Diseño web ......................................................................................................................................................................................................... 7
1.1. Imagen digital ................................................................................................................................................................... 8
a. Resolución ....................................................................................................................................................................... 8
b. Modo de color ................................................................................................................................................................. 8
c. Imagen mapa de bits ....................................................................................................................................................... 9
d. Imagen vectorial............................................................................................................................................................ 12
1.2. Formatos multimedia ..................................................................................................................................................... 13
a. Video ............................................................................................................................................................................. 13
b. Audio ............................................................................................................................................................................. 13
1.3. Lienzo y proporción ........................................................................................................................................................ 14
a. Lienzo digital ................................................................................................................................................................. 14
b. Proporción..................................................................................................................................................................... 14
1.4. Diseño web ..................................................................................................................................................................... 15
a. Estándares de diseño web ............................................................................................................................................ 15
b. Diseño web clásico ........................................................................................................................................................ 17
c. Diseño con cuadrículas .................................................................................................................................................. 18
d. Diseño adaptativo y responsivo .................................................................................................................................... 20
1.5. Tendencias futuras ......................................................................................................................................................... 22
a. Cuidado de las fuentes. ................................................................................................................................................. 22
b. Cinemagraphs ............................................................................................................................................................... 22
c. Minimalismo .................................................................................................................................................................. 22
d. Dispositivos móviles ...................................................................................................................................................... 22
2. Diseño orientado a la interacción............................................................................................................................................................ 23
2.1. Interfaz de usuario ......................................................................................................................................................... 23
2.2. Principios de diseño orientado a la interacción ............................................................................................................. 24
a. Consistencia .................................................................................................................................................................. 24
b. Perceptibilidad .............................................................................................................................................................. 24
c. Aprendibilidad ............................................................................................................................................................... 25
d. Previsibilidad ................................................................................................................................................................. 26
e. Retroalimentación......................................................................................................................................................... 26
Módulo: 1
3. Navegación web ............................................................................................................................................................................................. 28

3.1. Navegación contextual ................................................................................................................................................... 28
a. Vínculos contextuales ................................................................................................................................................... 29
b. Otros tipos de navegación: ........................................................................................................................................... 30
3.2. Mapa de sitio .................................................................................................................................................................. 31
3.3. Metadata ........................................................................................................................................................................ 32
3.4. Resultados de búsqueda ................................................................................................................................................ 34
Cierre ....................................................................................................................................................................................................................... 35
Módulo: 1
Resultado de aprendizaje
Discrimina entre distintos conceptos para aplicarlos en el diseño de sitios web en el contexto del
diseño gráfico computacional.
Introducción
En tu camino académico, has tenido la oportunidad de revisar el ámbito estructural de los sistemas
de información. Esto quiere decir que has visto qué se esconde tras la cortina y qué permite el
funcionamiento de aquello que el cliente quiere como apoyo a sus procesos de negocio. Sin embargo,
todo proyecto de software requiere una cara que sea capaz de comunicarse con el usuario,
brindándole las herramientas necesarias para que logre sus objetivos y, en nuestro ámbito disciplinar
específico, reduciendo los riesgos de seguridad en la entrada y salida de datos, lo que se traduce en
minimizar los posibles errores de operación, navegación e interpretación en un sistema de información.
Esa cara del sistema, que recibe el nombre de interfaz, busca hacer cada vez más simple las
operaciones que debe efectuar el usuario, a través de distintas estrategias que utilizan uno o varios
medios de comunicación entre la máquina y las personas, dependiendo del tipo y cantidad de información
que se debe mostrar.
Por ejemplo, los primeros televisores no tenían control remoto, la selección de canales se hacía girando
una perilla y para la operación de ese sistema era necesario que el usuario fuese hasta el televisor. Luego,
con la creación del control remoto, se obviaría aquello de levantarse del asiento; sin embargo, el número
de operaciones tanto en el televisor como en el mismo control aumentaron conforme la información del
sistema se fue haciendo más detallada (nombre del canal, número, cartelera, configuración del brillo,
acceso a otros sistemas, etc.). Poco a poco se fue incorporando una respuesta a esa interfaz de usuario
de forma mayoritariamente gráfica, que pasó de un menú de texto con fondo azul y letras verdes
(interrumpiendo lo que estábamos viendo), a la integración de iconografía, pestañas, previsualización y el
manejo de entornos gráficos más complejos.
Pág. 5
Módulo: 1
1992 2019
Figura 1: comparativa histórica de menú para TV. Fuente: Pixabay (2018).
Este tipo de interfaces con mayor orientación gráfica, han permitido vencer barreras de lenguaje, disminuir
la curva de aprendizaje sobre el sistema y optimizar el desempeño del usuario evitando errores en la
navegación (Vera, 2016: 231). ¿Qué tiene que ver esa interfaz con la Ingeniería en Informática mención
Ciberseguridad? Pues la concepción gráfica de la interfaz de aplicaciones de software, incluidas las
páginas web, actualmente es la estrategia más importante para su comercialización y las decisiones
que allí se toman, requieren de una mirada crítica por parte del ingeniero. En otras palabras, entre más
entiendas sobre cómo mejorar la navegabilidad de un sitio web con elementos gráficos, más te acercas a
la posibilidad de mejorar tus proyectos informáticos.
En este módulo, analizaremos esos principios del diseño web que permiten mejorar la interfaz y la
navegación, a partir del manejo de las proporciones en pantalla, la distribución, los principios de
interacción, el trabajo sobre las imágenes que componen un sitio web y la composición gráfica. Todos
ellos serán de utilidad para enfrentar los próximos módulos, en los que tendrás que desarrollar distintos
elementos de diseño web, desde una maqueta hasta el desarrollo de un sitio web funcional.
1
Vera, M. A. (2016). El diseño de interfaz en teléfonos celulares. Revisión sobre los aspectos de diseño gráfico, interfaz,
hipertexto, usabilidad e interactividad (Doctoral dissertation). Buenos Aires: Universidad Siglo 21.
Pág. 6
Módulo: 1
1. Diseño web
Quizás, cuando escuchas la palabra diseño, siempre viene a tu mente la imagen de un dibujo, pero el
diseño no solo consiste en la creación de esquemas, diagramas e imágenes: también son las decisiones
que tomamos para que algo funcione como esperamos. Por ejemplo, el diseño del alcantarillado o de
la red eléctrica de tu barrio no solo consiste en los planos de distribución sino en las decisiones y acuerdos
por medio de los cuales se pueden garantizar esos servicios en tu zona. De igual forma, el diseño web
consiste en la estructuración del funcionamiento, la diagramación de la interfaz y la puesta en marcha de
un sitio web (Arias, 2015:11). Por lo que debemos tener en cuenta que:
Es un conjunto de páginas y recursos conectados entre sí que se aloja en un

Sitio web servidor y al que se accede por medio de un navegador (Google Chrome,
Opera, Firefox, etc.).
Es un conjunto de recursos (texto, imagen, video, audio) y vínculos que se

Página web muestran en una sola pantalla, y que hace parte de un conjunto mayor: el sitio
web.
La interfaz de usuario de una página web es la pantalla del dispositivo en el que

Interfaz de usuario se muestra y todos los elementos con los que el usuario puede ingresar y recibir
información (ratón, teclado, impresora, etc.).
La interfaz gráfica de una página web son todos aquellos elementos que ve el
usuario y que permiten navegar por sus contenidos. En general, no se habla de
Interfaz Gráfica de Usuario (Graphic User Interface, GUI por su abreviatura en
Interfaz gráfica
inglés) dentro del ámbito del diseño web porque no es necesario un programa
aparte para mostrar la información del sistema que compone un sitio web. Un
sistema operativo requiere una GUI, debido a su complejidad.
Entonces, el diseño web comienza por la estructuración del contenido. Esto quiere decir:
• ¿Qué se presenta al usuario en la pantalla? Cuáles son los contenidos y cuál su formato.
• ¿Dónde se muestra? En qué parte de la pantalla.
• ¿Cómo se muestran? Tamaño, forma, color.
• ¿Cuándo se muestran? Primera página o después de entrar al menú.
Todo a través de un Lenguaje de Marcas de Hipertexto (HyperText Markup Language, HTML por sus
siglas en inglés) que permite enlazar los recursos entre sí: el texto, la imagen, el video, audio y las demás
páginas.
1
Arias, Á. (2015). Desarrollo Web con CMS. Drupal y Joomla (2a ed.). IT Campus Academy.
Pág. 7
Módulo: 1
Dentro de ese contenido, y como lo decíamos en la introducción, gran parte está constituido por gráficos
o imágenes digitales, por lo que se hace necesario profundizar en sus propiedades a la hora de diseñar
un sitio web.
1.1. Imagen digital

Si fuésemos primero al origen etimológico, hallaríamos que la imagen es sinónimo de imitar y digital es
relativo al uso de los dedos, por lo que ya podrás construir una definición sobre este concepto, algo como
la reproducción (fotografía) o representación (dibujo) binaria (conjunto de ceros y unos), que tiene
dos dimensiones (alto y ancho), susceptible de ser modificada con un software de edición dentro de
un computador, smartphone, tablet, u otros dispositivos.
Existen una serie de conceptos fundamentales que deben ser abordados antes de adentrarnos a los
conceptos de imagen digital, que son las ideas de resolución y modo de color. A ellas se suman dos tipos
de imágenes digitales, que son los mapas de bits y las imágenes vectoriales. Todas ellas las detallaremos
a continuación:
a. Resolución
Es un aspecto determinante en el diseño web, pues nos ofrece una visión de escala y calidad con la que
podemos mejorar la respuesta de los recursos gráficos en la interfaz.
La resolución de una imagen digital se mide en pixeles por pulgada (ppp o dpi por sus siglas en inglés,
dots per inch). A mayor cantidad de pixeles por pulgada lineal, mayor será la calidad de la imagen y, por
ende, mayor el tamaño del archivo que la contiene. Para optimizar una imagen para el diseño web, es
indicado utilizar 72 dpi, puesto que los 300 dpi se utilizan, principalmente, en impresión.
b. Modo de color
Es una forma en la que la imagen puede ser representada a partir de la información que posee cada
píxel (Figura 2). Una forma de optimizar las imágenes digitales para la web es trabajar con sus principales
modos de color. Un modo de color puede dar un tamaño de archivo distinto a otro; la escala de grises,
por ejemplo, tiende a ser uno de los más livianos.
• Escala de grises: es un modo que nos ayuda a representar fácilmente una imagen en blanco y negro,
con la posibilidad de contar con 256 tonos de grises.
• RGB: es la sigla para Red Green and Blue (Rojo, Verde y Azul), utilizan las escalas cromáticas de esos
colores para representar la imagen; es la forma usual en la que se trabajan las imágenes a color.
• Indexado: es el modo más utilizado en diseño web porque permite reducir el tamaño del archivo a
partir de la selección de una única paleta de colores para todos los pixeles, quiere decir, se almacena
solo la información necesaria para que la imagen se vea bien, descartando todos los datos que no
tienen relación directa. Al cargar la imagen en el cliente, se hace más rápido y se representa lo más
parecido a lo que nosotros diseñamos desde un principio.
Pág. 8
Módulo: 1
Otros modos como el CMYK (cian, magenta, amarillo y negro), así como el modo multicanal y el modo
LAB se utilizan principalmente para impresiones en papel.
Figura 2: Distintos modos de color para una imagen y su resolución. Fuente: imagen original McGuire
(20181), edición propia.
c. Imagen mapa de bits

Recibe su nombre porque es la construcción de una imagen a partir de puntos individuales que se
conocen con el nombre de pixeles y que son combinaciones de bits (digito binario, 1/0) en los que se
almacena información como el color y brillo (Figura 3). Usualmente, las fotografías digitales y las imágenes
escaneadas se almacenan de esta forma.
Los principales formatos de archivo de este tipo de imagen digital, que se utilizan en diseño web, son los
siguientes:
Figura 3: imagen digital de mapa de bits. Fuente: McGuire (20182).
1
McGuire, R. (2018). Vinyl Record Free Photo. Recuperado de: https://gratisography.com/photo/vinyl-record/
2
Pág. 9
Módulo: 1
• JPG o JPEG1: Es un buen formato cuando queremos utilizar imágenes livianas en nuestro sitio web,
debido a que comprime el tamaño del archivo a partir de separar la información entre brillo y
color de cada píxel, lo que hace que siempre obtengamos imágenes con poco contraste. A mayor
compresión, menor calidad de la imagen. Dos indicaciones importantes en nuestro trabajo con este
formato de imagen son:
o No es adecuado trabajar directamente en un archivo JPG si queremos modificar algún elemento
de la imagen porque puede perder calidad innecesariamente. Trabaja el archivo en TIFF, PNG
o PSD y luego lo exportas como JPG.
o No posee propiedades de transparencia, lo que es una desventaja si queremos utilizar una
imagen digital en este formato sobre un fondo de color distinto.
• PNG2: Dado el aumento del ancho de banda en las conexiones a Internet, este es el formato que más
espacio ha ganado en el diseño web porque su compresión ayuda a mantener los niveles de detalle,
color, brillo y contraste en las imágenes digitales. Utiliza varios métodos de compresión entre los
que se cuenta la predicción, que es ahorrar información en el pixel tomando información de los pixeles
circundantes. Posee 256 niveles de transparencia, lo que nos permite integrarlo de forma sencilla en
una página web. Se puede animar utilizando la extensión APNG (es la forma en la que se han venido
reemplazando los GIF animados).
• WebP: Es un formato desarrollado por Google que ha logrado comprimir en 2/3 el tamaño de un JPG
o de un PNG, a partir de la predicción en bloques de pixeles. La relación es de menor tamaño y mayor
calidad que los dos formatos anteriores. Es un formato pensado para el diseño web, que minimiza el
uso de recursos en el servidor y en el cliente. El navegador Opera lo utiliza para mostrar todas las
imágenes de un sitio web cuando se activa la opción Turbo (navegación rápida con menor consumo
de datos). Existe un modo alternativo de este tipo de formato, llamado Lossly (con pérdida) que nos
permite trabajar con mayor comodidad en el diseño web de sitios que disponen de poco espacio en
servidor y conexiones con poco ancho de banda.
1
Joint Photographic Experts Group.
2
Portable Network Graphic Format.
Pág. 10
Módulo: 1
A continuación, te dejamos una comparativa de imágenes que demuestran la diferencia en el

procesamiento de una imagen, su resolución y peso que son posibles de obtener con estos formatos
(Figura 4).
Figura 4: comparación de formatos de imagen digital. Fuente: imagen McGuire (20181), edición propia.
Existen otros formatos como BMP y GIF, cada vez más en desuso; o TIFF2, utilizado mayoritariamente en
impresión de gran tamaño.
Por otra parte, los principales programas de edición de una imagen digital del tipo mapa de bits son los
siguientes:
 Adobe Photoshop, que veremos a profundidad en el próximo módulo, es el software de edición más
popular, es de pago y maneja la extensión .psd en la que se guardan todos los elementos de edición
que se utilizaron sobre la imagen. Asimismo, puede ser un formato de imagen; sin embargo, dado el
peso de los archivos en este formato y las características de lectura, no se utiliza en diseño web.
 GIMP es un software con licencia GNU, nativo de Linux, multiplataforma (funciona en cualquier sistema
operativo); maneja la extensión .xcf y posee un amplio banco de formatos de imagen a los que puede
exportar. En ambos casos, por ahora, se requiere un plug-in para editar archivos WebP.
1
2
Tagged Image File Format
Pág. 11
Módulo: 1
d. Imagen vectorial
Como su nombre lo indica, están constituidas por vectores (con origen, tamaño, dirección y sentido)
que se forman a partir de líneas o polígonos, lo que es lo más cercano a una pintura en el computador
(Figura 5). Puede ser generada a partir de un mapa de bits (vectorizar) o directamente dirigiendo con el
ratón o usando una tableta gráfica (Wacom, por ejemplo). Se pueden utilizar en el diseño web cuando no
requerimos imágenes de gran resolución, por ejemplo, para un logo o icono.
El principal formato de imagen vectorial que se utiliza en el diseño web es SVG1, principalmente porque
W3C2 lo declaró nativo porque está basado en XML, lo que significa que el lenguaje con el que escribimos
las páginas web considera al SVG como un objeto propio que se puede modificar por medio de distintas
etiquetas (trasladar, rotar, recortar, reflejar, etc.). Estos archivos de imagen se pueden construir con
programas como Inkscape (gratuito).
Existen otros formatos de imagen vectorial como AI (Adobe Illustrator) y DXF (AutoCAD), pero no son
utilizados en el diseño web.
Figura 5: imagen digital vectorial. Fuente: imagen original McGuire (20183), edición propia.
1
Scalable Vector Graphics o, en español, Gráficos Vectoriales Escalables.
2
W3C es un consorcio internacional que estandariza todo lo concerniente con el uso de la World Wide Web,
incluyendo el estándar HTML.
3
Pág. 12
Módulo: 1
1.2. Formatos multimedia

Junto con las imágenes, existen otros recursos que hacen parte del diseño web. Algunos de ellos son los
siguientes:
a. Video
La etiqueta <video> de HTML, nos permite manejar los siguientes formatos:
• WebM: Es el más actual de los formatos de video para web, desarrollado por Google como una forma
de minimizar la cantidad de datos de transferencia sin perjudicar la calidad de imagen y audio, por
lo que utiliza el códec de video VP8 y VP9, así como el códec de audio Vorbis, los cuales son de
código abierto y de libre uso (lo que ha hecho que WebM sea el formato de video más utilizado
porque es compatible con la mayoría de navegadores).
• OGG: Este formato se utiliza tanto para video como para recursos de solo audio, utiliza el códec de
video Theora y Vorbis como códec de audio.
• MP4: este formato funciona en la web con el códec H.264 para la compresión de imagen y con AAC
o Mp3 para el audio. Ha venido en desuso paulatinamente porque en el video se utiliza un códec
propietario (MPEG, no es de código abierto y tiene licencia restrictiva).
En general, estos formatos permiten mostrar video en un sitio web con distintos tipos de resoluciones de
imagen (incluyendo 4K) y de audio (incluyendo 48kHz). Aquí, la compatibilidad con los navegadores es la
principal característica para escoger un formato frente a otro.
b. Audio
La etiqueta <audio> de HTML nos permite manejar el formato MP3, ampliamente conocido por su factor
de compresión que hace los archivos más pequeños y fáciles de transmitir en la web; así como el antes
mencionado OGG.
Existen varios formatos más para ambos casos, pero los mencionados son los de mayor uso en el
momento de escribir este documento; además se debe tener en cuenta que lo indicado en el diseño web
es utilizar las etiquetas, minimizando el uso de otro lenguaje, extensiones o plug-ins para poder mostrar
este tipo de recursos multimedia.
Pág. 13
Módulo: 1
1.3. Lienzo y proporción

a. Lienzo digital
Es el área de trabajo sobre la cual se puede hacer la composición de la imagen. Usualmente es un
área en blanco o con un canal Alpha que tiene una resolución predefinida.
El lienzo siempre es modificable y afecta el tamaño final de la imagen. Suele modificarse cuando
requerimos más espacio para hacer una composición gráfica en la que participa más de una imagen. En
el próximo módulo utilizaremos el lienzo de Adobe Photoshop para construir una imagen digital que se
pueda utilizar en el diseño web, así que allí profundizaremos en este concepto.
b. Proporción
Además de los elementos básicos presentados anteriormente, es necesario trabajar en la composición
misma de la imagen. Para hacer un correcto diseño web, tenemos que preservar la proporcionalidad y
distribución de los elementos que se muestran en la imagen, lo que es posible de lograr usando distintas
técnicas. Entre ellas encontramos (Figura 6):
• Regla de los tercios: consiste en dividir la imagen en 3 partes

iguales, horizontal y verticalmente (9 secciones) para lograr que
los elementos de la composición queden distribuidos y ubicados
respecto a las intersecciones de los tercios.
• Simetría dinámica: se obtiene trazando diagonales entre los

vértices de la imagen, para luego trazar una línea perpendicular
desde un vértice hasta donde corta con las diagonales antes
trazadas, obteniendo puntos de intersección que le dan un
equilibrio, distinto al de la regla de tercios, a la imagen.
• Proporción áurea: es un concepto transversal a todos los

campos del conocimiento (esencialmente la matemática) y de la
vida misma, pero no podemos abarcar una definición tan amplia
aquí, así que para lo que tiene que ver con el diseño web, la
proporción áurea es la relación de proporcionalidad que se
consigue cuando el lado más largo de una imagen, es del doble
del tamaño del lado más corto y, al continuar dividiendo los lados,
se obtienen nuevos rectángulos donde la relación se mantiene; además cuando al trazar arcos (1/4
Pág. 14
Módulo: 1
de circunferencia) entre los vértices de esos rectángulos resultantes, se obtiene una espiral que nos
muestra dónde debería estar el foco de atención de la imagen.
Figura 6: Distintas técnicas de proporción aplicadas a una imagen digital. Fuente: imagen original McGuire
(20181), edición propia.
1.4. Diseño web

a. Estándares de diseño web
El World Wide Web Consortium (W3C) hace una serie de recomendaciones para que la navegación por
los sitios web sea mejor. De estas recomendaciones se interpretan tres estándares principales sobre cómo
debemos diseñar nuestros sitios (Figura 7):
• Diseño para el acceso rápido:

o Es indispensable cuidar el peso de los recursos y páginas web que hacen parte de un sitio,
para que se pueda mostrar rápidamente al usuario que ingresa. Por ejemplo, se estima que el
usuario espera máximo 5 segundos para que se muestre algo en el sitio.
o Depurar la diagramación de las páginas (layout). Aquí existe una discusión entre el uso de
tablas o de hojas de estilo para distribuir y organizar secciones y contenidos; sin embargo,
siempre debes garantizar que existe una estructura con esa distribución, la más sencilla posible,
sin anidar tablas o secciones que dificulten al navegador un despliegue rápido.
1
Pág. 15
Módulo: 1
o Garantizar la interoperabilidad del sitio web. Quiere decir que hayamos hecho todas las
pruebas de que lo diseñado funciona en la mayoría de los navegadores y arquitecturas (notebook,
Smartphone, etc.)
Figura 7: Dos ejemplos de diseño web. El de la derecha corresponde al sitio web www.armgren.net, el que
se caracteriza por un diseño sin seguir los estándares web. Por otra parte, en la derecha, el sitio web
www.awwwards.com, dedicado a premiar el diseño, creatividad e innovación en Internet, presenta un
diseño con estándares.
• Diseño para la accesibilidad

Posee relación con el uso universal de un sitio web, permitiendo que todos puedan navegar en él.
Para entender este estándar utilizaremos un ejemplo.
Al vincular imágenes en una página web, usualmente escribimos la etiqueta correspondiente y
certificamos que, al mostrarse el sitio, la imagen es llamada desde la dirección que hemos
suministrado. ¿Pero te has puesto a pensar que sucede con las personas no videntes o de visión
reducida? Eso es diseño para la accesibilidad, ya que siempre debemos garantizar que la mayor
cantidad de público pueda navegar en nuestro sitio. Si vinculamos la imagen, además debemos crear
la etiqueta para que se muestre un texto alternativo, eso hará que el lector de pantalla que tienen las
personas no videntes les haga una lectura sobre lo que está en la imagen.
• Diseño de la experiencia de usuario

Este estándar consiste en desarrollar a fondo un estudio previo de cómo navegará el usuario, cuál
será su experiencia dentro del sitio. Por lo tanto, debemos contar con un diagrama de interacción,
debemos establecer las actividades posibles que puede desarrollar el usuario y las distintas pruebas
de funcionamiento e interfaz.
Pág. 16
Módulo: 1
b. Diseño web clásico

Evidentemente, se trata del diseño tradicional en el que participa esencialmente HTML dentro de su
construcción (Figura 8). Es una tendencia que se ha mantenido en algunos sectores de desarrollo
informático dado que es más compatible con los navegadores y genera menor carga sobre el peso de las
páginas y sitios, además de simplificar la experiencia del usuario al no tener que instalar otros elementos
(codecs, plug-ins, complementos) para poder ver los contenidos1; lo que conlleva a que no podamos
incorporar elementos como el video-streaming, flash y algunas formas de podcast.
<head>Cabecera</head>
<nav>Barra de navegación</nav>
<aside>
<section>Información principal</section> Barra lateral
</aside>
<footer>Institucional</footer>
Figura 8: esquema general de diseño web clásico.
1
Es un tipo de diseño indicado para sitios web en los que el público objetivo sean mayores de 40 años.
Pág. 17
Módulo: 1
c. Diseño con cuadrículas

Este tipo de diseño web se centra en el estándar de mejorar y hacer más sencilla la diagramación por
medio de retículas o cuadrículas (grids en inglés). Estas cuadrículas se alojan en hojas de estilo en
archivos CSS (Cascading Style Sheets, Hojas de Estilo en Cascada) y nos permiten alinear los contenidos
para dar una impresión de armonía, distribución y proporción, junto con hacer que lo diseñado sea
lo que el usuario final vea. Son líneas invisibles que facilitan la composición de un sitio web. Para entender
cómo nos sirven las cuadrículas en diseño web, veamos el siguiente ejemplo:
Unidad de 160 160px 160px 160px 160px

pixeles
Canal de
20
pixeles
Figura 9: estructura de una cuadrícula para diseño web.

Al observar la figura 9, te puedes dar cuenta que se trata de una resolución promedio de 800 pixeles de
ancho, sin tener en cuenta el alto porque los contenidos pueden ponerse hacia abajo cuantas veces uno
crea necesario.
Cuando utilizamos varias unidades y canales, formamos columnas con las que generamos la composición
(el diagrama) donde los contenidos se mostrarán. Por lo tanto, con base en esta cuadrícula, podemos
crear los siguientes diseños de página web:
Diseño de 3 columnas
Diseño de 2 columnas
Pág. 18
Módulo: 1
Diseño de 4 columnas y complejos
Para que quede aún más claro, veamos este ejemplo:
12 unidades
3 Columnas
Figura 10: ejemplo de cuadrícula para diseño de 3 columnas. Fuente: BBC (20181).
1
BBC. (2018). Homepage. BBC. recuperado el 8 de octubre de 2018 de https://www.bbc.com/
Pág. 19
Módulo: 1
d. Diseño adaptativo y responsivo

El diseño responsivo persigue como objetivo que en toda pantalla de un dispositivo con acceso a
Internet y navegador se pueda ver y navegar el contenido de un sitio web. Es la evolución del diseño
con cuadrículas, pues no solo trabaja una diagramación sencilla que pueda ser cargada rápidamente, sino
que busca adaptarse al tamaño de la pantalla.
Figura 11: estructura de una cuadrícula Grid CSS. Fuente: Roman (2017).
Con la aparición de HTML5 y CSS3, los desarrollos de páginas han llevado consigo la incorporación de
otros elementos que permitan responder a las dimensiones de la pantalla; entre los más conocidos está
Flexbox CSS que es una forma de diseño por medio de hojas de estilo, en la que los objetos que están en
cada unidad o contenedor de una cuadrícula, se organizan automáticamente de acuerdo al tamaño de la
pantalla; y Grid CSS que trata de hacer aún más sencilla esa respuesta al cambio a partir de la siguiente
estructura:
Si comparas la figura 9 con la 11, te darás cuenta que existen más elementos en Grid CSS para ubicar los
contenidos de la página web. Además, esa relación existente entre el contenedor, el área, la celda y el
ítem, permite que en una pantalla de notebook o de desktop (11 a 27 pulgadas) se muestren los elementos
(ítems) horizontalmente, mientras en una pantalla de smartphone (4 a 7 pulgadas) se muestren de forma
vertical. Para entenderlo, veamos un ejemplo (Figura 12):
Pág. 20
Módulo: 1
Notebook Smartphone
Figura 12: diseño responsivo con Grid CSS. Fuente: Teixidó (2018), captura y edición propia.
El diseño adaptativo (adaptivo) funciona desde el servidor por medio de distintas extensiones. Éste
detecta la configuración del equipo cliente (donde el usuario ve la página) y carga la plantilla que mejor
se adapta a ese dispositivo, que hemos diseñado y alojado previamente. Dado que nuestras páginas no
tienen solo el diseño sino distintos elementos de interacción, como extensiones, animaciones, formularios
y otros, el diseño adaptivo permite que se cargue solo lo necesario, entregando rápida respuesta al
usuario y mejorando el desempeño de nuestro sitio web. Sin embargo, diseñar una portada para cada
sistema y configuración existente invierte más de nuestro tiempo y aumenta los costos de producción,
por tal motivo se han desarrollado algunas alternativas que evitan la acción del servidor y cargan plantillas
estandarizadas para cada tipo de dispositivo por medio de Extensive JavaScript.
Para entender la diferencia entre diseño adaptativo y responsivo, así como esta última alternativa
intermedia con Extensive JavaScript, veamos el sitio web de nuestra institución:
Notebook Smartphone
Figura 13: diseño adaptivo con Extensive JavaScript aplicado en el sitio web de IPP (IPP, 2019 ).
Pág. 21
Módulo: 1
1.5. Tendencias futuras

Las principales tendencias actuales y futuras en diseño web son las siguientes:
a. Cuidado de las fuentes.

La composición debe incluir, cada vez más, tipografías elaboradas que ayuden a centrar la atención
pero que no obstaculicen una navegación rápida. Pese a que contamos con la propiedad HTML: Font-
family, la inclusión de fuentes distintivas en nuestros sitios web puede contribuir en la mejora de la
experiencia de usuario.
b. Cinemagraphs
Cada vez más utilizados, son videos o gif animados con texto superpuesto que permiten acercarse al
concepto de web dinámica (un sitio cambiante que busca irse adaptando a los nuevos usuarios) desde lo
estético.
c. Minimalismo
La progresiva reducción de elementos en pantalla, centrándose en el concepto de una tarea a la vez,
sin ventanas que se abren sobre el sitio que se está consultando, gana cada vez más aceptación entre los
diseñadores web. Aquí es clave un levantamiento adecuado de la experiencia de usuario y un buen diseño
del mapa de navegación del sitio.
d. Dispositivos móviles
El incremento de usuarios de este tipo de dispositivos, y tal como fue presentado hace un momento, ha
llevado a que se piense el diseño web primero para la navegación en pantallas pequeñas, como las
de teléfonos móviles; y, con posterioridad, en el uso de notebooks o equipos de escritorio.
Es por ello que se ha trabajado en elementos responsivos, que permitan adaptar los sitios webs a las
distintas pantallas donde puede ser exhibido, tal como hemos destacado en el apartado anterior.
Pág. 22
Módulo: 1
2. Diseño orientado a la interacción

Lo que diferencia a un sitio web de una publicación es la interacción. Esto quiere decir que un sitio web
no es un repositorio de información que se muestra al usuario sino un sistema de información donde
el usuario debe interactuar, ingresando datos, navegando y recibiendo retroalimentación constante. Por
lo tanto, es necesario que comprendamos en qué consiste la interfaz de usuario dentro del diseño web,
así como los principios básicos de interacción,
2.1. Interfaz de usuario

Ya habíamos diferenciado la Interfaz de Usuario (UI) de la Interfaz Gráfica de Usuario (GUI). En este
apartado nos referimos a esa interfaz como el conjunto de elementos gráficos que permiten al usuario
ver y navegar por los contenidos de un sitio web. Para que esa visualización y navegación sean efectivas
deben existir elementos de interacción, siendo el más indispensable el hipervínculo, aunque usualmente
existen otros como la casilla de búsqueda, el menú, las etiquetas y el chat, entre otros (Figura 14).
Elementos de
interacción
a Casilla de búsqueda.
Registro
b
(Logueo o login).
c Contacto por VozIP.
d Menú.
Hipervínculo,
e
zona sensible.
f Formulario.
Figura 14: elementos interactivos en sitios web (IPP, 20191).
1
Instituto Profesional Providencia. (2019). Home Estudiantes. Instituto Profesional Providencia. Recuperado el 25 de
enero de 2019 de https://www.ipp.cl/content/estudiantes
Pág. 23
Módulo: 1
2.2. Principios de diseño orientado a la interacción

A continuación, citamos algunos de los principios de interacción clásicos que te permitirán hacer diseños
web más interactivos, mejorando la respuesta de los usuarios.
a. Consistencia
Se refiere a que los elementos que componen el sitio web que estás diseñando, deben hacer lo que
se espera que hagan. Esos elementos pueden ser visibles o invisibles, por ejemplo, un menú contextual
(con el botón derecho del ratón) que no está siempre presente es un elemento invisible que debe ser
consistente. Es decir, siempre que el usuario haga clic derecho sobre un objeto de la página ese menú
debe aparecer.
Existen distintos niveles de consistencia, aunque los principales corresponden a los de consistencia
externa e interna, que detallaremos a continuación:
 Consistencia externa. Se refiere a todos los elementos fuera del diseño y estructura del sitio web
de los que se espera un funcionamiento específico; por ejemplo, la interacción depende de que el
servidor actúe como se espera, que el sitio se despliegue en cualquier navegador con el que se
acceda, reconozca un atajo del teclado para refrescar o releer la portada de nuestro sitio, todas ellas
funciones externas al diseño mismo del sitio.
 Consistencia interna. Aquí nos vamos a enfocar durante el módulo. Ya hemos dado algunas claves
para mejorar esa consistencia (color, proporción, resolución, cuadrículas), pues ese conjunto de
recursos, distribución y forma, sumado a los comportamientos asociados, es lo que le indica al
usuario el propósito que cumple cada elemento interactivo dentro del sitio web.
Para entenderlo mejor, imagina que en la portada de nuestro sitio se muestra un hipervínculo por
medio de un texto destacado con color azul subrayado y que al pasar el cursor del ratón sobre él,
éste cambia de una flecha a una mano con el índice extendido , pero que no lleva a ninguna
parte. Esa es una inconsistencia, por ende, la consistencia interna sería que ese texto esté vinculado
y lleve a otro recurso o página, porque el usuario ya tiene el modelo mental que establece que un
texto destacado de esa forma lo debe llevar a otro lugar o debe abrir una ventana nueva.
b. Perceptibilidad
Este principio se define como la propiedad que deben tener los objetos, contenidos y recursos en el
sitio web para decirle al usuario que son interactivos. Esto debe reflejarse por las características
gráficas (cambios en el color, forma, tamaño, sombra), así como el sonido y el movimiento.
Para entender este principio, volvamos sobre nuestra portada web institucional, cargada en un celular:
Pág. 24
Módulo: 1
 ¿Cómo percibimos la interactividad de esa

página? Con elementos sencillos como el cambio de
color entre el logo de IPP y los iconos de la parte
superior derecha, así como los círculos azules sobre
la imagen que le indica al usuario que hay más
imágenes y que puede navegar entre ellas.
 ¿Por qué son perceptibles? Porque el usuario ha
visto que esos iconos llevan a la interacción en otras
situaciones, como otros sitios webs.
 Sin embargo, ¿cómo podríamos hacer más
perceptible la interactividad? Por ejemplo, si en la
imagen se indicara, con texto y un refuerzo gráfico,
que puede profundizar en esa noticia o sección
(Figura 15).
Figura 15: Ejemplo de reforzamiento de la

interactividad de una página, insertando un
botón que señale “Saber más”.
c. Aprendibilidad
Este principio realmente trata sobre minimizar la curva de aprendizaje de la interfaz. Esa curva es una
gráfica que se obtiene a partir de la relación Tiempo vs Esfuerzo, o el tiempo que se demora el usuario
en saber cómo interactuar con nuestro sitio web y qué funciones cumple cada elemento que se le muestra.
Cuando el usuario se enfrente por primera vez a nuestro sitio web, debemos diseñar una interacción que:
 Establezca relaciones (contextuales) entre lo que ya sabe el usuario y lo nuevo que se le

presenta. En caso tal que una interacción deba ser explicada, puedes utilizar pequeñas simulaciones
que señalen qué debe hacer el usuario. ¿Recuerdas cuando jugaste un videojuego, por primera vez,
cuántas veces saltaste las explicaciones extensas o el modo “Entrenamiento”? Eso te da una idea de
lo frustrante que es para el usuario, entrar a un sitio web donde le explican cada interacción sin poder
hacer algo concreto de inmediato.
 Reduzca el número de operaciones para navegar o conseguir respuestas a sus requerimientos.
 Dosifique las operaciones que el usuario haga en el sitio. No solo basta con disminuir el número
de operaciones, sino que, además, es necesario que se haga una a la vez.
 Facilite el lenguaje gráfico por medio de paletas de color, tipografías legibles y formas no saturadas
(evitar el uso excesivo de lados, sombras, gradientes y biseles, por ejemplo).
 Pruebe su efectividad, Solo al medir el alcance de nuestro diseño podemos certificar que la
interacción es comprensible y la curva de aprendizaje es baja (el conjunto de elementos e interacción
se autoexplican).
He aquí uno de los ápices de la ciberseguridad, ya que si el sitio web muestra una interacción clara que
el usuario ya reconoce, la probabilidad de incurrir en procedimientos riesgosos disminuye. Si lo obligo a
aprender mucho dentro del sitio web, su sensación de inseguridad será mayor porque paulatinamente no
sabrá hacia dónde se dirige.
Pág. 25
Módulo: 1
d. Previsibilidad
Este principio se refiere a establecer con anticipación los
comportamientos del usuario frente a los procesos que
va a desarrollar dentro del sitio web. Sin embargo, esa
anticipación va de la mano con la visibilización, lo que
quiere decir que solo puedo prever lo que usuario hará si
conozco qué le voy a mostrar y qué le voy a ocultar.
Para entenderlo mejor, volvamos a la portada de IPP. Esta

es una portada para visitantes nuevos, donde no vemos
una interactividad directa para estudiantes, docentes o
funcionarios (está oculta en el menú = la hamburguesa),
por lo que:
 Podemos estimar que un estudiante requiere 2 pasos

para interactuar con la sección de su interés (1.
Seleccionar el menú, 2. Seleccionar la sección Figura 16: modificaciones a portal bajo los 5
Estudiantes). principios de interactividad.
 Podemos prever de 3 a 5 pasos para encontrar la Fuente: captura y edición propia.
información o respuestas que anda buscando en el sitio.
Una solución en este sentido, y así aplicar los principios que hemos visto hasta el momento, es que se
muestre (visibilizar) una franja de botones con las categorías Estudiantes, Profesores y Funcionarios que
aparezca durante unos segundos para después replegarse. Ese visibilizar y ocultar le muestra al usuario
que allí hay elementos de interacción, despierta su interés, pero no satura de información la pantalla, y le
enseña cómo funciona (aprendibilidad) (Figura 16).
e. Retroalimentación
Este principio hace referencia a todo tipo de comunicación que se le envía al usuario para responder
a sus interacciones con el sitio web. Eso quiere decir que no son solo mensajes textuales, sino que
pueden ser sonidos o cambios que el usuario pueda percibir y que le indiquen que una operación está
siendo bien o mal hecha, así también la finalización de una operación. Por lo tanto, para retroalimentar
desde una interfaz es necesario no interrumpir lo que está haciendo el usuario con exceso de mensajes o
retroalimentaciones, por lo que es preferible dar información previa si se quiere evitar un error y no
múltiples mensajes durante la navegación.
Por ejemplo, para dar retroalimentación, podemos:

 Establecer que una sección ya visitada cambie de color.
 Mostrar una leyenda sobre un icono que no sea totalmente claro para explicar qué sucede si el
usuario hace clic sobre él.
 Ubicar un mensaje en color rojo debajo de la casilla contraseña en el que le decimos al usuario que
ha ingresado mal su contraseña.
Pág. 26
Módulo: 1
 Ingresar mensajes creativos cuando falla en cargar algún recurso o una página completa. ¿Recuerdas
el “¡Ups! Algo ha salido mal, intenta de nuevo” de Spotify y Google? Ese es un mensaje que se conecta
emocionalmente con el usuario y baja su ansiedad. Mucho más significativo que una
retroalimentación con “Error 404”.
Estos cinco principios básicos de interacción funcionan en conjunto. Usualmente no podemos

establecer un diseño diferenciado por cada uno de ellos, pero el correcto equilibrio entre todos ellos
mejora la experiencia de usuario y permite mejores resultados frente a nuestros objetivos gráficos y de
interacción con el sitio web.
Pág. 27
Módulo: 1
3. Navegación web
La navegación dentro de nuestro sitio web consiste en las opciones que tiene el usuario para pasar
de un lugar (página, recurso) a otro. Los hipervínculos son clave en ello (<a href=”…”>, la etiqueta en
HTML). Este es uno de los factores de diseño web más cambiantes en la actualidad, pues la simplificación
de las acciones u operaciones del usuario, el minimalismo en el diseño gráfico (utilizar solo lo necesario,
nada extra) y algunas de las limitaciones de HTML5 han hecho que los modelos clásicos de navegación
estén en desuso.
Sin embargo, es necesario que conozcas su significado y los distintos modelos o tipos de navegación,
dado que los sitios web para noticias, bibliotecas y manejo de amplia información (algunas tiendas
virtuales) siguen utilizando más de un modelo de navegación. Luego, las principales formas de navegación
están definidas de la siguiente forma.
3.1. Navegación contextual

Son aquellas opciones para pasar a otro recurso o página que dependen del contexto (situación)
en el que se encuentran, por lo que pueden variar. En términos más prácticos, es la navegación típica
del hipertexto: desde una palabra enlazada a otra página, y que se encuentra dentro de un párrafo
(contexto), hasta el salto desde una imagen a una sección del sitio web.
Es usual que este tipo de navegación se encuentre inmersa en el contenido mismo y en las portadas de
nuestros sitios web, ya que se enmarca en las navegaciones de tipo asociativo. Estas dependen de la
relación que existe entre el origen (ej. una palabra con hipervínculo) y el destino (ej. otra página web).
Usualmente, se utiliza la navegación contextual de dos formas distintas:
• Navegación embebida que se establece dentro del contenido, en un párrafo con enlaces
(hipervínculos). En la figura 17, lo puedes ver en todos los textos de color azul que se encuentran en
el párrafo principal; destacamos con rojo algunos para que entiendas el concepto.
Figura 17: Ejemplo navegación contextual embebida (Allmusic, 2018 ).
Pág. 28
Módulo: 1
• De enlaces relacionados que se establece por medio de un texto final en un párrafo, en una columna
al lado del contenido principal o en un menú contextual (aparece con clic secundario). En la figura 18
aparece un ejemplo donde los enlaces se ubican después de la imagen principal y llevan a páginas
relacionadas con el tema principal del que trata la imagen.
Figura 18: Ejemplo de navegación contextual de enlaces relacionados. Fuente: El Tiempo (20181).
a. Vínculos contextuales
Este tipo de vínculos no son otra cosa que los hipervínculos mencionados anteriormente; no obstante, es
una oportunidad para profundizar en nuevas tendencias del diseño web enfocadas en el marketing
digital. En ellas, los vínculos contextuales son el principio de lo que hoy se llama Vínculos Profundos
(Deep links), que son una estrategia para la autopromoción de contenidos y, por medio de ellos,
podemos hacer que otros contenidos relacionados con el tema principal puedan ser enlazados y
mostrados al usuario sin que tenga que pasar por la portada de un sitio web o de una aplicación para
dispositivo móvil.
1
El Tiempo. (2018). Huracanes ahora son más fuertes por calentamiento global. El Tiempo. Recuperado el 09 de
octubre de 2018 de https://www.eltiempo.com/vida/ciencia/calentamiento-global-favorece-la-aparicion-de-
huracanes-275358
Pág. 29
Módulo: 1
Figura 19: Distintos tipos de vínculos contextuales.
El vínculo contextual profundo permite recoger información sobre el comportamiento del usuario, sus
intereses y el tiempo que permanece en nuestro sitio web.
b. Otros tipos de navegación:

 Principal: es el menú convencional donde se alojan los principales ítems que estructuran el negocio,
puede ser horizontal o vertical y conduce a distintas capas y jerarquías de nuestro sitio web.
 Local: conduce a capas y jerarquías dentro de la misma página a la que accedió el usuario,
usualmente, consiste en vínculos de texto, es muy utilizado en HTML5 y permite tener navegaciones
más rápidas que mantengan al usuario en lo esencial.
 Adaptativa: depende de la colaboración de los usuarios porque se basa en el uso de redes sociales
(Facebook, Twitter, Instagram, LinkedIn, etc.). Consiste en una sección que muestra un ranking con el
número de Me gusta (likes) o de veces que se ha compartido ese contenido.
 Por enlaces rápidos: usualmente es un combobox que le muestra al usuario las secciones o páginas
más relevantes del sitio web.
 En el pie: consiste en vínculos usualmente textuales que van en la parte final de la página, se utilizan
para las capas de negocio más administrativas. Allí se alojan las condiciones de uso (disclaimer), entre
otros.
Todos estos elementos de navegación se consideran como parte de la Arquitectura de Información que
debemos estructurar en capas más profundas dentro de la programación misma del sitio web.
Pág. 30
Módulo: 1
Saber más
En tu desempeño laboral vas a necesitar mayor fundamentación alrededor de la Arquitectura de

Información en sitios web, por lo que te invitamos a revisar el siguiente documento:
Pérez-Montoro, M. (2010). Arquitectura de la información en entornos web. El profesional de la

información, 19(4), 333-337.
3.2. Mapa de sitio

Las principales definiciones, toman al mapa de sitio como un archivo al que acceden los buscadores
(DuckDuckGo, Google, Bing y otros) para reconocer todas las páginas, recursos y elementos que contiene
un sitio web; pero en diseño web es una herramienta que nos permite entender la composición del
sitio, las relaciones que existen entre sus elementos y la jerarquía sobre la que están soportados los
contenidos.
Generalmente, el mapa de sitio funciona como una página HTML donde se encuentran todos los
enlaces a las distintas secciones y recursos del sitio web. Usualmente se asocia al pie de la portada del
sitio y, en versiones menos estandarizadas, se genera un botón o acceso que conduce al mapa. Ese mapa,
aunque puede tener una representación gráfica, está hecho bajo los estándares de la W3C usando
etiquetas.
Algunos elementos clave del mapa de sitio:

 Ayudan a mejorar las pesquisas que hacen los bot (o robots, que son un algoritmo de búsqueda)
dentro de tu sitio web, porque les dice rápidamente dónde están las cosas y qué es más importante.
 Son principalmente útiles para sitios web que tienen muchas dependencias: plataformas de venta,
catalogación, sitios gubernamentales, etc.
 Debes evitar listas con más de 100 de enlaces, puesto que entre más enlaces, más difícil se le hace
al bot para encontrar lo que el usuario solicita. Para sitios que requieran más de 100 enlaces, se parcela
el mapa de sitio en submapas que acumulen solo 100 enlaces.
 Puedes generar un mapa de sitio (sitemap) de forma sencilla a través de distintas herramientas
online, para después de generado el archivo y subido al servidor, registrarlo en los buscadores:
https://www.google.com/webmasters/tools/sitemap-list
En la figura 20 te mostramos el mapa de sitio de Apple, como lo ve el usuario, y las etiquetas que se
utilizan para generar el archivo que lee el bot del buscador (Google, DuckDuckGo, entre otros.).
Pág. 31
Módulo: 1
Figura 20: Ejemplo de mapa de sitio. Fuente: Apple (2018), captura y edición propia.
<section class="category category-iphone" data-analytics-

activitymap-region-id="iphone">
Sección iPhone <h2 resource="urn:apple:sitemap.index.iphone.headline"
typeof="schema:WebPage" class="category-title">iPhone </h2>
<section class="category-section category-section-shop first">

Categoría <h3 resource="urn:apple:sitemap.index.iphone.shop.headline"
Descubrir typeof="schema:WebPage" class="typography-sitemap-
subsection">Descubrir</h3><ul class="list list-nobullet">
<li resource="urn:apple:sitemap.index.iphone.shop.links.alliphone"
Página Todo
typeof="schema:WebPage">
sobre el <a property="schema:sameAs" href="/cl/iphone/">Todo sobre el
iPhone iPhone</a>
3.3. Metadata
Los metadatos se utilizan en el diseño web para mejorar el indexado de los sitios. Al utilizar
metadatos, los buscadores pueden encontrar con mayor facilidad los contenidos, los que permiten
visibilizar las búsquedas de Internet. No son propiamente el contenido del sitio, sino que es información
adjunta para explicar en qué consiste ese contenido (accesibilidad). Por ejemplo, si utilizas una imagen,
los metadatos podrían ser quién es el autor, cuál es la calidad, qué se muestra en la pantalla y en qué
categoría puede ser ubicada más fácilmente.
Pág. 32
Módulo: 1
Los metadatos deben ser:

 Estructurados en dos componentes principales: describir las características de cada una de las
páginas web que constituyen tu sitio y describir la calidad del contenido.
 Sencillos, pues no podemos dar descripciones amplias en las que el buscador invierta más tiempo
del que el usuario espera; por eso, debemos utilizar expresiones cortas y precisas.
 Ubicados en la etiqueta <head> del código HTML.
Los metadatos (meta etiquetas) más utilizados, son:
 Palabras clave (keywords) donde se describe brevemente el contenido de la página con títulos
relacionados al tema específico que trata su contenido. Para enlazar más temas, se utiliza el punto y
coma (ej. Festivales de música en Santiago; Festivales de Rock; Conciertos; Recitales).
Existen herramientas online que te permiten obtener keywords con rapidez a partir de las búsquedas
usuales en Google.
 Descripción (description): aquí se ingresa una pequeña descripción que diga qué cosa hay en el
contenido.
 Autor (autor), donde puedes poner tus créditos o reconocer quién hizo la página web.
 Derechos de autor <copyright>: es un metadato que dice qué derechos de copia o reproducción
tiene la página, si se suscribe a Creative Commons o si hay contenidos con registro y reserva de
derechos de copia.
 Idioma <language>: este metadato le dice al motor de búsqueda cuál es idioma predominante en
nuestra página web.
 Clasificación <rating>: este metadato se utiliza para notificar al buscador sobre las restricciones de
edad que pueda tener el contenido de nuestra página. Existen países en los que es causal de multa
o de cancelación del acceso el no notificar al buscador este metadato.
 Robots: es un metadato con el que le decimos al buscador que puede (o no) ingresar a todos los
vínculos de nuestra página e indexarlos.
Ejemplo
Un caso de metadato útil es el siguiente:
<meta name="author" content="Danny Bernal">

<meta name="description" content="IPP provee a sus estudiantes un guia completa
para principiantes sobre todo lo que necesitan para diseñar y desarrollar
sitios web">
En estos metadatos, podemos apreciar que se reconoce al autor de la página web y la descripción
de lo hay en ella.
Pág. 33
Módulo: 1
3.4. Resultados de búsqueda

Finalmente, uno de los elementos que demuestra el éxito de un sitio web es la cantidad de visitas que
puede obtener. Para ello, estar bien posicionado en los motores de búsqueda es fundamental para
ser visto, especialmente cunado un usuario hace una búsqueda asociada a los temas que ofrecemos en
nuestra web. Los resultados de búsqueda se generan a partir de la interacción entre el bot del buscador,
el mapa del sitio y los metadatos.
Evidentemente, que tu sitio web esté entre los primeros resultados de la lista que muestra el buscador
depende de más factores, entre ellos el número de veces que un sitio ha sido encontrado bajo los
parámetros ingresados por el usuario. La recomendación es definir muy bien las palabras clave,
secciones y categorías de tu página y buscar un registro indexado que permita mayor interacción
entre el buscador y tu página web.
Ejemplo
Para dejar más claro este tema, te invitamos a realizar la siguiente búsqueda en Google, relacionada
con “instituto técnico profesional admisión”.
https://www.google.com/search?q=instituto+tecnico+profesional+admision
Al observar la búsqueda, te darás cuenta de que el primer resultado está relacionado con un pago
directo para que aparezca entre los primeros. Sin embargo, IPP aparece en séptima posición, lo que
indica que se debe trabajar más en los metadatos y el mapa de sitio; así como se deben generar
estrategias para que crezca el flujo de usuarios por el sitio web.
Pág. 34
Módulo: 1
Cierre
En este primer módulo hicimos un recorrido por los principales conceptos que permiten estructurar
el diseño de sitios web, a partir del estudio de cada uno de sus componentes de contenido, de las
distintas técnicas de diseño, de los principios de interacción que permiten generar mejores respuestas en
el usuario, así como las metodologías para construir una navegación correcta de los contenidos y su
disponibilización en los buscadores comunes de Internet.
Al observar en detalle lo que hemos visto en este módulo, te podrás dar cuenta que las explicaciones
sobre el tratamiento de la imagen en sitios web nos permiten tener las bases para entrar en el mundo
de Adobe Photoshop, desde la perspectiva del diseño gráfico computacional, como una forma de mejorar
la composición gráfica, atrayendo y enfocando la atención de los usuarios a partir de la proporción, las
dimensiones, el tamaño y los formatos de archivo. En un mundo web cada vez más visual, es importante
que hayas reconocido los fundamentos digitales para integrar imágenes en páginas y sitios que quieren
mejorar la experiencia de usuario.
Desde esta perspectiva, pasamos a reconocer y comparar distintas formas de diseño web, lo que te
permite tener una base conceptual con la que puedas asumir los siguientes tres módulos, apuntando a
un maquetado (Photoshop e InDesign) y desarrollo (Dreamweaver) consiente de las estructuras clásicas,
la utilización de cuadrículas y el diseño responsivo. Sería difícil desarrollar una maqueta de portada para
página web en InDesign si no tuvieses claro que existen diferentes formas de composición que permiten
distintos niveles de distribución e interacción.
Complementando los elementos de diseño web, en este módulo profundizamos en los principios
conceptuales de la interacción. Todo sitio web tiene un sistema de información asociado, por lo que la
interacción y el desarrollo de interfaces nos permite prever funcionamientos de los objetos en pantalla y
de los comportamientos del usuario en ese componente gráfico que resume lo que el sistema pretende
hacer. Aplicar esos cinco principios básicos de interacción te va a permitir diseñar mejores objetos
gráficos (Photoshop), maquetas (InDesign) más cercanas al funcionamiento final y sitios web que
prevengan los errores (Dreamweaver), minimizando los factores de seguridad que pueden afectar a este
tipo de desarrollos de software.
Finalmente, todos los elementos de navegación web que vimos durante el módulo (tipos de
navegación, metadatos, mapa de sitio), te permiten dirigir el trabajo venidero hacia la experiencia de
usuario y la indexación de contenidos para que los buscadores puedan ubicar tu sitio web en los
primeros lugares entre los resultados que el usuario va a ver.
Te invitamos a profundizar en cada uno de los conceptos vistos y a hacer evaluaciones de sitios
web de tu interés bajo los principios vistos en este módulo, de manera tal que puedas comprobar lo
que has aprendido sobre el diseño web. Nada mejor en nuestra industria que un ingeniero que es capaz
de ver dónde falla la competencia y dónde tenemos oportunidades de diferenciar nuestra propuesta de
negocio.
Pág. 35

M1 - Diseño Gráfico Computacional

Cargado por

Copyright:

Formatos disponibles

M1 - Diseño Gráfico Computacional

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

M1 - Diseño Gráfico Computacional

Cargado por

Copyright:

Formatos disponibles

Área: Tecnología

Diseño gráfico computacional

M1 Conceptos básicos de diseño web

Conceptos básicos de diseño web

Imagen digital Interfaz de usuario Navegación contextual

Diseño con cuadrículas Metadata

Tendencias futuras Resultado de búsqueda

3. Navegación web ............................................................................................................................................................................................. 28

Figura 1: comparativa histórica de menú para TV. Fuente: Pixabay (2018).

Es un conjunto de páginas y recursos conectados entre sí que se aloja en un

Es un conjunto de recursos (texto, imagen, video, audio) y vínculos que se

La interfaz de usuario de una página web es la pantalla del dispositivo en el que

1.1. Imagen digital

c. Imagen mapa de bits

Figura 3: imagen digital de mapa de bits. Fuente: McGuire (20182).

A continuación, te dejamos una comparativa de imágenes que demuestran la diferencia en el

1.2. Formatos multimedia

1.3. Lienzo y proporción

• Regla de los tercios: consiste en dividir la imagen en 3 partes

• Simetría dinámica: se obtiene trazando diagonales entre los

• Proporción áurea: es un concepto transversal a todos los

1.4. Diseño web

• Diseño para el acceso rápido:

• Diseño para la accesibilidad

• Diseño de la experiencia de usuario

b. Diseño web clásico

Figura 8: esquema general de diseño web clásico.

c. Diseño con cuadrículas

Unidad de 160 160px 160px 160px 160px

Figura 9: estructura de una cuadrícula para diseño web.

Diseño de 4 columnas y complejos

Para que quede aún más claro, veamos este ejemplo:

d. Diseño adaptativo y responsivo

1.5. Tendencias futuras

a. Cuidado de las fuentes.

2. Diseño orientado a la interacción

2.1. Interfaz de usuario

c Contacto por VozIP.

Figura 14: elementos interactivos en sitios web (IPP, 20191).

2.2. Principios de diseño orientado a la interacción

 ¿Cómo percibimos la interactividad de esa

Figura 15: Ejemplo de reforzamiento de la

 Establezca relaciones (contextuales) entre lo que ya sabe el usuario y lo nuevo que se le

Para entenderlo mejor, volvamos a la portada de IPP. Esta

 Podemos estimar que un estudiante requiere 2 pasos

Por ejemplo, para dar retroalimentación, podemos:

Estos cinco principios básicos de interacción funcionan en conjunto. Usualmente no podemos

3.1. Navegación contextual

Usualmente, se utiliza la navegación contextual de dos formas distintas:

Figura 17: Ejemplo navegación contextual embebida (Allmusic, 2018 ).

Figura 19: Distintos tipos de vínculos contextuales.

b. Otros tipos de navegación:

En tu desempeño laboral vas a necesitar mayor fundamentación alrededor de la Arquitectura de

Pérez-Montoro, M. (2010). Arquitectura de la información en entornos web. El profesional de la

3.2. Mapa de sitio

Algunos elementos clave del mapa de sitio:

<section class="category category-iphone" data-analytics-

<section class="category-section category-section-shop first">

Los metadatos deben ser: