Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Browser Apps
Webdesign

Estado de las aplicaciones de diseño web basadas en navegador: 2018

by
Length:LongLanguages:

Spanish (Español) translation by RRGG (you can also view the original English article)

Las aplicaciones basadas en navegador son cada vez más frecuentes, y su viabilidad para su uso en el diseño web está aumentando constantemente. Claro, es posible que no tengan todo el peso de las aplicaciones basadas en computadoras de escritorio, pero aún así pueden ser muy potentes, y vienen con ventajas que normalmente no encontrarás en el software normal.

No importa si su sistema operativo de escritorio preferido es Linux, MacOS, Windows o incluso ChromeOS, siempre que tenga un navegador que esté listo para usar. Dependiendo de las aplicaciones, puede encontrar que incluso puede usarlas para hacer más trabajo en una tableta con iOS o Android.

En segundo lugar, tiene la capacidad de acceder a las aplicaciones en cualquier lugar, con cero instalación o administración. Haga girar su software favorito en una computadora que normalmente no usa. Y nunca más tendrás que preocuparte por manejar actualizaciones nuevamente.

En este artículo, revisaremos el estado de las aplicaciones basadas en navegador en 2018. Veremos cuatro áreas clave que les importan a los diseñadores web:

  • Vector y UI
  • Wireframing
  • Edición de Código
  • Foto y Trama

¡Empecemos!

Vector y UI

Incluso el mejor software de diseño de interfaz de usuario y vector en el escritorio puede requerir muchos recursos. Como tal, es bastante notable cuán fuertes son las aplicaciones de navegador en esta categoría en este momento. Una cosa es crear aplicaciones que se comparen con tareas livianas, pero hacer que el software de diseño gráfico de grado profesional en el navegador sea otra cosa. Y, sin embargo, múltiples desarrolladores parecen haber logrado esta hazaña.

Los siguientes cuatro son mis mejores selecciones actuales para aplicaciones de diseño de vectores y UI en el navegador:

Figma

Figma es una aplicación que cae directamente en la casa de rueda del diseñador web. Si bien es capaz de hacer todo tipo de trabajo vectorial y es una poderosa aplicación de diseño gráfico en general, es especialmente adecuada para el diseño de interfaces para sitios web y aplicaciones basadas en la web.

Una de las características sobresalientes que ofrece a los diseñadores web es la capacidad de crear múltiples "marcos" individuales, que se pueden usar de manera similar a las mesas de trabajo. Por ejemplo, puede crear un marco para representar cada página en un diseño de sitio.

Donde se pone interesante es que cualquier elemento dentro de un marco, por ejemplo un botón de "contacto", se puede conectar 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 al marco de destino, que convierte dicho botón en un "punto de acceso público". En el modo de presentación, si se hace clic en el punto de acceso, se cargará el cuadro al que está conectado, lo que hace que esta característica sea ideal para simular el flujo de movimiento de una parte de una IU web a otra.

Cuando finaliza la etapa de diseño, Figma facilita la obtención de la información necesaria para la codificación, como 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 activos de imagen, se pueden exportar a granel de una vez o individualmente según sea necesario.

Si su tarea principal en una aplicación de vectores basada en navegador va a diseñar interfaces de usuario para la web, Figma es una opción bastante difícil de superar.

  • Precios: Gratis para hasta tres proyectos, $ 12 p / m para proyectos ilimitados y funciones orientadas al equipo.
  • Sitio web: www.figma.com

Gravit

Gravit Designer es un competidor serio en el espacio vectorial como una aplicación de diseño gráfico multiusos y versátil. Es completamente viable usarlo a nivel profesional, algo que se destaca por el hecho de que Gravit es completamente, cien por ciento, gratis. No hay tarifas de compra, tarifas de suscripción o publicidad. Simplemente abre la aplicación y diseña.

El software incluye herramientas vectoriales robustas, como un estilo clásico de pluma, la herramienta Bezigon muy útil y excelentes herramientas de mano alzada y sombreado. Ofrece la capacidad de tener un lienzo infinito y tiene una larga lista de ajustes preestablecidos de dimensión para que pueda cambiar el tamaño de "Sitio web: enorme" a tamaño de "iPhone X" con solo hacer clic en un botón.

El sistema "Páginas" le brinda una forma de organizar documentos de tipo de mesa de trabajo, y los sistemas de anclajes y símbolos combinados le permiten crear activos reutilizables que se comportan de manera semi receptiva 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 configuraciones de opacidad, lo que le permite crear estilos de diseño muy interesantes.

