Share
Las matemáticas son hermosas. ¿Eso suena un poco extraño? Seguro que así lo pensé cuando empecé a diseñar. Las matemáticas son tan rígidas y muchas veces aburridas, o eso pensaba yo. Te sorprendería descubrir que los diseños, las obras de arte, los objetos e incluso las personas más estéticamente agradables tienen las matemáticas en común. Específicamente, la Relación Dorada, también conocida como proporción divina, que se designa con la letra griega (phi). Este tutorial cubrirá la anatomía y el diseño de un sitio web y cómo se relaciona la proporción de oro.
Los elementos de una página web son como órganos; Son vitales para una página web que funcione correctamente y estéticamente agradable..
Estos son los elementos principales de una página web. Hay muchas formas diferentes de organizarlos, pero este es quizás el diseño básico más común usado en línea.
Todas las páginas web utilizan un contenedor y para el mismo propósito; Para contener elementos de página, sin embargo, la forma en que se realiza varía. Por ejemplo, la etiqueta del cuerpo o un div es el más comúnmente utilizado. En el pasado, incluso se ha usado una tabla (no use una tabla como contenedor de su página, es un método depreciado). Piense en el recipiente como las paredes externas de su casa en las que se colocan sus dormitorios, cocina, sala de estar, etc..
Tipos de contenedor:
El encabezado no es realmente un elemento específico, aunque algunos lo consideren así. Se usa más generalmente para referirse a la sección superior de su página web donde se encuentran su logotipo, navegación, lema, etc. Muchas personas prefieren mantener estos elementos dentro de un div para facilitar el estilo de página, la separación de elementos y / o la contención de elementos. El encabezado se consideraría un contenedor por lo que tendría dos tipos para elegir: líquido o fijo como se mencionó anteriormente.
Tu logo es tu identidad y marca. La ubicación más común para el logotipo está dentro del encabezado, alineada a la izquierda. Leemos de izquierda a derecha, de arriba a abajo, por lo que su logotipo será probablemente el primer elemento que miren sus visitantes.
La navegación por la página es uno de los elementos más importantes; Sus visitantes lo necesitan para utilizar su sitio web. Debe ser fácil de encontrar y usar, por lo que casi siempre se encuentra dentro del encabezado o al menos cerca de la parte superior de la página. A veces, ambos tipos de navegación se utilizan para sitios web de alto contenido.
Tipos de navegación:
Como todos saben (o deberían), ¡el contenido es el rey! Cuando la gente visita su sitio, este es el elemento que buscarán principalmente. Debe ser el punto focal principal de una página web para que los visitantes encuentren lo que buscan rápidamente.
La barra lateral es el elemento con su contenido secundario, como publicidad, búsqueda en el sitio, enlaces de suscripción (RSS, Twitter, correo electrónico, etc.), métodos de contacto, etc. Este elemento no es necesario, aunque muchos sitios web lo utilizan. La mayoría de las veces se alinea a la derecha pero se puede alinear a la izquierda o ambas (dos barras laterales) siempre que no interrumpa la visualización del contenido principal. Para los sitios web que utilizan navegación horizontal Y vertical, la barra lateral a menudo se reemplaza con el elemento de navegación vertical.
El final de una página web siempre debe usar un pie de página para que sus visitantes sepan que han llegado a la finalización de su página web. Al igual que el encabezado, el pie de página no es realmente un elemento específico sino más bien una sección contenedora. Dentro de su pie de página habrá derechos de autor, información legal y de contacto principalmente. Es una buena idea incluir algunos enlaces a las secciones más importantes de su sitio, como la parte superior de la página, la página de inicio, la página de contacto, etc. Algunos sitios web utilizan esta área como una oportunidad para mencionar material relacionado u otra información importante.
Esta es cualquier área de la página web que no está cubierta por tipografía u otro contenido. Puede sentir la fuerte necesidad de llenar tanto espacio vacío como sea posible, ¡pero no lo haga! El espacio vacío es tan importante para un buen diseño de página web como el contenido que se va a utilizar. Puede ver cómo el sitio de NetTuts utiliza el espacio vacío de manera muy efectiva para ayudar a guiar a los visitantes a través del contenido, crear un balance de páginas y dar una buena sensación de separación de contenido.
Así que eso cubre la anatomía de una página web. Ahora veamos cómo se relaciona la Relación Dorada con estos elementos..
¿Recuerdas antes cuando dije que las matemáticas eran hermosas? Percibimos atractivo visual basado en la relación (es decir, la relación de oro). Durante miles de años, artistas, diseñadores, arquitectos, etc., han utilizado intencionalmente o no, una proporción común en su trabajo que es estéticamente agradable. ¿Cuál es el número mágico? 1.62 (en realidad 1.618…) No entraré en los orígenes de este número, pero le diré cómo usarlo..
Usar la proporción de oro es muy simple. Digamos que desea encontrar el ancho de sus columnas de Contenido principal y Barra lateral. Debería tomar el ancho total de su área de contenido (usaremos 900 px para este ejemplo) y dividirlo por 1.62. Como se muestra en el ejemplo anterior, dividimos 900px por 1.62 y obtenemos 555.55px. No necesitamos ser exactos, así que lo redondearemos a 555px. ¡Ahora sabes que tu elemento de contenido principal tendrá un ancho de 555 píxeles y tu barra lateral será de 345 píxeles! Que facil es eso?!
¡Pero espera! La diversión no termina ahí. También puede aplicar la proporción de oro al ancho de otro elemento en relación con su altura o viceversa. Esto produce elementos estéticamente agradables con las proporciones de proporción de oro..
Sin embargo, si usted es como la mayoría de las personas, no querrá sacar una calculadora cada vez que quiera usar esta proporción. Para simplificar el proceso, podemos utilizar una cuadrícula simple. Todo lo que haces es dividir tu ancho y / o alto por tercios.
Cada división puede reducirse aún más en tercios, produciendo una cuadrícula más detallada. Si lees el artículo anterior "Una mirada de cerca al Blueprint CSS Framework", verás que el Blueprint CSS Framework usa un sistema de cuadrícula detallado. ¡La red no solo hace que el diseño sea más fácil y rápido, sino que también crea un diseño estéticamente agradable! Si aún no está utilizando una cuadrícula al diseñar, ahora puede ser un buen momento para intentarlo. Puede descargar una plantilla de cuadrícula para fuegos artificiales, photoshop y más desde http://960.gs, que es otro marco de trabajo de CSS fantástico que usa cuadrículas.
Como puedes ver, Tuts + cumple con la Proporción Dorada bastante bien. El tercio superior de la página se divide de nuevo en tercios para mostrar cómo incluso la sección del encabezado se divide en pequeños incrementos de tercios, muy cerca de la Proporción Dorada. No es de extrañar por qué el diseño de NetTuts es tan atractivo!
Si eres nuevo en el diseño, te animo a que encuentres algunos sitios populares, evalúe su diseño de elementos y cómo cumple con la Proporción Dorada y las cuadrículas. Luego, tómese un tiempo para practicar el uso de la proporción de oro con sus elementos y colocarlos en su diseño mediante una cuadrícula.
Accentsconagua