Los elementos básicos de un diseño eficaz de un sitio web

1

En todos los diseños anteriores, la navegación se encuentra típicamente en la parte superior de la página. Con el diseño de la barra lateral fija , la encontrarás en la barra lateral junto con el contenido adicional. Coloca la barra lateral a la izquierda o a la derecha de cualquier manera que funcione y saca elementos de otros diseños para completar la página.

El diseño de la barra lateral fija muestra su navegación sin importar por dónde se desplace su público en el sitio, lo que hace que sea muy sencillo pasar de una página a otra. Si tiene un sitio particularmente difícil con varias páginas diferentes para elegir, considere un diseño como este.

Diseño de INSANELY.US

Via Faebric

Via The Ultralinx

Cuándo deberías usar esto

No puedes tener una página web sin un diseño. Pero no necesitas usar todos de estos. Mezcla y combina para crear algo que funcione para ti.

Donde deberías usar esto

Usa una plantilla para conseguir el aspecto de diseño que buscas. O, si quieres ir más personalizado, haz que tu diseñador web construya uno desde cero.

Diseño de páginas web receptivas

En la actualidad, el número de personas que miran su página web en un ordenador real está disminuyendo.

En 2016, el uso de la web móvil superó al del escritorio por primera vez en la historia. Esto significa que si quieres crear una experiencia de calidad, debes asegurarte de que tu sitio web se vea tan bien en un iPhone como en un MacBook. ¿Y cómo se hace eso? Con un diseño web receptivo.

Cuándo debería usar esto

Cada plataforma web tiene temas sensibles y cualquier diseñador web que se precie puede construir un sitio web sensible. Si dicen que no pueden, estás trabajando con la persona equivocada.

Donde deberías usar esto

La capacidad de respuesta de su sitio web tiene que ver con el código, por lo que será implementado automáticamente dentro del código de su tema o manualmente por su diseñador web. Antes de que usted tome el sitio en vivo, asegúrese de hacer pruebas de navegador y de dispositivos cruzados para asegurarse de que su público tendrá la misma experiencia impresionante, no importa cómo ven su sitio web.

Construye tus bloques

Con el marco básico en su lugar, ahora es el momento de llenar cada bloque de diseño con un contenido impresionante. Cada sitio web tendrá una mezcla de los siguientes tipos de contenido.

Barra de navegación

Si tu página web fuera un país, tu barra de navegación (o “barra de navegación”) sería el mapa de donde proviene todo el asunto de la “navegación”. Utilice esta herramienta para mostrar a su público dónde pueden ir y cómo se organiza su contenido. Si se pierden, su barra de navegación debería apuntarles en la dirección correcta.

 

Cuándo debe usar esto

Necesitas una barra de navegación en el 100% de los sitios web, literalmente en todos ellos. Si la gente no sabe dónde vive su contenido o cómo encontrarlo, su sitio web es esencialmente inútil.

Dónde deberías poner esto

Dos ubicaciones funcionan muy bien para una barra de navegación: la parte superior de la página o en la barra lateral izquierda. Las barras de navegación típicas se encuentran en la parte superior del sitio, pero si tienes muchas páginas, considera la barra lateral izquierda ya que hay más espacio para las categorías verticales que para las horizontales.

Imágenes

El diseño de un sitio web no estaría completo sin imágenes bien colocadas, que pueden ser utilizadas por tantas razones diferentes.

  • Las imágenes pueden fortalecer una idea de su copia.
  • Las fotos pueden crear una conexión emocional con su público.
  • Las tomas de cabeza pueden presentar a tu público a ti mismo o a tu equipo (¡sonríe!).
  • Las obras de arte pueden añadir interés visual.
  • Las ilustraciones refuerzan su marca.
  • Los gráficos pueden llamar la atención sobre elementos clave de su sitio web.

Cuándo debe usar esto

Cuando se trata de imágenes, aplique el principio de los “Tres ositos”: no demasiado, ni demasiado poco, pero justo lo necesario. Use suficientes imágenes para hacer su sitio web visualmente interesante, pero no exagere. Demasiadas imágenes o imágenes que no tienen sentido quitarán de su contenido en lugar de añadirlo.

Dónde debe usar esto

Hay un sinnúmero de lugares donde puedes presentar imágenes en tu sitio web:

  • Imágenes destacadas para entradas de blog
  • Deslizador de la galería
  • Autor/bio imágenes
  • Imágenes de cabecera
  • Páginas de productos