Gravit se está mejorando rápidamente, con el equipo de desarrollo añadiendo funciones muy útiles a intervalos frecuentes. La última actualización importante agregó símbolos y anclas mejoradas. La anterior a ese almacenamiento en la nube, Sketch importados y complementos compatibles. Gravit se mueve rápido y mejora a menudo.

Si estás buscando una aplicación completa en la que puedas hacer prácticamente todo lo que necesites con los vectores, es muy probable que Gravit vaya a rascarse.

Vectr

Vectr es una aplicación más liviana que Gravit o Figma. Describiría esta aplicación como una para usar cuando quiera entrar y salir rápidamente, y sin una curva de aprendizaje abrupta. Las herramientas y la interfaz de Vectr son minimalistas e intuitivas, y la excelente serie de tutoriales interactivos con los que se recibe en el primer lanzamiento hace que el software sea mucho más rápido de usar.

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 completo dentro de un área de administración de WordPress, algo que podría ser muy útil.

Si no quiere mucho alboroto, pero sí quiere un conjunto sencillo de herramientas robustas, Vectr podría ser la aplicación para usted.

BoxySVG

BoxySVG, como su nombre lo sugiere, se trata de SVG. Si se está preparando específicamente para 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 impresos, el diseño de la interfaz o cualquier otra cosa que pueda distraerlo de ser un excelente programa de diseño SVG.

Incluye características específicas de SVG, como la posibilidad de controlar la configuración del cuadro de vista, la alineación de los objetos en relación con el cuadro de vista y la configuración preserveAspectRatio; no es necesario profundizar en el código de los archivos SVG después de la exportación. Y, por supuesto, como está diseñando en el navegador, verá sus archivos SVG exactamente como aparecerán cuando se desplieguen en la web.

Si SVG es tu juego, especialmente para la web, definitivamente echa un vistazo a lo que BoxySVG tiene para ofrecer.

Wireframing

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 ser útil que el wireframing no requiera muchos recursos, y que la demanda de wireframes accesibles en línea sea fuerte debido a la frecuente necesidad de colaboración durante la etapa de planificación de un proyecto.

Vea en este momento cuatro de las principales aplicaciones de wireframing basadas en navegador, sin ningún orden en particular.

MockFlow

Es probable que MockFlow deleite especialmente a muchos diseñadores web debido a que tiene componentes listos para arrastrar y soltar para Bootstrap, Material Design, Foundation, KendoUI y muchos otros marcos populares. Como se ve en la imagen de arriba, todos los componentes del marco familiar están listos para usar, algo que podría ser increíblemente útil para crear rápidamente prototipos si su marco favorito está en la lista de inclusiones de MockFlow.

Es probable que MockFlow esté especialmente diseñado para Bootstrap, Material Design, Foundation, KendoUI y muchos otros marcos populares. Como se ve en la imagen de arriba, todos los componentes del marco están listos para usar, algo que podría ser increíblemente útil para crear rápidamente prototipos si su marco favorito está en la lista de inclusiones de MockFlow.

Para el wireframing centrado en el diseño web, especialmente si está utilizando un framework, MockFlow tiene mucho que ofrecer.

  • Precio: Gratis para un usuario, se eliminan las restricciones de $ 14 por mes
  • Sitio web: mockflow.com

Balsamiq

Balsamiq es una aplicación de wireframing basada en la nube que es simple y bastante intuitiva de usar. En la parte superior de la pantalla hay una visualización de componentes que representan elementos 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 las subcategorías para ayudarlo a encontrar los componentes que está buscando.

El estilo de los componentes es bastante estático, y la mayoría parecen objetos dibujados a mano. La página principal de Balsamiq dice: "¡Parecen bocetos a propósito! Fomenta la lluvia de ideas ". Este enfoque de intercambio de ideas se relaciona con los sistemas de colaboración que permiten el intercambio entre los miembros del equipo, lo que hace que Balsamiq parezca más familiar desde el principio del proceso de planificación de un proyecto.

Si tiene un equipo considerable y necesita intercambiar ideas entre varias personas antes de hundir sus dientes en un diseño, Balsamiq podría ser la aplicación para usted.

Mockingbird

Mockingbird es algo similar a Balsamiq en que se le presenta una selección de componentes estandarizados listos para arrastrar y colocar en su estructura alámbrica, como botones, imágenes, pancartas, encabezados, etc. Se pueden crear varias páginas, y los enlaces de trabajo en vivo pueden permitirle navegar de la maqueta a la maqueta mientras prueba su IU o muestra a su equipo o clientes.

