logoCoderhouse.png
By Coderhouse • septiembre 30, 2015

1, 2, 3 ¡Página Web!

¿Todavía no encuentras un proceso para diseñar y desarrollar una Página Web de manera rápida y eficiente?  La realidad es que no existe el proceso ideal, pero esta guía definitivamente te ayudará a optimizar tus tiempos en cada fase del desarrollo y contribuirá a que logres un resultado altamente productivo.

Muchas personas creen que para desarrollar una página web necesitan hacerlo en Photoshop o Illustrator, pero acá te mostramos un método mucho más eficiente que inclusive puede traerte mejores resultados.

La tarea de resolver creativamente el problema de crear un sitio web se compone de tres etapas fundamentales:

  • Bosquejo
  • Mockup
  • Prototipo

Etapa 1: Bosquejo, desempolvando el lápiz y el papel

Cuando nos encontramos frente a la tarea de pensar en como queremos que sea nuestra página web, es muy tentador abrir Photoshop o directamente empezar a escribir código, pero la realidad es que lo que más nos conviene en esta instancia es: Dibujar.

Es mucho más rápido construir un sitio web con una guía que sin ella y, aunque sea una web muy simple, un bosquejo de cinco minutos te puede salvar de horas de prueba y error en etapas posteriores de desarrollo. Por otro lado, las fases iniciales de desarrollo conllevan muchas iteraciones, por lo que usar una herramienta gráfica compleja para desarrollar un boceto que sea descartado, sólo te hará perder el tiempo.

Por supuesto que cuando piensas en páginas web, lo último que se te ocurre es agarrar un lápiz y un papel, pero la realidad es que hasta ahora no existe un método cuya inversión de tiempo y emocional sea tan efectivo.

El objetivo es explorar diferentes posibilidades y dibujarlas a mano nos otorga la máxima versatilidad, ya que permite maquetar decenas de vistas en cuestión de minutos.

En este punto, lo más importante es delinear las ideas más relevantes sin pensar en tipografías, colores ni interfaces. Es por eso que dibujar cumple perfectamente su objetivo.

Aclaramos que cualquier herramienta de dibujo funcionará bien: desde una pizarra hasta una app de dibujo para tablets, siempre y cuando permita dibujar rápidamente.

Vamos a usar de ejemplo el home del sitio web de Coderhouse

Coderhouse Home Sketch

 

Etapa 2: Mockup, hora de ponernos digitales

Una vez que tienes en papel un bosquejo con el que estas contento, estás listo para pasar a una herramienta de mockup digital para diseñar el wireframe de tus ideas. Las opciones más populares son Balsamiq Mockups, Moqups o OmniGraffle.  En Coderhouse nos gusta Balsamiq en particular porque tiene los widgets más usados de manera predeterminada, tales como video players y mapas; además tiene ese look & feel de dibujos a mano alzada, lo que ayudará a que los demás a que entiendan que las líneas no representan un esquema final.

Mockup Home Sitio Web Coderhouse

 

Los mockups digitales son muy útiles porque pueden ser compartidos con facilidad y son más comprensibles que dibujos en papel. Esto es especialmente útil cuando requerimos el feedback de las personas clave en el proyecto: Project Manager, equipo, clientes y demás. Y ya sea que deseen hacer pequeños cambios o quieran una dirección completamente nueva, es fácil modificar el mockup o directamente hacer unos nuevos en papel y luego pasarlos a digital.

Cada etapa de prototipado debe escalar en el nivel de detalle. En esta fase se debe prestar especial atención a proporciones, espaciado y alineación, ya que a veces las proporciones que tenemos en mente no concuerdan con la realidad y puede que sea un poco difícil de entender para otras personas.

Dicho esto, esta todavía no es una etapa para preocuparnos de tipografía o colores. La estética debe reducirse a un simple wireframe sin colores ni sombras. Por eso te recomendamos que evites utilizar herramientas como PhotoshopIllustratorGIMPPixelmator o cualquier otra herramienta similar de alta complejidad, ya que tienden a proveer el máximo nivel de detalle y eso es particularmente poco práctico en esta etapa. De todas maneras, a veces es inevitable querer mostrar algún tipo de detalle de sintonía fina y que amerite usar una herramienta más compleja. Sólo te recomendamos que si puedes, lo evites.

Por otro lado, InVision es una herramienta que permite darle interactividad al mockup y obtener una muestra más representativa del producto final.

Etapa 3: Prototipado, el turno de los Frameworks

El último paso en el proceso de prototipado rápido, es pasar nuestro mockup a un prototipo funcional visible en browsers a través de algún framework como Bootstrap o Foundation.

Lo primero que debemos hacer es determinar los espacios que ocupará cada elemento para ver como quedará efectivamente nuestro mockup, aunque todavía sin incorporar imágenes, tipografías ni colores. En este punto, lo más importante es prestar especial atención a las proporciones espaciado que determinamos en la fase de mockup.

 

Posicionando los elementos

Una vez que estamos contentos con estos elementos, empezamos a añadir el contenido real de la página que queremos construir (de hecho, el mockup también se compone de varios contenidos reales). Este punto es crítico ya que al intercambiar los "lorem ipsum..." por textos reales, puede que nos obligue a tomar diferentes decisiones de diseño, ya que algunos títulos pueden ser más largos o algunos párrafos pueden ser más cortos de lo esperado y puede requerir modificaciones.

Lo maravilloso de prototipar con un framework es que no hay necesidad de crear un sitio desde el principio ya que, por lo general, el prototipo se convierte automáticamente en la página web final porque la estructura y el estilo ya vienen predeterminados. De todas maneras, antes de decidir por alguna tecnología, es importante discutirlo con los colaboradores del proyecto antes de empezar esta etapa, ya que sería una pérdida de tiempo montar todos sobre Foundation si el equipo prefiere Bootstrap.

 

Coderhouse Home

 

 Etapa 4: Disfrutar de tu nueva Página Web :)

Notas Mentales

Este proceso es un proceso que a través del tiempo, prueba y error, charlas con alumnos y profesores, adoptamos como buena práctica en Coderhouse. Si tienen un método o una técnica que los hace más eficientes, nos encantaría leerlos en los comentarios :)