Principios básicos de diseño de sitios web

Sabe que necesita un sitio web, o tal vez necesita un rediseño del sitio web, pero corre gritando las palabras HTML, CSS y Java. No son realmente palabras en inglés, después de todo. Son los nombres de idiomas completamente diferentes que parecen una sopa de letras para los no iniciados. Bueno, relájate. Porque los principios de diseño de sitios web cubiertos aquí no tienen nada que ver con la codificación.

‌ Estas pautas lo ayudarán a aprovechar al máximo cualquier herramienta de creación de sitios web que utilice. Lo dirigirán hacia las mejores plantillas, imágenes y reglas para recordar.

Este artículo cubre:

• Jerarquía visual
• Diseños de Gutenberg, Z y F
• la proporción áurea
• La regla de los tercios
• teoría del color
• teoría de la gestalt
• Espacio negativo y minimalismo
• Diseño optimizado para dispositivos móviles

Ya sea que desee crear un sitio web personal que desarrolle su marca o desee refrescarse en el diseño de sitios web para pequeñas empresas, tenga en cuenta estos principios.

Jerarquía visual

La jerarquía visual es la importancia relativa que el espectador asigna a un conjunto de objetos visualmente diferenciados.

Esa es una forma elegante de decir que cuando miras un montón de cosas, tiendes a concentrarte en las cosas que se destacan. Prestas más atención a los objetos destacados.

¿Cómo se desarrolla esto? Bueno, si ve un grupo de imágenes de varios tamaños, naturalmente le dará importancia a las imágenes más grandes sobre las más pequeñas. Si observa un montón de palabras en negro y una escrita en magenta, gravitará hacia la palabra magenta.

Puedes jugar con varios elementos diferentes para establecer una jerarquía visual y llamar la atención del espectador donde quieras. Éstos incluyen:

• Tamaño y escala. El tamaño relativo importa, pero también la escala. Si algo es claramente más grande o más pequeño de lo que "debería" ser, lo notará.
• Enfoque. Las imágenes y las fuentes desenfocadas se sienten más lejanas que las que están muy enfocadas.
• Color. Los cambios de color, tono o intensidad pueden llamar la atención.
• tipografía. El tamaño del texto, la fuente y los efectos lo ayudan a clasificar la información en una página.
• Movimienot. Si una imagen rebota en una página estática, notará la que se mueve, pero tenga cuidado. Demasiado movimiento puede ser desorientador.
• Espacio negativo. Puede aislar elementos clave para que se destaquen de las áreas más pobladas de la página.

Notará que muchos de estos principios de diseño de sitios web comienzan desde un lugar intuitivo. Aproveche la jerarquía visual resaltando información e imágenes importantes.

Diseños de Gutenberg, Z y F

La organización es otra forma de establecer la jerarquía. Puede aprovechar los hábitos de visualización naturales para colocar su información y oportunidades más importantes, como los formularios de registro de correo electrónico cruciales para la estrategia de marketing de comercio electrónico, donde es probable que los navegadores se detengan.

Los tres diseños más utilizados son el diseño de Gutenberg, el diseño Z y el diseño F. Cada uno hace uso de distintos principios de diseño de sitios web.

El diseño de Gutenberg

El más simple de los tres puede ser muy efectivo cuando se usa correctamente. El diseño de Gutenberg divide la página en cuatro cuadrantes. Debido a que lee de izquierda a derecha y de arriba a abajo, asigna una importancia relativa a cada cuadrante respectivamente.

‌ La información más importante debe colocarse en los cuadrantes superior izquierdo e inferior derecho. El material de mediana importancia pertenece al cuadrante superior derecho. La parte inferior izquierda solo debe albergar información e imágenes que se puedan escanear rápidamente o ignorar por completo.

diseño Z

El diseño Z funciona mejor para páginas minimalistas que no necesitan presentar una tonelada de información. Aprovecha las mismas prácticas generales de lectura, pero dibuja un patrón diferente a través de ellas.

El visor escanea horizontalmente (de izquierda a derecha) a lo largo de la parte superior de la página, corta en diagonal desde la parte superior derecha a la inferior izquierda y luego se mueve horizontalmente hacia la parte inferior derecha.

En el diseño Z, coloca el material en cada una de las cuatro esquinas y en el centro de la diagonal.

Diseño F

El diseño F funciona mejor cuando desea incluir más, más de todo, pero especialmente más texto.

Cuando está escaneando una página más larga y más poblada, escaneará de izquierda a derecha y de arriba a abajo. La información debe organizarse simétricamente, a lo largo de líneas horizontales.

la proporción áurea

Los buenos principios de diseño de sitios web también pueden ayudarlo a determinar las proporciones de cada sección de una página web. La proporción áurea, a veces llamada proporciones divinas o referida por la letra griega phi, se refiere a una proporción que las personas encuentran naturalmente atractiva visualmente o incluso hermosa.

Ocurre cuando tienes un segmento de línea dividido en dos fragmentos de diferentes tamaños. La relación entre el fragmento más grande y el total es igual a la relación entre el fragmento más pequeño y el más grande.

Pero no hay necesidad de tratar de buscar lo que recuerdas sobre las ecuaciones cuadráticas del séptimo grado. Todo lo que necesita recordar es el número 1.618 (y realmente, 1.6 es suficiente).

Si tiene un área total X y quiere saber qué tan grande debe ser su mitad más grande, simplemente divida X entre 1.618. Pan comido.

Sugerencia rápida: si está tratando de averiguar qué tan grande es una imagen, puede hacer clic con el botón derecho (Windows) o Control-clic (Mac) sobre ella y seleccionar "Inspeccionar". A la derecha de la página, puede obtener mucha información sobre la imagen, incluido su tamaño en píxeles en "Computado".

