Llegar a una web y ver que nada tiene sentido o que el aspecto es tan feo espanta a cualquiera, es un grave problema y hoy en día existe la formula de como crear un blog atractivo sin apenas esfuerzo y es completamente posible.
Como decía mi profesor de diseño vivimos en la época del Nesquik instantáneo, de la democratización del diseño.
Cualquiera tiene a su alcance todos los medios necesarios para diseñar sin apenas hacer esfuerzo con herramientas como:
Cualquiera que quiera crear una web tiene miles de recursos CMS’s (gestores de contenido) como:
Temas o plantillas
- Themeforest
- Elegant Themes (link de afiliado)
- Genesis Framework de Studiopress (link de afiliado).
- Creative market
- etc
Con lo fácil que es todo: “Como crear un blog en tan solo 5 minutos”, fácil de usar e instalar “, “hazlo en tres simples pasos ”…..
Pues todavía a día de hoy con todos los medios que hay a disposición de cualquiera, aun así hay sitios que tiran para atrás nada más entrar.
Aquí te explico como hacerlo:Blog: móntalo en tres simples pasos.
Hay una serie de cosas muy básicas que hay que tener en cuenta a la hora de vender y más aquellos que nos dedicamos a cualquier rama del marketing digital.
Las imágenes con las que voy a ilustrar el post no son agradables de ver, pero son de webs que están actualmente online y que han sido realizadas por una empresa que supuestamente se dedica al diseño web.
No pretendo ofender a nadie sino más bien ilustrar qué cosas no se deben hacer.
Un caso verídico
Para ilustrar esta escena voy a contar una experiencia personal con un cliente, este me pidió presupuesto.
Le preparé el presupuesto basándome en lo que decía que necesitaba, como podréis imaginar me pedía de todo.
Total, me citó para cerrar la negociación, y lo primero que hace cuando nos reunimos, es enseñarme otro presupuesto de otro diseñador, diseñador que le pedía cinco veces menos que yo y tardaba en entregarle el trabajo infinitamente menos que yo, tardaba tan poco…., que ya tenía hecha la web.
Me la enseño con la cara radiante, y me miraba como diciendo, ¿porque no has hecho tú lo mismo? ¿Dónde está la web que me vas a vender?
Imagínate, me quedé a cuadros….
Nada más ver la web, se me deshilacharon los calcetines de golpe, los ojos me empezaron a arder, se me creo una úlcera en el estómago al instante.
Lo primero que se vino a mi cabeza fue “¡¡Me cago en la puta!! ¿ Pero qué hago aquí ?“
Lo mejor de todo es que la web estaba hecha con un WordPress y tenía un tema normal, al que cualquier diseñador mediocre le podía sacar bastante partido por lo menos para conseguir un diseño sin hacer mucho esfuerzo que fuera medianamente visible, y este hombre la había convertido en una web estilo 1998.
Errores sacados de 1998 que no te puedes permitir si quieres aprender como crear un blog.
Tipografías:
Si te fijas en la foto de la web de la ferretería que he puesto arriba, verás que los textos son cada uno de su padre o de su madre, no tienen sentido: Unos están centrados, otros alineados a la izquierda y algunos encabezados son más pequeños que los textos del contenido.
Por esto has de tener en cuenta varias cosas a la hora de usar tipografías en la web:
- Jerarquía: Es muy importante diferenciar los tamaños de texto entre los encabezados y el cuerpo, cada uno tienen distinta importancia por lo que han de tener distintos tamaños.
- Tamaño : Si algo he aprendido en todos estos años es que no todos tenemos la vista igual, agraciadamente, yo no tengo problemas , pero hay personas que sí, entonces tendrás que hacer uso de un tamaño adecuado de fuente para que todo el mundo pueda leerte, el que a mí me enseñaron cuando aprendí el oficio estaba entre los 12px y los 14px, pero la experiencia me ha enseñado que el ideal está entre los 16px y los 18px.
- Espacio entre líneas : el espacio entre líneas aumenta la legibilidad de tus contenidos conviene que lo aumentes un poco.
- Espacio entre letras: al igual que el anterior es algo que puede mejorar la legibilidad de tus contenidos y no cuesta nada abrirlo un poco.
- Contraste: Asegúrate de que el color de fuente que usas tiene un alto contraste en comparación con el fondo de tu web, lo ideal es un color de texto negro sobre un fondo blanco, se supone es una de las mejores combinaciones para favorecer la lectura de tus contenidos.
Imágenes:
Las imágenes son una de las cosas más importantes a la hora de usarlas en nuestra web, ya que los seres humanos, somos súper visuales, de hecho pensamos en imágenes.
Para que entiendas esto, me remito al caso anterior, al que te he contado, en el que te hablaba de mi cliente, ¿a qué te has conformado la escena en tu cabeza?, como si de una peli se tratase.
Pues imagínate el poder que posee una imagen, de un vistazo puedes hacer entender a cualquiera un concepto sin siquiera mediar palabra, por eso tienes que cuidarlas ¿Cómo?
- Nunca redimensiones sin mantener las proporciones de la imagen, todavía hay gente que se salta esto a día de hoy, nunca y digo nunca modifiques una imagen sin mantener sus proporciones, este es uno de los peores errores que puedes cometer, desvirtuaría totalmente el significado de la imagen. Por suerte en la web y en especial en WordPress los temas vienen preparados para aumentar proporcionalmente las imágenes, aun así hay quien rompe las proporciones antes de subirlas, durante la edición y es ahí cuando no hay posibilidad de escape, una vez deformado el original no hay nada que hacer. Observa el ejemplo de la imagen de la web de Good Godis observa la foto de la niña y verás que está estirada.
- Tamaño estándar para cada sección: ya sea en un post o en una página de tu blog, intenta usar el mismo tamaño de imagen esto dota de ritmo y simetría a la composición. Fijate en la foto de la web de la ferretería que hay arriba y fijate que hay fotos en la misma sección con tamaños diferentes incluso algunas tienen bordes y otras no.
- Alineación: alinea siempre tus imágenes este principio va de la mano con el anterior, ambos crear y dotan de coherencia a cualquier proyecto ya que fomentan la simetría y esto hace que la web resulte más atractiva
- Imágenes en el fondo: No digo que no pongas imágenes como fondo de tu web pero usa imágenes con sentido y sensibilidad, usar una imagen que finalmente no se va a ver y que corta el ambiente más que crearlo, puede minar tu credibilidad
Colores:
Intenta usar colores que combinen entre sí, normalmente se usan los colores corporativos, los de tu logo, esto ayuda a mantener una determinada coherencia entre las distintas secciones de la web y hacen que el usuario no se sienta desconectado mientras navega por tu web.
Un correcto uso de los colores puede conseguir focalizar las zonas de interés en las que quieres que tus visitantes incidan tales como, cajas de subscripción, llamadas a la acción.
El uso de la paleta correcta va a beneficiar y mucho tus conversiones hay un montón de herramientas online que pueden ayudarte a crear una paleta de colores poderosa e infalible
[thrive_leads id=’632′]
Márgenes y alineación
Uno de los mayores errores en la mayoría de las webs es no respetar la alineación y los márgenes.
Cierto es que actualmente gran número de plantillas, vienen preparadas para que sea muy difícil saltarse este tipo de principios, pero el caso es que sigue pasando.
Los elementos han de guardar los mismos márgenes entre sí es decir cada elemento tiene que tener el mismo margen (distancia entre elementos) por arriba y por abajo, si por arriba tiene una separación de 20 pixeles por abajo ha de tener también 20 píxeles
Idem de izquierda a derecha cada elemento ha de tener la misma separación entre sí, tanto por la izquierda como por la derecha, tanto los elementos individuales, como los bloques, el conjunto de la página.
Mantener todo alineado y respetando los márgenes da sensación de orden, crea armonía y dota de simetría esto favorece la lectura, aumenta el tiempo de permanencia en la página web y por consiguiente mejora las conversiones.
Como solucionar o fomentar esto, usa los sistemas de columnas que vengan por defecto en tu plantilla de WordPress hay muchas plantillas basadas en bootstrap o foundation o cualquier otro framework html en esta línea.
En caso de que la tuya no los tenga o aunque los tenga quieres mejorar la forma en la que creas tus páginas o tus contenidos es instalarte un editor visual hay algunos muy buenos
Te dejo algunos que he probado, funcionan muy bien y que son muy fáciles de usar:
- Site Origin Page builder (Gratuito): Editor visual que mejora el editor visual por defecto de WordPress y que te permite tener un amplio control sobre el diseño de tu página.
- Divi content builder (link de afiliado): Editor visual premium de la casa Elegant Themes, es el núcleo central de la potencia de su tema premium DIVI y que facilita mucho la creación de contenidos, un plugin que funciona con cualquier tema
- Thrive content builder (Link de afiliado): Este es un editor premium en tiempo real que funciona con cualquier tema de WordPress, es decir te permite ver cual será el resultado final en todo momento de tu página o post mientras lo editas, una forma súper cómoda de trabajar, aparte viene con muchas plantillas y landing pages integradas así como numerosos estilos y módulos.
- Beaver Builder Lite (Gratuito): Otro live editor, para mi gusto es el que mejor funciona, es el menos intrusivo no carga módulos o estilos innecesarios a menos de que los uses, es decir sólo carga estilos y scripts en función de los módulos que vas cargando en el diseño, si no usas el slider no te carga los scripts y estilos necesarios para este, tiene una versión premium (Link de afiliado) que viene con un montón de plantillas y la posibilidad de guardar y exportar las que tu diseñes.
El logo
No podía dejar la oportunidad de hablar de los logos en este post, es muy importante respetarlos e intentar siempre usarlos de la forma adecuada, hay gente que esto se lo salta, con demasiada facilidad, especialmente a la hora de montar su página web.
El logo es una de las piezas más importantes dentro de la comunicación de una marca ya que la representa por completo en todas partes donde se haga mención a la empresa.
Puedes aprender más sobre este en este post: Crear un logo, claves para crear uno perfecto para tu proyecto
Bien usan plantillas con colores que no favorecen nada a su logo, o los insertan como si de un parche se tratase. Haciendo que este quede desmerecido por completo.
Lo suyo en la mayoría de los casos es usar un png sin fondo (con fondo transparente) o ponerle el mismo color de fondo que nuestra web mediante nuestro programa de edición de imágenes favorito.
Contador de visitas
Los contadores de visita hace tiempo que pasaron de moda, aparte de que normalmente cuentan cada vez que recarga la página y lo hacen indiscriminadamente.
Incluso pueden llegar a perjudicarte si tienes pocas visitas.
Concordancia entre las diferentes secciones de tu web
Toda la web en si tiene que guardar una cierta homogeneidad, de forma que cuando el visitante cambie de sección no se sienta desubicado, es decir que cuando pasa de la página de inicio a la página contacto no sienta como si hubiera atravesado un portal dimensional, dimensión en la que la gente anda con las orejas y como escucha con los pies, no sé si me sigues.
No digo que no cambies los colores de fondo o un poco la estructura, pero has de seguir manteniendo una serie de elementos en común con el resto de las secciones de tu web, precisamente para que el usuario no pierda la noción de donde está en todo momento.
Te he dejado una serie de consejos sobre errores que puedes evitar a la hora de crear un blog , espero te sirvan y las pongas en práctica, aún así es posible que me haya dejado algo alguno en el tintero, no dudes en comentarlo, también estaría muy bien saber cual es tu opinión al respecto de mi artículo.
Un abrazote!!!
Muchas gracias, Oscar. Tengo algunas cosas que mejorar en mi blog. No todo lo da la plantilla. Ahora lo he entendido.
Buenas Anabel!!!!
Hay muchas cosas que tenemos que controlar, imágenes, tipografías, colores, las plantillas son preciosas y las hay muy baratas, pero la plantilla no lo es todo.
Abrazote!!!!
Muchas gracias por el artículo.
Yo también tomo nota de cambios que debo realizar en mi blog. Gracias por compartir la información.
Gracias a ti por pasarte a leerlo, es un placer compartir, fuerte abrazo!!!