Advertisement
  1. Web Design
  2. Wireframing

Guía para principiantes sobre cómo hacer un wireframe

by
Read Time:13 minsLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

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

Saber qué es un wireframe y cómo hacer un wireframe son pasos importantes en cualquier proceso de diseño de pantallas. Principalmente, un wireframe te permite definir la jerarquía de la información presente en tu diseño, haciendo que te resulte más fácil planificar la maquetación conforme a cómo desees que tus usuarios procesen la información. Si todavía no has usado wireframes, es hora de que te mojes los pies. 

Kits UI para wireframe disponibles en Envato

Antes de que empecemos, si estás feliz con los principios del wireframing podrías querer hacerte con alguno de los kits de UI para hacer wireframes de Envato Elements que te ahorrarán el trabajo más pesado. Puedes descargar kits ilimitados (sin importar cuál sea tu herramienta de diseño favorita) y otros artículos a cambio de una económica suscripción mensual.

Escoge entre más de 100 kits de wireframing disponibles en Envato ElementsEscoge entre más de 100 kits de wireframing disponibles en Envato ElementsEscoge entre más de 100 kits de wireframing disponibles en Envato Elements
Escoge entre más de 100 kits de wireframing para UI disponibles en Envato Elements

Wireframing para principiantes

Aquí tienes una versión en vídeo de esta guía para principiantes. Y no olvides suscribirte a nuestro canal de YouTube de Envato Tuts+ para descubrir más tutoriales, cursos gratuitos, ¡y mucho más!

¿Qué es un wireframe?

Un sencillo wireframeUn sencillo wireframeUn sencillo wireframe

Piensa en un wireframe de sitio web como un plano de planta de arquitectura; necesitas verlo en dos dimensiones a través de diagramas en blanco y negro antes de que entiendas cómo construir la casa actual. Lo mismo sucede en un diseño de pantallas, no puedes empezar a construir componentes con Figma o con Sketch, o escribir bloques de código, sin saber dónde va a ir la información.

A un nivel más profundo, un wireframe es también muy útil para determinar cómo el usuario interactúa con la interfaz. Por ejemplo, los wireframes pueden contener distintos estados de botón o comportamiento de menú.

Un sencillo ejemplo de un wireframe mostrando un estado de menú "hover" que reduce la posibilidad de confundir la comunicaciónUn sencillo ejemplo de un wireframe mostrando un estado de menú "hover" que reduce la posibilidad de confundir la comunicaciónUn sencillo ejemplo de un wireframe mostrando un estado de menú "hover" que reduce la posibilidad de confundir la comunicación

Hacer un wireframe es un paso importante porque le permite al diseñador planificar la maquetación y la interacción de una interfaz sin distraerse con los colores, las elecciones tipográficas e incluso la copia de texto. A mí me gusta explicar a mis clientes que si un usuario no se puede imaginar a dónde debe dirigirse visualizando un wireframe en blanco y negro, tampoco importa qué colores se vayan a usar eventualmente. Un botón tiene que ser obvio incluso aunque no tenga un color brillante o llamativo.

Al igual que los cimientos de un edificio, tiene que ser fundamentalmente sólido antes de que lo vistas con un caro abrigo de pintura. 


Paso 1: Obtener inspiración

Antes de entrar en más detalles, dado que una imagen vale más que mil palabras, echa un vistazo a I ♥ wirefames. Serás capaz de obtener una visión y comprensión general sobre cómo están manejando otros diseñadores sus procesos de wireframing. 

I Heart WireframesI Heart WireframesI Heart Wireframes

Quizá podrías hacerte también con este increíble marcador de navegador, Wirify que te capacita para visualizar una versión en "wireframe-d" de cualquier sitio público.

cnncom with wirifycnncom with wirifycnncom with wirify

Si observas continuamente lo que otros diseñadores o sitios web están haciendo para sus wireframes, poco a poco te harás una idea sobre qué es un wireframe y cómo ayuda un wireframe a organizar la información.  


Paso 2: Diseñar tu proceso

El diseño es un proceso orgánico y por tanto los distintos diseñadores enfocan el wireframing y su traducción a elementos visuales y a código de diversas maneras. Tendrás que encontrar el proceso que saque a relucir tus mejores fortalezas y con el que te sientas más cómodo. Abajo tienes un diagrama que muestra diferentes procesos típicos:

