Descarga un manual gratuito que te ayudará a diseñar tu sitio con confianza.
La dirección de correo electrónico que escribiste no es válida.
Gracias por suscribirte.
Si nos das tu correo electrónico, indicas que has leído y comprendido nuestra Política de Privacidad y que aceptas recibir comunicaciones de marketing de Squarespace.
Cuando diseñas un nuevo sitio, es posible que comprendas los conceptos básicos de lo que compone un sitio web (imágenes, textos y enlaces para navegarlo), pero el cómo es difícil para muchas personas. ¿Qué extensión deben tener tus textos? ¿Cómo eliges las imágenes para una página?
Si bien las plantillas de Squarespace y el Kit de diseño de Squarespace con IA son buenos puntos de partida para orientarte, tener una buena comprensión de algunas reglas de diseño te da más poder para hacer que tu sitio sea único. Hemos acudido a uno de los expertos en diseño de productos detrás de las plantillas de Squarespace, Jon Wilson, para que te aconseje cómo navegar por los conceptos básicos del diseño de un sitio web.
Los dos componentes principales del diseño de un sitio web
Las diferentes piezas que se incluyen en el diseño de un sitio web se dividen en dos categorías principales: diseño visual e interfaz de usuario funcional (UI).
Diseño visual: incluye todo lo que ves, como las combinaciones de colores, las fuentes y tipografía, el diseño, el tono de voz y los elementos gráficos (iconos, fotos, ilustraciones, etc.).
Interfaz de usuario funcional: piensa en ella como cualquier elemento con el que tus visitantes interactúan en tu sitio, como botones, navegación, formularios o páginas de productos y el área de pago de la tienda.
Para informar tus elecciones de diseño, primero debes “definir el propósito estratégico de tu sitio web, por ejemplo, si está destinado a la expresión pura de la marca, a alojar información, la conversión, las ventas, la captura de clientes, u otro objetivo”, explica Wilson.
“¿El propósito de tu sitio web es asistir a los posibles clientes que ingresan y comunicarte con tus clientes actuales? Entonces, el foco debería estar en presentar el contenido de manera accesible, más arriba en la página, asegurando que describa las expectativas de los campos de entrada y facilitando que los clientes se pongan en contacto contigo con poca fricción”.
Establece metas usando nuestros 10 mejores principios de diseño web
"No necesitas tener todas las respuestas para cada sección de cada página".
1. Elige las imágenes con el contexto y el propósito en mente
Al elegir elementos visuales para tu sitio web, trata de ceñirte a imágenes o diseños que reflejen la energía de tu marca o de tu misión en términos de su tipo, las combinaciones de colores o el tema.
A continuación, considera la función y la ubicación de tus imágenes. Esto te dará una idea de cuántas necesitas y dónde colocarlas. El objetivo principal de un elemento visual es:
Transmitir algo de información
Agregar contexto a tus textos
Evocar una emoción
Ser decorativa
Una combinación de lo anterior
Si no se te ocurre ninguna idea, considera la función de las imágenes. “Por ejemplo, las hero images deben captar la atención, ofrecer espacio para la colocación de texto legible y establecer de manera efectiva las expectativas respecto del tono para el resto de tu sitio”, dice Wilson.
Recuerda: la calidad de las imágenes que elijas también importa. “Si no tienes las mejores imágenes para mostrar, o tienes mucho que hacer para conseguir imágenes de alta calidad, considera hacerlas más pequeñas”, explica Wilson. “También recomendamos evitar una pantalla de ancho completo para los recursos de menor calidad”.
Obtén más consejos para agregar fotos a tu sitio web
2. Redacta textos claros y breves
“Hay un antiguo estudio grupal de Nielsen Norman que sugiere que, en promedio, los usuarios leen aproximadamente el 20 % de las palabras de una página web”, dice Wilson. “El texto de formato largo, con la excepción de las experiencias editoriales, puede ser abrumador para crear y digerir.
En resumen, cuando se trata de la cantidad de palabras en pantalla: menos es realmente más”.
Usa estas pautas generales como una lista de verificación cuando revises los textos que escribes.
Considera a tu audiencia
Reduce la redundancia
Usa lenguaje claro
Haz que sea fácil de recorrer con la mirada
Cuando crees llamadas a la acción (CTA), como botones o mensajes de texto para pedirle a alguien que se ponga en contacto, siga leyendo o compre algo, deja claro a dónde los llevará un clic. Las CTA son cortas (a menudo de 20 caracteres o menos) y fomentan la acción, como “Comprar ahora”.
No hay ninguna regla que se aplique a todos los sitios web. ¿Cuántas palabras se necesitan para expresar tu punto de vista en tu tono de voz?
En caso de duda, mira sitios web similares a los tuyos. Observa dónde los textos son más largos y más cortos. ¿Notas que escaneas los textos o te desenfocas en algún momento? El texto de la página de inicio tiene probablemente 200 palabras o menos, por ejemplo. Pero la página "Acerca de" podría tener más cerca de 500 palabras.
"Es tentador querer crear una página para cada aspecto de tu negocio y luego vincular esa página a tu navegación principal, pero confía en nosotros: haz que sea simple".
3. Crea enlaces de navegación orientados a la acción
La navegación es donde tienes el mayor control sobre las partes funcionales de tu sitio web. Para crear una navegación fácil de usar, ten en cuenta dos aspectos principales.
El propósito fundamental de tu sitio web
Menos es más, incluso en la navegación
“¿Tu sitio web es una herramienta para facilitar las compras en línea de tus productos? ¿Estás buscando puntos de entrada fáciles que permitan a tus visitantes programar una cita contigo?”, pregunta Wilson. “Definir estos objetivos determinará cómo estructuras el idioma de tu navegación y las principales llamadas a la acción como 'Comprar' o 'Hacer una cita'”.
El enfoque de menos es más asegura que los visitantes del sitio encuentren lo que buscan de manera rápida y eficiente. “Esto permitirá reducir la cantidad de información que alguien necesita analizar antes de encontrar los enlaces más relevantes para sus necesidades”, dice Wilson. "Es tentador querer crear una página para cada aspecto de tu negocio y luego vincular esa página a tu navegación principal, pero confía en nosotros: haz que sea simple".
Lee nuestra guía para diseñar tu navegación
4. Construye un tablero de inspiración
Si pasar directamente al editor del sitio web parece demasiado como primer paso, crea un tablero de inspiración con imágenes y sitios web que te resulten inspiradores. Busca patrones en lo que has guardado, como ciertos colores, estilos de tipo o diseños.
“Una vez que hayas recopilado un repositorio de diseños, combinaciones de colores y otras composiciones de diseño, que te inspiren es hora de comenzar a crear algunos diseños propios y donde comienza la diversión”, dice Wilson. “Con las funciones del editor de sitios web de Squarespace, puedes explorar varias posibilidades de diseño hasta que encuentres una iteración que te parezca adecuada para tu marca”.
5. En caso de duda, comienza por la sección hero
La sección hero (el espacio inmediatamente después de tu logotipo y la barra de navegación principal) suele ser una de las secciones más importantes de tu sitio web.
“Tus visitantes literalmente tardarán menos de un segundo en formarse una impresión sobre tu negocio después de obtener una vista inicial de tu sitio”, dice Wilson. “Esto hace que el diseño gráfico, la disposición, el contenido, los mensajes y la llamada a la acción en la sección hero sean fundamentales. También es una oportunidad para establecer el tono visual para el resto de tu sitio web”.
Para tu sección hero, elige una imagen y/o texto que resuma tu marca o negocio y lo que ofreces a los visitantes del sitio. Un recurso útil para los usuarios de Squarespace es el catálogo de secciones, que tiene diseños seleccionados que puedes aplicar instantáneamente a tu sitio.
“Si tu negocio o marca carecen de un estándar visual definido en esta etapa, la sección hero también es una excelente oportunidad para explorar diferentes combinaciones de fuentes, colores, imágenes y diseños”, agrega Wilson. “Esta tarea puede resultar abrumadora al principio, pero vale la pena reiterar que esta es solo una sección del sitio web, y no necesitas sentir que tienes que tener todas las respuestas para cada sección de cada página”.
6. Haz que sea única
“Una personalidad única o 'sello de diseño' es un componente clave en la creación de cualquier experiencia digital memorable”, dice Wilson. “Captar la atención de tu audiencia y reducir el ruido es una forma de ayudar a que tu marca o tu negocio se destaquen, atraigan o eventualmente logren la conversión de nuevos clientes. Una vez que hayas definido el carácter general de tu marca, puedes comenzar a apoyarte en esos atributos usando tu creatividad. Específicamente, nos gusta jugar con el color, la tipografía, el diseño, los gráficos y el tono de contenido”.
Tipografía: explora la biblioteca de fuentes únicas de Squarespace para obtener una que comunique la personalidad y los elementos visuales de tu marca. Reproduce contrastes en escala entre el texto del título grande y el cuerpo del texto usando funciones como Escalar texto.
Diseño: prueba con la asimetría y usa el espacio en blanco. Los bloques de formas y las formas de imagen son excelentes maneras de agregar vida y alegría a las formas que están encerradas en ángulos rectos, como cuadrados y rectángulos.
Tono de voz: la forma en que hablas de ti mismo, tus productos o servicios y el “gancho” de tu negocio puede variar mucho dependiendo de la respuesta emotiva que estés buscando de tu audiencia.