Diseño de páginas web para principiantes

1. Establece objetivos y prioridades antes de profundizar

Cuando muchos piensan en un diseño y desarrollo web exitoso, piensan también en nombres de dominio, un alojamiento web fiable, esquemas de color de sitios web y sistemas de gestión de contenidos. Sin embargo, el éxito de un diseño web surge de unas prioridades claras. Inicia el proyecto de tu sitio web averiguando qué es lo más importante para tu negocio, para saber qué debe incluir.

"Pon por escrito cómo imaginas el éxito y trabaja hacia atrás", añade Jonathan. "Este proceso te ayudará a decidir qué es lo que formará parte de tu sitio web".

Puede ser útil mirar otros sitios web de tu sector para inspirarte en el diseño. Examina sus páginas y toma nota de la información que proporcionan, cómo comunican sus marcas y qué ofrecen para atraer y mantener la atención de los visitantes. Ten en cuenta lo que piensas que funciona bien y lo que quieres mejorar con tu propio diseño.

Esta lista de elementos importantes para sitios web te ayudará a crear un mapa del sitio. Un mapa del sitio, como su nombre indica, mapea tu sitio web al establecer las páginas que tendrás y cómo se enlazarán entre sí, y también te ayudará a establecer tu arquitectura de información para más adelante.

Considera incluir estos tipos básicos de páginas web en tu sitio web.

• Página de inicio:
  

Esta es la página principal de tu sitio web, por lo que a menudo será la primera página que verán los nuevos visitantes. Deben ver en primer lugar la información más importante que necesitan, comprender qué te ofrecen y saber fácilmente cómo navegar hasta el siguiente paso necesario.

• Acerca de nosotros:
  

Aquí, los visitantes podrán encontrar información básica sobre tu empresa, como sus inicios, el lugar en el que está ubicada, tu cometido y los perfiles de los principales miembros de tu equipo. También puedes incluir enlaces a los horarios y ubicación de la tienda (si tienes), enlaces a las páginas en redes sociales e información de contacto.

• Servicios:
  

Dependiendo de a qué se dedique tu empresa u organización, puede ser muy útil para los nuevos visitantes contar con una página con una breve explicación de los servicios que ofreces o contenido visual de tus productos y enlaces a páginas detalladas, para obtener más información sobre esos servicios.

• Empleo:
  

Si necesitas a menudo nuevos miembros para el equipo, piensa en una página en la que resaltes los puestos disponibles o bien integra un formulario donde la gente pueda solicitar información acerca de las ofertas laborales.

• Blog:
  

Si publicas contenidos con regularidad, un blog puede ser una ubicación centralizada para que los visitantes los encuentren. Esto podría incluir actualizaciones de productos o servicios, artículos relacionados con lo que ofreces, perfiles de nuevos proyectos y cualquier otro contenido que ayude a sensibilizar a los visitantes de tu sitio web sobre tu organización.

2. Elabora un esquema de página para visualizar tu sitio web

Un esquema de página es el esqueleto de tu sitio web. Al igual que los planos de una casa, te proporciona una imagen bidimensional del diseño, la estructura y la funcionalidad de tu sitio web.

Los esquemas de página se pueden crear simplemente con un lápiz y papel, con herramientas de diseño o un creador de sitios web, que te pueden ayudar a comunicar visualmente la estructura de tu sitio. Hay 3 tipos de esquemas de página y, a medida que desarrollas tu sitio web, tendrás que cambiar de uno a otro, ganando "fidelidad" o detalles, según vas avanzando.

• Esquemas de página de baja fidelidad: Estos bocetos iniciales, que normalmente tienen formas simples y textos de marcador de posición, son buenos para trazar el flujo de navegación. "En esta etapa, solo tienes que centrarte en el contenido y en cómo interactúan con él los usuarios, en lugar de en el aspecto del sitio", dice Jonathan. "Este es el nivel de planificación, así que simplemente estás esbozando el sitio web y pensando en la jerarquía".

• Esquemas de página de fidelidad media: En esta etapa, todavía no muestras imágenes ni textos. Estás creando renderizaciones en blanco y negro, que muestran una representación exacta del diseño del sitio web. Existen herramientas disponibles para crear estas instantáneas, que ofrecen periodos de prueba gratuitos, como Sketch o Balsamiq. "Esta etapa es el esqueleto de tu sitio web", indica Jonathan. "No necesitas un diseño específico, pero necesitas líneas limpias y un tamaño preciso".

• Esquemas de página de alta fidelidad: En esta etapa del diseño, estás creando una imagen que se parecerá a tu sitio web real, con sus imágenes, esquemas de colores y textos reales. Ahora puedes diseñar cosas como tus menús y contenido interactivo. "Aquí es donde añadimos color y texto, pero no compares esto con un prototipo operativo", advierte Jonathan. "Es aún un ejemplo de la jerarquía de tu sitio web".

3. Diseña teniendo en cuenta a tu público

A medida que avanzas en las fases del diseño web, céntrate en la construcción de un recurso que dé servicio a tu público. Al fin y al cabo, esa es la idea principal. Asegúrate de que en cada etapa del desarrollo de tu sitio web (desde establecer prioridades a dar formato para determinar la navegación) estés pensando en las necesidades de tu público objetivo.

"Aunque resulte atractivo crear un sitio web completamente único y original, siempre hay que tener en cuenta al usuario final", explica Jonathan.

Consulta esta lista de verificación para crear una experiencia de usuario (UX) satisfactoria.

