Creación de prototipos con datos reales: un tutorial de Framer

Framer es una de las herramientas de creación de prototipos de aplicaciones más poderosas que existen. Se puede utilizar para diseñar para cualquier dispositivo móvil, desde iOS hasta Android. Si sabe un poco de programación, sus capacidades son prácticamente ilimitadas porque está basado en CoffeeScript, un lenguaje de programación relativamente fácil. Un diseñador solo estaría limitado por su imaginación y habilidades de codificación.

Para seguir este artículo, debe tener al menos un conocimiento básico de Framer. Usaremos el modo de diseño y el editor de código. Si desea complementar su conocimiento, puede leer nuestros artículos anteriores de Framer: Cómo crear impresionantes prototipos interactivos, 7 microinteracciones simples para mejorar sus prototipos

Por qué debería usar Framer con datos reales

Un problema común en el diseño o creación de prototipos es la falta de datos reales. Cuando se diseña una nueva función para un producto existente, en lugar de utilizar contenido ficticio, se puede mostrar contenido lógico, relevante y de apariencia real. Puede ser cualquier tipo de datos, fotos de usuarios, por ejemplo. De esta manera, no se pierde tiempo tratando de encontrar contenido falso y se evitarán los errores que surgen del uso de datos no válidos. Todos los datos disponibles son visibles y se puede establecer qué contenido aún se puede necesitar; como resultado, la comunicación con las partes interesadas y el equipo de desarrollo es más efectiva. También es posible diseñar en torno a diferentes escenarios de casos de uso.

Cuando diseñamos una nueva función, a veces olvidamos que no todos los perfiles de usuario están completos, que no todas las categorías de la tienda tienen la misma cantidad de productos y que no todos los productos muestran los mismos datos. La creación de prototipos con datos reales se puede comparar con la construcción de algo con bloques de LEGO: en lugar de trabajar con formas sueltas e imaginarias, podemos usar los componentes existentes de la caja y construir algo real.

¡Hagamos Prototipos con Datos Reales!

La verdadera diversión en Framer comienza cuando se utilizan datos reales que se actualizan en tiempo real desde una base de datos. Se puede aplicar cualquier tipo de datos, por ejemplo: perfiles de usuario con fotos, direcciones de calles, cotizaciones de acciones, tipos de cambio, pronósticos del tiempo, información de transacciones, cualquier dato que las aplicaciones suelen usar. El diseño de productos realmente poderoso comienza a suceder cuando combina la creación de prototipos en tiempo real con datos reales. Y ya no será necesario usar las infames piezas de texto de marcador de posición al estilo latino "lorem ipsum".

La API que usa datos reales: ¿qué es? ¿Cómo lo usamos?

Una interfaz de programación de aplicaciones (API) es la interfaz a través de la cual nos comunicamos con las aplicaciones. Imagina una aplicación como un restaurante. La comida son los datos y los camareros son la API. Le pides la comida a los camareros, eso es todo lo que tienes que hacer. Los camareros (API) y la cocina (base de datos) se encargan del resto.

Se trata de acceder a datos reales que residen en una base de datos determinada.

Cada aplicación tiene una API que permite capturar y mostrar datos. Algunas API están disponibles públicamente y otras se usan solo en productos internos.

Las API disponibles públicamente se utilizan ampliamente para crear nuevas aplicaciones. Por ejemplo, para crear una aplicación meteorológica, se requieren algunos datos meteorológicos. Con la ayuda de numerosos sitios web de pronóstico del tiempo que comparten sus API públicas, es muy fácil. Además, se pueden combinar muchas API diferentes para crear un producto completamente nuevo.

¿Dónde podemos obtener datos reales? Las listas de API abiertas

Hay muchas API disponibles públicamente que proporcionan varios datos. Aquí hay una lista de cinco que son excelentes para crear prototipos con datos reales en Framer. Cada una de estas API también devuelve datos en formato JSON, que se pueden manejar fácilmente en el marco.

Usuario aleatorio: definitivamente la mejor API para principiantes. Genera perfiles de usuario completos y aleatorios, desde un avatar hasta una dirección de correo electrónico.

