Diseño web, desarrollo web, UI y UX: ¿Cuál es la diferencia y cuál necesitas?

¿Cuál es la diferencia entre el diseño y el desarrollo de la web? ¿Y qué hay de la UI vs. UX? ¿Qué significan estas divisiones? ¿Por qué hay tantas siglas? ¿No quieren los técnicos que todo sea fácil de usar?

Si eres nuevo en el diseño de un sitio web, encontrarte con la terminología de la industria tecnológica 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 de la web es algo que todo negocio debería hacer en algún momento; si quieres un sitio web exitoso, puedes necesitar un traductor.

Para eso es este artículo. Si está diseñando su primer sitio web o simplemente quiere entender mejor la industria, aquí explicamos y diseccionamos cuatro de los términos más usados y más problemáticos de la tecnología actual: UI, UX, diseño web y desarrollo web. Después de leer esto, no sólo sabrá lo que hace cada campo, sino también en cuál necesita que su negocio se enfoque más.

El ABC de la informática

Wireframe del nuevo diseño del sitio web, a través de Pexels

Comencemos con algunas definiciones básicas para aliviar su confusión inicial y darle algo de contexto antes de sumergirnos más profundamente:

  • Diseño web Una amplia categoría paraguas para todo lo relacionado con el diseño de las imágenes y la usabilidad de un sitio web. Tanto el diseño de la interfaz de usuario como el de la interfaz de usuario, 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 a su vez en “front-end” y “back-end”, que se explican a continuación.
  • Interfaz de usuario (UI) Especialización del diseño web que trata de los controles que la gente utiliza para interactuar con un sitio web o una aplicación, incluyendo pantallas de botones y controles de gestos.
  • User Experience (UX) Otra especialización del diseño web, esta trata del comportamiento y las sensaciones del usuario al usar el sitio o la aplicación. El diseño UX encapsula muchas otras áreas, pero las ve desde la perspectiva del usuario.

Como ya pueden ver, ninguna de estas áreas es exclusiva y hay un montón de superposición. El diseño y el desarrollo web son sólo dos caras de la misma moneda, el diseño de la interfaz de usuario influye en el diseño de la interfaz de usuario, el desarrollo web los soporta 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.

Por ejemplo, veamos los tiempos de carga , un problema común a todas las páginas web. ¿Cómo es que cada campo se refiere a los tiempos de carga:

  • Diseño web : Si una página tarda mucho en cargarse, hay demasiado contenido o es demasiado compleja. Los archivos de imagen pueden ser comprimidos, los activos pueden ser ajustados & re-exportados y las páginas pueden ser recortadas del exceso de contenido.
  • Desarrollo web : Para hacer que la carga de contenido sea más rápida, podemos intentar una mejor compresión de archivos para reducir el tamaño de los mismos, 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 tan sensibles como sea 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 pocos momentos) aumenta con cada segundo de tiempo de carga, por lo que debemos dar prioridad a 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, se contrataría a un especialista o equipo de especialistas para cada uno de estos campos para que un experto vea su sitio web desde todos los ángulos. Sin embargo, las limitaciones presupuestarias a menudo significan elegir un campo sobre el otro, o contratar a un 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 puede ser una contratación inteligente si tienes un sitio simple).
  • Los diseñadores de interfaz tienen muchas habilidades que se superponen con los diseñadores web, así que algunas personas utilizan esos títulos indistintamente.
  • UX y UI a menudo se agrupan, considerando que ambas son subespecializaciones.
  • El UX suele ser tratado como una habilidad en otras profesiones, incluso fuera del diseño, como la gestión de productos.

Estas personas pueden ser útiles en un apuro, pero recuerde que un gato de todos los oficios es el maestro de la nada. Pueden saber lo básico de múltiples campos, pero es probable que sólo sean expertos en uno, si es que hay alguno.

También quieres hacer distinciones entre sitios web & aplicaciones y escritorio & móvil. Cada trabajador tiene su propia especialidad individualalgunos desarrolladores tienen más experiencia en la construcción de sitios móviles; algunos diseñadores se dedican exclusivamente a las aplicaciones y nunca hacen sitios web. Una vez más, hay mucha superposición, pero si está contratando para un proyecto específico, asegúrese de que sus candidatos puedan manejar los detalles.

Entonces, ¿cuál de estos especialistas puede ayudarle con sus objetivos comerciales particulares? ¿Y qué debería buscar al contratarlos? Echemos un vistazo más profundo a cada uno ahora.

Diseño web

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

Figgy & Diseño de la página principal de Plum por DSKY

Las subcategorías de diseño web incluyen tanto UI como UX, pero también otras siglas divertidas 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 del diseño del sitio para aumentar las ventas, las inscripciones u otras acciones específicas). Hay docenas de estas subcategorías, y cada día se crean nuevas a medida que los diseñadores tratan de conseguir mejores trabajos en un mercado competitivo.

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

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

También hay un cierto grado de conocimiento empresarial en el diseño web: los diseñadores deben entender las tácticas de ventas digitales, como por ejemplo cómo 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 mucho en el comportamiento del usuario, pero como es tan matizado, algunos diseñadores son mejores que otros.

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

