¿Cuál es tu workflow para diseñar web?

Publicado el 22 / 09 / 2014
Conforme el tiempo pasa y el trabajo se va haciendo más estructurado, uno va aprendiendo y desarrollando su propia manera de diseñar un sitio web. Lo que hay que tener presente es si estamos trabajando pensando en ser cada vez más eficientes o si nos hemos estancado. Para eso les comparto algunos workflows para diseñar un sitio web.

El workflow de cada diseñador web varía mucho dependiendo de las capacidades de cada quien, sobre todo al momento de involucrarse con el código.

Método 1: La muerte lenta


A veces el querer hacer las cosas por la vía inmediata, puede que no sea la mejor forma de trabajar para diseñar un sitio web.

1. Comenzar con Photoshop / Illustrator

Queriendo hacer las cosas rápido, puede causar que al momento de diseñar se pierda tiempo al decidir qué colores, efectos y en que se vea “bonito”.

2. Maquetar el sitio en HTML y CSS

Armar páginas así puede ser rápido en un inicio, ya se definió la estética y la estructura así que sólo queda armar la vista en HTML y CSS… aparentemente.

3. Maquetar el paso 1 y/o 2 porque se llenó todo con Lorem Ipsum

Un sitio web debe adaptarse, y si piensan en espacios con medidas estrictas que dependan de sus dimensiones para que se vea “bien” en el diseño, tarde o temprano cuando se agregue el contenido real los problemas se van a presentar: Los espacios se desbordan, se necesitan otras secciones, el diseño se rompe y hay que hacer nuevos cambios que sólo nos van a retrasar y a forzar a tomar medidas no tan acertadas.

4. Rediseña una y otra vez. Agrega elementos y fixes hasta que pierda la forma original

En ese vaivén de armar y rearmar un sitio web lo más probable es que el sitio pierda su forma y se vea más como un sitio con parches y espacios forzados para ajustarse. Al final sólo queda llorar discretamente…

Este método suele causar mucha, mucha frustración. Ya he pasado por un método similar que no recomiendo en absoluto.

Método 2: El devora tiempo

A veces el querer ser perfeccionista nos lleva a ciclarnos y a consumir mucho, pero mucho tiempo. Así que podríamos ir desde la planeación en el boceto a mano para después crear un wireframe estilizado a nivel estructurar y después crear un mockup refinado en Photoshop que, una vez listo y perfeccionad, podamos empezar a armar el sitio en HTML y CSS.

Lo malo de este proceso es que puede ser muy redundante al acomodar elementos en diferentes versiones una y otra vez o tratando de imitar un botón o checkbox en Photoshop, cuando podría hacerse directamente en el navegador. Para esto se habrán gastado cuantiosas horas por sólo pensar en perfeccionar una propuesta.

Un punto muy importante es que las ideas desde que se conciben en papel son crudas, burdas, se concentran en la funcionalidad y ofrecer una buena experiencia para el usuario, además, conforme se avance en un proyecto las funciones o contenidos irán cambiando y modificándose. Entonces no hay porqué gastar tanto tiempo en tratarlas de hacerlas ver bien desde un inicio. Para eso existe la iteración.

“Las ideas quieren ser feas”
— Jason Santa María

Método 4: Ryan Singer

Ryan Singer es un diseñador y desarrollador en Basecamp (antes 37Signals). Para quienes desconozcan estos nombres, 37signals comenzó como un estudio de diseño web, para luego volverse expertos en el desarrollo de aplicaciones web como Basecamp, Campfire y Highrise.

El método para trabajarde Ryan es el siguiente:

1. Bocetar la idea

A través del papel va comprendiendo el proyecto con diagramas pequeños y diseñando flujos de interacción. La función es primero, así que sólo se concentra en conseguir que el objetivo se cumpla dejando la estilización gráfica para otra etapa.

2. Maquetar el sitio en HTML y CSS

Después de bocetar, se dirige al editor de código. No sólo va armando el sitio estático, sino que crea todo el proyecto usando Ruby on Rails para que la transición de diseño a desarrollo sea aún más eficiente y ahorre tiempo.

Opcional: Usar Photoshop para gráficos

Para selección de colores, gráficos y cualquier detalle que ocupe revisar visualmente se apoya de este programa. En el video que les muestro a continuación podrán apreciar cómo su practicidad es bastante admirable.

¿Mi método para trabajar?

Aunque trato de quitarme la costumbre de invertir tanto tiempo en Photoshop, lo que si he tratado de hacer es dedicarme más a iterar un diseño ya que se armó en HTML y CSS. Sin embargo, aún siento cierto control refinando un mockup a una versión en Photoshop o Sketch, pero pensando precisamente en el contenido.

¿Cómo han trabajado ustedes? ¿Cómo se han sentido más cómodos o eficientes al diseñar un sitio web?


Escrito por

Te puede interesar

Sin Comentarios

Puedes ser el primero en comentar!

Sorry, comments for this entry are closed at this time.