Tecnología y Coaching para Emprendedores

Infografía: Aspectos Claves del Diseño Web

infografia diseno web

Cada vez que alguien me pide consejo sobre cómo diseñar su sitio web, pienso en mil factores que van a influir en su éxito. Desde el nombre del dominio hasta la combinación de colores, pasando por facilitar el encontrar los contenidos y crear un código web limpio y orientado a SEO. La verdad es que la experiencia es un grado y aun me acuerdo cuando justo empezaba a dedicarme al diseño web, lo que hoy sé me habría parecido un mundo!

Justo hoy me he encontrado con una excelente infografía sobre los aspectos claves a tener en cuenta al planificar el diseño web. La infografía está en inglés, así que para aquellos que no domináis la lengua de Shakespeare os dejo aquí mi punto de vista sobre todos estos aspectos. Esto no viene en la infografía, así que también te sirve si te interesan mis consejos:-)

Ver la Infografía

Si quieres aprender más sobre diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.


Aspectos Clave a Tener en Cuenta en el Diseño Web

1. Dominio

El nombre del dominio es uno de los aspectos más importantes de nuestra visión comercial online. Y es justo el punto que más frena el desarrollo de una idea. ¿Por qué? Porque mucha gente se bloquea ante la idea de escoger un nombre, con lo que no avanzan y se quedan aquí. Está claro que el nombre del dominio es importante, pero no permitas que su elección te bloquee y frene, ya que siempre lo puedes cambiar tal y como hice yo.


2. Hosting

A diferencia del dominio, la mayoría de gente que justo empieza le da muy poca importancia al alojamiento web, cuando es un aspecto crucial. Hace poco tuve como cliente a una agencia de comunicación que tenía la web alojada en 1&1. El servidor no era lento, no, lo siguiente. Y eso es algo que no nos podemos permitir. Yo tengo esta web alojada en Gigas y estoy encantada por el buen servicio que ofrecen y lo bien que funciona siempre todo. Así que no te tomes a la ligera el hosting, en especial si quieres crear un negocio online.


3. Tecnología usada

No sólo se trata de programar en HTML5 y CSS3, así como usar un CMS como WordPress cuando se necesita, sino que se trata de que el código sea limpio y eficiente, de modo que sea óptimo tanto para los usuarios como para los motores de búsqueda.


4. Propósito del sitio web

Aunque parezca mentira, este es otro de los grandes olvidados, porque se tiene una idea general de lo que se quiere, pero no hay una planificación detallada de cómo alcanzarlo. Y te diré un secreto: en Internet para vender primero hay que dar. Si no generas confianza antes, no te comprará ni Rita la Cantaora :-)


5. Mapa de sitio

Una de las cosas que vemos en el curso de SEO es la importancia de que haya un mapa de sitio en tu web que facilite a Google el rastreo de tus contenidos. Si usas un CMS como WordPress tendrás a tu disposición muchos plugins que lo generen por ti.


6. Estructura y color

Desde mi punto de vista estos dos factores se tendrían que haber separado en dos, ya que si bien ambos se apoyan, en el fondo son independientes. El layout es la organización del sitio web por zonas, como cabecera, zona principal, barra lateral, pie de página, así como de los contenidos que vamos a poner en cada una de estas zonas.

El color, por su parte, es uno de los aspectos claves en el diseño de cualquier producto o servicio, incluido el diseño web. Los colores transmiten emociones y la correcta combinación puede generar la experiencia de usuario que de verdad deseamos causar. Así, con los colores podemos conectar con nuestro público objetivo y con la estructura podemos facilitarle el encontrar aquello que desea sin tener que pensar.


7. Contenido

El año pasado fui al Congreso Web y en una de las ponencias me acuerdo que dijeron que el contenido es el rey… y Google el notario. Me gustó tanto la frase que se me quedó grabada en la memoria. Lo importante es generar contenido pensando en el usuario, pero sin olvidar a Google. Y en este orden. Primero el usuario, después Google, y no al revés como hacen muchos.

Generar contenido de manera regular es de vital importancia. En las webs de muchos clientes veo como pasan los meses sin actualizar nada y, la verdad, me entristece, porque son personas con gran potencial que no están sacando partido a su diseño web al no actualizar el sitio de manera regular con nuevos contenidos. Así que si te puedo dar un consejo, publica cuanto menos un artículo en tu blog cada 15 días, pues este es el mínimo deseado, al menos desde mi punto de vista.


8. Público objetivo

