Advertisement
  1. Web Design
  2. Wireframing

Más de 25 wireframes y kits de UI necesarios en tu biblioteca de diseño

by
Read Time:11 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (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.

Iconos de wireframeIconos de wireframeIconos de wireframe
Imagen: Iconos de wireframe

¿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.

Consigue descargas ilimitadas de plantillas de wireframe profesionalesConsigue descargas ilimitadas de plantillas de wireframe profesionalesConsigue descargas ilimitadas de plantillas de wireframe profesionales
Consigue descargas ilimitadas de plantillas de wireframe profesionales en Envato Elements

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, kit de wireframe para SketchConcrete, kit de wireframe para SketchConcrete, kit de wireframe para Sketch
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

Makeapp, plantillas de interfaz de usuarioMakeapp, plantillas de interfaz de usuarioMakeapp, plantillas de interfaz de usuario
Makeapp, kit de wireframe para aplicación móvil

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

Conjunto de plantillas de wireframe de UX para IllustratorConjunto de plantillas de wireframe de UX para IllustratorConjunto de plantillas de wireframe de UX para Illustrator
Kit de wireframe para UX

¿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 - Plantillas de UITulist - Plantillas de UITulist - Plantillas de UI
Tulist - Aplicación 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

Plantilla de wireframe para página webPlantilla de wireframe para página webPlantilla de wireframe para página web
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

Kit de plantillas de wireframe para iPhoneKit de plantillas de wireframe para iPhoneKit de plantillas de wireframe para iPhone
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

Kit de plantillas de wireframe esquemáticasKit de plantillas de wireframe esquemáticasKit de plantillas de wireframe esquemáticas
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, kit de wireframe de UI para iOSCodama, kit de wireframe de UI para iOSCodama, kit de wireframe de UI para iOS
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, gráficos de flujo para UXGreyhound, gráficos de flujo para UXGreyhound, gráficos de flujo para UX
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

WeDot - Kit de wireframe de UIWeDot - Kit de wireframe de UIWeDot - Kit de wireframe de UI
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, kit de wireframeBlokk, kit de wireframeBlokk, kit de wireframe
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

UX Workflow, creador de wireframe y mapa de sitioUX Workflow, creador de wireframe y mapa de sitioUX Workflow, creador de wireframe y mapa de sitio
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

Collector, kit de wireframe para página webCollector, kit de wireframe para página webCollector, kit de wireframe para página web
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

Turbo, kit de wireframe para iOSTurbo, kit de wireframe para iOSTurbo, kit de wireframe para iOS
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

6 wireframes para e-commerce6 wireframes para e-commerce6 wireframes para e-commerce
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

Limpio kit de UI para bocetos esquemáticosLimpio kit de UI para bocetos esquemáticosLimpio kit de UI para bocetos esquemáticos
Limpio kit de UI Kit 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

Kit de wireframe sobre papelKit de wireframe sobre papelKit de wireframe sobre papel
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

W1, kit de UI para aplicaciones de smartwhatchW1, kit de UI para aplicaciones de smartwhatchW1, kit de UI para aplicaciones de smartwhatch
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

Kit de UI para panel de administraciónKit de UI para panel de administraciónKit de UI para panel de administración
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

Increíble kit de UI para página webIncreíble kit de UI para página webIncreíble kit de UI para página web
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

Gran kit de UI para músicaGran kit de UI para músicaGran kit de UI para música
Gran kit de UI para música

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

Creative Mind, kit de UICreative Mind, kit de UICreative Mind, kit de UI
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

Kit para redes socialesKit para redes socialesKit para redes sociales
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

Bones, kit de wireframe para iOSBones, kit de wireframe para iOSBones, kit de wireframe para iOS
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

Containers, kit de plantillas de wireframe para página webContainers, kit de plantillas de wireframe para página webContainers, kit de plantillas de wireframe para página web
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

Sicoin, plantilla de wireframe de criptomonedas para FigmaSicoin, plantilla de wireframe de criptomonedas para FigmaSicoin, plantilla de wireframe de criptomonedas para Figma
Sicoin - Kit de UI para app 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

Quirk, Plantillas de UX para IllustratorQuirk, Plantillas de UX para IllustratorQuirk, Plantillas de UX para Illustrator
Quirk - Kit plantillas de UX 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: 

Nota editorial: Este artículo ha sido actualizado con contribuciones de Nathan Umoh. Nathan es un escritor de la plantilla de Envato Tuts+.

Advertisement
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.