¿Los diseñadores web necesitan saber cómo codificar?

Como desarrollador web, arquitecto front-end y back-end, trabajo con muchos diseñadores diferentes y, a veces, me resulta frustrante trabajar con composiciones de diseño en las que no se pensó cómo realizar el diseño en CSS y HTML básicos. Por otro lado, como desarrollador, se espera que pueda producir código a partir de cualquier diseño.

¿Los diseñadores web necesitan conocer técnicas básicas modernas de CSS y HTML? ¿Por qué o por qué no es esto importante para un diseñador web completo?

Algunos pensamientos generales:

• Los desarrolladores web front-end deben tener la habilidad suficiente para codificar cualquier diseño.
• Los diseñadores web deben comprender cómo los usuarios realmente interactuarán con su diseño.
• Las tiendas de diseño prefieren que los diseñadores diseñen y dejen toda la codificación a los desarrolladores.

¿Los diseñadores web necesitan conocer técnicas básicas modernas de CSS y HTML?

Sí.

¿Por qué o por qué no es esto importante para un diseñador web completo?

Respondí "sí" porque usaste la palabra básico .

Es absolutamente esencial que los diseñadores web conozcan técnicas básicas de HTML y CSS, de la misma manera que los arquitectos deben saber algo sobre física y ciencia de materiales, los diseñadores de impresión deben saber algo sobre el proceso de impresión CMYK y los diseñadores de moda deben saber algo sobre tela.

Si no sabe nada acerca de las técnicas CSS y HTML, no puede llamarse a sí mismo un "diseñador web". Eres simplemente un artista o algo así.

Comentarios sobre tus pensamientos:

Los desarrolladores web front-end deben tener la habilidad suficiente para codificar cualquier diseño.

Falso. Esto es una simplificación excesiva. Algunas cosas no se traducen bien a la web. Algunos diseños pueden desmoronarse o no funcionar en una determinada plataforma o tamaño de pantalla que debe ser compatible.

Un diseñador web necesita conocer las limitaciones según la audiencia y los requisitos de rendimiento. Un diseñador que conoce CSS y HTML sabe cómo modificar el diseño para que el código subyacente se pueda hacer lo más receptivo y eficiente posible.

Los diseñadores web deben comprender cómo los usuarios realmente interactuarán con su diseño.

Describió UX Design , que es una disciplina completamente diferente. Aunque el diseño de la experiencia del usuario involucra aspectos del diseño gráfico, realmente tiene muy poco que ver con CSS o HTML.

Si bien los buenos diseñadores web completos deben estar familiarizados con UX Design, también es común que colaboren con especialistas en UX.

Las tiendas de diseño prefieren que los diseñadores diseñen y dejen toda la codificación a los desarrolladores.

Esto podría ser parcialmente cierto, pero no del todo. Un paradigma popular en los sistemas de gestión de contenido es MVC (modelo / vista / controlador). Muchas tiendas de diseño quieren que los diseñadores estén familiarizados con la codificación HTML / CSS para que puedan centrarse en la presentación del contenido (la "vista"), mientras que los desarrolladores se centran en el modelo / controlador.

Esto no quiere decir que algunas tiendas no emplean artistas gráficos que simplemente se centran en elementos gráficos y empujan píxeles, pero en mi opinión, no son diseñadores web. Un sitio web grande puede emplear artistas gráficos, diseñadores web, diseñadores UX, desarrolladores web y especialistas en bases de datos que colaboran para producir un sitio web terminado. Un profesional independiente que construye sitios más pequeños podría incursionar en todas las disciplinas y llamarse a sí mismo Diseñador / Desarrollador Web.

Un diseñador web debe comprender cómo funciona el código y de lo que es capaz, de la misma manera que un diseñador de impresión comprende cómo se verá la tinta en el papel y cómo se puede doblar o cortar el papel. Cualquier diseñador debe comprender las limitaciones y fortalezas del medio elegido.

Si un diseñador web está creando este magnífico sitio, sería conveniente que aprenda los conceptos básicos de la codificación o que se siente con un codificador en algunos puntos del proceso para verificar que se puede lograr el sitio magnífico. Entonces diría que un diseñador web como mínimo necesita saber sobre el código.

Creo que es engañoso decir "un desarrollador puede codificar cualquier cosa", de la misma manera que no se puede decir que todo lo que se puede imprimir se puede reproducir exactamente en la web usando HTML / CSS.

Lauren, ghoppe y Farray hablan con calma, así que no voy a repetir nada de lo que dijeron. Como cuestión práctica, permítanme ofrecerles otra versión de sus preguntas explícitas e implícitas.

