imagen porcentaje

Hasta 10% DTO / Formación PRESENCIAL

imagen promoción

Hasta 15% DTO / Formación ONLINE

imagen promoción

Hasta 10% DTO / Formación PRESENCIAL

8 recursos gratuitos para wireframes (UI Kits)

8-recursos-gratuitos-wireframes-ui-kits

Todo diseñador se ha enfrentado alguna vez al desafío que supone la “página en blanco”. ¿Cómo estructurar el diseño de una web o app de forma productiva? Por ejemplo, con las colecciones de iconos para wireframes.

¿Qué es un wireframe? ¿Cuál es su utilidad?

Un wireframe es, en pocas palabras, una representación esquemática de la estructura y elementos de una web o app. Lo que tradicionalmente hemos conocido como un boceto, una aproximación esquemática del diseño. Un primer acercamiento a la interfaz del proyecto sobre la que se pueden realizar cambios a nivel conceptual.

Si hace años, plantear un nuevo diseño era una tarea casi artesanal y algo laborioso, hoy en día se ha automatizado el proceso en gran medida. Gracias a los numerosos recursos gráficos prediseñados para wireframes que podemos encontrar en Internet (muchos de ellos gratuitos, como es el caso de todos los incluidos en esta entrada del blog). Unas colecciones de wireframes que están compuestas por una serie de iconos y elementos gráficos que representan las zonas y elementos habituales de una web o app: un buscador, un bloque de texto, imágenes, botones, barras de desplazamiento, portfolio, formularios de contacto, etc.

Cierto es que se pueden realizar perfectamente dibujándolos “manualmente”, bien sobre el papel o en aplicaciones de diseño gráfico como Photoshop o Illustrator. Pero a la larga resultará mucho más práctico (y ahorrando un valioso tiempo de conceptualización del proyecto) hacerlo con estas colecciones de gráficos (con los que será mucho más fácil y directo añadir cualquier elemento estándar de una interfaz, sea una web o una app).

¿En qué consiste un Flowchart?

Si un wireframe es una aproximación de la estructura y disposición de los diferentes elementos gráficos, un flowchart hace referencia a la relación existente entre una página u otra. Si le damos a X botón, ¿a qué pantalla va? En otras palabras, sería un mapa esquemático de cada página de la web o app, con los diferentes caminos interactivos posibles. La evolución lógica del wireframe general, pero con las conexiones entre páginas / botones.

¿Cómo puedo utilizar un wireframe prediseñado en mi proyecto?

Dispondremos de varias opciones para hacerlo: desde utilizar un editor de wireframes como Mockflow, a importar y componer los diferentes recursos gráficos directamente en programas de diseño como Photoshop. La ventaja de la primera opción, es que muchos de esos editores cuentan con una versión en la nube, por lo que se puede acceder a ellos con un simple navegador web desde cualquier ordenador, evitando la necesidad de instalar un determinado software. Su desventaja es que en buena parte de los casos, son soluciones de pago. Aunque en el caso de Mockflow, por ejemplo, dispone también de una versión gratuita con ciertas limitaciones en cuanto al número de usuarios, proyectos, etc.

Wireframes y Flowcharts gratuitos

Antes de comenzar el listado de wireframes y flowcharts, mencionar que esta es solo una pequeña selección de las numerosas y variadas colecciones de iconos y elementos gráficos de una interfaz disponibles en Internet. Muchas de ellas en formato PSD (Photoshop) editables, pero también en otros formatos como Illustrator, EPS o PNG. Colecciones que podrás encontrar con una simple búsqueda en Google, o en comunidades para diseñadores como Dribbble.

Bootflat UI Kit (PSD)

Disponible en su versión 2.0.4, Bootflat UI Kit es un completo pack de elementos gráficos para web y apps, tales como botones, barras de desplazamientos, bloques de textos, bloques de imágenes, buscadores, etc.

Sally Blocks (PSD)

Elementos para páginas destacadas, equipo, de contacto o portfolio son algunas de las páginas y elementos tipo que incluye Sally Blocks.

Wireframe Landing Page (PSD)

