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

Introduciendo los wireframes a su Proceso de Diseño

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Sketching and Your Design Workflow
Defining and Recognizing Colors

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Después de bocetar, hay una cosa final en la que debes trabajar antes de empezar a diseñar (aunque, admitámoslo, todo esto es parte de diseñar).  Los prototipos para la organización de contenidos, es esencialmente una guía visual para un sitio web la cual le ayuda a fijarse en la composición sin pensar acerca de la estética del proyecto. 

La forma en cómo se aprecie un prototipo podría variar enormemente, dependiendo de con quién hable al respecto.  De hecho, tienes muchas opciones cuando estás creando prototipos, es decir; desde la forma en que muestras tus prototipos hasta el programa con el cual los creas.

Cuando creas tus prototipos, necesitas estar trabajando con el diseño y con el contenido que te han encargado previamente.  La idea de un prototipo —como una entrega a un cliente, o tan sólo como un paso extra que preferirías tomar—, es ser capaz de mostrar el diseño visual y el flujo de un sitio web antes de quedar atascado con los detalles de diseño tales como: color, tipografía y cualquier otra cualidad visual.  


Diseñando “prototipos creativos”.

La mejor forma de empezar la creación digital de prototipos para su proyecto es empezar directamente desde la fase de bosquejar.  En esa sección ya deberías haber jugado con la composición, sin embargo, la creación digital de un prototipo es una manera más profesional de fijar sus ideas sobre la composición y flujo de su página web.

Cuando estamos diseñando prototipos creativos, primero querrás asegurarte de usar el contenido real, es decir, del que te has encargado desde el principio del proyecto. Personalmente, prefiero diseñar prototipos que carecen de cualquier cosa que pueda influir en un cliente a que piense que las decisiones de diseños que se han hecho afectarán el aspecto y la impresión del proyecto. Además, siempre me aseguro que voy a diseñar un prototipo que se enfoque solamente en el contenido del proyecto y en la forma en que el contenido se presentará en la página.

An example wireframe created using the Balsamiq Desktop application.
En ejemplo de un prototipo creado usando la aplicación de escritorio Balsamiq

¿Qué es lo que hace que un prototipo quede bien diseñado?

Bien, el contenido que está bien escrito y, asimismo, esta presentado en una manera que es útil y relevante para aquellas personas que lo leerán, siempre resultará en un mejor diseño y sobre todo; una mejor experiencia en línea.  Así que un prototipo bien diseñado es aquel que siempre tiene en mente que el contenido es la parte más importante en la página y, también, es simpático presentar ese contenido en una manera que es adecuado para el proyecto y sus usuarios finales.

La fase de modelado (wireframe) de un proyecto estará fuertemente relacionada cuando tú estés editando y trabajando con tu contenido que preparaste desde el principio del proyecto.  Como breve ejemplo, hasta este punto has trabajado duro para asegurarte que el contenido será fácil de leer mediante el uso apropiado de los títulos y las listas. De igual importancia, diseñar un buen prototipo (wireframe) significa transportar ese contenido (en párrafos, títulos, listas y cualquier otra cosa que elijas para formatear el contenido) en su modelo y ver cómo puedes empezar a crear relaciones visuales entre cada contenido, conectando los puntos hasta que tengas una representación visual de cómo ese contenido puede verse en una página web.

Diseñando con “bloques”.

Con el único objetivo de mantener tus modelos de diseños gratis y tu contenido bien enfocado, trabajar con bloques es verdaderamente una forma fácil de dividir en partes una página para determinadas áreas de contenido. 

En un sentido práctico esto significa que si, por ejemplo, quieres un título estándar en la parte superior de la página, entonces solamente tienes que agregar un bloque en la parte de arriba del diseño de su prototipo (wireframe).  Además, si estrictamente, por ejemplo, quieres agregar un logotipo y un área de navegación dentro del encabezado, entonces lo que deberás hacer, sencillamente, es colocar bloques adicionales para estos elementos dentro del área del encabezado del diseño de su prototipo (wireframe).

Entonces puedes usar bloques en todo el resto del diseño del prototipo, continuando con las secciones y áreas específicas del contenido. 

No te lo tomes tan literal.

Es decir, que los bloques no tienen que ser literalmente un cuadro monocromático o un rectángulo. Una vez que tienes una idea básica de tu composición con los bloques que has agregado, siéntete con toda la confianza de usar tu contenido actual en las posiciones que serán útiles.  Por ejemplo, use el contenido real para los elementos de la navegación, una introducción para una página, los títulos, etc.  Esto ayuda a que puedas empezar a tener una idea visual de cómo el contenido funcionara en conjunto con el diseño que estás creando.

Antes de continuar, un consejo rápido: Siempre etiqueta tus prototipos.

Cuando estás diseñando tus prototipos (wireframes), siempre debes asegurarte que etiquetas las áreas o secciones que colocas en tu prototipo (wireframe).  Aunque es posible que tú entiendas lo que indica un determinado bloque (particularmente cuando el contenido real no está ahí), bueno, un cliente o un colega podría no entenderlo. Así que deberás hacer tu prototipo tan claro cómo sea posible para que ellos (clientes o colegas) entiendan lo que están viendo.


Considere el flujo.

Cuando estás diseñando tus prototipos (wireframes), una cosa en la que debes de pensar es acerca del flujo de la página. Es decir, debes mirar la forma en la cual el contenido se ajusta a la página y cómo se mueve desde una sección del contenido hacia otra.

