Qué es un sistema de diseño y cómo usarlo para gestionar tu web
Un sistema de diseño te ayuda a crear nuevas páginas y gestionar el contenido de tu web WordPress sin perder coherencia. Aprende cómo utilizarlo.
Tu web ya está diseñada y publicada. Ahora te toca utilizarla.
Quizá dentro de unas semanas quieras crear una página para un nuevo servicio. Más adelante necesitarás añadir un bloque a la página de inicio, publicar un caso de éxito o preparar una landing para una campaña.
Y entonces empiezan a aparecer pequeñas decisiones.
¿Qué tamaño debería tener este título? ¿Qué color utilizo para este botón? ¿Cuánto espacio dejo entre estas dos secciones? ¿Puedo copiar este bloque de otra página? ¿Cómo creo una sección nueva para que se parezca al resto de la web?
Si tu web tiene un sistema de diseño, no tendrás que tomar todas esas decisiones cada vez.
El sistema de diseño es precisamente lo que te permite gestionar y hacer crecer tu web sin tener que volver a diseñarla con cada cambio.
Qué es un sistema de diseño
Piensa en el sistema de diseño de tu web como una caja de piezas acompañada de unas reglas para utilizarlas.
Dentro están los colores de tu marca, los tamaños de los textos, los botones, las tarjetas, los formularios, los espacios que dejamos entre los elementos y muchas de las secciones que utilizamos para construir las páginas.
Todas esas piezas han sido diseñadas para funcionar juntas.
Por eso, cuando quieras crear algo nuevo, no tendrás que empezar con una página completamente en blanco y decidir cómo debería ser. Podrás construirla utilizando piezas que ya existen.
Es parecido a trabajar con un juego de construcción: puedes crear muchas cosas diferentes con las mismas piezas y el resultado seguirá perteneciendo al mismo conjunto.
En WordPress, además, buena parte de este sistema puede estar incorporado directamente en la propia web. Los colores, tipografías y otros estilos pueden estar definidos globalmente, mientras que las estructuras que utilizamos con frecuencia pueden estar disponibles como bloques o patrones reutilizables.
Eso significa que no te tienes que saber el sistema de diseño de memoria para utilizarlo. Lo encontrarás, en buena medida, dentro del propio editor de WordPress.
Qué encontrarás en el sistema de diseño de tu web
Un sistema de diseño puede ser más o menos amplio dependiendo del proyecto, pero hay algunos elementos que encontrarás prácticamente siempre.
Los colores
Los colores principales de la web ya están definidos.
Cuando edites un bloque en WordPress, normalmente podrás elegirlos directamente desde la paleta disponible. No necesitas buscar el código hexadecimal del color de tu marca ni intentar encontrar un azul «parecido».
Y tampoco necesitas inventar un color nuevo porque quieras que algo destaque más.
Cada color tiene una función dentro del conjunto y utilizar siempre la misma paleta de colores hace que las páginas nuevas sigan teniendo relación con las anteriores.
La tipografía
Lo mismo ocurre con los textos.
Tu web tiene definidos tamaños y estilos para los títulos, subtítulos, párrafos y otros elementos tipográficos.
Esto evita que tengas que decidir si un título debería medir un poco más o un poco menos cada vez que creas una página.
Pero hay otra ventaja más importante: mantiene la jerarquía.
Si los títulos principales tienen siempre un tratamiento determinado y los títulos de sección otro, una persona que entra en tu web aprende rápidamente a reconocer qué información es más importante.
Los espacios
Puede parecer un detalle menor, pero una de las cosas que más rápidamente hace que una web pierda coherencia es empezar a añadir espacios a ojo.
Un poco más de margen aquí. Un salto de línea para separar aquello. Un bloque vacío porque dos elementos han quedado demasiado juntos.
El sistema de diseño establece también cómo se relacionan los elementos entre sí y qué separaciones utilizamos.
Por eso es mejor utilizar los controles de espaciado previstos en el sistema que intentar colocar cada elemento manualmente.
Los componentes
Un botón es un ejemplo sencillo de componente.
No diseñamos un botón diferente cada vez que necesitamos uno, sino que tenemos unas variantes previstas y las reutilizamos.
Lo mismo puede ocurrir con una tarjeta de producto, un formulario, un testimonio, una ficha de autor o cualquier otro elemento que aparezca repetidamente en la web.
Un componente tiene una función concreta y unas reglas de uso. Puedes cambiar su contenido sin que cambie el diseño.
Los patrones
Los patrones son especialmente útiles cuando gestionas tú mismo tu web en WordPress.
Un patrón combina varios bloques para resolver una necesidad habitual.
Por ejemplo, puedes tener un patrón para presentar un servicio, otro para mostrar varios beneficios, otro para incluir un testimonio y otro para terminar una página con una llamada a la acción.
En lugar de construir esas secciones desde cero cada vez, puedes insertar el patrón correspondiente y sustituir su contenido por el tuyo.
Tu trabajo es crear contenido, no volver a diseñar la web
Esta es probablemente la idea más importante para utilizar bien tu sistema de diseño.
Imagina que mañana incorporas un servicio nuevo a tu negocio y necesitas crear una página para venderlo.
Podrías abrir una página vacía en WordPress y empezar a decidir:
qué ancho tendrá el contenido, cómo será la primera sección, qué tamaño tendrá el título, cómo presentarás las ventajas, qué aspecto tendrán los botones, cuánto espacio habrá entre cada bloque…
Pero todas esas son decisiones de diseño y muchas ya se tomaron cuando diseñamos tu web.
Si tienes patrones preparados para los tipos de contenido que utilizas habitualmente, puedes empezar por insertar las estructuras que necesites y trabajar sobre ellas.
Tu trabajo será decidir qué quieres contar y en qué orden.
El sistema de diseño se ocupará de que lo que construyas siga pareciendo parte de la misma web.
Cómo crear una página nueva sin romper el diseño
Cuando tengas que crear una página, una landing o una nueva sección, puedes seguir unas reglas bastante sencillas.
1. Antes de crear algo nuevo, busca si ya existe
Este debería ser siempre el primer paso.
Si necesitas una sección con tres ventajas, comprueba si tienes un patrón preparado para mostrar ventajas.
Si necesitas terminar una página invitando al usuario a que solicite presupuesto, busca la llamada a la acción que ya utilizas en otras páginas.
Y si necesitas presentar un testimonio, reutiliza el componente de testimonios.
La nueva página no será exactamente igual que ninguna de las anteriores, porque no la reutilizas entera, lo que reutilizas son sus piezas.
2. Elige las piezas por su función
Es mejor pensar «necesito una llamada a la acción» que «voy a copiar el bloque que hay al final de la página de Consultoría».
La primera forma de pensar te ayuda a entender para qué sirve cada pieza del sistema y a reutilizarla correctamente.
Una misma llamada a la acción puede aparecer en muchas páginas distintas y contener mensajes diferentes sin dejar de ser el mismo componente.
3. Cambia el contenido, no el diseño
Una vez insertado un patrón, cambia el título, los textos, las imágenes y los enlaces que necesites.
Pero no modifiques sus tamaños, colores, alineaciones o espaciados.
Si un botón ya tiene el aspecto correspondiente a una acción principal, no necesita ser más grande ni tener un color diferente porque esta vez quieras destacarlo especialmente.
La consistencia también ayuda a quien visita tu web: si los elementos que cumplen la misma función tienen siempre un aspecto parecido, resulta mucho más fácil entender cómo utilizarla.
4. Utiliza las opciones que te ofrece el sistema
Cuando WordPress te permita elegir un color, un tamaño tipográfico, un estilo de botón o una variación de un bloque, utiliza las opciones que ya están disponibles.
Evita introducir valores nuevos simplemente porque el editor permita hacerlo.
Que WordPress te permita elegir cualquier color no significa que tu web necesite cualquier color.
El sistema reduce deliberadamente tus opciones para que sea más difícil equivocarte y más rápido tomar decisiones.
5. Comprueba siempre el resultado en móvil
Cuando termines una página, mírala también desde el teléfono.
Los componentes de tu web están pensados para adaptarse a diferentes tamaños de pantalla. Un bloque con varias columnas puede pasar a mostrarse en una sola, algunos elementos pueden cambiar de posición y los tamaños y espacios pueden adaptarse.
Pero el contenido también influye.
Un título mucho más largo de lo habitual, una fotografía con una composición muy diferente o cinco tarjetas donde normalmente utilizamos tres pueden producir un resultado distinto del que esperabas.
No necesitas rediseñar la versión móvil. Simplemente comprueba que el contenido que has introducido funciona correctamente en ella.
6. Si necesitas algo que no existe, no fuerces una pieza existente
Esta regla es tan importante como reutilizar.
Supongamos que empiezas a organizar webinars y necesitas mostrar en tu web la fecha, la hora, las personas que participan y un botón de inscripción.
Hasta ahora no existía nada parecido.
Podrías coger una tarjeta diseñada para mostrar servicios e intentar transformarla: quitar unas cosas, añadir otras, cambiar tamaños y modificar su estructura hasta conseguir que parezca una tarjeta de evento.
Pero probablemente acabes creando una excepción difícil de mantener.
En ese caso, el problema no es que tu sistema de diseño esté incompleto. Es que tu negocio ha generado una necesidad nueva.
Y eso nos lleva a la siguiente parte.
Tu sistema de diseño no está terminado para siempre
Tu negocio va a cambiar y tu web tendrá que cambiar con él.
Puede aparecer un nuevo servicio. Puedes empezar a organizar eventos, publicar casos de éxito, vender productos o crear un tipo de contenido que ni siquiera existía cuando diseñamos la web.
El sistema de diseño también puede crecer.
La diferencia está en cómo incorporamos esos cambios.
Si necesitas por primera vez una página para webinars, podemos diseñar la solución adecuada y crear los nuevos componentes o patrones que necesite.
La próxima vez que organices uno, ya no habrá que volver a diseñarlos.
Resolvemos una necesidad nueva una vez y convertimos la solución en una nueva pieza del sistema.
Esa es una de las razones por las que diseñar una web como un sistema hace que sea mucho más fácil ampliarla con el tiempo. Los componentes modulares y reutilizables permiten que el diseño soporte cambios de contenido y nuevas combinaciones sin tener que rehacer todo lo que ya funciona.
Qué puedes cambiar tú y cuándo conviene pedir ayuda
Hay una forma sencilla de saber hasta dónde puedes llegar cuando gestionas tu web.
Puedes hacerlo tú
- Puedes cambiar textos, imágenes y enlaces.
- Puedes publicar entradas, productos y otros contenidos para los que ya esté preparada la web.
- Puedes crear nuevas páginas utilizando los patrones existentes y combinar componentes que ya conoces respetando su función.
Todo eso es utilizar el sistema.
Comprueba antes de hacerlo
Ten algo más de cuidado si necesitas cambiar la estructura interna de un patrón, utilizar un componente para algo diferente de aquello para lo que fue diseñado, ocultar partes de un bloque o combinar piezas de una manera que nunca se había previsto.
Puede que funcione perfectamente, pero también puede ser una señal de que estás intentando resolver una necesidad nueva con una pieza que se diseñó para otra cosa.
Probablemente necesitamos ampliar el sistema
Si necesitas crear un tipo de página completamente nuevo, un componente que no existe, una nueva funcionalidad o introducir nuevos estilos, colores o comportamientos, merece la pena tratarlo como una ampliación del sistema.
No significa que haya que rediseñar la web.
Normalmente significa justo lo contrario: diseñamos únicamente la pieza nueva que ahora necesitas y la incorporamos a lo que ya tienes.
El sistema de diseño protege la inversión que has hecho en tu web
Cuando encargas el diseño de una web, no estás pagando únicamente por el aspecto que tiene el día que se publica.
Durante el proyecto se han tomado muchas decisiones: cómo se organiza la información, cómo se distingue lo importante de lo secundario, cómo funcionan las llamadas a la acción, con qué estilos se representa tu marca y cómo se comportan las distintas piezas de la interfaz.
El sistema de diseño permite conservar esas decisiones cuando la web empieza a cambiar.
También te da autonomía.
No necesitas preguntarme qué tamaño debe tener cada título, qué color utilizar para cada botón o cuánto espacio dejar entre dos secciones cada vez que publiques algo.
Muchas de esas decisiones ya están tomadas y convertidas en herramientas que puedes utilizar.
Y cuando tu negocio necesite algo que todavía no está contemplado, tampoco tendremos que empezar de nuevo.
Crearemos la pieza que falta, estableceremos cómo funciona y la añadiremos al sistema.
Así podrás seguir gestionando tu web mientras el sistema de diseño se encarga de que siga siendo tu web.
Te lo ha contado
Ana Cirujano
Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.
