Conceptos de desarrollo web que todos los diseñadores web deben entender

Hay mucho que decir sobre La brecha encontrada entre diseñadores y desarrolladores.. Por supuesto, hay muchos híbridos de diseñadores / desarrolladores que pueden entender los dos lados de la moneda, pero son pocos y distantes entre sí.

Los proyectos creativos prosperan en comunicación adecuada. Sin embargo, esto puede ser difícil cuando los diseñadores y desarrolladores no están seguros de cómo hablar unos con otros. No creo que los diseñadores deban saber cómo escribir JavaScript correctamente, ni los desarrolladores deben dominar la selección de tipografía. Pero hay algunos temas fundamentales que creo que van en ambos sentidos.

Los siguientes temas son mi propia opinión personal sobre Ideas vitales de desarrollo web que todos los diseñadores deben entender.. Como diseñador / desarrollador, sé lo confuso que puede ser estudiar ambas áreas. Pero siempre vale la pena el esfuerzo de aprender porque una comprensión clara mejora la comunicación y hace que un diseñador sea mucho más valioso para un equipo creativo..

Código de Frontend Behavior

A menudo se piensa que los diseñadores web tienen habilidades de frontend junto con sus talentos de diseño. Este es un tema muy debatido, sobre todo porque hay no hay respuesta correcta.

Los diseñadores deben hacer lo que se sienten cómodos con. Si eso significa solo hacer trabajo de diseño visual, que así sea. Sin embargo, una breve comprensión de las tecnologías frontales puede hacer que el mismo diseñador mas intuitivo Al crear activos para desarrolladores..

Creo que todos los diseñadores deberían al menos entender el Tres lenguajes fundamentales del desarrollo frontend. (HTML, CSS y JS) junto con la forma en que se utilizan. Por ejemplo, la mayoría de los menús desplegables se basan en JavaScript, pero también hay alternativas solo para CSS.

Cuando un diseñador está creando un menú desplegable, pueden pensar en el La complejidad de implementarlo vía código.. Un diseñador que entiende qué elementos requieren JavaScript puede estar mejor preparado para entender lo que están pidiendo a los desarrolladores que construyan.

Esto es posible Sin aprender a escribir una sola línea de código..

CSS está hecho para estilo del sitio web. Es mayormente estático aparte de la animación CSS, y CSS crea la mayoría de los visuales en una pagina. Las características más dinámicas se crean con JavaScript.

Si puede comprender esta brecha, respirará un esfuerzo consciente en el trabajo de diseño. También obligará a los diseñadores de movimiento de UX a considerar cuánto trabajo se dedica a animar una interfaz.

Técnicas de respuesta

Todo diseñador web debería al menos conocer el término. diseño de respuesta. Esto permite a los sitios web adaptarse a diferentes tamaños de pantalla, a cada uno de los cuales pertenece un diseño diferente. Las dimensiones del dispositivo cuando se aplica un nuevo diseño son definido por puntos de interrupción, añadido en (uno de) el (los) archivo (s) CSS.

Los puntos de interrupción están especificados por cierto ancho de píxel (y / o a veces altura), ya sea mínimo o máximo, en el que el diseño se adapta para ajustarse a ese tamaño de pantalla. Por lo tanto, un diseño sensible se verá diferente en un monitor de 1080px que en un teléfono inteligente de 320px.

Para ver cómo funcionan los puntos de interrupción en sitios reales, visite el sitio web de Media Queries.

Su trabajo como diseñador es considerar cómo cada punto de ruptura podría influenciar la maqueta. Usted puede encargarse de diseñar varios comps, cada uno encajando en diferentes dimensiones de pantalla.

Una vez que haya comprendido que un punto de ruptura de CSS define las condiciones cuando cambia el diseño, le será mucho más fácil entregar estos activos al equipo de desarrollo..

Think Modular Con Diseños

Los desarrolladores siempre quieren reutilizar código Tanto como sea posible, ya que este enfoque hace que el desarrollo menos detallado y reduce el tamaño de los archivos - de hecho es una técnica importante de optimización de código.

Diseño modular describe un método para crear sitios web a partir de “módulos” eso puede ser reutilizado con el tiempo. Piensa en botones, entradas de formulario, estilos de encabezado o blockquotes con estilos elegantes.

Si tu elementos de diseño modular, Se vuelve más fácil para los desarrolladores codificar el diseño con clases de CSS reutilizables. Siempre es una buena idea pensar dónde puedes reutilizar razonablemente Los mismos colores, texturas y elementos de página, sin embargo, debe ser inteligente al respecto No dañar la estética general..

