<programa tu futuro>

devCamp » Hardware/Software » Wireframe: qué es y cómo crearlo 

Wireframe: qué es y cómo crearlo 

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ú?  

wireframe



    ¿Cuál es el futuro de la programación?

    ¿Cuál es el futuro de la programación?

    Saber cuál es el futuro de la programación es bastante complicado. Hay que andar con pies de plomo a la hora de predecir qué ocurrirá en los próximos años, ¡nadie sabe exactamente lo que nos depara! Pero sí que podemos acercarnos al asunto con algunas pistas, ideas y...

    ¿Qué es un CRM y para qué sirve?

    ¿Qué es un CRM y para qué sirve?

    Hoy vamos a explicar detenidamente qué es un CRM y para qué sirve. Indagaremos en este software (sí, sí, ¡lo puedes crear tú como programador!) y veremos, una por una, cuáles son las ventajas de aplicarlo de forma macro a una empresa.   Así que coge tu taza de café o...

    Cuál es el mejor ordenador para programar

    Cuál es el mejor ordenador para programar

    ¿Te has preguntado ultimadamente cuál es el mejor ordenador para programar? No es suficiente con ser el mejor programador, ¡también hay que contar con las mejores herramientas! Y, en el caso del desarrollo web, nuestras herramientas son un buen ordenador para...