Cómo diseñar una página web

Si algo no ha cambiado en estos últimos 30 años es que los usuarios, sobre todo emprendedores y empresas, necesitan un sitio web para dar visibilidad a sus proyectos, productos o servicios, y de alguna manera esto seguirá invariable en el tiempo.

Esta Navidad, regala sueños. Planes de hosting al 70% de descuento.

Contrata ilusión aquí

La forma de cómo diseñar una página web es la que si ha cambiado, y mucho, porque desde que vi las primeras páginas allá por 1992 hasta la fecha, ha habido mucha evolución en las formas de mostrar los contenidos y las herramientas que permiten hacerlo.

No cabe la menor duda que nada tiene que ver crear una web HTML con Dreamweaver, … qué recuerdos, a utilizar un editor visual de WordPress como Divi o el mismísimo editor de Gutenberg, que ahora es un duro competidor para algunos de los builders conocidos.

Queda mucho camino por recorrer, unos dicen que hacia la web semántica y otros hablan de que los próximos sitios relevantes se diseñarán en el metaverso, pero sea lo que sea y como continúa este proceso, lo cierto es que a fecha de hoy para tener visibilidad propia no es suficiente con usar las redes sociales, hay que tener presencia personalizada con un sitio web ¡y no todos lo tienen!

Puntos a tener en cuenta para poner en marcha tu web:

• Un alojamiento para tu web en Internet (Hosting).
• El nombre de dominio web que defina o identifique tu proyecto.
• Con qué Gestor de Contenidos vas a desarrollar la web (WordPress, etc.)
• Qué recursos gráficos son necesarios para ilustrar el sitio web.
• El logo del proyecto, marca comercial o personal.
• Textos legales para cumplir con LOPD y RGPD.
• Un Tema o plantilla que defina tu sitio web y con el que te identifiques visualmente.
• Tipografías para WordPress y paleta de colores para tu marca.
• Plugin adicionales para poder realizar determinadas tareas internas del sitio y en el frontal.

En esencia, estos son los puntos de los que puedes partir para ir construyendo tu proyecto, pero seguro que durante esta maravillosa experiencia irás escribiendo tus propios puntos o temas a abordar.

  Definir el objetivo de la web

Lejos de las herramientas está lo que vas a decir con ellas, y este debería ser el eje principal de cualquier proyecto web que se precie, “el objetivo y el mensaje para transmitirlo”, de manera que quien lo visualice lo entienda y con ello aprecie los matices de tu esencia, la que tratas de imprimir en lo que haces para diferenciarte del resto.

Utiliza un lenguaje “en primera persona” en todos y cada uno de los textos que incorpores a tu sitio web, ya que transmitir cercanía te va a servir para que tu público o clientes empaticen mejor y se rompa la barrera de la distancia causada por los antiguos tratamientos “de usted” que poco se llevan hoy día.

Desde la portada del sitio, pasando por la página de servicios o la tienda y el formulario de contacto, trata de unificar el estilo, el diseño y el mensaje que quieres transmitir, evitando la mezcla de estilos dispares y terminologías que en el lenguaje directo, de tú a tú nunca utilizarías en tu entorno de trabajo o con tus amistades.

Si lo tuyo no es escribir o redactar textos no te preocupes, existen muy buen@s copywriters hoy día que te pueden crear textos muy persuasivos y bien redactados para que tu sitio enamore en cada párrafo.

  Encontrar el mejor diseño para tu web

Actualmente existen tantos recursos para diseñar un sitio web que es difícil no encontrar en un plazo breve o muy corto aquellos necesarios para abordar esta fase tan importante de la puesta en marcha de un sitio en Internet.

Lectura recomendada:
Mejores plantillas para WordPress.

No obstante, te invito a que leas más abajo la sección dedicada a Elegir el tema y plugins que vayas a necesitar para diseñar tu web donde te dicto algunos enlaces de sitios donde obtener Temas para tu sitio web.

  Elegir la mejor herramienta (WordPress)

Cuando entras en la dinámica de poner en marcha un sitio web, te planteas cuál será la herramienta ideal para gestionarlo durante su tiempo de vida, que en el mejor de los casos puede ser de una década o más, por lo que elegir bien es esencial para garantizarte el éxito.