El mejor enfoque para un desarrollador es el mismo con el que las impresoras han estado tocando el tambor desde que Gutenberg cortó su primer tipo: insista en que el diseñador lo involucre en el proyecto desde el principio. Deje en claro que debe participar en la discusión antes de que un solo píxel llegue a la pantalla.

Cuando estoy en un proyecto de diseño de impresión que involucra algo inusual, estoy en conversaciones con la impresora y la gente de la carpeta inmediatamente. Saben mucho más sobre su oficio que yo, así que me encargo de involucrarlos desde el principio. Desafortunadamente, los diseñadores principiantes, especialmente cuando acaban de salir de la escuela y aún no se han familiarizado con el mundo real, a veces descuidan ese simple paso y terminan en un profundo kimshee sin un salvavidas.

Haga campañas en blogs, foros, con clientes y gerentes de proyectos, con escuelas locales y grupos de usuarios y cualquier diseñador dentro del alcance: "¡Hable con su desarrollador antes de comenzar a diseñar!"

Un desarrollador obtendrá comps de diseñadores que no tienen idea de lo que están pidiendo, del mismo modo que los departamentos de preimpresión a veces obtienen obras de arte que no se pueden usar (y los diseñadores reciben informes que solo seguiría un masoquista). Pero puede evitar mucha frustración y pérdida de tiempo si insiste en un lugar en la mesa de planificación.

Si y no. Es importante saber cómo funciona su entorno de destino, pero no es realmente importante que comprenda el código específico requerido para que el sistema funcione de esa manera. En otras palabras: no me preocuparía la sintaxis específica para crear esquinas redondeadas en todos los motores de navegador principales, pero consideraría importante que comprenda si puede crear esquinas redondeadas en todos los navegadores principales (y cuánto código se requiere) para hacerlo).

Por ejemplo, hace solo unos años todavía estábamos cargados con IE6. Teníamos un diseño absolutamente hermoso para una aplicación de intranet corporativa, pero dependía mucho de superposiciones transparentes. IE6 podía mostrar PNG8s pero no respetaba el canal alfa en PNG24s, y para usar la opacidad basada en CSS se requerían filtros ActiveX y otros problemas. Se podrían saltar los aros para lograr el efecto deseado, pero cada aro representa un ciclo de desarrollo más largo, una mayor tasa de errores, un mantenimiento más difícil, etc. Además del costo directo en horas hombre de desarrollo y mantenimiento de este diseño (ahora problemático), también existía el costo de oportunidad de atar las horas del desarrollador parcheando una base de código kludgy en lugar de trabajar en la versión N + 1.

Cuando en este tipo de situaciones, se debe medir el costo / beneficio de cada efecto visual en un diseño:

• ¿Qué tan sorprendente es el efecto visual?
  ¿Se puede reemplazar con otro visual igualmente impactante que no requiera tantos recursos de construcción?

• ¿Se puede reproducir el efecto correctamente en el objetivo? Si su diseño original no puede ser recreado con precisión por el objetivo, su diseño debe ser reemplazado por la aproximación más cercana que esté disponible. (Afortunadamente, esto es cada vez menos un problema para los diseñadores web).

• ¿Cuánto tiempo tienes presupuestado?
  ¿Puede permitirse más horas hombre en construcción para lograr el efecto que desea? Si no, ¿puede rediseñar la función en menos tiempo?

• ¿Qué parte de la base de código tendría que ser refactorizada para acomodar su visual?
  Si Diseño y Construcción están ocurriendo simultáneamente, o si está redefiniendo una aplicación heredada, ¿qué tan difícil será para los codificadores incorporar su visual? No solo las horas involucradas para reescribir, sino las horas potenciales para depurar y mantener el código recién cambiado.

Hay cierta superposición entre los puntos anteriores y algunos otros puntos que no figuran en la lista. El punto es que, incluso en esta lista corta, hay costos comerciales que deben considerarse. Puede evaluar la situación de manera mucho más eficiente si tiene una idea de cómo funciona realmente el sistema de destino.

Si comprende las limitaciones de CSS o HTML antes de realizar su diseño, puede crear diseños que fluirán a través de la fase de Construcción sin problemas. También tendrá la confianza de que su diseño puede implementarse y el poder de conocer el costo aproximado. Esto siempre es útil para tener de tu lado.

En mi experiencia (soy un programador, no un diseñador), no es tanto una pregunta que el diseñador web debe saber sobre el código. Pero deben saber cómo se aplica su trabajo dentro de un navegador.