Distintos procesos de como hacer un wireframeDistintos procesos de como hacer un wireframeDistintos procesos de como hacer un wireframe

Basecamp es bien conocido por promover el uso de bocetos y pasar directamente al código, aunque parece que algunos de sus diseños involucran también el empleo de mockups visuales en sus procesos.

En mi caso, he pasado por muchos procesos de ciclos de diseño a código y de alguna manera he agilizado el proceso. Este es un paso sobre el que alguna gente podría no reflexionar, pero también considero cualquier framework HTML o CSS que pueda usar en el proyecto.

Por ejemplo, yo suelo construir un montón de sitios en Blueprint, y por tanto estableceré tanto mis wireframes como Blueprint a una misma retícula de 12 columnas. Esto acelera el tiempo de prototipado y desarrollo considerablemente, y en lugar de tener que escribir la anchura de cada elemento en mi hoja de estilos CSS, ahora están predefinidos mediante la anchura de una columna a doce de ellas. Ahora uso cssgrid en lugar de su soporte al diseño responsive, pero todavía lo ajusto a una retícula de 12 columnas que puedes descargar como plantilla de Photoshop.

La plantilla de 12 columnas de cssgridLa plantilla de 12 columnas de cssgridLa plantilla de 12 columnas de cssgrid

Tal y como he mencionado, tú eres quien debe decidir con qué proceso te sientes cómodo, en ocasiones podrías hacer varias pruebas antes de darte cuenta cuál es el proceso más eficaz. Algunas personas podrían ser muy buenas creando bocetos y en ese caso podrían preferir no usar ninguna herramienta de wireframing en absoluto. Otros diseñadores podrían querer disponer de tantos pasos o fases como sea posible para minimizar las desviaciones o para poder reflexionar a través de cada una de las iteraciones conforme el diseño empieza a tomar forma.

Con el tiempo desarrollarás tu propio proceso preferido, pero en este tutorial yo usaré mi típico proceso como ejemplo:

Tengo tres razones principales por las que normalmente uso Illustrator como mi herramienta para crear wireframes:

  1. Estilos: puedes guardar estilos tipográficos y de objetos y reutilizarlos más adelante, como haces con el CSS.
  2. Es fácil modificar, mover, o escalar múltiples objetos. 
  3. Proporciona una fácil transición posterior a otro software.

Sin embargo, yo uso otras herramientas y esto también depende del escenario del proyecto. Mencionaré brevemente algunas populares herramientas, sus fortalezas, y sus debilidades en la próxima sección.


Paso 3: Selecciona tus herramientas

Aquí tienes algunas herramientas populares listadas sin ningún orden particular: 

Balsamiq

Balsamiq se hizo popular debido a que los wireframes creados con Balsamiq se asemejaban a bocetos, haciendo que sea inmediatamente obvio que el wireframe no es un producto final, sino un trabajo en progreso. Balsamiq también tiene una inmensa biblioteca de componentes reusables que puedes arrastrar y soltar muy fácilmente para diseñar tus wireframes. 

Ejemplo de wireframe creado con Balsamiq y extraído de su sitio web oficialEjemplo de wireframe creado con Balsamiq y extraído de su sitio web oficialEjemplo de wireframe creado con Balsamiq y extraído de su sitio web oficial

También puedes usarlo en casi cualquier plataforma, con versiones de escritorio disponibles para Mac, Windows y Linux, además existe una versión web por si prefieres trabajar en la nube. Aplicaciones de terceros como iMockups para iOS también admiten los formatos de exportación de Balsamiq. 

Omnigraffle

Un viejo favorito de Mac, Omnigraffle también tiene una amplia biblioteca con componentes reusables, soportada y en la que contribuyen los usuarios; Graffletopia.

Te gustará Omnigraffle si disfrutas usando atractivas plantillas como estaTe gustará Omnigraffle si disfrutas usando atractivas plantillas como estaTe gustará Omnigraffle si disfrutas usando atractivas plantillas como esta

Como fue desarrollado concretamente como aplicación para crear diagramas, Omnigraffle también tiene complejas características como maquetación automática, admite estilos de objeto personalizados, guías inteligentes y herramientas para crear gráficos. Algunas de estas características también están disponibles en el paquete de Adobe CS, pero si no lo tienes, Omnigraffle es un buen valor (~$100) para hacer wireframes detallados.

