En estos días, hay una gran cantidad de excelentes herramientas de diseño web disponibles para ayudarlo con maquetas, marcos, pruebas y otras tareas. También descubrirá una gran cantidad de recursos sobre los numerosos factores que intervienen en un diseño web exitoso, como la realidad virtual, la animación, el color y la tipografía.
Es probable que alguien haya creado una herramienta para cualquier problema que intente abordar en su proceso de diseño web, ya sea una utilidad independiente o una función dentro de un programa más grande. La noticia aún mejor es que muchas de estas fantásticas herramientas están disponibles de forma gratuita, pero esto hace que elegir cuáles usar sea significativamente más difícil.
Para ayudar a los diseñadores web, hemos compilado una lista de las mejores herramientas disponibles en este momento (para obtener una lista más específica, consulte este resumen de herramientas de diseño de interfaz de usuario). Debido a que esta es una lista tan larga, la hemos dividido en partes para que sea más fácil de explorar. El software de diseño web completo, como Sketch y Adobe XD, se incluye primero, seguido de herramientas especializadas más básicas de estructuración de cables, luego marcos y bibliotecas de diseño web. En la segunda página, encontrará una variedad de herramientas más pequeñas y especializadas para cualquier cosa, desde trabajar con fotografías hasta asegurarse de que su trabajo sea inclusivo.
Herramientas Para El Diseño Web
1. Estudio InVision
InVision Studio aspira a ser la única herramienta de interfaz de usuario que necesitará. Incluye herramientas para la creación rápida de prototipos, el diseño receptivo y colaborativo y el trabajo con sistemas de diseño, entre otras cosas, para ayudarlo a desarrollar atractivas interfaces interactivas.
Hay mucha superposición de capacidades si actualmente está utilizando InVision con herramientas como Sketch. Sin embargo, la fortaleza de Studio está en la creación de prototipos, que es particularmente importante si su diseño contiene animación. La creación rápida de prototipos le permitirá desarrollar transiciones intrincadas e innovadoras, lo que le permitirá lograr la cantidad deseada de animación. Simplemente decida cómo desea que aparezca su interfaz de usuario al comienzo de la transición y luego cree el producto final. El resto está a cargo de InVision Studio.
También puede realizar estas propias animaciones y transiciones utilizando una variedad de movimientos e interacciones, como deslizar, hacer clic y pasar el mouse por encima.
Cuando haya terminado, use InVision para exportar sus prototipos e invite a otros a participar. Puede ver su proyecto en la plataforma para la que fue diseñado, lo cual es una excelente manera de explorar y probar su idea. Los clientes podrán proporcionar comentarios directos sobre el diseño.
Para colmo, no tendrá que preocuparse por diseñar varias mesas de trabajo para diferentes dispositivos, ya que el motor de diseño de Studio modificará automáticamente su diseño a cualquier tamaño de pantalla. Este ahorro de tiempo le permite pensar más profundamente sobre su diseño.
2. Bosquejo
Sketch de Bohemian Coding es una de las plataformas de diseño en línea más utilizadas; es una herramienta basada en vectores muy capaz para crear interfaces y prototipos en colaboración. Sketch fue creado específicamente para crear sitios web y aplicaciones, por lo que tiene menos funciones extrañas y es más rápido y eficiente que las herramientas de mayor alcance.
Rory Berry, el director creativo de Superrb, cambió a Sketch hace unos años y dice que es una gran herramienta. «Ordenar todos sus papeles y hacer modificaciones en Sketch es mucho más simple que en Photoshop», dice. «Sketch funciona con documentos pequeños, mientras que Photoshop funciona con documentos grandes. El tamaño de los archivos es mucho menor que el de Photoshop, ya que es un software basado en vectores».
No solo eso, sino que hay más. «La estructura de cuadrícula integrada de Sketch es fantástica y hace que el diseño de la interfaz sea muy sencillo». La interfaz de usuario general y el ambiente básico, en mi opinión, hacen que sea más fácil de crear y más fácil de usar. Por el contrario, Photoshop parece ser realmente difícil».
Cientos de complementos de Sketch están disponibles en la comunidad para que su proceso de diseño sea más simple y fluido.
La desventaja de Sketch es que solo es accesible para Mac, sin intenciones de admitir otros sistemas operativos. Esto ha sido una preocupación ya que los diseñadores a menudo desean compartir archivos .sketch con los desarrolladores de Windows. Afortunadamente, ahora existe una herramienta de «Sketch para Windows» llamada Lunacy que abrirá y editará archivos .sketch, eliminando la mayor parte de la agonía. Consulte la sección Exportación y conversión de esta página para obtener más información.
3. Adobe XD
Bajo el paquete Adobe Creative Cloud, Adobe XD proporciona el mejor entorno para proyectos digitales. Si es un usuario de Adobe desde hace mucho tiempo y es nuevo en XD, es posible que la interfaz de usuario no parezca particularmente «Adobe» al principio. Sin embargo, se compara bien con otras herramientas destacadas. Es un gran salto si ha estado usando Photoshop durante mucho tiempo, pero vale la pena para el diseño de la interfaz de usuario.
Esta herramienta de diseño de vectores y wireframing continúa mejorando, con características como soporte de animación automática que garantiza que puede mantenerse al día con las últimas tendencias de UX. Las herramientas de dibujo, las herramientas para definir interacciones no estáticas, las vistas previas móviles y de escritorio y las funciones de uso compartido para ofrecer comentarios sobre los diseños están incluidas en XD. Le permite iniciar un proyecto con un tamaño de mesa de trabajo específico del dispositivo, e incluso puede importar kits de interfaz de usuario famosos como Material Design de Google.
Es importante destacar que Adobe XD está completamente integrado con el resto de Creative Cloud, lo que le permite importar y trabajar con archivos de Photoshop o Illustrator de manera sencilla. Si ha utilizado programas anteriores de Adobe, la interfaz de usuario le parecerá cómoda y familiar, por lo que no habrá mucha curva de aprendizaje.
Andrei Robu, director de diseño de Robu Studio de Barcelona, es un fan. «Es maravilloso para prototipos rápidos», explica. «Es una interfaz simple con muchas fotografías y es ideal para paneles de inspiración». La creación de prototipos es bastante beneficiosa para mostrar a los clientes cómo funcionan las cosas, especialmente porque puede publicar la información en línea de inmediato».
También lo recomienda Ellis Rogers, diseñador gráfico de Receptional Ltd. «Cuando el diseño/prototipo o la estructura alámbrica están terminados, Adobe XD le permite elegir piezas rápidamente y crear transiciones de página para un prototipo funcional que puede compartir a través de un enlace». él continúa. «También puede usar el enlace para recopilar comentarios por página, manteniendo todo organizado». El enlace se puede cambiar dentro de Adobe XD para que el cliente siempre vea la versión más reciente sin preocuparse por las versiones obsoletas. Es un verdadero placer tratar contigo».
4. Maravilla
Marvel es otra herramienta de diseño web que es fantástica para esbozar rápidamente conceptos, ajustar una interfaz a tu gusto y crear prototipos. Marvel tiene un enfoque bastante bueno para crear páginas que te permiten imitar tu diseño con un prototipo. Para incorporar sus ideas en el proceso de su proyecto, hay varias integraciones fantásticas disponibles. Vale la pena señalar que hay una opción de prueba de usuario integrada, que actualmente es poco común en el panorama de las herramientas de diseño web. No hay necesidad de descargar nada ya que todo se hace en línea.
5. Figura
Figma es una herramienta de diseño de interfaz que permite la colaboración en tiempo real entre numerosos diseñadores. Cuando hay varias partes interesadas en un proyecto que quieren dar forma al resultado, esta es una excelente manera de hacerlo. Es accesible en el navegador, así como en Windows, Mac y Linux, y hay versiones gratuitas y premium disponibles según sus necesidades.
Estas son algunas de sus características más notables:
El diseñador front-end Benjamin Read agrega: «Figma tiene una USP similar a Sketch, con la diferencia de ser multiplataforma». «Encontré que el proceso fue muy fluido cuando lo usé para hacer algunos íconos». Fue fácil de aprender y tiene la ventaja adicional de ser colaborativo: puedes intercambiar gráficos con otros dentro del programa».
«He estado tratando de cambiarme a Linux por trabajo, y a veces usamos Windows», dice, «así que Figma tiene sentido para mí desde un aspecto práctico».
David Eastwood, un escritor de contenido y artista independiente, también elogió a Figma. «También es útil cuando necesitamos crear rápidamente prototipos de MVT, a veces como cambios menores en un diseño existente». Nos gusta la rapidez con la que puede producir diseños para computadoras de escritorio, tabletas y dispositivos móviles».
6. Diseñador de Afinidad
«Algunos han apodado a Affinity Designer de Serif como el ‘asesino de Photoshop’, y es fácil entender por qué», explica el diseñador de productos Dan Edwards. «Las capas ajustables y no destructivas fueron algunas de las cosas que realmente me gustaron. Esto simplemente implica que puede realizar cambios en las fotos o los vectores sin dañarlos.
«El zoom de 1.000.000 % fue una auténtica delicia; es particularmente beneficioso cuando se trata de gráficos vectoriales, ya que te permite acercarte increíblemente». Las funciones de deshacer e historial también son bastante útiles: ¡puede retroceder más de 8000 pasos con Affinity!»
«Cuando se trata de diseño, la interfaz de usuario es cómoda. Al cambiar de Photoshop a InDesign, todo el mundo parece querer empezar de nuevo, lo que puede ser difícil. Affinity ha hecho un buen trabajo manteniendo el diseño reconocible mientras lo ajusta y elimina las distracciones. . Pude entrar sin esfuerzo y comenzar a desarrollar».
La versión para iPad de Affinity Designer también está disponible. Y, contrariamente a la creencia popular, esta no es una versión reducida de la aplicación móvil: es la versión completa disponible para PC.
Prototipos Y Maquetas
7. Pin UX
UXPin es la próxima herramienta de diseño web en nuestra lista. Esta herramienta de creación de prototipos basada en la web está disponible para Mac, Windows y la web. UXPin se acerca más al código y le permite trabajar con estados interactivos, lógica y componentes de código, mientras que la mayoría de las otras herramientas de diseño solo le permiten imitar interacciones uniendo varios elementos en su mesa de trabajo.
Para ayudarlo, hay bibliotecas de elementos integradas para iOS, Material Design y Bootstrap, así como cientos de conjuntos de íconos gratuitos. UXPin también ofrece capacidades de accesibilidad que lo ayudan a mantener sus diseños en conformidad con los estándares WCAG, lo cual apreciamos.
Puede hacer su primer prototipo de forma gratuita en UXPin y luego actualizar a una suscripción mensual premium si lo desea (las membresías del equipo están disponibles). UXPin también ofrece una buena conexión con Sketch, por lo que vale la pena agregarlo a su flujo de trabajo si le gusta Sketch pero sus funciones de creación de prototipos son limitadas.
8. Proto.io
Proto.io es una herramienta fantástica para crear prototipos realistas que comienzan con conceptos rudimentarios y concluyen con diseños completamente realizados. Además, la herramienta ofrece una variedad de opciones para sus proyectos, incluidas animaciones vectoriales detalladas y personalizadas.
Puede comenzar por esbozar los primeros conceptos a mano y luego pasar a los esquemas y un prototipo de alta fidelidad. Si desea crear con otras herramientas, los complementos de Sketch y Photoshop pueden ayudar, pero Proto.io maneja todo el proceso de diseño de manera efectiva. Otras capacidades, como las pruebas de usuario, ayudarán en la validación de sus ideas. Esta es una solución todo en uno que ya han utilizado una gran cantidad de empresas conocidas.
Hay muchas demostraciones excelentes para probar, y puede ver rápidamente cómo una solución integral podría reemplazar fácilmente una serie de tecnologías existentes. Proto.io también incluye administradores de activos, pautas de desarrollo y la opción de grabar su prototipo, lo que la convierte en una de las plataformas de creación de prototipos más completas disponibles.
9. Balsamiq
Balsamiq es una recomendación sólida si está buscando una estructura de alambre rápida y eficiente. Con sencillez, puede crear un marco y un plan para sus proyectos. Es más sencillo usar componentes de arrastrar y soltar, y puede conectar botones a otros sitios. Inmediatamente puede comenzar a planificar sus interfaces y compartirlas con su equipo o clientes mediante la creación de esquemas. Balsamiq existe desde 2008 y es conocido por su enfoque de baja fidelidad, rápido y sensato.
10. ProtoPastel
ProtoPie, una herramienta de diseño web, le permite construir interacciones complejas y acercarse a la función final deseada de su diseño. La capacidad de administrar los sensores de los dispositivos inteligentes en su prototipo, como los sensores de inclinación, sonido, brújula y 3D Touch, es quizás la característica más notable.
Esta es una excelente herramienta para las personas que desean incluir capacidades de aplicaciones nativas en su proyecto, según el proyecto. Es tan simple como un pastel, y no se necesitan conocimientos de programación.
11. Flujo Simulado
MockFlow es una colección de herramientas de planificación y creación de esquemas en línea. WireframePro lo ayuda a diseñar su primer concepto y luego iterarlo hasta que sea perfecto; incluso hay un rastreador de revisión de UI para ayudarlo. Incluye cientos de componentes y diseños preconstruidos que puede personalizar para satisfacer sus necesidades, así como un modo de vista previa para mostrar su trabajo a colegas y clientes.
Una vez que haya completado sus esquemas, el resto de la suite puede ayudarlo con otras partes de la planificación del sitio web, como la arquitectura de la información, la creación de una guía de estilo (que se puede crear automáticamente) y completar un procedimiento de aprobación.
Si está buscando más opciones, eche un vistazo a nuestra lista de las mejores herramientas de estructura alámbrica.
12. Comp de Adobe
Adobe Comp es una excelente aplicación de diseño web para iPad que lo ayuda a crear esquemas, prototipos y diseños de diseño para sus sitios web. Si quiere llamarlo así, es un bloc de dibujo inteligente con tecnología Creative Cloud. Incluye plantillas básicas para una variedad de diseños móviles y web, así como para imprimir si eso es lo que le gusta, y puede crear rápidamente marcadores de posición dibujando formas intuitivas para representar fotos, texto y más. Comp convierte líneas, círculos y rectángulos garabateados en líneas rectas, círculos y rectángulos.
A pesar de una solicitud de larga data que ha estado bajo evaluación durante lo que parece una eternidad, Adobe no ha considerado adecuado integrar la exportación directa a XD, ¡una locura! – a pesar de una solicitud de larga data que ha estado bajo revisión por lo que parece una eternidad. Sin embargo, la exportación a Photoshop (junto con Illustrator e InDesign) está integrada y, una vez que haya modificado su maqueta en el omnipresente editor de imágenes, puede exportar a XD desde allí. Comp se gana por completo su posición en nuestra lista debido a sus características para ir a cualquier lugar, su facilidad de uso y su excelente interfaz de usuario, a pesar de este molesto paso adicional en la ruta de usuario del devoto de Adobe.
13. Flinto
Flinto es una herramienta de diseño que le permite crear interacciones únicas en sus proyectos. Al definir los estados de antes y después, puede usar una variedad de movimientos y generar transiciones simples. Flinto simplemente calcula las diferencias y las anima, lo cual es bastante útil.
Tenga en cuenta que esta aplicación es solo para iOS, pero una vez que comience a usarla, le parecerá bastante familiar. Hay documentación disponible en línea para ayudarlo, y la importación desde Sketch y Figma es muy simple.
14. Axura 14
Axure ha sido tradicionalmente una de las mejores herramientas de wireframing disponibles, especialmente para grandes proyectos con datos dinámicos. Puede concentrarse en simular proyectos que son técnicos y exigen una cuidadosa atención a la estructura y los datos utilizando Axure.
El proceso de entrega en Axure comprende la creación de especificaciones detalladas que los desarrolladores pueden usar para construir un producto final que se ajuste a su visión.
15. Mente Justa
Justinmind ayuda a crear prototipos y se conecta con otros programas como Sketch y Photoshop. Para ayudar con el ensamblaje de su prototipo, puede elegir sus interacciones y gestos. También viene con kits de interfaz de usuario para que pueda crear pantallas rápidamente y responde.
16. Fluido
Fluid es una herramienta simple y directa para la creación rápida de prototipos y el desarrollo de diseños. Viene con varios componentes útiles listos para usar para ayudarlo a comenzar con la creación rápida de prototipos. Es sencillo crear sus propios símbolos usando sus componentes de interfaz de usuario favoritos después de haber actualizado. Esta herramienta permite la creación rápida de IU, con elementos accesibles para prototipos de alta y baja calidad.
17. Enmarcador
Framer es una herramienta prototipo que ayuda a su equipo a comunicarse y colaborar de manera más eficaz, especialmente entre diseñadores e ingenieros. Está diseñado teniendo en cuenta los sistemas de diseño y se conecta con su código para proporcionar documentación fácil de entender que se actualiza automáticamente. Una función principal es mantener a todos en la misma página y actualizados, de modo que a medida que cambia su código, también lo hace su diseño.
Bibliotecas Y Marcos De Diseño
18. Arranque
Aunque Bootstrap no es una tecnología nueva, ha revolucionado la programación y continúa influyendo en la forma en que construimos sitios web. Los contenedores receptivos que son fluidos hasta un punto de interrupción específico y las clases responsive.row-cols para definir de manera efectiva la cantidad de columnas en los puntos de interrupción son dos características a tener en cuenta.
Bootstrap Icons es una colección de iconos de código abierto destinada a interactuar con los componentes de Bootstrap.
19. Puesta en Marcha 4
Startup 4 es una aplicación en línea con plantillas y temas incorporados para crear sitios web basados en Bootstrap 4 con una cuadrícula de 12 columnas si te gusta Bootstrap pero no quieres sumergirte en lo básico; es una aplicación en línea con plantillas y temas integrados para crear sitios web basados en Bootstrap 4 con una cuadrícula de 12 columnas si te gusta Bootstrap pero no quieres sumergirte en lo básico. Puede usar la interfaz de arrastrar y soltar para crear su sitio sin escribir ningún código, pero necesitará conocimientos básicos de HTML y CSS para terminarlo.
20. Vue.js
Vue.js es un marco de interfaz de usuario que emplea un DOM virtual. La biblioteca principal de Vue se centra en la capa de vista, como su nombre lo indica.
21. Laboratorio De Patrones
Dave OIsen y Brad Frost diseñan Pattern Lab, una magnífica herramienta de diseño basada en patrones. Se basa en el principio de diseño atómico, que establece que debe dividir su diseño en sus componentes más pequeños (átomos) y combinarlos para producir componentes más grandes y reutilizables (moléculas y criaturas) que luego se pueden transformar en plantillas.
Pattern Lab es un generador de sitios estáticos que une los componentes de la interfaz de usuario en su esencia, pero es mucho más que eso. Es lenguaje y herramientas neutrales; puede superponer patrones de interfaz de usuario entre sí y diseñar con datos dinámicos; tiene capacidades de cambio de tamaño de ventana gráfica independientes del dispositivo para garantizar que su sistema de diseño responda completamente; y es completamente extensible, por lo que puede estar seguro de que crecerá para satisfacer sus demandas.
22. Diseño De Materiales
Material Design es un lenguaje visual creado por Google que intenta combinar conceptos de diseño tradicionales con avances tecnológicos y científicos para proporcionar una base unificada y adaptable para su sitio web.
Los sitios web y las aplicaciones basados en Material Design parecerán actuales y familiares para los usuarios, lo que les facilitará comenzar a usar su producto de inmediato. Hay varias herramientas disponibles para ayudar con este sistema de diseño; para acceder a ellos, vaya a Recursos en la barra de navegación.
