() translation by (you can also view the original English article)
Bocetos. Flujos de usuarios. Mapas de contenido. Diseño centrado en el usuario. Arquitectura de la información. Prototipos animados. Embudos de conversión. Características iterativas. Mapas de sitio. Uf, ¿qué?
Seamos honestos, el mundo de UX (experiencia de usuario) y de UI (interfaz de usuario) está lleno de tecnicismos y términos muy complejos. Toma, por ejemplo, esta línea que he copiado y pegado de una descripción para una oferta laboral como especialista en contenido para una universidad:
"Creación de plantillas que proporcionen un enfoque consistente para la estrategia de contenido incluyendo pautas para los mapas del sitio, inventario de contenido y auditorías, análisis de datos y ejercicios de experiencia de usuario."
Estas son un montón de sofisticadas frases que podrían simplificarse. Pero si trabajas en el sector del diseño web o de la estrategia de contenido, probablemente ya estés muy familiarizado con estos términos. La ironía de esto es que el objetivo de UX, es decir, de la experiencia de usuario consiste literalmente en hacer las cosas (a saber, el contenido) más fácil de entender (es decir, más navegable) para la gente (los usuarios).
Los wireframes y los kits de UI son dos términos del sector que suenan complicados, pero que son realmente súper simples de entender.
¿Qué es un wireframe?
¿Has barajado alguna vez una nueva idea de sitio web con un colega durante el almuerzo, o con un amigo en un bar? Te sientes inspirado, coges una servilleta y un lápiz, y empiezas a abocetar el aspecto que debería tener el sitio: en esto consiste crear un wireframe. En esencia, es dibujar el esquema o un boceto del aspecto que tendrá una página web o una aplicación. Es un esbozo, el mapa, el esquema conceptual.
Por supuesto, un boceto en una servilleta no te llevará más allá. Por ello, los diseñadores han creado plantillas para los wireframes que son fácilmente transferidos a presentaciones o software de diseño. (Te recomiendo este artículo, Una guía para principiantes sobre la creación de wireframes, si quieres más detalles y un gran recurso que desglosa los wireframes).
¿Qué es un kit de UI?
UI son las siglas del inglés user interface, a saber, interfaz de usuario. En otras palabras: lo que estás creando y con lo cual interactuará el usuario.
Un kit de UI contiene archivos y gráficos útiles que probablemente vayas a necesitar, como casillas de verificación, iconos, y mucho más. En esencia, es un conjunto de recursos cuyo objetivo es que no tengas que construir cada componente de tu página web o aplicación desde cero, y la estandarización significa que estará bien diseñado y que será fácil de usar por parte de tu audiencia.
No existe un modo "correcto" de diseñar un botón, pero ciertamente existen algunas formas que son mejores que otras, y un motón de investigación sobre ello. Al utilizar kit de UI, estarás confiando en los expertos y asegurándote que los detalles de tu página web estén pulidos y tengan un aspecto profesional.
Mejores plantillas de wireframe y kits de UI del 2021
Si eres un diseñador o un desarrollador de páginas web, y creas constantemente sitios web y aplicaciones, te encantará Envato Elements. A cambio de un bajo precio mensual, podrás disfrutar de descargas ilimitadas de elementos gráficos como por ejemplo: kits UI e UX, plantillas de wireframe, plantillas de página web, prototipos de producto y mucho más.
Las plantillas de wireframe y los kits de UI son dos cosas distintas, pero el contenido de estas plantillas con frecuencia se solapan. Así que las hemos reunido en este listado de los mejores y más útiles wireframes y kits de UI que puedes añadir ya mismo a tu biblioteca de recursos:
1. Concrete - Kit de Wireframe para móvil
Concrete es un simple kit de plantillas de wireframe de Android e iPhone para aplicaciones modernas. Todo lo que necesitas hacer es añadir los componentes que necesitas y editar el texto. Puedes usarla para planificar tus proyectos móviles como páginas de aterrizaje y aplicaciones empresariales.
2. Makeapp - Kit de wireframe para aplicación
Con más de 100 componentes de plantilla, el kit de wireframe para Sketch Makeapp es perfecto para planificar tus proyectos. Los objetos son totalmente editables y están claramente categorizados para que sean fáciles de usar. También puedes usar Makeapp en Adobe XD y en Photoshop.
3. Kit de wireframe para UI
¿Estás buscando sencillas plantillas de UX para Illustrator con las que mapear tus proyectos? Entonces querrás echarle un vistazo a esta opción. Te permite crear claros gráficos de flujo de forma que puedas planificar cómo quieres que funciones tu aplicación de escritorio o tu página web. Se trata de un kit de wireframe para Illustrator que querrás tener a mano.
4. Tulist - App móvil para escritor de blogs
Tulist es un kit de wireframe para aplicaciones y proyectos digitales. Está creada concretamente para Figma y para Adobe XD. Tully no es solo totalmente personalizable, sino que sus capas están además bien organizadas para facilitar su edición. Dale una oportunidad si estabas buscando una plantilla de wireframe para Android y para iPhone.
5. Plantilla de wireframe para página web
Esta plantilla de wireframe para página web tiene todo lo que necesitas. Crea un diseño de página web a partir de más de 100 diseños de página, y más de 1,500 combinaciones de UI.
Este kit de wireframe de diseño web para Sketch también es compatible con Adobe XD, y Adobe Photoshop. Todas las formas son vectoriales y 100% personalizables.
6. Kit de plantillas de wireframe para iPhone
Estas plantillas de wireframe te ayudará a dar a la vida a tus ideas y prototipos.
Este kit de wireframes para Sketch viene con más de 90 wireframes de pantallas que incluyen componentes y estilos para iPhone X, XS e iPhone 11 Pro. Entre algunas de sus mejores características se incluyen las siguientes:
- Es compatible y está creado específicamente para Sketch y Figma
- Cuadrícula de 8 puntos
- Todos los elementos está agrupados en categorías y adecuadamente nombrados para una ágil navegación
- Totalmente responsive. Los elementos pueden redimensionarse fácilmente
7. Kit de plantillas de wireframe esquemáticas
Esta plantilla de wireframe para página web está diseñada sobre una cuadrícula y dividida en 10 categorías. El resultado: 120 elementos listos para su uso e 3 formatos de archivo: Photoshop, Sketch y Adobe XD.
Este kit de wireframe para Sketch también incluye las siguientes características:
- Listo para dispositivos retina
- Formas vectoriales
- Utiliza fuentes gratuitas
- Capas adecuadamente nombradas
- Estructura organizada
8. Codama - Kit de wireframe de UI para iOS
Codama es un wireframe para iOS creado con Sketch, uno de los mejores software para diseño. Este kit de wireframes para Sketch está bien organizado y los archivos están nombrados con un sentido autoexplicativo para su uso en Sketch. La fuente elegida para esta plantilla de wireframe para iPhone es la Monserrat, la cual es una fuente clásica en los diseños de Apple.
9. Greyhound - Gráficos de flujo para UX
Greyhound es un singular kit que viene con más de 100 mini cartas de gráficos de flujo, además de bloques de acción, flechas, y mucho más. Los elementos de esta descarga son completamente personalizables, permitiéndote experimentar y prototipar a tu gusto. Es una excelente alternativa prémium a los kits de wireframe gratuitos.
10. WeDot - Kit de wireframe de UI
¿Buscando buenas plantillas de UI? WeDot es un popular kit de plantillas de wireframe con más de 170 diseños. Este kit de wireframe para Sketch es especialmente adecuado para paneles de administración, de datos, y para gráficos de estadística. Trabaja con esta opción prémium en lugar de usar un kit de wireframe vectorial gratuito.
11. Blokk - Kit de wireframe
Blokk es un magnífico kit de wireframe para páginas web estilo "one-page". Todos los bloques de contenido están basados en Bootstrap, así que es fácil pasarlos de Photoshop o esquemas de Sketch a una página web real y en vivo.
12. UX Workflow - Creador de wireframe y mapa de sitio
Un mapa de sitio es un esquema de todo el contenido de tu página web; desde la página de inicio, hasta el resto de tus páginas, tus artículos de blog, tu página de contacto, etcétera. Todo ello está relacionado entre sí de algún modo. Un mapa de sitio es una representación visual de esto. El creador del flujo de la experiencia de usuario para el mapa de sitio es una excelente herramienta, especialmente si necesitas presentar visualmente un proyecto de página web. Pruébalo si necesitas plantillas de UX para Illustrator.
13. Collector - Kit de wireframe para página web
El kit de wireframe para página web Collector está creado para AdobeXD, un software de diseño de UX gratuito de Adobe. Está basado en Bootstrap y organizado en categorías populares como cabeceras, portafolio, blog, contacto, y tablas de precios.
Nota: este kit se vende por casi $40 en otras páginas de diseño, ¡lo cual es un coste bastante más alto que el precio de la suscripción a Envato Elements (en el momento en el que escribimos esto)! Tiene una útil demostración en vivo en YouTube.
14. Turbo - Kit de wireframe para iOS
¿Estás diseñando una aplicación que tenga una página de suscripción, tutoriales de guía paso a paso, perfiles de usuario, y componentes sociales? ¿Y qué hay sobre secciones de noticias, ofertas, o vídeo? Prueba esta plantilla de wireframe para iPhone, la cual tiene un aspecto similar a Instagram.
15. 6 wireframes para e-commerce
La UI de las páginas web de e-commerce pueden ser complejas: hay opciones de talla y color para los artículos, botones de compra, logotipos, imágenes, artículos promocionales relacionados, y mucho más. ¡Lo último que quieres hacer es confundir a tus usuarios mientras realizan una compra!
16. Limpio kit de UI para bocetos esquemáticos
Las plantillas de UI como esta son geniales para ti. Un kit de UI libre de distracciones, así podrás planificar una página web sin desbordarte con excesivos detalles. Merece la pena que lo tengas en cuenta si estás buscando plantillas de UI e UX para Illustrator.
17. Kit de wireframe sobre papel
"Como un abocetado sobre papel", el kit de wireframe Paper es una herramienta de diseño sencilla y basada en una cuadrícula.
18. W1 - Kit de UI para aplicaciones de smartwhatch
Aquí tienes algo un poco distinto: un kit de UI diseñado únicamente para aplicaciones destinadas al Apple Watch. Diseñar para pantallas tan diminutas es difícil, ¡así que es importante que tu diseño sea preciso y fácil de seguir!
19. Kit de UI para panel de administración
¿Estás creando un panel de administración de informes y proyectos de datos? No utilices capturas de pantalla de Excel o Google Sheets. Diseña un panel de administración que sea realmente útil con este kit de UI, que pueda ser redimensionado para adaptarse a un amplio rango de tamaños de pantalla. Prueba plantillas UI prémium como esta.
20. Increíble kit de UI para página web
Un popular kit de UI para página web construida basándose en la cuadrícula de Bootstrap, con archivos de Photoshop listos para su uso. Es especialmente fácil de modificar para adaptarlo a los colores de tu marca, una útil característica si ya tienes definido en mente un esquema de color.
21. Gran kit de UI: Music
Botones de reproducción, carátulas para los álbumes, botones de pausa: este kit de UI está construido para aplicaciones de música, y tiene todos los componentes que puedas necesitar para diseñar una de ellas. Viene con archivos para Photoshop y Sketch. Este diseñador tiene algunas plantillas de UI especializadas en su portafolio, incluyendo algunas para revistas online, aplicaciones de viaje, e Instagram stories.
22. Creative Mind - Kit de UI
Menos minimalista que un wireframe tradicional, el kit de UI Creative Mind está diseñado para blogs y grandes titulares.
23. Kit para redes sociales
¿Estás planificando una campaña en redes sociales, o esbozando la apariencia de una nueva marca? Prueba un kit como este para redes sociales, que viene con gráficos, banners, plantillas para citas, y mucho más.
24. Bones - Kit de wireframe para iOS
Esta plantilla de wireframe para iPhone es perfecta para tu próxima aplicación iOS. La plantilla de wireframe viene con 120 pantallas totalmente editables pertenecientes a 10 categorías y en 3 formatos de archivo: Photoshop, Sketch y Adobe XD.
Este kit de wireframe para Sketch destaca por estar repleto de características que no encontrarás en muchos kits de wireframe gratuitos, como por ejemplo las siguientes:
- Listo para dispositivos retina
- Formas vectoriales
- Utiliza fuentes gratuitas
- Capas adecuadamente nombradas
- Estructura organizada
25. Containers - Kit de plantillas de wireframe para página web
La plantilla de wireframe para página web Containers te ayudará a lanzar tus ideas.
Elige el wireframe que necesites de entre una inmensa colección de más de 250 bloques, 15 categorías y más de 2,000 combinaciones. Incluye versión en colores claros y oscuros. Todos los bloques están basados en símbolos, son modulares, y están cuidadosamente organizados para facilitar su uso y su personalización.
Este kit de wireframe para Sketch tiene las siguientes características:
- Compatible con Sketch, con Figma y con Adobe XD
- 2 plantillas para página de aterrizaje
- 5 mockups en 3 estilos
- Más de 250 bloques pertenecientes a 15 categorías
26. Sicoin - Kit de UI para aplicación móvil de criptomonedas
Las criptomonedas han escalado a la cima en términos de popularidad y uso masivo. Si has estado deseando crear una aplicación que ayude a los brokers de este mercado, utiliza la plantilla de wireframe Sicon. Su diseño de nicho puede ayudarte a centrar tus ideas y a crear la mejor app posible para tus usuarios. Resultará difícil encontrar un kit gratuito de wireframe vectorial que pueda hacer lo mismo.
27. Quirk - Kit de wireframe para Illustrator
Redondeemos nuestra lista con esta excepcional plantilla de wireframe para página web. Con esta única descarga, podrás crear páginas de aterrizaje, páginas web móviles, blogs, y mucho más. Este kit de wireframe para Illustrator también incluye archivos para Figma, Sketch, Adobe XD, y otros conocidos programas.
Descubre más kits de UI, wireframes, y otros recursos
Espero que te haya gustado esta selección con los mejores kits de plantillas para wireframes y plantillas para UI. ¿Aún buscas más plantillas para añadirlas a tu colección? Consulta la completa biblioteca de Envato Elements el cual dispone de millares de kits de UI e UX. Además tenemos muchos más útiles recursos:
Los juegos de UX y UI más vendidos para Sketch, Photoshop, Illustrator, XD y Figma
Tu primer Wireframe con Adobe XD
Cómo Utilizar Símbolos de Dibujo para Crear Diagramas de Flujo
Kits de diseño UX y UI para acelerar tu proceso de diseño
25 kits de interfaz de usuario de Figma para diseñadores
21 y más de los mejores paquetes de interfaz de usuario (UI) para Adobe XD y Figma
20 UX e UI kits de Adobe XD para tu próximo proyecto
Creación de un sistema de diseño en Figma: tipografía, espaciado y tamaño
Nota editorial: Este artículo ha sido actualizado con contribuciones de Nathan Umoh. Nathan es un escritor de la plantilla de Envato Tuts+.