Axure

Es casi como el padrino de las herramientas del wireframing, Axure fue una de las primeras herramientas de wireframing y prototipado de nivel profesional. Hasta hace poco, solo estaba disponible para Windows. Personalmente no tengo mucha experiencia con ella, pero es sabido que es una de las herramientas más ampliamente usadas entre los profesionales del sector.

Mockplus

Mockplus es una plataforma de diseño de producto todo en uno para la era moderna. Ofrece herramientas para el prototipado (RP), colaborativas (iDoc), y sistemas de diseño (DS). Empieza a usarla de forma gratuita, después pasa al plan que mejor se adapte a tus necesidades (individual, para equipos, o corporativo).

Figma

Figma ha revolucionado el ámbito de las herramientas de diseño durante los últimos años. Construido pensando en los diseñadores web y de interfaces de usuario, es muy adecuado para hacer wireframes, y al estar basada en el navegador, es ideal para trabajar de forma colaborativa.

Cómo hacer wireframes con FigmaCómo hacer wireframes con FigmaCómo hacer wireframes con Figma
Imagen extraída de Cómo hacer un wireframe de Toni Gemayel

Figma es muy intuitivo y fácil de usar en lo que a la creación de wireframes se refiere, pero si necesitas una mano, tiene hasta una plantilla de wireframe para empezar más rápidamente.

Tenemos un montón de tutoriales y cursos para aprender a usar Figma en Tuts+ así que siéntete libre de zambullirte y empieza a aprender:

GoMockingBird

GoMockingBird es una herramienta para hacer wireframes, y al igual que Figma está preparado para trabajar colaborativamente, simplemente diseña, arrastra y suelta componentes, y comparte el enlace con tus colegas o clientes para trabajar conjuntamente con tu equipo en el mismo wireframe.

InVision Freehand

InVision es una herramienta colaborativa de diseño superconfiable, habiendo resultado ser una favorita del sector durante años. InVision Freehand es un producto independiente construido por el mismo equipo que ofrece una interpretación digital de una especie de pizarra en blanco sobre la que puedes trabajar en colaboración. Hemos hablado sobre los méritos del uso de un lápiz y un papel para crear ejemplo de wireframes; esto es realmente muy similar: ¡aboceta, garabatea, anota, edita, borra, crea esquemas, e itera!

Herramienta para wireframing InVision FreehandHerramienta para wireframing InVision FreehandHerramienta para wireframing InVision Freehand

Flairbuilder

Flairbuilder ofrece un gran soporte para las interacciones.

Iteraciones mostrar, ocultar e si pasa esto haz esto de FlairbuilderIteraciones mostrar, ocultar e si pasa esto haz esto de FlairbuilderIteraciones mostrar, ocultar e si pasa esto haz esto de Flairbuilder

También tiene una gran biblioteca de componentes, admite páginas maestras y te permite exportar el prototipo para que sea visualizado online.

Otras aplicaciones online

Si el software de escritorio no es lo tuyo, existen herramientas como mockflow, y hotgloo a las que merece la pena echar un vistazo.

Keynote/Powerpoint

Keynotopia “transforma tu aplicación para crear presentaciones favorita en la mejor y más rápida herramienta de prototipado para crear mockups de aplicaciones móviles, web y de escritorio". Para los que no usen el Mac, no os preocupéis, Keynotopia también ofrece plantillas para powerpoint.

Personalmente la recomiendo encarecidamente si tienes que crear wireframes o prototipar aplicaciones móviles más rápidamente.

Adobe XD

Para aquellos que ya estés familiarizados con el paquete de Adobe, Illustrator e InDesign son unas herramientas para hacer wireframes muy capaces con sus propias fortalezas y debilidades. Pero durante los últimos años XD se ha convertido por sí misma en la herramienta de diseño de interfaces de usuario del paquete de Adobe.  

Es capaz de crear prototipos de alta fidelidad, y diseños avanzados de diseño, y también sencillos wireframes; definir gráficos de flujo, estructuras de navegación, y arquitecturas de la información todo desde el mismo sitio.

Adobe XDAdobe XDAdobe XD
Crea wireframes y mucho más, con Adobe XD

Adobe Illustrator

