Consejos para mejorar la transferencia de diseño de su sitio web

En el proceso de construcción de un sitio web, se llevan a cabo algunas etapas. Si tuviéramos que simplificarlo y mirar un sitio web estándar, las etapas serían:

1. La necesidad : alguien necesita un sitio web por una razón u otra.
2. Lluvia de ideas : decidir la estructura general, los objetivos y más.
3. La propuesta : el cliente encuentra un profesional independiente o una agencia para construir el sitio.
4. Contenido : artículos, imágenes, etc., cualquier cosa que se pueda encontrar en las páginas de destino, mapas del sitio, etc.
5. Diseño : una persona / equipo trabaja en el diseño y el diseño en función del contenido.
6. Desarrollo : una persona / equipo desarrolla la parte funcional del sitio en función del diseño.

La mayoría de las veces, puedes mezclarlo aquí. Puede cambiar el orden de las cosas que se hacen y el equipo aún puede producir grandes resultados. Sin embargo, esto puede resultar complicado cuando hay personas de diferentes agencias trabajando en el mismo proyecto, que es el principal motivo para optar por una agencia integral que se encargue de todo.

Para este artículo, lo llevamos del paso 5, el Diseño, al paso 6, el Desarrollo. Aquí es donde las cosas pueden salir mal al ralentizar el desarrollo y estropear lo que se decidió previamente en el proceso de planificación.

Las cosas que un diseñador debe considerar

"¿Deberían los diseñadores saber cómo codificar?" es una pregunta común y muy razonable. Si un diseñador comprende el código subyacente e idealmente puede producirlo (hasta cierto punto), entonces puede ayudar a todo el equipo en su impulso para completar el proyecto más rápido.

Aquí hay algunas razones por las que este es el caso:

1 - Al final, todo acaba en el navegador.

Cualquier diseño que cree en Figma, Adobe, etc. se mostrará en el navegador. Todos los navegadores utilizan un tipo de lenguaje de programación conocido como HTML / CSS para representar una página. Si se utiliza Javascript, puede hacer que sus diseños se vuelvan interactivos.

La nota importante que se debe tomar de esto es que cualquier diseño debe ser factible en HTML / CSS. Muchos desarrolladores de front-end con talento pueden implementar casi cualquier cosa siempre que la tecnología lo permita. Pero recuerde, no siempre se trata de "¿Puedes hacerlo?", Se trata de "¿Puedes hacerlo bien y hacerlo fácil de mantener?".

2 - Coherencia

Ser mantenible es el secreto de un proyecto exitoso. No querrá pasar horas y horas modificando los elementos existentes del sitio y agregando otros nuevos porque el código base es un desastre. A veces, los diseños extremadamente complejos con pocos componentes reutilizables o ninguno terminan en un lío.

Algunos consejos para diseñadores web:

• Diseñe teniendo en cuenta los componentes. La mayoría de las herramientas ahora ofrecen esta funcionalidad (Figma, Adobe XD, Sketch). Oblígate a usarlos con más frecuencia hasta que ya no te resulte molesto hacerlo.
• Alinee bien los elementos. Las secciones similares deben tener la misma distancia entre sí. 80px es una buena separación para mantener, por ejemplo. No espacie las secciones al azar usando 80 aquí, 86 allá, 92 en un tercio y 78 en el otro. Mantenlo limpio y ordenado.
• ¡Usa una cuadrícula! Todas las herramientas proporcionan un sistema de rejilla. Lo ideal es optar por una cuadrícula de 12 columnas.
• Muestre su diseño en pantallas anchas (1920px o más). Esto ayuda a los desarrolladores a descubrir cómo funciona cada sección y sus antecedentes.

3 - Peso del sitio

Todos queremos un sitio web rápido, ¿verdad? Bueno, el diseñador también es parte de esto. Considere esto: un sitio web con 8 imágenes enormes de alta resolución, cuatro videos y elementos animados. . Buena suerte optimizando esto a tiempo. Si bien es factible, se necesitarán técnicas y tiempo de desarrollo adicionales para cargar imágenes y videos de forma diferida, optimizar los medios en la carga, admitir mejores formatos de archivo de imagen y agregar enfoques de animación inteligente para un alto rendimiento.

Si los desarrolladores no tienen mucha experiencia o no están preocupados por la velocidad, su sitio web podría terminar muy lento en teléfonos inteligentes y computadoras portátiles de nivel bajo a medio.

¿Cómo ayudar a los desarrolladores?

Como diseñador, uno de sus objetivos a tener en cuenta es hacer que el desarrollo sea más fácil y rápido mientras se mantiene la apariencia del sitio.

Debe considerar lo que se puede hacer fácilmente en la web.

