Nueva caracteristica: Líneas de tiempo dibujadas a mano usando RoughJS

Desde que nos encontramos por primera vez con la increíble biblioteca de formas dibujadas a mano de Preet Shihn, RoughJS, hace unos años, hemos querido utilizarla en uno de nuestros productos. La apariencia incompleta brinda una peculiaridad y una sensación despreocupada a una interfaz de usuario que amamos.

A principios de este mes, nos encontramos con un poco de tiempo libre. Habíamos terminado la mayoría de las características clave que queríamos que incluyera la versión inicial de ChronoFlo Timeline Maker, y nos preguntábamos a qué deberíamos dirigir nuestra atención a continuación.

Durante una sesión de tormenta de ideas, se mencionó la biblioteca de formas dibujadas a mano de Preet, y después de un rápido vistazo a algunos de los ejemplos en el sitio web de RoughJS, decidimos que nuestra próxima gran característica sería usar RoughJS para mostrar líneas de tiempo con un estilo dibujado a mano

El objetivo era crear dos temas dibujados a mano, uno claro y otro oscuro, que los usuarios pudieran seleccionar para dar a sus líneas de tiempo una apariencia 'bosquejada'. También queríamos dar a los usuarios la capacidad de controlar la cantidad de rugosidad a través de un control deslizante, similar al control deslizante que puede encontrar debajo de la línea de tiempo anterior.

No estábamos seguros de cuánto tiempo nos llevaría integrar RoughJS con nuestro panel de eventos y algoritmos de representación de la línea de tiempo. A diferencia de otros productos de creadores de línea de tiempo, ChronoFlo Timeline Maker ofrece múltiples diseños de paneles de eventos y numerosos diseños de línea de tiempo, incluidos formatos horizontales y verticales, e incluso un diseño de estilo de paralaje 3D.

Una línea de tiempo que combina la vista 3D única de ChronoFlo y nuestro nuevo tema Hand Drawn Dark.

Conseguir que todos estos diseños y diseños se rendericen con una apariencia dibujada a mano no iba a ser fácil. Afortunadamente, RoughJS es un buen software con una API fácil de entender, y obtuvimos una prueba de concepto en poco tiempo.

Luego hubo todo el trabajo complicado de asegurarnos de que RoughJS trabajara con todos los diferentes escenarios de línea de tiempo que nuestro software puede generar, corrección de errores, pruebas, ajustes, etc. Aproximadamente un mes desde la idea inicial hasta el lanzamiento de la función. No está mal, cuando consideras que no era lo único en lo que estábamos trabajando.

Y ahora ChronoFlo Timeline Maker cuenta con una característica que, hasta donde sabemos, no ofrece ningún otro producto de fabricante de línea de tiempo en el mercado: líneas de tiempo dibujadas a mano. Muchas gracias a Preet y RoughJS por hacer esto posible.

Ahora echemos un vistazo a cómo puede aprovechar las líneas de tiempo dibujadas a mano usted mismo usando ChronoFlo Timeline Maker. Es realmente fácil de hacer.

1 Vaya a www.chronoflotimeline.com e inicie sesión en su cuenta. Si aún no ha iniciado sesión, haga clic en el botón 'Go to my account'.

2 Ahora en la página de su cuenta, seleccione una línea de tiempo para editar. Si aún no ha creado ninguna línea de tiempo, este es el momento de hacer su primera línea de tiempo. Asegúrese de agregar algo de contenido a su línea de tiempo.

3 El siguiente paso es elegir uno de nuestros temas dibujados a mano. Para ello, haga clic en el botón de opciones a la derecha de la pantalla, y aparecerá nuestro panel de administración. Elija la opción 'Change the appearance of your timeline'. Luego, seleccione 'Hand Drawn Light' o 'Hand Drawn Dark' en el menú desplegable Tema. Asegúrate de guardar.

4 Ahora tiene una línea de tiempo dibujada a mano para jugar y sorprender a sus amigos o clientes.

Los creadores expertos de la línea de tiempo pueden querer probar algunas otras cosas. El estilo dibujado a mano se ve mejor con algunos diseños de paneles de eventos que otros. Por lo tanto, es posible que desee explorar los diferentes diseños de paneles a través de la opción 'Panel' en la sección 'Timeline Appearance'.

YTambién puedes hacer tus propios temas dibujados a mano. El panel de edición de temas ahora incluye un control deslizante para la aspereza. Arrastre esto hacia la izquierda o hacia la derecha para que un tema tenga un aspecto más desordenado o más ordenado.

Cree sus propios temas dibujados a mano con nuestro nuevo control deslizante 'roughness'.

Realmente esperamos que te guste la nueva función de línea de tiempo dibujada a mano de ChronoFlo Timeline Maker, y no puedo esperar a ver lo que creas con ella. Comparta con nosotros sus creaciones de línea de tiempo dibujadas a mano a través de las redes sociales o envíenos un correo electrónico a hello@chronoflotimeline.com.

Como de costumbre, puede mantenerse al día con las últimas noticias y desarrollos de ChronoFlo Timeline Maker siguiéndonos en Twitter y Facebook. Si tiene alguna pregunta sobre nuestro software, envíenos un correo electrónico a hello@chronoflotimeline.com.