Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing

20 plantillas de Wireframe y kits de interfaz de usuario imprescindibles para tu biblioteca de diseño

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

Wireframing. Viajes de usuario. Mapas de contenido. Diseño centrado en el usuario. Arquitectura informacional. Prototipos animados. Rutas de conversión. Características iterativas. Sitemaps. Uhh, ¿qué?

Seamos honestos, el mundo de UX (experiencia de usuario) y UI (interfaz de usuario) está lleno de jerga y términos demasiado complicados. Tomemos, por ejemplo, una frase que copié y pegué de una descripción de trabajo para un puesto como especialista senior en contenido en una universidad:

"Crear plantillas que producen un enfoque de estrategia de contenido consistente que incluye pautas para mapas del sitio, inventarios de contenido y auditorías, análisis de datos y ejercicios de experiencia del usuario".

Son muchas frases elegantes que podrían ser más simples. Pero si trabajas en diseño web o estrategia de contenido, probablemente estés demasiado familiarizado con estos términos. La ironía de esto es que el objetivo de UX (esa es la experiencia del usuario) es literalmente hacer que las cosas (también conocido como contenido) sean más fáciles de entender (también más navegables) para las personas (también conocidos como usuarios).

Wireframes y UI kits son dos términos de la industria que suenan complicados, pero en realidad son muy simples de entender.

Wireframe icons
Imagen: Wireframe icons

¿Qué es un Wireframe?

¿Alguna vez has tenido una nueva idea para un sitio web con un colega en el almuerzo o con un amigo en un bar? Te sientes inspirado, agarras una servilleta y un bolígrafo, y comienzas a esbozar cómo se vería el sitio: eso es enmarcado o wireframing. Esencialmente, el wireframing es un esquema o bosquejo de cómo se verá un sitio web (o aplicación). Es el plano, el mapa, el concepto básico.

Por supuesto, un boceto en una servilleta solo te llevará hasta cierto punto. Por lo tanto, los diseñadores han creado plantillas para wireframes que se transfieren fácilmente a presentaciones o software de diseño. (Recomiendo este artículo, Una guía para principiantes sobre Wireframing, si deseas un desglose más detallado de wireframes y con muchos recursos).

¿Qué es un kit de interfaz de usuario?

UI significa interfaz de usuario, en otras palabras: lo que estás haciendo para que las personas interactúen.

Un kit de interfaz de usuario contiene archivos y gráficos útiles que probablemente necesitarás, como casillas de verificación, íconos y más. Esencialmente, es un kit que existe para que no tengas que crear todos los componentes de tu sitio web o aplicación desde cero, y la estandarización significa que estará bien diseñado y será fácil de usar para tu audiencia.

No existe una única forma "correcta" de diseñar un botón, pero ciertamente hay formas que son mejores que otras, y mucha investigación de diseño. Al usar kits de interfaz de usuario, confías en los expertos y te aseguras de que los detalles de tu sitio sean pulidos y profesionales.

Las mejores plantillas de Wireframe y kits de interfaz de usuario

Las plantillas de wireframes y los kits de interfaz de usuario son dos cosas diferentes, pero el contenido de estas plantillas a menudo se superponen. Por lo tanto, los hemos reunido en esta lista de los mejores y más útiles kits de interfaz de usuario y UI para agregar a tu colección:

1. molo Mobile Wireframe Kit

molo Mobile Wireframe Kit
molo Mobile Wireframe Kit

El kit de molo wireframe está hecho para aplicaciones y desarrollo móvil. Hay nueve categorías, que incluyen inicio de sesión, tutoriales, redes sociales, blogs y navegación. Todo está hecho con Google Fonts, lo que significa que nunca tendrás que lidiar con tipos de letra rotos o problemas de diseño inesperados.

2. Codama iOS Wireframe UI Kit

Codama iOS Wireframe UI Kit
Codama iOS Wireframe UI Kit
Codama iOS Wireframe UI Kit
Codama iOS Wireframe UI Kit

Codama es un wireframe de iOS creada con Sketch, un software de diseño superior. Está bien organizado y los archivos se nombran de manera que tenga sentido usar en Sketch. La opción de fuente es Montserrat, que es un clásico para el diseño de Apple.

3. Greyhound UX Flowcharts

Greyhound UX Flowcharts
Greyhound UX Flowcharts

Greyhound es un kit único que viene con más de 100 mini tarjetas de diagrama de flujo, además de bloques de acción, flechas y más.

4. WeDot - Wireframe UI Kit

WeDot - Wireframe UI Kit
WeDot - Wireframe UI Kit

WeDot es un popular kit de wireframe con más de 170 diseños. Es especialmente bueno para paneles, datos y gráficos.

5. Blokk Wireframe Kit

Blokk Wireframe Kit
Blokk Wireframe Kit

Blokk es un impresionante kit de wireframe para sitios web de una página. Todos los bloques de contenido se basan en Bootstrap, por lo que es fácil pasar de un esquema de Photoshop o Sketch a un sitio web real y en vivo.

6. UX Workflow - Wireframe and Sitemap Creator

UX Workflow - Wireframe and Sitemap Creator
UX Workflow - Wireframe and Sitemap Creator

Un mapa del sitio es un resumen de todo el contenido de tu sitio web; desde la página de inicio, hasta tus páginas, publicaciones de blog, página de contacto, etc. Todo se vincula de alguna manera. Un mapa del sitio es una representación visual de eso. El creador de mapa de sitio UX Workflow es una gran herramienta, especialmente si necesitas presentar una idea de sitio web de forma visual.

