Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing
Webdesign

Guía de Wireframing Para Principiantes

by
Length:LongLanguages:
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 David Castrillón (you can also view the original English article)

El Wireframing (Diseño de Estructura), es un paso importante en cualquier proceso de diseño de pantalla. Principalmente te permite definir la jerarquía de la información de tu diseño, haciéndo más fácil para ti planificar el diseño según cómo desea tu usuario procesar la información. Si estás aún por utilizar wireframes, es hora de mojarse los pies.

A simple wireframe

Es como un plano arquitectónico; necesitas ver en diagramas bidimensionales de blanco y negro antes de entender cómo construir la casa real. De manera similar para un diseño de pantalla, no se puede iniciar la construcción de capas de píxeles en photoshop, o escribir bloques de código, sin saber a dónde va la información.

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

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

El wireframing es importante porque permite al diseñador planificar el diseño y la interacción de una interfaz sin ser distraído por los colores, opciones de tipo de letra o incluso el texto. Me gusta explicarle a mis clientes que si un usuario no puede averiguar a dónde ir en un wireframe en blanco y negro, no importa qué colores se usen eventualmente. Un botón tiene que ser evidente incluso si no es brillante o está muy colorido.

Como las bases de un edificio, tiene que ser fundamentalmente fuerte antes de decidir si darle una costosa capa de pintura.


Paso 1: Obtener inspiración

Antes de entrar en más detalles, ya que una imagen puede pintar mil palabras, echa un vistazo en I ♥ wirefames. Serás capaz de obtener una rápida visión y comprensión de cómo otros diseñadores están manejando su proceso de análisis visual.

I Heart Wireframes

Quizás toma también este ingenioso marcador para navegador, Wirify que permite ver una versión del "wireframe-d" de cualquier sitio.

cnncom with wirify

Si observas continuamente lo que están haciendo otros diseñadores o sitios para sus wireframes, poco a poco obtendrás una imagen en tu mente de cómo una estructura ayuda a organizar la información en la pantalla.


Paso 2: Diseñar tu Proceso

El diseño es un proceso orgánico y así diferentes diseñadores acercan wireframes y su traducción a imágenes o código de diferentes maneras. Tu tienes que encontrar el proceso que te dan tus propias fortalezas y con el que estás más cómodo. A continuación, un diagrama que muestra varios procesos típicos:

Wireframes Process

37signals es conocido por propugnar el uso de bocetos e ir directo al código, aunque parece que algunos de sus diseñadores involucran también maquetas visuales en su proceso.

Para mí, he pasado por bastantes ciclos de diseño a código para tener un proceso un poco racionalizado . Este es un paso en el que algunas personas no podrían pensar, pero también considero cualquier framework html/css que utilizaría en el proyecto.

Por ejemplo, solía construir un montón de sitios en Blueprint, así puse mis wireframes y Blueprint en la misma red de 12 columnas. Esto acelera considerablemente los prototipos y el tiempo de desarrollo, pues en lugar de tener que escribir el ancho de cada elemento en mi hoja de estilos css, ahora están predefinidos de uno a doce columnas de ancho. Ahora uso cssgrid en su lugar por su soporte de diseño responsivo, pero se encuentra todavía a una cuadrícula de 12 columnas que se puede descargar como una plantilla de photoshop.

the 12-column cssgrid template

Como he dicho, es de ti decidir con qué proceso estás cómodo, a veces puede que tengas probarlo varias veces antes de darte cuenta si el proceso es más eficaz. Algunas personas pueden ser realmente buenas en el dibujo y pueden preferir no utilizar una herramienta de wireframing. Otros diseñadores pueden querer tener tantos pasos como sea posible para minimizar desviaciones o que les permita pensar a través de cada iteración tan pronto como el diseño comienza a tomar forma.

Eventualmente desarrollarás tu propio proceso basado en tus preferencias: pero por cuestiones de este tutorial usaré mi proceso típico como ejemplo:

La razón por la que generalmente uso Illustrator como mi herramienta de wireframe es principalmente por tres razones:

  1. Estilos – Puede guardar tus fuentes y objetos y reutilizarlos, al igual que CSS.
  2. Es fácil modificar, mover o escalar varios objetos.
  3. Ofrece fácil transición a Photoshop más adelante.

Sin embargo, utilizo otras herramientas y esto depende de la situación del proyecto. Señalaré brevemente algunas herramientas populares, sus fortalezas y sus debilidades en la siguiente sección.


Paso 3: Escoge tus herramientas

Aquí hay algunas herramientas populares sin ningún orden en particular:

Balsamiq

