7 ventajas de crear tu portfolio de Diseño UX en Framer
Hace unos meses Framer lanzó la versión beta de su producto para crear sitios web. Hace mucho que utilizaba Framer para hacer prototipos de alta fidelidad pero esta nueva herramienta realmente me sorprendió así que me sumé a probar la versión beta para construir mi nuevo portfolio.
Lo que ha sucedido es lo de siempre. Cada vez que rediseño el portfolio me detiene la indecisión de cuál es el mejor layout, cuáles son los proyectos que quiero mostrar, qué estilo me representa mejor. Es como si se me olvidara diseñar experiencias cuando tengo que diseñar mi propio producto 🤦♀️.
Pero al fin 4 meses después acabo de publicar la primera versión de la Homepage de mi portfolio.
Así que ahora te puedo contar desde mi experiencia como ha sido utilizar Framer para hacer el portfolio y cuales son las ventajas que tiene desde mi punto de vista.
Ventajas de Framer para crear sitios web
1. La interfaz es muy similar a cualquier otro programa de diseño.
Framer es muy similar a Figma, Adobe XD o cualquier otro programa de diseño UI. Tienen una estructura similar con un panel de manejo de capas a la izquierda, un panel de propiedades a la derecha y el area central para diseñar.
2. Tiene integraciones y componentes preconstruidos que agilizan la creación del sitio.
Algunos de los ejemplos de componentes que puedes utilizar son:
- Formularios: Formspark, Hubspot, Mailchimp, Typeform
- Audio: Spotify, Apple Podcasts, Soundcloud, Apple Music, SImplecast
- Video: Youtube, Vimeo, Lottie
- Integraciones con redes sociales: Instagram, Facebook, Twitter, Google Maps, Trustpilot, Tagembed
- Ecommerce: Eventbrite, Gumroad, Shopify
- Calendario: Calendly
- Chat: Intercom
3. Tiene un sistema de manejo de contenidos propio.
Esto facilita completamente manejar el contenido del sitio y crear páginas dinámicas sobre todo si los casos de estudio que planeas incluir tienen estructuras similares.
También es muy útil si quieres incluir un blog propio.
4. El sitio es completamente responsive y es increíblemente fácil de hacer !!
Puedes construir los puntos de ruptura viendo todas las resoluciones como si lo hicieras en Figma para exportar.
Simplemente empieza por la resolución que prefieras. Y luego al agregar una nueva resolución vas a tener todo el mismo contenido reorganizado para ese nuevo tamaño.
Seguro vas a tener que reorganizarlo si ves que no queda como pensabas, pero ya es una maravilla que sea casi completamente automatizado.
Y obvio, como es el mismo contenido, cada vez que actualices algo en una resolución se va a actualizar también en las demás.
5. Toca el botón publicar y ya tendrás tu portfolio online, así de sencillo.
Cuando intentes publicar por primera vez vas a ver una url bastante rara y que seguro no te va a gustar.
La buena noticia es que Framer te permite crear un subdominio propio completamente gratis, así que tu portfolio tendría una url similar a: example.framer.website
Si lo que quieres es poner tu dominio personal entonces si tendrás que pagar un plan premium.
6. Mantente al tanto del tráfico de tu sitio.
Si tienes obsesión con los datos y analíticas te va a encantar que Framer te brinda una sección de analíticas de tu sitio.
Y si eso no es suficiente siempre puede incluir tu ID tracking de Google Analytics 😉.
7. Configura los datos de tu sitio para SEO.
Desde la sección de configuración de tu sitio puedes incluir los datos de tu sitio para que se indexe correctamente en buscadores. Estos son los datos que puedes configurar:
- Título del sitio
- Idioma
- Descripción
- Favicon
- Imagen para open graph
Bonus!!
Framer permite embeber código o widgets de servicios externos. Esto aunque suene a que es para programadores en realidad es super útil. Acá te dejo algunos casos de uso.
Fue un gusto compartir contigo lo que aprendí en estos meses, espero que te sirva para decidir si estabas considerando Framer para construir tu portfolio.
Acá te dejo el mio por si quieres ver como quedó por ahora y si tienes comentarios o recomendaciones serán super bienvenidos. 😁