El objetivo principal aquí es asegurarte de que el contenido se lea correctamente y que tu ojo se desplaza desde una sección a la siguiente.  Esto es particularmente importante cuando tienes páginas con una gran cantidad de contenido, los usuarios deberán ser capaces de moverse fácilmente desde una sección a la siguiente, sin que sea una experiencia negativa. Por ejemplo, si las páginas están demasiado ocupadas y no tienen el tipo adecuado de desplazamiento hacia ellas, entonces los usuarios perderán el interés de permanecer en el sitio debido a que les parece una dificultad entender que es lo que está pasando o simplemente no seguirán buscando más información en ese sitio.

¿Cuál podría ser una solución? Una idea es pensar en lo que tú intuitivamente haces cuando navegas a través de un sitio web. Por ejemplo, podrías empezar mirando hacia arriba de la página, es decir, el logo y el encabezado, y luego bajar hasta el centro del encabezado y seguir hasta el contenido principal mientras avanzas gradualmente hacia el sidebar y así sucesivamente.


Diseño responsable y prototipos.

Cuando estás diseñando un sitio web, es imposible crear y separar prototipos (wireframes) para cada etapa en la cual el sitio web podría cambiar, o cómo se ve o cómo se ajusta en conjunto con los demás elementos.  En lugar de eso, tienes que haber pensado previamente sobre el flujo de su diseño y contenido y para ello puedes ver un flujo abierto para el diseño del prototipo (wireframe).

Eso fue un pequeño consejo que tome del artículo de Sarah Parmenter, Responsive Day Out Walk. En ese artículo, Sarah explica cómo ella añade números a sus prototipos que le ayudan brindando a su cliente el entendimiento de cómo el contenido y los elementos pueden amontonarse cuando se ven en una pantalla más pequeña. Esto es verdaderamente útil, ya que ayudará a un cliente a empezar a entender acerca de la jerarquía del contenido así como también, el significado que puedes empezar a ver en cualquier obstáculo posible o cualquier desafío cuando trabajes responsablemente y pronto en el proyecto, algo que podría ahorrarte tiempo después en el proyecto.


Aplicaciones y herramientas.

Cuando diseñamos prototipos, tienes una ridícula cantidad de elecciones cuando se trata de elegir un programa que puedas usar para ese propósito. Personalmente, creo que hay en definitiva tres opciones que pueden ser las más populares, particularmente en la industria web.

Programas gráficos (Photoshop, etc.)

Posiblemente, la solución más fácil es trabajar con una aplicación gráfica con la que ya estás familiarizado, o que al menos has usado un poco antes.  Esto significa que hay poca o ninguna curva de aprendizaje, por lo que afortunadamente se puede conseguir diseñar tus prototipos un poco más rápido que lo normal.

La manera más fácil de diseñar con tus programas gráficos es usar las herramientas de texto y la herramienta forma. Usando estas herramientas tú puedes crear tus bloques así como áreas específicas con el contenido real.  Recuerda etiquetar los bloques de tu prototipo usando la herramienta de texto mientras continuas.

Keynote y Powerpoint

Sin lugar a dudas, esto puede ser una sorpresa para algunos, es decir, por lo general Keynote y Powerpoint se usan para la creación de presentaciones.  Sin embargo, son herramientas excelentes y fáciles de usar para crear otras cosas, incluyendo prototipos o modelados para contenidos web.  Usando las herramientas por defecto que están disponibles en la aplicación, puedes crear con mucha facilidad prototipos con apariencia profesional y lo puedes hacer realmente rápido.

Balsamiq Mockups

Mi preferida es, Balsamiq Mockups. Esta es una aplicación que está dedicada a crear prototipos.  A decir verdad, esta herramienta hace sencillo diseñar sus prototipos y tiene muchísimos elementos a su disposición para que pueda arrastrar y soltar los elementos que quieres colocar.

Una cosa que me encanta de esta aplicación es que usa un estilo de apariencia de boceto que realmente se presta a mostrar lo que realmente los prototipos son, es decir; una idea de un diseño que puede ser trasladado posteriormente en un diseño correcto.  De hecho, tienes la opción de elegir entre un aspecto más estándar de modelado así como el boceto terminado, esto claro, si sientes que tu clientes será más receptivo  a ese acabado.

Recursos prácticos: Use la interfaz de usuario.

Con la introducción del juego de la interfaz de usuario, es realmente fácil empezar a diseñar prototipos más complejos en una amplia variedad de aplicaciones. Desde juegos completos que puedes descargar para usar como PSD en Photoshop hasta configuraciones que te ayudarán a crear prototipos en Keynote mucho más fácil, con la siguiente lista de recursos puedes ayudarte un poco.


Asignaciones

  • Práctica y juega un poco con los tres tipos de formas con las que puedes crear tus prototipos, así podrás decidir cuál estilo y flujo de trabajo es mejor para ti.  La idea es que te cedas un poquito de tiempo para que llegues a familiarizarte con las diferentes aplicaciones que están disponibles para ti cuando estés haciendo prototipos y decidas cual conjunto es el mejor para ti.
  • Una vez que has encontrado cual solución para hacer prototipos es tu preferida, empieza a crear y diseñar tus prototipos. Recuerde que al empezar lo debe hacer tan sencillo como sea posible, es decir; construyendo tus diseños y tus componentes para representar la composición.
  • Cuando tu prototipo esté completado, crea una copia de éste y empieza a pensar en el “flujo abierto” y cómo cada uno de los elementos puede apilarse cuando la ventana del sitio empieza a hacerse más pequeña.
Advertisement
Advertisement
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.