Cómo hacer diseños para un sitio web

March 26, 2021

Diseño


Es solo cuestión de segundos para que un usuario entre a tu sitio web y pueda determinar lo que tu compañía hace, para que pueda encontrar tu blog si es que lo necesita, si el listado de precios es fácil de entender o si encuentra rápidamente la información que busca. Todo esto se debe al diseño óptimo para un sitio web.

El diseño para sitios web es una disciplina que podría tomar toda una vida para dominarse. Y, como si no fuera lo suficientemente complicada, es también un área que está en evolución a cada segundo debido al avance de la tecnología.

Un sitio web es algo con lo que cada persona que está a cargo de un negocio tiene que aprender a lidiar, pero solo los involucrados en la creación de ésta entienden. Si deseas que tu sitio web exprese correctamente lo que deseas comunicar, a continuación te daremos una guía sobre los elementos básicos a tomar en cuenta al empezar tu diseño para un sitio web:

1. Limpia el desorden

Quizás el primer error que cometemos cuando empezamos a diseñar un sitio web es: tener una pantalla desordenada. La mayoría de clientes nos dará una lista de lo que quiere en un sitio web. Lo peor que podemos hacer es poner la mayor parte de información junta en una sola pantalla, en la misma página.

Te recomendamos:

  • Limpia lo que sobra, si hay un elemento que no añada o mejore la experiencia general del usuario es mejor quitarlo. Si este elemento puede vivir en otra pantalla, muévelo ahí.
  • Usa menús desplegables, es una buena opción para reducir el desorden.

2. Usa un amplio espacio en blanco

Te preguntarás qué harás ahora con todo ese espacio que quedó después de poner en orden aquel desorden.
Te seguiremos: Rellenarlo con nada.

El espacio en negativo (espacio en blanco) es un término en diseño para las áreas en una imagen que no llaman la atención. Aunque pueda parecer un tanto aburrido, si se usa correctamente el espacio negativo puede complementar y realzar el tema principal de tu sitio, mejorar la legibilidad y visibilidad y hacer que tu contenido sea más fácil de “asimilar”.

Una pantalla principal con un gran espacio en blanco puede hacer que tu usuario entienda más fácilmente lo que tu empresa hace y en qué dirección dirigirse a continuación.  

Te recomendamos:

  • Rodea los elementos más importantes con un espacio en negativo, entre más espacio tenga más atención recibirá.
  • No uses este espacio con fondos complicados, por sí mismo un fondo debería ayudar a llamar la atención de este espacio, si tu fondo es muy complicado o tiene demasiados elementos puede ser que robe la atención de tus elementos principales.

 

 

 

 

 

 

 

 

 

 

 

 

 

3. Guía el ojo de tu usuario con jerarquía visual

Con jerarquía visual nos referimos a hacer uso de elementos visuales tales como el tamaño o la posición para influenciar qué elementos verá primero  el usuario, cuáles en segundo y cuáles al final. Presentar un título grande, negritas en la parte superior del sitio y un pequeño párrafo descriptivo con letra delgada y pequeña en la parte inferior es un buen ejemplo para el uso de la jerarquía visual para priorizar ciertos elementos sobre otros.  

El diseño de un sitio web no se trata de que tanto agrega al sitio, sino cómo se agrega.

Los botones con CTA no solo se deben encontrar por ahí, se deben de agregar de forma estratégica con colores llamativos para destacar para fomentar los clics.

Elementos como, el tamaño, el color, el posicionamiento, el espacio en negativo, etc., todos estos pueden ayudar a tener un mejor engagement o disminuirlo según los usemos.

Te recomendamos:

  • Diseñar en cuanto la “escaneabilidad”, es una verdad que los usuarios no van a leer cada palabra de la página, tampoco llegan a ver todo lo que se encuentra en ella, por eso te recomendamos diseñar bajo este comportamiento haciendo que tus principales prioridades no sean fáciles de ignorar. Establece bien qué elementos quieres que llamen la atención primero para que los usuarios puedan seguir fácilmente un camino.
  • No usar elementos que compitan entre ellos.

 

 

 

 

 

 

 

 

 

 

 

 

 