7. Collector Wireframe Web Kit

Collector Wireframe Web Kit
Collector Wireframe Web Kit

El kit web Collector Wireframe está hecho para AdobeXD, un software de diseño UX gratuito de Adobe. Está basado en bootstrap y está organizado por categorías populares como encabezados, portafolio, blog, contacto y tablas de precios.

Nota: ¡Se vende por casi $40 dólares en otros sitios web de diseño, lo que es más que el costo de una suscripción a Envato Elements (al momento de escribir)! Tienes una demostración de video útil en YouTube.

8. Wirey Wireframe Kit

Wirey Wireframe Kit
Wirey Wireframe Kit

Además de tener un nombre divertido, Wirey es un kit de wireframe para sitios web y proyectos digitales. Las categorías incluyen navegación, encabezados, características, blog y pies de página.

9. Turbo iOS Wireframe Kit

Turbo iOS Wireframe Kit
Turbo iOS Wireframe Kit

¿Diseñas una aplicación que tendrá una página de registro, tutoriales, un perfil de usuario y componentes sociales? ¿Qué pasa con las noticias, ventas o videos? Prueba este kit Turbo Wireframe de iOS, que tiene un aspecto similar al de Instagram.

10. 6 Ecommerce Wireframes

6 Ecommerce Wireframes
6 Ecommerce Wireframes

La interfaz de usuario de los sitios de comercio electrónico puede ser complicada: hay opciones de tamaño y color de artículos, botones de compra, logotipos, imágenes, artículos de promoción cruzada y más. ¡Lo último que deseas hacer es confundir a tu usuario para que no realice una compra!

11. Google Fonts Combinations

Google Fonts Combinations
Google Fonts Combinations

De acuerdo, técnicamente esto podría no ser un "kit de interfaz de usuario", pero cuando estoy diseñando un nuevo sitio web, lo primero con lo que me quedo atascado es con las opciones de tipografía. Es un elemento de diseño tan importante, pero hay muchas opciones. Es fácil pensar demasiado, y de repente has pasado una hora debatiendo los pros y los contras de Open Sans vs. Lato... ¡no seas como yo! Simplemente descarga este kit de combinaciones de fuentes de Google, elige un combo de fuentes elegido por el diseñador y continúa con tu proyecto.

12. Basement Wireframe Kit

Basement Wireframe Kit
Basement Wireframe Kit

Un kit para sitios web simples, especialmente para empresas y sitios web de ventas en línea. Viene con las versiones de Photoshop y Sketch.

13. Clean UI Kit for Rough Sketching

Clean UI Kit for Rough Sketching
Clean UI Kit for Rough Sketching

Un kit de interfaz de usuario sin distracciones, para que puedas hacer un plan de sitio web sin atascarse demasiado en los detalles.

14. Paper Wireframe Kit

Paper Wireframe Kit
Paper Wireframe Kit

"Como un boceto en papel", Paper Wireframe Kit es una herramienta de diseño simple basada en la cuadrícula.

15. W1 UI Kit for watch Apps

W1 UI Kit for watch Apps
W1 UI Kit for watch Apps

Aquí hay uno que es un poco diferente: un kit de interfaz de usuario diseñado solo para aplicaciones de Apple Watch. Diseñar para una pantalla tan pequeña es difícil, por lo que es importante que tu diseño sea preciso y fácil de seguir.

16. Dashboard UI Kit

Dashboard UI Kit
Dashboard UI Kit

¿Necesitas crear un tablero para informes y datos de proyectos? No uses capturas de pantalla de Excel o tus Hojas de cálculo de Google. Diseña un tablero que sea realmente útil con este kit de interfaz de usuario, que puede redimensionarse a una amplia gama de tamaños de pantalla.

17. Awesome Web UI Kit

Awesome Web UI Kit
Awesome Web UI Kit

Un kit popular de interfaz de usuario creado en la cuadrícula de Bootstrap, con archivos listos para Photoshop. Es especialmente fácil de cambiar para adaptarse a los colores de tu marca, lo cual es una característica útil si ya tienes un esquema de color en mente.

18. Heavy UI Kit: Music

Heavy UI Kit Music
Heavy UI Kit: Music

Botones de reproducción, carátula del álbum, pausa: este kit de interfaz de usuario está diseñado para aplicaciones de música y tiene todos los componentes que necesitarías para diseñar una. Viene con archivos de Photoshop y Sketch. Este diseñador tiene algunos kits de interfaz de usuario especializados en su portafolio, incluidos los de revistas en línea, aplicaciones de viaje e historias de Instagram.

19. Creative Mind UI Kit

Creative Mind UI Kit
Creative Mind UI Kit

El kit Creative Mind UI, menos minimalista que un wireframe tradicional, está diseñado para blogs y grandes titulares.

20. Social Media Kit

Social Media Kit
Social Media Kit

¿Estás planeando una campaña en las redes sociales o diseñando la apariencia de una nueva marca? Prueba un kit como este Social Media Kit, que viene con gráficos, pancartas, plantillas de cotizaciones y más.

Más kits de interfaz de usuario, Wireframes y gráficos útiles

¿Buscas más para agregar a tu colección? Echa un vistazo a la biblioteca completa de Envato Elements de casi 2,000 kits de UX y UI, incluidas plantillas para páginas de aterrizaje, aplicaciones para trivias y planes de suscripción.

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