La colaboración se puede hacer en tiempo real; solo comparta un enlace con su colega o cliente y ellos podrán comunicar cambios y sugerencias en el acto.

Si su principal necesidad es la comunicación eficiente con personas que están fuera del sitio, eche un vistazo a Mockingbird.

Wireframe.cc

Wireframe.cc es algo así como una herramienta de armamento esquemática, espartana y minimalista que no tiene las características 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 redondeadas o cuadradas, elipses 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 posibilidad de agregar anotaciones.

Wireframe.cc es deliberadamente escaso y, a veces, cuando necesita obtener algunas ideas rápidamente, eso es exactamente lo que necesita. Aquí no hay parálisis por análisis, simplemente se pone a trabajar.

WYSIWYG

Los editores WYSIWYG de hoy en día cumplen de alguna manera el rol que solían tener los programas de diseño visual como Dreamweaver y Frontpage, pero de muchas otras maneras 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

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 de forma visual, todavía está trabajando con las mismas cosas a las que está acostumbrado cuando usa la codificación manual.

Agregará elementos divs y semánticos, creará clases 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 ciegas voladoras, tarde o temprano tendrás que aprender lo que 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 otro modo estarías haciendo de forma manual.

Para los principiantes al diseño web, esto puede hacer mucho para ayudar con el proceso de aprendizaje. Ver que los cambios surtan efecto en tiempo real puede recorrer un largo camino. Para los veteranos, Webflow es una gran herramienta de creación de prototipos. Es posible que aún prefiera escribir su propio código, pero Webflow puede permitirle moverse mucho más rápido al eliminar su diseño. Personalmente lo he usado en combinación con la codificación manual para cumplir plazos ajustados en más de una ocasión.

Entonces, si usted es un diseñador web incipiente que busca suavizar la curva de aprendizaje, o una persona mayor que busca ahorrar tiempo, vale la pena investigar en Webflow.

  • Precio: Gratis para dos proyectos, $ 16 p / m para diez proyectos, $ 35 p / m para proyectos ilimitados.
  • Sitio web: webflow.com

Froont

Donde Webflow es una interfaz visual sobre las técnicas de diseño web regulares, Froont está definitivamente dirigido a tratar de cuidar tantos puntos del proceso de diseño como sea posible para crear un proceso de diseño rápido y fácil para principiantes.

En lugar de agregar divs, texto o imágenes, agregará secciones enteras de un sitio a la vez. Puede incluir 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 todo. 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, solo alternar en 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 pretenda ser lo más "manos libres" posible, Froont podría estar a la vuelta de la esquina.

Editores de Código

Encontrar un editor de código completo basado en la web sigue siendo un poco complicado. Hay bastantes editores basados en web, pero si buscas algo con el tipo de características que estás acostumbrado desde tu editor de código de escritorio favorito, no todas las opciones se adaptarán.

Dicho esto, aquí hay dos editores que se destacaron del resto, y podrían ser muy útiles para la codificación en marcha.

Caret

Caret es uno de los pocos editores de código basados en web con el que puede abrir un archivo local. Es probable que esto ocurra 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 ícono de acceso directo para su escritorio, y se ejecutará sin ningún navegador a su alrededor.

La lista de características es bastante impresionante, particularmente en medio de un paisaje de edición de código basado en el navegador algo estéril. Caret tiene resaltado de sintaxis, temas, múltiples cursores, una paleta de comandos, gestión de proyectos, soporte de complementos y un extenso archivo de configuración "user.json" libremente configurable.

No solo es gratuito Caret, 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 usted mismo.

Si necesita un editor de código que pueda ir a cualquier parte, y en particular si usted es un desarrollador en movimiento con un dispositivo ChromeOS, Caret podría ser justo lo que necesita.

CodeAnywhere Editor

CodeAnywhere no le permite abrir archivos locales, pero lo que hace es conectarse rápida y fácilmente con un proveedor de almacenamiento de terceros como GitHub, BitBucket, Dropbox o un servidor FTP, en el que se encuentran sus archivos. Por lo tanto, si ya está presionando su código para el almacenamiento externo al final del día, esto puede hacer que el proceso sea un poco más fluido.

CodeAnywhere tiene resaltado de sintaxis para setenta y cinco idiomas, tiene cuatro temas y ocho esquemas de color para elegir, ofrece código completo, pelusa y múltiples cursores. También tiene un terminal integrado, herramientas de colaboración e historial de revisión guardado.

