<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



    Qué es la ciberseguridad 

    Qué es la ciberseguridad 

    En el entorno Dev, no todo el mundo sabe qué es la ciberseguridad. ¿Sabes su definición? Para contestar a la pregunta, diremos que la ciberseguridad es una práctica o método que consiste en proteger computadoras, ordenadores, servidores y dispositivos móviles de...

    ¿Qué es UX?

    ¿Qué es UX?

    Si alguna vez te has preguntado qué es ux, estás en el lugar correcto. Ten en cuenta que es una herramienta importantísima para tu trabajo dentro del entorno digital, y que conocerla (junto al ui) mejorará tu trabajo como programador.   ¿Cómo es esto posible? Los...

    UX vs UI

    UX vs UI

    El mundo de la programación moderna cuenta con una amplia serie de nuevos conceptos que se enfocan, especialmente, en la calidad de navegación que tu página web puede aportar a los usuarios. Es el caso de la UX (experiencia de usuario) o de la UI (interfaz de...