Balsamiq llegó a ser popular ya que los wireframes con Balsamiq se asemejan a los bocetos, haciendo inmediatamente evidente los wireframes no son un producto acabado sino un trabajo en progreso. Balsamiq también tiene una enorme biblioteca de componentes reutilizables que se pueden arrastrar y soltar fácilmente para diseñar tus wireframes.

Sample Balsamiq wireframe from the Balsamiq website

También se puede utilizar en casi cualquier plataforma, con versiones de escritorio disponibles para Mac, Windows y Linux, además hay una versión web si prefieres trabajar en la nube. Aplicaciones de terceros como iMockups para iOS también soportan formatos de exportación Balsamiq.

Omnigraffle

Unviejo favorito de Mac, Omnigraffle también tiene una librería ampliamente soportada por los usuarios de componentes reutilizables; Graffletopia.

youll like omnigraffle if you enjoy using beautiful stencils like this one

Puesto que fue desarrollada específicamente como una aplicación de creación de diagramas, Omnigraffle también tiene características complejas como el diseño automático, soporte de estilos de objeto personalizado, guías inteligentes y herramientas gráficas. Algunas de estas características también están disponibles en la suite de Adobe CS, pero si no tienes la suite CS, Omnigraffle es buena (~ $100) para la producción de wireframes detallada.

Axure

Casi como el abuelo de las herramientas de wireframing, Axure fue una de las primeras herramientas de nivel profesional para wireframes/prototipos. Hasta hace poco, estaba sólo disponible en Windows. Personalmente no tengo mucha experiencia con él, pero ha sabido ser una herramienta ampliamente utilizada entre los profesionales de la industria.

Flairbuilder

Un nuevo chico en el bloque, Flairbuilder tiene un fuerte apoyo a las interacciones.

from show hide to if-else interactions

También tiene una librería grande de componentes, soporta páginas maestras y se puede exportar el prototipo para verlo en línea.

Aplicaciones en línea

Si el software de escritorio no es tu taza de té, hay herramientas como mockflow, hotgloo y mockingbird.

Keynote/Powerpoint

Keynotopia "transforma tu aplicación de presentaciones favorita en la mejor herramienta de prototipado rápido para crear maquetas para móviles, web y aplicaciones de escritorio". Para no usuarios de mac, no te preocupes, Keynotopia también ofrece plantillas de powerpoint.

Personalmente lo recomiendo mucho si necesitas maquetar o prototipar aplicaciones móviles rápidamente. Otra buena alternativa es Keynote Kungfu.

Adobe CS

Para los ya familiarizados con la suite de Adobe, Fireworks, Illustrator e Indesign son herramientas de wireframing muy capaces con debilidades y fortalezas individuales.

Fireworks

Puedes trabajar en el proceso de diseño entero en Fireworks, desde wireframes básicos hasta el diseño completo. Fireworks soporta páginas maestras (piense en ellas como plantillas reutilizables donde cada edición en la plantilla principal puede ser aplicada a lo largo de sus páginas hijas), bibliotecas de elementos y puedes hacer prototipos interactivos con Fireworks relativamente rápido.

Illustrator

Esta es una de mis herramientas preferidas ya que estoy muy familiarizado con Illustrator y estoy seguro de que muchos diseñadores aquí estarán demasiado familiarizados con ella. Yo uso Illustrator cuando estoy tratando de hacer wireframes rápidos y complejos, sin necesidad de interactividad.

¿Qué lo hace vencedor? La capacidad de exportar como un PSD con capas editables, un fuerte soporte de copia y pegar para Photoshop, fuertes controles en la tipografía con estilos de fuente que se pueden guardar, editar y reutilizar, casi como CSS.

InDesign

Sus fortalezas son similares a las de Illustrator con aún más controles de estilos tipográficos, soporte de páginas maestras y la reciente capacidad para hacer prototipos interactivos.

Have you seen the interactive controls of InDesign

Yo escojo Indesign cuando tengo que hacerprototipos de alta fidelidad con múltiples páginas interactivas. La única advertencia para mí es el débil soporte para exportación a Photoshop para el diseño de efectos visuales.

ProtoShare

"Potente prototipado Hecho Fácil." Recientemente liberada la versión 9 con una nueva paleta de wysiwyg. Vale la pena revisarlo.


Paso 4: Configuración de una cuadrícula

Hay un montón de teoría en cuanto a sistemas de rejilla, pero sin entrar demasiado en ellas, lo explicaré como "una manera simple y estructurada de disponer los elementos".

Estoy usando Illustrator para este tutorial pero los pasos se pueden aplicar a cualquiera de tus herramientas.

En primer lugar, fijar un tamaño para el documento. Usé 1280 x 900 porque utilizaré cssgrid que permitirá que mi sitio escale entre resoluciones de móviles hasta un máximo de 1140 píxeles fácilmente.