En cuanto a las responsabilidades específicas del trabajo, el proceso de diseño depende en su mayoría del diseñador, siempre y cuando trabajen dentro de las directrices de la marca existente. Típicamente el proceso implica que el diseñador cree prototipos del diseño, y luego pruebe esos prototipos con los usuarios reales o con los interesados, y luego incorpore la retroalimentación en los diseños futuros.

Los diseñadores también pueden hacer marcos de alambre , diseños a hueso de un diseño para preparar un prototipo, o una maqueta , una imagen pixelada de cómo se verá la pantalla excepto sin interactividad.

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

Qué buscar cuando se contrata a un diseñador web…

  • Más que nada, necesitas saber lo que quieres antes de poder encontrar el mejor diseñador web para ti. Debido a tantas especializaciones, no se trata de si un diseñador es bueno o malo, sino de si es bueno para ti.
  • Presta atención a su cartera. Con el énfasis en el diseño gráfico, los diseñadores web tienen cada uno su propio y único estilo artístico.
  • Busca el dominio de los aspectos que valoras. Si tienes un sitio con mucho texto, mira cómo manejan la tipografía, la legibilidad y el diseño de la página. Si estás construyendo un diseño de un sitio web de comercio electrónico, mira si saben lo que hace una buena página de productos. Mira los mejores diseñadores de sitios web de comercio electrónico aquí.
  • ¿Su software preferido es compatible con el que utiliza el resto de su equipo? Hay muchos programas de diseño diferentes: Adobe Photoshop, Illustrator, InDesign y Sketch, así como programas de prototipos como UXPin o Balsamiq. Comprueba con el resto de tu equipo para ver cuáles son tus opciones.
  • Pregunte a su 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 compruebe que está contratando a alguien que se ajusta a la cultura de su empresa, así como a su calendario.

Desarrollo de la web

El diseño y el desarrollo de la web se distinguen por el uso del código. En el desarrollo es donde las cosas se vuelven técnicas, pero la buena noticia es que no tienes que saber de qué hablan tus desarrolladores mientras lo hagan (aunque ciertamente es útil aprender lo básico).

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

Front-end (también conocido como client-side ): El código de cómo se muestra el sitio web (o la aplicación) en la pantalla. El desarrollador del front-end se encarga de dar vida a la visión del diseñador web, típicamente usando lenguajes de computación como HTML, CSS y JavaScript. Naturalmente, no todo lo que el diseñador planeó es realista, así que el desarrollador del front-end a menudo trabaja de ida y vuelta con el diseñador.

Back-end (también conocido como server-side ): El “front-end” saca de un sistema digital de recursos alojados en un servidor. El desarrollador del “back-end” gestiona esos recursos entre bastidores, codificando los datos en la base de datos y optimizando la forma en que se entregan esos datos. Utilizan lenguajes como PHP, Ruby, Python, Java o .Net.

De manera similar, un desarrollador de pila completa es alguien que puede manejar tanto el desarrollo del front-end como del back-end. A veces son una opción inteligente para las startups que no pueden permitirse más de una contratación, pero lo ideal sería tener un equipo completo de desarrolladores con diversas especializaciones.

Qué buscar cuando se contrata a un desarrollador web…

  • Asegúrate de ver si hablan con fluidez los idiomas que necesitas. Si no puedes notar la diferencia, diles lo que te gustaría hacer con tu sitio y escucha su recomendación.
  • Aunque no es obligatorio, es útil que un desarrollador participe en el proceso de diseño. Por ejemplo, un desarrollador podría decirle a un diseñador, de manera preventiva, si sus elecciones son posibles, ahorrando tiempo en las revisiones a largo plazo. Tal vez quiera investigar qué tan bien trabaja su desarrollador con un equipo, ya que algunos prefieren trabajar de manera autónoma.
  • Revisa sus sitios web anteriores a través de una lente de funcionalidad. ¿Funciona todo como debería? ¿Aparece alguna bandera? Puede que no sepas lo suficiente sobre desarrollo para entender cómo funciona, pero ciertamente sabes lo que es ser una persona normal usando un sitio.

Interfaz de usuario (UI)

Ahora que hemos explicado el diseño y desarrollo de la web, podemos discutir los campos más especializados, empezando por el diseño de la interfaz de usuario. Las UI son algo que todo el mundo usa sin pensarlo mucho, no necesitas conocer la historia del icono de la hamburguesa para saber que el botón con tres líneas es tu menú.

Diseño de iconos por tongal

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

Si tienes que pensar activamente en cómo usar los controles, se considera un mal diseño de la UI. Buscar el botón que necesitas o pasar unos segundos averiguando qué hace un botón, ambas cosas te distraen de la experiencia general de usar el sitio. El objetivo del diseño de la interfaz de usuario no sólo es proporcionar todos los controles que un usuario podría querer, sino también crear controles autoexplicativos que los usuarios entiendan de un vistazo.

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

Diseño de iconos por Meileelogo

