Saltar al contenido principal

¿Por qué es importante que los diseñadores web aprendan CSS y HTML?

July 3, 2016

Conferencia diseño web Congreso de egresados de Diseño de la comunicación gráfica en la Universidad Autónoma Metropolitana Xochimilco para 2016. En donde explico la importancia de aprender (al menos un poco) de programación en HTML y CSS.

Transcripción (masomenos)

Yo hago front-end development y diseño web…algunas personas lo llamarán maquetación y otras diseño web.

Esto quiere decir que no solo diseño la web sino que la maqueto… no es magia
Conecto el código de los ingenieros de manera que la interfaz sea más fácil de usar y que el proceso de uso sea mejor, que comunique mejor.

Yo defino mi trabajo y el trabajo de los diseñadores en general como “estar en medio”
Asi es: Yo estoy en medio del equipo de ingeniería y de marketing.
Por ejemplo: los diseñadores editoriales están en medio del editor y del impresor

La idea es que estoy con un pie en el mundo del marketing y del diseño y otro pie en el de ingeniería y obviamente entre más conocimiento tengas de los extremos que unes serás mejor en tu trabajo.
Otra vez con el ejemplo: Un buen diseñador editorial creo que debe de ser un buen lector y conocer bastante de tipografía, debe de saber de reglas ortográficas y también de gramajes de papel y de colores etc.

Un buen diseñador web debe de saber de diseño, comunicación, estrategias de marketing on-line pero también debe tener conocimiento técnico para que las páginas se vean bien en muchos dispositivos.

Vivir en el mundo de “en medio” es complejo pero es un trabajo que alguien tiene que hacer, y les voy a explicar un poco de qué si hacemos los front-end y qué no hacemos.

  1. Los Front-end entienden los principios de la experiencia de usuario y sus mejores prácticas, pero no son las personas que hacen los experimentos ni la investigación con los usuarios.
  2. Un front-end tienen un buen ojo y sensibilidad pero no es el que necesariamente diseña el logotipo, decide la paleta de colores, escudriña las tipografías ni crea las ilustraciones o los íconos..aunque a veces sí que lo hace pero bueno ahí anda, en medio.
  3. Por último entiende la lógica detrás del desarrollo de back-end pero no programa, ni revisan las conexiones de los servidores, ni bases de datos..aunque anda ahí en medio.

Por qué es importante entrarle al HTML y CSS

Es cierto que hay muchos diseñadores prefieren no tocar el CSS y entregar solo una imagen a alguien para que después la maquete, pero yo creo esto no es correcto y les voy a decir por qué

Si maquetas la página: entiendes mucho mejor tu diseño

Si solo creas el archivo en photoshop no entenderás ni las proporciones reales de tu diseño, de entrada el tamaño de la tipografía que muestra photoshop no es la misma que usarás en el código, los colores, los tamaños, los espacios en blanco y esas cosas tan importantes para los diseñadores son mejor entendidos directamente en HTML y CSS.
Volviendo al ejemplo del diseño editorial, imagínate que en indesign tuvieras la opción de trabajar ya en el libro impreso desde el primer momento y poder volverlo a editar sin perder dinero ¿Sería fantástico no?
Esto pasa con las webs, trabajar directamente en un navegador para ver tu diseño te da un vistazo real de cómo es tu diseño sin depender del software.
Por cierto esta página ha de tener 8 años y se sigue viendo bastante actual, en fin.

Le pasas parte del trabajo de diseño a alguien que probablemente no conoce de diseño

Es probable que la persona que se encargue de traducir tus imágenes en HTML y CSS sea alguien que sea un programador o un bicho de peor naturaleza y el amor que tenemos por la tipografía, colores, proporciones y diseño es una sensibilidad que estos seres no lo tienen del todo desarrollada.

Es más barato