La regla de los tercios

Es hora de ver los principios de diseño de sitios web para las imágenes en sí. Ya has aprendido dónde ponerlos y de qué tamaño deben ser. La regla de los tercios es una regla simple para la composición de fotografías.

Si divide su imagen en tres secciones iguales verticalmente y tres secciones iguales horizontalmente, crea una cuadrícula. De acuerdo con la regla de los tercios, querrás colocar estímulos visuales a lo largo de estas líneas y/o en sus puntos de intersección.

Así como está programado para encontrar hermosa la proporción áurea, está programado para encontrar imágenes dinámicas e interesantes que utilicen la regla de los tercios.

teoría del color

La teoría del color puede ser abrumadora porque hay muchas maneras de hacerlo bien: tener un esquema de color cohesivo que transmita la impresión correcta. Es uno de esos temas que puedes explorar con mucha más profundidad.

Para la descripción general de este principiante, es posible que desee tener a mano una rueda de colores.

Aquí hay cuatro formas diferentes de elegir colores de marca y sitio web que armonicen:

1. Ir monocromático. No tiene que ser aburrido. Use una variedad de tonos y tintes para crear contraste.
2. Vaya complementario. Haga coincidir su color primario con un acento extraído de su polo opuesto en la rueda de colores, por ejemplo, púrpura y amarillo.
3. Ir análogo. Elija tres colores que se encuentran uno al lado del otro en la rueda de colores.
4. Ir triádico. Dibuja un triángulo equilátero, uno con tres lados iguales, en tu rueda de colores y usa los colores que encuentres en los tres puntos.

Al elegir los colores, también debes pensar en su calidez. Los colores fríos tienen más azul en ellos: pueden parecer severos o tristes, pero también son relajantes. Los colores cálidos tienen más rojo y amarillo: pueden sentirse apasionados y emocionantes, pero también pueden parecer agresivos en ciertos usos.

teoría de la gestalt

En realidad, la teoría de la Gestalt fue desarrollada por psicólogos como un marco para comprender el procesamiento cognitivo.

En esencia, la teoría de la gestalt dice que cuando miras un conjunto complejo de imágenes, haces una de dos cosas:

• Ver un todo coherente primero y luego ver sus partes
• Primero vea un todo confuso y luego intente dividirlo en partes o grupos más simples.

Hay siete principios de diseño de sitios web extraídos de esa teoría básica:

1. La ley de la semejanza. Agrupa las cosas por semejanza. Cosas similares van juntas.
2. La ley de la proximidad. Agrupa las cosas según las regiones comunes o la distancia relativa entre ellas. Las cosas que están juntas pertenecen juntas.
3. La ley de la simplicidad. La gente ve objetos ambiguos en los términos más simples posibles. Por ejemplo, percibirá los círculos superpuestos como eso, en lugar de como una colección de arcos.
4. La ley de la continuidad. Es más probable que las personas vean las cosas como continuas que como separadas. Seguirás objetos a lo largo de caminos o curvas.
5. La ley de la percepción. La gente ve figuras, o puntos focales, y fondos. Las cosas están en relación con otras cosas.
6. La ley del cierre. Las personas completan la información que falta para dar sentido a las cosas. Una línea discontinua sigue siendo una línea.
7. La ley de la simetría. La gente ve las cosas simétricas como relacionadas.

Utilice estos principios para ayudar a sus espectadores a interpretar la información que les proporciona.

Espacio negativo y minimalismo

Estos dos van juntos porque ambos son principios de diseño de sitios web anti-desorden.

El espacio negativo es todo el espacio en blanco, o en blanco, que mantiene su sitio web limpio y elegante. No abrumes al espectador con estímulos visuales. Asegúrate de tener mucho blanco para espaciar las cosas.

Tampoco desea abrumar al espectador con demasiada información o demasiadas opciones. Menos es definitivamente más: adopta el minimalismo.

Cuando das demasiada información, los elementos importantes se pierden. Cuando proporciona demasiados comandos u opciones, es menos probable que el visitante elija alguno y, en cambio, abandone su sitio.

Diseño optimizado para dispositivos móviles

Uno de los principios de diseño de sitios web más importantes es asegurarse de que su sitio sea atractivo y fácil de usar en todos los dispositivos.

No obligue a los visitantes a intentar arrastrarse por la misma página estática que tendrían en su escritorio. Utilice herramientas que adapten fácilmente los sitios web para usuarios móviles con interfaces fáciles de desplazar.

‌ Esto no solo evita la frustración de los visitantes, sino que también es un factor importante de optimización de motores de búsqueda (SEO). El algoritmo de Google definitivamente tiene en cuenta la optimización móvil.

‌ Si está buscando llegar a nuevos clientes de forma orgánica, necesita una estrategia de SEO sólida. Así que preste atención a los principios de diseño de sitios web que lo pondrán en el camino correcto.

Principios de diseño de sitios web: ¡usted puede hacerlo!

De hecho, una vez que te pones en marcha, es muy divertido. Es la combinación perfecta de estrategia comercial inteligente y tiempo de juego de artes y oficios.

Tiene muchos principios útiles de diseño de sitios web para ayudarlo a crear el sitio perfecto, pero los puntos más importantes son estos:

1. La jerarquía visual lo ayuda a atraer la atención del espectador donde lo desea.
2. Menos es más.
3. La compatibilidad con dispositivos móviles ya no es suficiente. Necesitas estar optimizado para dispositivos móviles.

¡Así que salta a ello! No más protestas de que no eres un diseñador de sitios web. Pronto podrás y lo serás. Solo comienza.