Coloca la plantilla descargada de cssgrid en tu documento.

Consejo:

Hay un montón de plantillas de rejilla disponibles para su descarga, pero si estás interesado en personalizar la tuya propia echa un vistazo a responsify.it.


Paso 5: Determina el diseño con cajas

Comienza dibujando cajas en la rejilla. Piensa en el orden de la información que deseas presentar a tus visitantes, de arriba hacia abajo es el más fácil, seguido de izquierda a derecha. A continuación hay un ejemplo de un wireframe que tiene un diseño comúnmente utilizado por las empresas de software estos días:

A veces, dependiendo de tus objetivos y la entidad para la que se está diseñando, puedes ponerte creativo con el diseño, aunque manteniendo la jerarquía de la información en mente. Este es un ejemplo real de uno de mis clientes donde estaba rompiendo los diseños convencionales del sitio web de una empresa de tecnología:

Aquí hay un diseño para un blog, con publicidad cuidadosamente puesta en los contenedores y las instrucciones específicas para el cliente:


Paso 6: Definir la jerarquía de la información con la tipografía

Después de que estés satisfecho con cómo se presentan los cuadros, empieza a poner por partes tu contenido para tener una idea de si la información está bien estructurada. La regla es la misma: la información que deseas ofrecer a tu audiencia tiene que ser clara, incluso en un wireframe en blanco y negro.

Simplemente usando tamaños de fuente diferente como inicio, es una gran manera para distinguir entre los diferentes niveles de información.

No tengas miedo a experimentar en esta etapa. A veces, entre más detalles pones, puedes darte cuenta de que el diseño original no está funcionando bien. Es el punto de todo el proceso de wireframing; hacer tantas iteraciones como sea posible para reducir la mejor manera de representar la información que estás tratando de comunicar.

En el ejemplo siguiente, decidí que quería que las imágenes impactaran más y también he empezado a utilizar cajas negras para definir cuáles son las áreas que tomarían importancia visual de este sitio web:

Paso 7: Ajuste con escala de grises

Usar toda la gama de escala de grises puede ayudarte a determinar la fuerza visual de los elementos sin tener que elegir una paleta de colores. De hecho, puede ayudar durante el proceso de diseño visual más tarde.


Paso 8: Wireframes de alta definición

Este es un paso opcional, pero si quieres tomar las cosas en incremento puedes probarlo. Hacer un wireframe de alta definición significa simplemente añadir más detalles, tantos como sea posible, sin entrar demasiado en los detalles visuales. Puede significar completar el texto real en el wireframe y tratar de determinar los tamaños ideales de las fuente:

También podrías incluir colores:

La idea general es que en la fase visual/código prefieras estar en un modo más pulido y ya no en modo de redacción o experimentación. Realiza los ciclos de iteración (retroalimentación <-> wireframes) tan pronto como sea posible, en una aplicación de wireframing con la que estés cómodo utilizando, en lugar de mover capas y píxeles en photoshop.

Dicho esto, en ciertos escenarios puede ser más ideal saltarse el definir los detalles demasiado e ir directamente a una etapa de creación de prototipos interactivos (a lo 37signals). El argumento para esto es que ciertos detalles de la interacción no pueden ser comunicados totalmente en una imagen plana.

Si trabajas con un equipo de desarrolladores, puedes preferir dar los wireframes aprobados a los desarrolladores para la codificación del framework básico mientras trabajas en el diseño visual.


Paso 9: Traducir un Wireframe en un Diseño Visual

Mencioné anteriormente, que la razón por la que tiendo a preferir usar Illustrator para hacer wireframes es porque puedo exportar en un PSD con la mayoría de las capas de texto editables. En el momento en que estoy en Photoshop no necesitaré editar tanto las fuentes (Photoshop tiene herramientas de control de fuentes inferiores, aunque ha mejorado mucho en CS6):

Photoshop Export Options

Aquí hay un ejemplo de un wireframe traducido a un diseño visual. La columna vertebral del wireframe está más o menos intacta, aunque hay trucos hechos visualmente. También puedes ver este sitio web en vivo:

Webwise 2010

Conclusión

Aquí terminamos este tutorial. ¡Espero que te ha inspirado para empezar a experimentar! Como con cualquier proceso de diseño, no tengas miedo a repetir, repetir y repetir.

También, pasa algún tiempo experimentando con diferentes herramientas y procesos. Encontrarás que la inversión de tiempo merece la pena una vez que encuentres una aplicación que sea intuitiva para ti.

No dudes en hacer cualquier pregunta en los comentarios, gracias por la lectura!


Recursos adicionales

Si deseas saber aún más sobre prototipos, puede que desees revisar estos recursos.

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.