22 mejores herramientas de diseño de UI

Una selección de las mejores herramientas de diseño de interfaz de usuario ayudará con casi todos los procesos de diseño y debe satisfacer sus requisitos creativos. Ahora es un gran momento para averiguar lo que está disponible para ayudar a diseñar y luego mostrar sus proyectos, y explorar nuevas herramientas.

Pero, ¿qué herramientas de diseño de interfaz de usuario debe usar? Recientemente, una combinación de Sketch e InVision ha sido una opción popular para muchos diseñadores, pero otras herramientas también ofrecen características y opciones competitivas. Ya que ahora hay una gran cantidad de herramientas de prototipado y estructura alámbrica por ahí, tienes que tomar decisiones. Puede ir a nuestra lista específica de herramientas de estructura alámbrica para obtener más información.

Para obtener herramientas más generales, vea nuestra herramientas de diseño web Roundup. ¿Estás planeando un nuevo sitio? Aquí están nuestras guías a los mejores constructor de sitios web y arriba alojamiento web Servicios.

Wireframing

01. MockFlow

MockFlow es un conjunto de aplicaciones que son muy útiles para una serie de tareas en el proceso típico del proyecto. Principalmente, la aplicación WireframePro es una buena herramienta alternativa de creación de prototipos para que la uses, especialmente si estás probando algunas ideas nuevas.

Si solo necesita crear estructuras alámbricas, eche un vistazo a MockFlow. Es ideal para trabajar en ideas iniciales y le permite construir diseños básicos rápidamente, que a veces es todo lo que necesita para obtener pensamientos en una forma presentable.

02. Balsamiq

Si el wireframing rápido es lo que estás buscando, entonces Balsamiq es una fuerte sugerencia. Puede desarrollar rápidamente estructura y diseños para sus proyectos con facilidad. Los elementos de arrastrar y soltar hacen la vida más fácil y puede vincular botones a otras páginas. Esto significa que puede comenzar rápidamente a planificar sus interfaces y luego compartirlas con su equipo o clientes.

03. Achachado

Eje siempre ha sido una de las mejores herramientas de wireframing en el mercado y es ideal para proyectos más complejos que requieren datos dinámicos. Con Axure, realmente puede centrarse en simular proyectos que son más técnicos y requieren atención adicional cuando se trata de estructura y datos.

04. Adobe Comp

Composición de Adobe es una buena adición para aquellos que se encuentran creando y conceptualizando sobre la marcha. ¿Tienes una tableta con un lápiz inteligente? Esto valdrá la pena la descarga por si la inspiración golpea para desarrollar un nuevo concepto para un diseño cuando usted está lejos de su espacio de trabajo principal.

Diseño y prototipos de IU

05. Boceto

Bosquejo es una herramienta muy popular dentro de la comunidad de diseño que le permite crear interfaces y prototipos de alta fidelidad. Una de las grandes características son los símbolos, donde puede diseñar activos y elementos de interfaz de usuario para su reutilización. Esto ayuda a crear sistemas de diseño y mantener sus interfaces consistentes. Desde allí, puede exportar fácilmente su diseño a un prototipo en el que se pueda hacer clic. Si eres usuario de InVision, asegúrate de echar un vistazo al plugin Craft (más sobre eso a continuación).

Si desea que su sistema de diseño sea perfectamente compartible, asegúrese de que su almacenamiento en la nube está a la altura.

06. InVision Studio

Los sueños de muchos diseñadores de IU están a punto de hacerse realidad Estudio InVision . Todavía en su lanzamiento temprano, esta herramienta le ayudará a crear hermosas interfaces interactivas con una carga de cubo de características. Puede crear animaciones y transiciones personalizadas a partir de una serie de gestos e interacciones. Para colmo, puedes dejar de pensar en crear numerosas mesas de trabajo para múltiples dispositivos porque el diseño responsivo se puede lograr dentro de una sola mesa de trabajo. Esto ahorra un montón de tiempo, por lo que se puede pensar en más ideas.

07. Artesanía

Si utiliza Sketch o Photoshop para el diseño de la interfaz de usuario, debe utilizar Arte . Este plugin lo hace todo, sincronizando tus archivos sin problemas con tus prototipos de Invision y rellenando tus maquetas con datos reales y fotografía de stock.

08. Proto.io

Proto.io es un increíble contendiente para crear prototipos realistas desde ideas aproximadas hasta diseños de pleno derecho. La herramienta también ofrece muchas posibilidades para sus proyectos, incluyendo animaciones detalladas y animaciones vectoriales personalizadas también. Puede comenzar desarrollando ideas iniciales con un estilo dibujado a mano, luego trabajarlas en estructuras alámbricas y terminar con un prototipo de alta fidelidad. Los plugins Sketch y Photoshop realmente ayudan si quieres diseñar usando otras herramientas, pero Proto.io maneja bien el proceso de diseño de extremo a extremo. Otras características como las pruebas de usuario también ayudarán a validar sus diseños. Esta es una solución todo en uno con un gran número de marcas de confianza que ya la utilizan.

09. Adobe XD

Adobe XD ofrece el mejor entorno para proyectos digitales Adobe Creative Cloud colección de herramientas de diseño. Si usted es un usuario entusiasta de Adobe y nuevo en XD, es posible que no encuentre la interfaz muy adobe-like para empezar - es un salto si usted ha estado diseñando en Photoshop durante un tiempo. Pero se acumula hasta las otras herramientas líderes por ahí, y vale la pena si usted es un gran fan de Adobe.