Es aun mejor si tu anotar qué elementos ha copiado en diferentes maquetas, para que los desarrolladores puedan Marque estas partes del sitio con el código de repetición - Haciendo el desarrollo más rápido y sencillo.

El diseño modular se refiere a diseño atómico, Ambos enfoques están más bien orientados hacia los desarrolladores. sin embargo visualización puede ayudarlo a comprender cómo funciona el código, por lo que si está luchando por visualizar diseño modular Echa un vistazo a esta publicación para ver algunos ejemplos..

Comprender imágenes de retina y SVG

Por lo general, es tarea del diseñador preparar imágenes, capturar las fotos necesarias y diseñar iconos desde cero. Esto significa que los diseñadores son los únicos responsables de entregando los activos visuales que los desarrolladores eventualmente codifican en el diseño. Por eso es importante entender tamaños de retina y para pasar los activos apoyados por la retina a los desarrolladores junto con la maqueta final (es).

Recomendaría encarecidamente este post de Smashing Magazine si desea obtener más información sobre los flujos de trabajo de diseño de retina. Retinize It es una colección gratuita de acciones de Photoshop que pueden crear automáticamente versiones de retina de sus activos.

La mayoría de los diseñadores ya saben apoyar @ 2x imagenes, pero los dispositivos iPhone 6+ más nuevos tienen @ Resoluciones 3x. Sin embargo, algunos proyectos no se molestan con los tamaños de imagen @ 3x, así que hable con su líder de proyecto antes de finalizar cualquier activo.

Una última cosa a considerar es la avance de SVG En la red. Todos los navegadores modernos soportan SVG, que es un formato de imagen basado en vectores. Esto significa que los iconos SVG Escala automáticamente sin pérdida de calidad., por lo que no necesita recursos retina para gráficos SVG.

Sin embargo, no todos los equipos creativos están dispuestos a ir con SVG para el diseño web. Seguro que son compatibles con los navegadores, pero en algunos casos también pueden ser difíciles de implementar. Es por esto que la comunicación es vital para una exitosa relación diseñador / desarrollador..

Discuta las ventajas y desventajas de usar gráficos vectoriales y decida qué funciona mejor para cada proyecto. Con solo comprender estas características, podrá comunicarse claramente con los desarrolladores e incluso ayudarlos a codificar el diseño para el soporte de retina..

Entender la accesibilidad

Mejora progresiva y degradación elegante Hay dos formas diferentes de manejar el mismo problema: la accesibilidad. No todos los usuarios estarán en dispositivos o ejecutarán navegadores que admitan el 100% de las funciones dinámicas de un sitio web.

Estos usuarios todavía deben obtener una experiencia que funciona, y esto debe ser manejado con la codificación adecuada. Algunos lectores de pantalla pueden ignorar todos los códigos JavaScript y CSS, pero el sitio web todavía necesita funcionar.

Hace poco hice un post cubriendo mejora progresiva en detalle, ya que es mi método preferido de desarrollo. Mejora progresiva comienza con características muy básicas, luego trabaja hasta más “avanzado” caracteristicas.

Degradación elegante es el enfoque opuesto dónde todas las características principales están diseñadas primero, luego el desarrollador decide cómo manejar estas características si el usuario no admite JavaScript o CSS.

Es poco probable que a un diseñador le pidan hacer maquetas para cualquiera de estas situaciones. Pero es importante que los diseñadores entiendan estos términos y lo que significan, porque afecta el proceso de desarrollo. Esto es especialmente cierto para proyectos donde la accesibilidad es una gran preocupación.

Para concluir

He saltado algunos temas porque los considero opcionales.. Control de versiones, manejo de errores y animaciones de JavaScript. son algunos temas más complejos que los diseñadores pueden querer profundizar en.

Pero, sinceramente, los puntos abordados en esta publicación van más allá de ayudar a los diseñadores a comprender los requisitos de un equipo de desarrollo. Simplemente rozando la superficie del desarrollo web podrás obtener visión Eso le ayudará a comunicar ideas y simpatizar con los problemas que ocurren durante la producción..

Si está buscando más contenido relacionado, eche un vistazo a estas publicaciones:

• Cómo comunicarse efectivamente con los desarrolladores (smashingmagazine.com)
• Ayude a los diseñadores y desarrolladores a aprender a entenderse unos a otros (uie.com)
• Aprender a codificar te da ventajas como diseñador de UX (jessicaivins.net)