Share
Las aplicaciones basadas en el navegador son cada vez más frecuentes, y su viabilidad para el uso en diseño web está aumentando constantemente. Claro, es posible que no tengan el gruñido completo de las aplicaciones de escritorio, pero aún así pueden ser muy poderosas, y vienen con ventajas que normalmente no encontrará en el software normal..
En primer lugar, las aplicaciones basadas en navegador son compatibles con varias plataformas. No importa si su sistema operativo de escritorio preferido es Linux, MacOS, Windows o incluso ChromeOS, siempre que tenga un navegador al que pueda ir. Dependiendo de las aplicaciones, es posible que incluso puedas usarlas para realizar trabajos adicionales en una tableta con iOS o Android.
En segundo lugar, tiene la capacidad de acceder a las aplicaciones desde cualquier lugar, con cero instalación o administración. Gire su software favorito en una computadora que normalmente no usa. Y nunca tendrás que preocuparte por manejar las actualizaciones de nuevo..
En este artículo, veremos el estado de las aplicaciones basadas en el navegador en 2018. Veremos cuatro áreas clave que son importantes para los diseñadores web:
Vamonos!
Incluso el mejor software de diseño vectorial y de interfaz de usuario en el escritorio puede requerir muchos recursos. Como tal, es bastante notable lo fuertes que son las aplicaciones de navegador en esta categoría en este momento. Una cosa es crear aplicaciones que se comparan en tareas livianas, pero crear software de diseño gráfico de grado profesional en el navegador es otra. Y sin embargo, varios desarrolladores parecen haber logrado esta hazaña..
Los siguientes cuatro son mis principales selecciones actuales para aplicaciones de diseño vectorial y de interfaz de usuario en el navegador:
Figma es una aplicación que cae directamente en la caseta de la rueda del diseñador web. Si bien es capaz de realizar todo tipo de trabajos vectoriales y es una aplicación de diseño gráfico potente en general, es especialmente adecuada para el diseño de interfaces para sitios web y aplicaciones basadas en web..
Una de las características destacadas que ofrece a los diseñadores web es la capacidad de crear múltiples "marcos" individuales, que se pueden utilizar de manera similar a los tableros de anuncios. Por ejemplo, puede crear un marco para representar cada página en un diseño de sitio.
Lo interesante es que cualquier elemento dentro de un marco, por ejemplo un botón de "contacto", puede conectarse con otro marco, como el que muestra una página de contacto. Esto se hace arrastrando una línea de conexión desde el botón hasta el marco de destino, que convierte dicho botón en un "punto de acceso". En el modo de presentación, si se hace clic en el punto de acceso, se cargará el marco al que está conectado, lo que hace que esta característica sea excelente para simular el flujo de movimiento de una parte de una interfaz de usuario web a otra.
Cuando se completa la etapa de diseño, Figma facilita la captura de la información requerida para la codificación, como las dimensiones, posiciones, configuración de fuente, códigos hexadecimales, etc. También puede generar CSS listo para copiar y pegar que puede conectar directamente a su código. Y cuando se necesitan recursos de imagen, se pueden exportar de forma masiva de una vez o individualmente según sea necesario.
Si su tarea principal en una aplicación vectorial basada en el navegador será diseñar interfaces de usuario para la web, Figma es una opción bastante difícil de superar..
Gravit Designer es un competidor serio en el espacio vectorial como una aplicación de diseño gráfico polivalente y polivalente. Es completamente viable utilizarlo a nivel profesional, algo que se hace más notable por el hecho de que Gravit es completamente, cien por ciento, gratuito. No hay tarifas de compra, tarifas de suscripción o publicidad. Solo abre la aplicación y diseña..
El software incluye herramientas vectoriales robustas, como un lápiz de estilo clásico, la súper práctica herramienta Bezigon y excelentes herramientas de mano alzada y sombreado. Ofrece la posibilidad de tener un lienzo infinito y tiene una larga lista de ajustes preestablecidos de dimensiones para que pueda cambiar del tamaño "Sitio web - Enorme" al tamaño "iPhone X" con solo hacer clic en un botón.
El sistema "Pages" le brinda una forma de organización de documentos de tipo artboards, y los sistemas de anclajes y símbolos combinados le permiten crear activos reutilizables que se comportan de manera semi-responsiva cuando se colocan en páginas de diferentes tamaños..
Una de mis características favoritas de Gravit es su sistema increíblemente flexible de múltiples rellenos, bordes y efectos. Un solo elemento puede tener cualquier cantidad de rellenos, bordes y efectos, cada uno con sus propios modos de fusión y configuración de opacidad, lo que le permite crear estilos de diseño muy interesantes..
Gravit se está mejorando rápidamente, con el equipo de desarrollo agregando funciones muy útiles a intervalos frecuentes. La última actualización importante agregó símbolos y anclas mejoradas. El anterior a ese agregado de almacenamiento en la nube, Sketch importa y soporta complementos. Gravit se mueve rápido y mejora a menudo.
Si estás buscando una aplicación completa en la que puedas hacer casi cualquier cosa que necesites con vectores, lo más probable es que Gravit lo raspe..
Vectr es una aplicación más liviana que Gravit o Figma. Yo describiría esta aplicación como una para usar cuando quiera entrar y salir rápidamente, y sin una curva de aprendizaje empinada. Las herramientas y la interfaz de Vectr son minimalistas e intuitivas, y la excelente serie de tutoriales interactivos que se reciben en el primer lanzamiento hacen que el software sea mucho más rápido de aprender..
Una de las características más interesantes de Vectr es que, a través de un complemento, se puede utilizar como un editor de gráficos en toda regla dentro de un área de administración de WordPress, algo que podría ser muy útil..
Si no desea mucho alboroto, pero sí desea un conjunto sencillo de herramientas robustas, Vectr podría ser la aplicación para usted..
BoxySVG, como su nombre indica, tiene que ver con SVG. Si está específicamente dispuesto a diseñar gráficos vectoriales para la web, esta aplicación está especializada solo para ese propósito. BoxySVG no está tratando de preocuparse por los gráficos de impresión, el diseño de la interfaz, o cualquier otra cosa que pueda distraerlo de ser un gran programa de diseño SVG..
Incluye características específicas de SVG, como poder controlar la configuración del cuadro de vista, la alineación de los objetos en relación con el cuadro de vista y la preservar la relación de aspecto Configuración: no es necesario buscar en el código de sus SVG después de la exportación. Y, por supuesto, debido a que está diseñando en el navegador, verá sus SVG exactamente como aparecerán cuando se implementen en la web.
Si SVG es tu juego, especialmente para la web, definitivamente echa un vistazo a lo que BoxySVG tiene para ofrecer.
Wireframing es una categoría en la que la selección actual basada en el navegador podría ser más fuerte que las ofertas de escritorio. Puede ayudar que el wireframing no haga uso intensivo de recursos, y que la demanda de wireframes en línea accesibles pueda ser fuerte debido a la frecuente necesidad de colaboración durante la etapa de planificación de un proyecto..
Echa un vistazo a cuatro de las principales aplicaciones de wireframes basados en navegador disponibles en este momento, sin ningún orden en particular.
Es probable que MockFlow sea de especial deleite para muchos diseñadores web, ya que tiene componentes listos para arrastrar y soltar para Bootstrap, Material Design, Foundation, KendoUI y una serie de otros frameworks populares. Como se ve en la imagen de arriba, todos los componentes del marco familiar están listos para su uso, algo que podría ser increíblemente útil para la creación rápida de prototipos si su marco favorito está en la lista de inclusiones de MockFlow.
Cuando use MockFlow para crear un alámbrico para un proyecto basado en un marco, se verá muy parecido al producto final al final, mientras que el alambrado conservará la capacidad de ediciones e iteraciones rápidas. La temática de los componentes es vainilla por defecto, pero cada componente puede personalizar su color, tamaño, fuentes, etc. según sea necesario..
Para el diseño de páginas web enfocadas, especialmente si está utilizando un marco, MockFlow tiene mucho que ofrecer..
Balsamiq es una aplicación de alámbrico basada en la nube que es simple y muy intuitiva de usar. En la parte superior de la pantalla hay una presentación visual de componentes que representan cosas como dispositivos, imágenes, encabezados, párrafos, elementos de formulario, etc. Arrástrelos y suéltelos en la pantalla para formar su estructura metálica. También puede profundizar en subcategorías para ayudarlo a encontrar los componentes que está buscando..
El estilo de los componentes es bastante estático, con la mayoría de los objetos que parecen dibujados a mano. La página de inicio de Balsamiq dice: “¡Parecen bocetos a propósito! Fomenta la lluvia de ideas ”. Este enfoque de intercambio de ideas se vincula con los sistemas de colaboración que permiten compartir entre los miembros del equipo, lo que hace que Balsamiq parezca más cómodo en el proceso de planificación de un proyecto..
Si tienes un equipo considerable y necesitas intercambiar ideas entre varias personas antes de hundir tus dientes en un diseño, Balsamiq podría ser la aplicación para ti..
Mockingbird es algo similar a Balsamiq, ya que se le presenta una selección de componentes estandarizados listos para arrastrar y soltar en su estructura alámbrica, como botones, imágenes, anuncios de banner, encabezados, etc. Se pueden crear varias páginas, y los enlaces de trabajo en vivo pueden permitirle navegar de maqueta a maqueta mientras prueba su interfaz de usuario o muestra a su equipo o clientes..
La colaboración se puede hacer en tiempo real; solo comparte un enlace con tu colega o cliente y podrán comunicar cambios y sugerencias en el momento.
Si su principal necesidad es una comunicación eficiente con personas que están fuera del sitio, mire Mockingbird.
Wireframe.cc es algo así como una herramienta de armado de alambre minimalista y espartana que no tiene las campanas y silbidos de nuestras otras tres aplicaciones. Sin embargo, también es el único que es completamente gratuito..
Los componentes que tiene disponibles son básicamente rectángulos con esquinas redondas o cuadradas, puntos suspensivos y marcadores de posición para imágenes y texto. Puede elegir entre los colores naranja, negro, blanco y algunos tonos de gris. Además de estas características, también tiene algunas herramientas de agrupación y alineación, y la capacidad de agregar anotaciones.
Wireframe.cc es deliberadamente escaso y, a veces, cuando necesita obtener algunas ideas rápidamente, eso es exactamente lo que necesita. No hay parálisis por el análisis aquí, simplemente llegar directamente al trabajo.
Los editores WYSIWYG de hoy de alguna manera cumplen el rol que los programas de diseño visual como Dreamweaver y Frontpage solían tener, pero en muchas otras formas han progresado mucho más allá de sus predecesores. Todavía pueden ayudar a los nuevos diseñadores web a aprender las cuerdas, pero también pueden ser grandes ahorradores de tiempo en proyectos avanzados cuando son utilizados por manos experimentadas..
Echemos un vistazo más de cerca a dos de las aplicaciones de diseño web WYSIWYG basadas en navegador más populares.
Webflow hace un gran trabajo al ser útil tanto para veteranos de diseño web experimentados como para principiantes. Esto se debe al hecho de que, si bien todo se puede hacer visualmente, aún está trabajando con las mismas cosas a las que está acostumbrado cuando se codifica a mano..
Agregará divs y elementos semánticos, creará clases de CSS, necesitará saber cómo funciona el posicionamiento absoluto y relativo, y será responsable de construir sus sitios para que sean receptivos. Aquí no hay ciegos voladores, tarde o temprano tendrás que aprender qué sucede detrás de escena. Todo lo que hace Webflow es poner una interfaz visual sobre las técnicas de diseño web que, de lo contrario, estaría haciendo manualmente..
Para los principiantes del diseño web, esto puede hacer mucho para ayudar con el proceso de aprendizaje. Ver cómo los cambios surten efecto en tiempo real puede ser de gran ayuda. Para los veteranos, Webflow es una gran herramienta de creación de prototipos. Es posible que prefiera escribir su propio código, pero Webflow puede permitirle moverse mucho más rápido al editar su diseño. Personalmente lo he usado en combinación con la codificación manual para hacer fechas límite ajustadas en más de una ocasión.
Por lo tanto, si usted es un diseñador web en ciernes que busca suavizar la curva de aprendizaje, o un veterano que busca ahorrar tiempo, vale la pena mirar a Webflow..
Donde Webflow es una interfaz visual sobre las técnicas de diseño web habituales, Froont está definitivamente dirigido a tratar de cuidar el mayor número posible de puntos del proceso de diseño para crear un proceso de diseño muy amigable para los principiantes y rápido..
En lugar de agregar divs, texto o imágenes, agregará secciones completas de un sitio a la vez. Puede colocar una barra de navegación, una unidad de héroe, una sección de contenido, algunos paneles de precios, un pie de página, y eso es una envoltura. Froont también tiene una amplia selección de plantillas, denominadas "Proyectos", que puede clonar para comenzar su proyecto de diseño si lo desea..
Dicho esto, casi todo es editable una vez que está en la página; simplemente activa la opción Modo experto para ajustar cosas como márgenes y alineación.
Si recién está comenzando con el diseño web o si necesita un proceso que le permita ser lo más manos libres posible, Froont podría ser lo mejor para usted..
Encontrar un editor de código basado en la web con todas las funciones es un poco complicado. Existen bastantes editores basados en la web, pero si está buscando algo con el tipo de funciones a las que está acostumbrado en su editor de código de escritorio favorito, no todas las opciones se adaptarán.
Dicho esto, aquí hay dos editores que se destacaron del paquete, y podrían ser muy útiles para la codificación en movimiento..
Caret es uno de los pocos editores de códigos basados en web con los que puede abrir un archivo local. Es probable que esto se haga con el hecho de que se instala, a través de la tienda web de Chrome, como una aplicación normal y funciona sin conexión. Obtendrá un icono de acceso directo para su escritorio y se ejecutará sin el navegador cromado a su alrededor..
La lista de características es bastante impresionante, especialmente en medio de un paisaje de edición de código basado en el navegador algo estéril. Caret tiene resaltado de sintaxis, temas, cursores múltiples, una paleta de comandos, gestión de proyectos, soporte de complementos y un archivo de configuración de "user.json" extenso y de configuración libre..
Caret no solo es gratis, también es de código abierto bajo la licencia GPLv2. Instálelo desde Chrome Web Store, o si lo prefiere, puede clonar su repositorio y manejar la instalación manualmente..
Si necesita un editor de código que pueda ir a cualquier parte, y en particular si es un desarrollador en movimiento con un dispositivo ChromeOS, Caret podría ser justo lo que necesita..
CodeAnywhere no le permite abrir archivos locales, pero lo que hace es conectarse rápida y fácilmente con un proveedor de almacenamiento externo como GitHub, BitBucket, Dropbox o un servidor FTP, en el que se encuentran sus archivos. Por lo tanto, si ya está enviando su código al almacenamiento externo al final del día de todos modos, esto puede hacer que el proceso sea un poco más suave..
CodeAnywhere tiene resaltado de sintaxis para setenta y cinco idiomas, tiene cuatro temas y ocho combinaciones de colores para elegir, ofrece finalización de códigos, líneas y múltiples cursores. También tiene un terminal incorporado, herramientas de colaboración y un historial de revisiones guardado.
Una característica particularmente atractiva es su servicio de "Contenedores", que son entornos basados en la nube que ejecutan CentOS o Ubuntu, y preconfigurados para WordPress, NodeJS, Ruby y otros.
Si está buscando una manera fácil de trabajar en sus proyectos alojados externamente, o si la idea de "Contenedores" parece que haría que sus proyectos se ejecuten mejor, consulte CodeAnywhere.
El rango para los editores de fotos basados en el navegador es un poco más escaso que el de nuestras otras categorías, lo que no es sorprendente en la actualidad dado que la edición de fotos es probablemente la más intensiva en recursos y difícil de conseguir sin poder de escritorio..
Tenemos tres editores capaces de elegir, sin embargo dos de ellos (Pixlr y SumoPaint), requieren Flash, así que si ha pasado un tiempo desde que tuvo Flash en su máquina, deberá desempolvarlo nuevamente para poder usar estos dos.
En esa nota, si desea habilitar Flash pero solo para aplicaciones específicas, en Chrome vaya a Chrome: // settings / content / flash, A continuación, agregue la URL de la aplicación a la lista de sitios permitidos.
Polarr hace no necesita Flash, y es una aplicación de edición de fotos que le permite obtener rápidamente imágenes con un aspecto elegante y listo para usar en el contenido de sus sitios. Hace que agregar filtros de aspecto profesional sea un asunto de un solo clic, hay controles de color e iluminación en profundidad, y puede recortar, voltear, rotar y cambiar el tamaño al contenido de su corazón..
Incluso tiene una función de "Mejora automática" que analizará su imagen y la arreglará sin que usted levante un dedo..
Polarr es gratis, pero tiene la opción de comprar extras "Pro" si lo desea, como una herramienta de texto, un eliminador de ruido, un conjunto de filtros de retrato, un conjunto de filtros de paisaje, entre otros. La colección completa de herramientas "Pro" es de $ 19.99
Si su objetivo principal es obtener fotos que se vean geniales para publicarlas en línea, Polarr es una herramienta fantástica para realizar ese trabajo..
Pixlr ha existido por mucho tiempo. En el pasado, si no tuviera acceso a Photoshop, esto es lo que usaría, y es lo que recomendé a las personas que querían hacer la edición de imágenes pero no podían justificar la compra de un software..
Pixlr tiene las herramientas que esperaría encontrar en una aplicación raster de escritorio, como lápiz, pincel, borrador, cubeta, degradado, sello de clonación, dibujo de formas básicas, texto, difuminar, perfilar, difuminar, esquivar, quemar, etc. Tiene un sistema de estilo de capa simple que incluye sombra, sombra interior, bisel, brillo exterior y brillo interior. Y tiene una lista completa de filtros y ajustes, solo tenga en cuenta que estas funciones son no no destructivo.
Puede utilizar Pixlr para el diseño, el arte a mano alzada y el retoque y edición de fotos. Si necesita software basado en la web con más herramientas de escritorio que Polarr, Pixlr podría llenar ese vacío.
SumoPaint se parece mucho a Pixlr, y se remonta a la misma época. También tiene el tipo de herramientas que esperaría encontrar en un editor de ráster de escritorio, además de una gran selección de filtros y ajustes.
Sin embargo, SumoPaint Tiene herramientas de creación de formas más avanzadas, como estrellas, pasteles, etc. Además, tiene una ingeniosa herramienta de dibujo de simetría y una útil herramienta de transformación gratuita. También tiene algunos estilos de capas adicionales: superposición de colores, trazo, biselado degradado y brillo degradado.
En general, Pixlr y SumoPaint son muy similares y cumplen esencialmente el mismo rol, por lo que si está buscando una aplicación basada en el navegador de esta naturaleza, lo mejor que puede hacer es probar y ver cuál le gusta más..
Con esto concluye nuestro resumen de 2018 del estado actual del software basado en navegador para diseñadores web.
En resumen:
Como nota para el futuro de las aplicaciones basadas en navegador, esté atento a la aparición de WebAssembly, una tecnología emergente que permitirá que incluso software intensivo como editores de video se ejecute con un rendimiento casi nativo. Eso realmente podría sacudir las cosas.!
Mientras tanto, puede que sus viajes y dispositivos ultra portátiles sean más productivos como resultado de algunas de las aplicaciones en esta lista!
Accentsconagua