Si alguna vez te has preguntado por un wireframe, qué es y cómo crearlo, DevCamp es tu sitio. Aquí te explicaremos de forma sencilla cómo influye en tu vida de programador y cómo puedes probar suerte en tus ratos libres y crear alguno.
No nos cansamos de repetirlo: el trabajo del desarrollador web no es exclusivamente individual. Esto quiere decir que tendrás que trabajar con una enorme lista de profesionales relacionados con el UX, el UI, el SEO y otras disciplinas para entregar un producto digital a tus clientes.
En este contexto, por supuesto que te interesa saber qué es un wireframe. Así que, ¿comenzamos?
Qué es un wireframe
Un wireframe es una representación visual que muestra el esqueleto de una página web. Es un boceto que enseña de forma sencilla la estructura y la funcionalidad de un producto digital, sea web o una aplicación móvil, y siempre es necesario en las primeras fases de un proyecto.
El responsable de hacer estos bocetos o ‘pantallas’ es el experto en UX. ¿Su objetivo? Definir estratégicamente el contenido y la posición que tendrán los distintos elementos de una página web: botones, bloques, menús de navegación, etc.
Piénsalo. Es una labor más que importante, en tanto en cuanto sienta las bases de la navegación del usuario por una web o app. Todo el recorrido que haga un consumidor digital en tu producto digital responde a las intenciones que, un día, pensó un UX a través de wireframes.
Funciones de un wireframe
Los wireframes tienen cientos de propósitos y razones para ser generados. Idear la estructura y el contenido de las ‘pantallas’ de tu producto digital siempre te será beneficioso por las siguientes razones, que vamos a explicar aquí:
- Sencillos de crear: ten en cuenta que son representaciones sencillas y, por esta razón, puedes crear varias versiones de forma rápida. Esto se traduce en productividad, puesto que los cambios son muy fáciles de aplicar.
- Garantizan un fin: es muy probable que lleguemos al resultado deseado si seguimos un plan, una estructura, una guía. Así funcionan los wireframes, como pequeñas guías que nos dicen cómo se tienen que implementar las funcionalidades, sin rodeos.
- Facilitan la usabilidad: ya lo hemos dicho; la persona encargada de realizar las pantallas es el responsable de UX. Este se centra, sobre todo, en la facilidad de uso de la aplicación o web y en que el usuario tenga una navegación sencilla por tu producto final.
- Capacidad de segmentación: hacer un wireframe añade una etapa más a la fase de producción. El cliente puede ver de forma general en qué se convertirá su producto o servicio y qué líneas seguirá.
En la siguiente fase del proyecto entraría un perfil UI. Él o ella sería el encargad@ de ‘pintar’, como se dice en la jerga del sector, todas las pantallas planteadas por el UX. Esta fase plantearía el aspecto visual en detalle del producto.
Cómo crear un wireframe
Si has estado leyendo nuestro post, seguro que te ha surgido la duda de cómo crear un wireframe. Hay muchas vías; unas implican la forma analógica o tradicional (papel y boli) y otras abrazan tecnologías específicas. Veámoslas.
Crearlo a mano
Esta es la vía tradicional. Es lo más sencillo y, quizá, lo más barato. Solo tendrás que plasmar en un papel cúal es el boceto de tu página, todo el contenido que querrás meter en ella y los distintos buckets o elementos a introducir: botones, etc.
Utilizar plantillas imprimibles
Otra forma tradicional, aunque con un ligero coste. Aquí tendrás que pagar la impresión de tus hojas y gastar en tinta y papeles extra. Usa la que a ti te resulte más sencilla, con líneas o sin ellas, en blanco o con alguna ayuda.
Progama o aplicación
En agencias de marketing, comunicación y publicidad, los perfiles UX suelen utilizar programas específicos para llevar a cabo sus tareas de wireframes (Photoshop, Mockflow, Balsamiq, etc.). Esto es así porque es el formato ideal para que el cliente nos lo devuelva con su feedback.
–
¿Qué te ha parecido el post? En DevCamp nos esforzamos en hacerte ver que tu trabajo tiene mil repercusiones, y que tendrás que cooperar con otros perfiles para entregar un producto a tus clientes.
Si te interesa el mundo del desarrollo web, siempre puedes informarte de nuestros cursos y ver si alguno te encaja. Nuestros cursos son dos: para principiantes (#DigitalLiteracy), y para más avanzados (#FullStack).
¿Cuál elegirías tú?
