La personalización de tu sitio web es clave para transmitir la identidad de tu marca y garantizar una experiencia de usuario coherente. En esta guía, aprenderás a ajustar las tipografías, colores y tamaños en Framer para crear un diseño único y atractivo.

Ajusta las tipografías en Framer

Selección de fuentes

1. Ve al menú Style en el panel derecho.

2. Busca la sección de Typography.

3. Selecciona una fuente de la biblioteca de Google Fonts o carga tu propia fuente personalizada.

Ejemplo: Cambiar la fuente principal

1. Selecciona el texto que deseas personalizar.

2. En el menú de tipografía, elige una fuente como Inter o Roboto.

3. Ajusta el tamaño, peso y estilo según sea necesario.

Elige fuentes legibles y consistentes para una experiencia profesional.

Ajustes avanzados de tipografía

• Espaciado entre líneas: Ideal para mejorar la legibilidad en textos largos.

• Tracking: Controla la distancia entre letras para lograr un diseño más estilizado.

• Alineación: Asegúrate de que los textos estén alineados correctamente para mantener la armonía visual.

Personalización de colores

Cómo elegir una paleta de colores

1. Define un esquema de colores que represente tu marca (colores primarios, secundarios y de acento).

2. Usa herramientas como Coolors o Adobe Color para crear tu paleta.

Aplicar colores en Framer

1. Selecciona el elemento que deseas modificar.

2. Ve a la sección Fill en el panel derecho.

3. Haz clic en el selector de color y aplica tu paleta personalizada.

Ejemplo: Colores en botones

1. Selecciona un botón en tu diseño.

2. Cambia el color de fondo, borde y texto desde el panel de estilo.

3. Usa contrastes adecuados para garantizar la accesibilidad.

Los colores consistentes refuerzan la identidad visual de tu marca.

Ajusta las imágenes

1. Ve al menú Style en el panel derecho.

2. Ajusta radio de borde, sombras, tamaños y demás.

Utiliza formato .webp para tener la mejor calidad y la mejor optimización web. Es el mejor para rendimiento SEO

Ajusta los íconos

Guía completa de íconos

1. Ve al menú Style en el panel derecho.

2. Ingresa el nombre del ícono (búscalos en el sitio oficial de phosphor) y ajusta colores, peso.

Usa la librería Phosphor, es la más completa y con más variantes

Ajuste de tamaños

Cambia el tamaño de elementos

1. Selecciona un componente (texto, botón, imagen, etc.).

2. Usa las opciones de Width y Height en el panel derecho para ajustar las dimensiones.

Escalabilidad en diferentes dispositivos

1. Activa las opciones de diseño responsivo.

2. Usa unidades relativas como % o vh/vw para que los elementos se adapten automáticamente a diferentes tamaños de pantalla.

Ejemplo: Diseño responsivo para imágenes

1. Selecciona una imagen.

2. Ajusta el tamaño usando unidades como 100% width.

3. Prueba tu diseño en vistas previas móviles, de tablet y escritorio.

Mejores prácticas para personalizar tu sitio web

• Consistencia: Usa la misma paleta de colores y tipografía en todo el sitio.

• Accesibilidad: Asegúrate de que el contraste entre texto y fondo sea suficiente para usuarios con discapacidades visuales.

• Pruebas: Revisa tu diseño en diferentes dispositivos para garantizar una buena experiencia en todas las plataformas.

Highlight: Un diseño bien personalizado no solo es estético, sino también funcional y accesible.