Cómo construir sitios web de manera más eficiente

Nuestro desarrollador principal comparte sus consejos para prepararse para crear un sitio web de manera eficiente y evitar la sobrecarga del proyecto.

Como en cualquier proyecto, la preparación es la clave del éxito. A continuación, comparto algunos de los procesos clave que utilizamos para garantizar la entrega exitosa del proyecto.

Inicio del desarrollo

Antes de sumergirse directamente en la codificación de cualquier sitio web nuevo, es una buena idea sentarse de 30 a 60 minutos con el equipo de desarrollo para hacer un plan. Idealmente, el propietario del producto debería estar presente en la reunión para responder cualquier pregunta que pueda tener. Probablemente habrán estado en todas las reuniones con los clientes y tendrán un conocimiento más profundo que nadie sobre lo que el sitio debería lograr en términos de recorridos de usuario y funcionalidad.

Con suerte, habrá visto los diseños de antemano. Es una buena idea utilizar esta sesión para identificar cualquier problema que vea y discutir con el equipo cómo resolverlo. Por ejemplo, si el diseñador ha optado por un menú desplegable fuera del lienzo desde la última iteración, podría discutir cómo lo construiría. Es posible que encuentre a alguien en el equipo que haya construido uno antes, para que pueda asumir el trabajo.

Imprime los diseños

Esto va de la mano con el inicio del desarrollo, pero esta etapa solo debería involucrar al equipo de desarrollo de front-end.

Creo que este es un buen paso antes de embarcarse en la construcción del sitio porque las impresiones se pueden distribuir para obtener una visión más clara del panorama general. No puede hacer esto fácilmente usando aplicaciones como Sketch, Photoshop o Invision. Tendría que alejarse hasta ahora para ver todos los diseños, o es posible que solo pueda ver una plantilla de página por ventana del navegador.

Ver una página web en forma táctil también puede brindarle una perspectiva diferente y ayudarlo a concentrarse en elementos que de otro modo podría perderse. También es útil poder hacer anotaciones.

Aquí en Hallam, tendemos a anotar nuestras impresiones, luego las usamos para ayudar a dividir la carga de trabajo y pegarlas en una pizarra. Luego nos referimos a ellos durante las reuniones posteriores a lo largo del proceso de construcción. Una vez que se ha creado y firmado una plantilla, se quita de la pizarra, lo que nos da una visión clara de lo que nos queda por construir.

Obviamente, todos deberíamos minimizar la cantidad de impresiones que hacemos, ¡así que asegúrese de usar una papelera de reciclaje una vez que haya terminado con los diseños!

Identificar elementos comunes

Uno de los principios que hemos adoptado aquí en Hallam es que cada diseño que creamos no debe estar hecho de plantillas completamente personalizadas. En su lugar, deben compartir elementos de diseño comunes que se puedan construir por separado y luego insertar en las plantillas donde se necesiten.

No estoy diciendo que las plantillas de página no deban tener elementos personalizados, pero esto solo debería ser el caso cuando sea necesario. Por ejemplo, un sitio web con una página de Capacitación para entrevistas de radio y una página de Capacitación para entrevistas en televisión no necesita dos plantillas cuando ambas son esencialmente páginas de “plantillas de capacitación”.

Los elementos comunes también crean una mejor experiencia de usuario porque las personas no son bombardeadas con cosas nuevas para descubrir en todo momento.

Una vez que haya elaborado todos los elementos principales del sitio, puede escribirlos en una pizarra, crear tickets y asignarlos a los distintos miembros del equipo. Luego, cuando empiece a juntar las páginas, puede simplemente “encajar” en las distintas partes en las plantillas y crearlas mucho más rápidamente.

¿Construir primero o diseñar y construir juntos?

Esto es algo con lo que hemos experimentado en el pasado y en este momento construimos y diseñamos plantillas al mismo tiempo.

En el pasado, solíamos construir todas las estructuras y elementos de la plantilla de página sin usar ningún CSS (salvo los estilos de diseño asociados con Bootstrap o Foundation). Luego, una vez que teníamos todo el sitio construido, revisábamos y diseñábamos todas las plantillas y elementos. Este método ciertamente tiene sentido desde el punto de vista de la línea de producción. No pintarías la carrocería de un coche antes de montarlo en el chasis, insertar el motor y colocar todos los accesorios. Con este método, separa la función del estilo. En la fase de construcción inicial, le interesa asegurarse de que el sitio funcione desde un punto de vista funcional antes de considerar su apariencia.

En cambio, hemos cambiado al campo de "diseño y construcción" para poder crear un producto que se pueda enviar. En otras palabras, podríamos publicarlo en cualquier momento porque el sitio funciona y se ve bien. En efecto, con el método "diseñar y construir" usted todavía construye la plantilla sin estilo, pero tan pronto como haya terminado de diseñarla, la revisará y le dará estilo. No lo estacionas a un lado y sigues construyendo la siguiente plantilla.

El fregadero de cocina básico

Aquí hay algo que encajaría con el método de "diseñar y construir". Implica diseñar algunos elementos, como la tipografía, agregar los colores de la marca del sitio y quizás agregar los estilos de los botones al archivo maestro settings.scss. Es sorprendente lo que el estilo de estos elementos puede hacer en un sitio de inmediato. Inmediatamente tiene un sitio web que ya no parece un sitio estándar de la Fundación y obtiene una sensación real de progreso simplemente dedicando quizás 30 minutos a escribir algunas reglas CSS.

Enmarcar el sitio

Mi preferencia personal es diseñar el encabezado y el pie de página desde el principio porque ayuda a enmarcar el sitio y crear un lienzo para seguir diseñando y construyendo el sitio. Hace que el sitio se parezca más al producto terminado. Sin embargo, un sitio que se puede enviar puede tener una navegación y un pie de página sin estilo pero que funcionan.

Conclusión

Todos tenemos nuestras propias ideas sobre cómo llevar el diseño de un sitio web de Photoshop al proceso de construcción y resulta que lo anterior es la forma en que nos gusta hacer las cosas.

Sin embargo, una cosa que realmente creo que es vital es hacer un plan antes de abrir su entorno de desarrollo. Ya sea que sea un profesional independiente que trabaja solo o que forme parte de un gran equipo de desarrollo, hacer un plan es una forma segura de trabajar de manera más eficaz y rápida.

Si necesita ayuda con su desarrollo web, no dude en contactarnos.