• Debe ser escalable.
• Con actualizaciones constantes por parte del desarrollador.
• Que tenga una comunidad que la apoye y ayude a mejorarla.
• Con un ecosistema de plantillas, plugins y otros recursos que amplíen sus capacidades.
• Que considere la seguridad como su pilar más importante.
• Abierta a todos los sistemas y plataformas.
• Fácil de gestionar y bien documentada.
• Debes sentir que “es tuya” y no un SaaS.

Esta herramienta va a ser la base para la creación del sitio web y es necesario que sea versátil, entendible y que esté en constante desarrollo.

En este sentido, WordPress, un gestor de contenidos dinámico con casi 2 décadas de existencia, está consolidado como una herramienta de fuentes abiertas, que ha sido creada por una empresa (Automattic), pero donde la comunidad mundial de usuarios participa en su desarrollo y mantenimiento, y además dispone de un ecosistema de Temas y plugins gratuitos y comerciales que le aportan capacidad para operar en cualquier escenario y para casi cualquier uso.

  Escoger una plataforma para alojar tu web

El Hosting o alojamiento para tu sitio web es la base, ya que se trata de la casa que va a albergar tu proyecto web, tus correos electrónicos del sitio web y otros datos relacionados con el mismo.

Existen miles de proveedores de alojamiento para sitios web, muchos de ellos especializados en alojar gestores de contenidos dinámicos como WordPress y de estos, gran parte de ellos con un buen soporte posventa especializado que te puede ayudar en los momentos que lo necesites.

Algunos aspectos que debes tener en cuenta para escoger un Hosting WordPress adecuado a tu proyecto:

• Tipo de Hosting: Dedicado, Compartido, Gratuito…
• Localización del datacenter (geolocalización IP), RGPD
• Qué medidas de seguridad ofrece: ataques, hackeos, vulnerabilidades…
• Soporte Técnico en tu idioma y disponibilidad 24/7
• Espacio en disco para tus webs
• Memoria RAM para ejecutar procesos
• Cantidad de dominios permitidos
• Garantías de devolución
• Precio y formas de pago: Mensual, Trimestral, Anual…

Si entrásemos en detalles habría otras muchas cosas que evaluar, atendiendo a los requisitos de WordPress, pero en esencia de lo que se trata es de que escojas un Hosting que te proporcione estabilidad, seguridad y escalabilidad llegado el caso, que te escuche cuando surgen problemas, y ¡que puedas pagar!

No olvides esa máxima que dice ¡lo barato sale caro!

  Elegir el tema y plugins que vayas a necesitar para diseñar tu web

Cuando estás creando un sitio web, una de las cuestiones transcendentales, hay varias, es que plantilla o Temas vas a utilizar, principalmente porque dependiendo de cuál escojas así serán los pasos siguientes y a lo largo del proceso muchas cosas se determinan con base en el tema.

Fíjate que, sin embargo, los plugins no adquieren tanta relevancia, y no es que no la tenga, sino que se sobreentiende que habrá plugins que irán en la instalación ya desde el comienzo del proyecto web, pero también es probable que algunos de ellos cambien por otros en los primeros estadios del diseño web.

El Tema define tu imagen, y cómo los demás, los visitantes, percibirán lo que tratas de representar o bajo qué líneas gráficas quieres ser encorsetado digitalmente, y eso dice mucho y marca también el perfil de los futuros visitantes al sitio, por lo que elegirlo correctamente se convierte en casi una necesidad.

Es como la pintura de las paredes de tu casa o el papel pintado de tu habitación, te va a acompañar mucho tiempo, lo vas a ver cada día, muchas horas, y tiene que transmitirte cosas y sobre todo ser armónico y acorde a los lineamientos de tu mente para que podáis convivir el uno con el otro, de lo contrario durará poco y acabarás cambiándolo.

A la hora de elegir un tema para tu sitio web trata de no quedarte con la primera impresión y eso supone analizar la plantilla más a fondo, ver cómo está creada, qué elementos incorpora, si tiene comportamiento fluido y se adapta bien a cualquier dispositivo y siempre que te sea posible mira la “demo” del Tema en vivo para ver cómo se comporta y pásalo por PageSpeed para ver qué tiempos de carga devuelve.

Si tienes intención de escalar tu proyecto web con el tiempo, entonces escoge un buen tema, sólido, que tenga un ciclo de actualizaciones aceptable y sobre todo que disponga de soporte tras la compra, ya que vas a pasar muchas horas gestionándolo y no siempre las cosas hacen lo que uno espera y en esos momentos tener una ayuda es esencial.

