¿Cuál es la diferencia entre diseño y desarrollo web? ¿Y qué hay del UI vs UX? ¿Qué significan estas divisiones? ¿Por qué hay tantas siglas? ¿¡La gente de tecnología no quiere que todo sea fácil de usar!?

Si se es nuevo en el diseño de un sitio web, encontrarse con la terminología de la industria de la tecnología puede parecerse mucho a escuchar un idioma extranjero, excepto que la mayoría de los idiomas extranjeros tienen rima y razón. Pero trabajar con un profesional web es algo que toda empresa debería hacer en algún momento; si se desea un sitio web exitoso, es posible que se necesite un traductor.

Para eso es este artículo. Si se está diseñando un primer sitio web o simplemente se desea comprender mejor la industria, aquí explicamos y analizamos cuatro de los términos más utilizados y problemáticos en tecnología hoy en día: UI, UX, diseño web y desarrollo web. Después de leer esto, no solo sabrás qué hace cada campo, sino también en cuál necesitas que tu proyecto web se centre más.

El ABC del IT

Comencemos con algunas definiciones básicas para aliviar la confusión inicial y darte algo de contexto antes de profundizar más:

Diseño web: una amplia categoría general para todo lo relacionado con el diseño de las imágenes y la usabilidad de un sitio web. Tanto el diseño de UI como el de UX, junto con muchos otros campos, se incluyen en el diseño web.
Desarrollo web: la parte técnica de hacer un sitio web, centrándose en el código. El desarrollo web se divide además en "front-end" y "back-end", que se explica a continuación.
Interfaz de usuario (IU): una especialización del diseño web que se ocupa de los controles que las personas usan para interactuar con un sitio web o una aplicación, incluidas las pantallas de botones y los controles de gestos.
Experiencia del usuario (UX): otra especialización del diseño web, esta se ocupa del comportamiento y la sensación del usuario al usar un sitio o una aplicación. El diseño UX encapsula muchas otras áreas, pero se ven desde la perspectiva del usuario.

Como ya puedes ver, ninguna de estas áreas es exclusiva y hay toneladas de superposición. El diseño y el desarrollo web son solo dos caras de la misma moneda, el diseño de la interfaz de usuario influye en el diseño de la experiencia de usuario, el desarrollo web los admite a todos... se trata menos de qué campos manejan qué tareas y más de cómo cada campo considera la misma tarea desde un punto de vista diferente.

Wireframe de un nuevo diseño de sitio web.

Por ejemplo, los tiempos de carga, un problema común para todos los sitios web. ¿Cómo aborda cada campo los tiempos de carga?

Diseño web: si una página tarda demasiado en cargarse, hay demasiado contenido o es demasiado complejo. Los archivos de imagen se pueden comprimir, los activos se pueden ajustar y volver a exportar y las páginas se pueden recortar del exceso de contenido.
Desarrollo web: para que el contenido se cargue más rápido, podemos probar una mejor compresión de archivos para reducir el tamaño de los archivos del contenido, sprites CSS para ahorrar ancho de banda o una red de entrega de contenido para mejorar los tiempos de carga en regiones geográficas específicas.
UI: los controles deben ser lo más receptivos posible, por lo que la interfaz debe ser lo suficientemente simple como para que la interactividad sea instantánea.
UX: la probabilidad de que un usuario "rebote" (abandone su sitio después de unos momentos) aumenta con cada segundo de tiempo de carga, por lo que debemos priorizar la reducción del tiempo de carga en las páginas de inicio y de destino primero antes de abordar el problema en todo el sitio.

En un mundo perfecto, contratarías a un especialista o equipo de especialistas para cada uno de estos campos para que tenga un experto que observe el sitio web desde todos los ángulos. Sin embargo, las restricciones presupuestarias a menudo significan elegir un campo sobre el otro, o contratar trabajadores freelance proyecto por proyecto.

De vez en cuando encontrarás a alguien que dice hacerlo todo:

