Diseño Web – Tips para dejar una gran primera impresión

Imagina el siguiente escenario:

Hay dos jóvenes con mucha ambición y aspirantes al mismo puesto de trabajo de una empresa muy reconocida:

Javier viste un traje elegante, está bien afeitado y tiene una postura correcta. Se le nota seguro, con confianza y 100% preparado.

Por otro lado, tenemos a Pedro, que está como salido de una discoteca a las 7 de la mañana (cara larga, ojeras, pantalones rotos y zapatillas deportivas a medio amarrar).

¿Quién crees que causará mejor impresión a la entrevistadora de recursos humanos? 

Sin saber tan siquiera sus estudios o experiencia, uno de los dos ya tiene una clara ventaja sobre el otro. 

La primera impresión determina en gran parte lo que sucederá después en términos de comunicación, relación e interacción. Esto sucede en todo, ya sea en relaciones personales, profesionales, presentaciones laborales, negociaciones y también en Internet.

Aunque en la Web no hay comunicación cara a cara, la forma de presentarnos ante el mundo y los demás es mediante nuestra página Web o blog.

Podemos ofrecer el mejor información, sin embargo, con un diseño Web pobre en cuestión de apariencia y estructura será prácticamente imposible llamar la atención, conectar con una audiencia y que así puedan aprovechar todo ese contenido que se ofrece.

En Internet el nivel de atención promedio es muy, muy bajo. Las distracciones están a la orden del día y cada vez es más complicado que un usuario no abandone cualquier sitio que visita en los primeros segundos.

Con un excelente diseño Web se aumentan las posibilidades de que haya una mejor conexión con cada persona que visita nuestro blog, que lea el contenido y cumpla con acciones más específicas como suscribirse, dejar comentarios, recomendar la página en redes sociales y por supuesto comprar lo que se ofrece.

Diseño Web – Tips para Dejar una Excelente Primera Impresión

En esta guía te comparto algunos de los mejores consejos para mejorar tu diseño Web, ofrecer una gran primera impresión y cumplir con los objetivos que tengas con tu blog o sitio.

Primer Paso – Define el objetivo #1 de tu sitio

Antes de enfocarse en cómo va a ser tu diseño Web, es muy importante definir tu objetivo principal. Todos los elementos que vamos a ver en este tutorial van a ser una ayuda y soporte para que el objetivo se pueda cumplir.

El diseño web de un blog no será el mismo que el diseño de una carta de ventas, por ejemplo.

Escribe claramente tu objetivo y para después, al poner en práctica estos consejos, tengan muchas más claridad y sea más fácil tomar acción.

Ejemplos de objetivos:

• Que los usuarios se suscriban a mi lista de correo
• Que compren mi producto
• Que lean los artículos de mi blog
• Que llenen una forma de contacto para poder ofrecer mis servicios

Como esos puede haber muchos 🙂

Utiliza una plantilla o tema de calidad

La plantilla que utilices en WordPress va a funciona como la base de tu diseño, la cual podrás modificar a tu gusto de acuerdo a las opciones de personalización y diseño que ofrezca.

Existen miles de plantillas de diferentes estilos que se pueden utilizar. Algunas enfocadas a cierto tipo de sitio. Por ejemplo, podemos encontrar temas para blogs, para sitios corporativos, para freelancers, para tiendas virtuales, etc.

Lo más importante es escoger un tema o plantilla que se adapte a lo que necesitas y que además ofrezca seguridad, un gran diseño y soporte de calidad.

Ejemplo: La plantilla ThemeYourself que ofrece Marcos ofrece todo esto y mucho más. Lo que más me agrada de este tema es todo lo que puedes modificar y personalizar a tu gusto.

Te la recomiendo mucho.

Imágenes de calidad

Las imágenes son lo primero que atrae la atención de las visitas de un sitio Web. La mirada (casi) siempre se va automáticamente a la parte más visual e ilustrativa, es por eso que debemos estar seguros de usar imágenes de calidad, con buena resolución y que sean atractivas para los lectores.

No uses fotos o imágenes de baja resolución, con colores que no ayuden o con cualquier otra característica que pueda provocar que los usuarios tengan una reacción negativa.

El objetivo es que las imágenes puedan ayudar al lector a poder consumir mejor el contenido escrito o incluso a enriquecer su aprendizaje con mediante un medio más visual.

Recuerda que WordPress cuenta con un editor básico de imágenes para retocar cualquier detalle y también puedes utilizar algunos plugins para mejorarlas aún más.

Para saber más sobre cómo usar imágenes y optimizarlas en WordPress, revisa: Guía para retocar imágenes online

Fondos y texturas adecuados

