Principios del diseño web

Indice

PRINCIPIOS DEL DISEÑO WEB Y RECURSOS UTILES

Vamos a ver los principios fundamentales del diseño que debes tener en cuenta a la hora de diseñar tu página web.

Esta parte es la teoría que debemos conocer para poder usarla en nuestro beneficio. En el inicio lo ideal es ceñirse a ella. Una vez que la dominemos podemos incluso saltarnos algunas de las normas en ciertos casos por algún objetivo concreto. Pero te recomendaría que lo dejaras para más adelante.

“Conozca bien las reglas, para que pueda romperlas de manera efectiva”.

 El Dalai Lama.

1. Jerarquía visual

La jerarquía visual hace que de un simple vistazo el visitante sepa reconocer que partes son más importantes. Facilita la lectura y ayuda al lector a escanear la web.

Nos da el orden en el que será percibido el contenido de la web.

Nos ayuda a dirigir la atención a puntos concretos que nos ayudan a cumplir los objetivos de cada página.

¿Cómo podemos jugar con la jerarquía visual?

Tamaño y color

Usaremos los colores y el tamaño para resaltar los puntos sobre los que queramos llamar la atención.

Según los estudios leerás los textos siguiendo el orden de la imagen.

Aquí los colores y tamaños dirigen la vista a un punto u a otro.

Siempre comenzaremos con el texto más grande, aún más si esta subrayado, y continuaremos leyendo los textos según su tamaño en orden descendente hasta el más pequeño.

Contenido

La ubicación del contenido en la página es importante.

Los estudios nos dicen que la vista se fija primero en la parte superior derecha, luego la vista hace un recorrido horizontal hacia la derecha para después bajar.

Es como si dibujaras una L invertida.

2. Contraste

Aquí jugaremos a crear diferenciación en algunos puntos. Puedes hacerlo de muchas maneras, con tipografías, posición, dejando espacios en blanco, etc. pero lo que más te ayudará es el color. Esto lo usaremos en ciertos puntos estudiados que nos ayuden a captar la atención del lector.

Se usa mucho en los CTAs, siglas de Call To Acction o llamadas a la acción.

En diseño web estratégico son elementos clicables donde queremos que el usuario pinche para realizar alguna acción. Generar un contraste en estos puntos para captar la atención del visitante es importante.

A los CTAs podríamos dedicarles un post en exclusiva. Son puntos muy estudiados y que se tratan con especial cuidado. A simple vista es importante el texto que escojas y el color. Pero aún hay más, como el espaciado del texto al borde del botón, las sombras o si tienen movimiento.

En cuanto a lo que estamos hablando ahora, aquí será muy importante crear contraste con color sabiendo que, ciertos colores fomentan la acción y otros hacen que pase desapercibido.

3. Alineación

Es un proceso para posicionar y ordenar la información. Con la alineación tendremos cuidado de organizar todo el contenido siguiendo unas líneas imaginarias. Esto transmitirá tranquilidad y profesionalidad.

La composición se verá más limpia y pulida. Crearemos orden y estructura. Esto ayuda a la legibilidad y en consecuencia mejora la experiencia de lectura del usuario.

Para ello debemos tener en cuenta principalmente dos tipos de alineación:

Alineación Horizontal

En la alineación horizontal tendremos en cuenta la alineación de los bordes izquierdo, derecho y central de los elementos.

Imaginariamente trazamos un eje vertical que debe hacer coincidir los bordes en todos los elementos.

Alineación Vertical

En la alineación vertical tendremos en cuenta el eje opuesto, alineando la parte superior, inferior o central de los elementos.

Imaginariamente trazamos un eje horizontal que debe hacer coincidir los bordes en todos los elementos en el punto que hayamos elegido, ya sea: superior, inferior o central.

Nota. Para alinear iconos de una forma mas sencilla, ya que tienen diferentes tamaños, lo haremos con el eje central.

RECURSO: Podemos valernos de algunas extensiones de Chrome para ayudarnos en esto. CSS Grid Overlay o Baseliner nos generan una retícula configurable que nos facilitará ver si la alineación es correcta.

4. Equilibrio

Como en toda composición visual una página web debe mantener un equilibrio salvo que lo rompamos intencionadamente para transmitir una emoción concreta.

Pero, ¿a que me refiero con equilibrio?

A que los elementos estén distribuidos equitativamente en la página. No se recomienda añadir demasiado peso hacia un lado o hacia el otro ya que esto puede generar una sensación de inestabilidad o tambaleo, como si la página fuera a volcar hacia ese lado.

Como en todos los punto, te recuerdo que esta es la teoría y que somos totalmente libres de romper si en algún punto nos interesa transmitir esa sensación intencionadamente.

5. Repetición

¿Repetición? Eso suena aburrido, ¿no? Definitivamente no.

No debemos volvernos locos y estar poniendo todo el rato los mismos elementos, pero en su justa medida, es un recurso muy habitual. La repetición de ciertos elementos o configuraciones nos brinda varios beneficios:

  • Crea homogeneidad. Es como los colores de marca, hacen reconocible tu marca. Esto puede suceder también con otros elementos. Además le dará consistencia a tu página.
  • Relación. Repetir un tipo de configuración en diferentes partes de la página donde hablemos de un tema similar automáticamente hace que el cerebro los relacione. Por ejemplo, si siempre que compartes algún testimonio utilizas en su encabezado la misma tipografía, color, ubicación o elementos decorativos, al llegar a ese punto ya se entiende de que vamos a tratar a simple vista.

¡Ojo! ¡No me refiero a los textos! Ya te conté en este post que repetir textos te penaliza.