Los diseñadores que pueden codificar a veces se etiquetan a sí mismos como el paquete todo en uno, pero en realidad están más limitados que dos especialistas separados (aunque a veces esto podría ser una contratación inteligente si tiene un sitio simple).
Los diseñadores de UI tienen muchas habilidades superpuestas con las de los diseñadores web, por lo que algunas personas usarán esos títulos indistintamente.
UX y UI a menudo se agrupan, considerando que ambas son subespecializaciones.
UX a menudo se trata como una habilidad en otras profesiones, incluso fuera del diseño, como la gestión de productos.

Estas personas pueden ser útiles en caso de apuro, pero recuerda que un experto en todos los oficios no es maestro de nada: pueden conocer los conceptos básicos de varios campos, pero probablemente solo sean expertos en uno, si es que lo hacen.

También desea hacer distinciones entre sitios web y aplicaciones y computadoras de escritorio y dispositivos móviles. Cada trabajador tiene sus propias especialidades individuales: algunos desarrolladores tienen más experiencia en la creación de sitios móviles; algunos diseñadores se apegan exclusivamente a las aplicaciones y nunca hacen sitios web. Nuevamente, hay mucha superposición, pero si estás contratando para un proyecto específico, asegúrate de que los candidatos puedan manejar los detalles.

Entonces, ¿Cuál de estos especialistas puede ayudarte con tus objetivos comerciales particulares? ¿Y en qué debes fijarte a la hora de contratarlos? Echemos un vistazo más profundo a cada uno ahora.

Diseño Web

Diseño web de una página de inicio.

"Diseño web" es un término un poco arcaico, que se remonta a los días en que una sola persona manejaba todos los aspectos de diseño de un sitio web. Según los estándares modernos, el término "diseñador web" puede ser un poco vago; hoy, gracias a la tecnología y nuestra mayor comprensión del oficio, tenemos un arcoíris de subdivisiones.

Las subcategorías de diseño web incluyen tanto UI como UX, pero también otros acrónimos divertidos como IA (arquitectura de la información, que se ocupa del mapeo y la navegación del sitio) y CRO (optimización de la tasa de conversión, ajuste fino del diseño del sitio para aumentar las ventas, suscripciones u otros comportamientos). Hay docenas de estas subcategorías, y se crean nuevas todos los días a medida que los diseñadores intentan obtener mejores trabajos en un mercado competitivo.

En términos generales, el diseño web se relaciona con las imágenes y la funcionalidad de un sitio web. Es un campo intrínsecamente ligado al diseño gráfico en todos los niveles y se ocupa de los mismos principios de diseño de la comunicación visual.

Pero el diseño web es algo más que diseño gráfico. Ya sea que trabajen con sitios web o aplicaciones, los diseñadores deben conocer la funcionalidad, las limitaciones técnicas, las tendencias digitales y las expectativas de los usuarios, que cambian con frecuencia.

También hay un grado de conocimiento empresarial en el diseño web: los diseñadores deben comprender las tácticas de ventas digitales, como colocar el botón de "llamada a la acción" (CTA) para obtener ventas y registros de correo electrónico. El diseño del sitio influye en gran medida en el comportamiento del usuario, pero debido a que tiene muchos matices, algunos diseñadores lo hacen mejor que otros.

El diseñador web maneja las preocupaciones de diseño gráfico tradicional, como el color y la tipografía, junto con las preocupaciones digitales, como elegir la mejor estética para diferentes tamaños de pantalla. También requieren una comprensión de los conceptos comerciales, como el inicio y el cierre, para crear diseños que hagan que la llamada a la acción sea más atractiva. Después de todo, los deberes de un diseñador a veces incluyen crear iconos, gráficos o botones de interfaz desde cero, lo que se basa en la experiencia de los tres.

En cuanto a las responsabilidades laborales específicas, el proceso de diseño depende principalmente del diseñador, siempre que trabaje dentro de las pautas de marca existentes. Por lo general, el proceso implica que el diseñador cree prototipos del diseño y luego pruebe esos prototipos con usuarios reales o partes interesadas, y luego incorpore comentarios en diseños futuros.

