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.
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?
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ú.
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.
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.
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:
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.
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:
- Estilos: puedes guardar estilos tipográficos y de objetos y reutilizarlos más adelante, como haces con el CSS.
- Es fácil modificar, mover, o escalar múltiples objetos.
- 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.
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.
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.
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:
Una guía rápida de los ajustes de relleno de imagen de Figma
4 formas de cambiar el tamaño de los elementos en Figma
6 plugins para Figma para darte superpoderes de diseño (y cómo utilizarlos)
¿Cuál de los niveles de precios de Figma es el adecuado para ti?
Los mejores recursos Figma GRATIS: plantillas, íconos, kits UI y más
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!
Flairbuilder
Flairbuilder ofrece un gran soporte para las interacciones.
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 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.
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.
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:
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.
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.
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):
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:
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!
Más de 25 wireframes y kits de UI necesarios en tu biblioteca de diseño
Kits de diseño UX y UI para acelerar tu proceso de diseño
Los juegos de UX y UI más vendidos para Sketch, Photoshop, Illustrator, XD y Figma
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.
- 35 excelentes recursos para hacer wireframes
- Wireframing – Guía para los perfeccionistas
- Crear buenos diseños más rápidamente (diapositivas sobre como abocetar wireframes)
- 50 kits gratuitos para wireframes de interfaz de usuario y diseño web, recursos y archivos fuente
- wireframes.linowski.ca
- Quora: ¿Cuáles son las mejores herramientas para crear wireframes?
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.
By
