Advertisement
  1. Web Design
  2. UX/UI
  3. UI Design

Los juegos de UX y UI más vendidos para Sketch, Photoshop, Illustrator, XD y Figma

Scroll to top
Read Time: 8 min

() translation by (you can also view the original English article)

Los juegos o kits de UX y UI (Experiencia de Usuario e Interfaz de Usuario en español) ayudan a los diseñadores de varias formas y en diferentes etapas del proceso de diseño. En este resumen, te mostraré algunos de los kits de UX y UI más vendidos disponibles en Envato, para que puedas empezar a crear esquemas, elaborar prototipos y diseñar tu próximo sitio web o aplicación.

¿Qué son los juegos de UX y UI?

Los siguientes juegos o kits son una excelente forma de empezar tu proceso de diseño. Pueden servirte como inspiración, una forma de presentar rápidamente una idea a un cliente o para brindarte información básica para un diseño completo. Por lo general, están disponibles para Sketch, Adobe Illustrator y otros, y se proporcionan de una manera lógica con carteles, estilos y símbolos, para ayudarte a encontrar y trabajar con los elementos que busques.

Algunos son multipropósito y proporcionan una enorme cantidad de elementos, otros son específicamente para elaborar esquemas, otros son más especializados y atienden a categorías como comercio electrónico, redes sociales, mapas y navegación, bienes raíces, interfaces para móviles, etcétera.

Aplicaciones de diseño soportadas

Cada kit mencionado aquí es compatible con al menos una de las siguientes, y por lo general más:

  • Sketch
  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe XD
  • Figma
  • InVision

En la actualidad, puedes abrir un archivo de Sketch en Sketch (obviamente), Adobe XD, Figma e InVision sin ningún problema.

InVision supports Sketch and Photoshop files perfectlyInVision supports Sketch and Photoshop files perfectlyInVision supports Sketch and Photoshop files perfectly
InVision soporta los archivos de Sketch y Photoshop de forma nativa

Adobe XD también manejará los archivos de Photoshop, manteniendo las mesas de trabajo, las capas y los activos lo más fielmente posible a los originales.

Adobe XD warns you about Photoshop importsAdobe XD warns you about Photoshop importsAdobe XD warns you about Photoshop imports
Adobe XD te advierte sobre la apertura de archivos PSD, pero es bastante bueno

Axure es un poco menos compatible con otros formatos, pero sin importar la aplicación para la que fue creado un kit, existen bastantes posibilidades de que sea compatible con la herramienta de diseño que elijas.

¿UX y UI son lo mismo?

Los términos UX y UI con frecuencia se usan indistintamente. Si bien existen algunos cruces, y los dos trabajan juntos, no significan lo mismo

Cuando nos referimos a un kit de UI, estamos hablando de activos que se pueden usar para diseñar una interfaz de usuario. Esto significa diseñar la presentación, la estética, cómo aparece visualmente una interfaz de usuario. Los activos de un kit de UX, por otra parte, se utilizarían para diseñar la experiencia de un sitio web o una aplicación. Piensa en esquemas y prototipos. La usabilidad, el flujo, la interacción entre usuario y producto.

Los juegos de UX y UI pueden servir para ambos propósitos, por lo que a menudo se denominan colectivamente "Kits de UX y UI".

Kits de UX y UI en Envato

Tenemos cientos de kits de UX y UI en Envato Market y en Envato Elements (donde puedes descargar tantos como desees por un bajo precio). ¡Veamos algunos de los más populares!

1. Wireland (Sketch)

Su nombre lo dice todo; Wireland tiene que ver con los esquemas. Viene con más de 200 diseños predefinidos, y hay una cierta cantidad de detalles, que te ofrecen más que fidelidad, pero la estética azul tranquilizante y despejada es perfecta para wireframes.

Wireland - Wireframe Library for Web Design Projects - Sketch TemplateWireland - Wireframe Library for Web Design Projects - Sketch TemplateWireland - Wireframe Library for Web Design Projects - Sketch Template
Wireland: Biblioteca de wireframes para proyectos de diseño web

