composición para el diseño de formatos de pantalla

De Formalising guidelines for the design of screen layouts, JG Byrne, 1999

http://shdl.mmu.edu.my/2721/1/1962.pdf

Estética y composición en el diseño de interfaces, que pueden contener cualquier combinación de texto, gráficos e imagenes.

Encontraremos muchos textos que discuten sobre las teorías del diseño, tanto en obras de arte como en obras comerciales. Arnheim (Art and Visual Perception, 1954) y Dondis  (A Primer of Visual Literacy, 1973) son buenos ejemplos. De la literatura sobre diseño en pantalla, tenemos a Galitz (The Essential Guide to User Interface Design, 1997), la guía esencial para el diseño del interfaz de usuario, presenta una extensa lista de pautas muy específicas para el diseño de pantallas. A través de una revisión de esta y otras obras similares, se obtuvo catorce medidas estéticas para las pantallas gráficas: el equilibrio, la simetría, la secuencia, la cohesión, la unidad, la proporción, la sencillez, la densidad, la regularidad, la economía, la homogeneidad, el ritmo y el orden y la complejidad. Esta sección se centra en las descripciones y ejemplos de estas medidas.

Equilibrio. El equilibrio puede ser definido como la distribución del peso óptico en una imagen. Peso óptico se refiere a la percepción de que algunos objetos parecen más pesados que otros. Objetos de mayor tamaño son más pesados, mientras que los objetos pequeños más ligeros. El equilibrio en el diseño de la pantalla se logra al proporcionar una cantidad igual de elementos de la pantalla, izquierda y derecha, arriba y abajo. En la Fig. 1 se presentan “buenos” y “malos” ejemplos de equilibrio. Fig. 1 (a) presenta una pantalla de equilibrio en que la mitad del peso es más o menos en un lado de la pantalla y la otra mitad en el otro. Fig. 1 (b) se muestra un esquema visual desequilibrado (se ve como si fuera a caerse).

Estabilidad. El equilibrio es estabilidad, pesos repartidos desde el centro de suspensión. El equilibrio en una pantalla se consigue centrando el diseño en la pantalla. El centro del diseño coincide con el de la trama. Es algo relacionado con el equilibrio. La estabilidad se ve en los centros visuales, el equilibrio visual en pesos. Fig. 2 se presentan las “buenas” y las “malas” versiones en estabilidad. En la figura. 2 (a) el equilibrio se logra mediante el centrado de la misma disposición. El centro de la disposición mostrada en la figura. 2 (b) está algo más bajo que el centro del marco.

Simetría axial, la simetría es la duplicación: una unidad en cada lado. En la Fig. 1(a) hay equilibrio pero sin simetría. La Fig. 3 presenta “buenas” y “malas” versiones de simetría. En la figura. 3 (a) la simetría se consigue con los mismos elementos a la izquierda y derecha de la línea central de la pantalla. Fig. 3 (b) presenta un diseño asimétrico.

Secuencia. Secuencia en diseño se refiere a la disposición de los objetos en una presentación que facilita el movimiento de la mirada a través de la información que se muestra. Normalmente, el ojo, entrenado por la lectura, se inicia desde la parte superior izquierda y se mueve de ida y vuelta a través de la pantalla a la parte inferior derecha. Estudiando la percepción se han encontrado que ciertas cosas atraen la mirada. Se mueve a partir de objetos grandes y se desplaza la mirada hacia los objetos pequeños. La Fig. 4 presenta “buenas” y “malas” versiones de secuencias. En la Fig. 4 (a) la secuencia se logra mediante la organización de los elementos que guían el ojo. Lo contrario sucede en la Fig. 4 (b), donde la acción de la mirada y el flujo no puede ser detectado.

Cohesión. En el diseño de la pantalla, el aspecto de espacios proporcionales similares provocan cohesión. Nos referimos a la relación de anchura y la altura. Los tamaños típicos de papel son más altos que anchos, mientras que lo opuesto pasa con pantallas de visualización. El cambio en el aspecto del campo visual puede afectar a la visión de los patrones de movimiento. La relación de aspecto de un campo visual debe ser el mismo durante el escaneo de una pantalla. La Fig. 5 presenta “buenas” y “malas” versiones en el estudio de la cohesión. En la Fig. 5 (a) la cohesión se consigue manteniendo el aspecto relación de un campo visual. El uso de la pantalla de la figura. 5 (b) puede verse afectada por la relación irregular de los elementos de la pantalla.

La unidad. La unidad es la coherencia, un conjunto de elementos que se visualizan como una sola pieza. Con la unidad, los elementos parecen que encajan de una manera tan completa que se ven como una sola cosa. La unidad en el diseño de la pantalla se logra con el uso de tamaños similares y dejando menos espacio entre los elementos de la pantalla que el espacio que queda al margen. En la Fig. 6 se presentan “buenas” y “malas” versiones en el estudio de la unidad. Los elementos se agrupan y son rodeados por espacios en blanco. Los elementos en la figura. 6 (b) se ven como si están listos para salir de la pantalla.

