Refinando y estandarizando su proceso de diseño y desarrollo Divi

Publicado: 2017-06-02

Bienvenido a la parte 4 de 5 de nuestra serie Organizar y tomar el control de su negocio de diseño web Divi. En esta serie, exploramos varias tácticas, herramientas y estrategias que lo ayudarán a superar las luchas diarias que todos enfrentamos como Diseñadores Web Divi. Desde optimizar sus rutinas diarias, hasta crear sistemas y procesos, hasta brindar la mejor experiencia de diseño web para sus clientes; proporcionamos elementos y pasos procesables que puede implementar de inmediato con el propósito de ayudarlo a tomar el control de su negocio de diseño web Divi, ya sea que sea un trabajador independiente, una agencia pequeña o un equipo remoto.

Crear un proceso estandarizado para diseñar y desarrollar un sitio web Divi es crucial para su productividad y bienestar como diseñador web. Aunque un proyecto de diseño de sitios web rara vez sale exactamente como se planeó, si tiene un proceso y una ruta a seguir, le ahorrará mucho tiempo y lo mantendrá encaminado para cumplir con sus plazos cuando los proyectos crezcan.

Refinando y estandarizando su proceso de diseño y desarrollo 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. Así es como presento mi proceso a mis clientes:

DISEÑO Y DISEÑO: una parte importante y que requiere mucho tiempo del diseño de un sitio web 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.
DESARROLLO: una vez que se apruebe el diseño y el diseño del sitio, seguiré adelante 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.
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 se revise por completo. Le pedimos que revise TODAS las páginas para asegurarse de que toda la ortografía, gramática, direcciones e información sea correcta antes de publicarla.

Ahora, como compañeros diseñadores web, sabes que diseñar y desarrollar un sitio web es más que un simple proceso de 3 pasos. El mío es en realidad más un proceso de 20 pasos, pero he descubierto que si sobrecargo a mis clientes con todo lo que está involucrado, 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:

Crear diseño de página y navegación para su aprobación
Diseño de encabezado y pie de página
Página de inicio diseñada
Subpágina diseñada (s)
Enviar al cliente para su aprobación
Revisiones en el encabezado, pie de página, página de inicio y subpágina
Una vez aprobado, cree las páginas restantes
Cree plantillas para secciones estandarizadas del sitio web y páginas recurrentes como galerías, proyectos, productos, etc.
Implemente todas las integraciones para registros de listas de correo, redes sociales, widgets, etc.
Cree y pruebe todos los formularios de contacto
Ajuste y optimice el diseño para un uso móvil y receptivo
Ingrese la configuración de SEO necesaria
Verifique la gramática y el contenido del sitio
Comprobación cruzada de navegadores y corrección de errores
Enviar para revisión final
Realice todas las revisiones finales del cliente
Cree un panel de control personalizado para el cliente y un video de capacitación (si es necesario)
Elimina complementos, imágenes y herramientas innecesarios
Hacer una copia de seguridad del sitio y guardarlo localmente
Sitio de lanzamiento

Este proceso a menudo se divide en más detalles, pero esta es una estructura básica de todo lo que está involucrado con 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 por alto nada antes de lanzar un sitio. Crear una lista de verificación como esta y poner una línea de tiempo junto con ella puede ser una forma 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 proceso de diseño / desarrollo interno, 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 Divi en Facebook es algo como "¿Cómo diseñas tu sitio Divi?" ¿Lo maquetas 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 existe una forma correcta o incorrecta de hacer esto. Descubrí que, independientemente de cómo elija su proceso de diseño, debe hacer 3 cosas:

Tiene que funcionar para ti o tu equipo
Necesita funcionar para su cliente
Necesita ahorrarle tiempo

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

Este es el por qué:

