Refinar y estandarizar su proceso de diseño y desarrollo de Divi

Refinar y estandarizar su proceso de diseño y desarrollo de Divi

Ayer hicimos referencia a una publicación anterior sobre la creación de una página de inicio para ayudar a preparar a sus clientes. En esa publicación, hablamos sobre cómo presentar su proceso a sus nuevos clientes. Esta es la forma en que presento mi proceso a mis clientes:

1. DISEÑO Y DISEÑO: una gran parte del diseño de un sitio web que requiere mucho tiempo se encuentra en la etapa de planificación y diseño del proceso. Primero crearé el mapa del sitio (jerarquía de página/menú) del sitio web para su aprobación, luego diseñaré la página de inicio y una subpágina (o más a pedido) para su aprobación.
2. DESARROLLO: una vez que se apruebe el diseño y el diseño del sitio, avanzaré con el diseño de todo el sitio, las páginas y agregaré todas las funciones y complementos. Nos aseguraremos de que su sitio se vea bien y funcione bien en todos los dispositivos y navegadores web antes de pasar al paso final.
3. EDICIONES Y REVISIONES: una vez que el sitio esté listo para la revisión final, podrá revisar cada página y podemos realizar ediciones detalladas hasta que el sitio esté completamente revisado. Le pedimos que revise TODAS las páginas para asegurarse de que toda la ortografía, la gramática, las direcciones y la información sean correctas antes de publicarlo.

Ahora, como compañeros diseñadores web, saben que hay más en el diseño y desarrollo de un sitio web que un simple proceso de 3 pasos. El mío es en realidad más un proceso de 20 pasos, pero descubrí que si sobrecargo a mis clientes con todo lo que implica, a menudo pensarán demasiado en las cosas cuando se trata de proporcionar contenido. Así es como se ve realmente mi proceso de diseño/desarrollo web Divi con un poco más de detalle:

1. Crear diseño de página y navegación para su aprobación
2. Encabezado y pie de página diseñados
3. Página de inicio diseñada
4. Subpágina(s) diseñadas
5. Enviar al cliente para su aprobación
6. Revisiones en encabezado, pie de página, página de inicio y subpágina
7. Una vez aprobado, cree las páginas restantes
8. Cree plantillas para secciones estandarizadas del sitio web y páginas recurrentes como galerías, proyectos, productos, etc.
9. Implemente todas las integraciones para suscripciones a listas de correo, redes sociales, widgets, etc.
10. Crear y probar todos los formularios de contacto
11. Ajuste y optimice el diseño para un uso móvil y receptivo
12. Ingrese la configuración SEO necesaria
13. Verifique dos veces la gramática y el contenido del sitio
14. Comprobación de navegadores cruzados y corrección de errores
15. Enviar para revisión final
16. Hacer todas las revisiones finales del cliente
17. Cree un panel de control personalizado para el cliente y un video de capacitación (si es necesario)
18. Elimine complementos, imágenes y herramientas innecesarios
19. Copia de seguridad del sitio y guardar localmente
20. Sitio de lanzamiento

Este proceso a menudo se desglosa con más detalles, pero esta es una estructura básica de todo lo que está involucrado en cada una de mis compilaciones, ya sea un sitio estilo folleto de 5 páginas o un sitio de 50 páginas con eventos, comercio electrónico, etc. todo esto como una lista de verificación y ha sido una buena práctica para mí asegurarme de no haber pasado nada por alto antes de lanzar un sitio. Crear una lista de verificación como esta y ponerle una línea de tiempo puede ser una manera muy eficiente de asegurarse de que su proceso de diseño/desarrollo se alinee con los plazos de su proyecto.

Bien, ahora que tiene una idea de cómo he organizado mi diseño interno/proceso de desarrollo, entremos en más detalles sobre cómo puede optimizar SUS procesos de diseño web Divi.

1) Creación de un proceso de diseño estándar

Una de las mejores preguntas y discusiones recurrentes que veo en los grupos de Facebook de Divi es algo así como «¿Cómo diseñas tu sitio Divi?» ¿Lo imitas en Photoshop o Illustrator? ¿Creas un wireframe básico para que el cliente lo apruebe? ¿Simplemente te sumerges en Divi y lo haces en vivo?

Por supuesto, no hay una manera correcta o incorrecta de hacer esto. Descubrí que, independientemente de cómo elija su proceso de diseño, debe hacer 3 cosas:

1. Tiene que funcionar para usted o su equipo
2. Tiene que funcionar para su cliente
3. Necesita ahorrarte tiempo

Cuando empiezo un nuevo proyecto, tiendo a crear un boceto muy aproximado en papel y me sumerjo directamente en Divi para diseñar el encabezado, el pie de página, la página de inicio y las subpáginas que sean necesarias para la aprobación inicial.

