Universidad Veritas
Tema: ¨Retículas¨
Alpízar V, Marcela
Abril 2014
Introducción Al igual que la mayoría de actividades del ser humano, hablar sobre diseño es imposible sin retomar sus bases y el comienzo y desarrollo de las mismas. Estudiar lo último en diseño web implica conocer las bases del diseño de periódicos, textos antiguos e igualmente recientes. Del mismo modo sucede con el conocimiento sobre los fundamentos de las retículas, su importancia y sus posibilidades basadas tanto en la naturaleza como en la matemática. Dandole al mismo tiempo más relevancia a los estudios previos que originan dichos fundamentos y teorías. En la misma sintonía se encuentra la teoría del color, vista por algunos como un juego de niños y por otros como una poderosa y silenciosa arma psicológica. Curiosamente se define a la retícula como contenedor de elementos, pero también podríamos ver al diseño y al diseñador como contenedor de componentes, ya que un diseño éxitoso es una mezcla armoniosa de colores, una selección cuidadosa de tipografías y una debida retícula. Esta breve compilación propone una introducción básica sobre estos componentes, que dicho sea de paso, en la actualidad se utilizan en función de diversos factores: usuario, pantalla, resolución, usabilidad, accesibilidad, uso web o móbil, etc. Por ende, además de una vista a los origenes de los diferentes componentes, se analizará la utilización y modificaciones que han sufrido a través de diferentes períodos históricos.
Retículas Concepto e importancia
La retícula se define como una estructura o patrón de líneas que se utiliza como guía para situar los elementos de un diseño. Las mismas son guías indispensables que ordenan los elementos de un diseño y ayudan a los lectores a acceder fácilmente a la información. La retícula proporciona una estructura para todos los elementos de diseño de una página, lo que facilita y simplifica el proceso creativo y la toma de decisones por parte del diseñador, aporta mayor precision y coherencia en la situación de elementos en una página, un marco que hace posible un grado mayor de creatividad. Uno de los beneficios más importantes para el diseñador y el diseño es que permite la toma de decisiones y utilización del tiempo de manera más eficiente y proporciona al diseño más dinamismo. Si bien es cierto, las reticulas llevan más de 300 años evolucionando, se puede observar las primeras páginas, generalmente organizadas en dos columnas y como elementos como letras capitulares o lineas finas, gruesas o una combinancion de las mismas se comienza a utilizar para separar distintos elementos, otorgando al documento claridad y jerarquía. Por ende, se puede extraer que una de las principales funciones de las reticulas es organizar la informacion. Este principio se mantiene inalterable a través del tiempo.
El lamento de Ariadna, edición de 1584.
Estilo Early Americana, siglo XVIII
Cómo se lee una página Los principios estructurales de una pagina impresa se siguen aplicando a los contenidos que podemos ver en formato electrónico o a través de Internet, puesto que la manera de leer una pagina y de extraer informacion de ella se mantiene igual. Se podría decir que hay total libertad en cuanto a dónde situar los elementos dentro de una página. Pero la manera en la que el ojo humano “lee” una página o una imagen convierte algunas zonas en “áreas de mayor interés” y otras en “áreas de menor interés”. Sabiendo esto, es fácil utilizarlo a nuestro favor. En la imagen se puede observar como el ojo al comenzar a leer trata de localizar información en la esquina superior izquierda, y a continuación recorre la página en diagonal hacia abajo para leerla. Se puede entonces hablar de areas activas y pasivas de un diseño.
Cómo se mira una pantalla Al igual que en una página impresa, el lector busca en una página web las palabras clave o los puntos de interés. El diseñador entonces, debe facilitar el proceso destancando las principales secciones de información añadiendo puntos que destaquen los mismos. Patrón de lectura en F del contenido de una web: dos líneas horizontales seguidas de una línea vertical. Como se muestra en la figura inferior , el formato en F es una estructura que se ha comprobado que el lector tiende a utilizar para leer páginas web. Se explora rápidamente la parte superior de izquiereda a derecha en dos franjas y seguidamente se explora la página hacia abajo en busca de elmentos significativos. Esto se traduce en diseño a que la inforación clave y los puntos de entrada deben situarse en el área de esta estructura de F para aumentar las oportunidades de captar la atención del usuario. Esto es una referencia ya que los patrones de exploracion varian en función del diseño, por ejemplo, un diseño que contiene un elemento en un área que normalemnte está inactiva provoca una exploración distinta. Se concluye que el patrón en F contiene las siguientes implicaciones:
Los usuarios de una página web no van a leer el texto completo palabra por palabra. La lectura exhaustiva es rara, especialmente cuando los futuros clientes están realizando un análisis para identificar posibles empresas o páginas web donde comprar sus productos o servicios. Los primeros dos párrafos tienen que expresar la información más importante. Existe la esperanza de que algunos usuarios lean estos párrafos. Y es más posible que lean el primero y no el segundo. Comenzar los encabezados, títulos y viñetas con palabras que estén cargadas de significado.
La pirámide invertida Esta estructura suele utilizarse para presentar informacion en la prensa escrita. La información más relevante aparece en primer lugar, mientras que el resto de información se presenta en orden de importancia decreciente. Cuando esta estructura se utiliza en la web hay que tomar en cuenta que el lector tomará menor tiempo de lectura que en la página impresa, por ende, se debe la información más destacada debe colocarse al principio, acompañada por subtítulos claros en la parte izquierda, siguiendo el patrón de lectura en forma de F.
Principios fundamentales La retícula se puede ver como el esqueleto o marco básico de un diseño. Brinda una estructura que orienta la localización de los elementos propios de un diseño como texto, imágenes e ilustraciones y en general títulos o números de página. Existen distitnas formas de utilizar las retículas para lograr un diseño dinámico: crear puntos de atención o formas, combinar distintas proporciones para añadir movimiento, o establecer una jerarquía. Ya que la retícula delimita el espacio en una página, es necesario conocer las medidas y conceptos básicos para brindarle más dinamismo a las mismas.
a. Formas en una página La composición de un diseño está formada pñor caracteres e imágenes que dibujan formas en la página. Estos elementos pueden ser tratados como figuras para crear un diseño coherente y eficaz. Algunas de las composiciones más comunes son: 1. 2. 3. 4. 5.
Agrupación: bloques de información relacionada. Perímetro: perímetro de la página con la imágenes a sangre. Horizontal Vertical Apaisado: texto leído verticalmente, generalmente para datos tabulados extensos para una página estáandar. 6. Angular 7. Orientación axial: eje 8. Paspartú: imagen domina el espacio.
b. La proporción Aporta un efecto dinámico entre los distintos elementos de un diseño. Ya sea una proporción equilibrada o desviada hacia ciertos elementos, cambiando así la dinámica de la página. Mantener la proporción entre distinos elementos puede servir para mostrar distintas vistas del mismo elemento, creando un espacio neutro. Se pueden citar como ejemplos la yuxtaposición pasiva y activa.
Pasiva contrates por sus diferencias reales y no por sus proporciones.
Activa modificando las proporciones , la imagen de mayor tamaño capta más la atención y domina la doble página, lo que da mayor importancia.
c. Jerarquía Una manera en que también se puede presentar la información más importante en un diseño es a través de la escala o la localización o ubicación. Neutral: ninguna jerarquía entre dos columnas de textos por ejemplo. Posición: la situación de un elemento, por ejemplo una línea aislada en la página izquierda. Posición y tamaño: situar un elemento en el punto de atención inicial, modificar su tamaño e introducir espacios entre elementos establece su dominio en la jerarquía. Posición, tamaño y énfasis: sucese por ejemplo en el caso del color, añadir un énfasis a un elemento para ubicarlo en el nivel más alto de la jerarquía. d. Dibujar una retícula Existen diferentes manera de dibujar una retícula, algunos incluso con lógica matemática. Se puede mencionar por ejemplo un diseño clásico basado en porciones, donde la retícula se crea a partir de las relaciones de proporcionalidad. Por ejemplo una página de proporciones 2:3.
Jan Tschichold (1902-1974) De igual manera se puede utilizar unidades como la serie numérica de Fibonacci, que además de servir para obtener proporciones, se fundamenta en las proporciones del mundo natural. Esta serie sirve para crear una división armoniosa en la página con la proporcion de la razón aurea 8:13. Secuencia de Fibonacci Una serie numérica en la que cada número es la suma de los dos precedentes.
Leonardo Pisano Fibonacci (1170 - 1250)
e. La regla de los tercios Al colocar una retícula de 3x3 sobre una imagen se crea una guía de composición que sirve como efecto dinámico. Identifica puntos de atracción en los puntos de intersección de las líneas de la retícula. Se crea un equilibrio de la composición global y es estéticamente agradable.
f.
La regla de los impares
Esta regla estipulaque un número impar de elementos en una composición resulta más interesante que número par.Sirve para situar elementos cerca de los puntos de atracción creando tensión.
g. Tipos de retícula La retícula a puede variar dependiendo del elemento a representar, imágenes, información compleja, grandes bloques de texto, etc. Existe la retícula Simétrica: La retícula simétrica presenta un efecto reflejo en la página con medianil y márgenes idénticos.
Asimétrica: Crea una doble página en la cual existe la misma disposición pero descentrada, hacia la derecha o hacia la izquierda.
Modular: Los módulos son unidades separadas en un sistema reticular que permite contener y agrupar elementos de texto e imagen.
h. Elementos de una reticula Una de las principales funciones de la retícula es contener los diferentes elementos propios de un diseño. Además de contener, se busca administrar armoniosamente, sin que esto sea contradictorio a la funcionalidad y estética. El diseñador decida cual combinación de elementos desea llevar acabo. Entre los elementos primordiales se destacan:
Caracteres La línea base Imágenes Alineación Columnas Anchura de columna Tipografía Escala Espacio en blanco
i.
La retícula en Internet
Uno de los mayores beneficios de la Internet ha sido la implementación de audio y video en nuestros procesos cotidianos de información; Sin embargo, el texto y las imágenes siguen siendo los preferidos. Por un lado esto implica la importancia de una base sólida de conocimientos en la teoría del diseño, por parte del diseñador. Por otro lado, existe mayor flexibilidad y posibilidad de explotar su creatividad gracias a las herramientas mencionadas anterioremente, audio y video. A través de la experiencia que han vivido los medios tradicionales de comunicación en la ahora época cibernética, se ha podido mejorar la manera en que se lleva a la pantalla el formato de una página impresa con mayor flexibilidad y accesibilidad. Actualmente los diseñadores además de pensar en la cantidad de columnas, también deben tomar en cuenta el tamaño de la pantalla, la resolución y los dispositivos mobiles.
Principios básicos de una web
La anchura de una página depende del público al que se dirige. Actualmente los sitios estan trabajando una anchura de 1024 píxeles. Anchura determinada y flexible. Padding se utiliza en HTML para definir elespacio entre distions elementos del diseño. Orientación horizontal, vertical, descedente.
Ejemplos y recursos de retículas para web Retícula estática de 6 columnas la manera más fácil estructurar sitios en CCS.
Retícula simple de CCS
Sistema de retícula 960: es uno de los más utilizado por la cantidad de templates de soporte para Photoshop, Illustrator e InDesign.
Gridsystemgenerator: crea retículas para prototipos de sitios web, tambié tiene tutoriales.
Bibliografía Ambrose-Harris. Retículas. Primera edición. Grupo Editorial Norma, 2008 Ruiz, Bernardo. ¨Diseñar Webs con retículas¨. 4 de febrero del 2001. http://25horas.com/disenar-web-con-reticulas/ Consulta: 29 marzo del 2014.