Hay que tener muy claro a quién nos dirigimos. Y no me sirve con una definición generalista que englobe hasta al Papa. No, hay que definir mucho más concretamente al usuario y cliente que tenemos en mente, porque sino difícilmente conectaremos con nadie.


9. Publicidad

Evita en la medida de lo posible llenar tu web con publicidad. Hay muchas otras formas de monetizar tu sitio web. En mi ebook Dinero sin Empleo te enseño cómo ganar dinero gracias al marketing de afiliados.


10. Mensajes pop up

Los mensajes pop up son aquuellos que aparecen sólo cargar una página y acostumbran a ser francamente molestos. Entono el mea culpa: yo utilizo uno para conseguir más suscriptores a mi newsletter, pero no aparece sólo entrar en la página ni te sale cada vez que vienes. Bueno, es aquello de en casa de herrero, cuchara de palo :-)


11. Diseño atractivo

Bueno, este punto creo que está bastante claro, ¿no? Excepto por una cosa: que el concepto “atractivo” es del todo subjetivo. Me he encontrado con clientes que me han enseñado el diseño web de sitios sumamente atractivos para ellos que a mí me daban una patada en el estómago. Así que aclararé este punto: diseño web atractivo para el usuario al que nos dirigimos, no para nosotros. El diseño ha de conectar con nuestro público objetivo y es a él al que le ha de gustar, no a nuestra pareja o abuela, jeje..


12. Botones

Cuando diseñamos una web, es importante tener presente que todo tiene un propósito. Y los botones no son menos. Recuerda que el color del botón es importante, con un 30% más de clics en botones con colores cálidos tipo naranja o amarillo. Evita llenarlo todo de botones, sino al final el usuario no hará clic en ninguno.


13. Background

El fondo de nuestra web debe ir en línea con el diseño y no provocar discordancias. Si quieres usar una imagen, hazlo de manera inteligente y ten en cuenta las diferentes resoluciones de pantalla, pues en los demás dispositivos no se va a ver necesariamente como en tu casa. En la mayoría de casos, mejor utiliza colores lisos que lleven la atención al contenido principal.


14. Imágenes

La web es visual, al igual que el diseño web. Así que las imágenes que escogemos deben transmitir el mensaje que queremos enviar, a la vez que tener las proporciones adecuadas para que no se rompa el diseño. Si usas una plantilla, ten en cuenta las dimensiones de los contenedores, no sea que tus imágenes se vean pixeladas. También ten en cuenta los dispositivos retina de Apple.


15. Navegación web

Otro de los grandes olvidados es el facilitar la navegación web. Uno tiende a pensar que como yo sé dónde lo tengo, tú también lo vas a encontrar. Pues lo siento, pero no, ni tú estás en mi cabeza ni yo en la tuya. Si haces menús de navegación complejos y caóticos lo único que vas a generar es frustración, con lo que la gente se irá a un sitio donde todo sea más fácil de encontrar. Así que dedícale tiempo a crear una buena arquitectura de la información.


16. Ser únicos

Seamos honestos, cuando empezamos no hace falta hacer una inversión de más de mil euros en que te hagan un diseño web desde cero. Que si tienes el dinero y te apetece, adelante, pero si no vas a hacer un super mega negocio online, de verdad, empieza con una buena plantilla y si la cosa funciona, luego ya darás el paso a un diseño hecho a mano y a medida. Se puede personalizar una plantilla de WordPress con un tema hijo o child theme, de modo que puedes actualizar el tema comprado sin preocuparte de perder ningún cambio.

Y recuerda, lo que te hace único va mucho más allá del diseño. Es tu personalidad, tu tono, tu enfoque, lo que hará que tu sitio sea único. Yo tengo a un imitador que no hace más que copiarme, pero no consigue comentarios ni seguidores en las redes sociales porque escribe sin poner alma a lo que hace. Todos tenemos algo que nos hace únicos y sólo lograremos mostrarlo al mundo si no nos copiamos del resto y sacamos a la luz lo que llevamos dentro :-)


17. Actualizado

Como comentaba más arriba, en el momento que dejas de actualizar tu sitio, este se ve abandonado y en poco tiempo muere. En el curso de SEO vemos cómo la araña de Google deja de visitar un sitio que no se actualiza, por no hablar de la impresión que genera llegar a un sitio que parece te gusta y ver que no han publicado nada desde hace más de medio año.

Tenlo claro: mantener un sitio web es trabajo, esfuerzo y dedicación, y si no quieres hacerlo, quizá que te plantees o bien contratar a alguien que lo haga por ti, o dejarlo estar. Siento ser así de cruda, pero es la verdad, el 90% de los sitios abandonan su actualización al cabo de pocos meses de vida.