Al elegir dónde quieres colocar tus imágenes, intenta hacer ingeniería inversa del proceso. ¿Qué intentas lograr al agregar esta imagen? Una vez que lo sepas, tendrás una mejor idea de dónde debería vivir tu imagen. Por ejemplo, si quieres que la gente lea tu entrada de blog, utilizar una foto o un gráfico atractivo como imagen destacada tendría sentido.

Tipografía

No me importa cuán visual sea usted o su negocio. No puedes tener un sitio web sin texto. Punto.

El texto es una parte esencial de tu sitio web, y tienes que hacerlo bien. Aprovechando la jerarquía tipográfica, puede llamar la atención sobre mensajes importantes, hacer que su contenido sea más legible y atraer a sus lectores.

Aquí están las reglas básicas que querrás seguir para que tu texto sea impresionante:

  • Evita usar demasiadas fuentes. Una es genial. Dos está bien. Cualquier cosa más de dos, y me estás dando un dolor de cabeza.
  • Hazlo lo suficientemente grande como para leer. Si estoy entrecerrando los ojos para ver la copia en tu blog, ¿adivina qué? No lo estoy leyendo. Para una copia de cuerpo normal, el tamaño 12-14 es una apuesta segura.
  • Mantén tu fuente a la marca. Si eres una empresa de deportes de acción, Comic Sans probablemente no es una elección de fuente de marca. En realidad, no importa qué tipo de compañía seas, mantente alejado de Comic Sans. ¡Ugh!
  • Evita los grandes bloques de texto. Son visualmente abrumadores y el diseño equivalente a un letrero de “No leer” se extiende sobre tu copia.

Tu texto también necesita ser organizado. Practica usando diferentes estilos y tamaños de texto para dar énfasis a las partes claves de tu texto. Hay tres tamaños clave que querrás utilizar:

  • Encabezados: Los encabezados marcan las secciones más grandes con titulares o títulos para llamar la atención del lector y hacerle saber de qué trata su copia.
  • Subtítulos: Los subtítulos marcan secciones más pequeñas para que la página entera sea más escaneable para su lector.
  • Cuerpo: El cuerpo de tu contenido es todo lo demás. Es la carne de tu copia.

Cuándo debería usar esto

Todo el tiempo. Nunca hay una ocasión en la que no necesites palabras en tu página web.

Dónde debe usar esto

En todas partes. Cada página y sección de su sitio web debe tener una copia legible que tenga una clara jerarquía.

Color

Al igual que Skittles, tu sitio web necesita probar el arco iris. El color es una herramienta de diseño extremadamente efectiva y, cuando se usa estratégicamente, puede ayudar a influenciar a tu audiencia y a obtener resultados. Para más información sobre cómo usar el color para inspirar la acción en tu negocio, tenemos un gran artículo sobre la psicología del color.

Cuándo debería usar esto

Desde el primer día, deberías tener una paleta de colores de marca establecida. Usa estos colores para marcar tu sitio web y obtener los resultados que quieres.

Donde deberías usar esto

En todas partes, pero no te vuelvas loco. Mantén tu paleta de colores a tres colores o menos. Más que eso y parecerá una bolsa de Starbursts vomitada en tu sitio web. Y no olvides que una falta de de color es a veces igual de poderosa. El espacio en blanco es una herramienta efectiva para separar visualmente diferentes áreas de tu sitio web y llamar la atención sobre mensajes, imágenes o CTA importantes.

Pie de página

La mayoría de la gente piensa en el pie de página como una idea de último momento, pero en realidad es una parte muy importante de su sitio web. Las cosas a destacar en el pie de página incluyen:

  • Enlaces a páginas clave de su navegación, como “Acerca de nosotros” o “Contáctenos”
  • Información legal importante, como la política de privacidad o las condiciones de servicio
  • Dirección, número de teléfono y un enlace de Google Maps a su oficina
  • Botones de medios sociales

Cuándo debería usar esto

Cada sitio web necesita un pie de página. No sólo es un lugar para albergar información importante, sino que también es una señal visual de que su sitio web, de hecho, está terminado.

Donde deberías usar esto

Al final de la página… ya sabes, en el pie de página.

Ponga su contenido a trabajar

Con un gran contenido, ahora tienes la oportunidad de atraer a tu público. Consigue que hagan clic, les guste, compartan e interactúen con tu sitio.

Llamada a la acción