Con los plugins puedes ir de forma más relajada, por el hecho de que los esenciales al menos ya están más que probados y hay muchísima documentación en Internet acerca de su funcionamiento e incluso su personalización para sacarles el máximo provecho, aunque es importante que te hagas tu lista inicial de aquellos que deberías empezar a tener instalados desde el principio para determinadas tareas.

Un plugin de copias de seguridad que puedas hacer antes de aplicar cambios o actualizaciones importantes: AIOWPM, UpdraftPlus, Duplicator.

El SEO desde el minuto cero es esencial en tu web y no debes dejarlo de lado en cada paso que des con tu página: Rank Math SEO, Yoast SEO. Aunque existen más plugins de SEO.

¿Vas a trabajar con el “editor de bloques” Gutenberg?, entonces necesitarás reforzarlo con algún plugin para tener bloques adicionales: Otter, Kadence, Spectra. Entre otros plugins para Gutenberg.

Si piensas gestionar formularios para contacto, suscripciones, etc., mira alguno de los siguientes: WPForms, Forminator, Kali Forms. Entre otros plugins de formularios para WordPress.

Que tu sitio cargue rápido va a depender en parte de cómo gestiones los contenidos estáticos y en este sentido la caché juega un papel determinante: LiteSpeed Cache, W3 Total Cache, WP Super Cache. Entre otros plugins de cache para WordPress.

El universo de los plugins es tan extenso como te puedas imaginar y vas a encontrar “casi” de todo, lo que te va a ayudar mucho a la hora de realizar determinadas tareas que de otra forma solo serían posibles contratando un desarrollador que te las hiciese a medida.

  Define las páginas básicas para tu proyecto

Tener un guion o “lista de pasos” de lo que vas a realizar en tu sitio, además de un wireframe que te ayude a esquematizar las páginas, los menús y la distribución de contenidos, te servirá para “ir al grano” y divagar luego menos durante el desarrollo de las diferentes secciones del sitio.

Hazte una lista del Menú de WordPress que tendrá la página y qué elemento va a mostrar a los visitantes para ayudarles con la navegación, tanto del menú principal como de otros menús secundarios que actives en alguna posición del tema.

Ejemplo de ítems para el menú principal:

• Inicio u Home (mejor en castellano si es el idioma por defecto de tu página).
• Tienda (Si va a ser un e-commerce, pon la tienda siempre por delante del resto de elementos).
• Servicios (Donde destacar en líneas generales los servicios que ofreces en tu sitio web).
• Contacto (para mostrar un formulario de contacto y aquellos canales de ayuda, comunicación o soporte que pienses ofrecer).
• Sobre mi (si es un proyecto de marca personal, este apartado es importante, ayuda en el acercamiento con tu público).

Adicionalmente podrás añadir todos los elementos que consideres oportunos, pero recuerda que al final muchos de estos menús no siempre tienen el mejor comportamiento del mundo en dispositivos móviles, por lo que no abuses poniendo muchos elementos de menú y con textos muy largos que se cortarán en pantallas pequeñas.

No está de más que le dediques tu atención al menú legal, que suele situarse por regla general en el pie de página del sitio web (el footer).

• Política de Privacidad
• Política de Cookies
• Términos y Condiciones del Servicio
• Devoluciones (Si tienes una tienda, este punto es importante).
• Contacto (Es bueno replicarlo también en el footer).

Fíjate que en el pie de página no es tan relevante que los menús tengan un poco más de texto, ya que como suelen estar al final, no afectan negativamente a la experiencia de navegación del usuario.

Al final, cada ítem de menú es una página por lo que diseñando el menú de tu web estarás definiendo las páginas importantes y esenciales que el sitio ha de tener, al margen de las que luego vayas añadiendo de forma particular para determinados contenidos.

  Consigue los recursos e imágenes que necesitas para diseñar tu web

Si lo que vas a poner en marcha es una tienda de productos físicos en Internet, entonces parte del problema de obtención de recursos lo tienes ya solucionado, pues se entiende que tienes acceso a esos productos físicos y que puedes hacerles fotos una o varias del mismo con diferentes ángulos para que luego luzcan en tu sitio web de la mejor manera posible.

Aun así necesitarás seguramente imágenes de apoyo para ilustrar la portada, así como otros apartados del sitio, y estos recursos pueden ser fotografías que ya tengas o diseños que hayas encargado a algún freelance o diseñador/a para que sean exclusivos y muy personalizados, acordes a tu proyecto web.