Este es el por qué:

• Funciona para mí: tradicionalmente, el diseño web comienza con un extenso proceso de estructura alámbrica en papel o un programa como Adobe Illustrator para diseñar y mostrar al cliente para su aprobación incluso antes de conectarse. Este método funciona para algunos y puede ser una ruta muy eficiente, en particular si está en un equipo y entrega su diseño a un desarrollador para que lo codifique. Pero una vez que apareció Divi, cambió mi proceso por completo. Ahora me sumerjo directamente en Divi después de tener una estructura básica y un concepto visual en mi mente y en papel.
• Funciona para mis clientes: he descubierto que a los clientes les encanta ver una vista previa real en vivo que pueden ver en un navegador mucho más que una maqueta plana. A veces, el flujo y la sensación de un sitio pueden perderse en una maqueta de una página, mientras que cuando un cliente ve el sitio en vivo en un navegador, a menudo conduce a un «factor sorpresa» mucho mayor. Pueden ver desplazamientos, efectos de desplazamiento y el flujo del diseño del sitio, lo que genera una excelente primera impresión y, a menudo, menos ediciones y revisiones.
• Me ahorra tiempo: puedo cambiar las cosas tan rápidamente con CSS y mis diseños y configuraciones guardados en Divi que no tendría sentido que tuviera que hacer esas revisiones en Photoshop o Illustrator y luego duplicarlas en mi hoja de estilo y la configuración de Divi. Ahorro una gran cantidad de tiempo con las revisiones y el diseño inicial al hacer las cosas en vivo usando el elemento de inspección directamente en mi sitio de desarrollo Divi. También puedo hacer cambios y revisiones en los sitios a menudo mientras estoy hablando por teléfono con los clientes. Puedes lucir como una verdadera estrella de rock del diseñador web cuando un cliente te pide que cambies algunas cosas y lo haces mientras hablas por teléfono con ellos o en cuestión de minutos.
  

Ahora nuevamente, este proceso de diseño es lo que funciona para ME como una tienda de un solo hombre. Con un equipo, el proceso debe funcionar para todos los involucrados. Pero la mayoría de los diseñadores web independientes son una mezcla de diseñador/desarrollador, así que haga cualquier proceso que funcione para usted, funcione para sus clientes y le ahorre tiempo.

2) Utilizar la biblioteca Divi y su trabajo anterior

Una de mis características favoritas de Divi es la capacidad de guardar tus diseños y diseños de página. Esta característica cambia las reglas del juego y puede ahorrarle mucho tiempo al diseñar y desarrollar con Divi . En un episodio reciente de DiviChat , el panel habla sobre guardar varias plantillas de diseños de página y luego simplemente eliminar las que no usan en un sitio nuevo. Hable acerca de una manera de ahorrar algo de tiempo! Si puede crear una serie de diseños de página y plantillas de página y todo lo que tiene que hacer es importar y cambiar el contenido, los colores y las imágenes, está ahorrando horas de diseño y desarrollo potencial.

Aquí hay 3 consejos rápidos que ofreceré cuando se trata de guardar elementos de la Biblioteca Divi y trabajos anteriores:

1. Guarde su CSS: tengo una «hoja de estilo maestra» con la mayoría del código CSS que he escrito para ciertos módulos, secciones de página y clases que quiero imitar en otros sitios. De esa manera, puedo abrirlo y extraer cualquier código que me gustaría usar en el proyecto actual. Ha hecho maravillas para ahorrar tiempo en lugar de tener que reescribir líneas de CSS una y otra vez.
2. Cree elementos de biblioteca Divi: guardar diseños como elementos de biblioteca puede ser una excelente manera de guardar su trabajo en páginas o como un sitio completo que se puede duplicar y cambiar fácilmente con imágenes y colores. Si no está seguro de cómo hacerlo, siga este tutorial .
3. Exportar archivos json : a menudo tengo clientes que hacen referencia a una página de un sitio anterior, por lo que en lugar de tener que recrear eso desde cero, a menudo exporto esa página del sitio anterior, la importo a mi nuevo sitio y ¡Ajuste los estilos y las imágenes en consecuencia! Nuevamente, otra gran manera en que Divi nos ahorra tiempo en el proceso de diseño y desarrollo. Más detalles sobre eso aquí si no está familiarizado.

3) Revelar su sitio web al cliente