El diseño de la interfaz de usuario 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, incluyendo la interfaz pero también áreas como las ventanas emergentes, el chat y las ventanas 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 la interfaz y el de la UX.

Qué buscar cuando se contrata a un diseñador de UI…

  • El portafolio de un diseñador de UI debería decirte todo lo que necesitas saber. Pruebe los sitios anteriores de su candidato y vea lo fácil que es. ¿Puedes encontrar todo lo que necesitas? ¿Usar el sitio/aplicación fue frustrante o fácil?
  • Más que en otras categorías, busque trabajos anteriores en el tipo específico de proyecto para el que está contratando. El mejor diseñador de interfaces de sitios web del mundo podría ser terrible para hacer una interfaz para una aplicación de juego. Contrata a alguien que tenga la experiencia adecuada.

Experiencia del usuario (UX)

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 la interfaz de usuario al usuario? Cuando se avanza a las etapas avanzadas, UX se vuelve mucho más estratégico, como en, “¿cómo diseñamos una página para que el usuario quiera registrarse?”

Como puedes imaginar, el diseño de 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 alivia un montón de otras responsabilidades del resto del equipo.

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

Por esa razón, los diseñadores de UX también se basan mucho en los principios del diseño gráfico: atraer la atención con el tamaño, suscitar las emociones adecuadas con los colores, crear un flujo visual predecible a través de la pantalla y colocar los CTA en los lugares adecuados. Sin embargo, a diferencia del diseño gráfico tradicional, los especialistas de UX también deben tener en cuenta otras preocupaciones como la interactividad y la sincronización, lo que hace que sea una disciplina completamente separada de todas las demás, mientras que simultáneamente está interconectada con todas ellas.

Qué buscar cuando se contrata a un diseñador de UX…

  • Al igual que con los diseños de la interfaz de usuario, quieres “probar” sitios o aplicaciones anteriores de tu candidato. ¿Son fáciles de usar? ¿Disfrutas de la experiencia de usar su sitio?
  • Si no tienes el presupuesto para contratar a un diseñador de UX por separado, pregunta a los candidatos de otros campos sobre su experiencia en UX. Estas tareas a veces pueden ser manejadas como un esfuerzo cruzado de diferentes equipos; un gerente de producto o un comercializador puede explicar lo que quieren que sea el UX, y luego el equipo de diseño se encarga del diseño visual y la implementación.

¿Qué hay de los sitios de plantillas?

¿Y si estás usando un sitio de plantillas como WordPress, Squarespace o Wix? ¿Todavía necesitas un equipo completo? ¿Necesitas a alguien más?

Diseño del tema de WordPress por Mike Barnes

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

  • Si estás usando un sitio de plantillas, no tienes que preocuparte tanto por el desarrollo del backend.
  • Los sitios de plantillas suelen tener opciones limitadas y fijas para la UI.
  • Asegúrate de que los candidatos tienen experiencia en cualquier sitio donde estés 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 tus diseñadores de acuerdo a lo que más necesites.

¿Cuál es el que más necesitas?

A estas alturas, deberías ser capaz de diferenciar el diseño y desarrollo de la web y sabes que “UI vs UX” no es tan exacto como “UI + UX”. La pregunta es, ¿cuál debería ser tu prioridad si no puedes contratar especialistas para todos ellos?

No hay una respuesta universal para eso. Debido a que cada uno de estos campos trata con áreas diferentes, todo depende de las necesidades únicas de su empresa. Considerando sus propios objetivos y defectos, puede que necesite un especialista más que los demás.

Para ayudarte a entender cuál es el que más necesitas, aquí tienes una breve lista de los problemas en los que cada campo se especializa para resolver. Encuentra tus mayores obstáculos a continuación y busca la solución en el campo correspondiente. Si ya tienes 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 anticuado
  • gráficos de baja calidad
  • los clientes no van a las páginas que quieres que vayan
  • el tiempo en la página es demasiado corto

Desarrollo de la web

  • bugs (las funciones del sitio no funcionan como deberían)
  • seguridad web & prevención de hackers
  • demasiados 404 errores
  • demasiadas búsquedas fallidas de DNS
  • el sitio se desconecta
  • ciertos contenidos no se cargan

UI

  • mala navegación
  • falta de opciones de personalización
  • falta de opciones para compartir socialmente
  • quejas sobre “cómo hago esto” o “dónde puedo encontrar eso”

UX

  • tasas de conversión bajas (mucho tráfico pero pocas conversiones)
  • alta tasa de rebote (los visitantes 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 a explorar

Por supuesto, algunos problemas pueden ser arreglados por diferentes métodos, como explicamos con el ejemplo de los tiempos de carga lenta arriba. Por eso es importante saber qué aspectos quieres priorizar, de modo que cualquier solución que elijas esté más alineada con tus prioridades.

¿Quieres saber más sobre el diseño web? Mira nuestro artículo sobre cómo crear un sitio web!

Busca en nuestra comunidad de diseñadores profesionales para encontrar tu pareja perfecta.

admin

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicar un comentario