No solo en dinero, sino en tiempo. Como mencioné en el punto anterior, si necesitas de alguien que termine tu trabajo tendrás que meter más dinero y el trabajo en general se tardará más. Además los costes de mantenimiento, cada que quieras cambiar algo tendrás que recurrir a tu programador de confianza y este te cobrará y bueno es un loop infinito.

NO LE TENGAS MIEDO AL CÓDIGO

Yo recuerdo cuando por primera vez empecé a usar HTML y CSS, aquello parecía dificilísimo y complicadísimo, pero en cosa de días empecé a entenderlo, un poco como cuando tocas photoshop por primera vez, si lo vuelves tu herramienta de trabajo cada vez te parece más fácil de usar.
Y me atrevo a decir que es mejor que aprender cualquier otro software de diseño por los siguientes motivos:

  1. ¿Recuerdan lo que dije de que es más barato? La mayoría del software es libre o muy barato, no sé si se alcanza a leer bien pero la mayoría de los editores de texto cuestan menos que la licencia al mes de un photoshop o un illustrator
    Entonces no necesitan pagar por empezar y esto es algo enooorme, yo recuerdo cuando tuve que instalarme el photoshop pirata por primera vez, me sentía sucio solo empezar… lloré toda la noche.
  2. Tienes más control, Si quieres que tu diseño se vea de una manera en un dispositivo o en otro tú tienes control, en general cuando creas un cartel lo piensas para un solo formato pero cuando haces una web puedes diseñar pensando en medios diversos y resolver problemas de comunicación más específicos que en cualquier otro medio.
  3. Es más fácil para crear proyectos complejos, Intenta llevar control de un proyecto de 1200 páginas sin volverte loco, pues no sólo por extensión sino por complejidad trabajar con CSS te facilitará mucho la vida al momento de hacer cambios en proyectos grandes o pequeños.
  4. Es más fácil trabajar en equipo Gracias a los sistemas de control de versiones como GIT o subversion podrás trabajar en equipo de manera ordenada y desde cualquier lugar del mundo

¿Cómo empiezo a diseñar páginas web?

PASO 1 Busca una víctima
La mejor manera de empezar es crearte un proyecto o idealmente para alguien más, entonces ve con tu adulto en problemas de confianza y ayúdales a crear esa página que tanto querían hacer. si tu tía necesita una página para recibir pedidos para sus tamales a domicilio dile “Oooorale tía yo te ayudo”. Si no tienes a quien hacerle su página y vives alejado de los seres humanos y le tienes miedo a otros seres humanos créate tu portafolio.

PASO 2 Detecta el objetivo de la página
Luego detecta bien el objetivo de tu página, el objetivo es que ¿te contacten y te contraten? ¿recibir comandas de tamales? esto lo debes tener clarísimo.

PASO 3 Copia
Inspírate y copia… así es copiar es parte importante del juego, es la mejor forma de empezar, copiar y pegar el código de otra página y modificarlo. Que no te de pena copiar, los grandes maestros de la pintura se pasaban años y años copiando a otros maestros hasta desarrollar su propia técnica, pues este es más o menos el caso, mira cómo otros han resuelto los mismos problemas y aprende

PASO 4 Pregunta
Si tienes dudas pregúntale a google, ahí está todo, no seas tímido

Glosario

Usabilidad
Se refiere a la facilidad con que las personas pueden utilizar un objeto fabricado por humanos con el fin de alcanzar un objetivo concreto (MUY IMPORTANTE). En este caso en concreto la facilidad para usar una página web

Interfaz
Es el panel u objeto que nos permite a nosotros seres humanos interactuar con un programa o maquina… ehm es más fácil explicar qué es una interfaz con un ejemplo: la interfaz de una televisión serían sus botones y el control remoto…también serían los menús para elegir idioma.

HTML y CSS
Es el código que usamos para construir las interfaces, HTML es lo que nos ayuda a crear la base y CSS es con lo que le damos forma a dicha base. Los front-ends nos encargamos de la interfaces de las webs.

Tags: , ,