La guía práctica para el flujo de trabajo de diseño web
Como diseñador web que forma parte de un equipo de desarrollo web más grande, es común que tenga que hacer malabarismos con muchas tareas al mismo tiempo.
Después de haber creado algunos primeros borradores de diseño para su cliente y ahora esperar por ese primer comentario, probablemente esté muy entusiasmado con la forma en que el cliente percibirá su trabajo. Con tantas cosas para monitorear en un marco de tiempo estricto, es fácil sentirse abrumado por la complejidad del proyecto. Hay muchos pasos involucrados en el diseño de un sitio web o aplicación. Estos pasos varían ligeramente de persona a persona, pero el flujo de trabajo básico sigue siendo el mismo.
Con una buena configuración del flujo de trabajo y con algunas herramientas y software, mantendrá el ritmo de rodaje y evitará largos ciclos de retroalimentación.
Aquí hay una guía práctica de un flujo de trabajo de diseño que puede usar para aumentar la productividad de su equipo.
Fase de preparación: gestión de las expectativas
Ya sea que simplemente esté manteniendo un sitio web existente o diseñando un nuevo sitio web desde cero, tanto usted como su cliente deben gestionar las expectativas de los demás.
Si bien su principal responsabilidad es comprender el requisito del proyecto en detalle, la responsabilidad del cliente es comprender cómo cada elección que se realiza afecta el alcance y el presupuesto del proyecto, con su ayuda.
Informe a su cliente sobre la tecnología requerida, el presupuesto requerido y el marco de tiempo requerido para finalizar el proyecto. Acercarse a su proyecto de una manera organizada le ahorrará tiempo, esfuerzos y presupuesto.
Fase 1: definición de los objetivos del sitio
Esta es probablemente la fase más importante de cualquier proyecto de diseño a medida que define los objetivos, establece la estructura general, decide el contenido y asigna los roles y los diferentes entregables a lo largo del proyecto. Al establecer una planificación adecuada desde el principio, te ahorras mucho dolor después.
Aquí trabaja con el cliente para establecer el cronograma, el presupuesto, la línea de tiempo, las necesidades técnicas, el estilo visual y la estructura de contenido para el público objetivo.
Al gestionar las expectativas y comenzar con su proyecto de diseño, me gustaría recomendar el uso de una gestión de proyectos sencilla y fácil de usar con el fin de realizar un seguimiento de los objetivos, presupuestos, tareas y cronogramas definidos.
Trello
Trello es una herramienta de gestión de proyectos conocida y fácil de usar. Te permite crear varias tablas para varios proyectos. Con Trello puede obtener una visión general rápida de las tareas actuales y su retraso acumulado.
Asana
Asana es una gran tarea pendiente y un rastreador de tareas. Incluso puede colaborar con colegas y clientes dentro de Asana, lo que le permite mantener su proyecto transparente y actualizado para todos.
Campamento base
Otra herramienta de gestión de proyectos bien conocida pero excelente es Campamento base . De forma similar a las herramientas mencionadas anteriormente, básicamente le permite a usted y a su equipo realizar un seguimiento de cada entregable del proyecto y le permite seguir el camino.
Fase 2: Desarrollar la estructura del sitio y ensuciarte las manos
La estructura del sitio forma la columna vertebral del sitio web. Actúa como una guía de referencia para el equipo durante toda la duración del proyecto. Usa diagramas de flujo para mostrar el flujo de la estructura.
Mapa del sitio: Crear un mapa del sitio es crucial para entender la organización del contenido. Es importante seguir actualizando el mapa del sitio después de cada cambio. Si no lo haces, las cosas se pondrán complicadas.
Wireframe: el contenido del sitio debe ser reparado antes de que el diseño y los gráficos se implementen.
Wireframes son bocetos de baja fidelidad del sitio web o la aplicación móvil. Los wireframes se utilizan para crear marcadores de posición para el contenido, establecer prioridades para los elementos en la página y documentar los requisitos. Esto se vuelve muy importante en la próxima fase.
Balsamiq
Balsamiq es una herramienta gráfica de armado de alambre que ayuda al diseñador a crear muchos diseños y luego acomodar los widgets preconstruidos en un editor de arrastrar y soltar para que el equipo pueda ver y sugerir cambios simultáneamente.
Moqups
Moqups es fácil de usar, tiene muchas funciones de arrastrar y soltar y no requiere un complemento de navegador para operar. Puede organizar fácilmente una presentación de diseño para su cliente utilizando esta herramienta.
Invision
Invision le permite cargar diseños de trabajo y crear interacciones mediante el uso de puntos de acceso, al igual que cualquier aplicación real. Una de sus características sobresalientes es la capacidad de enviar diseños clicables a su teléfono a través de SMS, lo que subraya la importancia de poder probar sus diseños usted mismo en el contexto correcto.
Notismo
Notismo es una de las mejores herramientas que usan los equipos creativos para acelerar su proceso de trabajo. Esta es una plataforma de colaboración de diseño y video. Ayuda a los profesionales creativos a compartir su proyecto y recibir comentarios a través de bocetos y notas. Notism también permite crear diferentes versiones de una pantalla. Al pasar fácilmente de una pantalla a otra, puede obtener una mejor vista del desarrollo de su proyecto.
Fase 3: Diseño y producción
En esta fase, asegúrese de que el diseñador trabaje junto con el programador para garantizar la implementación de elementos de diseño coherentes.
Después de que el cliente aprueba los borradores de diseño, el diseñador y el equipo gráfico trabajan en la apariencia y la sensación del sitio web. La compresión, la transparencia, el uso eficiente del color y el diseño se combinan para crear gráficos web eficaces.
La etapa de producción es un punto donde se crea el sitio web real. Una vez que se completa el diseño y el diseño del sitio, el sitio entra en la parte de ingeniería del trabajo. Aquí, tomará todos los elementos gráficos individuales del prototipo y los usará para crear el sitio real y funcional.
Github
Su código cambiará una vez, dos veces, y probablemente mucho más que eso. Github le permite trabajar de manera eficiente con diferentes versiones de su sitio web. La herramienta realmente brilla cuando trabajas en conjunto con un equipo de desarrolladores. Esta es la colaboración de código en su mejor momento.
CodePen
Este es encantador. Se trata de un editor en línea para todas sus necesidades de HTML, CSS y JS. Se combina fácilmente con Github y, por supuesto, es colaborativo. La idea es poder probar piezas de código y encontrar una solución adecuada sin estropear el resto del código.
Fase 4: pruebas, recopilación de comentarios y corrección de errores
Ningún proyecto es realmente sin defectos. Y aunque las pruebas son algo que se realiza a lo largo del proceso de desarrollo también, siempre habrá errores. Y no solo estamos hablando de errores de software. Incluso un diseño puede tener errores.
Entonces, en este momento, es importante comenzar a probar como loco. La resolución temprana de problemas ahorra mucho tiempo y esfuerzo. Es fundamental que todas las personas que participan en la creación del sitio participen en las pruebas. Sin embargo, las pruebas deben ser un proceso ágil. Una vez que haya lanzado el sitio o esté en proceso de lanzarlo, muchas personas comenzarán a usarlo y proporcionarán comentarios sobre el sitio.
Y a pesar de que hizo todo lo posible para probar el sitio, se habrá perdido un par de errores o aparecerán nuevos con el tiempo. Es crucial que obtenga información sobre errores y problemas lo antes posible. Si logra que sus usuarios le informen esto, está satisfecho.
Usersnap
(Divulgación completa: yo trabajo para Usersnap.) Construimos Usersnap como una herramienta visual de seguimiento y solución de errores que facilita el trabajo de las pruebas de software. Permite a los clientes, visitantes del sitio web y colegas informar errores, solicitudes de cambio o simplemente comentarios en su sitio web. También para las pruebas manuales de sitios web, Usersnap es una apuesta segura, ya que acelera el flujo de trabajo de las pruebas a través de herramientas fáciles de usar.
Entonces, para recapitular ...
Los proyectos de diseño requieren que muchas personas trabajen juntas. La retroalimentación constante es una de las partes más importantes de la entrega de un proyecto según lo solicitado por el cliente y dentro de los plazos especificados. Con todo este desorden y el hecho de que los sitios web se vuelven más complejos cada día, las herramientas en línea facilitan completar el trabajo entre todos los involucrados y obtener retroalimentación instantánea de ellos.
Integrar estas herramientas en un flujo de trabajo sólido, realmente lo ayuda a llegar a donde necesita estar en un campo que ya es competitivo.
Foto principal, imagen de trabajo en equipo a través de Shutterstock.