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

Los diseños efectivos de sitios web son en realidad rompecabezas con un montón de pequeñas piezas cuidadosamente dispuestas para unirlas todas. Con las piezas correctas, puedes construir un sitio web que impulsará las conversiones, construirá una relación con tu audiencia y elevará tu marca a nuevas alturas. Si eliges las piezas equivocadas o las juntas incorrectamente, tu sitio web no podrá hacer lo que tú necesitas que haga.

Así que, echemos un vistazo a los bloques de construcción de los diseños de los sitios web. Cuando los apilas de la manera correcta, las partes de un sitio web pueden construir algo grandioso. Como este bloque de recreación de Westeros. O, ya sabes, un sitio web. Cualquiera de los dos es genial.

Comienza con los bloques de construcción.

Su diseño es la estructura de su sitio web. Y dependiendo del tipo de negocio y el contenido, diferentes diseños funcionarán mejor para diferentes cosas. Mezcle y combine estos diseños según lo que le convenga a usted y a su contenido.

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

La Imagen Destacada

Si tu negocio, organización o proyecto no tiene mucho peso en las imágenes, el diseño de la imagen destacada debería ser el adecuado para ti. Este diseño llama la atención sobre una foto o gráfico (la imagen destacada… #captainobvious) mientras que mantiene el resto de la página simple y enfocada al texto. Es ideal para gente con menos imágenes y más contenido.

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

La Red

Piensa en La Rejilla como la versión avanzada de La Imagen Destacada. Esta disposición presenta una gran área gráfica seguida de una sección separada en múltiples bloques de diferentes formas y tamaños. Puedes insertar cualquier tipo de contenido que desees en esos bloques -imágenes de productos, cuadros de texto, entradas de blog destacadas, lo que te apetezca. Este diseño funciona muy bien cuando hay mucho contenido que necesita ser mostrado.

Los elementos básicos de un diseño eficaz de un sitio webDiseño de DSKY Los elementos básicos de un diseño eficaz de un sitio webVia Gina y Ryan. Los elementos básicos de un diseño eficaz de un sitio web

La Red Eléctrica

La Red Eléctrica es La Red de los esteroides. Esta disposición incorpora diferentes cuadrados, rectángulos y áreas de espacio dentro de la cuadrícula.Esta disposición es una solución impresionante si tienes toneladas de diferentes tipos de contenido (piensa en vídeo, texto, formularios de suscripción, imágenes… te das cuenta) que necesitas organizar.

Los elementos básicos de un diseño eficaz de un sitio webVia Huffington Post. Los elementos básicos de un diseño eficaz de un sitio webDiseño de Prismonline Los elementos básicos de un diseño eficaz de un sitio web

Barra lateral fija

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 -cualquiera de las dos formas funciona- 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.

Los elementos básicos de un diseño eficaz de un sitio webDiseño de INSANELY.US Los elementos básicos de un diseño eficaz de un sitio webVia Faebric Los elementos básicos de un diseño eficaz de un sitio webVia The Ultralinx

Cuándo debe usar estos

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.

Dónde se deben usar estos

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 sensibles

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

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

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 debe 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.

Dónde debe 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 sitio web fuera un país, tu barra de navegación (o «barra de navegación») sería el mapa, de ahí todo el asunto de la «navegación». Use esta herramienta para mostrar a su público dónde pueden ir y cómo está organizado su contenido. Si se pierden, su barra de navegación debería apuntarles en la dirección correcta.

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

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.

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

  • 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.

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

Estas son 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 debe 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

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

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 debe 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.

Dónde debe 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

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

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 debe 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.

Dónde debe 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.

Los elementos básicos de un diseño eficaz de un sitio web 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 debe 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

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

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.

Dónde debe 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.

¡Adelante y construya diseños de sitios web impresionantes!

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!

¿Tienes algunas ideas de diseño que un diseñador puede hacer realidad? Iniciar un concurso de diseño web en 99designs.

Comments are closed.