El diseñador de interfaces y el desarrollador frontend son especialistas diferentes, pero sus tareas están estrechamente relacionadas. Tanto es así que los diseñadores inteligentes entienden los conceptos básicos del diseño y los programadores conocen los principios del buen diseño. Esto ayuda a evitar malentendidos y obtener el resultado esperado. Detalles dice Vladimir Sinitsyn, jefe de
Diseño y UX en Netología.
Hola Aquí hay dos razones principales por las que los desarrolladores front-end necesitan conocer los conceptos básicos del diseño.
El primer motivo. Frontend y diseñador resuelven un problema común
El diseñador realiza el diseño, y el desarrollador front-end lo convierte en una interfaz de sitio completa. Se obtiene un producto de alta calidad cuando ambos especialistas comprenden la esencia del trabajo del otro.
- El diseñador debe comprender los conceptos básicos de diseño y CMS (si hace un diseño para el sistema de control). Esto permite definir mejor las limitaciones técnicas y lo difícil que será para el front-end implementar la idea.
- El desarrollador debe comprender correctamente la lógica y la estructura del diseño, averiguar qué y cómo funciona, cómo se muestra la animación, cómo se produce la interacción entre los elementos de la página. Porque las ideas de los diseñadores no siempre son obvias a primera vista.
Los diseñadores a menudo piensan que es inusual y encuentran soluciones innovadoras para la interfaz web del sitio. Es más fácil para un desarrollador front-end comprender la lógica del diseñador, comprender el flujo de sus pensamientos.
Los sistemas de colaboración con diseños no siempre simplifican el trabajo. Ahora los sistemas para crear diseños están tan desarrollados que el diseñador puede transmitir al front-end toda la información necesaria sin reuniones y discusiones personales, simplemente organizando el trabajo conjunto en el programa. Por un lado, esto ahorra tiempo al equipo. Por otro lado, el desarrollador necesita comprender la idea del colega y descubrir cómo funciona el diseño del diseño. De lo contrario, no se pueden evitar largas discusiones y mejoras.
Cómo establecer la interacción entre un diseñador y un desarrollador: reglas básicas
Daré algunos consejos de la experiencia personal sobre cómo establecer la cooperación y hacer que el trabajo en equipo sea cómodo.
Si es diseñador y prepara un diseño, intente simplificar el trabajo del desarrollador front-end:
- Trabaja en la cuadrícula. Sí, la asimetría como técnica ahora se está volviendo popular, pero también debe inscribirse en la cuadrícula.
- Escriba objetos tanto como sea posible en el diseño. Escribir facilita y acelera el diseño.
- Mostrar los estados de los objetos en la interacción.
- Ordenar las capas y nombrarlas con nombres amigables. Por ejemplo, la capa de encabezado es encabezado, la capa de botones es botones. Por lo tanto, el desarrollador descubrirá rápidamente su diseño.
- Reúna todas las imágenes, íconos, fuentes y otros elementos en un solo lugar para no perder el tiempo y luego exportar elementos del diseño.
- Cree un kit de IU en una página separada y muestre todos los estados y elementos.
- No seas demasiado flojo para comentar el diseño del prototipo antes de pasarlo al proveedor de servicios de fondo, de esta manera un colega lo resolverá más rápido.
Si es un proveedor front-end y convierte el diseño en una interfaz de sitio web:
- No dude en hacerle una pregunta al diseñador si algo no está claro.
- Si ve por experiencia que necesita hacer cambios en el diseño, primero analícelos con el diseñador. Cualquier cambio debe ser acordado.
- Si el proyecto es un proyecto de equipo, en la primera etapa del trabajo, discuta con sus colegas qué herramientas planea usar y cuál es la mejor manera de transferirle el diseño.
- No tenga miedo de discutir el diseño y dar comentarios constructivos. Si ve que algo no se puede realizar, explique por qué y qué se puede reemplazar.
Cuando cada miembro del equipo comprende lo que están haciendo sus colegas y cómo simplificar sus tareas, el trabajo transcurre sin problemas. El resultado es una interfaz de calidad, entregada a tiempo.
El segundo motivo. Es más fácil para un desarrollador que conoce el diseño encontrar trabajo
Un desarrollador con un buen conocimiento del diseño puede convertirse en un especialista universal y cerrar dos puestos a la vez.
Donde los diseñadores de front-end están en demanda
Las grandes empresas están dispuestas a pagar a dos especialistas separados: un desarrollador y un diseñador. En otros segmentos del mercado, la situación es diferente: a menudo las empresas prefieren contratar especialistas universales que solo puedan cerrar un gran grupo de tareas.
Los creadores de sitios ahora son populares y la mayoría de los sistemas CMS funcionan como constructores. Con su ayuda, un programador puede hacer una interfaz simple, pero para crear un diseño de calidad, aún necesita las habilidades de un diseñador. Los diseñadores utilizan masivamente pequeñas empresas y clientes privados. Es más rentable para ellos contratar a un especialista universal que hará el diseño y lo convertirá en una interfaz con o sin un constructor. Una situación similar es con freelance.
Qué aprender primero sobre diseño si eres un desarrollador front-end
Inmediatamente recuerdo una buena
ilustración de los 20 principios básicos de diseño. Te aconsejo que comiences a bucear con ella.

En la siguiente etapa, comprenda en la práctica las herramientas de creación de interfaz: Figma, Adobe XD o Sketch. Lea, mire las reseñas de cada uno y elija cuál está más cerca de usted. Lo principal no se limita a los manuales. Míralos e inmediatamente practica tus habilidades en la práctica, directamente en la herramienta.
En el futuro, recomiendo comprender 3D: los programas Cinema 4D y Adobe Dimension; y animaciones de interfaz: ProtoPie y Adobe After Effect.
Donde estudiar
En la universidad No recomendaré universidades, dan mucho más para un comienzo rápido, y la capacitación en sí misma se extiende. Si esta es tu primera educación, entonces puedes ir a la universidad por un diploma. Aquellos que ya tienen una educación deben mirar hacia las intensidades (se les enseña incluso en algunas universidades) o cursos en línea.
Independientemente La autoeducación es adecuada para aquellos que saben cómo filtrar y estructurar información, tienen perseverancia y autodisciplina. Ahora en el dominio público hay demasiada información no siempre verificada y útil, en ella puedes confundirte y alejarte aún más de las habilidades necesarias.
En cursos en línea. Una opción para aquellos que se preocupan por obtener información estructurada, instrucción y comentarios de los maestros.
Consejos
- Aprenda los conceptos básicos del diseño para comprender mejor los diseños y convertirlos en interfaces sin mucha discusión y refinamiento.
- Estudie el diseño en profundidad para convertirse en un especialista universal y postule a puestos no solo en grandes empresas, sino también en agencias digitales, nuevas empresas y busque clientes por cuenta propia.
- Domina las herramientas del diseñador no por el manual, sino manualmente: abre el programa y entiéndelo.
- Si está listo para filtrar información y encontrar materiales de capacitación útiles en Internet, aprenda a diseñar usted mismo. Si desea acelerar el proceso y estudiar en un programa estructurado y relevante, elija los cursos.
Si está listo para aprender los conceptos básicos del diseño web, lo invitamos a un nuevo curso de Netología.
Lanzamos el curso "
Diseño web de cero a medio " e invitamos a los desarrolladores front-end que desean dominar la interfaz "desde el punto de vista del diseñador".
Cuatro meses y medio de capacitación en formato de video, talleres y análisis de tareas. Consolidamos la teoría con la práctica, y también dominamos las principales herramientas de un diseñador web.
