Si has visitado nuestra página de inicio últimamente, puede que hayas notado algunos cambios. Aquí tienes un vistazo rápido a las novedades, por qué hemos decidido renovarla y algunos recursos "detrás de escena" para que veas cómo construimos las distintas partes.
Hora de crecer: edición página de inicio
Al comenzar este proyecto, nos centramos en lo que debíamos mejorar, preguntándonos: "¿qué es lo que no se está diciendo en nuestro sitio web?". Y aunque nuestra antigua página de inicio explicaba decentemente qué es Webflow, no siempre ayudaba a la gente a entender "el sueño", es decir, cómo usar Webflow para superar los problemas a los que se enfrentan en su trabajo diario.
Además, el último rediseño de nuestra página de inicio fue en diciembre de 2016 y, desde entonces, el producto ha madurado. Mucho.
Aunque añadimos páginas de destino aquí y allá para reflejar algunos de nuestros lanzamientos de funciones principales, no habíamos revisado la página de inicio, por lo que empezó a parecer un conjunto de parches y, en última instancia, incompleta. Con la llegada de Webflow Ecommerce, nos dimos cuenta de que Webflow, la plataforma, estaba superando rápidamente a Webflow, el sitio web.
Necesitábamos replantear la "historia" de Webflow a través de la lente de cómo tú usas Webflow. Eso significaba sacar a la luz los diferentes casos de uso de nuestra herramienta mediante páginas dedicadas para freelancers, dueños de negocios, agencias y prototipadores.
Definiendo nuestra historia
Aunque queríamos explicar mejor las distintas formas en las que puedes usar Webflow, también necesitábamos destilar la plataforma en un marco que:
- Capture la experiencia de trabajar con Webflow, y
- Pueda servir como base para la historia de nuestro producto en los próximos años.
Al final, nos decidimos por tres "fases" principales de la plataforma Webflow: diseño, construcción y lanzamiento. Estas tres fases se corresponden a grandes rasgos con el ciclo de vida de un sitio en Webflow y sirven como paraguas para nuestras funciones principales:
- Diseño: Esto abarca la libertad creativa y la precisión que Webflow ofrece a los diseñadores. Se refiere a la experiencia principal del Diseñador (creación de diseños) y a la libertad creativa de las Interacciones.
- Construcción: Esto implica las capacidades más orientadas a "bases de datos" que Webflow desbloquea con el CMS y, en el futuro, con el comercio electrónico.
- Lanzamiento: Esta es la vida de los sitios web una vez terminados, incluyendo nuestra infraestructura de alojamiento y la experiencia de usar el Editor para mantener el sitio.
Prototipado y construcción en Webflow
Una vez que tuvimos una dirección de contenido clara, pasamos semanas y semanas prototipando el movimiento y el diseño en Webflow, lo que nos permitió iterar mucho más rápido que con otras herramientas de prototipado.
Al final, esto nos facilitó mucho la vida. Una vez que dimos con una página que se sentía bien en cuanto a movimiento, pudimos construir sobre el prototipo y añadir los detalles necesarios para llevarla hasta la meta.
También pudimos invitar al equipo de contenido al Designer para que ajustaran los textos mientras seguíamos trabajando en las fases finales de la discusión sobre el contenido.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
El llamado “MEGANAV”
Una de las novedades más destacadas de nuestro sitio web es la navegación desplegable, a la que llamamos interna (y cariñosamente) MEGANAV. Esto no solo creó más espacio para enlaces y páginas, sino que también vimos cómo una navegación visualmente más rica podía orientar mejor a los usuarios sobre la plataforma en su conjunto.
Margen de mejora
A medida que nuestro sitio creció durante el último año, nuestra antigua navegación desplegable dejó de ser eficaz para mostrar la gran variedad de recursos que teníamos y, a veces, parecía desorganizada, ya que nuestra sección de “recursos” se convirtió en un cajón de sastre de páginas diversas. Nuestros casos de éxito estaban enterrados bajo una página de inicio de “clientes”, y sabíamos que pronto lanzaríamos una serie de páginas centradas en perfiles de usuario que solo harían que este problema fuera más evidente.
Más que una simple navegación
No todas las navegaciones necesitan ser MEGA, pero en Webflow, la enorme cantidad de productos y casos de uso debe capturarse de una manera que sea visualmente informativa y ayude a los usuarios a comprender el alcance de la plataforma de Webflow.
Así que la dividimos en tres secciones principales, cada una con su propio tratamiento visual y microcopy:
- Funcionalidades: Incorporamos la estructura “Diseña, construye, lanza” en nuestra navegación para exponer los pilares de la plataforma, dando a la gente la oportunidad de centrarse realmente en áreas específicas de Webflow.
- Por qué Webflow: Hablaremos de estas páginas más adelante con más detalle, pero esta sección trata menos sobre “qué” es Webflow y más sobre “por qué” Webflow es importante.
- Recursos: Tener un producto es una cosa, pero contar con una comunidad de apoyo y un extenso centro de recursos para el aprendizaje es igual de importante. Dado lo fundamental que es el aprendizaje para Webflow, queríamos destacar los recursos detrás de la plataforma en un lugar privilegiado.
Con todo esto en mente, la nueva navegación orienta mejor a las personas hacia la plataforma y responde a la pregunta: “¿Qué es Webflow y por qué debería importarme?”
Construyendo el MEGANAV en Webflow
Construir esto en Webflow fue todo un reto. Exploramos varios enfoques; si te interesa saber cómo lo hicimos, echa un vistazo a un par de prototipos (versión 1, versión 2) de iteraciones anteriores que precedieron a la que elegimos (aviso: al ser prototipos, no están adaptados para móviles).
Páginas de “¿Por qué Webflow?”
Como herramienta creativa, Webflow puede hacer mucho, pero la amplitud de casos de uso que cubre no siempre es obvia después de explorar las páginas sobre nuestras funcionalidades principales.
Por ejemplo, cuando un diseñador de producto llega a Webflow.com, puede deducir que Webflow sirve para crear prototipos, pero le facilitamos mucho el trabajo si simplemente le explicamos el porqué y el cómo crear prototipos con Webflow le ayuda a colaborar con los desarrolladores.
Para ayudar a orientar a los usuarios en su primer contacto con Webflow, decidimos crear páginas que aborden específicamente los beneficios y funciones más relevantes para las cuatro formas principales en las que vemos que la gente utiliza Webflow:
Al comenzar este proyecto, sabíamos que ya contábamos con mucho contenido en nuestras páginas de funciones sobre qué es Webflow, pero no tanto sobre el porqué. Estas páginas están diseñadas para cerrar esa brecha.
Contenido de apoyo al diseño
Desde una perspectiva de diseño, sabíamos que cada página contenía mucha información, pero queríamos asegurarnos de que la experiencia de navegación siguiera siendo inspiradora y capaz de despertar emociones.
También había mucho que se podía decir con movimiento y diseño en lugar de solo texto. Por ejemplo, usamos patrones de desplazamiento tipo "apilado" para reforzar la sensación de "proceso" que experimenta cada perfil al trabajar en Webflow, lo que se conecta con nuestro enfoque principal: resaltar la versatilidad de Webflow como plataforma.
Además, recurrimos a ilustraciones en las secciones principales de cada página para crear una conexión emocional con los visitantes, algo difícil de lograr solo con texto. (Nos pusimos creativos con la página de prototipado: echa un vistazo a la versión clonable del encabezado para ver cómo está hecha).
¿Qué te parecen nuestros últimos rediseños? ¿Cómo abordas tus propios rediseños? ¡Cuéntanoslo en los comentarios!