Una característica particularmente convincente es su servicio de "Contenedores", que son entornos basados en la nube que ejecutan CentOS o Ubuntu, y preconfigurado 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á que sus proyectos se ejecuten de manera más fluida, eche un vistazo a CodeAnywhere.

  • Precio: gratuito para funciones básicas, o desde $ 2 p / m para sistema de revisiones, desde $ 7 p / m para contenedores y características adicionales.
  • Sitio web: codeanywhere.com

Foto y Trama

El rango para editores de fotos basados en navegador es un poco más escaso que nuestras otras categorías, lo que no es sorprendente en la actualidad dado que la edición de fotografías es probablemente la que más recursos requiere y es difícil de lograr sin la potencia 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 tenía Flash activo en su máquina, tendrá que desempolvarlo nuevamente para poder usarlo. estos dos.

En ese sentido, si desea habilitar Flash pero solo para aplicaciones específicas, en Chrome, vaya a chrome: // settings / content / flash, luego agregue la URL de la aplicación a la lista de sitios permitidos.

Polarr

Polarr no necesita Flash, y es una aplicación de edición de fotos ordenada que le permite obtener rápidamente imágenes que se vean atractivas y listas para usar en el contenido de sus sitios. Hace que agregar filtros de aspecto profesional sea un simple asunto de un solo clic, hay controles de color e iluminación en profundidad, y puede recortar, voltear, girar y cambiar el tamaño según el contenido de su corazón.

Incluso tiene una función de "Mejora automática" que analizará su imagen y la arreglará sin levantar 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 retratos, un conjunto de filtros de paisaje, entre otros. Toda la colección de herramientas "Pro" cuesta $ 19,99

Si su objetivo principal es conseguir que las fotos se vean bien para publicar en línea, Polarr es una herramienta fantástica para hacer ese trabajo.

  • Precio: Gratis, o versión Pro por $ 19.99
  • Sitio web: www.polarr.co

Pixlr (Requiere Flash)

Pixlr ha existido por bastante tiempo. De vuelta en el día, 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 que no podían justificar una compra de software.

Pixlr tiene las herramientas que esperarías encontrar en una aplicación de ráster de escritorio, como lápiz, pincel, borrador, cubo, degradado, clonar sello, dibujo básico de la forma, texto, desenfoque, nitidez, borrón, esquivar, grabar, etc. Tiene un sistema de estilo de capa simple que incluye sombra paralela, sombra interior, bisel, brillo exterior y brillo interno. Y tiene una lista completa de filtros y ajustes, solo tenga en cuenta que estas funciones no son no destructivas.

Puede usar Pixlr para el diseño, el arte a mano alzada y el retoque y edición de fotografías. Si necesita un software basado en la web con más herramientas de escritorio que Polarr, Pixlr podría llenar ese espacio para usted.

SumoPaint (Requiere Flash)

SumoPaint es muy parecido a Pixlr, y recuerda 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, tartas, etc. Además, tiene una herramienta de dibujo de simetría ingeniosa y una útil herramienta de transformación gratuita. También tiene algunos estilos de capa adicionales: superposición de color, trazo, bisel degradado y brillo degradado.

En general, Pixlr y SumoPaint son muy similares y cumplen esencialmente la misma función, por lo que si está buscando una aplicación basada en navegador de esta naturaleza, lo mejor que puede hacer es intentar y ver cuál le gusta más.

Terminando

Con esto concluye nuestro resumen de 2018 del estado actual del software basado en navegador para diseñadores web.

En resumen:

  • Los editores de vectores son potentes y hay una fuerte competencia.
  • Las herramientas de wireframing cubren el espectro de un color minimalista a un prototipo completo basado en frameworks.
  • Los editores de código no son abundantes, pero los destacados tienen algunas características muy atractivas.
  • Las aplicaciones de diseño de trama necesitan un poco de amor ya que Flash aún persiste, pero Polarr es una aplicación de edición de fotos excepcional.

Como nota para el futuro de las aplicaciones basadas en navegador, esté atento al auge de WebAssembly, una tecnología emergente que permitirá que incluso el software intensivo, como los editores de video, funcione con un rendimiento casi nativo. Eso realmente podría sacudir las cosas!

Mientras tanto, ¡que sus viajes y dispositivos ultraportátiles sean más productivos como resultado de algunas de las aplicaciones en esta lista!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.