Puede ser que tengamos excelentes imágenes y un contenido de primer nivel, sin embargo, si el blog contiene fondos con colores muy brillantes o muy obscuros, es muy fácil que los usuarios prefieran abandonar el sitio inmediatamente.

Las texturas que utilizas también ayudan a que se tenga una mejor experiencia e impresión del blog. Utiliza texturas y fondos modernos y con colores adecuados, los cuales son esenciales para un excelente diseño web.

Dependiendo de tu diseño, es posible que ocupes diferentes fondos y texturas para algunas áreas, por ejemplo, la parte del blog y las entradas puede tener un fondo distinto al de los menús, encabezado o widgets.

Te recomiendo siempre buscar un patrón similar para que no haya tanto contraste y se mantenga siempre un mismo estilo en el diseño, de esta forma será mucho más fácil enfocarse en leer el contenido y no distraerse por factores externos.

Para saber más sobre recursos y consejos de fondos Web, revisa: Cómo usar fondos web en tu blog y sitio

Navegación y estructura sencilla

Muchas veces en el intento de querer tener un gran diseño con muchas funciones y características se nos olvida lo más importante: ofrecer una navegación sencilla, entendible y que facilite las conversiones deseadas.

Dentro de los tips más importantes de navegación están:

• No utilizar demasiados Widgets en las sidebars que puedan distraer al lector
• No llenar de publicidad el sitio (a menos que sea un sitio 100% dedicado a eso)
• Utilizar colores y combinaciones de elementos que faciliten la lectura (Por ejemplo, mismo color en títulos de entradas, widgets y menús).
• No abusar de los menús personalizados
• Estilo minimalista

Tipografías de calidad

La tipografía es otro elemento que influye en los resultados que se obtienen en un blog o página Web.

Muy atrás han quedado los días en los que la sensación era utilizar Comic Sans o Times New Roman para nuestros encabezados o contenido. Es momento de evolucionar en este aspecto, y qué mejor que hacerlo con la ayuda de Google.

Te recomiendo utilizar alguna Google Font en tu tema. Muchos temas de WordPress ya vienen con este tipo de tipografías precargadas y listas para utilizarse.

Mis favoritas son Roboto, Lato, Open Sans, Droid Sans y Arvo.

Revisa los siguientes recursos:

• Guía de tipografías Web
• Google Fonts

Escoge la que más te agrade y presenta así tu información con un estilo moderno y agradable.

Tips más allá del diseño

Vamos a ver algunos elementos que no tienen relación con el diseño pero que también ayudan a tener una buena primera impresión en el blog.

Velocidad de carga

Muy importante. Siempre hay que tratar de que los tiempos de carga en sean lo más rápido posible. Si hay algo que no caracteriza a los usuarios de Internet es la paciencia. (Casi) nadie espera más de 5 segundos a que cargue un sitio.

Para optimizar los tiempos de carga te recomiendo estos dos plugins de WordPress:

• WP Smush.it. Reduce y optimiza el tamaño de las imágenes sin comprometer la calidad ni resolución.
• W3 Total Cache. Acelera los tiempos de carga eliminando el cache acumulado. También ofrece muchas otras herramientas de optimización como la configuración de CDN (Content Delivery Network).

Además de estos plugins también te recomiendo instalar iThemes Security, una excelente solución de seguridad que ofrece más de 30 formas de proteger WordPress contra ataques y así ofrecer un sitio seguro y siempre limpio.

Plugins de calidad

Siempre instala en WordPress plugins de calidad y que desarrolladores conocidos y de confianza.

Muchas veces pensamos que usar muchos plugins puede hacer más lento nuestro blog, sin embargo, lo que realmente tiene un impacto negativo es el uso de plugins mal programados, con código maligno o cualquier otro aspecto que afecta a WordPress de muchas formas.

Tampoco digo que instales 300 plugins, pero si hay que darle un poco más de prioridad a la calidad antes que la cantidad 🙂

Ayuda extra: Webmaster tools

Google nos ofrece una serie de herramientas con las que podemos optimizar nuestro sitio Web y conocer su estado en relación a su desempeño en los resultados de búsqueda.

Algunas de las secciones más importantes que ofrece son recomendaciones de HTML (para mejorar la estructura), cómo acelerar los tiempos de carga, detección de errores o de malware y mucho más.

Para aprender a usar estas herramientas, revisa: Guía de Google Webmaster Tools.

Si has leído hasta este punto, entonces ya tienes el conocimiento teórico para poder tener un excelente diseño Web en tu sitio de WordPress.

Ahora es momento de tomar acción e implementar todos estos consejos y estrategias.

¿Cuáles son otros consejos de Diseño Web que te han funcionado?  Comparte tu experiencia para que todos podamos aprender del tema 🙂