• Cajas: son todas las cajas. Puede redondear algunas esquinas, sí, puede hacer elipses (que se definen en un cuadro) y más. Sin embargo, cuando opta por formas más complejas que interactúan con el diseño, las cosas se vuelven difíciles.
• Animar una posición precisa es difícil. ¿Imagina que quieres hacer clic en una imagen y luego moverla al otro lado del texto? Suena “fácil” pero no lo es. La posición a la que se moverá la imagen debe permanecer en relación con el contenedor del sitio, que cambia según la ventana gráfica y más. ¿Y luego qué pasa si la imagen es más grande?
• La animación de las dimensiones del cuadro afecta el diseño. Esto se refiere a cualquier cambio en cómo se ordenan los elementos durante una animación. Esto puede ser extremadamente pesado para el navegador y, a menudo, dará como resultado un gran retraso.

¡Considere contenido diferente!

¿Cómo se vería el diseño con 2 veces el texto? ¿O como una imagen de retrato en lugar de una imagen de paisaje? Nunca se sabe lo que subirá el equipo editorial. ¿Debería haber restricciones como la relación de aspecto o incluso los bordes de las imágenes? Si puede, muestre esto en el diseño.

Proporcione sus diseños en herramientas como Zeplin

La mayoría de las herramientas de diseño como Figma o Adobe XD tienen una forma de "compartir" diseños con los desarrolladores. A partir de ahí, el equipo de front-end puede inspeccionar los colores, la configuración de la tipografía, los espacios y otras propiedades visuales de las capas, lo que les permitiría adherirse muy de cerca a los diseños.

Proporcione otros activos como fuentes o videos

Si ha utilizado una fuente específica en el sitio, entréguesela a los desarrolladores. Si tiene licencia y es accesible a través de URL específicas, asegúrese de compartirlo también. Es importante que un desarrollador trabaje con las fuentes correctas desde el primer día. Si hay videos, ¡asegúrese de compartirlos también! ¿Los videos estarían en YouTube, Vimeo o auto-alojados?

No opte por "píxeles perfectos"

Esta noción de mantener el aspecto final del sitio perfectamente igual que el diseño es una manera fácil de hacer que su equipo de desarrolladores lo odie y pueda destruir cualquier posibilidad de que se publique a tiempo. En casi todos los casos, el diseño NO será perfecto. ¿Es imposible estar 100% seguro de que antes de cada botón tienes exactamente un espacio de 18 píxeles? ¿Y no 19px? ¿O que todos los títulos tienen 38 píxeles y no 37 píxeles? ¿O tal vez que cada borde es #ddd y que no hay uno que sea negro pero tenga un 15% de opacidad?

Los desarrolladores resuelven pequeños errores como estos aquí y allá para mantener la coherencia en todo el sitio. Construyen componentes que siguen las mismas reglas. Siempre que no haya un cambio obviamente intencional en un caso específico, no debería haber una razón por la que un elemento no pueda ser el mismo en todos los ámbitos.

Al final, el sitio web codificado debe seguir el aspecto general del diseño.

Deja comentarios en el diseño

Si desea que un determinado elemento sea interactivo, como pestañas, acordeones, controles deslizantes y similares, tómese unos segundos para escribir cómo debería funcionar en el escritorio, el dispositivo móvil y en qué se puede hacer clic, si se cambia.

Piensa como un usuario

Cuando haya terminado, deténgase por un segundo e imagine que está utilizando el sitio. Lea desde arriba, desplácese hacia abajo, haga clic en algún lugar para ver más. ¿Hay algo que pueda faltar en el flujo de trabajo? ¿Existe una vista de cierto elemento que cambia en la interacción del usuario? Si eso es cierto y no hay un diseño, entonces deja que sus desarrolladores lo resuelvan, lo que agrega estrés al trabajo. Si los plazos son ajustados, puede compartir los archivos generales con su equipo y hacerles saber que un Próximamente hay pocas vistas de “estado” (asegúrese de mencionar cuáles son).

Vistas receptivas

Es abrumador diseñar 15 páginas en el escritorio y luego hacer una versión móvil. Es aún más molesto hacer una versión de tableta ligeramente diferente además de eso. Es por eso que algunos diseñadores ignoran agregarlo. Sin embargo, eso significa que los desarrolladores tendrán que hacerlo en código. Y tomar decisiones por ello. Si ve elementos complicados, lo ideal es mostrar sus vistas de tableta incluso si no hace todo el sitio.

En resumen

El diseñador puede hacer de la vida del desarrollador una pesadilla o una muy buena experiencia. La clave para lograr esto último es comprender mejor la tecnología que se está utilizando, HTMl / CSS, qué elementos interactivos son factibles, etc.

Si tienes la suerte de estar rodeado de desarrolladores y te preocupan ciertos elementos, llámalos para que le echen un vistazo a todo. Definitivamente le darán indicaciones sobre qué es complicado y qué es fácil.