Puede que no sea la herramienta de wireframing de Adobe a día de hoy, pero Illustrator es una de mis herramientas favoritas porque ya estoy muy familiarizado con ella y estoy seguro de que muchos diseñadores que me estéis leyendo también lo estaréis. Yo utilizo Illustrator cuando estoy intentando crear rápidamente wireframes complejos que no necesiten interactividad.

¿Qué lo convierte en un ganador? La capacidad de exportar a formato PSD con capas editables, gran compatibilidad para copiar y pegar en Photoshop, y sólidos controles tipográficos con estilos que puedes guardar, editar y reutilizar, casi como CSS.

Adobe InDesign

Con similares fortalezas a las de Illustrator y con incluso más robustos controles de estilos tipográficos, sólido soporte a páginas maestras y la reciente capacidad de crear prototipos interactivos.   

Has visto los controles interactivos de InDesign

Yo uso InDesign cuando tengo que crear prototipos de múltiples páginas interactivos y de alta fidelidad. La única desventaja, desde mi punto de vista es el débil soporte a la exportación para Photoshop de los diseños visuales.

ProtoShare

"Potente y fácil prototipado." Ha lanzado recientemente su versión número 9 con una nueva paleta wysiwyg. Sitios web interactivos, prototipos de aplicaciones y para dispositivos móviles además de wireframes que hacen que merezca la pena echarle un vistazo.


Paso 4: Establecer una cuadrícula

Hay mucha teoría en lo que se refiere a los sistemas de cuadrícula, pero sin profundizar mucho en ello, los explicaría como "una forma estructurada y sencilla de disponer los elementos".

En este tutorial, yo estoy usando Illustrator, pero los mismos pasos podrían aplicarse a cualquiera de tus herramientas.

Para empezar, establece un tamaño para el documento. Yo he usado 1280 x 900 porque estaré usando cssgrid que permitirá que mi sitio se escale desde resoluciones móviles a un máximo de 1140 píxeles fácilmente.

Pantalla de diálogo para ajustar el tamaño del wireframePantalla de diálogo para ajustar el tamaño del wireframePantalla de diálogo para ajustar el tamaño del wireframe

Coloca la plantilla descargada de cssgrid en tu documento.

Consejo:

Existen un montón de plantillas de cuadrículas disponibles para su descarga, pero si estás interesado en personalizar una propia, echa un vistazo a responsify.it.


Paso 5: Determina la maquetación mediante cajas

Empieza dibujando cajas sobre la cuadrícula. Piensa sobre el orden en el que dispones la información que quieres mostrar a tus visitantes, hacerlo de arriba a abajo es la forma más fácil de hacerlo, seguido de izquierda a derecha. A continuación tienes un ejemplo de wireframe que tiene un diseño usado habitualmente por las empresas de software actualmente: 

En ocasiones, dependiendo de tu objetivo y de la entidad para la que estés diseñando, podrás ser más creativo con el diseño, aunque manteniendo en mente la jerarquía de la información. Este es un ejemplo del mundo real extraído de un proyecto que realicé para uno de mis clientes en donde estaba intentando evitar los diseños convencionales de los sitios web de las empresas tecnológicas:

Aquí tienes un diseño para un blog, con contenedores para publicidad cuidadosamente ubicados e instrucciones concretas para el cliente: 

Wireframe para blog con espacios para publicidadWireframe para blog con espacios para publicidadWireframe para blog con espacios para publicidad
Wireframe para blog con espacios para publicidad

Paso 6: Define la jerarquía de la información usando la tipografía

Cuando estés satisfecho con cómo están dispuestas las cajas, empieza a dejar caer fragmentos y partes de tu contenido para obtener una idea sobre si la información está bien estructurada o no. Por regla general: la información que deseas ofrecer a tu audiencia debe ser clara, aunque sea a través de un wireframe.

Usar simplemente distintos tamaños de fuentes es un buen punto de partida para discriminar los distintos niveles de información. 

Uso de distintos tamaños de fuente para diferenciar los distintos niveles de la jerarquía de la información.Uso de distintos tamaños de fuente para diferenciar los distintos niveles de la jerarquía de la información.Uso de distintos tamaños de fuente para diferenciar los distintos niveles de la jerarquía de la información.
Uso de distintos tamaños de fuente para diferenciar los distintos niveles de la jerarquía de la información.

