Este es un post invitado de Óscar Fernández, creador de Creativolandia.
[toc]
Mi nombre es Óscar Fernández y soy diseñador especializado en WordPress. Quizás mi nombre te suene porque soy quien se ha encargado de rediseñar con Antonio Inteligencia Viajera. De hecho, hace muy poco que hemos terminado de pulir todos los detalles.
Si quieres saber cómo fue todo el proceso puedes echar un vistazo a este post.
La verdad es que el diseño es un aspecto muy importante de un blog, pero no por el motivo que tú estás pensando… Pero antes de entrar en eso déjame darte un dato.
¿Sabías que el 90% de los blogs que se crean no superan el año de vida?
Sí, como lo oyes. Solo un 10% consigue superar su primer cumpleblog. La verdad es que una tasa de fracaso tan alta no puede deberse a una única cosa, pero sí me voy a atrever a decirte cuál creo que es una de las principales razones.
Una tasa de conversión muy baja.
No estamos hablando de visibilidad, ni de conseguir visitas. Pero si esa es tu máxima preocupación en este momento, lee estos posts de Antonio donde tienes 1.001 técnicas para conseguir visibilidad.
- Cómo conseguir miles de visitas y hacer renacer tu blog de viajes en menos de un mes.
- Cómo conseguí 4000 visitas la primera semana del lanzamiento de mi blog ¡Mi secreto para romper estadísticas!
- Cómo conseguí 80.000 visitas y 1.000 suscriptores en el primer mes de vida de mi blog.
Pero a lo que yo me estoy refiriendo va un paso más allá, yo hablo de lo que pasa cuando las visitas ya están en tu blog.
¿Porque sabes una cosa?
Si todas esas visitas se quedan en eso, en visitas, tu blog no crecerá. Para que tu negocio online crezca necesitas suscriptores y clientes. Y para conseguirlo, necesitas mejorar tu ratio de conversión.
Como Antonio solo quiere post 100% prácticos (y si no me crees fíjate en esta guía para ganar dinero con un blog o este tutorial sobre cómo sacar vuelos baratos), hoy te voy a explicar cómo mejorar la tasa de conversión de tu blog.
Vamos a por ello.
¿Que es una conversión?
Este es un término que si te mueves por este mundillo de los negocios online ya habrás escuchado bastantes veces. Pero como me gusta empezar desde lo más básico por si hay alguien que no lo conozca, te explico qué es esto de la conversión y por qué es tan importante.
Una conversión, no es más que una transformación, que algo pase de un estado a otro.
En el caso del marketing online, entendemos por conversión el momento en el que una visita se transforma en algo más. Por ejemplo, un suscriptor.
Porque como te dije antes, un negocios online no vive de las visitas, sino de sus clientes. Pero como esa transformación no es inmediata y requiere un tiempo es importante que optimicemos el proceso al máximo.
¿Cómo se mide la tasa de conversión?
Para poder calcular la tasa de conversión lo que primero que tienes que hacer es definir el objetivo. ¿Qué es lo que quieres que ocurra?
- Buscas suscriptores.
- Altas en un webinar.
- Reserva de una sesión gratuita contigo.
- Ventas de un infoproducto.
- Más clientes para tu servicio estrella.
Y una vez que tengas el objetivo definido, ya tendrás todos los elementos para resolver la ecuación.
El ratio de conversión se mide dividiendo la cantidad de veces que has conseguido tu objetivo por las visitas totales a tu página.
Un caso práctico:
Supón que has creado una Squeeze Page para ganar suscriptores (si quieres ver como ejemplo la squeeze page de Antonio pincha aquí).
Ojo: si no sabes qué es este tipo de página, te recomiendo que te leas este post donde explico qué es: Cómo crear una squeeze page rápido que incremente tu lista de suscriptores hasta el infinito.
Imagina que tienes una Squeeze page donde diriges un gran volumen de visitas. Tomas como referencia un periodo de tiempo concreto, pongamos una semana. Y en esa semana, 3.000 personas visitan la página pero sólo se suscriben 67.
La tasa de conversión de nuestra Squeeze durante esos 7 días será del 0,02 %. Esta cifra es lo que nos sale de dividir las 67 veces que hemos conseguido nuestro objetivo entre las 3.000 personas que han visitado la página.
¿Quieres saber cómo captar suscriptores?
Echa un ojo a este post: Cómo conseguir suscriptores. Caso de éxito: De 197 a 1.136 suscriptores en tres días.
¿Es importante el diseño para incrementar la tasa de conversión?
Pues afortunadamente para mí que soy diseñador, sí, es muy importante.
Ha habido varios estudios al respecto, uno de los más prestigiosos lo hizo la Universidad de Standford en EEUU.
Este estudio determina, entre otras muchas cosas, que un diseño profesional aporta credibilidad y confianza a cualquier sitio web. Y la confianza, a su vez, afecta en gran medida a la tasa de conversión.
Pero empecemos por lo básico.
¿Que es el diseño?
Es imposible hacerte entender que el diseño es la polla, si no sabemos exactamente qué es el diseño.
Todo el mundo cree que el diseño es hacer que las cosas se vean bonitas, preciosas. Nada más lejos de la realidad. El objetivo del diseño no es otro que hacer que la comunicación cumpla con su función.
Un buen diseño es aquel que hace que tu comunicación se vuelva útil para el que la recibe. En otras palabras, consigues que tus lectores entiendan lo que tú quieres decirles.
Piensa en esto un segundo: ¿crees que los que diseñaron Ikea lo hicieron así para que tú te fueras por la puerta sin comprar nada? Voy más allá, ¿alguna vez has entrado en Ikea y no has comprado absolutamente nada?
Para mí, como diseñador, Ikea es una puñetera obra de arte.
[bctt tweet=»Por muy bonita que sea tu web, si tiene una tasa de conversión baja, no está bien diseñada» username=»iviajera»]
Una de las cosas en las que he basado mi trabajo es precisamente esto. No me sirve de nada hacer obras de arte a mis clientes si sus webs no convierten. La funcionalidad siempre debe ir por delante.
8 técnicas para mejorar nuestra tasa de conversión por medio del diseño.
Una vez hemos entendido que el diseño debe ser funcional, vamos a ver cómo puedes mejorar el ratio de conversión de tu web con el diseño.
1. Marcar los puntos de foco
Marcar los puntos de foco no es otra cosa que conseguir que tus visitas dirijan la mirada hacia donde tú quieras. Esto es más fácil de lo que puedes parece, todo se basa en una matemática muy básica que se llama la regla de los tercios.
Esta regla se basa en dividir la pantalla en bloques de 3, tanto de izquierda a derecha como de arriba hacia abajo. Los puntos de foco son donde se cruzan todas las líneas.
La regla de los tercios se basa en colocar lo que queremos que las personas miren primero en uno o en varios de estos puntos.
No te preocupes si los puntos de foco no caen precisamente en el centro de las intersecciones, basta con que caigan cerca.
Piensa que hay muchos dispositivos con diferentes resoluciones. En diseño responsive (para dispositivos móviles) todo se vuelve líquido. Es decir, para poder adaptarse a las diferentes pantallas, todos los elementos van cambiando de tamaño y posición en función de la resolución de la pantalla.
Se vuelven como el agua porque toman la forma del contenedor en el que se encuentran.
La regla de los tercios es una fórmula muy usada en fotografía. De hecho, muchas cámaras modernas te permiten poner esta malla en el visor para cuando hagas la foto esté perfectamente compensada. Incluso algunos programas de retoque fotográfico, como Photoshop, te permiten hacerlo.
Fíjate en cómo se ve la web de Antonio con los puntos de foco señalados.
En el caso de la home de Inteligencia Viajera puedes observar como los dos puntos de foco superiores recaen en la call to action y en la foto de Antonio.
Ya verás como con esta técnica y con algunas de las que explicaré ahora afinarás mucho más el tiro. Por ejemplo, la del contraste en las call to action o la importancia de humanizar la web (la foto de Antonio) te ayudarán a mantener la atención en estos puntos focales sin remedio.
2. Contrastes bien marcados
Esta técnica es complementaria a la técnica anterior porque también ayuda a resaltar los puntos focales. El contraste se basa en resaltar los elementos por encima del resto.
Hay contrastes de muchos tipos, hay muchas posibilidades:
- Color: por ejemplo, cambiar las secciones de color hace a las visitas estar alerta y darse cuenta de los cambios de contenido.
- Tamaño: puedes usarlo para resaltar un titular. Solo es poner una tipografía más grande.
- Forma: para hacer resaltar una call to action (CTA) es importante que tenga forma de botón. Así harás que cobre mayor importancia que el resto de los enlaces de la página.
- Intensidad: para resaltar un texto por encima del resto lo ponemos en negrita.
En algunos casos, los diferentes tipos de contraste se pueden juntar para multiplicar así su efecto sobre el resultado.
Si te fijas en la foto de la home de Antonio que he puesto más arriba, una call to action contrasta por encima del resto del contenido a la perfección. Lo hace tanto en la forma como en el color.
3. Paleta de colores coherente con tu mensaje y tu sector
El color es uno de los aspectos más importantes de cualquier diseño. Lo más importante de este punto es que te quedes con 2 ideas:
- Elige una paleta de colores coherentes con tu imagen de marca y tu sector.
- Juega a combinar el mensaje que quieres aportar con la psicología de los colores, con el significado de los colores.
El color es prácticamente una regla matemática en la que aplicando una serie de fórmulas acabas obteniendo el resultado.
Si quieres profundizar sobre este tema, te recomiendo que te leas este post: ¡Ni se te ocurra elegir los colores para tu web sin antes leer esto!
4. Orden y alineación de los elementos
Alinear correctamente los elementos es algo primordial.
Los seres humanos inconscientemente encontramos belleza en la simetría. De hecho, en gran medida el que una persona nos parezca guapa tiene que ver con la simetría entre ambos lados de su cara.
Por esto, es importante que las columnas y las imágenes de tu web mantengan el mismo ancho.
También es importante que mantengas siempre la misma distancia y espacios entre las diferentes secciones de tu web.
Cuanto mayor sea la sensación de orden que proyectes más cómodo se sentirá tu lector y más le facilitarás la asimilación de los contenidos que expongas en las diferentes páginas de tu web.
Fíjate en la foto de ejemplo. Todos los iconos están al mismo tamaño y alineados perfectamente al igual que todas las columnas ocupan el mismo espacio.
Cierto es que el texto no siempre acaba en el mismo punto. Pero hay que tener en cuenta que no es un diseño estático, sino que es un diseño basado en un código, en este caso, HTML.
5. Espacio para respirar (white space o negative space)
Todo en la vida necesita un descanso y el diseño no iba a ser menos. A veces, dejar espacio para respirar y tomar tiempo hace que el diseño fluya con más naturalidad.
La vista y el cerebro necesitan espacio para descansar y poder asimilar así todo lo que el ojo percibe.
La comunicación ha de ser pausada, tener muchos elementos a la vez puede saturar a la persona. Y esto al final hará que tu tasa de conversión se reduzca.
6. Fotos, gráficos e iconos
Las fotos son importantísimas para los seres humanos y juegan un papel decisivo en la comunicación. Así que como te habrás imaginado, también afectan a la tasa de conversión de tu web.
Los seres humanos pensamos en imágenes.
Ejemplo práctico: «Era un paisaje completamente tropical. La playa de arena blanca y las aguas azul turquesa que se extendían hasta el horizonte solo eran interrumpidas a lo lejos por un fantástico velero blanco. Este era mecido dulcemente por las olas del mar”.
Que pastelazo te acabo de soltar, pero ¿qué ha pasado? ¿A que te lo has imaginado perfectamente en tu mente?
[bctt tweet=»Con las imágenes le ahorras tiempo al lector y lo guías para que entienda más rápido» username=»iviajera»]
“Una imagen vale más que mil palabras”. Entiende que cada uno de nosotros somos un filtro. Por ejemplo, la escena anterior cada uno la puede haber imaginado de una manera diferente.
Si tú pones las imágenes, estas consiguen imponer tu criterio y guiar al que las ve para que entienda lo que tú quieras.
Además leer toma un tiempo. Una imagen, un gráfico o un icono trabaja a nivel subconsciente. Ten en cuenta que desde bebé aprendiste a interpretar las imágenes mientras que a leer tuvieron que enseñarte.
Interpretar las imágenes es algo innato en ti.
7. Humaniza tu web
Este punto es totalmente complementario al punto anterior.
A las personas nos encanta ver personas. Somos seres empáticos y ver a otras personas nos transmite confianza. Nos ayuda a comprender al otro.
Este es un recurso que la publicidad usa hasta la saciedad. Por eso en los anuncios de la tele, revistas, etc, sólo ves a personas felices con cuerpos Danone.
Con esto te transportan a un estado equivalente al de las personas que estás viendo en las imágenes.
Del mismo modo que si se quiere transmitir una sensación de tristeza, basta con poner a una persona triste y de mirada perdida. Tachaaan tu subconsciente lo capta rápido.
Por eso es muy recomendable poner una foto tuya en la portada de tu web.
No se trata de hacerte pasar por un gurú. Es una mera cuestión de generar confianza y empatía. Ayuda a saber que quién está detrás de una web es una persona como tú que tiene anhelos, esperanzas y problemas.
En el caso de los viajeros inteligentes son muy importantes las fotos porque muestran cómo viajan por el mundo. Te enseñan esos sitios en los que tú has estado o deseas estar.
8. Jerarquía de la información
Esto es fundamental en toda comunicación. Cada cosa tiene su importancia, su momento de protagonismo y su función en la comunicación.
Por eso se requiere una jerarquía, especialmente en los textos.
- Titular : el titular es algo necesario en todo bloque de texto. Su función es captar la atención del que lo lee y que le interese seguir leyendo. Suele tener un corte sensacionalista y tiene que contrastar en tamaño con el resto de textos. A veces también en color (depende del contexto).
- Subtítulo y entradilla: el subtítulo tiene la función de ampliar un poco la información contenida en el titular y aumentar el interés del lector. Contrasta en tamaño porque tiene un menor tamaño que el titular (está por debajo en la jerarquía) pero ha de tener un tamaño mayor que el cuerpo. Y la entradilla es el primer párrafo.Su objetivo es incentivar todavía más el interés del lector para que siga leyendo.
- Cuerpo de texto: en el cuerpo de texto va nuestro contenido, la esencia de lo que queremos dar a entender. Aquí donde nos extendemos con explicaciones. Pero eso sí, siempre hay que intentar usar párrafos cortos, viñetas, subrayados, etc. Hay que evitar «ladrillos» de texto para que sea más fácil de asimilar.
- Llamada a la acción o call to action (CTA): ¿quieres aumentar tu tasa de conversión? Pues dile a tus lectores lo que tienen que hacer con una call to action. Está demostrado que cuanto más pidas más recibes, por lo que tendrás que usar mucho el imperativo en tus call to action. Usa verbos de acción como “Sí , quiero descargar el libro”, “¡Envíamelo, YA!» o «Compra ahora”, invitan al usuario a pasar a la acción.
Ten en cuenta que no en todas las secciones de tu web necesitarás usar todos estos elementos juntos. También, tendrás que combinarlos en función de lo que estés expresando.
Eso sí, ten en cuenta que está estructura de contenidos se usa en todo tipo de diseños (carteles, flyers, periódicos, revistas, televisión) y es superpoderosa.
Hay algo más en el diseño de una web que influye en la tasa de conversión
Además del diseño, hay otras cosas a nivel técnico que también influyen en la tasa de conversión. Según el estudio de la Universidad de Stanford que mencionamos al principio también afectan aspectos como:
1. El tiempo de carga de tu web
Dos motivos principales por los que el tiempo de carga es importante para tu web:
- Sí el lector ve que una web tarda mucho en cargar, se pira. Según algunos estudios, este tiempo está entre los 4 y los 6 segundos.
- Google es consciente del punto anterior y penaliza cualquier web que tarde más de 3 segundos en cargar.
En la solución a este problema hay muchas variables que debes vigilar:
- Tener cuidado con no usar temas muy pesados: no escojas plantillas con muchas funcionalidades. A la larga no las usarás y solo harás que tu tema se ralentice.
- Optimiza tus imágenes: sube las imágenes con el tamaño que tu tema requiera y optimízalas antes de subirlas.
- Usa un plugin de caché: estos plugins aceleran sustancialmente los tiempos de carga de tu web.
Si quieres saber la velocidad de carga de tu web y qué hace falta para optimizarla, hay varias herramientas que puedes usar. Te hacen un análisis exhaustivo de los tiempos de carga y te señalan como mejorarlos :
2. La experiencia de usuario
Es muy importante que el usuario sepa manejarse por tu web. Durante estos últimos años ha habido intentos de usar formas más creativas de navegación. Por ejemplo:
- Webs a pantalla completa.
- Webs con el scroll horizontal en vez de vertical.
Pero por suerte o por desgracia estas alternativas no han funcionado.
Cuanto más simple y común sea tu web (con unos límites claro está), más cómodos se sentirán tus lectores porque podrán moverse de forma intuitiva.
[bctt tweet=»Un diseño que necesita explicarse no sirve y se traduce en una tasa de conversión baja» username=»iviajera»]
Lo que mejor funciona es la ley del KISS (keep it simple and stupid): “mantenlo simple y estúpido”.
Por supuesto, las 8 técnicas que te expliqué ante te ayudarán a mejorar con creces la experiencia de usuario de tu blog.
3. Diseño responsive
Esto se supone que a estas alturas ya debía estar superado, pero la realidad es que no del todo. Como vimos antes, el diseño responsive es el que adapta tu web a cualquier dispositivo.
A día de hoy es muy importante porque más del 70% de la población tiene un móvil y navega con él. Ya hay más dispositivos móviles que dispositivos de escritorio.
Además, desde enero de 2017, Google penaliza todos las webs que no se vean bien en dispositivos móviles.
Por lo que si quieres que tu tasa de conversión mejore, más te vale que tengas este punto solucionado.
4. Testimonios de clientes
Los testimonios son fundamentales para que aumente el ratio de conversión.
Son pruebas firmes de que lo que haces es válido y que a otros les ha servido. Más aún si incluyes las fotos (recuerda la importancia de humanizar la web).
Ver a una persona como tú, de carne y hueso, a la que le han solucionado los mismos problemas que tienes tú es todo un punto de inflexión. Cuanto menos crea curiosidad.
Y si además consigues testimonios de influencers hablando de ti, tu credibilidad se disparará por las nubes. Y con ella tu tasa de conversión.
Empieza a mejorar hoy mismo las conversiones de tu web
Ahora no hagas de este post uno más y pasa a la acción. Haz un esquema práctico y anota todo lo que deberías cambiar en tu web para que tu tasa de conversión mejore. Recuerda lo que vimos antes, un diseño que solo es «bonito» no sirve de nada.
Si tienes cualquier duda acerca de todas estas técnicas que te he explicado o si crees que me he dejado algo en el tintero, no te cortes y comenta. Estoy deseando recibir tu feedback y ayudarte lo mejor que pueda.
¡¡¡Un fuerte abrazo!!!
22 respuestas
¡Muy bueno, Óscar!
Yo estoy intentando animarme con el diseño, y aunque sea un poco básico, de momento no es mi prioridad.
Más adelante lo consideraré, vamos ya lo tengo en mente pero quiero centrarme por ahora en otras movidillas… 😛
Lo que no dudes es que cuando me decida a renovar el diseño, visitaré este post en cero coma. Hay consejos que ya conocía, pero otros me van a venir como anillo al dedo.
¡Un saludo a ti y a Antonio! ^^
Muy buenas Javier,
Me alegro de que estos consejos te sirvan, te recomiendo los pongas en práctica lo antes que puedas, midas conversiones antes y después para que veas la evolución a medida que vas poniendo estas técnicas en práctica.
Un fuerte abrazo!!
¡Hola Oscar!
Yo también me dedico al diseño web y quiero comentar algunos puntos que he visto:
«Todo el mundo cree que el diseño es hacer que las cosas se vean bonitas, preciosas. Nada más lejos de la realidad. El objetivo del diseño no es otro que hacer que la comunicación cumpla con su función.»
Estoy de acuerdo contigo, una página tiene que ser sobre todo funcional. Pero siempre hay que buscar ese equilibrio. Una página web tiene que ser bonita, vistosa, puntualizando siempre en la funcionalidad. Si lo coches solo fueran funcionales, poca gente los compraría, por eso un buen coche deportivo siempre gusta mucho más. Por eso ahora mola más un iphone 7 que la batería se acaba en un día o menos que un Nokia de los tochos de antes que la batería te dura 3 días y aun que lo estamparas contra la pared no se rompía. Por eso pienso que tiene que haber un equilibrio entre funcionalidad y estética. Te dejo ejemplos que he diseñado yo, a mi parecer, son funcionales y estéticos a la vez:
http://www.sandrodesii.com/
http://www.blanxart.com/
http://manzaning.com/
Por otro lado, el punto que hablas sobre la jerarquía de la información. Cuando ya empiezo a tener unos bocetos claros del diseño que voy a realizar, me hago una tabla de: H1, H2, H3, H4, Body, Button text COMO MUCHO, incluso a veces no pongo H4. Me he fijado que en la Home de Inteligencia Viajera hay un total de 12 tipografías con diferente font-size. Mi consejo es que os miréis bien la coherencia en la jerarquía de la información y recudir esos 12 cuerpos de fuente a 5 como mucho, quedará mucho más limpia la página y más ordenada.
Por lo demás, he aprendido algunas cosas que no tenía en cuenta como la regla de los tercios y humanizar mucho más tu página web para crear más empatía con el usuario. ¡Muy interesante!
¡Un saludo Oscar y para ti también Antonio!
Muy buenas Ester!!!!
Ante todo mil gracias por un comentario tan elaborado y por tomarte el tiempo de escribirlo .
Felicitarte pues las Urls a los diseños que has incluido son preciosos.
Cuando Hablo de funcionalidad no pretendo quitarle importancia a la estética, para nada. A lo que me refiero es que la estética no puede primar ante la funcionalidad.
Desde el punto de las conversiones una web ha de ser funcional, para evitar un ratio de conversión bajo, lo más importante como digo en el artículo es tener un objetivo, y enfocar la propuesta de valor a ese objetivo.
Una propuesta de valor clara, se basa en ofrecer un beneficio o solución a un problema concreto y esta ha de quedar clara desde el principio.
Poniendo uno de los diseños que nos presentas http://www.sandrodesii.com es una web estéticamente sublime, pero cuando las visitas llegan a la web no se encuentran una propuesta de valor clara, si no un patrón creado a partir del logotipo.
El hero o cabecero principal, es lo primero que las visitas ven, desde mi experiencia tiene una tasa de conversión alta, por eso se requiere a las visitas a tomar acción desde el principio.
Teniendo en cuenta que el 80% de las visitas que llegan a nuestra web no vuelven, y que los usuarios tardan 0,5 segundos en conformarse una opinión de una web, si acabas en esta web, pues pretendes solucionar un problema, no ofreciendo un beneficio o solución al problema hace que la tasa de rebote nada más empezar ya sea potencialmente alta.
Una vez haces scroll te encuentras con un slider, el slider es uno de los elementos en las webs que más conversiones mata, especialmente en negocios con pocas visitas, teniendo en cuenta que claramente sigue sin mostrarse la solución al problema, la tasa de rebote sigue creciendo, ya que por regla general el segundo slide tiene una conversión de entre el 1% y el 3%.
En los call to action es importante tener un contraste claro ya que es justamente donde pretendemos que los usuarios tomen acción, por lo que hay que evitar que los textos se pierdan entre las imágenes de fondo, como pasa en la descarga de catálogos.
Es esto justo a lo que me refería cuando hablamos de sacrificar estética por funcionalidad.
A este respecto los test A/B en el mundo del diseño web son totalmente esclarecedores.
Respecto a la recomendación acerca los font-size en los diferentes cuerpos de texto, me lo apunto en el to-do para llevarlo a cabo tan pronto se pueda.
Muy agradecido por el consejo y un fuerte abrazo!!!!
Muchas gracias por tu comentario y las aclaraciones Óscar 🙂
Aquí también juega un factor importante y es el criterio del cliente. Si el cliente quiere un slider y se encabezona con ello, hay que ponerlo, ya puedes pelear con el que no lo conseguirás. Y más Sandro Desii, es muy duro de pelar este cocinero… jajaja
Los botones de CTA supongo que te refieres a los botones fantasma. Es un recurso bastante utilizado y esto también va a modas, en 2016 los botones fantasma eran muy punteros. También es difícil resaltar cuando la marca solo te deja incluir tonos blancos y negros.
De nuevo, muchas gracias por el comentario Óscar,
Un abrazo!
Ester ánimo con eso, que por las clientadas pasamos todos, la lástima es que con el gusto estético que tienes, no se aprovechen clientes como Sandro Dessii para obtener verdadera rentabilidad online.
Muchas gracias por el comentario.
Un fuerte abrazo!!!
Hola Oscar excelente post, el 99% de los casos los dueños de blogs/webs utilizan un diseño que le agrado por x motivos y desde ese momento cometen su primer error, el no pensar en que desde el diseño del blog hasta el mas minino detalle deber diseñado con la idea de agradar a cada visitante.
Y lo primordial que debe tener cualquier blog es el toque humanista como tú mismo lo dices de lo contrario se estará perdiendo el tiempo y dinero.
Un abrazo.
Que tal Eduardo!!!
Pues sí , la verdad que hay gente que prefiere un cuadro que vender, antepone sus gustos al bien de su negocio, La web no te tiene que gustar a tí, hay que construirla de cara a tus visitas.
Con esto no quiero decir que haya que hacerla fea, hay que hacerla funcional, creo que esta es la prioridad.
Humanizar la web es fundamental pues la gente no compra infoproductos, o no compra cosas, compra confianza, y esa la damos los seres humanos.
Un fuerte abrazo Eduardo!!!! Gracias por el comentario!!!!
Hola Antonio y Oscar
Bastante digerible y exacto este post, yo no soy muy experta en esto del diseño y ha sido un paso a paso ir dándole vida a nuestra web, desde cero… me detuve en cada uno de los pasos y leia lentamente por que a veces uno lee tantas cosas que ya tiene la cabeza revuelta.
Me parece que suena bastante interesante darle un tono mas justo, entre colores y medidas,pocas veces nos centramos en esta parte muchas veces la pasamos por alto o simplemente creemos que con poner varios colores, textos grandes y una llamada a la acción lo tenemos resuelto, pero lograr una web equilibrada creo yo sea tambien parte de aprender de un experto.
Excelente post, sera bueno considerar a muy muy corto plazo esta opción.
Saludos 🙂
Gracias Paulina !!!
Pues sí, hay que tener en consideración una serie de factores y fórmulas que al aplicarlas siempre funcionan.
EL diseño es como la vida necesita reposo en ocasiones y ritmo en otras, claridad y humanidad a la vez, si aplicas estos consejos, y sobre todo mides los resultados antes y después de aplicar, muy seguramente te llevarás una grata sorpresa.
Ánimo y aplicalo que el resultado va a ser muy positivo para tu negocio.
Un fuerte abrazo y gracias por comentar.
Brutal post, Oscar.
Incluso a mi que no tengo ni idea de diseño me ha parecido super-interesante y lamentablemente ahora veo muchos puntos en los que falla mi web, Que la estética no es todo era algo que intuía. Sin embargo hay cosas que pasan «behind the curtains» que ni sospechaba.
Keep it simple and stupid es mi nuevo mantra.
Un saludo!
Buenas Javier !!!!
MIl gracias, me alegro de que te guste.
La estética no lo es todo pero no la podemos olvidar, del mismo modo que no podemos sacrificar la funcionalidad en pro de la estética, el arte para los museos.
No te preocupes, que dentro de poco vas a encandilar a todos los opositores aplicando estos consejos.
Un fuerte abrazo!!! agradecido por tu comentario.
Genial artículo Óscar.
Hacer páginas web hoy en día está al alcance de cualquiera gracias a la facilidad que ofrece WordPress, pero lo que no es tan fácil es conseguir un bueno diseño en ellas, y mucho menos que sea efectivo a la hora de convertir.
Normalmente, la primera web que hace alguien suele salir como un churro (o eso fue en mi caso hace años), y no hay nada mejor cuando estás empezando que leer un artículo como este para conseguir buenos resultados desde el principio.
Lo cierto es que desde que descubrí Inteligencia viajera hace unos meses, me encantó como estaba distribuida la página de inicio, y me sirvió un poco de inspiración para crear mi reciente proyecto. Ahora veo que el culpable del diseño fuiste tú 😛
En serio, me encanta el trabajo realizado. Ahora me daré una vuelta por tu blog y lo guardaré en favoritos para no perderlo de vista.
¡Un saludo!
Me declaro culpable Sergio, jajajaja!!!
No te preocupes, si te enseño mi primera web se te deshilachan los calcetines y seguro que te arden los ojos.
Pues sí Sergio, hoy hacer una web está al alcance de cualquiera, esto es lo que mi profe de diseño llamaba la democratización del diseño, todos pueden diseñar, pero no todos pueden hacerlo igual.
Estas técnicas y más como estas son esos pequeños detalles que hay que aprender para diferenciarse del resto.
Dicen que el que no nace sabiendo aprende, por eso yo estoy en un continuo estado de aprendizaje, pa los restos.
Me alegro de que te guste el diseño de Inteligencia Viajera, y en mi blog te espero!!!
Un fuerte abrazo!!! y gracias por el comentario.
Hola Antonio, Óscar y demás lectores de Inteligencia Viajera,
como comenta Óscar en el artículo, la optimización de las imágenes es tremendamente importante.
En mi caso, no solía prestar mucha atención a este punto y subía imágenes por doquier a WordPress. Llenaba los servidores de fotos de tamaños desproporcionados… Malísima gestión.
Hasta que descubrí la inclusión de imágenes utilizando una URL externa.
Actualmente, me apoyo en la plataforma de Google Photos para insertar imágenes en los artículos de la web.
Aunque el tiempo de carga de la foto sea subóptimo –tenerla en el propio servidor siempre es más rápido–, creo que compensa el ahorro de espacio en el hosting.
La gracia de Google Photos es que, dese hace poquito, permite almacenar de forma ilimitada todas las imágenes que uno quiera. Así pues, en lugar de llenar los servidores del proveedor de hosting, utilizo los de Google. Y ni tan mal, oye.
🙂
¿Qué opinas Óscar acerca de esta opción?
Muy buenas Erik,
Pues nunca había oído hablar de está opción de alojar las imágenes en un servidor externo, había oído hablar de los CDNs que son redes de entrega de contenido, pero no de alguien que directamente las aloja en Google Photos y las carga mediante la url..
Me pregunto si esta práctica estará bien vista por google a nivel de SEO, si no tendrá repercusión a la hora de indexar tus imágenes, ya que están en un dominio aparte.
De cualquier forma, creo que sigues teniendo un problema, si esas imágenes siguen sobre dimensionadas, pero en otro servidor, lo recomendable es usar las imágenes a la medida justa que wordpress las requiera, es decir si tu imagen destacada, ha de medir 740×370 y tu subes una al servidor de 2880×1340 esa imagen por mucho que esté en un servidor a parte está sobredimensionada.
WordPress por defecto recorta las imágenes a las medidas que necesita, tiene tamaños predeterminados en los que se basa y los temas (por lo menos yo lo hago en los que yo creo) pueden llevar tamaños customizados adaptados a esos diseños, es decir la imagen destacada de este post tiene un tamaño específico al que se crea y posteriormente wordpress crea una al tamaño exacto que necesita.
Cierto es que cuantos más recortes más peso lleva el servidor, pero sigo sin tener claro si esto de albergar las imágenes fuera es beneficioso a nivel de optimización y de SEO.
Mil gracias por el comentario Erik, Un fuerte abrazo!!!
Hola Óscar,
muchas gracias por la inmediatez de la respuesta y amabilidad.
Tienes toda la razón, las imágenes que se añaden de forma externa suelen estar sobredimensionadas.
Pero lo que mola de Google Photos es que, comprime hasta tal punto las imágenes, que una foto de 2880×1340 ocupa prácticamente lo mismo que una de 740×370 –siguiendo con el ejemplo que has puesto–.
Por lo que la velocidad de carga de las fotos no se ve prácticamente afectada.
Además, otra ventaja es que con el uso de una URL externa, no se crean las 3 copias de la misma foto típicas de WordPress –totalmente ineficiente, redundante y molesto–.
En cuanto a SEO, no soy ningún experto, pero los campos de las fotografías son idénticos a los de una imagen corriente subida al servidor de manera tradicional (título, leyenda y alternativo).
Por ello, me parecería extraño que hubiese perjuicio en temas de indexación.
De hecho, me viene a la cabeza la inserción de un vídeo de YouTube mediante URL externa. En ese caso, no existe ningún tipo de penalización SEO por esa acción.
Entiendo que, para imágenes externas usando Google Photos debería ocurrir algo similar. Pero insisto en que no soy ningún experto…
De todos modos, creo que Google se estaría disparando al pie, si penalizase aquellas webs que utilizan su servicio propio –Google Photos– para la inclusión de imágenes.
¡Un saludo!
Buenas Erik,
Siento haberme demorado tanto en responderte, pero no recibí la notificación.
El caso es que cuando leí tu comentario anterior, lo primero que hice fue documentarme, y buscar en todos los foros relacionados, lo que encontré fue un montón de opiniones diferentes y todo tipo de argumentos, que consideré lógicos por ambas partes.
Como por ejemplo el que tu expones de que google no se dispararía en su propio pie.
Como no me creo poseedor de la verdad en ninguno de los casos, sólo me resta experimentación, probarlo y sacar conclusiones.
En una cosa si quiero dar mi opinión, de cualquier forma si usas el tamaño de las fotos adecuado, incluso si las alojas en google fotos ahorrarias tiempo de carga.
Respecto a la mención que haces de que no se crean 3 copias y que esto es completamente ineficiente , por un lado pienso que si que lo es pues normalmente cada copia es para mostrarla en un momento diferente, por lo que volveríamos a lo mismo, una foto más pequeña esté alojada donde esté, siempre pesará menos , pues contendrá menos información.
Un abrazote y gracias por el comentario.
Hola Oscar!
Eres un pedazo de crack! Me encanta como lo has explicado todo, y he aprendido mucho.
Lo que más me gusta de tus diseños es que son simples (y a la vez currados) y trasmiten mucho.
Un abrazo! Cuidate mucho!
Mil gracias David,
Me vas poner como un tomate e hinchao como un sapo.
No sé si tanto, lo que sí te puedo decir es que disfruto mucho haciendo lo que hago, y me siento muy contento de poder vivir de ello.
Un fuerte abrazo!!! te deseo lo mejor !!!!
Muy útil el post Oscar, me ha ayudado mucho a repensarme un par de cosas. He estado haciendo mi blog en modo DIY desde hace poco y creo que es buen momento para corregir un par de errores que noté que tengo.
Sólo una duda, a partir de qué diseñas la regla de los 3? pensando en movil o web? yo hago mi diseño con un front end builder y aunque es responsivo a veces en movil se ven las cosas diferentes de como las diseñé originalmente.
Saludos.
Buenas Yaz,
Ten en cuenta que la regla de los tercios es aplicable incluso a una sóla foto, es imposible literalmente que controles todas las posiciones, pero en el móvil normalmente si lo has partido en dos columnas cada columna se pondrá al 100 % has de intentar que las composiciones referentes a ambas columnas que den lo más centradas posibles para que la regla de los tercios siga aplicando.
Normalmente pienso más en la regla de los tercios al diseñar para escritorio, y posteriormente lo adapto al móvil si se sale de madre.
Espero haber respondido tu pregunta.