La no repetición puede causar el efecto contrario. Si en cada página dejas volar tu imaginación y usas elementos y configuraciones completamente diferentes transmitirá la sensación de desconexión entre ella, caos y desorden.

6. Proximidad

Esto lo voy a explicar de una manera muy simple. Si entras en un bar en el que yo estoy tomando algo y te preguntan, ¿Cuál esta la amiga de Nuria? Sin dudarlo dirás que la chica que hay sentada a mi lado. Difícilmente pensarás que es la chica que esta sentada en la otra punta. Que hay quien es amigo de todo el bar, pero bueno, yo nunca he sido muy de bares jeje.

En nuestra página web ocurre lo mismo. Lo que esta cerca esta relacionado y es algo que percibimos así instintivamente.

De ahí que intentamos poner cerca elementos relacionados y crear cierta distancia con elementos que no guardan relación directa. Esto lo veremos más en profundidad en el siguiente punto.

7. Espacios en blanco

Quítate el miedo al espacio en blanco pero ¡Ya!

El espacio en blanco es nuestro amigo y es un ente en si mismo. Aunque nos parezca la NADA (niña ochentera pensando en FUYU), nos ayuda a generar emociones y a transmitir con nuestra página web el mensaje apropiado.

De hecho, transmite cierto grado de lujo, por lo que verás que algunas marcas de alta gama tienen una web mayoritariamente blanca.

Cuando no sabemos de diseño y nos lanzamos a la aventura tendemos a rellenar hasta el último hueco y es un error.

El espacio en blanco nos deja respirar, nos ayuda a pasar de un tema a otro y nos transmite ligereza.

8. Movimiento

El movimiento es un recurso muy bueno para captar la atención del lector sobre un elemento en concreto.

Hay varios tipos de movimiento que según las necesidades nos pueden ayudar a transmitir desde urgencia hasta calma.

Es un gran recurso del que no debemos abusar porque puede causar el efecto contrario. El exceso de movimiento hace que nada resalte, que la web agobie al lector e incluso que este la abandone si es demasiado. Diseño web estratégico pero consciente, no nos volvamos locas.

9. Responsive

Responsive es el termino que se utiliza para decir que un diseño web está adaptado a cualquier dispositivo.

Actualmente los lectores o visitantes llegarán a tu página desde diferente dispositivos, ordenadores, tablets y móviles, y dependiendo de la marca, de diferentes tamaños.

Con el diseño responsive nos aseguramos que, nos lean donde nos lean, puedan disfrutar de una experiencia igual o similar.

Es un punto muy importante, pues un mal diseño en alguno de los dispositivos puede causar que pierdas automáticamente ese posible cliente.

Como ya te he dicho, recomendación es que tengas en cuenta todos estos principios sobre todo hasta que los domines, para poder hacer luego lo que consideres mejor para conseguir tu objetivo. Yo hay veces que me los salto a la torera jeje

¿Qué te han parecido? ¿Los conocías todos?

Yo además de estos suelo tener en cuenta algunos principios de composición, los tengo tan integrados por la fotografía y las manualidades que lo hago sin pensar. Si quieres un día te cuento algo más sobre ellos.

Recuerda, si tienes dudas puedes escribirme a: info@tuwebconsciente.es

Como ves en el diseño intervienen muchas variables. Si necesitas ayuda también puedes echar un vistazo a mis servicios de diseño web estratégico y consciente aquí.

Si conoces a alguien que le pueda interesar, comparte en:
Sobre mi D

Hola

soy Nuria

Estudié ingeniería mecánica pero mi viaje me llevó a interesarme por el diseño web.

Hace un tiempo decidí trabajar con profesionales del crecimiento personal (ámbito que adoro) para ayudarles con su presencia digital a llegar a más personas. 

Aunando mis conocimientos sobre diseño web, estrategia y marketing con la consciencia que este mundo necesita.

Descarga aquí mi ebook para aprender a conseguir contactos de valor

¡NO TE PIERDAS NADA!

SUSCRÍBETE

En Tu Web Consciente trataremos la información que nos facilites con la finalidad de enviarte información relacionada con tu solicitud sobre nuestros productos y servicios. La base jurídica que legitima el tratamiento es tu consentimiento. Podrás ejercer los derechos de acceso, rectificación, limitación, oposición, portabilidad, o retirar el consentimiento enviando un email a info@tuwebconsciente.es. También puedes solicitar la tutela de derechos ante la Autoridad de Control (AEPD). No se cederán datos a terceros, salvo autorización expresa u obligación legal. Se realizarán transferencias internacionales de tus datos, en concreto a la empresa MailerLite, situada en Estados Unidos. Puedes consultar información adicional y detallada sobre protección de datos en nuestra Política de Privacidad.

Últimas entradas

¿Quieres empezar a trabajar en tu web?

En este documento encontrarás la explicación de que es un lead magnet y muchas ideas para que te inspires y encuentres el tuyo.

En Tu Web Consciente trataremos la información que nos facilites con la finalidad de enviarte información relacionada con tu solicitud sobre nuestros productos y servicios. La base jurídica que legitima el tratamiento es tu consentimiento. Podrás ejercer los derechos de acceso, rectificación, limitación, oposición, portabilidad, o retirar el consentimiento enviando un email a info@tuwebconsciente.es. También puedes solicitar la tutela de derechos ante la Autoridad de Control (AEPD). No se cederán datos a terceros, salvo autorización expresa u obligación legal. Se realizarán transferencias internacionales de tus datos, en concreto a la empresa MailerLite, situada en Estados Unidos. Puedes consultar información adicional y detallada sobre protección de datos en nuestra Política de Privacidad.