8 consejos para optimizar el flujo de trabajo en diseño web

El perfecto flujo de trabajo para hacer una web workflow-10

Los desarrolladores web estamos constantemente experimentando con herramientas nuevas, probando códigos y programas a la búsqueda de lo que sería el “Santo Grial” en nuestra profesión: aquello que nos permita ser más ágiles y mejore nuestro flujo de trabajo. Pero no todo está en las herramientas, a veces el problema está en el método que utilizamos en nuestro proceso laboral, ese workflow con el que trabajamos puede que no sea el correcto. Hoy vamos a dar algunos consejos, que vienen a complementar los que comentamos anteriormente, para optimizar el precioso tiempo que dedicamos en el desarrollo de una web.

1. Recolecta el material

El perfecto flujo de trabajo para hacer una web workflow-01

No deberías empezar NADA sin tener la información necesaria; sabemos que es difícil, pero sin ella te será muuuucho más difícil dar los siguientes pasos. Necesitas toda la documentación: briefings y todos (bueno, o casi todos, que ya sabemos después lo que ocurre) los textos que vayan a ir en la web antes de comenzarla.

2. Empieza por el papel

El perfecto flujo de trabajo para hacer una web workflow-02

Todas las ideas surgen en el papel: no te empantalles, tira de lápiz y goma, y comienza a bocetar; posteriormente, ya veremos si se puede hacer en digital, pero deja que tus ideas fluyan sobre el papel.

3. Trabaja en un wireframe

El perfecto flujo de trabajo para hacer una web workflow-03

Ahora que hiciste el boceto, ya te dejamos tocar el ordenador. Comienza con tu boceto digital creando un wireframe. Haz esquemas de navegación y prueba las estructuras de diseño que bocetaste en papel. ¿Funcionan?

4. Ahora sí, diseña

El perfecto flujo de trabajo para hacer una web workflow-04

Cuando diseñes, te darás cuenta de que nuevamente tienes que recopilar material: en esta ocasión, al que nos ha pasado el cliente (textos, imágenes…), tendremos que añadir el que nosotros necesitemos para determinadas operaciones (tipografías o iconos, por ejemplo). ¡Ahora si que no hay escapatoria!, ¡sin ellos no podrás trabajar!

Empieza por el PSD/AI para ordenar tus ideas: convierte tu wireframe en diseño. Una vez que lo hayas terminado, guárdalo a escala como jpeg para ver cómo se ve en pantalla. No te olvides de crear los diferentes formatos para el responsive.

5. Prueba y aprueba

El perfecto flujo de trabajo para hacer una web workflow-05

Es muy común trabajar con tamaños demasiado grandes o demasiado pequeños cuando hacemos el prototipo del diseño, ya que estamos continuamente utilizando el zoom in – zoom out. Así que, para evitar errores de proporción, ve guardando los archivos en jpeg o png para comprobar que los tamaños son correctos.

También es importante que chequees la usabilidad; aunque sea una imagen, ya te podrás hacer una idea bastante aproximada de cómo va a funcionar tu web.

Deja que otras personas lo vean y te den su opinión, porque siempre puede haber algún detalle que estés pasando por alto. Después de que varias personas hayan comprobado cómo se ve tu página y se hayan hecho a la idea de cómo se navegaría por ella, haz los cambios que creas necesarios. Las opiniones ajenas te pueden ayudar a mejorar la experiencia de usuario.

Y si al cliente le gusta, ¡habemus diseño!

6. Conviértelo en código

El perfecto flujo de trabajo para hacer una web workflow-06

¡Ya puedes empezar a volcarte con el código! Si has hecho un buen trabajo en los apartados anteriores, seguro que te será muy fácil pasar el diseño del PSD a código, apenas tendrás que pensar y se convertirá en una tarea mecánica.

7. Añádele interacciones

El perfecto flujo de trabajo para hacer una web workflow-07

Ahora es el momento de añadir todas esas “tontunas” que le gustan al cliente, ésas que harán que tu trabajo quede fino y profesional, que no parezca una web estática y empiece a tener un poco de chicha. Añade los hovers y los efectos precisos en jQuery.

7. Optimiza

El perfecto flujo de trabajo para hacer una web workflow-08

Si has estado trabajando de forma fullerilla, subiendo fotos a cascoporro por probar, por ver si quedaban bien y a tamaños descomunales, tu web ahora pesará un quintal. Pero no te preocupes, a todos nos pasa que nos centramos en el código y olvidamos un poco el resto de los aspectos que debemos tener en cuenta. Ahora, céntrate y optimiza tu página: empieza a reducir el tamaño de tus archivos y, sobre todo, ¡de las imágenes!

8. Súbelo y posiciónalo

El perfecto flujo de trabajo para hacer una web workflow-09

Ahora tu web ya casi está completa. Pero ¿no creerás que van a entrar en ella por arte de magia? Trabaja en su posicionamiento, escribe en el blog o ayúdate de plugins de posicionamiento si es necesario… ¡Algo debes hacer! Si no, no te encontrarán ni tus familiares, que son los que más te pueden querer (y están al día de tus andanzas).

Si has completado los pasos de esta lista, habrás optimizado el flujo de trabajo de tu web. ¡Empieza a pensar a qué vas a dedicar el tiempo que te estás ahorrando!

1 comentario en “8 consejos para optimizar el flujo de trabajo en diseño web”

Dinos lo que piensas

Tu email no se mostrará ;)