26 Dic Cómo organizarte para crear una web en WordPress

Organizarte para crear una web en WordPress puede acortar en gran medida el tiempo que tardas en tener una web terminada. Cuando empiezas de cero a diseñar una web WordPress, te enfrentas a la gestión de un sinfín de detalles y de toma de decisiones antes de siquiera darle al botón para lanzar oficialmente tu web. A eso se añade la curva de aprendizaje para manejar una serie de herramientas que te van a facilitar el trabajo. Si encima vas a escribir los textos y a conseguir las fotos, vete preparándote. Necesitas tener una organización de trabajo para crear una web en WordPress.

Empecemos reconociendo algo: los comienzos son complicados. Y si empiezas a diseñar tu web, el asunto puede llegar a abrumar. ¿Por dónde empiezas? ¿Cómo te organizas? Si, encima, te vas a encargar de escribir los textos y conseguir las fotos porque es un proyecto personal que quieres sacar adelante, el trabajo se amontona.

¿Todo eso y en cuánto tiempo hay que tenerlo listo?

¿Cómo puedes evitarte dolores de cabeza y perder tiempo valioso? Planificando de antemano cada paso, y dejando una puerta abierta a modificar sobre la marcha. Con los consejos y herramientas que encontrarás más abajo, podrás crear una web en WordPress en menos tiempo y con menos dolores de cabeza de los que te imaginas.

¡Empecemos!

Haz un boceto de tu web

Dibújala. Sí, tal cual. Coge papel y lápiz y empieza a dibujar donde vas a poner cada elemento de tu web. Donde irá el menú, si será o no desplegable, si tendrás iconos y dónde pondrás el logotipo. El título de la página donde va a ir, los bloques de contenido, los CTA y a qué páginas van a redirigir, …

Ventaja: te ayudará a decidir cómo quieres organizar tu web visualmente y a identificar qué necesidades técnicas y de diseño gráfico vas a tener.

Desventaja: te llevará algo de tiempo, sobre todo si empiezas en esto del diseño web, pero a la larga tu productividad será mucho mayor al eliminar dudas, errores o retrasos por no haber previsto algún elemento o estar cambiando de opinión cada dos por tres.

Hacer un boceto, o un wireframe, te ayudará a ver si tu web es fácil de usar o no. Ojo, eso no te exime luego de hacer pruebas y de ir mejorándola cuando la lances. Si no sabes ni por dónde empezar, Wirify es una interesante herramienta que revela los wireframe de las webs. Te permitirá ver cómo lo hacen en otras webs. Ojo, si usas Chrome, tendrás que realizar un paso adicional para poder usarlo (no es difícil).

Puedes bocetar tu web usando lápiz y papel o empleando herramientas digitales. La mayoría son de pago y algunas son más complejas que otras al añadir funcionalidades para flujos de trabajo, diseño de apps, coordinación entre equipos de diseño y desarrollo, etc. Si el lápiz y papel se te ha quedado pequeño y quieres probar, te recomiendo eches un vistazo a estas herramientas:

• • Figma – Es muy completa y te permitirá diseñar un wireframe sencillo o uno más complejo y compartirlo con tu equipo. Lleva un tiempo familiarizarse con Figma pero Envato tiene tutoriales muy buenos que pueden ayudarte. Puedes abrir una cuenta limitada gratuita y si quieres añadir funciones, hay que pagar una cuota mensual.
  • Balsamiq – Es de pago, aunque tienes un período de prueba gratuita. Te permite diseñar wireframes básicos para que puedas centrarte en cómo distribuir la información y estructurar tu web.
  • Mockplus – Te ofrece una variedad de herramientas y posibilidades para diseñar desde una web a una app o flujos de trabajo. Eso sí, tiene un período de prueba tras el cual toca pagar.
  • Webflow – Muy intuitiva, con un tutorial que te enseña a bocetar en apenas unos minutos. Tiene una versión gratuita que no está nada mal con sus limitaciones.
  • Penpot – Es de código libre y de acceso gratuito. Nada de pagar como en las anteriores opciones. Te permite realizar bocetos de tu web o app, compartir con tu equipo y colaborar. Creado por Kaleidos y lanzado este 2021, Penpot es una herramienta con un potencial enorme.

Todas estas herramientas tienen una curva de aprendizaje. Es decir, tendrás que dedicar tiempo para aprender a hacer un boceto de tu web.

Si solo vas a crear tu web en WordPress y poco más, mi recomendación es que hagas el boceto de tu web con lápiz y papel. Es el método más barato y no requiere invertir tiempo en aprender a usar la herramienta. Y piensa siempre primero en el diseño responsive (para móviles y tablets).