Ningún sitio web estaría completo sin una llamada a la acción (CTA). La CTA de su sitio web es su oportunidad de impulsar los resultados que busca diciendo a su público exactamente lo que quiere que hagan.

A través del espacio de cabeza

Hay 8 tipos diferentes de CTA que tal vez quieras incluir en tu sitio web:

  • Generación de plomo: “Dame tu dirección de correo electrónico y te daré algo a cambio”.
  • Formas: “Rellene este formulario y le daré algo a cambio”.
  • Lea más: “Haga clic aquí para saber más”.
  • Descubrimiento de productos o servicios: “Aprenda más sobre lo que hacemos haciendo clic aquí”.
  • Compartir socialmente: “¿Cómo este contenido? Compártelo con tus amigos!”
  • Nutrición de plomo: “Ya estás interesado, pero voy a endulzar el trato con esta oferta”.
  • Cierre de la venta: “¡Comprar ahora!”
  • Promoción de eventos: “Regístrese aquí”.

El CTA que uses depende de lo que busques. Y no sientas que tienes que limitarte a uno solo. Está bien mezclar y combinar CTA en tu sitio web para ayudar a maximizar tu impacto. Todos ellos deberían tener algunas cosas en común.

  • Llama la atención. Conseguir que tus usuarios actúen es una de las funciones más importantes de tu sitio web. Hacer que tu mensaje sea fácil de detectar, y captar inmediatamente los ojos de tus visitantes.
  • Sea claro. Si tu público se rasca la cabeza en cuanto a lo que quieres que hagan, tu CTA fracasará.
  • Hazlo fácil. No hagas que tu audiencia salte a través de aros y haga clic en un botón, rellene treinta formularios, responda a un correo electrónico y te entregue a su primogénito para que completes con éxito tu CTA. Cuantos más pasos, más gente perderás.

Cuándo debería usar esto

Cada vez que quieras que tu público entre en acción y haga algo.

Dónde debe usar esto

Piensa en añadir un CTA en tus páginas de ventas. O al final de las entradas del blog. O en tu barra lateral. O en un pop-up. La lista continúa. Pruebe diferentes lugares para ver cuál funciona mejor y le da los mayores índices de conversión.

Pop-ups

Oh, pop-ups. Piensa en ellos como el molesto bloque de construcción de tu sitio web. Seguro que a algunas personas les ponen de los nervios, pero podrían ser perfectas para ti.

Los pop-ups son una herramienta fantástica para capturar pistas y construir tu lista de correo electrónico. Y, seamos realistas, es la herramienta de marketing más poderosa que puedes tener en los negocios. Estos pequeños vienen en varios tipos diferentes:

  • Pop-ups cronometrados: Aparecen en un intervalo de tiempo especificado
  • Haz clic en las ventanas emergentes: Aparecen cuando un visitante hace clic en un área determinada de su sitio
  • Aparece un desplazamiento: Aparecen después de que un visitante se desplaza más allá de un determinado punto de la página
  • Ventanas emergentes de entrada: Aparecen tan pronto como se carga su página web
  • Ventanas emergentes de salida: Aparecen cuando alguien intenta hacer clic fuera de su sitio web

Cada tipo es efectivo de diferentes maneras, y la ventana emergente que elija depende de sus mensajes y objetivos. Si la ventana emergente se lee: “¡Espera! Antes de irte, inscríbete en nuestra lista de correo electrónico para recibir esta oferta exclusiva”, entonces querrás usar un pop-up de salida.

Cuándo debe usar esto

Aquí está la clave para aprovechar con éxito los pop-ups para reunir direcciones de correo electrónico: no exageres . Si tienes un pop-up que viene desde todos los ángulos cada diez segundos, tu audiencia se frustrará y saldrá corriendo de allí. Cuanto menos intrusivo puedas ser, mejor.

Donde deberías usar esto

Tus pop-ups vienen de diferentes lugares:

  • Un pop-up que ocupa toda la pantalla
  • Una superposición que aparece sobre el centro de la página
  • Un cuadro deslizante que se mueve a su página desde fuera de la pantalla

Experimenta para ver qué estilo y ubicación se adapta mejor a tu audiencia y a tus mensajes.

¡Salgan y construyan diseños de sitios web increíbles!

Con estos bloques de construcción, tienes todo lo que necesitas para crear el sitio web de tus sueños. ¡Ahora salgan y empiecen a construir!

admin

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicar un comentario