Esta es probablemente una de las dudas más básicas que se tienen cuando se comienza en el mundo de las webs, ya sea desde el lado del cliente, me refiero a cliente que compra una web, como al lado del que vende una web. Para mí, es fundamental que se entienda esta diferencia ya que sin ella es difícil comprender proyectos de una determinada envergadura.

Qué es el diseño web

El diseño web son aquellas tareas que tiene como finalidad planificar y diseñar la estética de la web.

A lo largo de los diferentes pasos que componen el diseño web se va definiendo la experiencia que el usuario tendrá con nuestra web. Esta experiencia de traduce en sensaciones y emociones que será lo que el usuario recuerde de la web.

Características de un buen diseño web

Aquí podemos encontrarnos con un casi sin fin de elementos que podemos mencionar. La mayoría de ellos deben de venir definidos en el manual de imagen corporativa, en él se detallan cómo se pueden usar los diferentes elementos de la marca. También es posible que contemos con un manual de estilos donde se mencione qué enfoque le da la marca a diferentes temas y cómo se posiciona antes ellos.

Sitio web responsive. Hoy en día no cabe pensar en una web que no sea adaptable a las diferentes pantallas. Según el caso necesitaremos un mayor número de adaptaciones desde televisores con conexión a Internet hasta smartwatch pasando por los tradicionales ordenadores de sobremesa, portátiles, tablets y smartphone.
Una carga óptima de la web que cumpla con los Core Web Vital (métricas sobre la carga óptima de la web). Hay que tener en cuenta que el diseño no tiene que ser sacrificado por le optimización ni viceversa. Se debe buscar un término medio donde el resultado sea estético y óptimo a la vez.
La facilidad de lectura es otro de los elementos a más importantes. La tipografía elegida debe tener un tamaño suficiente para que facilite la lectura. Debe tener un contraste adecuado para que destaque sobre el fondo así como un correcta redacción.
Cumplir con los patrones de lectura y de uso de dispositivos digitales. Estos pueden cambiar según la cultura como por ejemplo en países con lectura RTL

Qué es la experiencia de Usuario o UX

La Experiencia de Usuario o Use eXperience en Inglés (UX siglas en inglés) son las emociones y sentimientos que generamos al usuario cuando utiliza nuestro producto o servicio.

Si lo queremos ver como un gráfico tenemos diferentes inputs (tipografías, colores, formas y distribución que llegan a nuestro usuario). Este las procesa y le genera una serie de output, es decir: emociones. Debemos procurar que tenga emociones positivas. A nadie nos gusta acceder a una web y ver que no podemos acceder al menú porque es pequeño el botón o la tipografía es pequeña para móviles.

Por ello nuestras webs deben ser usables y útiles. De esta manera nuestro usuario sentirá emociones y sentimiento positivos como satisfacción o felicidad.

Para esto podemos ayudarnos con la interfaz de usuario.

Qué es Interfaz de Usuario o UI

La UI o User Interface, en inglés, es la manera en la que interactúa nuestro usuario con el sistema.

Cuando diseñamos la interfaz de un sitio web, ya sea para Internet o para una Intranet debemos tener en cuenta la arquitectura de la información, cómo es la distribución de elementos visuales y cuales son los patrones de navegación e interacción culturales.

Esto último es muy importante por ejemplo a la hora de leer la web. En países occidentales leemos las web con un patrón de Z. Primero la zona superior izquierda y continuamos a la derecha, para después bajar a la siguiente sección que la recorreremos de izquierda a derecha de nuevo… y así sucesivamente. En otro países, por ejemplo, donde la lectura es RTL (right to left – de derecha a izquierda) hay otros patrones que debemos conocer antes de diseñar una web para ese público.

El responsable del diseño de la interfaz de usuario debe conocer un mínimo de desarrollo para poder poder dar indicaciones al desarrollador web y facilitarle su trabajo. Este debe ser el encargado de diseñar la interfaz tanto de usuario general de la web como del panel de administración, si lo hubiera; así como de la adaptación a las diferentes pantallas sean del tamaño que sean.

En qué se diferencia UX y UI

La User Experience (UX) o experiencia de usuario es el diseño de todos los sentimientos y emociones que genera un producto, en nuestro caso una web, en el usuario. Mientras que el diseño d ella interfaz de usuario es la elección y composición de los elementos visuales que va a ver el usuario: colores, tipo y tamaño de tipografía, forma, cantidad y número de los elementos.

Qué es el desarrollo web

Se puede definir como la creación de sitios web bien sea para Internet o para una Intranet. Para ello se utilizan diferentes tecnologías y softwares, que son aplicados en ambos lados donde se ejecuta la web, el lado cliente y el lado servidor.

El desarrollo web consiste en utilizar uno o más lenguajes de programación para generar un contenido con una interfaz determinada.

Podemos utilizar diferentes tipos de lenguajes según sean compilados, semicompilados o interpretados. Y estos pueden ser ejecutados en el lado del cliente o del servidor, según su finalidad. Algunos de los lenguajes de programación más utilizados en desarrollo web son Javascript, php, Python, ASP, .net, entre otros. A estos le sumamos los correspondientes a base de datos como SQL o MongoDB.

En cada proyecto de desarrollo web no tiene porqué utilizarse un único lenguaje. En proyectos grandes es habitual encontrarse con diferentes lenguajes de programación que se comunican entre sí para realizar una determinada función.

Por ejemplo: WordPress. Como sabrás la mayoría de webs actualmente están realizadas con este conocido gestor de contenidos (CMS). La mayoría de su programación se basa en php, y cada vez más va teniendo mayor contenido en react, que proviene de la familia de Javascript.

Desarrollador web frontend

Un desarrollador frontend es el encargado de programar la parte que se ejecutará en el lado del cliente. Generalmente tiene nociones de HTML, CSS y Javascript. Con todo ello crea la interfaz que el ha pasado el diseñador y la dota de interactividad.

Desarrollador web backend

Un desarrollador backend es el responsable de programar las funcionalidades correspondientes al lado del servidor. Debido a la gran variedad de lenguajes que existen del lado del servidor hay una gran variedad de perfiles y generalmente cada desarrollador tiene uno de ellos que es su fuerte. Alguno de estos lenguajes son ASP, nodeJS, ASP, react… Además de contar con unos conocimientos mínimos de gestión y funcionamiento de servidores y de bases de datos para lograr la mejor performance del código.

Desarrollador web fullstack

Un desarrollador web fullstack es aquella persona que junta en sí misma las habilidades para desarrollar la parte del cliente y la parte del servidor. Generalmente esto es un perfil bastante complicado de encontrar debido a lo que comentaba en el apartado de backend

Diferencias entre diseño y desarrollo web

A modo de conclusión podemos ver las principales diferencias entre diseño y desarrollo web.

Por una parte hay que diferenciar la estética de la web que es parte del diseño web. De la funcionalidad de la web que es el desarrollo web.

La experiencia del usuario va a depender del diseño web (en su mayoría). El diseño debe ser agradable y estético y el desarrollo funcional y veloz. El desarrollado web va a ser el encargado de gestionar la información que se requiera para mostrar en el navegador.

Y como colofón final que seguramente habrás escuchado varias veces, ya que es un eterno debate… A nivel profesional un buen diseñador no tiene porqué ser un buen desarrollador, ni viceversa. Al igual que un buen programador frontend no tiene porqué ser un buen programador backend, y dentro de estos últimos hay muchas especialidades.

Aun que siempre es recomendable que un diseñador tenga nociones de programación y un programador las tenga de diseño.