Twitter Bootstrap hace que la creación de diseños de página complejos sea muy fácil. Ingrese algunas líneas de HTML, aplique algunas clases y tendrá una maqueta de trabajo mínima y de aspecto decente.
¿No sería bueno si las cosas fueran incluso más fáciles? ¿Qué pasaría si Bootstrap tuviera una interfaz visual? ¿Qué pasaría si pudieras construir páginas de Bootstrap arrastrando y soltando elementos en un lienzo vacío? Con Easel.io, puedes hacer exactamente eso. Vamos a ver cómo funciona.
Empezando
Una vez que pase por el proceso de registro rápido, será llevado a su Tablero de control. Aquí debería ver una página de demostración incluida y algunos controles para crear un nuevo documento desde cero.
Desde el principio, me gustaría desear que hubiera algunos diseños de página básicos que pudieran usarse como bloques de construcción. Sería genial ver un montón de plantillas de inicio aquí en el futuro.
En lugar de esto, pulsa el botón 'Crear un documento? botón para empezar. Desde aquí, asigne un nombre a su documento y establezca los permisos utilizando el menú desplegable.
Interfaz de usuario y herramientas
La interfaz de usuario aquí es increíblemente simple. Solo hay un gran lienzo vacío y un conjunto de herramientas que se ejecutan en el lado izquierdo.
El conjunto de herramientas estándar de Bootstrap se divide en ocho categorías plegables: tipografía, tabla, formularios, botones, navegación, contenedores, miniaturas y varios.
También hay un conjunto de herramientas básicas, basadas en íconos, a la derecha con algunas herramientas típicas: mover, rectángulo, tipo, zoom y desplazamiento. Además de los elementos de Bootstrap, hay algunos elementos de estilo personalizados en el? Paquete de caballete? y un conjunto de iconos gratuitos que puedes usar en tu diseño.
Flujo de trabajo
Easel tiene un flujo de trabajo bastante abierto. Simplemente arrastre los elementos al lienzo y mezclelos. Sin embargo, si desea que su código resultante se estructure correctamente y que el resultado final sea receptivo, deberá seguir un proceso mucho más específico.
No hay mucha documentación de la que hablar, por lo que estoy seguro que soy un poco confuso sobre los detalles, pero así es como creo que funciona.
Comience con un contenedor
Lo primero que querrás hacer es arrastrar un contenedor. Esto se encuentra en los? Contenedores? sección de tus herramientas.
Piense en esto en términos de su sistema de cuadrícula típico, los contenedores contienen filas de contenido, cada una de las cuales contiene un número específico de columnas.
Cuando tiene un contenedor o cualquier otro elemento seleccionado, el lado derecho de la pantalla cobra vida con varias opciones para ajustar el tamaño, la redondez, etc. de lo que haya seleccionado.
Estas opciones son sensibles al contexto y cambian según lo que haya seleccionado.
Ahora una fila
Ahora que tiene un contenedor con el que trabajar, es hora de arrastrar en una fila. Asegúrese de arrastrarlo al contenedor que creó en el paso anterior. Debería ver un resaltado en la posición emergente que le ayuda a ver dónde está colocando la fila.
Por defecto, una fila aparece con dos columnas. A medida que hace clic y arrastra para cambiar el tamaño de los límites de uno, el otro se adapta automáticamente para ocupar el resto del espacio.
Si desea más columnas, simplemente seleccione una y su botón de duplicar cerca de la parte superior del menú del lado derecho. También puede configurar manualmente el ancho de cada columna usando el menú desplegable debajo de ¿Personalizado? menú de herramientas
Elementos de arrastrar y soltar
Ahora que tiene algunas columnas con las que trabajar, puede comenzar a llenarlas con varios elementos. Aquí utilicé los tres cuadros que configuré para colocar un texto bonito.
Desde aquí, simplemente repita este proceso una y otra vez. Puede usar el contenedor existente, simplemente arrastre las nuevas filas y continúe agregando elementos a esas filas. Aquí he incluido otra fila de texto y algunas imágenes en miniatura.
Personalización
Una vez que tenga algunos elementos en la página, puede comenzar a ajustar y personalizar esos elementos. Por ejemplo, seleccione un texto e intente cambiar el tipo de letra. Easel tiene excelentes opciones de tipo web tanto para Typekit como para Google.
Otras golosinas
Antes de terminar, vale la pena señalar algunas características más. Primero, como mencioné anteriormente, hay un gran conjunto de grandes iconos integrados en la aplicación:
También hay algunas opciones de vista de cuadrícula súper útiles que le permiten ver realmente lo que está pasando con el diseño de Bootstrap. Puede ver y personalizar su cuadrícula en este menú.
Dado que seguimos un flujo de trabajo receptivo, podemos usar los íconos en la parte superior derecha para cambiar el tamaño de la ventana gráfica y ver cómo responde nuestro diseño a diferentes escenarios.
Finalmente, una vez que haya terminado con su diseño, puede descargar el código y los recursos que se usaron. Esta característica es, con mucho, la mejor parte de la aplicación, ya que hace de sus prototipos algo que realmente puede usar.
El código que se genera aquí es agradable y limpio; muy cerca de lo que obtienes cuando trabajas a mano con Bootstrap.
¿Cómo es?
A pesar del hecho de que siempre estoy hablando sobre WYSIWIGs, estaba muy emocionado de tener en mis manos Easel. Por un tiempo he pensado que el sistema de código limpio de Bootstrap sería fácil de automatizar y he estado esperando que alguien saltara a un generador de páginas interactivo de Bootstrap.
Una vez que tuve mis manos en Easel, mis pensamientos se mezclaron. Examinemos algunas áreas específicas y cómo les fue.
Concepto: impresionante
Las personas detrás de Easel han tenido un gran comienzo. Tienen un concepto estelar y una base sólida en el lugar para construir algo que es realmente útil para los usuarios de Bootstrap (de los cuales hay muchos).
Instrucciones: Casi inexistente
Actualmente, parece que puedo encontrar cualquier documentación real sobre cómo usar Easel (¡tal vez esté ahí y no lo veo!). Concedido, es el tipo de aplicación con el que solo desea recoger y ejecutar, pero todavía hay suficiente complejidad aquí para que sea necesaria cierta documentación en profundidad.
Hay al menos algunos consejos útiles cuando se desplaza sobre varios elementos de la interfaz de usuario. Estos son agradables, pero no son suficientes por sí solos.
Flujo de trabajo de diseño: un poco raro
Crear una página con Easel es súper fácil, simplemente arrastre y suelte los elementos en la página. Desafortunadamente, cuando empiezas a hacer esto, tienes la sospecha de que estás haciendo algo mal.
Entonces descubres los? Contenedores? y te das cuenta de que quizás debías usar contenedores y filas en tu diseño. Sin embargo, si este es realmente el primer paso, ¿por qué no están en la parte superior de la lista de herramientas?
Una vez que te das cuenta de que deberías crear filas, dividir esas filas en algo distinto de dos columnas es realmente complicado. Me tomó mucho tiempo descubrir cómo hacerlo y todavía no estoy seguro de hacerlo correctamente.
Me gustaría replantear completamente cómo funciona el diseño. Primero, coloque las herramientas de diseño en la parte superior del conjunto de herramientas. A continuación, una vez que se coloca una fila en un contenedor, muestre algunos controles que me permiten aumentar y disminuir fácilmente el número de columnas en ese contenedor, así como ajustar el ancho de cada columna.
Además, dame unos cuantos módulos de diseño predefinidos para arrastrarlos. Podrían verse algo como esto:
Estos le permitirían arrastrar y crear rápidamente estructuras de diseño comunes con casi ningún esfuerzo, reduciendo en gran medida la frustración actual del diseño.
Imágenes de marcador de posición: un desastre
Definitivamente debe haber un mejor sistema para las imágenes de marcador de posición. Cuando arrastro una única imagen de marcador de posición, parece que no puedo cambiar el tamaño de manera efectiva. Esta funcionalidad es súper defectuosa y salta entre una imagen pequeña o una enorme indeseable. Dame una forma sencilla de lanzar una imagen de marcador de posición que ocupe doce columnas y tenga 300px de altura, una que tenga cuatro columnas de ancho y 100px de altura, etc.
Además, la cuadrícula de miniaturas tampoco es muy fácil de trabajar. Creo que debería haber controles simples que me permitan establecer la cantidad de imágenes que se usarán en cada fila y columna, pero no existe tal sistema. En su lugar, obtienes tres imágenes de forma predeterminada y tienes que pasar por un proceso incómodo y torpe para copiar y pegar tu camino a la galería que realmente deseas.
Precios: genial
Realmente me gusta mucho la estrategia de precios. Esperaba que bloquearan la descarga de código para usuarios gratuitos similares a Gridset, pero descubrí que en realidad podía hacer casi todo lo que quisiera con el plan gratuito.
Los planes premium esencialmente le cobran por una mayor colaboración y páginas ilimitadas, lo que definitivamente es justo. Si legítimamente encuentra una manera de repartir sitios más rápido con este producto, entonces $ 15 por mes es una obviedad.
¡Inténtalo!
Fui bastante duro con Easel en mis comentarios, pero eso es solo porque veo un montón de potencial aquí y sé que esto podría ir desde? Algo bueno para jugar? ¿A una? herramienta indispensable? Con algo de tiempo y atención.
En su forma actual, Easel es una buena herramienta de maqueta estática, pero para los prototipos en vivo y receptivos, me encontré pensando continuamente en cómo puedo codificar cualquier diseño de Bootstrap que deseo mucho más rápido. Idealmente, la herramienta debería ahorrarme tiempo.
Dicho todo esto, le recomiendo que pruebe Easel por sí mismo. Déle una oportunidad y deje un comentario a continuación para hacernos saber lo que piensa.