OpenWeatherMap: esta es una API muy fácil de usar. Le permite consultar el tiempo actual y las previsiones en cualquier lugar. Usando esta API, podemos mostrar datos como la temperatura, la humedad o la velocidad del viento.

Pokeapi: una de las mejores API creadas con fines educativos. ¿Buscas algo sobre Pokémon? Se puede encontrar aquí. Esta es una API RESTful completa vinculada a una extensa base de datos que detalla todo sobre la serie de juegos principal de Pokémon.

Instagram: la primera API en la lista que requiere autorización para usar. Su servicio, sin embargo, es muy sencillo. Puede obtener acceso a todas las fotos y usuarios de Instagram y mostrarlos en su nueva aplicación.

Mapbox: proporciona una serie de servicios increíbles que son fáciles de integrar con una aplicación, desde mapas y direcciones hasta geocodificación e incluso imágenes satelitales. Foursquare, Evernote, Instacart, Pinterest, GitHub y Etsy tienen algo en común: sus mapas funcionan con Mapbox.

Esta API se diferencia de las anteriores porque no devuelve archivos JSON, sino que da acceso a toda la funcionalidad de Mapbox. Mapbox también produjo un excelente tutorial sobre cómo usar su API en Framer.

Tutorial de API de usuario aleatorio en Framer utilizando datos reales

Para comprender cómo trabajar con API en Framer, comencemos con la API de usuario aleatorio. Necesitaremos una sola pantalla de aplicación: una lista de usuarios.

Paso 1: modo de diseño

Aquí hay una lista de usuarios que contiene nombres, apellidos y avatares. Eso es todo lo que se requiere. La parte más importante de este proceso es nombrar y agrupar todos los elementos correctamente. Los avatares y los nombres se agrupan en la capa de cuadro, y todos los cuadros se agrupan dentro de la lista:

Lo último que debe hacerse en el modo de diseño es marcar la capa de la lista como una capa interactiva. Para ello, simplemente haga clic en el icono de destino.

Paso 2: comprender JSON

En primer lugar, es necesario comprender qué es JSON y cómo obtenerlo fuera de Framer. En los documentos de la API de usuario aleatorio, busque una solicitud de datos de la API. Se ve así: https://randomuser.me/api/?results=20. Como puede ver, es un enlace regular que abre un archivo JSON en su navegador:

Tal como está, no parece claro en absoluto. Para ver los archivos JSON con el formato correcto, use el complemento de Chrome llamado JSONview. Con el complemento, el archivo se verá así:

Mucho mejor. Ahora debería ser fácil de leer. El archivo contiene la matriz de resultados con los datos del usuario, que se recibió después de solicitarlo a la API. Entonces, ¿qué es el archivo JSON? Sin entrar en detalles técnicos, es un archivo de texto basado en la sintaxis de JavaScript que contiene datos específicos de una base de datos. JSON se puede usar en Framer para mostrar datos de él.

Paso 3: Importe el archivo JSON a Framer

Ahora, el archivo JSON se puede importar a Framer con una sola línea de código:

 data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

Cree el objeto llamado datos que contendrá el archivo JSON. Utilice la función de impresión para ver si el archivo JSON se importó correctamente:

 print data 

Paso 4: Acceso a datos específicos del archivo JSON

Ahora vuelve a la estructura de archivos JSON:

En este archivo JSON, los results son una matriz que contiene más objetos. Cada objeto es un usuario diferente. Primero, uno de estos objetos tiene que ser el objetivo. Utilice la función de impresión para comprender mejor lo que está pasando:

 print data.results[1]

