This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Realizar los Primeros Bosquejos



Cuando hacemos un bosquejo no estamos tratando de crear una imagen perfecta de la página, ya que eso nos quitaría mucho tiempo (y entonces no tendría sentido hacer el bosquejo). Lo que queremos es crear un diseño que tenga tan solo los detalles necesarios para poder visualizar el sitio. 
 
Queremos plasmar cosas como: cuántas columnas vamos a utilizar, dónde vamos a colocar las imágenes, qué tan grande serán las letras, de qué color será el fondo, y lo más importante: cómo va a interactuar el usuario con el sitio.
 
Estos son algunos detalles a tomar en cuenta cuando vayas a realizar tus bosquejos:
 
Regla de los tercios 
 
Durante la diagramación es importante tener en mente la regla de los tercios. La regla de los tercios dice que nuestra sección más importante debe ocupar 2/3 del espacio total disponible, mientras que todo lo demás ocupará el 1/3 restante. Esta regla aplica tanto horizontal como verticalmente, y puede ser utilizada de manera anidada. Por ejemplo, la sección principal ocupa 2/3 de la página completa, pero dentro de la sección principal, el texto ocupa 2/3 del espacio total, mientras que otros links e imágenes ocupan el 1/3 restante, y así sucesivamente.
 
Equlibrio
 
También es importante tener en mente el equilibrio. Si pensamos que cada elemento en la página tiene un "peso" basado en su tamaño y color, se debe buscar que la página esté balanceada. Para comprobar esto podemos trazar una raya vertical u horizontal por el centro de la página, y ver si los elementos a ambos lados se balancean. A las personas les gusta observar elementos bien alineados y simétricos, y las páginas web no son una excepción.
 
Texto
 
Con un bosquejo buscamos proyectar la distribución de contenido, pero no nos interesa el contenido en si. Por ende, el texto puede ser representado mediante líneas horizontales de distinto grosor, dependiendo del tamaño del texto. 
 
Navegación
 
La navegación incluye el sistema de menús, hipervínculos y cualquier otro mecanismo que le permita al usuario pasar de una ventana a otra de manera sencilla.
 
Entre los puntos a tener en mente para diseñar una buena navegación, podemos mencionar:
  • Contar con un sistema de navegación principal constante a lo largo del sitio.
  • Contar con sistemas de navegación secundarios que varíen dependiendo de la ubicación del usuario.
  • Utilizar nombres cortos y libres de ambigüedad para menús y secciones.
  • Permitirle al usuario saber dónde se encuentra en todo momento.
  • Hacer fácil realizar las tareas más comunes. 
  • Hacer el sitio predecible. Si al dar clic en un hipervínculo el usuario encuentra material distinto al que esperaba, se va a sentir frustrado y probablemente abandonará el sitio.
 
Hay herramientas como Balsamiq Mockups y MockingBird que te permiten crear bosquejos fácilmente, pero aún así muchas personas prefieren bosquejar en papel o en un tablero, ya que les resulta más rápido.
 
Elige la herramienta que prefieras y realiza bosquejos de las ventanas más importantes de tu sitio web. Cuando termines, pasa a la siguiente tarea.

Task Discussion