4. Usa los colores estratégicamente.

Uno de los errores más grandes para el diseño es utilizar colores que no tengan un gran contraste, por ejemplo un banco con un gris claro, estos colores no solo pasarán desapercibidos, sino que serán poco legibles. En su lugar elige paletas de colores de alto contraste o colores que estén ubicados uno frente a otro en la rueda cromática.

Puedes crear una paleta de color con 1 a 3 colores primarios y 1 a 3 colores secundarios y terciarios. Los colores primarios se usarán en la mayor parte del diseño mientras que los colores secundarios nos servirán como contraste para complementar la paleta.

También puedes considerar usar diferentes tonos del mismo color para poder crear luces y sombras.

Te recomendamos:

  • Establecer una jerarquía de colores, usa solamente un color para los elementos principales (color principal) otro para los highlights (color secundario) y otro para elementos menos importantes (color terciario)

 

5. Optimiza la tipografía de tu sitio

Si bien las palabras o frases que tu copywritter y equipo elijan son extremadamente influyentes, puedes ayudar a mejorar su efectividad dándoles el aspecto adecuado.

Te recomendamos:

  • Usar fuentes para web, entre toda la variedad de fuentes, recuerda utilizar las fuentes que son “seguras para web” que son las que se pueden mostrar en en la mayoría de los dispositivos
  • Evitar el uso excesivo de fuentes llamativas; si bien estas fuentes pueden funcionar para que los títulos, encabezados o palabras independientes sean más llamativos también podrían causar gran distracción si son usadas en exceso, si se trata de un párrafo de texto te recomendamos usar un tipografía que sea más legible y agradable a la vista.

 

 

 

 

 

 

 

 

 

 

 

6.Prioriza la versión mobile

Lo primero que pensamos en cuanto al diseño de un sitio web es la versión desktop, pero la realidad es que hoy en día las personas navegan la mayor parte del tiempo en un dispositivo móvil. Es por eso que siempre debemos de tener en cuenta nuestra versión de nuestro sitio web en mobile.

“Mobile responssiveness” se refiere a qué tan bien se adapta tu sitio web en pantallas pequeñas. Si tu sitio web está cortado o las imágenes aparecen en lugares incorrectos cuando se navega en un dispositivo móvil esto podría causar a tu usuario una experiencia no muy agradable.

Te recomendamos:

  • Diseñar la versión mobile antes que la versión desktop, así trabajas estrictamente con elementos esenciales dado al espacio limitado de las pantallas. Después será mucho más fácil agregar unos cuentos elementos extras para la versión desktop.

Tip Extra:

Utiliza íconos

Hay veces que queremos mejorar una sección de nuestro sitio web o un CTA, pero quizás si usamos una foto podría distraer demasiado; es aquí donde los iconos entran al juego ya que se pueden utilizar para acentuar una sección y dirigir la atención hacia ésta.

Por ejemplo, digamos que estamos en una sección donde se quiere resaltar los beneficios de un producto o servicio. Para esto tenemos 3 cajas de texto por separado para detallar cada beneficio, la forma más fácil para agregar interés a esta sección sería agregando un ícono que represente el beneficio del cual estamos hablando en la parte superior de cada caja. Con el toque extra de que podemos personalizar nuestro íconos a los colores y personalidad de nuestra marca.

Ahora ya conoces cómo realizar un mejor diseño para tu sitio web. Es hora de llevar tu negocio al mundo digital y mejorar la experiencia de tus usuarios. 

Diana Antúnez

Graphic Designer

Diseñadora gráfica con experiencia en diseño digital, amante de los michis y de los animalitos, viajera frustrada, tímida por naturaleza, fan de relatos paranormales y el misterio. Entusiasta de tomar retos de diseño y aprender lo más que pueda para resolver el reto y entregar la mejor versión de mi en cada diseño; fiel creyente de la explosión de colores.