Incluye una biblioteca de dispositivos, elementos de markup para mostrar el flujo, utiliza símbolos y se basa en el grid familiar de Bootstrap. Por último, también hay una muestra gratuita que puedes descargar y probar antes de comprar la versión con licencia completa.

Wirelands markup elementsWirelands markup elementsWirelands markup elements
Elementos de markup de Wireland, para etiquetar, comentar y demostrar el flujo

2. Userflow & Sitemap (Photoshop e Illustrator)

Diseñar el flujo del usuario es una parte muy importante del proceso de diseño. Ocurre desde el principio, y sucede rápidamente. El Kit de UX de Userflow & Sitemap para sitios web tiene todos los elementos que podrías necesitar para hacer esto: una colección de pantallas y gráficos para que puedas esquematizar cómo se mueven los usuarios de una parte a otra en un sitio web.

Website Userflow Sitemap UX KitWebsite Userflow Sitemap UX KitWebsite Userflow Sitemap UX Kit
Kit de UX de Userflow & Sitemap para sitios web

Tiene una versión oscura y otra versión clara, dependiendo de tu preferencia, pero eso es tan complejo como las decisiones visuales. ¡Toma algunas pantallas, bájalas, enlázalas!

Website Userflow Sitemap UX Kit dark versionWebsite Userflow Sitemap UX Kit dark versionWebsite Userflow Sitemap UX Kit dark version
Kit de UX para Userflow y Sitemap, versión oscura

3. Bolder: UI para móviles (Sketch)

Bolder es un kit de interfaz de usuario que ofrece 65 diseños para móviles de muy alta calidad, que cubren una variedad de nichos como redes sociales, comercio electrónico y blogs. Bolder tiene un gran dinamismo en franjas y está organizado  de manera práctica con mesas de trabajo, capas, símbolos y estilos tipográficos, lo que le facilita el trabajo a cualquier diseñador de IU para móviles.

Bolder - Multipurpose Mobile UI KIT for SketchBolder - Multipurpose Mobile UI KIT for SketchBolder - Multipurpose Mobile UI KIT for Sketch
Bolder - KIT multipropósito de UI para móviles para Sketch

4. Kama Kit de UI para iOS (Sketch)

Kama está diseñado específicamente para iOS. Incluye más de 120 pantallas, dándole a los diseñadores de aplicaciones bastantes opciones para chart layouts, recorridos, comercio electrónico, multimedia, perfiles de usuario, navegación y redes sociales, también contiene 60 iconos personalizados.

Kama iOS UI KitKama iOS UI KitKama iOS UI Kit
Kama Kit de UI para iOS

5. Farah (Sketch, XD, Figma)

Farah es realmente sorprendente. Tiene 15 diseños móviles de alta fidelidad, todos completamente personalizables, y todos con un estilo muy contemporáneo. Es una adición relativamente nueva en Envato Market, que refleja la demanda actual de varias aplicaciones de diseño al atender específicamente a los usuarios de Sketch, XD y Figma.

Si está buscando un estilo audaz y confiado, este es una gran opción para aplicar a tus diseños.

Farah - Profile UI Kit for Sketch AppFarah - Profile UI Kit for Sketch AppFarah - Profile UI Kit for Sketch App
Farah - Kit de UI para perfiles (Sketch)

6. MIGO Kit de UI para app de citas (Sketch, XD, Figma)

MIGO es otro diseño audaz y enérgico creado por hoangpts. Diseñado para una aplicación de citas, le otorgará colores vibrantes a tus diseños, degradados y una cordial calidez . Contiene 22 pantallas para iOS de alta calidad (listas para iPhoneX) y es compatible con Sketch, XD y Figma.

MIGO Dating UI KitMIGO Dating UI KitMIGO Dating UI Kit
MIGO Kit de UI para app de citas

7. Stamp (Sketch)

Stamp es otra opción de alta fidelidad que brinda a los diseñadores más de 75 "tarjetas" de diseño, creadas con más de cien componentes diferentes.

