8 herramientas de diseño web para usar en 2018

En la comunidad web moderna, hay muchas herramientas para el diseño web. Están los clásicos, editores gráficos como Photoshop y Sketch, y programas que combinan diseño y diseño.

Además de usar la herramienta principal, el diseñador generalmente usa, como regla, una serie de servicios y herramientas auxiliares que simplifican el trabajo.

El equipo de Outline2Design seleccionó una lista de los recursos más interesantes y útiles a los que nos enganchamos.

IU rápida

RapidUI es la plataforma de diseño web que permite a los diseñadores convertir sus archivos PSD y Sketch en sitios web totalmente funcionales sin escribir una sola línea de código.

Ventajas: desarrollo de interfaz automatizado.

Cada elemento de diseño puede realizar una acción. Por ejemplo, puede convertir fácilmente mapas en mapas interactivos, cuadrados en botones e imágenes de fondo en paralaje.

Desventajas: diseño de interfaz obsoleto. Sin embargo, esto no es lo más importante.

El gran inconveniente es que la herramienta no lee bien las capas y los efectos de superposición. Si ya lo ha elegido, debe pasar algún tiempo preparando fuentes de calidad.

Flujo web

Webflow es una herramienta de desarrollo de sitios web cuyo lado fuerte es un editor visual con gestión de elementos a través de la interfaz de arrastrar y soltar, así como una tarifa gratuita ilimitada con la capacidad de alojar un sitio.

La creación de sitios web no requiere conocimientos especiales y habilidades de programación, por lo que el servicio es adecuado para principiantes en el campo de la construcción de sitios, así como para usuarios experimentados.

Ventajas: en primer lugar, es una herramienta gratuita. La principal diferencia entre este servicio y los demás radica en el hecho de que el diseñador puede hacer un diseño intuitivamente funcional sin la ayuda de un programador.

Además, como beneficio adicional, Webflow ha proporcionado una selección de los mejores diseñadores y una oportunidad para que vea los diferentes trabajos.

Desventajas: necesita un conocimiento mínimo de HTML / CSS para trabajar con esta herramienta. Por otro lado, no es tan malo.

Atómico y Proto

Creemos que estas herramientas son idénticas en funcionalidad. La dirección principal es la creación de prototipos para numerosos dispositivos.

Ventajas: no necesita aprender programación para agregar funciones adicionales. Las plataformas basadas en la web permiten a cualquier usuario agregar estos elementos a la vez.

Atomic es gratis. Tiene un número ilimitado de prototipos y todos son gratuitos.

La gran ventaja de Proto.io es su integración con tres plataformas de prueba de usuario: Lookback, UserTesting y Validally, lo que lo hace mucho más conveniente para fines de prueba de usuario.

Desventajas: Proto.io tiene sus propios complementos para Sketch y Photoshop, pero desafortunadamente, todas las capas se exportan a gráficos estáticos, por lo que no se editan en Proto.io. Otra desventaja es que para Proto.io debe pagar $ 24 mensuales por una persona y hasta cinco proyectos.

Figma

Figma es la herramienta multiplataforma para diseñadores y permite que varias personas trabajen en el mismo proyecto en tiempo real. Figma es especialmente preferido por los desarrolladores web. Es un placer crear una interfaz gráfica de usuario para una aplicación móvil.

Además, aquí, como en Google Docs, es posible dejar comentarios directamente en el campo de trabajo, lo cual es muy conveniente para el trabajo en equipo.

Viacheslav, un diseñador senior de UX / UI cree que:

“Una de las ventajas más importantes de Figma es el modo de cooperación cuando varios diseñadores pueden trabajar en un diseño a la vez. Creo que esta herramienta será útil para diseñadores novatos junior. También quiero señalar que Figma es una herramienta en línea y puedo usarla desde muchas plataformas. Todo lo que necesito para esto es internet ".

Ventajas:

  • Las actualizaciones para esta herramienta salen con bastante frecuencia. El último se lanzó el 25 de enero de 2018. El equipo de desarrollo ha realizado muchos cambios, uno de los cuales es la capacidad de arrastrar archivos Sketch a un documento abierto.
  • No requiere conocimientos de codificación, a diferencia de Webflow.
  • El diseño se convierte automáticamente en código CSS.