El mayor problema con los diseñadores sin suficiente conocimiento sobre los navegadores web es que crean diseños que se ven hermosos, pero que realmente no funcionan dentro del navegador. Solo un par de cosas que algunos pueden no haber considerado:

• Uso de fuentes. Utilizan fuentes instaladas con su PhotoShop, que el usuario promedio no tiene. O usan fuentes Mac, que no existen en Windows / Linux.
• Falta de respeto del tamaño de la pantalla / navegador. El diseño no debe mostrarse en computadoras más pequeñas. A medida que los portátiles / tabletas más pequeños se vuelven más populares, la necesidad de tener en cuenta tamaños de pantalla más pequeños se vuelve más importante.
• ¿Qué debería suceder cuando cambia el tamaño de la pantalla del navegador? ¿El diseñador ha tenido en cuenta lo que debería suceder con el diseño cuando se cambia el tamaño del navegador?
• ¿Qué pasa con las barras de desplazamiento? El diseño generalmente viene con marcadores de posición "lorem ipsum". ¿Qué pasa si una gran cantidad de texto entra en ese marcador de posición y necesitamos barras de desplazamiento, dónde debemos colocarlos?
• Muchas imagenes Algunos diseños requieren que recorte muchos png. Esto puede generar largos tiempos de respuesta del servidor web, ya que la página inicial requiere que el navegador descargue todos estos png.

Estos son los problemas que he visto al trabajar con diseñadores. Estos no son problemas acerca de que el diseñador no sepa nada sobre el código. Pero cuestiones sobre no pensar en cómo se usa el diseño.

Una comprensión más amplia del medio en el que uno trabaja siempre lo convierte en un mejor artista y artesano en ese ámbito.

Es difícil trabajar con muchos diseñadores web que no conocen el desarrollo front-end porque son malos diseñadores web, sino porque simplemente no son diseñadores web. Son diseñadores gráficos con algunos antecedentes de impresión y están tratando de crear folletos y carteles en lugar de sitios web reales.

Es como contratar a un paisajista para remodelar su baño. Tienen un sentido del diseño, y probablemente entiendan algunos de los fundamentos, pero lo más probable es que sean mucho mejores para paisajizar su jardín delantero que para embaldosar su ducha.

Hace una década, cuando la mayoría de los sitios web todavía se construían como líneas de ensamblaje de fábrica, no era tan importante que una persona hiciera el PSD, la siguiente persona hiciera el HTML y el siguiente agregara el DB, etc.

Pero en estos días, la construcción web más progresiva se realiza con un proceso ágil y los equipos son diversos con una gran cantidad de metodología de experiencia de usuario agregada, mejoras progresivas, sistemas integrados de back-end y front-end, conceptos como diseño web reactivo, etc. Como tal, gran parte del proceso de diseño tiene que suceder en el código . Ya se trate de creación de prototipos, pruebas de usuario, diseño iterativo o lo que sea, el código es el medio y el equipo necesita entenderlo.

No, no todos en el equipo necesitan poder escribir complementos jQuery. Pero el equipo al menos debe saber qué son y el Equipo UX / Web debe tener personas que puedan escribirlos, ya que, en última instancia, todo lo que se diseñe debe construirse.

Sí. Un artista debe entender el medio en el que está trabajando, ya sea un pintor con su óleo y lienzo, un escultor con su mármol y cincel, o un diseñador web con su HTML y CSS.

Solía ​​trabajar en la industria de los videojuegos. Los mejores diseñadores de juegos eran personas creativas con una fuerte inclinación técnica que entendían las limitaciones siempre cambiantes del medio y podían diseñarlo. Las personas que no pueden hacer esa extralimitación y la implementación diluida de su visión termina siendo una mierda.

Hace poco realicé un desarrollo web en el que la experiencia del diseñador era totalmente en medios impresos. El resultado fueron páginas bastante hermosas, que habrían sido fantásticas en impresión, pero funcionaron bastante mal como sitio web.

Para mí, la desconexión del diseñador / desarrollador es algo que sucedió hace años, pero luego la gente se dio cuenta de que el diseño web es mucho más que una simple maqueta.

Para mí, cuando alguien se llama diseñador web, espero:

a) They can design a layout either in a image editing program, or in the browser
b) Can articulate their design choices, and have sensible reasons
c) Proficient (as opposed to basic knowledge) with HTML, CSS, and JavaScript.
d) Basic knowledge of server side programming

Para mí, un diseñador web es alguien que puede crear el lado del cliente de un sitio.

Un buen diseñador web tendrá todo esto y comprenderá cómo las decisiones que toman durante el proceso de diseño afectan la experiencia de usuario del sitio.