Los diseñadores también pueden hacer wireframes, diseños básicos para preparar un prototipo, o una maqueta, una imagen perfecta de píxeles de cómo se verá la pantalla, excepto sin interactividad.

Una vez que se aprueba el prototipo, se envía al desarrollador para su codificación.

Qué buscar al contratar a un diseñador web:

Más que nada, necesitas saber lo que se quiere antes de poder encontrar el mejor diseñador web. Debido a tantas especializaciones, no se trata de si un diseñador es bueno o malo, sino de si encaja bien con el proyecto.
Presta atención a su portafolio. Con énfasis en el diseño gráfico, cada diseñador web tiene su propio estilo artístico único.
Busca un dominio de los aspectos que valoras. Si tienes un sitio con mucho texto, ve cómo manejan la tipografía, la legibilidad y el diseño de la página. Si estás creando un diseño de sitio web de comercio electrónico, ve si saben lo que hace una buena página de producto.
¿Su software preferido es compatible con el que usa el resto del equipo? Hay muchos programas de diseño diferentes: Adobe Photoshop, Illustrator, InDesign y Sketch, así como software de creación de prototipos como UXPin o Balsamiq. Consulta con tu otro personal para ver cuáles son las opciones.
Pregúntale a el diseñador sobre su proceso de diseño y su marco de tiempo. Todos los diseñadores tienen sus propios métodos y ciclos de diseño, así que verifica que se está contratando a alguien que se ajusta a la cultura de tu empresa o proyecto, así como a el horario.

Desarrollo Web

Programación de Back-end de sitio web.

El diseño del desarrollo web se distingue por el uso de código. El desarrollo es donde las cosas se vuelven técnicas, pero la buena noticia es que no tienes que saber de qué están hablando tus desarrolladores mientras ellos lo sepan (aunque sin duda es útil aprender los conceptos básicos).

El desarrollo web se divide en dos categorías principales:

Front-end (también conocido como lado del cliente): el código de cómo se muestra el sitio web (o la aplicación) en la pantalla. El desarrollador front-end está a cargo de dar vida a la visión del diseñador web, generalmente utilizando lenguajes informáticos como HTML, CSS y JavaScript. Naturalmente, no todo lo que planeó el diseñador es factible de manera realista, por lo que el desarrollador front-end a menudo trabaja de un lado a otro con el diseñador.

Back-end (también conocido como del lado del servidor o host): el "front-end" extrae de un sistema digital de recursos alojados en un servidor. El desarrollador de back-end administra esos recursos detrás de escena, codifica los datos en la base de datos y optimiza la forma en que se entregan esos datos. Utilizan lenguajes como PHP, Ruby, Python, Java o .Net.

Del mismo modo, un desarrollador full-stack es alguien que puede manejar tanto el desarrollo front-end como el back-end. A veces son una opción inteligente para las empresas emergentes que no pueden pagar más de una contratación, pero lo ideal sería contar con un equipo completo de desarrolladores con diversas especializaciones.

Qué buscar al contratar a un desarrollador web:

Asegurarse de ver si dominan los idiomas que se necesitan. Si no puede notar la diferencia, comentar qué le gustaría al cliente hacer con su sitio y escuchar sus recomendaciones.
Aunque no es obligatorio, es útil que un desarrollador participe en el proceso de diseño. Por ejemplo, un desarrollador podría decirle de manera preventiva a un diseñador si sus elecciones son posibles, ahorrando tiempo en las revisiones a largo plazo. Es posible que desees ver qué tan bien trabaja el desarrollador con un equipo, ya que algunos prefieren trabajar de forma autónoma.
Revisa sus sitios web anteriores a través de una lente de funcionalidad. ¿Funciona todo cómo debería? ¿Aparece alguna bandera? Es posible que no sepas lo suficiente sobre el desarrollo para entender cómo funciona, pero ciertamente sabes lo que es ser una persona normal que usa un sitio web.

Diseño UI (Interfaz de Usuario)

Diseño de interface UI.

