Frontend es la parte de un sitio web que interactúa con los usuarios, por eso decimos que está

del lado del cliente. Frontend es la parte de un programa o dispositivo a la que un usuario
puede acceder directamente. Son todas las tecnologías de diseño y desarrollo web que corren
en el navegador y que se encargan de la interactividad con los usuarios.

Cómo funcionan el Frontend y el Backend

La web está compuesta de un montón de documentos que están conectados entre sí a través
de enlaces. Cuando quieres entrar a Platzi escribes la URL www.platzi.com en la barra del
navegador, eso quiere decir que estás solicitando que te muestren una página web.

Ya sabemos qué es y para qué se utiliza, pero, ¿cómo se hace «el lado del cliente»?

El frontend se desarrolla, principalmente, a través de tres lenguajes: HTML (HyperText Markup

Language), CSS (Cascading Style Sheets) y JS (Javascript). Cada uno de estos lenguajes se usa
para desarrollar diferentes partes del front. Vamos a explicar en qué consiste cada uno, y
cuáles son sus funciones. Básicamente, son tres lenguajes que se dividen las tres tareas básicas
del desarrollo: arquitectura, apariencia, e interacción.

Arquitectura: HTML (HyperText MarkUp Language). Es la columna vertebral de cualquier

proceso de desarrollo de sitios web y proporciona un marco general de cómo se verá el mismo.
Fue lanzado en 1992, y es un lenguaje de marcado que nos permite indicar la estructura de
nuestro documento mediante etiquetas. Cualquiera que haya trasteado mínimamente con
WordPress habrá visto ejemplos de lenguaje HTML en, por ejemplo, las etiquetas del texto de
una página o entrada (H1, H2, H3 y todas estas cosas).

Apariencia: CSS. Como mucha terminología del desarrollo, el nombre de este lenguaje es
autoexplicativo: Cascading Style Sheets, u Hoja de Estilos en Cascada. Controla el aspecto de
presentación del sitio, una vez que este ya está construido con HTML. Por ejemplo, con
lenguaje HTML indicamos que un trozo de texto es un título con la etiqueta H1 dentro de la
arquitectura del site, pero con CSS podemos hacer que todo texto marcado con dicha etiqueta
se vea de otra forma en la parte visual.

Interacción: JS (JavaScript). Es un lenguaje de programación basado en eventos que se utiliza

para transformar una página estática en una interfaz dinámica interactuando con el usuario, el
navegador y el servidor. Es decir, es un lenguaje “invisible” en la inactividad, porque funciona a
través de interacciones: con JavaScript podemos decirle a nuestra web que despliegue un
menú al hacer clic sobre un icono, o que el botón de “Volver arriba” haga justamente eso

¿Qué es el frontend?

Llamamos frontend a la parte del sitio web con la que el usuario interactúa. Es lo que algunos
suelen llamar “el lado del cliente. Como hemos mencionado antes, Front End es la parte del
sitio web con la que puedes ver e interactuar. Mientras, la parte trasera engloba el
funcionamiento estructural y no es visible por el cliente.
Un desarrollador frontend es el encargado de llevar a la práctica el diseño de un sitio web para
que el usuario final pueda usarlo. En otras palabras: el desarrollador frontend coge la
propuesta del diseñador gráfico, y la convierte en realidad a través de diferentes lenguajes de
programación. Casi todo lo que ves en la pantalla cuando accedes a una web es desarrollo
frontend: la estructuración de los apartados, márgenes entre bloques, tamaños de textos,
tipos de letra, colores, adaptación para distintos dispositivos, efectos visuales…

un programador frontend es el encargado de desarrollar la parte visual de la web. Diseña la

estructura, la tipografía, la colorimetría, imágenes, banners, etc. Su labor es realmente
importante ya que para que una página web funcione tiene que tener un diseño atractivo e
intuitivo para el receptor.

La importancia de un buen frontend: accesibilidad y rendimiento

A la hora de enfocar un proyecto y su desarrollo, hay que tener en cuenta los distintos
dispositivos desde los que el usuario final del sitio puede acceder a la mismo. A esto hace
referencia la accesibilidad. El usuario no va a tener la misma experiencia accediendo a la web
desde el móvil que desde la tablet o el ordenador.

Debemos trabajar en el diseño web, navegación, contenido e interacción para que sean
accesibles desde cualquier tipo de pantalla. Lo cual, además de facilitar el uso de nuestro sitio
web en la mayoría de dispositivos (móviles, tabletas, lectores, etc), nos ayuda al
posicionamiento orgánico SEO, ya que muchas de las pautas de accesibilidad ayudan a los bots
de los buscadores a entender nuestro sitio web.

Funciones de los desarrolladores de Front End y Back End

Un diseñador web se encarga de construir sitios web teniendo en cuenta los aspectos visuales.

Qué es la UI, User Interface o Interfaz de

usuario
UI (por sus siglas en inglés User Interface) o en español
Interfaz del Usuario, es la vista que permite a un usuario
interactuar de manera efectiva con un sistema. Es la suma
de una arquitectura de información + elementos visuales
+ patrones de interacción.
se refiere a la creación de la interfaz, que puede ser
gráfica o desarrollada por tecnologías como HTML, CSS,
YUI o jQuery.

El UI da el ‘look & feel’ al producto con la estructura e

interacción de los elementos de la interfaz.
La interfaz de usuario es uno de los elementos que
componen la UX y su aporte principal es que ayuda a
navegar por la página fácilmente. Incluye todos los
elementos que te permiten interactuar con un dispositivo
como los elementos visuales, botones e iconos.
Entre los principios fundamentales en el diseño de UI
podemos nombrar los siguientes:

Los elementos del diseño deben ser totalmente claros

para el usuario.
El diseño debe ser flexible con margen de adaptabilidad a
diversas situaciones.
El diseño tiene que utilizar elementos convencionales que
sean fáciles para el usuario y responder a la simpleza o
familiaridad.
La funcionalidad del diseño debe ser eficiente para que el
usuario complete las tareas correcta y rápidamente.
Sus elementos deben estar correctamente estructurados,
respondiendo a una clara y lógica jerarquía visual.
Un UI Designer se encarga de crear visualmente la
interfaz del producto para que vaya acorde a la
experiencia del usuario. Además, crea elementos
interactivos y se preocupa de que se vean bien en todas
las plataformas (móvil, tableta, web). Un UI Designer
trabaja muy de la mano con el equipo de desarrollo o
diseño de producto proporcionando guías de estilos y
patrones de uso.

Dentro de las actividades que realiza un UI Designer,

están:

Diseño de interacción (cómo responde el sistema)

Guías de interacción (estados del sistema)
Diseño de elementos (botones, formularios)
Diseño visual (iconos, imágenes)
Guías de estilo (paletas de color, fonts)
Un UI Designer por lo general tiene estudios en:
Diseño gráfico, Artes visuales
Diseño industrial
Tecnología, Desarrollo de Productos Digitales
Qué es la UX, User Experience o Experiencia
de Usuario
UX (por sus siglas en inglés User eXperience) o en español
Experiencia de Usuario, es aquello que una persona
percibe al interactuar con un producto o servicio.
Logramos una buena UX al enfocarnos en diseñar
productos útiles, usables y deseables, lo cual influye en
que el usuario se sienta satisfecho, feliz y encantado.
Se refiere a lo que percibe interna y emocionalmente el
usuario al visitar e interactuar con una plataforma, sitio
web o aplicación. El encargado del UX tiene como
objetivo principal brindar al usuario la mejor experiencia
que pueda tener al utilizar y navegar a través del sistema.
Para que el usuario se sienta feliz y satisfecho se debe
lograr una buena UX enfocándose en diseñar sistemas
útiles, usables y deseables.
Como bien indica su propio nombre, UX es la experiencia
de una persona al interactuar con tu página web. La clave
para llevar a cabo estrategias de buena experiencia es
situar al usuario en el centro del diseño, pensando
siempre en sus necesidades, habilidades y limitaciones.

Entre los principios básicos de la User Experience

podemos mencionar que el contenido debe ser útil, que
la página web debe ser usable, que necesita transmitir la
imagen deseable de la marca, que los llamados a la acción
deben ser encontrables y estimular el clic, que los
mensajes deben ser creíbles e incluso que el material
debe ser accesible para personas con discapacidad.

UX se refiere a lo que experimenta el usuario antes,

durante y después de la interacción; y por lo tanto sin
incorporar al usuario, ¡no se puede hacer UX! Por este
motivo, resulta fundamental comprender en primer lugar
a los usuarios y sus verdaderas motivaciones y
necesidades, para luego considerar desde ese lugar qué
interfaz, qué contenidos y qué interacciones lograrán el
resultado buscado, y finalmente, validar los resultados
que produce la interfaz propuesta.

Dicha validación es posible realizarla de manera directa

mediante pruebas con usuarios, entrevistas cualitativas,
relevamiento de modelos mentales, o bien
indirectamente haciendo uso de los mapas de calor, las
pruebas de test A/B o los mapas de clics. Al contar con
estas representaciones gráficas de las áreas de tu sitio
web más calientes o donde los visitantes hacen clic
podrás realizar un seguimiento de la actividad del usuario
y ver qué imágenes, botones, elementos de texto o
páginas tienen mejores resultados así como las áreas de
tu sitio web que se están ignorando.
¿Pero, cómo se logra esta experiencia?
Una buena UX se logra a través del Diseño Centrado en el
Humano, el cual es el enfoque de conocer las necesidades
de los usuarios y alinearlos a los objetivos del negocio
tomando también en cuenta las limitaciones técnicas.

La persona que realiza UX, es conocida como un UX

Designer y como parte de sus responsabilidades está el
de investigar qué es lo que las personas necesitan para
cumplir sus objetivos y resolver sus dolores.

Dentro de las actividades que realiza un UX Designer,

están:

Investigación (con stakeholders, etnográfica, entrevistas 1

a 1…)
Evaluación (evaluaciones heurísticas, benchmarks,
pruebas de usabilidad)
Análisis de datos (KPI’s, métricas)
Arquitectura de información
Una persona que se desempeña como UX Designer por lo
general tiene conocimientos generales de:

Psicología, Sociología o Antropología

Tecnología, Desarrollo de Productos Digitales
Comunicación, Marketing
Negocios, Ventas
Diseño Industrial, Gráfico
Diseñador de UI vs Diseñador de UX
Diseñador de UI
La primera impresión cuenta a la hora de que un usuario
ingrese en un sitio web, esta puede determinar si
continúa en el sistema o lo abandona. Además, es muy
importante ya que por esto se puede ganar o perder un
cliente. El Diseñador de la interfaz de usuario es el
encargado de diseñar el sitio web, aplicación o sistemas,
centrándose en la creación de wireframes y mockups.
Creando la construcción, los colores, degradados,
tipografías, layouts, es decir, el diseño visual en general.

Conseguir un diseño atractivo es de vital importancia para

captar la atención del usuario, sin olvidarnos que además
debe ser útil y fácil de usar. Mientras más sencilla sea la
interacción con el sitio web para el usuario, hay más
probabilidades de hacer que este se quede más tiempo y
de esta manera conseguir una conversión.

La persona que realiza la interfaz de usuario, es un UI

Designer, quien crea elementos interactivos que estén
acorde a la experiencia del usuario. Este tipo de
diseñadores tienen estudios generales sobre:
Diseño gráfico, Artes visuales.
Diseño Industrial.
Tecnología, Desarrollo de Productos Digitales.
Dentro de las actividades que desempeña un UI Designer
se encuentran:

Diseño de interacción.
Guía de interacción.
Diseño de elementos.
Diseño visual.
Guías de estilo.
Diseñador de UX
El diseñador de la experiencia de usuario se encarga de
valorar el sitio web, aplicación o sistema, en base a la
usabilidad y facilidad de navegar a través de este. En
otras palabras, es la persona que se encarga de diseñar a
través del Diseño centrado en el Humano, que está
enfocado en conocer las necesidades de los usuarios y
alinearlos con los objetivos del negocio, teniendo muy
presente las limitaciones técnicas. Es como un psicólogo
que busca todas las opciones posibles para facilitar la vida
del usuario, incorporando mejores tecnologías de
interacción, flujos de navegación, distribución de los
elementos, la arquitectura de la información y posibles
escenarios.
La persona encargada del UX, es conocida como UX
Designer, como parte de su trabajo está el investigar lo
que las personas desean y necesitan para cumplir con sus
metas y solucionar sus problemas. Por lo general, un UX
Designer tiene conocimientos básicos acerca de:

Antropología, psicología o sociología.

Comunicación social, Marketing.
Tecnología, Desarrollo de Productos Digitales.
Ventas, Negocios.
Diseño Industrial, Diseño Gráfico.
Además, dentro de las actividades que debe desempeñar
la persona de este puesto, están:

Investigación.
Evaluación.
Análisis de datos.
Arquitectura de información.
Veámoslo en el siguiente ejemplo: Es muy
común, que el término UX, se confunda con el de
Usabilidad o UI. Pero vamos a dejarlo claro.
La Usabilidad es un atributo de una buena experiencia de
usuario y la UI o Interfaz del Usuario es con lo que se
interactúa.

UI, hay un botón que permite interactuar al usuario con el

sistema (comprar).

Usabilidad, hay un botón que permite al usuario regresar,

además me dice en qué moneda está el precio y me
permite seleccionar la cantidad (previniendo errores).

Buena UX, Me hace decir ¡Wow! porque tiene una

descripción que me dice qué ingredientes tiene, cuantas
calorías y además me permite ¡agregarlo a mis favoritos
para comprarlo rápido en otra ocasión!
En TODOS los casos existe la UX, la diferencia es que
podemos INFLUIR en crear una buena UX cuando
planeamos para la experiencia óptima.

UI me permite comprar, Usabilidad me permite prevenir

un error, UX es lo que percibo.

OJO: UX NO ES AGREGAR FUNCIONALIDAD, ES PONERSE

EN LOS ZAPATOS DEL USUARIO