Lo que sí te permiten estas herramientas es presentar el boceto de tu web de una manera mucho más limpia y profesional, además de permitir la interacción de miembros de tu equipo para incorporar ideas o cambios en el diseño o la interfaz.

Elige una paleta de colores

No te vuelvas loco con poner colorines. Para crear una web en WordPress, empieza por algo básico y ya lo irás complicando luego. Determina tu color principal y después los que le acompañan. Cuando empieces a mirar paletas, te encontrarás con términos como colores primarios, secundarios, terciarios, que si RGB o CMYK, que si tríadas de colores, etc. No te agobies, por aquí te dejo un artículo de Graffica donde lo explican muy bien.

No elijas tu color en base a tus gustos sino a las emociones o valores que transmiten. Elige colores que te representen a ti o a tu negocio. Las mejores combinaciones no suelen superar los 3 colores.

Además, ten en cuenta que los colores deben respetar tu identidad corporativa o la de tu cliente. Si tu cliente tiene un manual de identidad corporativa, te facilitará el trabajo. Si no la tiene, mi recomendación es que contrate a un diseñador gráfico para que la desarrolle.

Decide cómo vas a usar los colores de tu paleta, qué color emplearás para destacar contenido, para los CTA, cuál para fondos, etc… Te evitará ir haciendo pruebas más tarde para ver qué funciona y qué no. Hazlo ahora y ahórrate los dolores de cabeza después.

Algunas herramientas que puedes emplear a la hora de escoger colores y crear una paleta son:

• • Colorable – Comprueba que los colores que has elegido para texto y fondo tengan el contraste suficiente para personas con problemas de accesibilidad (según los criterios WCAG). Si lo cuidas, ofrecerás una mejor experiencia al usuario de tu web.
  • Contrast-Finder– Hace lo mismo que la anterior, pero te da un poco más de información y te ofrece colores alternativos.
  • Coolors – Una de mis preferidas. Te permite crear una paleta de colores y customizarla. Puedes elegir el número de colores con los que quieres trabajar y te ofrece opciones aleatorias para que tu elijas. O también, puedes acceder a un sinfín de paletas creadas por otros usuarios. Puedes exportar tu paleta a PDF.
  • Adobe Color – Te permite elegir tu paleta teniendo en cuenta el contraste de los colores y cómo lo van a ver personas con daltonismo. Te analiza el contraste para texto grande y normal y para elementos gráficos.
  • Material Palette – Escoges dos colores y te ofrece dos paletas, así como un ejemplo de cómo quedaría en un diseño. No ofrece información en cuanto a accesibilidad como otras herramientas.

Y, como guinda, si te gusta mucho un color que ves en una web, ColorZilla es un complemento de Chrome que identifica ese color en tu pantalla y con solo darle un click te lo copia al portapapeles.

Recopila los plugins que vas a necesitar para crear tu web en WordPress

Los plugins son códigos adicionales que mejoran o añaden funcionalidades a tu CMS. Con ellos puedes añadir botones para compartir en redes sociales, controlar los comentarios SPAM en tu web, mejorar las funciones de maquetación, añadir funciones SEO, etc.

Cuando empieces a trabajar en el boceto de tu web, probablemente saldrán elementos que quieres incluir, como los botones sociales. Necesitarás un plugin que te permita compartir esos contenidos de valor de tu blog. También querrás que tu web sea rápida para que Google no la penalice en las búsquedas de tus potenciales clientes, así que necesitas otro plugin que optimice la velocidad de tu web. Otro plugin para optimizar las fotos, que sí, también hay que optimizarlas para que no pesen demasiado. Otro para el spam, … Ya te haces una idea, ¿no?

No esperes hasta casi el final para decidir implantar un plugin que podía haberte hecho la vida más fácil desde el principio. Investiga qué plugins se ajustan más a las necesidades de tu web y a tu presupuesto. Ponlos a prueba y escoge el que mejor se adapte a tu proyecto.

Te pongo algunos ejemplos:

• • Maquetación: WPBakery, Elementor, Thrive, Divi…
  • SEO: Yoast SEO, RankMath, All in one SEO, The SEO Framework…
  • Optimización: WP Rocket, WP Super Cache, Autoptimize,…
  • Formularios: Contact Form 7
  • Social: Monarch, Better Click to Tweet…