Ahora que hemos explicado el diseño y desarrollo web, podemos analizar los campos más especializados, comenzando con el diseño de la interfaz de usuario o UI. Las interfaces de usuario son algo que todo el mundo usa sin pensar demasiado: no es necesario conocer el historial del ícono de la hamburguesa para saber que el botón con tres líneas es el menú.

Y ese es un principio constante en la mayoría de los campos del diseño web: si este trabajo se hace bien, ni siquiera se debería notar. Esto es más frecuente en el diseño de la interfaz de usuario: con una interfaz verdaderamente intuitiva, el usuario no tiene que pensar en ella para usarla.

Si tiene que pensar activamente en cómo usar los controles, se considera un mal diseño de interfaz de usuario. Buscar el botón que necesita o dedicar unos segundos a averiguar qué hace un botón lo distrae de la experiencia general de usar el sitio. El objetivo del diseño UI no es solo proporcionar todos los controles que un usuario pueda desear, sino también crear controles que se expliquen por sí mismos y que los usuarios entiendan de un vistazo.

Otra preocupación es la gestión del espacio. Los diseñadores de UI tienen que encontrar el término medio entre dar a los usuarios muchas opciones y conservar espacio en la pantalla. Así es como surgieron técnicas como los controles de desplazamiento y los menús desplegables. Es deber del diseñador de la interfaz de usuario decidir qué controles deben presentarse en todo momento y cuáles son lo suficientemente insignificantes como para ocultarlos o ignorarlos por completo.

El diseño de UI a menudo coincide con otro campo llamado diseño de interacción con la abreviatura “IxD”. El diseño de interacción se especializa en todas las formas en que un usuario interactúa con el sistema, incluida la interfaz, pero también áreas como las ventanas emergentes, de chat y de error. Debido a que el diseño de interacción enfatiza tanto el comportamiento del usuario, es como un punto intermedio entre el diseño de UI y UX.

Qué buscar al contratar a un diseñador UI:

El portafolio de un diseñador de UI debe decirte todo lo que necesitas saber. Prueba los sitios anteriores del candidato y ve lo fácil que son. ¿Puedes encontrar todo lo que necesitas? ¿Usar el sitio o la aplicación fue frustrante o fácil?
Más que en otras categorías, busca trabajos anteriores en el tipo específico de proyecto para el que se está contratando. El mejor diseñador UI de sitios web del mundo puede ser terrible al crear una interfaz para una aplicación de juegos. Contrata a alguien que tenga la experiencia adecuada.

Diseño UX (Experiencia de Usuario)

Experiencia de usuario.

En muchos sentidos, UX es como el campo del diseño web desde la perspectiva del usuario. ¿Cómo afecta el diseño de la página web al usuario? ¿Cómo afecta el diseño UI al usuario? Cuando avanza a las etapas avanzadas, UX se vuelve mucho más estratégico: "¿cómo diseñamos una página para que el usuario quiera registrarse?"

Como puedes imaginar, el diseño UX también incorpora muchos otros campos en el diseño web. Mucha gente habla de "UI vs UX", pero la verdad es que los dos trabajan juntos en lugar de competir. De hecho, hay tanta superposición que todo tipo de diseñadores web pueden beneficiarse de saber un poco sobre UX. Así es precisamente como UX se convirtió en una disciplina separada: contratar a un especialista en UX individual libera muchas otras responsabilidades del resto del equipo.

Aunque puede parecer superfluo al principio, en realidad existe una correlación directa entre el diseño de UX y los objetivos comerciales, como las ventas o las conversiones. Teniendo en cuenta que gran parte de la toma de decisiones humanas proviene de la emoción y el instinto, tiene sentido que optimizar el diseño de un sitio web pueda fomentar ciertos comportamientos y crear una atmósfera más propicia para esos comportamientos.

Por esa razón, los diseñadores UX también recurren mucho a los principios del diseño gráfico: atraer la atención con el tamaño, provocar las emociones correctas con los colores, crear un flujo visual predecible en la pantalla y colocar los CTA en los lugares correctos. Sin embargo, a diferencia del diseño gráfico tradicional, los especialistas en UX también deben tener en cuenta preocupaciones adicionales como la interactividad y el tiempo, lo que la convierte en una disciplina completamente separada de todas las demás, al mismo tiempo que está interconectada con todas ellas.