Proporción. A lo largo de los siglos, las personas y las culturas han preferido las relaciones proporcionales. Lo que constituye la belleza en una cultura no es considerado necesariamente lo mismo por otra cultura, pero algunas formas proporcionales han resistido el paso del tiempo y se encuentran en abundancia en la actualidad. Marcus [Graphic Design for Electronic Documents and User Inter- faces, ACM Press, New York, 1992.] describe las siguientes formas estéticamente agradables: cuadrado (1:1), la raíz cuadrada de dos que es el formato DIN-A (1:1.414), el rectángulo aureo (1:1.618), el rectángulo raíz cuadrada de tres (1:1.732), y el doble cuadrado (1:2). En el diseño de pantalla, estas proporciones estéticamente agradables deben ser consideradas para los principales componentes, incluyendo las ventanas, los grupos de datos y textos. En la Fig. 7 se presentan “buenas” y “malas” versiones en el estudio de la proporción. En la figura. 7 (a) la proporción se logra con las medidas. Estas proporciones no puede ser reconocidas en los elementos de la Fig. 7 (b).

Simplicidad. La simplicidad es la sencillez de formas, una combinación de elementos que se traduce en la facilidad de comprender el significado de un patrón. Simplicidad en el diseño de la pantalla se logra optimizando el número de elementos en una pantalla y minimizar los puntos de alineación. Tullis [ Predicting the usability of alphanumeric displays, PhD Dissertation, Rice University, Houston, TX, 1984.] ha establecido una medida de la complejidad de la pantalla basados en la obra de Bonsiepe [A method of quantifying order in typographic design, Journal of Typographic Research 2 (1968) 203–220.], que propuso un método para medir la complejidad de la tipografía en páginas diseñadas a través de la aplicación de la teoría de la información. La Fig. 8 presenta “buenas” y “malas” versiones en el estudio de la simplicidad. En la figura. 8 (a) la simplicidad se consigue por que se reduce al mínimo los puntos de alineación. Fig. 8 (b) tiene una medida inferior en simplicidad, ya que cuenta con más puntos de alineación.

La Densidad. La densidad es la medida en que la pantalla esta cubiertas con los objetos. Una óptima densidad se logra mediante la restricción de elementos en la pantalla. La Fig. 9 presenta “buenas” y “malas” versiones en el estudio de densidad. En Fig. 9 (a) la densidad se logra mediante la restricción de la densidad de la pantalla. En la Fig. 9 (b) presenta un desordenado y abarrotado diseño.

Regularidad. La regularidad es una uniformidad de los elementos en base a un principio o un plan. La regularidad en el diseño de la pantalla se logra a través del espacio y la agrupación de componentes. Por tanto la simplicidad y la regularidad dependen del número de puntos de alineación horizontal y vertical. A diferencia de la simplicidad, la regularidad es menos sensible a la cantidad de los elementos en la pantalla. En la Fig. 10 se presenta “buena” regularidad y se logra mediante el establecimiento de un espacio constante de puntos de alineación horizontal y vertical. Los elementos de la Fig.10 (b) están desigualmente espaciados.

Economía. Economía es el uso cuidadoso y discreto de mostrar los elementos para hacer llegar el mensaje tan simple como sea posible. La economía se logra mediante el uso de tamaños uniformes. En la Fig. 11 se presentan las “buenas” y “malas” versiones en el estudio de la economía. En la figura. 11 (a) la economía se logra con un solo tamaño. Fig. 11 (b) tiene una baja economía ya que utiliza más tamaños.

Homogeneidad. El grado relativo de homogeneidad de un composición se determina por la uniformidad que los objetos son distribuidos entre los cuatro cuadrantes de la pantalla. El grado de uniformidad es una cuestión de que los cuadrantes contengan más o menos el mismo número de objetos. La Fig. 12 presenta “buenas” y “malas” versiones en el estudio de la homogeneidad. En la Fig. 12 (a) la homogeneidad se logra mediante la distribución de la objetos de manera uniforme entre los cuatro cuadrantes de la pantalla. Los elementos de la figura. 12 (b) no se distribuyen equitativamente.

Ritmo. Ritmo en el diseño se refiere a patrones regulares de cambios en los elementos. Este orden con variación ayuda a dar un aspecto emocionante. El ritmo se lleva a cabo a través de la variación de la disposición, dimensión, número y forma de los elementos. La medida en que el ritmo es introducido en un grupo de elementos depende de la complejidad. En la Fig. 13 se presentan “buenas” y “malas” versiones en el estudio del ritmo. En la figura. 13 (a) el ritmo se logra a través de sistematización. Los elementos de la figura. 13 (b) crean el caos, y la confusión.

Orden y complejidad. La medida de orden y complejidad se define como un conjunto de medidas sobre un diseño. El polo opuesto del orden es complejidad. La escala creada también puede ser considerada una escala de complejidad, con una complejidad extrema en un extremo y una mínima complejidad (orden) en el otro.

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: