Como aplicar la regla de la proporción Divina (o la proporción de Oro) a sus diseños ...
Page 1 of 6
MI CUENTA
Buscar
Lo estamos traduciendo, ayudenos! ↓
Lo hemos traducido ↓ Principal
Internet
Hardware
Software
Ciencia
Trabajo
Como aplicar la regla de la proporción Divina (o la proporción de Oro) a sus diseños web
↑ Evaluar ↓
Traducir
Proponer
Últimas propuestas de traducción kozkozkoz → Convirtiendo visitantes en usuarios mrhartigan → Trabajar mas eficiente: un método eficaz para mejorar la eficiencia mental
Un diseño eficaz no tiene porque ser bonito y colorido - tiene que ser claro e intuitivo; realmente, ya hemos analizado los principios de un diseño efectivo en
mrhartigan → El futuro de las redes sociales en dispositivos móviles
nuestros anteriores artículos. Aun así, como podemos conseguir un diseño tal diseño ? Bueno, hay varias opciones - por ejemplo, podemos usar rejillas, podemos
→ Captcha: css "sprites", campo de minas y concesión de licencias
optar por una solución simplista o nos centramos en usabilidad. Sin embargo, en todos estos casos necesitamos que nuestros usuarios tengan una clara imagen de
mrhartigan → Pseudo Ajax
orden, armonía, balance y comfort. Allí es donde entra en juego la proporción Divina. Este artículo explica que es la Proporción Divina, en que consiste la Regla de Tercios y como las podemos aplicar a nuestros diseños. Claro que hay muchas posibilidades. Esperemos que este artículo os ayude a encontrar el camino hacia un diseño efectivo y bonito o por lo menos os proporcione algunas pautas a seguir en su
kozkozkoz → Diseño de aplicaciones grandes con Ext Js
mrhartigan → Puede que MySpace tenga muchos amigos, pero lo que quiere son los ingresos de la publicidad mrhartigan → Un buen uso de Ajax mrhartigan → Como usar los espacios de nombres para organizar su código JavaScript mrhartigan → Como aplicar la regla de la proporción Divina (o la proporción de Oro) a sus diseños web
próximo desarrollo. La Proporción divina
Top usuarios mrhartigan (17)
Desde el renacimiento, numerosos artistas e arquitectos intentaban conseguir las proporciones de oro para sus obras - especialmente en los rectángulos de oro, donde
kozkozkoz (11) krammer (4)
la proporción del lado más largo a más corto es el número áureo (o el numero de oro). La explicación que esta detrás de eso es que es una proporción orgánica, universal, armónica y especialmente estética. De hecho al ser evidente en todas las partes del universo (es un hecho que muchas cosas que nos rodean pueden ser expresadas en esta proporción), la proporción divina (la cual también se llama la
Inicio de sesión Iniciar sesion / Registrarse
proporción de oro), sección divina, sección de oro ) es probablemente la ley de proporción mas conocida que puede mejorar drasticamente la comunicación de vuestro diseño con el usuario final.
Etiquetas
Como menciona Mark Boulton en su artículo Diseño y la Proporción Divina, "una de
carreras css empresa empresas ext
las componentes clave de la comunicación con el usuario es la estructura, y en las escuelas de diseño se enseña como algo que se debe sentir mas que algo que se puede crear con lógica". Por lo tanto, para ofrecer una cómoda e intuitiva estructura a los usuarios vale la pena tener en cuenta la Proporción de Oro. Entonces, ¿qué es exactamente la Proporción de Oro? Básicamente, es una proporción de
ajax aplicaciones grandes Bebo busquedas captcha
desarrollo diseño eficiencia js Facebook google
internet javascript jquery marketing
moviles MySpace personal publicidad redes sociales spam tendencias trabajo usabilidad web
web 2.0 web 3.0
1.618033988749895 ≈ 1.618 la cual se mantiene entre objetos colocados en algún contexto.
http://www.forastero.es/blog/como-aplicar-la-regla-de-la-proporci%C3%B3n-divina-... 28-05-2009
Como aplicar la regla de la proporción Divina (o la proporción de Oro) a sus diseños ...
Page 2 of 6
Vamos a ver el ejemplo de arriba. Imaginase que estamos creando una estructura de ancho fijo. El ancho que le ponemos es de 960px. Queremos tener un bloque grande para el contenido (#contenido) y otro mas pequeño para los menús (#sidebar). Como calcularía usted los anchos de ambas columnas ? 1. Primero, calculamos el ancho del bloque #contenido. Hay que asegurarse que la relación entre su ancho y el ancho total es de 1.62. Por lo tanto dividimos 960px entre 1.62 y obtenemos 593px. 2. Restamos 593px del ancho total (960px) y obtenemos 960px - 593px = 367px. 3. Si calculamos la relación entre el bloque #contenido y el #sidebar (593px:367px ≈ 1.615) y la relación entre el ancho total y el ancho de #contenido (960px : 593px ≈ 1.618) obtenemos valores muy cercanos.
Esta es la idea que hay detrás de la relación de Oro. La misma regla la podemos aplicar también a diseños de ancho variable. Claro que no todos los diseños tienen que estar organizados según la Proporción Divina. Sin embargo, en algunos casos puede mejorar no solo la comunicación con el usuario, sino que también la relación entre los elementos de toda la plantilla (que parecerá ser mas lógica). Como ejemplo podemos ver el 404 Blog. Su diseño es visualmente atractivo y relajante. Tiene una buena combinación de colores y estructura.
http://www.forastero.es/blog/como-aplicar-la-regla-de-la-proporci%C3%B3n-divina-... 28-05-2009
Como aplicar la regla de la proporción Divina (o la proporción de Oro) a sus diseños ...
Page 3 of 6
Sin embargo, su diseño no cumple la proporción Divina como podemos ver en la captura de arriba. Pero los usuarios no lo tienen porque notar necesariamente ya que ellos lo separan intuitivamente en dos bloques de 583px (630px - 31px - 31px) y 299px (330px - 31px). Esto ocurre porque el espacio en blanco (la margen de las esquinas) del bloque principal es pasivo y solamente apoya el contenido principal. La relación entre los bloques principales es de 630 / 330 px ≈ 1.91 ≠ 1.62, y la relación entre los bloques de contenido es de 583 / 299px ≈ 1.92 ≠ 1.62. La razón por la cual la estructura aparenta ser casi perfecta es porque esta muy bien balanceada todos los bloques tienen la misma proporción de 1.92 (en este caso). Por ello el diseño da una sensación de armonía. Sin embargo, debido a un diseño no óptimo a los usuarios se les ofrece una longitud de linea de texto suboptima de 90 símbolos. Cuando la longitud recomendada es de entre 60 y 80 símbolos por linea. Una mejora de la estructura llevaría a una mejora de la legibilidad del contenido. Es el beneficio que se obtiene por hacer las cosas según las leyes de la naturaleza.
Para algunos diseños rápidos podemos usar una relación de 5:3 la cual no es exactamente la proporción Divina pero se puede usar como una regla empírica en el caso de no tener una calculadora a mano. La proporción Divina ofrece unos valores sólidos que pueden ser incorporados a cualquier diseño. Para su próximo proyecto probablemente les pueda ser de ayuda las siguientes herramientas: Phiculator Es una simple herramienta que, dado un numero cualquiera, calcula el numero correspondiente según la proporción de Oro. Es libre y esta disponible para Win y Mac. Herramienta de diseño según la proporción de Oro es una herramienta potente que ayuda a evitar problemas de cálculos y permite ver el resultado en seguida.
La Regla de Tercios Básicamente, la Regla de Tercios es una versión simplificada de la proporción de Oro. Dividir la estructura en tercios es una forma fácil de aplicar la proporción divina sin usar la calculadora. El método consiste en separar cualquier estructura en nueve partes iguales mediante dos lineas verticales y dos horizontales con distancias equivalentes entre ellas. Los cuatro puntos que se forman por las intersecciones sirven para poner los elementos mas importantes - elementos que queremos que el usuario vea en primer lugar. Usando la regla de Tercios nuestra estructura empieza a tener un aspecto mas vivo e interesante que simplemente centrando los elementos.
http://www.forastero.es/blog/como-aplicar-la-regla-de-la-proporci%C3%B3n-divina-... 28-05-2009
Como aplicar la regla de la proporción Divina (o la proporción de Oro) a sus diseños ...
Page 4 of 6
En la mayoría de los casos no es siempre posible ni útil usar los cuatro puntos para destacar partes importantes de nuestro diseño. Aunque podemos definir algunos de ellos (normalmente uno o dos) para situar adecuadamente los mensajes o la funcionalidad mas importantes. El punto de la izquierda-arriba suele ser el que mas llama la atención ya que los usuarios recorren la pagina según la forma (o trayectoria) de la letra "F". Dicho esto, como dividimos nuestro trazado en nueve partes iguales? Jason Beiard cuenta este método para aplicar la regla de Tercios: 1. Para empezar, dibuje en papel un rectángulo que indicada la forma de la futura pagina. La altura y la anchura puedes tener cualquier valor que le conviene, pero intente mantener ángulos de 90 grados y las lineas rectas. 2. Divide el rectángulo horizontalmente y verticalmente en tres partes iguales. 3. Divide el tercio de arriba en tres tercios otra vez 4. Divide cada columna en dos para tener mas sensación de cuadrícula 5. Ahora debe de tener una rejilla en su papel que se parece a la rejilla de la regla de Tercios Ahora vamos a aplicar dichas reglas a un ejemplo concreto. Vamos a suponer que estamos trabajando con ancho fijo de 960px. La altura sera un valor entre 750px y 950px. 1. Divide la anchura en 3. En el ejemplo obtenemos 960px / 3 = 320px 2. Divide la altura en 3. En el ejemplo obtenemos ( (750 + 950 px) / 2 ) / 3 ≈ 285px. 3. Cada rectángulo tiene que tener el tamaño de 320px x 285px 4. Construye su diseño en rejilla con los rectángulos según el paso 4 dibujando unas lineas que pasan por los extremos de los rectángulos 5. Posicione los elementos mas importantes de su diseño en los puntos de intersección de lineas verticales y horizontales
Vamos a ver el diseño de demandware.com. El diseño usa una combinación de colores llamativa, no es molesto y parece ser simple y claro. La navegación esta claramente visible y la estructura de la pagina parece ser clara.
http://www.forastero.es/blog/como-aplicar-la-regla-de-la-proporci%C3%B3n-divina-... 28-05-2009
Como aplicar la regla de la proporción Divina (o la proporción de Oro) a sus diseños ...
Page 5 of 6
Sin embargo, si analizamos la efectividad del diseño podemos encontrar el balance perfecto que tiene. De hecho, se aplica a la perfección la regla de Tercios (usando dos puntos de cuatro) para colocar elementos mas importantes (en el dibujo de abajo se marcan en rosa) que la empresa ha querido destacar mas a los usuarios - es el mensaje que explica de que va la pagina y un ejemplo de su trabajo. Además fijese como se colocan las secciones en el segundo eje horizontal. Es muy eficaz.
Resumen En algunos casos el uso de la proporción Divina y la regla de Tercios puede mejorar mucho la comunicación de su diseño con el usuario final. Ofreciendo un balance casi natural en la proporción de 1 : 1.62 ofrecéis al usuario un orden natural de la cosas e obtenéis un diseño mas "escaneable" y bien estructurado. Usando la regla de Tercios también podemos destacar los elementos y la funcionalidad mas importantes ofreciendo así a los usuarios un diseño con el que resulta fácil trabajar. Además conseguimos hacer llegar el mensaje o la misión de la pagina con mas eficacia.
Leer más → diseño Diseño de interfaces y usabilidad usabilidad web Artículo original
http://www.forastero.es/blog/como-aplicar-la-regla-de-la-proporci%C3%B3n-divina-... 28-05-2009
Como aplicar la regla de la proporción Divina (o la proporción de Oro) a sus diseños ...
2 votos
Page 6 of 6
Inicie sesión o regístrese para enviar comentarios
© 2008 Forastero.es Acerca de nosotros Contacto Informar sobre errores, bugs o sugerencias
http://www.forastero.es/blog/como-aplicar-la-regla-de-la-proporci%C3%B3n-divina-... 28-05-2009