Buscar textos e imágenes de apoyo para mostrar en tu sitio web no necesariamente tiene que ser una tarea complicada o tediosa. Hay muchas maneras de obtener estos elementos y aquí te cuento algunos de los habituales.

Si tienes una temática muy definida, es posible que ya cuentes con recursos propios para complementar los diferentes apartados que tendrá tu sitio web, cada una de las páginas que quieras mostrar, desde la portada, pasando por la tienda, hasta el formulario de contacto.

En Internet existen miles de sitios donde puedes encontrar casi de todo para diseñar tu sitio web, aunque aquí te vamos a mostrar unos pocos de esos recursos, de sitios que los ofrecen gratuitamente, en la mayoría de casos, no obstante si tu proyecto lo requiere es posible que también debas barajar la compra de recursos de calidad llegado el caso.

• Pixabay https://pixabay.com/
• Freepik https://www.freepik.es/
• unsplash https://unsplash.com/
• PNGtree https://es.pngtree.com/
• All FREE download https://all-free-download.com/
• kaboompics https://kaboompics.com/
• freeicons https://freeicons.io/
• iconos8 https://iconos8.es/

Los recursos de imágenes, iconos, logos, tipografías, etc., son esenciales para crear una web. Escoger los adecuados, o diseñarlos si tus habilidades te lo permiten, ayudará a que tu web cuente con una imagen más elaborada y la personalidad acorde a tu marca.

  Optimizar el diseño de tu web tanto en móvil como en escritorio

Hay tres elementos clave a la hora de definir cómo debe ser el diseño de un sitio web, tanto en su conjunto (equilibrado) como de cada uno de sus elementos (fluido), y eso va a influir directamente en la experiencia que el visitante se llevará de tu sitio web y que establecerá si volverá en otro momento o decida que tu sitio no está bien diseñado y adaptado a dispositivos.

• Prioridad: Las pantallas de los dispositivos móviles se ven limitadas por el espacio físico que tienen para representar diferentes elementos de texto y gráficos, el cual se ve normalmente en vertical, por lo que el diseño en tu ordenador no debe ser solo en horizontal. Esto quiere decir que priorizar el tipo de diseño es fundamental y la cuota móvil en Internet ya supera a la de escritorio, y esto es todo un indicador de la tendencia actual del diseño web.

• Primero el contenido: El texto debe ser parte esencial del contenido y tiene que ser fácilmente legible y accesible. Los dispositivos móviles están más pensados en vertical para contener texto y no solo imágenes y diseños modernos que en pantallas de dimensiones reducidas no se percibirán, por lo que el color y el diseño debes relegarlos por debajo del texto en la medida que tu sitio web lo permita.

• Navegación: En un dispositivo móvil no se puede hacer clic en cualquier sitio y volver a la página de inicio, lo que obliga a recurrir constantemente al menú hamburguesa. Diseña tu web pensando siempre en la navegación móvil, ya que adaptarla luego a escritorio es más sencillo que a la inversa.

Cuando diseñes piensa en el usuario, en cómo será su experiencia de navegación por los contenidos de tu sitio, ponte en su lugar y prueba constantemente cada nuevo añadido del sitio en tu móvil, y si te es posible en diferentes tipos de móviles, de esta manera estarás viviendo la experiencia de tu público y podrás refinar mejor los contenidos para que su consumo móvil sea un momento especial.

  Conclusiones

Diseñar un sitio web, ya sea con WordPress o el CMS de tu preferencia, debería ser cómo escuchar una canción, leer una poesía o dar un paseo al atardecer por la playa, ¡toda una experiencia para tus cinco sentidos!

Si renuncias a eso durante la fase creativa y de toma de decisiones, estarás dejando de lado la mejor parte de todo el proceso y simplemente pasarás a mecanizar procesos para realizar acciones y obtener objetivos, pero sin el romanticismo de la primera parte de lo que te llevó hasta este punto.

Deja que tu creatividad se entremezcle con la ilusión por construir contenidos que te llenen, ya que si le pones todos tus sentidos y sentimientos, tus visitantes lo percibirán y con ello habrás ganado el 50% del engagement que hoy día se necesita para destacar en Internet.

Un consejo último que quiero darte, ¡trata de sonreír durante todo el proceso creativo! vívelo como si fuese la mejor experiencia de tu vida, porque lo que vas a hacer o ya comenzaste será lo que te marque los próximos tiempos de tu vida y digo yo ¿quién no quiere cosechar buenas experiencias? 🤗