Creación de prototipos para la Web con Framer
Framer es una herramienta realmente poderosa que puede prototipar cualquier cosa que se te ocurra, pero si echas un vistazo a Framer's Gallery notarás rápidamente algo:
De los 54 ejemplos, 48 de ellos son aplicaciones, 4 para Apple Watch, 1 para iPad y 1 para Apple TV. ¿Framer está pensado para el diseño web / de escritorio tradicional?
Absolutamente.
En IBM Design la mayoría de mis diseños están hechos para aplicaciones web de escritorio empresariales. La mayoría de los diseñadores con los que trabajo usan Bosquejo (Incluyéndome a mi). Estos archivos de Sketch son prototipados utilizando una herramienta como InVision o recreado y prototipado en código. Como desarrollador front-end en un equipo de diseño, tengo una posición única donde diseño y codigo prototipos.
Después de aprender los conceptos básicos de Framer, decidí agregarlo a mi flujo de trabajo y realmente mejoró mi proceso de diseño. La parte más poderosa es poder importar un archivo de Sketch estático en Framer y convertirlo en un prototipo realista e interactivo en un tiempo relativamente corto.
Con esto, no tengo que perder un tiempo valioso en el comienzo del proceso de recreación de diseños en código. Puedo obtener ideas frente a las partes interesadas y los usuarios mucho más rápido. Puedo guardar la codificación para más tarde cuando el proyecto esté más consolidado.
Después de usar Framer por unos meses, he aprendido algunas cosas:
Planea y diseña tus prototipos
Antes de comenzar un proyecto, decido algunas cosas:
¿Qué estoy tratando de lograr?
Ya sea que el prototipo sea para pruebas de los usuarios o para conceptualizar una idea, ¿cuál es la cantidad mínima de trabajo necesaria para transmitir mi idea o para obtener información de las pruebas? No solo soy perezoso;), esto ayuda a decidir las interacciones necesarias, las animaciones y las pantallas que se necesitan.
Mientras más tiempo pase en su diseño, más se apegará. Cuanto más apegado, menos probabilidades tendrá de hacer los cambios necesarios.
Usemos el prototipo anterior como ejemplo.
Estaba trabajando en un nuevo proyecto y quería explorar cómo se vería un diseño basado en tarjetas con animaciones 'entremezcladas' entre estados. Esbocé la idea básica que quería hacer y la utilicé como mi punto de partida.
Si tu echar un vistazo en el prototipo terminado, solo se puede hacer clic en la primera tarjeta en cada paso. No hay forma de regresar, no hay estados de vuelo estacionario, el contenido de la última pantalla no está completo y no es casi perfecto. Ninguno de ellos fue necesario para transmitir mi idea, así que no dediqué tiempo a incluirlos. Framer puede hacer casi cualquier cosa, pero eso no significa que deba intentar hacer todo en su prototipo.
Cree flujos de IU con el impresionante módulo ViewController de Andreas
Puedes usar el ViewController El plugin Sketch para crear flujos de UI correctos en Sketch. Convierta rápidamente sus diseños en prototipos clicables sin tener que escribir código.
Esto es ideal para presentar su trabajo a las partes interesadas y es realmente bastante simple de hacer. En lugar de recorrer un archivo de Sketch con una docena de mesas de trabajo o un .pdf, puede presentar un prototipo interactivo o compartir la URL de su proyecto alojado de Framer.
Dependiendo de lo que estoy tratando de lograr, puedo terminar escribiendo algún código para cosas como efectos de desplazamiento, animaciones y entradas de texto para un toque de realismo e interactividad. Una vez más, como diseñador, decida qué es necesario para transmitir su idea e implementarla de manera adecuada.
Revisa Andreas 'Cree flujos de IU con el artículo Sketch and Framer para aprender más sobre el plugin.
Microinteracciones
Creo que hay algunas razones por las que los prototipos móviles son realmente populares con Framer, uno de los cuales es que las microinteracciones parecen ser mucho más comunes en los dispositivos móviles. ¡Pero no tiene por qué ser así! Creo que los diseñadores de la web pueden ser mejores para hacer que nuestro trabajo tenga más movimiento y Framer es realmente bueno en esto.
Este es solo un ejemplo simple de una interacción rápida que hice usando un archivo de Sketch que un diseñador de mi equipo ya había creado. Explorar interacciones como esta lleva una cuestión de minutos.
Claro, pero ¿por qué no solo el código?
Como desarrollador front-end, muchos de mis proyectos eventualmente terminarán con un prototipo codificado. Luego utilizo este prototipo como base para escribir el código de entrada en el producto, trabajando junto con la ingeniería lateral. Entonces, ¿por qué no solo codificar desde el principio?
Como mencioné antes, velocidad. Puedo aclarar rápidamente las ideas que ya hayan hecho yo u otro diseñador importándolos de Sketch a Framer. Es genial para la primera parte del proceso de diseño en el que exploras ideas e implementas comentarios rápidamente. Puedo moverme bastante rápido en el código, pero Framer lo lleva al siguiente nivel.
Otra razón es la libertad. El simple hecho de que todo mi código escrito en Framer será desechado es realmente genial. Me permite probar cosas que no haría de otra manera y ser un poco más flexible con mi código. Puedo pasar 15 minutos explorando una idea y luego tirarla sin ningún remordimiento.
Algunos consejos y trucos
Usted (o el diseñador con el que está trabajando) probablemente tendrá que configurar los archivos de Sketch de forma un poco diferente.
- Agrupe sus capas. Las capas que no están en un grupo son ignoradas
- Evita usar espacios en los nombres de tus grupos
- Las capas ocultas en Sketch todavía se importan, pero su visibilidad se establecerá en falso.
- Crea nombres simples y únicos para tus mesas de trabajo
- Un signo menos (-) al final de su mesa de trabajo excluirá su importación al marco
Aplanar cualquier capa en Sketch que permanezca estática. Esto mejorará el tiempo de carga de su proyecto, que es especialmente bueno cuando se crea un prototipo más pesado. Puede hacer esto agregando un asterisco (*) al final de la capa en Boceto.
Vale la pena pasar algo de tiempo con los diseñadores de tu equipo para repasar cómo configurar los archivos de Sketch para que se adapten mejor al flujo de trabajo y lo que funcione mejor para el equipo.
Cuando importe un archivo de boceto en Framer, verá algo como esto:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Reemplace el boceto con $, y ahora puede usar $ para hacer referencia a sus capas de boceto, evitando escribir la palabra boceto cientos de veces:
$ = Framer.Importer.load("imported/design@1x")Utilice el fragmento 'Cursor normal' para un puntero de mouse normal:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Importo mis diseños a @ 2x y luego los bajó, por lo que son extra crujientes. Tenga en cuenta que esto no parece llevarse bien con el módulo ViewController mencionado anteriormente.
Framer.Device.contentScale = .5Sketch y Framer utilizan diferentes plantillas / dispositivos predeterminados para la web. Sketch usa 1440 × 1024 mientras que Framer usa 1440 × 900. Opto por 1440 × 900. Sin embargo, no creas que estás limitado a 900 píxeles de altura, puedes crear fácilmente páginas desplazables en Framer.
[- Este artículo fue originalmente publicado en Medium , republicado con el permiso del autor -]