Customize with StampCustomize with StampCustomize with Stamp
Personaliza con Stamp

Personaliza con Stamp, en vez de crear desde cero, y rápidamente tendrás un diseño web completo y moderno.

Stamp 100 Beautiful Web ComponentsStamp 100 Beautiful Web ComponentsStamp 100 Beautiful Web Components
Stamp - 100 Hermosos componentes web

8. Ultramarine Kit de UI (Sketch)

Me gusta este. Particularmente porque ese ultramarino realmente se ve poderoso con el verde lima. Nuevamente, esto es algo de "alta fidelidad", por lo que no es tanto para la etapa de diseño de UX de un producto, sino más bien para añadir una apariencia elegante. Dicho esto, tiene una apariencia fuerte (y muy completa) brindando más de 120 componentes para utilizar en tus diseños.

Ultramarine UI KitUltramarine UI KitUltramarine UI Kit
Ultramarine Kit de UI

9. Next Ecommerce (Sketch, Photoshop)

Si disfrutas crear tus diseños en Photoshop, Next Ecommerce te da esa opción. Con 35 archivos en PSD y Sketch, hay abundantes elementos de interfaz móvil para experimentar.

Next Ecommerce - UI KitNext Ecommerce - UI KitNext Ecommerce - UI Kit
Next Ecommerce - Kit de UI

10. Doom (Photoshop)

Otra opción para Photoshop, Doom es un kit de IU francamente enorme. Te brinda casi 100 diseños en PSD, incluyendo páginas de inicio, páginas internas, abarcando todo tipo de nichos, y es el primero de nuestros ejemplos que incluye opciones de panel de administración.

Doom - Massive All in One PSD PackDoom - Massive All in One PSD PackDoom - Massive All in One PSD Pack
Doom - Paquete masivo de archivos PSD todo en uno

Doom también incluye bastantes diseños para sitios de criptomonedas (si eso es lo tuyo), por lo que si estás diseñando una página de aterrizaje para la próxima gran moneda, ¡este es un excelente lugar para comenzar!

Doom - Massive All in One PSD PackDoom - Massive All in One PSD PackDoom - Massive All in One PSD Pack
Doom - diseños para páginas de aterrizaje de criptomoneda

11. Blokk Wireframe Kit (Photoshop)

Blokk es otro kit para Photoshop, que ofrece una interfaz de usuario simple para fines de wireframing. Desprovisto de detalles innecesarios, Blokk te ayudará a tomar decisiones fundamentales desde un principio en el proceso de diseño.

Blokk Wireframe KitBlokk Wireframe KitBlokk Wireframe Kit
Blokk Kit deWireframe más 170 Pantallas

Esta es una colección muy grande, que te brinda más de 170 tarjetas UI y prueba su gama de elementos con seis páginas de muestra. Ofrece los siguientes componentes (y aún más):

  1. Galería de medios
  2. Características
  3. Llamados a la acción
  4. Blog
  5. Comercio electronico
  6. Testimonios
  7. Tablas de precios
  8. Analíticas
Blokk Wireframe Kit 6 page demosBlokk Wireframe Kit 6 page demosBlokk Wireframe Kit 6 page demos
Blokk Kit para Wireframe: seis diseños de demostración

¡Aprovecha un kit de UX/UI hoy!

Ya sea que estés en las primeras etapas de un diseño y necesites algunos gráficos para tus esquemas, o estés puliendo la estética final de un prototipo o estés buscando inspiración para tu próximo proyecto, los juegos o kits de UX y UI pueden ser realmente útiles (¡y muy divertidos!) para cualquier diseñador web o de aplicaciones.

Todos los artículos que se enumeran aquí están disponibles en Envato Market, ¡pero no te olvides de revisar también la oferta masiva de Envato Elements!

Estaremos actualizando esta lista de manera regular

Déjanos saber en los comentarios cuáles son tus favoritos, recomienda tus propios kits y comparte cualquier consejo que puedas tener. Estaremos actualizando esta lista a medida que pase el tiempo y así mantenerla lo más actualizada y relevante como sea posible.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.