Las matemáticas son hermosas. ¿Suena un poco extraño? Estaba seguro de eso cuando comencé a diseñar. Las matemáticas son muy aburridas. Quizás te sorprenda descubrir que los diseños, las obras de arte, los objetos e incluso las personas más bellos tienen algo matemático en común. Especialmente la proporción áurea, también conocida como proporción divina, representada por la letra griega Φ (phi). Este tutorial analizará el diseño de un sitio web y cómo dividirlo en proporciones áureas.
esqueleto de la página web
Estos son los elementos principales de las páginas web. Hay muchas formas diferentes de organizarlos, pero este diseño es quizás el más utilizado.
Recipiente
Todas las páginas web utilizan un contenedor, principalmente con el mismo propósito: contener algunos elementos de la página. Sin embargo, este método se implementa de manera diferente. Por ejemplo, la etiqueta del cuerpo o el div más utilizado. Incluso la tabla que se usaba comúnmente en el pasado (no use la tabla como contenedor, este es un método roto). Piensa en un contenedor como la pared exterior de tu casa, que contiene los dormitorios, la cocina, el salón, etc.
Tipo de contenedor:
Líquido: Rellenar según el ancho del navegador.
Corregido: el ancho especificado no cambiará según el ancho del navegador.
Encabezamiento
El encabezado no es realmente un elemento específico, aunque algunas personas dirían que lo es. Se usa más en el nivel superior de la página web donde coloca su logotipo, barra de navegación y eslogan. Mucha gente prefiere encerrar estos elementos en un div para facilitar la separación del estilo y el contenido de la página. El cabezal será considerado como un contenedor, por lo que tiene dos tipos de opciones, líquido o fijo mencionado anteriormente.
Logo
Tu logo es tu identidad y marca. El método más utilizado es colocar el logotipo en la esquina superior izquierda del encabezado. Nuestro hábito de lectura es de izquierda a derecha y de arriba a abajo, por lo que su registro debe colocarse donde los visitantes puedan verlo a primera vista.
Navegación
La navegación de la página es uno de los elementos más importantes; sus visitantes la necesitan para utilizar su sitio. Debería ser fácil de encontrar y usar, razón por la cual la mayoría de la gente lo coloca en la sección del encabezado, al menos cerca de la parte superior de la página.
tipo de navegación:
Horizontal: visualización horizontal, llamada 'navegación'
Vertical: visualización vertical, llamada 'menú'
Contenido principal
¡Todos (deberían) saber que el contenido es el rey! Cuando las personas visitan su sitio, es el elemento principal que quieren ver. Debe ser el punto focal de la página web, para que los visitantes puedan encontrar rápidamente lo que buscan.
Barra lateral
La barra lateral es un elemento que coloca su contenido secundario, como algunos anuncios, búsqueda de sitios, enlaces de suscripción (RSS, Twitter, correo electrónico, etc.), métodos de contacto, etc. Este elemento no es obligatorio, aunque muchos sitios lo utilizan. Generalmente se coloca a la derecha, pero también puedes colocarlo a la izquierda o a ambos lados, siempre y cuando no interrumpa la navegación por el contenido principal. Los sitios web utilizan navegación horizontal o vertical, y las barras laterales suelen utilizar navegación vertical.
Pie de página
Siempre hay un pie de página al final de una página web para que el visitante sepa que ha llegado al final de su página web. Al igual que el encabezado, el pie de página no es un elemento especial. Incluya derechos de autor, aviso legal e información de contacto principal en su pie de página. Es una buena idea incluir algunos enlaces importantes, como la página de inicio, la página de contacto, etc. Algunos sitios web utilizan esta área para proporcionar materiales relevantes u otra información importante.
"Espacio en blanco"
Es posible que tenga un fuerte deseo de completar los espacios en blanco de estas páginas, pero no lo haga. El "espacio en blanco" también es muy importante. Puede ver cómo el sitio web de NetTuts utiliza eficazmente los espacios en blanco para crear un equilibrio en la página y dar una buena sensación.
Lo anterior es el esqueleto de la página web. Ahora veamos cómo dividir estos elementos en secciones áureas.
La sección áurea y el uso de cuadrículas
¿Recuerdas cuando dije que las matemáticas eran hermosas? Creemos que el atractivo visual se basa en proporciones (por ejemplo, la sección áurea). Durante miles de años, artistas, diseñadores, arquitectos, etc. han utilizado consciente o inconscientemente una proporción común para aumentar la belleza de sus obras. ¿Qué es este número mágico? 1,62 (en realidad 1,618...) No te diré el origen de este número, pero te diré cómo usarlo.
Usar la sección áurea es muy sencillo. Por ejemplo, es posible que desee encontrar el ancho de su contenido principal y de las listas de la barra lateral. Tomarás el ancho total de tu área de contenido y lo dividirás por 1,62. Eso te da 555,55 px. No necesitamos ser tan precisos, así que solo usaremos 555 px. Ahora sabes que tu elemento de contenido principal tiene 555 px de ancho y tu barra lateral tiene 345 px. ¿Ves lo fácil que es?
Pero espera, ¡la diversión no termina ahí! ¡También puedes aplicar la sección dorada al ancho y alto de otros elementos!
Usando cuadrículas
Si eres como la mayoría de las personas, no querrás tener que sostener una calculadora para calcular la proporción áurea cada vez. Entonces la forma más sencilla es utilizar grid. Entonces, lo que debes hacer es dividir tu ancho o alto en tercios.
Para producir una cuadrícula más detallada, simplemente continúa dividiéndola en tercios. Si lee el artículo anterior "Contacto íntimo con el marco Blueprint CSS", verá que el marco Blueprint CSS utiliza un sistema de cuadrícula detallado. El diseño de cuadrículas no sólo es más fácil y rápido, sino que también crea un hermoso diseño. Si aún no ha utilizado el diseño de cuadrícula, esta es una gran oportunidad para probarlo. Puede descargar plantillas de cuadrícula para fuegos artificiales, Photoshop u otro software desde http://960.gs.
Como puede ver, NetTuts sigue muy bien la proporción áurea. El tercio superior de la página vuelve a estar dividido en tercios, muy cerca de la proporción áurea. ¡No es de extrañar que el diseño de NetTuts sea tan atractivo!
Si va a crear un nuevo diseño, le recomiendo buscar algunos sitios populares y revisar sus diseños y cómo aplican la proporción áurea y la cuadrícula. Luego tómate un tiempo para practicar el uso de la sección áurea y el uso de la cuadrícula en tus diseños.