Qué buscar al contratar a un diseñador UX:

Al igual que con el diseño UI, debes "probar" sitios o aplicaciones anteriores del candidato. ¿Son fáciles de usar? ¿Estás disfrutando de la experiencia de usar su sitio?
Si no se tiene el presupuesto para contratar a un diseñador de UX por separado, pregunta a los candidatos en otros campos sobre su experiencia en UX. Estos deberes a veces se pueden manejar como un esfuerzo cruzado de diferentes equipos; un gerente de producto o un comercializador pueden explicar cómo quieren que sea la experiencia de usuario y luego el equipo de diseño se encarga del diseño visual y la implementación.

¿Qué pasa con los sitios de plantilla?

Sitios web de plantilla.

¿Qué pasa si estás usando un sitio de plantilla como WordPress, Squarespace o Wix? ¿Aún necesitas un equipo completo? ¿Necesitas a alguien extra?

Los sitios de plantillas siguen la mayoría de las mismas reglas, con algunas excepciones importantes:

Si estás utilizando un sitio de plantilla, no necesitas preocuparte tanto por el desarrollo de back-end.
Los sitios de plantillas suelen tener opciones limitadas y fijas para la interfaz de usuario.
Asegúrate de que los candidatos tengan experiencia en cualquier sitio en el que esté alojando el tuyo. Ser bueno en WordPress no se traduce necesariamente en ser bueno en Squarespace.

Aparte de esas excepciones, el uso de un sitio de plantilla es similar a cualquier otro sitio. Elige a tus diseñadores según lo que más necesites.

Conclusión: ¿Cuál se necesita más?

A estas alturas, debes poder distinguir el diseño y el desarrollo web y saber que "UI vs UX" no es tan preciso como "UI + UX". La pregunta es, ¿cuál deberías priorizar más si no puedes contratar especialistas para todos?

No hay una respuesta universal para eso. Debido a que cada uno de estos campos se ocupa de diferentes áreas, todo depende de las necesidades únicas del proyecto. Teniendo en cuenta los objetivos y deficiencias, es posible que se necesite un especialista más que los demás.

Para ayudarte a comprender cuál se necesita más, aquí hay una breve lista de los problemas que cada campo se especializa en resolver. Encuentra los mayores obstáculos a continuación y busca la solución en el campo correspondiente. Si ya se tiene un sitio existente, realiza algunas pruebas de usuario de antemano para ver qué quejas tienen los usuarios reales.

Diseño web

El sitio no responde (lo que significa que el sitio no se ve bien en los dispositivos móviles)
El sitio parece desactualizado
Gráficos de baja calidad
Los clientes no van a las páginas que se quiere que visiten
El tiempo en la página es demasiado corto

Desarrollo web

Errores (las funciones del sitio no funcionan como deberían)
Seguridad web y prevención de piratería
Demasiados errores 404
Demasiadas búsquedas de DNS fallidas
El sitio se desconecta
Cierto contenido no se carga

UI

Mala navegación
Falta de opciones de personalización
Falta de opciones para compartir en redes sociales
Quejas sobre "cómo hago esto" o "dónde puedo encontrar eso"

UX

Bajas tasas de conversión (mucho tráfico, pero pocas conversiones)
Alta tasa de rebote (visitantes que se van después de unos segundos)
Los usuarios no están terminando el contenido (videos o blogs)
Visitas fragmentadas, es decir, el usuario se va después de una página y en lugar de quedarse y explorar.

Por supuesto, algunos problemas se pueden solucionar con diferentes métodos, como explicamos con el ejemplo anterior de tiempos de carga lentos. Por eso es importante saber qué aspectos son los más importantes, para que cualquier solución que se elija esté más alineada con las prioridades.

¿Quieres aprender más sobre diseño web? Estos cursos en línea te pueden ser muy útiles: