Consejos de diseño web para crear una web que tus clientes adorarán

Construir una presencia online sólida es clave para el crecimiento de tu pequeña o mediana empresa. Todo empieza con el lanzamiento de tu página web pero continúa gestionándola de manera eficaz, generando tráfico y aumentando tu audiencia y clientes. Independientemente de la etapa digital en la que te encuentres, tenemos cientos de consejos prácticos probados para ayudarte a crear tu presencia online con éxito este año, tanto por nuestro equipo como por los autores invitados.

Arrancamos una serie de artículos sobre cómo tener una presencia online de éxito para pequeñas empresas con un artículo de Michelle Schulp, diseñadora gráfica y desarrolladora front-end con gran pasión por la experiencia de usuario. También es una de las WordPress Ambassadors en SiteGround. Ha recopilado unos buenos consejos sobre cómo construir una página web que encante a tus clientes y que puedas aprender y empezar a usar de manera inmediata, incluso aunque no seas un diseñador. ¡Échales un vistazo!

Cuando se trata de construir tu página web, la primera pregunta que tiene la mayoría de la gente es cómo mejorar el diseño. En muchos casos, contratar a un diseñador es una gran idea. Tienen mucha formación en comunicación audiovisual y su resolución de incidencias y su talento pueden suponer un gran retorno a tu inversión.

Pero también está bien si no tienes presupuesto para un diseñador. Hay muchos otros muchos aspectos del diseño que puedes aprender y aplicar por tu cuenta de forma inmediata.

El poder del por qué: el arma secreta del diseñador

Antes de empezar con consejos específicos, es importante entender qué es exactamente el diseño. Uno de los grandes mitos del diseño es que todo está relacionado con la apariencia de la página. Si bien es cierto que los diseñadores usan habitualmente herramientas visuales para el estilo, el diseño es mucho más que decorar. En vez de enfocarse en “hacerlo bonito” al final del proceso, los diseñadores se enfocan en identificar y resolver problemas desde el principio.

El diseño aporta valor haciendo que todas las decisiones se lleven a cabo de forma intencionada. La cuestión más importante acerca del diseñador es tratar de responder, no a cómo se ve la página, sino al por qué se ha hecho algo. Los diseñadores no comienzan con “¿cómo debería verse este botón”? sino “¿por qué es necesario este botón?”. Obteniendo un mejor entendimiento sobre todo el problema, pueden dar una mejor solución, incluyendo aspectos creativos que pueden no haber sido obvios si solo nos fijamos en detalles superficiales.

Conoce tu ventaja: marca objetivos y Call to Action (CTA)

Ahora que entiendes la importancia del por qué en el proceso del diseño es hora de pasar ese conocimiento a tu propia página. Para dar una experiencia ideal de usuario a tus clientes, necesitas ser capaz de contestar a esta pregunta: ¿por qué la gente visita mi página?

Puede parecer sencillo, pero la pregunta puede ser engañosa. Cuando se pregunta, mucha gente dará distintas respuestas: tener una cuenta, comprar un producto, rellenar un formulario de contacto, suscribirse a una newsletter. Si bien es cierto que los clientes tienen muchas opciones para interactuar con tu página, siempre hay una acción primaria que representa la mayor parte del éxito en tu negocio.

Para una tienda puede ser comprar un producto. Para un proveedor de servicios puede ser contactar contigo para un servicio en concreto. Para un miembro de una página o una red social puede ser crear una cuenta. Esta acción es también conocida como “Primary Win” y debe estar alineado con los objetivos de tu audiencia.

Puedes tener otras formas de interactuar con tus clientes, por ejemplo, como proveedor de servicios, puedes tener además de una newsletter un formulario de contacto o como un vendedor de productos digitales, puedes tener además del carrito de compra un foro de ayuda. Éstas son conocidas como las acciones secundarias, que pueden tener sus propias formas de llevarse a cabo y no tienen que suponer una distracción de tus “Primary Win”. Tener muchas opciones puede parecer de gran ayuda dando a tus clientes el poder de elegir pero muchas call to action harán difícil que tus clientes entiendan cómo interactuar contigo.

