¿Cuáles son las mejores herramientas para los desarrolladores de UI?

Mejor respuesta

Diseñadores de UI:

Sketch

Empezar

Sistema: Mac

Ventajas: Completamente para el diseño de «interfaz»

Sketch es una herramienta de diseño vectorial liviana y fácil de usar que hace que el diseño de la interfaz de usuario sea más simple y eficiente. . La plataforma simplifica las funciones utilizadas en Photoshop e Illustrator, diseñadas específicamente para el diseño de UX / UI. Antes de Sketch, los diseñadores tenían que cambiar entre Photoshop e Illustrator para obtener características específicas, como vectores y otros efectos fotográficos. Ahora, Sketch permite a los usuarios deshacerse de la funcionalidad inflada y centrarse en la experiencia del usuario / diseño de la interfaz de usuario para aprovechar al máximo su diseño de interfaz de usuario. Una de las mejores características de Sketch es la capacidad de instalar complementos para compensar las características no incluidas en el software.

Sin embargo, aunque Es una de las herramientas más prácticas para diseñar interfaces de usuario de aplicaciones de Android. El soporte de Sketch para la vista previa en tiempo real del lado de Android no es muy efectivo. Los usuarios necesitan descargar SkalaPreview, y solo después de una serie de operaciones engorrosas pueden ver el diseño real de la interfaz de Android en el lado del teléfono.

iDoc

Sistema: Mac y Windows

Ventaja: Diseño de colaboración en línea y diseño de transferencia para diseñadores y desarrolladores de UI

Como una nueva herramienta de colaboración y transferencia, iDoc tiene complementos potentes que admiten la importación de archivos desde Photoshop, Adobe XD y Sketch . Con la ayuda de complementos, iDoc es posible generar especificaciones y recursos automáticamente para el uso del diseñador de UI. Para convertir los archivos de diseño estático en prototipos de alta fidelidad interactivos y animados, simplemente cargue sus archivos en el módulo prototipo de iDoc.

Invision : una herramienta de creación de prototipos basada en la web que hace que su diseño funcione rápidamente

Costo: Gratis para 1 proyecto (15 $ / mes para 3 proyectos | 25 $ / mes para proyectos ilimitados | 99 $ / mes para equipos)

Compatibilidad: Mac y Windows

Características :

  • Con InVision, los diseñadores pueden cargar sus archivos de diseño y agregar animaciones, gestos y transiciones para transformar sus pantallas estáticas en prototipos interactivos en los que se puede hacer clic. Obtenga alta fidelidad en menos de 5 minutos.
  • Admite archivos en formato PNG, JPG, GIF, AI y PSD. La aplicación InVision es excelente para colaborar en borradores de diseño y recopilar comentarios de colegas y clientes.
  • Un nuevo diseño mágico para el flujo de trabajo de desarrollo. Cree hojas de estilo, obtenga composiciones con píxeles perfectos, discuta los desafíos de diseño, exporte de forma adaptativa y genere código real para cualquier elemento de diseño.

Figma

Precio: gratis para uso personal uso

– $ 12 por persona por grupo / mes

Introducción: Figma es la primera herramienta de diseño de interfaz de verdad -Tiempo de colaboración. Tiene tres características encomiables: colaboración en tiempo real, redes vectoriales y control de versiones. Simplemente, Figma es como un Sketch basado en navegador con colaboración en tiempo real .

Experiencia personal: al principio, era escéptico con Figma experiencia del usuario porque es una herramienta de diseño de interfaz basada en navegador. Pero luego me pareció muy sensible de usar. Además, las herramientas del navegador tienen la ventaja de que el destinatario no necesita instalar nada, solo necesita abrir el navegador en la computadora para participar en el proyecto. Los archivos Figma están disponibles en Mac, Windows, Linux y dispositivos móviles (solo lectura).

Respuesta

Si un desarrollador me dijera «no», primero preguntaría por qué y trataría de entender su razón para decir que no. Si resulta que hay una mejor manera de abordar el desafío del diseño, estaría más que dispuesto a cambiar el diseño.

Sin embargo, los desarrolladores generalmente son capaces de codificar cualquiera de las características y diseños de los diseñadores de UI proponer. Como señaló William Hurley en esta respuesta, casi todo es posible cuando se trata de software.

Le pregunté a los desarrolladores de software si la «función x» es posible o si el diseño se puede codificar para que funcione de una manera determinada. manera, y nunca me han dicho «no».

Dicho esto, el objetivo como diseñador de interfaz de usuario debe no hacer un diseño complejo. El objetivo debe ser hacer que la interfaz sea lo más simple e intuitiva posible para el usuario.

Por esa razón, he utilizado los principios de Google Material Design en mis proyectos más recientes (consulte 5 razones poderosas y prácticas para usar Material Design ).

Hay varios beneficios que vienen con esto:

  • Familiaridad para los usuarios : Gmail, YouTube, Evernote, Buzzfeed y muchas otras aplicaciones utilizan Material Design, por lo que existe una mayor probabilidad de que los usuarios de su aplicación se familiaricen la interfaz se ve y funciona.
  • Marcos existentes – Se han creado muchos marcos que incluyen componentes listos para usar para que los desarrolladores los utilicen, como Materializar CSS , Material de AngularJS y Material-UI . Esto ayuda a los diseñadores a ver lo que está disponible para los desarrolladores y usar esos componentes en sus diseños.
  • Toma de decisiones más rápida : cuando los desarrolladores y diseñadores puede trabajar con la misma paleta de componentes, hace que el proceso de diseño y desarrollo sea más rápido.

Aquí hay un excelente video sobre cómo Google hizo que su gran cantidad de aplicaciones se vean y se sientan consistentes, incluso antes de su lanzamiento Diseño de materiales. Al aplicar los principios que usaban entonces y ahora, los diseñadores pueden crear mejores interfaces y eliminar virtualmente el «no» del vocabulario de los desarrolladores.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *