Desarrollador front-end: perfil y entrevista

Desarrollador front-end - Perfil y Entrevista

Una vez que el arquitecto de la información y el diseñador de interacción avanzaron sobre las ideas de diseño —y ese diseño fue probado y validado con los usuarios— ya estamos listos para avanzar sobre el desarrollo front-end.

El desarrollador front-end es quien se encarga de traducir los diseños a lenguaje de programación. En otras palabras, recibe todos los documentos trabajados en la etapa de diseño y se encarga de traducirlos a código.

El desarrollador front-end es quien trae a la vida el diseño visual y de interfaz que le fue entregado.

¿Profundizamos? En esta entrada conocerás el rol del desarrollador front-end y podrás leer una entrevista realizada a Miguel Olave, desarrollador front-end —bien volcado al diseño de experiencia— en Turbomarket.

Qué hace un desarrollador front-end y por qué tu equipo lo necesita

Casi todo lo que un usuario utiliza y ve en la interfaz, está diseñado por el equipo de diseño y programado por el desarrollador front-end.

El desarrollador front-end trabaja la interfaz desde el punto de vista del código para que el usuario pueda interactuar con un sistema.

Al estar tan cerca del diseño, este perfil suele estar preparado —debería, sin dudas— para trabajar con aspectos de diseño visual o experiencia de usuario, y por eso es que muchos desarrolladores front-end terminan especializándose en Diseño UX y manejando herramientas de investigación y diseño.

Esta especialización es la que le ayuda a traducir de la forma más fidedigna posible los diseños, o sea la estructura, los márgenes, los colores, las tipografías, los elementos gráficos, las animaciones, la adaptación a las pantallas, etcétera.

Yendo a aspectos más técnicos, para interpretar y traducir los diseños a código, este perfil utiliza diferentes lenguajes de programación:

  • HTML (hyperText Markup Language): utilizado para etiquetar, organizar y crear la estructura de los contenidos

  • CSS (cascading style sheets): utilizado para crear las cascadas de estilo y darle formato a los contenidos

  • JavaScript: lenguaje orientado a objetos que los desarrolladores front-end utilizan, entre otras cosas, para interactuar con HTML y CSS y trabajar la interacción

No confundamos front-end con back-end

Mientras que el front-end está orientado a trabajar la interfaz de usuario del lado del cliente, el desarrollador back-end trabaja los aspectos internos. Veamos qué significa esto.

El back-end se encarga de programar aplicaciones para controlar, por ejemplo, las bases de datos para que puedan ser consultadas por los usuarios que interactúan —desde el front-end— con el sistema.

A su vez, estas aplicaciones tienen que enviar una respuesta al usuario, devolverle información, y esta respuesta también se muestra en la interfaz, pero son los desarrolladores back-end quienes escriben las fórmulas y operaciones para que esta comunicación sea posible.

Está claro que el desarrollador front-end, principalmente en el desarrollo de sitios web o aplicaciones complejas, tiene que trabajar muy de cerca con el back-end, pero no es el perfil que se hace responsable por el manejo interno de los datos.

La responsabilidad del front-end está en traducir el diseño, lograr una interfaz de usuario accesible y asegurar la correcta usabilidad del sistema.

Conocimientos y habilidades de un desarrollador front-end

En síntesis, el desarrollador front-end tiene que saber:

  • Programar en HTML y CSS

  • Programar en JavaScript

  • Trabajar con frameworks y CMS

  • Trabajar con el equipo de Diseño UX y el desarrollador back-end

También debe tener habilidades en:

  • Diseño visual

  • Uso de herramientas de diseño visual

  • Diseño de Experiencia de Usuarios

Ahora que ya tienes la información básica sobre el desarrollador front-end, no te pierdas la entrevista.


Entrevista a un desarrollador front-end

Desarrollador front-end - Perfil y Entrevista

¡Veamos más a fondo este tema del front-end con una entrevista a Miguel Olave, quien está a cargo del desarrollo front-end —y de tareas de investigación y diseño— en Turbomarket. Por supuesto, Miguel también es alumno de la Escuela UX y está certificado bajo el programa internacional UX-PM. ¡Vayamos a la entrevista!

¿Cómo llegaste a convertirte en desarrollador front-end?

Mis primeros pasos fueron en la Universidad Técnica Federico Santa María, donde estudié electrónica. Si bien en electrónica uno se centra más en el sistema y todo el diseño gira en torno a su robustez, al tiempo me empecé a dar cuenta de lo importante y complejo que era diseñar la interfaz para que se comunique con el usuario.

Un diseño inapropiado de interfaz puede arrojar consecuencias negativas, como tener que elaborar excesiva documentación —que muchas veces no es leída o es mal redactada— y capacitar en exceso. Si el cliente pierde esta documentación o cambia a su equipo técnico, la empresa desarrolladora debe destinar tiempo para buscar la documentación, entregarla y en algunos casos volver a capacitar. A la larga, eso es más costoso tanto para la compañía que contrata el sistema como para la empresa que lo desarrolla.

Tiempo después cuando intenté aprender más cosas en el área de desarrollo de aplicaciones móviles, fue más clave y transparente para mí el tema de la experiencia de usuarios: el sistema puede ser muy bueno, pero si la interfaz no es intuitiva el usuario se va a ir con la competencia. Yo sentía que en ese tema estaba muy flojo y por eso decidí capacitarme y ganar más experiencia antes de continuar con cualquier proyecto. Vi la gran necesidad del Diseño UX y de cómo lo enfrentas desde el front-end para los distintos tipos de trabajos.

Ahora estoy trabajando en Turbomarket, una empresa más ligada al marketing digital y a la generación de prospectos para ventas. Nos centramos bastante en empresas de eCommerce. Tenemos experiencia asesorando compañías para mejorar sus sitios, añadir sistemas de tracking y realizar análisis de estos resultados. Como también venimos del área más técnica, implementamos automatizaciones para optimizar la experiencia de los consumidores, desde que ven un anuncio hasta que los contacta un ejecutivo de ventas o hacen un proceso de venta dentro de un eCommerce.

¿Por qué un equipo UX necesita de un desarrollador front-end?

Gran parte de los productos y servicios que se ofrecen en el mercado siempre tienen su canal digital. Siempre hay un canal digital con el cual los usuarios van a terminar interactuando, por eso es importante entender cómo se relacionan con este medio.

Al tener un desarrollador front-end, el equipo puede asegurar que esa experiencia sea de la mejor manera posible, garantizando que, por ejemplo, las páginas carguen de forma apropiada en la mayoría de los dispositivos y también que carguen de forma rápida para que no haya un gran índice de rebote y no se pierdan contactos ni ventas.

Un desarrollador front-end permite que estos medios digitales puedan ser óptimos. Además, sabemos cómo inyectar códigos de tracking y hacer análisis de estadísticas, lo cual va a permitir que en el futuro, si tú haces una inversión en lo que es una plataforma o un medio digital, sepas qué resultados te está dando. Un front-end generalmente conoce estas herramientas y sabe cómo implementarlas de forma que sean más eficaces.

¿Cómo es un día típico en tu rol de desarrollador front-end?

Un día típico en esta área de marketing gira en torno a tres tareas principales. Una de ellas es implementar o realizar mejoras en los diseños que se proponen para tiendas de eCommerce o formularios de contacto.

Otra tarea incluye trabajar con los sistemas de tracking y analíticas. Esta parte es la más importante que tengo al día de hoy porque permite identificar si las estrategias están funcionando. Uno puede rastrear en qué parte del funnel los contactos se podrían estar cayendo para luego mejorar lo que sea preciso y permitir que el flujo sea más fluido.

La tercer tarea tiene que ver con el diseño y la implementación de ciertas automatizaciones que son requeridas para mejorar la experiencia de los clientes. En eCommerce el grado de automatizaciones es súper importante para mejorar las probabilidades de éxito en ventas y en la generación de prospectos. Esta hace que sea una mejor experiencia tanto para clientes como para vendedores.

En mi trabajo diario estoy en permanente contacto con mi stakeholder, quien es el que visualiza cómo se ofrece un servicio a los clientes. Con él tengo que conversar mucho para ver cuáles son las mejores estrategias para hacer el proceso más fluido.

En este momento estamos generando “máquinas de venta”, un producto de generación de prospectos. Entonces, en los últimos meses he tenido mucho contacto con él para diseñar los mejores procesos y facilitar las tareas internas dentro del equipo. Hemos tenido que hacer mucho introspectiva para mejorar la experiencia dentro del equipo de desarrollo.

También trabajo muy cerca de los diseñadores gráficos y los ejecutivos de cuenta, con quienes discuto las mejores formas para comunicarnos con nuestros clientes.

¿Puedes explicarnos un proyecto en el que hayas trabajado, describiendo tu función como desarrollador front-end?

Hace un tiempo hicimos un sitio completo de un laboratorio de tomas de muestras médicas. Al principio, más que reestructurar la página que ya tenían, que estaba hecha en Flash y ni siquiera era responsive, me puse a investigar cuál era el objetivo de esta web. ¿Qué se quería hacer con ella?

Entonces, investigué qué era lo que más utilizaban los usuarios. Como la página no tenía muchas estadísticas, tuve varias reuniones con los clientes. Así, identifiqué que los usuarios utilizaban la web, más que nada, para ver los resultados de los análisis médicos y también para agendar hora o llamar a la misma clínica.

Pudimos hacer un buen diseño que cumplía con estas premisas y finalmente añadimos todos los sistemas de tracking y de analítica para medir resultados y analizar si los objetivos se estaban cumpliendo.

Para sintetizar, pude realizar un proceso bastante completo de desarrollo: ver cuál es el objetivo que se quiere cumplir con la nueva interfaz gráfica, hacer un diseño acorde a esos objetivos y, finalmente, implementar el sistema de métricas para tomar conclusiones.

Los clientes quedaron bien contentos, se mejoró bastante la imagen y el acceso desde los celulares ya era mucho más agradable para los usuarios. Todo esto se vio reflejado en las métricas, lo que les dio un punto de partida para futuras inversiones que buscaban realizar.

Desde el punto de vista del front-end, es muy importante entender cuál es el objetivo que se quiere conseguir con la interfaz, ya sea para una aplicación, página web o anuncio. Eso va a garantizar los resultados que se quieren alcanzar y también va a dar directrices al diseñador y al programador con respecto a cómo avanzar, en qué tienen que poner el foco y qué pruebas deben hacerse antes de hacer el lanzamiento.

entrenamiento ux capacitacion ux

Capacitación para empresas

Entrenamiento transversal en Diseño de Experiencia de Usuarios para tus equipos