También consulte nuestras recomendaciones para Plugins XD de Adobe.

10. Marvel

Marvel es otra herramienta de creación de prototipos que es una gran opción a la hora de producir ideas rápidas y refinar una interfaz. Al igual que con muchas de las otras aplicaciones de este tipo, Marvel ofrece una manera muy ordenada de construir páginas y le permite simular su diseño a través de un prototipo. Hay algunas integraciones maravillosas con Marvel, lo que significa que puede insertar sus diseños en su flujo de trabajo de proyecto.

11. Figma

Figma le permite componer y diseñar interfaces rápidamente. La plataforma Figma se enorgullece de ser una herramienta de diseño colaborativo mediante la cual varios usuarios pueden trabajar simultáneamente en un proyecto , esto es muy eficaz cuando tiene múltiples partes interesadas en un proyecto que están involucrados en la configuración del resultado. Este es el tipo de herramienta que sería ideal si tienes un proyecto en vivo donde un desarrollador, redactor y diseñador, por ejemplo, necesita trabajar en algo al mismo tiempo.

12. Framer X

Framer X es una nueva herramienta de diseño realmente emocionante que sin duda vale la pena buscar diseñadores de interfaz de usuario experimentados que quieren más de sus herramientas. Prototipar y crear interacciones es muy fácil. Si eres un gran fan de React, no busques más, ya que puedes diseñar y codificar en sincronía. Además de ser una gran herramienta, hay una fuerte comunidad de diseñadores detrás de Framer X que ofrece activos y kits de interfaz de usuario.

13. Flinto

Pedernal es una herramienta de diseño agradable y sencilla que le permite crear interacciones únicas dentro de sus diseños. Puede utilizar una serie de gestos y crear transiciones fáciles diseñando los estados antes y después. Flinto simplemente trabaja las diferencias y luego anima para ti.

14. Principio

El diseño de interacción es lo que Principio sobresale, especialmente cuando se trata de aplicaciones móviles. Ajustar y obtener interacciones animadas a la derecha es una brisa con Principle. Puede ver los activos individuales y cómo animan de forma independiente, hasta los tiempos y la flexibilización.

15. UXPin

Descrita como la plataforma de experiencia de usuario "de extremo a extremo", UXPin es esencialmente otra herramienta de diseño, pero con una potente capacidad para crear sistemas de diseño. UXPin sirve a equipos de diseño más grandes que necesitan trabajar fuera de los mismos estilos y guías, ahorrando tiempo con el desarrollo de productos cuando la colaboración juega un papel importante.

16. ProtoPie

ProtoPie le permite crear interacciones bastante complejas y acercarse bastante a cómo desea que su diseño funcione. Tal vez la característica más destacada es la capacidad de controlar los sensores de los dispositivos inteligentes en su prototipo, como la inclinación, el sonido, la brújula y los sensores 3D Touch. Dependiendo de su proyecto, esta es una gran herramienta para abarcar características de aplicaciones nativas. Es fácil como el pastel sin necesidad de código.

17. Justinmind

Esta herramienta, Justinmind , ayuda con la prototipado e integración con otras herramientas como Sketch y Photoshop. Puede elegir sus interacciones y gestos para ayudar a armar su prototipo. También contiene kits de interfaz de usuario, lo que le permite armar pantallas rápidamente.

18. Estudio origami

Dado Estudio origami está construido y utilizado por los diseñadores en Facebook, usted puede asumir que esta debe ser una gran herramienta. Y tendrías razón. Hay una maravillosa cantidad de características con Origami, incluyendo la adición de reglas y lógica a sus interacciones. ¿Cuántas veces has querido que un botón se muestre o se comporte de manera diferente debido a otra cosa? Hay una oportunidad de crear un prototipo fiel a la forma con Origami, pero es muy técnico y requiere un poco de aprendizaje. Esta herramienta es perfecta para desarrolladores y diseñadores que trabajan juntos.

19. Fluido

Fluido es una herramienta intuitiva para construir prototipos rápidos y elaborar diseños. Incluye algunos activos agradables de la caja para ponerlo en marcha con prototipos rápidos y, una vez que haya actualizado, es fácil ensamblar sus propios símbolos con sus activos de interfaz de usuario preferidos.

20. Keynote

Además de ser una gran herramienta para crear presentaciones, Keynote – específicamente su transición Magic Move – es una de las maneras de animar rápidamente sus diseños y comunicar sus ideas.

Otras herramientas de diseño de interfaz de usuario

21. Calculadora de tipografía de relación dorada

¿Tamaños de encabezados decisivos atascados? el Calculadora GRT utiliza la ciencia de la relación dorada para generar una escala tipográfica que se puede utilizar en los diseños de su interfaz.

22. Zeplin

Zeplin no es necesariamente una herramienta de prototipos, pero encaja mucho en esa etapa posterior al diseño y al pre-desarrollo junto con el prototipo. Le permite tomar su diseño y prototipos, entregarlos a los desarrolladores y asegurarse de que sus ideas se ejecutan bien. Puede cargar los archivos Sketch, Photoshop, XD e Figma en Zeplin y creará un entorno para que los desarrolladores y diseñadores entreguen el proyecto, sin la tediosa tarea de crear directrices. Sin embargo, vale la pena asegurarse de que lo necesita primero.

Este artículo apareció originalmente en Net y Web Designer.

Artículos relacionados:

• Lo último Guía de diseño de IU
• Sitios web de WordPress : Ejemplos impresionantes
• Cómo clasificarse en Google