Este documento discute las diferencias entre los formatos vertical y apaisado utilizados en medios impresos y pantallas respectivamente, y cómo esto afecta el diseño de retículas. Explica que las retículas deben considerar factores como la resolución y configuración de pantallas del usuario. Presenta ejemplos de retículas de movimiento y tiempo, así como diagramas de escalera. Finalmente, analiza la ubicación común de las barras de navegación a la izquierda o en posición horizontal.

1. Unidad 2 – Sesión 7
Retículas para pantalla
Carlos Andrés Lozano G.
Seminario de medios digitales

2. 07 Retículas para pantalla
Conceptos generales
Algo que aunque
evidente, se
acostumbra a
pasar por alto, es
que por lo
general los
medios impresos
suelen
presentarse en
formato retrato o
vertical, mientras
que la pantalla
impone el uso de
un formato
apaisado.
Presentación en pantalla del sitio web de Apple
2

3. 07 Retículas para pantalla
Este factor afecta la distribución de los elementos de la retícula en pantalla es
decir, la fijación de la altura y longitud de las columnas y la distribución de las
ilustraciones y elementos del diseño que se trabaje.
Presentación en pantalla del sitio web de BlackBerry
3

4. 07 Retículas para pantalla
Al tratar el tema de la retícula
en pantalla hay que establecer
las diferencias que se
presentan entre el papel y la
pantalla, debido a que una
impresión en papel esta
totalmente fijada y los posibles
cambios que se puedan dar en
su presentación se darían como
consecuencia del paso del
tiempo o de un almacenamiento
indebido, sine embargo los
posibles cambios que se
presentan el la presentación en
pantalla depende de muchas
variables como el sistema
operativo del usuario, la
definición de pantalla, los
ajustes que se hayan realizado
sobre la misma, entre otros.
4

5. 07 Retículas para pantalla
Factores que debe abarcar una retícula
La finalidad de la
retícula bien
definida debe
recoger los
factores que
puedan influir en
la continuidad, la
identificación y la
orientación.
A continuación se mostrarán ejemplos tomados de la red del tipo de retícula
de movimiento y tiempo.
5

6. 07 Retículas para pantalla
Retícula de movimiento y tiempo
Atrae la atención del usuario mediante una pauta de acción y velocidad de los
objetos móviles
El Banner principal del
sitio www.porvenir.com.co
Muestra a través del
movimiento diferentes
opciones con las que el
usuario puede
interactuar, el diseñdor
coloca información que
sonsidera relevante
puesto que es muy
atractivo y esta ubicado
en un lugar donde la
visual tienen
preponderancia (lado
superior izquierdo)
6

7. 07 Retículas para pantalla
Retícula de movimiento y tiempo
El movimiento de este
espacio se da en dos
niveles pues consiste
en 4 casillas que rotan
con una información
especifica (nivel 1), el
segundo nivel de
movimiento está dado
por la propia
animación de la
casilla, haciéndolo
muy llamativo y
captando fácilmente
la atención del
usuario
En la página anterior se apreciaba la imagen del cuadro
No 1 de 4 en esta ocasión se aprecia el No 2 de 4
7

8. 07 Retículas para pantalla
Retícula de movimiento y tiempo
Animación No 3 de 4
8

9. 07 Retículas para pantalla
Retícula de movimiento y tiempo
Luego de dar clic sobre la
imagen No 3 del banner
se despliega una nueva
página en donde se
amplia la información del
contenido que
inicialmente se presento
en forma de movimiento
en el banner ubicado en
el home
9

10. 07 Retículas para pantalla
Retícula de movimiento y tiempo
Animación No 4 de 4
10

11. 07 Retículas para pantalla
Diagrama en escalera
Se construye peldaño a peldaño empezando por la página de inicio. El usuario
únicamente puede seguir una ruta predefinida sin posibilidad de decidir con
libertad la información que desea visualizar.
Este principio de
navegación es
utilizado para la
solicitud de datos
personales
generalmente
para fines de
comercio
electrónico como
se muestra a
continuación.
En este ejemplo se realizará el paso a paso para
acceder a la información de una cuenta
11

12. 07 Retículas para pantalla
Diagrama en escalera
Al dar clic en el área deseada aparece una ventana emergente que solicita los
datos de ingreso
En la zona marcada se deben ingresar los datos teniendo en
cuenta las recomendaciones que la misma página informa
12

13. 07 Retículas para pantalla
Diagrama en escalera
El usuario llega al sitio donde puede consultar su información, aún en este
módulo también se encuentran más opciones de interactividad según la
necesidad que tenga..
Zona interactiva,
donde el usuario
podrá realizar
otro tipo de
operaciones y/o
consultas .
En esta zona el usuario visualiza la información base
sobre la cual inició su proceso de navegación.
13

14. 07 Retículas para pantalla
Esquemas de navegación – Ubicación de la
barra de navegación
Normalmente una página web se compone de los elementos básicos, como un
campo de texto, un campo de imágenes y un campo de navegación.
La estructura
recomendada ubica el
campo de
navegación, que
presenta la lista de
contenidos, en el lado
izquierdo de la
pantalla, esto
adoptando el hábito
de lectura de los
usuarios de occidente
que leen de izquierda En este ejemplo tomado del sitio
a derecha. http://www.ulibertadores.edu.co:8089/ se observa
el uso de la barra de navegación en el lado izquierdo.
14

15. 07 Retículas para pantalla
Esquemas de navegación – Ubicación de la
barra de navegación
Se busca concentrar la atención en la información estructural, para que luego de
la interacción y la navegación el usuario llegue a la información detallada.
Otra razón par ubicar la
barra de navegación a
la izquierda es que l
visualización del usuario
depende de su
pantalla, sin embargo a
este lado de la pantalla
aparecerá la imagen sin
necesidad de
desplazamiento
independientemente de
la resolución que
Este ejemplo tomado de la red social eviencia el uso
maneje el usuario en
de la barra de navegación en el lado izquierdo.
pantalla.
15

16. 07 Retículas para pantalla
Esquemas de navegación – Ubicación de la
barra de navegación
También es común observar el uso de la barra de navegación en posicion
horizontal. Una barra de este tipo deja mas espacio para insertar información
dentro de la zona de navegación.
En este ejemplo tomado del sitio http://www.movistar.co/ se
observa el uso de la barra de navegación horizontal
16