La lista sigue y sigue. Algunos son de pago, otros son gratuitos. Vigila que el plugin que quieres instalar sea compatible con tu versión de WordPress y que se haya actualizado recientemente. Si el plugin que quieres instalar está sin actualizar desde hace meses o incluso años, no te lo recomiendo. Busca una alternativa más reciente.

Cada diseñador web tiene sus plugins favoritos. Yo, por ejemplo, en esta web tengo WPBakery Page Builder para maquetación, Monarch o Better Click To Tweet para compartir contenido, y Contact Form 7 para el formulario de contacto.

Importante: no instales plugins que hacen la misma función o parte de la función de otro. Ralentizará tu web y puede causar conflictos en tu instalación. Lee detenidamente qué funciones hace cada uno y elige el que mejor se adapta a tu proyecto y presupuesto. Ah, y una vez instalados, mantenlos actualizados.

Instala solo aquellos que sean necesarios y vigila de cerca cómo afectan al rendimiento de tu web.

Elige un tema versátil

A la hora de crear una web en WordPress, tan importante como elegir un plugin de maquetación es elegir el tema correcto. El tema es un conjunto de archivos que determinan el aspecto y funciones de tu web.

Existen muchos temas gratuitos, pero ofrecen soluciones, asistencia y personalización limitadas. Si luego quieres que tu web tenga otras funciones, o añadir otros elementos, tocará contratar a un desarrollador web para que cree el código. O cambiar de tema y volver a rediseñar. Es decir, lo barato sale caro.

Mi recomendación es invertir esos 50 a 60 euros en un tema, adquiriendo una licencia que te va a proporcionar actualizaciones gratuitas, con multitud de opciones de diseño y código además de asistencia en caso de tener algún problema. Si quieres una web escalable, que esté actualizada (por eso de los parches de seguridad y las funcionalidades que puedan añadir), conviene comprar una licencia. Además, muchas vienen con un plugin de maquetación ya por defecto (WPBakery, Elementor, Divi, etc.)

Pero, ¿qué tema escoger? Uno que te de flexibilidad y espacio suficiente para crecer y personalizar tu web. Por ejemplo, yo uso Bridge que te permite elegir entre 610 demos y puedes adaptarla a casi cualquier negocio o servicio.

Si quieres ver qué tipo de temas hay, puedes entrar a Theme Forest, donde podrás ver una gran variedad de temas y precios. Mi recomendación es que, además de ver las funcionalidades que ofrecen, te fijes en 3 indicadores: número de demos que contiene, número de descargas, y puntuación de usuarios.

Textos y fotos para crear tu web en WordPress

Si trabajas con un cliente, es éste quien tiene que proporcionarte los textos y fotos. Deja claro desde el principio que, en caso de ser necesario modificarlos, corre a cargo del cliente y no de ti.

Recuerda que puede que seas capaz de escribir bien, pero una cosa es saber expresarte por escrito y otra muy distinta es escribir copy. Se trata de persuadir a tu potencial cliente en un par de líneas, de conseguir que permanezca más tiempo en tu web, que siga leyendo e interactuando, y conseguir así una conversión.

Lo mismo sucede con las fotos. Lo ideal sería que las fotos fuesen originales. Es tu forma de destacar. Ten en cuenta que Google tiene muy controladas las fotos de los bancos de imágenes. Si tiras de estos bancos y alguien hace una búsqueda por imagen de una foto de tu web, aparecerán “tropecientas” webs con tu misma foto. No es la mejor forma de destacar, ¿no crees?

Aun así, no hay nada malo en usar imágenes de bancos tipo Pexels, Unsplash, Stockphoto, o Pixabay. Algunas son de pago y otras gratuitas. Pero acuérdate de incluir siempre algunas fotos propias para darle ese toque personal. Ah, y no te olvides de acreditar de dónde has sacado las fotos.

Un recordatorio: aunque lo ideal es contar con fotos de alta resolución, recuerda que Google premia la velocidad y las fotos pesan mucho. Si quieres que no te perjudique, optimízalas. No hace falta subir una foto de 1900 píxeles de ancho si luego la vas a poner a 400 píxeles. Puedes optimizar las imágenes manualmente o con algunos de estos plugins: Smush, Compressor.io o Imagify, entre otros muchos.

Crea tu propia librería de elementos de diseño

Vale, ya tienes tu boceto para crear una web en WordPress. A buen seguro también tendrás una mejor idea de qué elementos de diseño vas a necesitar y el aspecto final y funcionalidades que quieres para tu web. Ahora es el momento de crear una pequeña librería con esos elementos. ¿Para qué? Para gestionar mejor tu tiempo a la hora de maquetar.