En mi opinión, este es uno de mis aspectos más importantes, aunque pasado por alto y subestimado, del diseño web. Mucho depende de una primera impresión y de lo que el cliente piensa inicialmente cuando ve tu nuevo diseño. Si realiza una maqueta o una estructura alámbrica, naturalmente, la primera impresión será un poco decepcionante hasta que el cliente vea una versión en vivo en línea que sea totalmente comprensible y, nuevamente, puede funcionar según las complejidades de su proceso desde el diseño hasta el desarrollo. Como vio en mi proceso anterior, preparo el encabezado y el pie de página y diseño la página de inicio en su totalidad junto con una subpágina o más, según las necesidades del proyecto, y luego las envío para su revisión. Sin embargo, la forma en que envío al cliente mi diseño inicial ha cambiado recientemente, con gran efecto.

Solía ​​enviar el enlace de desarrollo en vivo para que el cliente pudiera ver el sitio por sí mismo, en su propio tiempo libre. Esto funcionó bastante bien, pero descubrí que en la rara oportunidad de hacer una vista previa en persona o por Skype, esas primeras impresiones fueron aún mejores y ¿por qué? Creo que es porque el cliente escuchó mi visión cuando vio el sitio y me permitió explicarles mis ideas de diseño, color y estética sin que primero hicieran sus propios juicios.

¡Ahora creo un video de vista previa rápido (generalmente menos de 5 minutos) de mí guiándolos por el sitio! Esto ha sido recibido con comentarios abrumadoramente positivos hasta el momento. ¿Me lleva un poco de tiempo, pero creo que vale la pena obtener una primera impresión increíble de mis clientes?

Aquí hay una captura de pantalla de cómo muestro un nuevo sitio a un cliente en Basecamp :

Grabo mis videos de recorrido con Screenflow para Mac . Luego subo el video a mi canal de Vimeo y lo convierto en un video privado. A partir de ahí, como puede ver en la instantánea de arriba, envío el enlace del video al cliente junto con una breve descripción, una lista con viñetas de lo que puede esperar a continuación y la URL real del sitio de desarrollo para que el cliente la vea en su navegador. después de ver el video.

Aquí hay un par de mis videos de vista previa recientes si desea ver cómo presento los nuevos sitios a los clientes:

Vídeo de vista previa del sitio web 1

Video de vista previa del sitio web 2

4) Manejo de revisiones y ediciones

Finalmente, una parte importante de su proceso de diseño y desarrollo será cómo maneja las revisiones y ediciones del cliente. Si ha estado diseñando sitios web durante algún tiempo, sabe que este proceso puede llevar mucho tiempo. Las reuniones en persona, las llamadas prolongadas y los correos electrónicos aleatorios con pequeños cambios aquí o allá pueden ser una gran pérdida de tiempo en el proceso de edición y revisión.

Hay algunas maneras de combatir esto. Intento que todos mis clientes publiquen todas sus revisiones (por página si es necesario) en Basecamp, donde creo una discusión para las revisiones. Aceptaré una llamada telefónica o una reunión en persona si es necesario, pero solo después de que los cambios iniciales se envíen de la forma en que quiero recibirlos primero. También dejo MUY claro que no quiero recibir revisiones una a la vez, durante varios días por correo electrónico. Les digo a mis clientes que, si es posible, los recopilen durante unos días y los publiquen todos a la vez o, como les gusta a muchos de mis clientes, organizarlos todos en un .doc o .pdf.

Volviendo a la publicación anterior de esta serie y mi charla con los muchachos de Artillery Media , tienen un proceso muy simplificado para las revisiones en el que requieren que sus clientes envíen sus ediciones en un documento en Google Drive y luego pueden hacer las ediciones. de repente. Esto también es un gran ahorro de tiempo. El truco aquí es hacer que el proceso de edición y revisión funcione para usted de la manera más rápida posible. Y solo un consejo, cada cliente tiene su propia forma de hacer las cosas, por lo que es tu trabajo guiarlos sobre cómo quieres revisiones y ediciones

Para concluir

Bueno, espero que estas ideas y mi proceso de diseño/desarrollo lo hayan animado a crear el suyo propio si aún no tiene un proceso estandarizado. Si tiene algunos procesos que funcionan bien para usted, ¡no dude en hacérnoslo saber en los comentarios a continuación!

A continuación: Cómo administrar de manera efectiva múltiples proyectos de diseño web Divi

Cuando tiene varios proyectos en marcha, es difícil administrarlos todos mientras se mantiene la creatividad, se hacen malabarismos con los plazos y se cumplen las expectativas de los clientes. En nuestra publicación final de esta serie, hablaremos sobre algunas formas en que puede administrar de manera efectiva todos sus proyectos de diseño web Divi para que pueda equilibrar la incorporación de nuevos clientes, el diseño, el desarrollo y el cumplimiento de los plazos que ha establecido. salir a golpear. Todo mientras se mantiene creativo y fresco. ¡Hasta entonces!

¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!