Una vez que sepas tu Win, puedes empezar a ver tus call to action, o el lenguaje que empuja a la gente a interactuar con tu página. Tu página web tiene probablemente varias y diferentes calls to action”. Esto puede ser tan sencillo como un botón “Añadir al carrito” a un producto o un formulario “Regístrate ahora”, o pueden ser tan complejos como páginas de inicio customizadas y diseñadas para convertir a audiencias diferentes. Asegúrate de evaluar cada una de estas áreas para asegurar que tu “Primary Win” está claro y que tu lenguaje, la organización de tu contenido y el patrón del diseño están guiando a los clientes a llevar a cabo acciones.

No me hagas pensar: patrones y organización

Internet lleva ya unos años funcionando y algunos patrones comunes han evolucionado tanto que las personas que están navegando por la web esperan encontrarlos. Por ejemplo, muchas de las páginas web tienen un encabezado donde va el nombre o logo de la compañía, generalmente en la esquina izquierda para los idiomas que se leen de izquierda a derecha. La navegación de la página generalmente se encuentra en el encabezado o en el lado de la izquierda de la pantalla. Muchas páginas webs tienen también un pie de página, donde se encuentran navegación adicional, noticias legales e información de contacto. El contenido principal está en el medio, con contenido adicional en la barra lateral.

El experto de la experiencia del usuario y autor Steve Krug trata estos principios en su libro “Don’t Make Me Think”, que es considerado uno de los mejores con respecto a usabilidad web. Nos recuerda que cuantas más trabas mentales tengas que pasar el cliente en tu web, más frustrante será la experiencia y será más difícil que permanezcan en tu página. En general, asegúrate de seguir estos patrones en tu página para hacer más fácil la experiencia de navegación a tu cliente.

El contenido en sí mismo tiene que seguir una estructura donde los elementos más importantes de tu página tengan más peso visual. Los encabezados son en general más grandes y en negrita, las historias destacadas tienen imágenes más grandes que las complementarias. Puedes usar elementos visuales como el color, tipografía, forma e imágenes para apoyar tu estructura, pero estar suele ser la parte donde los dueños de las páginas web tienen dificultades.

Diseño gráfico: menos es más

Cuando se trata de tomar decisiones sobre colores, fuentes y otros elementos visuales de tu página piensa cuáles de ellos te representan más.

Puede que estés ilusionado con las posibilidades y te pongas directo con ello, poniendo color a todo, probando todas las fuentes nuevas y llenando tus páginas de de toneladas de iconos, adornos gráficos y efectos. O quizás, encuentres todas estas opciones demasiado y no estés seguro por dónde empezar, por lo que se te hace difícil empezar a añadir contenido.

En ambos casos, esta guía te ayudará con unas reglas simples que siguen el principio de “menos es más”.

Limita tu paleta de colores a un color neutral (como el negro o gris oscuro) con 1-2 colores predominantes, que son generalmente determinados por tus colores corporativos. Si estás planeando usar algunos de estos colores para el texto o de fondo, asegúrate de que hay contraste suficiente para que el contenido pueda leerse. Adobe Color y Color Safe son unas buenas fuentes si necesitas crear algo bonito y con una paleta de colores accesible para tu página.

Cuando seleccionas una fuente o eliges una fuente para los encabezados y otra fuente para el cuerpo del texto, esta última tiene que ser fácil de leer en párrafos densos mientras que, la fuente que elijas para los encabezados puede tener más personalidad ya que va a ser más grande.

Tanto Google como Typekit ofrecen herramientas que te permiten experimentar con diferentes combinaciones. Asegúrate de que tienes en cuenta el peso y el color de la tipografía también. Fuentes muy pequeñas y ligeras son más difíciles de leer en tamaños pequeños, lo mismo ocurre con textos en negrita.