Guía del Traspaso del Desarrollo de un Sitio Web entre los Diseñadores y los Desarrolladores

Solicitar Información

Las maquetas del sitio web se completan y se aprueban por el cliente. Las páginas y plantillas aún no han sido construidas. Es el momento de entregar el desarrollo del sitio web. El traspaso del desarrollo de un sitio web es el punto en el proyecto del sitio web donde los equipos de diseño y desarrollo se reúnen para revisar los diseños y discutir el proyecto.

Durante esta reunión, el diseñador puede guiar al desarrollador a través de los diseños y completarlos sobre cómo debe verse el sitio web. Es el momento perfecto para que el desarrollador haga preguntas y entienda todo lo que se necesita para la construcción.

A continuación se presenta una lista de cosas que el desarrollador puede necesitar tener o tener en cuenta para tener éxito:

Marca o Guía de Estilo

Tener una guía de marca claramente definida que enumere los distintos tipos, tamaños y pesos de fuente, colores, etc., junto con notas sobre cuándo y dónde usarlos es muy útil para el desarrollador cuando configura la hoja de estilo de un nuevo sitio web. Esto no sólo ayuda a mantener la coherencia de los estilos en todo el sitio web, sino que también evita que el desarrollador tenga que hacer suposiciones sobre estos elementos.

Wireframes

Es poco probable que cada una de las páginas de su nuevo proyecto web tenga su propia maqueta, pero aún así necesitará una forma de ilustrar a su desarrollador cómo deben construirse ciertas páginas no diseñadas. Ahí es donde los wireframes son útiles. Son guías simples, a menudo creadas con cajas en blanco y negro y texto simulado para representar el diseño general de una página web. Piense en ellos como los planos o esqueletos de las páginas.

Diseños

Algunas de las páginas más importantes o altamente personalizadas, como la página de inicio, normalmente estarán completamente diseñadas. Asegúrate de que tu desarrollador tenga acceso a estas maquetas para que sepa exactamente cómo deben ser construidas estas páginas. Si es posible, envíe los archivos de diseño reales para que tengan la capacidad de comprobar los tamaños de fuente o colores específicos cuando sea necesario.

Animaciones y Estados de Diseño

¿Cómo deberían cambiar los enlaces o botones cuando se les pasa el cursor por encima? ¿Hay alguna animación sutil (O no tan sutil) que debería ocurrir en la página web? Asegúrate de que tu desarrollador esté al tanto de cualquiera de estos tipos de casos de uso. Además de hablar de todos los detalles especiales de un diseño, es una buena idea anotarlos también en las maquetas o wireframes. Esto asegura que estas piezas más pequeñas no se pierdan durante el desarrollo.

Copia

Si la copia final está escrita y lista para ser usada, tu desarrollador puede incorporarla en su construcción en lugar de usar texto de marcador de posición. Esto no sólo les ahorra tiempo más adelante al no tener que introducir la copia dos veces por página, sino que también les da la oportunidad de ver cómo encaja el contenido en el diseño. Si la copia final está en la página, es más fácil probarla y detectar cualquier error o problema de diseño desde el principio.

Imágenes

También es importante dar a tu desarrollador todos los activos necesarios con antelación. Se trata de cosas como imágenes de banners, imágenes de productos, iconos, logotipos o vídeos.

CTA

Las llamadas a la acción y otros enlaces pueden añadirse al copiado o a la maqueta de tu sitio web. Sólo tenga en cuenta que es necesario incluir una CTA, junto con el lugar al que debe enlazarse. El desarrollador podrá configurarlos mientras construye o prepara una página, asegurándose de que estos elementos serán funcionales cuando la página se ponga en marcha.

Hay una serie de otras cosas que podrían ser útiles para tu desarrollador específico, pero esperamos que esta lista te proporcione un buen punto de partida. Al final, nada es más importante que asegurarse de que tu desarrollador sepa que si le falta algo, todo lo que tiene que hacer es preguntar.