No tengas miedo de experimentar en esta fase. En ocasiones, conforme introduzcas más detalles, es posible que te des cuenta de que el diseño original no funciona bien. Ese es el objetivo del proceso de wireframing; para realizar tantas iteraciones como sea posible para obtener la mejor forma de representar la información que pretendes comunicar.

En el siguiente ejemplo, he decidido que quería que las capturas de pantallas tuviesen más impactos y también empecé a usar cajas negras para definir cuáles son las áreas de mayor importancia para este sitio web:

Paso 7: Pulir con escalas de grises

El uso de todo el espectro de la escala de grises puede ayudarte a determinar la fuerza visual de tus elementos sin tener que escoger una paleta de color. De hecho, podría ayudarte más adelante durante el proceso de diseño visual.

Wireframe en escala de grises para definir la fuerza visual que debe tener cada elementoWireframe en escala de grises para definir la fuerza visual que debe tener cada elementoWireframe en escala de grises para definir la fuerza visual que debe tener cada elemento
Wireframe en escala de grises para definir la fuerza visual que debe tener cada elemento

Paso 8: Cómo hacer un wireframe en alta resolución

Este es un paso opcional, pero si te gusta hacer las cosas de forma incremental podrías querer probarlo. Crear un wireframe en alta definición significa simplemente añadir más detalles, tantos como sea posible, sin ser excesivamente granular con los detalles visuales. Podría significar incluir la copia de texto definitiva en el wireframe e intentar determinar el tamaño ideal para las fuentes:

También podrías añadir colores: 

La idea general es que en la fase visual/código quieras estar puliendo las cosas, sin continuar esbozando o en modo experimental. Lleva a cabo ciclos iterativos (obtener opiniones <-> modificar el wireframe) tan rápido como sea posible en la aplicación con la que te sientas cómodo creando tu wireframe, en lugar de mover capas y píxeles en Photoshop.

Dicho esto, en ciertos escenarios podría ser preferible no definir demasiado los detalles y pasar directamente a la fase del prototipado interactivo (Basecamp). El argumento para esto es que ciertos detalles de iteración no se pueden comunicar totalmente a través de una imagen plana.

Si trabajas con un equipo de desarrolladores, podrías querer pasarles los wireframes aprobados para que empiecen a codificar el framework básico mientras tú trabajas en los aspectos visuales. 


Paso 9: Traducir un wireframe a un diseño visual

Como hemos mencionado anteriormente, el motivo por el cual prefiero usar Illustrator para crear wireframes es porque puedo exportarlos a formato .psd manteniendo la mayoría de sus capas editables. Cuando esté en Photoshop no tendré que editar mucho la tipografía (Photoshop tiene menos controles tipográficos, aunque estos han mejorado mucho en CS6):  

Photoshop Export OptionsPhotoshop Export OptionsPhotoshop Export Options

Aquí tienes un ejemplo de wireframe traducido a elementos visuales. La estructura del wireframe permanece prácticamente intacta, aunque hay se han convertido algunas cosas a elementos visuales. También puedes echar un vistazo a este sitio web en vivo:

Webwise 2010Webwise 2010Webwise 2010

Inspiración y recursos sobre cómo hacer un wireframe

Tenemos un montón de tutoriales y recopilaciones sobre la creación de wireframes y prototipos en Tuts+. ¡Échales un vistazo! 

Recursos adicionales

Si quieres descubrir más sobre qué es un wiregframe y su proceso de creación, posiblemente quieras echar un vistazo a estos recursos.

Sigue adelante y ponte a crear wireframes

Así que aquí finalizamos este tutorial. ¡Espero que te haya inspirado para empezar a experimentar! Como sucede con cualquier proceso de diseño, no tengas miedo a iterar, iterar, e iterar.

Además, invierte algún tiempo en la experimentación con distintas herramientas y procesos. Descubrirás que el tiempo invertido vale la pena una vez hayas encontrado una aplicación que te parezca intuitiva.  

Por favor, siéntete libre de lanzar cualquier consulta a través de los comentarios, ¡gracias por leernos!

Si necesitas componentes web prediseñados, disponemos miles de plantillas de sitio web con atractivos diseños y otros elementos a cambio de una económica suscripción mensual.

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.