• Proporciona una jerarquía visual:
  Una jerarquía sólida hace que a los visitantes les resulte fácil recopilar rápidamente información y saber a dónde han de dirigirse en tu sitio web para obtener más información. La jerarquía visual incluye espaciado, colores, espacio en blanco, repetición y más.
• Que sea sencillo:
  A medida que vayas diseñando, mantén una experiencia agradable para los visitantes, considerando si todos los elementos son necesarios para los usuarios. Es posible que estés añadiendo funciones que complican el sitio web y dificultan la navegación de tu público.
• Muestra una llamada a la acción clara (CTA):
  "Haz un pedido", "Compra ahora", "Suscríbete", "Contacta con nosotros" y otras CTA deben ser fáciles de encontrar e intuitivas. Sigue preguntándote si el diseño de tu sitio web hace que sea más fácil para tu público saber a dónde quieres que vayan.
• Hazlo accesible:
  Tu sitio web debe ser adaptable y accesible desde cualquier dispositivo. Revisa cómo se ve tu sitio web en un PC, tableta o teléfono móvil. Asegúrate de que los usuarios puedan ver el texto y las imágenes correctamente en diferentes dispositivos y de que se pueda hacer clic fácilmente en esos botones y CTA en pantallas de diferentes tamaños.

4. Utiliza fotos para contar tu historia

Un sitio web es una experiencia visual, así que concéntrate en las imágenes que atraigan a tu público objetivo, para ayudar a comunicar de qué trata tu marca. Si todavía no tienes tus propias fotografías para ilustrar tus productos o servicios, hay muchas fuentes de imágenes de archivo. Sitios web como Unsplash, Pexels o Pixabay ofrecen una amplia selección de imágenes gratuitas para comenzar.

Jonathan sugiere buscar una serie de imágenes de un mismo conjunto o fotógrafo. "Esto te permite mantener la consistencia estilística en tu sitio web", comenta. "Consigue que tu sitio web tenga un aspecto más profesional, y que tu negocio infunda más confianza".

Recuerda estos consejos al seleccionar las imágenes.

• Asegúrate de que tus imágenes cuenten una historia.
  No elijas una imagen porque sea bonita. Piensa en si la imagen funciona con tu contenido para darle vida a tu marca.
• Aunque estés utilizando material de archivo, sé original.
  No elijas la opción más evidente. No escojas algo que un visitante reconozca de inmediato como una foto de archivo que ya ha visto en una docena de sitios web.
• Asegúrate de que las personas de las imágenes se parezcan a tu público objetivo:
  

Esto hará que los visitantes consideren tu sitio web (y tu marca, producto o servicio) algo con lo que se pueden identificar y que necesitan.

• Sé coherente con el estilo de imagen:
  Asegúrate de que los elementos visuales de tu sitio web son fieles a tu marca. Asegúrate de que los colores, las fuentes y las imágenes son coherentes entre sí, para que refuercen la imagen de tu marca.
• Recorta las imágenes de archivo para obtener un mayor impacto:
  Si vendes helados artesanales, por ejemplo, y encuentras una imagen que muestra a un niño adorable comiendo un cucurucho de helado con su familia, recorta la foto para resaltar al niño. Obtendrás más atención y una imagen única en comparación con otros sitios web que puedan haber utilizado la imagen sin recortar.

5. Realiza el seguimiento de tu rendimiento y mejora tus campañas

Tu sitio web evolucionará continuamente a medida que tu negocio crezca. Realiza el seguimiento de tu rendimiento desde el primer momento utilizando tus informes del sitio web, para ver qué funciona y qué falla. A continuación, haz ajustes para mejorar la experiencia de los usuarios y tus resultados.

La integración de Google Analytics con tu sitio web puede ayudarte a hacer un seguimiento de la actividad, para ver qué páginas están recibiendo el máximo tráfico y dónde hacen clic las personas. Las pruebas A/B, con las que comparas dos versiones diferentes entre sí, te ayudarán a determinar qué elementos de tu web funcionan mejor y te permitirán verificar que tu CTA motiva a tus visitantes. "Si deseas crear una CTA que convierta y contribuya a aportar una experiencia web memorable, necesitas probar continuamente qué funciona mejor", explica Jonathan.

Una forma de ver cómo interactúan los usuarios con tu sitio web es con una herramienta de seguimiento del tráfico como Hotjar, comenta Jonathan. El mapa de tráfico proporciona una representación gráfica con códigos de color, que te muestra lo que atrae las miradas de la gente en el sitio web. Esto puede mostrarte qué áreas de tu sitio web están recibiendo mayor atención y puedes orientar tus futuras mejoras de diseño e iteraciones.

"Debido a que se trata de un seguimiento del tráfico en tiempo real, es ideal tanto para sitios web nuevos como para los que llevan tiempo funcionando", señala. "Y la mejor parte es que la presentación de los mapas de tráfico es sencilla y fácil de interpretar".

Presta atención a los detalles

A medida que diseñas tu sitio web, recuerda que es el lugar donde se concentra tu actividad de marketing. Puede ser la primera impresión que alguien tiene de tu negocio y quieres que sea buena, así que no escatimes.

Dedícale tiempo y esfuerzo para hacerlo bien, aconseja Jonathan. Asegúrate de que todas las funciones se ejecutan en pantallas de cualquier tamaño, para que los usuarios puedan navegar y usar tu sitio web. De lo contrario, simplemente los rebotarás a la competencia.

"Un diseño web corriente no te dará la flexibilidad y control necesarios para que tu espacio digital pueda ser identificable y funcionalmente tuyo", comenta. "Cada elemento es importante, hasta los básicos. No escatimes en calidad".