Con WPBakery, cuentas con Templatera, un plugin que te ofrece la posibilidad de crear elementos que sabes que se van a repetir en varias de tus páginas y diseñar una plantilla (como un elemento único) que solo tienes que importar después. Un ejemplo: tienes una caja donde aparecen tus datos de contacto (dirección, teléfonos, etc.). Si cambias de teléfono, tendrías que ir página a página cambiando el número manualmente. Con Templatera, solo tienes que cambiar la plantilla que has hecho y lo actualiza en todas aquellas páginas donde tú tengas ese elemento.

También te encontrarás que quieres reutilizar un diseño una y otra vez. Por ejemplo, para dar uniformidad a las cabeceras en cada una de tus páginas. Para no tener que repetir una y otra vez la maquetación, puedes usar WPBakery Page Builder (Visual Composer) Clipboard de CodeCanyon. Es un plugin que te permite hacer el corta-pega de toda la vida. Copias una fila y la pegas donde la necesites, luego solo tienes que cambiar el texto o adaptar el color.

Existen una gran variedad de plugins que añaden funcionalidad y te permiten agilizar el trabajo, pero, como he dicho anteriormente, elige muy bien el plugin que necesitas, testealo, y evita duplicidades con otros plugins.

Importante: Crear tu propia librería de elementos para WPBakery, te permitirá luego incorporarlo rápidamente a otras páginas y webs con lo que ahorrarás tiempo de maquetación que podrás emplear en otras tareas.

Optimización

Queda un último paso para crear tu web en WordPress. Una vez tengas ya maquetada tu web, instalado y configurado correctamente los plugins, subido los textos y fotos, toca optimizar la web (las fotos, el código CSS, y los plugins que ya no vas a usar). El objetivo es aligerar tu web en la medida de lo posible para aumentar su velocidad.

Esto implica eliminar todos los recursos gráficos de la plantilla con la que trabajes, eliminar las páginas, el portfolio, los comentarios, las fotos e iconos, etc. de la demo y cualquier otro elemento gráfico que has ido subiendo y que, por la razón que sea, NO usas en tu web. También tendrás que desactivar primero y borrar después todos aquellos plugins que no sean estrictamente necesarios. Por ejemplo: el WPBakery clipboard no te va a hacer falta una vez que tu web esté lista.

Para estos plugins de optimización es recomendable activarlos al final, cuando ya has terminado la maquetación. Herramientas que puedes usar para optimizar tu web: WP Rocket, WP Super Cache, Autoptimize,…

Nunca te olvides del SEO antes de lanzar tu web. (Foto: Freepik)

Una optimización muy importante: prepara tu web para SEO. Recuerda que tus URL deben ser amigables y deben contener la palabra clave más importante en la que quieres posicionarte. Cuida tus palabras clave y sitúalas de manera estratégica.

Haz pruebas con el SERP Simulator de Google, por ejemplo, para saber cómo aparecerán las distintas páginas de tu web a la hora de hacer una búsqueda orgánica. Ojo, que tu SERP tenga buena pinta no te asegura ni mucho menos que vayas a colocarte en la primera página en una búsqueda orgánica. Para eso, necesitarás estudiar y optimizar tus palabras clave, optimizar la velocidad de tu web, crear contenido de valor a través de un blog y difundirlo en redes sociales para atraer tráfico, y, sobre todo, tiempo y trabajo constante a lo largo de meses.

Conclusión

Diseñar y maquetar una web es cada vez más fácil, pero requiere tiempo. Tiempo para adquirir los conocimientos necesarios y la soltura necesaria. Tiempo para diseñar y maquetar tu web, de ahí la importancia de la gestión de tiempo y tener un método de trabajo. Y, por último, tiempo para mantener esa web viva. Es decir, conviene crear contenido de valor para tu blog y difundirlo en redes sociales.

Recuerda que tu web forma parte de tu estrategia de comunicación y marketing. Es una herramienta más dentro de un plan para conseguir tu objetivo. No es algo que se cuelga sin más y ya está. Tu página web es el corazón de tu identidad corporativa digital. Te representa a ti o a tu empresa. Tener una web sin mantenerla ni cuidarla es el equivalente a tener un escaparate y no limpiar jamás los cristales ni cambiar la decoración.

Hoy en día, crear una web en WordPress está al alcance de muchas personas. Solo requiere tiempo y algo de dinero. Para sacar el máximo provecho, lo ideal es tener una metodología de trabajo que te permita ser lo más eficaz posible.

Y tú, ¿cuál es tu método de trabajo?