18. Optimizada para SEO

De nuevo otra de mis observaciones: está claro que hay que optimizar un sitio para SEO, pero sin pasarse. Porque no serás el primero que desaparece del índice de Google por sobre optimizar el sitio cara a SEO. Posicionarse es trabajo y hay que hacer las cosas bien. Si no sabes, mejor fórmate o contrata a un buen profesional.


19. Compatibilidad entre navegadores

Los diferentes navegadores web muestran el contenido de manera diferente, en especial nuestro “querido amigo” Internet Explorer, que hace lo que le da la gana. Lo importante aquí no es tanto que la web se comporte y vea igual en todos los navegadores, sino que ofrezca una mejora progresiva en función de si el navegador es más o menos moderno y actual.


20. Resolución de pantalla

Aquí yo añadiría que la web ha de ser responsive, esto es, se ha de adaptar a las resoluciones de pantalla de todos y cada uno de los dispositivos. Si no eres programador web, necesitas contratar a alguien que lo sea o formarte en diseño web responsive.


21. Redes sociales

Es importante que facilites que se pueda compartir los contenidos que publicas en las redes sociales, así como añadir iconos sociales atractivos para que te sigan en tus redes sociales. Y sobre todo, no cometas la pifia que muchos, que sólo ponen iconos de compartir sus posts de las redes sociales en las que están ellos presentes.


22. Tipografía

Con Google fonts es más fácil que nunca poner una tipografía chula en nuestro sitio web sin haber de pagar nada. Y sino hay muchos sitios web en las que podemos descargar tipografía para la web o bien gratis o bien a un coste reducido. La tipografía es una parte fundamental del diseño, no lo olvides.


23. Registro

Esto sirve también para la newsletter: a la gente le cuesta registrarse y darte sus datos. Así que pónselo fácil y divertido. Dales algo a cambio, consigue que se apunten. Porque sino te quedarás allí tieso muriéndote de la risa mientras esperas a que alguien se registre. Facilita las cosas.


24. Analítica web

Lo reconozco, no me gusta nada la analítica, lo mío es claramente un cerebro creativo. Pero aun as con las herramientas de analítica se pueden hacer cosas muy potentes, así que no olvides de configurar tu web con Google Analytics o Piwik.


25. Seguridad web

Otro de los grandísimos olvidados: la seguridad web. Coge el primer servidor de turno, utiliza contraseñas sencillas y siéntate a esperar. En nada y menos te habrán hackeado la web. Va en serio, lo he visto en muchas webs de empresas importantes. Si usas WordPress, instala plugins de seguridad que solucionen los fallos de seguridad. Y si montas un negocio online, elige un servidor como el mío que te deje dormir tranquilo.


26. Pie de página

La zona inferior de la web es otro de los grandes olvidados. Aquí es importante que el diseño vaya en línea con el resto de la web. Hoy en día con diseño web responsive es imprescindible un botón de subir como el que aparece en esta web. Si eres programador, te interesará este artículo sobre cómo crear un botón de subir en HTML5.


Infografía: Aspectos Claves del Diseño Web

infografia diseno web aspectos clave


Para acabar…

¿Qué aspectos son los que tú consideras más importantes en el diseño de una web? Si tuvieras que dejar alguno de ellos de lado, ¿cuál crees que es el que sería menos importante? Me encantará que compartas conmigo tus experiencias con el diseño web, si tienes una web, saber qué crees que la hace atractiva o, por el contrario, que crees que dificulta el conseguir tus objetivos.

Si quieres aprender más sobre diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Deja ahora un comentario y, sobre todo, no te olvides de compartir este post en las redes sociales, seguro que a más de uno le ayudará en el diseño de su web.

Un abrazo!


Comentarios

  • claudia

    Me encanto el artículo!!! Creo que no le falta nada, lo más importante es que lastimosamente las empresas abandonan las páginas web por no contratar a alguien que las maneje responsablemente y las hechan al olvido en un par de meses, yo creo que muy importante estar en la red; porque se puede ganar más de lo que crees.

    • eSandra

      Muchas gracias, Claudia! En sí no sólo las abandonan las empresas, sino también muchos bloggers y emprendedores :-)

      un abrazo!
      Sandra

  • Freddy

    Muchas gracias por tu infografia, hace tiempo tuve un blog, pero por no saber muchas de las cosas que mencionas lo abandone, por lo menos en la próxima lo podre hacer mucho mejor. Gracias!

    • eSandra

      Gracias a ti por comentar, Freddy :-)