Cuando alguien dice desarrollador web, espero:

a) Proficient with at least one server side programming language
b) Basic knowledge of server configurations
c) Basic knowledge of client side technology (JavaScript and AJAX implementations)
d) Basic knowledge of backend architecture

UNA buen desarrollador web tendrá todo esto y podrá comprender cómo las elecciones de arquitectura que haga influirán en el front-end del sitio y la funcionalidad expuesta a los usuarios.

También obtienes personas que se especializan en UX y otras áreas que son más horizontales que el diseño web, ya que se aplican a una serie de entornos de desarrollo diferentes.

editar: si alguien tiene un ejemplo de un buen grupo de diseño que separe el diseño gráfico del diseño web, estaría muy interesado.

Los diseñadores deben tener una idea de cómo funciona la codificación. A veces es la única forma de evitar que su desarrollador front-end se vuelva homicida . Para adquirir esa idea, la experiencia directa puede ser la forma más fácil.

Ciertamente hay otros, pero no puede perjudicar a su negocio aprender a programar un pequeño Javascript. (En realidad, los tiempos están cambiando y hay legiones de muchachos con habilidades de diseño que pueden salir de sus DOM, pero esa es una historia completamente diferente)

Mis pensamientos generales:

• Los desarrolladores web front-end tienen que lidiar con horribles backends y muchos niveles de idiosincrasias para molestarse con sus sutilezas de diseño. La mayoría de esas idiosincrasias son causadas por malas elecciones de backends prefabricados en la parte de administración y roban grandes cantidades de tiempo para tratar.

• Los diseñadores web que trabajan con personas tan estresadas arriesgan su vida constantemente. Y debería tomar en serio algunos de esos asuntos de front-end, en lugar de dejar caer el diseño sobre su mesa y salir corriendo gritando a la oficina "¡Ya terminé, ya terminé, de ahora en adelante todo es culpa del desarrollador! "

• Las tiendas de diseño deberían arder.

Depende de donde trabajas.

Si trabaja para una gran empresa, estos pueden ser roles individuales:

1. Especialista en UX o Arquitectura: planifica la arquitectura / organización de la información del sitio / hace tramas

2. Diseñador: diseña el sitio con Photoshop u otra herramienta

3. Desarrollador front-end: html / css / javascript / json / xml / etc. y escribe código de plantilla que integra el front-end con la parte posterior

4. Back End Developer: realiza la programación que hace que todo funcione de manera dinámica

La mayoría de los lugares de nivel medio requieren que el diseñador maneje las decisiones de UX también. Pero los lugares más pequeños pueden necesitar que el diseñador haga las 3 cosas anteriores. Sin embargo, el front end es un área complicada y hay personas de diferentes habilidades en él. Si usted es un diseñador que necesita hacer front-end, definitivamente no se debe esperar que sepa mucho más que HTML / CSS y JQuery o algún otro marco de trabajo. Esperar que un diseñador conozca los aspectos más profundos de javascript y la integración de back-end es pedir demasiado.

Por supuesto, si eres autónomo, debes saber y hacer todo tú mismo;)

Creo que los diseñadores web deberían saber HTML / CSS, incluso si solo se limitan a los fundamentos, en aras de poder crear diseños web e interfaces web que funcionen en el medio.

Los diseñadores web pueden optar por no escribir el HTML / CSS ellos mismos, pero saber cómo funciona el marcado y CSS es esencial para ser un diseñador web. Es posible que los diseñadores web no necesiten ser ninjas HTML / CSS, pero les sirve para saber (al menos) cómo se convierten sus composiciones de diseño web en un sitio web.

¿Los diseñadores web necesitan saber cómo codificar?

Sí, el diseñador web tiene que lidiar con software como Adobe Photoshop, Illustrator e InDesign para crear un diseño para la web. Luego, este diseño se ocupa de la codificación para hacerlo en línea. Y para eso, es muy importante que el diseñador web comprenda los componentes de su diseño para representarlos como una codificación. Para eso, deben tener el conocimiento de la codificación, no comprender completamente pero con lo básico.

Personalmente, todo depende de tus habilidades y requisitos. Habilidades para poder aprender y comprender cosas rápidamente. Los requisitos son las finanzas. Aprender algo necesitará tiempo, y eso mataría su productividad por el momento.

Entonces, si tiene mucho tiempo para matar, continúe y aprenda a codificar.

He sido diseñador durante los últimos cuatro años y soy bueno editando cosas básicas. Simplemente no tengo tiempo suficiente para aprender el código de manera profesional.