Consola del enmarcador:

 {gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"[email protected]", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

La cifra entre paréntesis representa un número del objeto en la matriz. Usando data.results[1] , se recibe acceso a todos los datos del primer usuario en el archivo JSON.

Luego, se pueden mostrar elementos como nombre o apellido:

 print data.results[1].name.first

Framer responde con: "benjamin" . Et voila! ¡Se ha logrado el acceso a los datos de la API!

Paso 5: Mostrar los datos de JSON

¡Finalmente! Lo único que queda es mostrar los datos. Ahora, se debe crear un bucle simple que apunte a todas las capas desde el modo de diseño. Obtenga más información sobre la selección de capas con un bucle en este artículo anterior.

Estamos usando x = 0 para apuntar al primer objeto en la matriz de los datos JSON. Luego, para cada elemento secundario de la lista , asignamos los datos de los datos JSON. Al final del ciclo, agregamos +1 para usar datos del siguiente objeto en la matriz:

 x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++

¡Eso es todo! ¡Ahora puede volver al modo de diseño y jugar con el diseño, y los datos reales se mostrarán en su prototipo!

Puede descargar el archivo Framer anterior aquí: https://framer.cloud/djmvG

API de Instagram: datos en tiempo real en Framer

Instagram es un punto de partida interesante para comenzar un viaje con datos en tiempo real. Las instrucciones son relativamente fáciles de seguir y la API proporciona datos interesantes: recibe acceso completo. En esta parte del artículo, la API de Instagram se usa para crear un prototipo simple que muestra los datos de mi perfil de Instagram: nombre, última foto y número de Me gusta.

Paso 1: obtenga un token de acceso

Para usar la API de Instagram, se requiere un token de acceso. Se puede obtener de dos formas diferentes:

1. La forma más común es ir al sitio web de Instagram para desarrolladores y seguir las instrucciones. Este proceso puede ser complicado para personas no técnicas.
2. Afortunadamente, existe una manera fácil y segura de obtenerlo. Pixel Union desarrolló un proceso de un solo clic mucho más fácil: vaya a su sitio web y haga clic en el botón Obtener token de acceso.

Paso 2: habilite las solicitudes entre dominios

Después de recibir un token de acceso, se requiere un pequeño truco. Instagram no permite solicitudes de API de su host local (Framer) y, por lo tanto, se deben usar consultas del lado del servidor. Uno de ellos es JSONProxy. Vaya a su sitio web, pegue una solicitud de la API de Instagram y presione IR.

Una vez hecho esto, en lugar de usar el enlace API de Instagram, se puede usar el enlace JSONProxy.

Paso 3: Diseñe una aplicación simple en Framer

Solo hay tres elementos cruciales en este diseño: el marcador de posición del nombre, un rectángulo que mostrará la última foto y la cantidad de Me gusta debajo de la imagen. Todos estos están marcados como capas interactivas para ser reutilizados en el editor de código.

Paso 4: escriba cuatro líneas de código para usar datos de Instagram

El flujo aquí es el mismo que en la API de usuario aleatorio. Se puede acceder a cualquier dato de usuario desde Instagram:

 yourAccessToken = "YOUR-ACCESS-TOKEN" instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}" likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url

¡Eso es todo! Cinco líneas de código, y puede crear prototipos utilizando datos reales y en vivo proporcionados por Instagram. Descargue un prototipo funcional aquí: https://framer.cloud/iYAXl. (Tenga en cuenta que debe agregar su propia CLAVE DE ACCESO para ejecutar este prototipo).

Resumen - Pros y contras

Mediante la creación de prototipos que utilizan datos reales obtenidos a través de una API de una base de datos, salen a la luz nuevas posibilidades creativas y la capacidad de verificar el diseño del producto: se pueden construir prototipos que son 100% consistentes con el producto y probar nuevas funciones en usuarios reales. . Con una vista previa de todos los datos en el sistema, es más difícil pasar por alto un elemento que debe incluirse en el diseño, y con acceso a datos reales, se evitan errores de diseño que provienen del uso de datos falsos.

Dicho esto, la creación de prototipos de alta fidelidad en Framer es bastante costosa. Se necesitan muchos ajustes para obtener el efecto deseado, lo que consume tiempo y dinero. Como se muestra en el ejemplo de API de usuario aleatorio, la comunicación con la API no es difícil, pero aún se necesita mucho tiempo para crear un gran prototipo a partir de ella.

Sin embargo, cuando se le da la medida completa, ciertamente vale la pena considerarlo. ¡Feliz creación de prototipos con datos reales!

• • •

Lectura adicional en el blog de diseño de Toptal:

• Mejores prácticas de diseño de interfaz de usuario y errores comunes
• Estados vacíos: el aspecto más pasado por alto de UX
• La simplicidad es clave: exploración del diseño web mínimo
• Principios heurísticos para interfaces móviles
• Diseño para la legibilidad: una guía para la tipografía web