Esta colección de elementos gráficos para wireframe concentra en un único fichero PSD por capas, buena parte de los elementos más comunes en el diseño de una landing page (para SEM o e-mail marketing).

UX Wireframe Set (AI)

Michal Koczor comparte en Dribbble una colección dedicada a interfaces para iPhone y disponible en formato .AI (Illustrator), por lo que todos sus elementos se encuentran en vectorial para adaptarlos a cualquier resolución.

Cards for Flowcharts (PSD)

Volodymyr Kurbatov ofrece gratuitamente desde Gumroad una colección de iconos y elementos gráficos de 38 tarjetas con las diferentes posibilidades que se suelen necesitar al diseñar el flowchart de una web o app.

Wireframer Icon Pack (SVG)

Eugene Dobrik es el autor de esta colección de iconos para wireframes en formato vectorial SVG.

Mockup Web Design Sketch (PSD)

Desde UIUX Lab publican en Dribbble un mockup del navegador web para realizar demos de proyectos web.

Wireframe Asset (EPS)

Ashley Porciuncula por su parte, sube a Dribbble un EPS con la misma plantilla de elementos que utiliza para sus propios proyectos y que incluye algunos de los elementos más comunes en el diseño preliminar de un caso de estudio.

¿No te convencen los packs de iconos para Photoshop e Illustrator?

Muchos usuarios prefieren trabajar directamente en Photoshop sus diseños, pero muchos otros prefieren hacerlo en una de las numerosas herramientas existentes para diseñar mockups, wireframes y flowcharts. Herramientas como Mockflow (en la nube), SketchApp (exclusiva para Mac), Wireframe.cc (en la nube), Mockplus o Adobe XD.

¿Que no sabes qué solución o herramienta de mockup elegir para diseñar los wireframes de tus proyectos web o apps? Descuida, próximamente prepararemos un listado de las principales herramientas de mockup (gratuitas y de pago), en el que destacaremos las principales características de cada solución, sea online, para Mac o Windows.

Aprende a diseñar tus propios wireframes y flowcharts en CICE

Diseñar sobre el papel un proyecto multimedia es una cosa, y llevarlo a la práctica otra bien distinta. Porque un diseño final se compone, en diferentes proporciones, de talento, creatividad y conocimientos técnicos. Unos conocimientos técnicos que vienen dados tanto por el software utilizado, como por las técnicas y prácticas recomendadas que los alumnos de CICE aprenden en el Máster en Diseño y Desarrollo Web Adaptativo con Tecnologías W3C, el Curso de Diseño y Desarrollo Web Adaptativo en HTML 5 y CSS3 o en el Curso de Programación en PHP y MySQL de CICE. Tú eliges cuál de ellos se adapta mejor a tus necesidades.

20/10/2016 | , , | Artículos BigData, BI y Marketing Online

Miguel Gómez

Miguel Gómez

Escribe tu
Comentario

Si quieres personalizar tu avatar, click aquí.
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Recuerda que los comentarios deben ser revisados por un administrador.

O si lo prefieres, déjanos tus datos y nosotros te llamamos.

*Selecciona una titulación

Te llamamos sin compromiso

Puedes llamarnos al 91 401 07 02 (Centro Maldonado) o al 91 435 58 43 (Centro Povedilla).

Si lo prefieres, déjanos tus datos y nosotros te llamamos.

Solo hasta el 25 de marzo

¡MATRÍCULA

GRATIS!

Solo quedan


*Consulta condiciones aquí
8 recursos gratuitos para wireframes (UI Kits)
Buzón de Sugerencias
SOLICITAR UNA CLASE DE PRUEBA GRATUITA
8 recursos gratuitos para wireframes (UI Kits)

Horario atención al cliente

  • Lunes a viernes

    • De 9 a 14 horas
    • De 16 a 21 horas
  • Sábados

    • De 9 a 14 horas

Teléfono de contacto: 91 435 58 43

Solicita información sobre
Envíanos tu opinión sobre CICE
Nosotros te asesoramos

¿No te decides?

Nosotros te ayudamos. Utiliza nuestro buscador avanzado para encontrar el curso que quieres.