Como desarrollador web, arquitecto tanto front-end como 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ó en cómo lograr 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 modernas básicas de CSS y HTML? ¿Por qué o por qué no es esto importante para un diseñador web completo?
Algunos pensamientos generales:
¿Los diseñadores web necesitan conocer técnicas modernas básicas 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 las técnicas básicas de HTML y CSS, de la misma manera que los arquitectos deben saber algo sobre física y ciencia de los 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 telas.
Si no sabes nada sobre las técnicas de CSS y HTML, no puedes llamarte "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. Esta es una simplificación excesiva. Algunas cosas no se traducen bien en 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 interactuarán realmente con su diseño.
Has descrito el Diseño UX , que es una disciplina completamente diferente. Aunque el diseño de la experiencia del usuario involucra aspectos del diseño gráfico, en realidad tiene muy poco que ver con CSS o HTML.
Si bien los buenos diseñadores web deben estar familiarizados con el diseño de UX, 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 en manos de los desarrolladores.
Esto puede 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 concentrarse en la presentación del contenido (la "vista"), mientras que los desarrolladores se concentran en el modelo/controlador.
Esto no quiere decir que algunas tiendas no emplean artistas gráficos que simplemente se enfocan en los elementos gráficos y empujan los 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 de UX, desarrolladores web y especialistas en bases de datos que colaboran para producir un sitio web terminado. Un profesional independiente que crea sitios más pequeños puede incursionar en todas las disciplinas y llamarse a sí mismo diseñador/desarrollador web.
Un diseñador web debe entender cómo funciona el código y de lo que es capaz, de la misma manera que un diseñador de impresión entiende 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 hermoso sitio, le convendría aprender los conceptos básicos de la codificación o sentarse con un codificador en algunos puntos del proceso para verificar que se puede lograr el sitio de la belleza. Así que diría que un diseñador web como mínimo necesita saber sobre código.
Creo que es engañoso decir que "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 en voz baja, así que no repetiré nada de lo que dijeron. Como cuestión de practicidad, permítame ofrecerle otra versión de sus preguntas explícitas e implícitas.
El mejor enfoque para un desarrollador es el mismo que los impresores han estado haciendo sonar 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 imprenta y la gente de encuadernación de inmediato. Ellos saben mucho más sobre su oficio que yo, así que hago que mi negocio sea 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.
Campaña en blogs, foros, con clientes y directores 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á composiciones de diseñadores que no tienen ni idea de lo que están pidiendo, al igual que los departamentos de preimpresión a veces obtienen obras de arte que no se pueden usar (y los diseñadores obtienen resúmenes que solo un masoquista seguiría). 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 necesario 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 principales motores de navegador, pero consideraría importante que comprenda si puede o no crear esquinas redondeadas en todos los principales navegadores (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 en gran medida de superposiciones transparentes. IE6 podía mostrar PNG8 pero no respetaba el canal alfa en PNG24, y para usar la opacidad basada en CSS se requerían filtros ActiveX y otros problemas. Los aros se pueden saltar 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 para desarrollar y mantener este (ahora problemático) diseño, también existía el costo de oportunidad de dedicar horas de desarrollador a parchear un código base confuso en lugar de trabajar en la versión N + 1.
En este tipo de situaciones, se debe medir el costo/beneficio de cada efecto visual en un diseño:
¿Qué tan asombroso es el efecto visual?
¿Se puede reemplazar con otra imagen igualmente impactante que no requiera tantos recursos de construcción?
¿Se puede reproducir correctamente el efecto en el objetivo? Si su diseño original no puede ser recreado con precisión por el objetivo, su diseño debe ser reemplazado con la aproximación más cercana que esté disponible. (Afortunadamente, esto se está volviendo 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, ¿puedes rediseñar la función en menos tiempo?
¿Cuánto del código base tendría que ser refactorizado para acomodar su visual?
Si el diseño y la construcción se llevan a cabo al mismo tiempo, o si está remodelando una aplicación heredada, ¿qué tan difícil será para los codificadores incorporar su imagen? No solo las horas involucradas para hacer la reescritura, sino las horas potenciales de depuración y mantenimiento del código recién modificado.
Existe cierta superposición entre los puntos anteriores y algunos otros puntos que no figuran en la lista. El punto es que, incluso en esta breve lista, hay costos comerciales que deben ser considerados. 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 hacer 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 se puede implementar y el poder de saber el costo aproximado. Siempre es útil tenerlo de tu lado.
En mi experiencia (soy codificador, no diseñador), no es tanto una cuestión de que el diseñador web deba saber sobre 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 web/navegadores es que crean diseños que se ven hermosos, pero que en realidad no funcionan dentro del navegador. Solo un par de cosas que algunos pueden no haber considerado:
Estos son los problemas que he visto al trabajar con diseñadores. Estos no son problemas sobre el diseñador que no sabe nada sobre el código. Pero problemas sobre no pensar en cómo se utiliza el diseño.
Una comprensión más amplia del medio en el que uno está trabajando 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, no tanto porque son malos diseñadores web, sino porque simplemente no son diseñadores web en absoluto. Son diseñadores gráficos con experiencia en 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 en el diseño de jardines que en la 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 tener una persona que hiciera el PSD, la siguiente persona hiciera el HTML y la siguiente agregara la base de datos, 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 del usuario agregada, mejoras progresivas, sistemas back-end y front-end integrados, conceptos como el diseño web reactivo, etc. Como tal, gran parte del proceso de diseño tiene que ocurrir en el código . Ya sea creación de prototipos, pruebas de usuario, diseño iterativo o lo que sea, el código es el medio y el equipo debe comprenderlo.
No, no todos los miembros del equipo deben poder escribir complementos de jQuery. Pero el equipo debe al menos saber qué son y el equipo de 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 comprender 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 comprendían las siempre cambiantes limitaciones del medio y podían diseñar para él. Las personas que no pueden hacer ese extralimitación y la implementación diluida de su visión terminan apestando.
Recientemente hice un poco de desarrollo web donde la experiencia del diseñador fue completamente en medios impresos. El resultado fueron páginas bastante hermosas, que habrían sido fantásticas impresas, pero funcionaron bastante mal como sitio web.
Para mí, la desconexión entre diseñador y 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 solo hacer una maqueta.
Para mí, cuando alguien se hace llamar 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 una comprensión de cómo las elecciones que hacen durante el proceso de diseño afectan la UX 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
Un 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 obtiene 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 dañar su negocio aprender a programar un poco de Javascript. (En realidad, los tiempos están cambiando y hay legiones de tipos con habilidades de diseño que pueden usar javascript para salir de sus DOM, pero esa es una historia completamente diferente)
Mis pensamientos generales:
Los desarrolladores web front-end tienen que lidiar con backends terribles y muchos niveles de idiosincrasia para molestarse con las sutilezas de su diseño. La mayoría de esas idiosincrasias son causadas por malas elecciones de backends prefabricados por parte de la administración y requieren grandes cantidades de tiempo para manejarlas.
Los diseñadores web, al tratar con personas tan estresadas, arriesgan su vida constantemente. Y debería considerar seriamente algunos de esos asuntos de front-end, en lugar de dejar caer el diseño en su mesa y salir corriendo gritando a la oficina "¡Terminé, terminé, de ahora en adelante todo es culpa del desarrollador! "
Las tiendas de diseño deberían arder.
Depende de donde trabajes.
Si trabaja para una gran empresa, todos estos pueden ser roles individuales:
Especialista en UX o arquitectura: planifica la arquitectura/organización de la información del sitio/hace esquemas
Diseñador: diseña el sitio usando Photoshop u otra herramienta
Desarrollador front-end: hace html/css/javascript/json/xml/etc. y escribe código de plantilla que integra el front-end con el back
Desarrollador back-end: hace la programación que hace que todo funcione dinámicamente
La mayoría de los lugares de nivel medio requieren que el diseñador también maneje las decisiones de UX. 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 con 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 trabajas por cuenta propia, debes saber y hacer todo tú mismo;)
Creo que los diseñadores web deberían saber HTML/CSS, incluso si solo se limita a los fundamentos, para poder crear diseños web e interfaces web que funcionen en el medio.
Los diseñadores web pueden optar por no escribir HTML/CSS ellos mismos, pero saber cómo funcionan las marcas y CSS es esencial para ser un diseñador web. Es posible que los diseñadores web no necesiten ser ninjas de HTML/CSS, pero les sirve saber (al menos) cómo se convierten sus composiciones de diseño web en un sitio web.
¿Los diseñadores web necesitan saber 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 completamente comprensivos pero con los conceptos básicos.
Personalmente, todo depende de tus habilidades y requisitos. Habilidades para poder aprender y captar cosas rápidamente. Los requisitos son las finanzas. Aprender algo requerirá tiempo, y eso acabaría con tu 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 suficiente tiempo para aprender a codificar de manera profesional.
Jin
Adán
usuario179700