Me funciona: tradicionalmente, el diseño web comienza con un extenso proceso de estructura alámbrica a través de papel o un programa como Adobe Illustrator para diseñar y mostrar al cliente para su aprobación antes incluso de conectarse. Este método funciona para algunos y puede ser una ruta muy eficiente, en particular si estás en un equipo y entregas tu 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 el papel.
Funciona para mis clientes: descubrí que a los clientes les encanta ver una vista previa en vivo real 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 los desplazamientos, los 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ápido con CSS y mis diseños y configuraciones guardados en Divi que no tendría sentido tener que hacer esas revisiones en Photoshop o Illustrator y luego duplicar las mismas en mi hoja de estilo y configuración de Divi. Ahorro una enorme 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 realizar cambios y revisiones en los sitios a menudo mientras hablo por teléfono con los clientes. Puede parecer una verdadera estrella de rock del diseñador web cuando un cliente le pide que cambie algunas cosas y lo hace mientras habla por teléfono con él o en cuestión de minutos.

Ahora, nuevamente, este proceso de diseño es lo que funciona para mí como un taller 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 combinación 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 sus 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 de guardar varias plantillas de diseños de página y luego simplemente eliminar las que no usan en un sitio nuevo. ¡Habla sobre una forma de ahorrar 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 contenido, colores e imágenes, está ahorrando horas de diseño y desarrollo potenciales.

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

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 el 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.
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 hacer esto, siga este tutorial.
Exportar archivos json : a menudo tendré clientes que harán referencia a una página de un sitio anterior, por lo que en lugar de tener que volver a crear eso desde cero, a menudo exportaré esa página del sitio anterior, la importaré a mi nuevo sitio y ¡Ajuste los estilos y las imágenes en consecuencia! Una vez más, otra gran manera en la 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 se basa en una primera impresión y en lo que el cliente piensa inicialmente cuando ve su nuevo diseño. Si hace una maqueta o un wireframe, naturalmente la primera impresión será un poco decepcionante hasta que el cliente vea una versión en vivo en línea que es totalmente comprensible y, nuevamente, puede funcionar dependiendo de 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, por lo general, una subpágina o más, según las necesidades del proyecto y luego la 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 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ó guiarlos a través de mis ideas de diseño, color y estética sin que ellos hicieran sus propios juicios primero.

¡Ahora creo un video de vista previa rápido (generalmente de menos de 5 minutos) de mí guiándolos por el sitio! Esto ha sido recibido con comentarios abrumadoramente positivos hasta ahora. ¿Es un poco lento, 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 le 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 anterior, envío ese enlace de 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 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 maneje 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 extendidas y los correos electrónicos aleatorios con pequeños cambios aquí o allá pueden generar pérdidas de tiempo masivas en el proceso de edición y revisión.

Hay algunas formas 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 se envíen los cambios iniciales de la forma en que quiero recibirlos primero. También dejo MUY claro que no quiero recibir revisiones de una en una, 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 a muchos de mis clientes les gustaría hacer, para organizarlos todos en un .doc o .pdf.

Volviendo a la publicación anterior de esta serie y a mi charla con los chicos de Artillery Media, tienen un proceso muy simplificado de revisiones en el que requieren que sus clientes envíen sus ediciones en un documento en Google Drive para que luego puedan realizar 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 revisiones 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 su trabajo orientarlos sobre cómo desea las revisiones y ediciones.

Para concluir

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

Siguiente: Cómo gestionar de forma eficaz varios proyectos de diseño web Divi

Cuando tienes varios proyectos en marcha, es difícil gestionarlos todos sin dejar de ser creativo, hacer malabares con los plazos y cumplir con las expectativas del cliente. En nuestra publicación final de esta serie, hablaremos sobre algunas formas en que puede administrar de manera efectiva todos sus proyectos de Divi Web Design para que pueda equilibrar la incorporación de nuevos clientes, el diseño, el desarrollo y el cumplimiento de los plazos establecidos. fuera a golpear. Todo sin dejar de ser creativo y fresco. ¡Hasta entonces!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!