Prototipos en papel

“La mayoría de los diseñadores de UX comienzan el proceso de diseño con bocetos en papel, solo que ahora puedes probar algunas hipótesis básicamente al crear un prototipo interactivo. POP permite a los diseñadores en la etapa de bocetos crear prototipos de trabajo y los comparte con el equipo para probar e identificar soluciones erróneas en las etapas iniciales. Creo que esta aplicación facilita y acelera el proceso de diseño de interfaces móviles y lleva el proceso estándar a un nuevo nivel moderno ".
Roman, diseñador sénior de UX / UI en Outline2Design

Si prefiere los métodos de la vieja escuela, cuando los prototipos fueron dibujados a mano debido a la falta de una variedad de herramientas modernas, el POP se convertirá en un verdadero amigo para usted.

Todo se simplifica hasta cierto punto: dibuja las ideas de la aplicación en su cuaderno de bocetos, toma fotografías y agrega enlaces entre botones y diseños. Después de eso, sincronice los prototipos con Dropbox y obtenga un prototipo listo.

Ventajas: gastos mínimos en tiempo y recursos. Es muy conveniente para probar rutas para aplicaciones móviles.

Desventajas: no encontramos fallas globales. Una cosa que nos gustaría señalar es la incómoda función de dibujo dentro de la aplicación. Pero esto no se aplica a la función POP principal. Lo más probable es que esta sea una característica adicional.

Herramientas web para realidad virtual

Un cuadro

La realidad virtual evoluciona a la velocidad de la luz. Y no pudimos pasar por alto las herramientas que ayudan a crearlo. Hemos revisado algunas herramientas de código abierto.

A-Frame es un marco web de Mozilla que fue creado para la creación fácil y poderosa de contenido de realidad virtual. Es un proyecto independiente de código abierto, que tiene una gran comunidad de realidad virtual. Incluso hay un curso interactivo para Web VR de A-Frame. Existe un potente marco de componente de entidad basado en HTML incrustado en el núcleo de la herramienta.

Ventajas:

  • Herramienta realmente potente que admite la mayoría de los auriculares de realidad virtual como Vive, Rift, Daydream, etc.
  • VR multiplataforma: cree aplicaciones de realidad virtual para Vive, Rift, Daydream, GearVR y Cardboard con soporte para todos los controladores respectivos.
  • Compatible con la mayoría de las bibliotecas, marcos y herramientas, incluidos React, Preact, Vue.js, d3.js, Ember.js y jQuery.

Desventajas: necesita conocimiento de HTML para trabajar con esta herramienta.

Holograma

Los creadores presentan esta aplicación como una herramienta de creación de realidad virtual todo en uno. En realidad, es una aplicación de escritorio para crear y crear prototipos de realidad virtual para cualquier persona. Esta herramienta contiene varias interfaces para múltiples objetivos:

Escena

Herramienta de interfaz visual 3D diseñada para aquellos que no saben nada sobre 3D y VR. Es fácil de usar y muy intuitivo. Esta interfaz ayuda a crear un entorno 3D como primera etapa antes de comenzar a codificar y convertir la escena 3D en realidad virtual.

Codificación

Esta es la interfaz principal donde ocurre la magia. Los creadores de hologramas demuestran que no hay necesidad de saber codificar antes de comenzar. El lenguaje realmente resulta ser bastante fácil de entender.

Bienes

Esta interfaz le permite explorar rápidamente los activos del proyecto y está integrada con Google Blocks, por lo que es fácil usar objetos 3D creados por esta comunidad.

Ventajas: fácil de usar, una herramienta agradable para la creación de realidad virtual. No requiere mucho conocimiento para comenzar.

Desventajas: la animación de vista previa lleva mucho tiempo.

Como puede ver, estas herramientas son más que suficientes. Cada uno de nuestro equipo elige uno u otro. Nuestro consejo: elija el que sea adecuado para usted, dependiendo de las tareas.