UD018864_V01_T01 MD.PlantillaTexto(01).HTML.Esp.

dot

TEORÍA DEL DISEÑO WEB

 TEORÍA DEL DISEÑO WEB

ÍNDICE

TU RETO EN ESTA UNIDAD ........................................................................ 3

1. INTRODUCCIÓN AL UX .......................................................................... 5
1.1. ¿CÓMO SE HACE? ........................................................................................... 6
2. DISEÑO DE INTERFACES (UI) ............................................................... 12
2.1. PRINCIPIOS DEL DISEÑO DE INTERFACES ................................................. 12
2.2. ELEMENTOS DEL DISEÑO VISUAL .............................................................. 17
2.3. ELEMENTOS DEL DISEÑO WEB ................................................................... 21
3. DICCIONARIO DE TÉRMINOS ............................................................... 23
¿QUÉ HAS APRENDIDO? .......................................................................... 25
AUTOCOMPROBACIÓN............................................................................ 27
SOLUCIONARIO ....................................................................................... 31
BIBLIOGRAFÍA ......................................................................................... 33

1
 TEORÍA DEL DISEÑO WEB

TU RETO EN ESTA UNIDAD

Para diferenciar un proyecto de un buen proyecto es necesario pasar por una

serie de fases consecutivas, que nos llevan a descubrir distintos universos den-
tro de un mismo proyecto y generar argumentos para ofrecer al cliente y a los
usuarios finales un producto o servicio realmente trascendente.

En el área digital surgió el interés por estudiar al usuario, ya que, gracias a esos
datos, podemos ofrecerle mejores experiencias, lo que supone más ventas.
Por ello, en esta unidad nos introducimos en la famosa experiencia de usuario
(UX), para saber cómo abordar un diseño web correctamente y de dónde salen
muchas de las decisiones aplicadas en el diseño final.

Llegará un momento en el que haya que pensar en colores, tipografías, formas,

espacio, iconos, etcétera, pero eso lo haremos en el segundo apartado del te-
mario, diseño de interfaces (UI), donde te acompañaremos en recorrido por los
elementos que forman el UI y aspectos básicos que hay que tener en cuenta
para construir un diseño atractivo.

Esperamos que disfrutes mucho de las siguientes páginas. ¡Vamos a ello!

3
 TEORÍA DEL DISEÑO WEB

1. INTRODUCCIÓN AL UX
Para que entiendas rápidamente lo que es UX Design, piensa en la última vez
que fuiste a un restaurante:

 ¿Qué tipo de comida servían?

 ¿Por qué decidiste ir a ese restaurante?

 ¿Cuál fue tu primera impresión al entrar en el restaurante?

 ¿Tuviste que esperar en la entrada hasta que te dieron paso a tu mesa?

 ¿Qué tal estaba el menú?

 ¿Cuánto tiempo tardó en llegar la comida a la mesa?

 ¿Cómo te trataron?

 ¿Volverías?

La respuesta a estas preguntas, incluyendo todas tus emociones buenas o ma-

las, forman tu experiencia en el restaurante o UX.

El término UX viene de User Experience, o experiencia del usuario. Básicamente

es conocer cómo se siente una persona antes, durante y después de estar en
contacto con un producto o un servicio. Genera un alto interés para las empre-
sas, ya que nos descubre el nivel satisfacción y las necesidades de nuestros
usuarios. En definitiva, todo esto nos permite:

 Mejorar su experiencia.

 Aumentar la fidelidad con nuestro producto o servicio.

5
TEORÍA DEL DISEÑO WEB

1.1. ¿CÓMO SE HACE?

Para realizar un estudio de experiencia de usuario (UX) se debe pasar por una
serie de estudios consecutivos que, dependiendo de la fase de maduración de
nuestro producto o servicio, varían y se adaptan al proyecto.

Vamos a tomar como ejemplo un restaurante.

1. Recibimos el brief = Investigación (research).

El UX Designer hace un estudio de campo y otros tipos de estudios para detec-

tar para quién estamos diseñando. Puede que tenga que evaluar lo que ofrece
la empresa en su página web, hacer entrevistas a clientes para detectar oportu-
nidades y debilidades, y hacer un estudio de la competencia y ver qué se está
haciendo actualmente.

Estas tareas permitirán al diseñador de UX identificar las características princi-

pales necesarias para el producto mínimo viable (MVP) y comenzar a redactar
algunos personajes iniciales. Para los amantes de la comida, las características
principales pueden ser un menú, la capacidad de hacer reservas en línea y un
buscador de sucursales.

Figura 1. Ejemplo reunión con un cliente

6
 TEORÍA DEL DISEÑO WEB

2. Personas y arquitectura de información.

Con las características principales decididas, es hora de profundizar más en las

tareas que cada persona quiere realizar y por qué. Nos adentramos en el mara-
villoso mundo de los user persona. El objetivo es detectar diferentes perfiles de
cliente ideal para concretar nuestro estudio.

Una app que puede ayudarte a trabajar en equipo y

tener todo research ordenado y limpio es MIRO.

Importante

Ejemplo:

Una de las personas del Restaurante X podría ser Noelia, una veinteañera a la
que le gusta comer ensaladas artesanales en su hora de almuerzo. Una tarea
para ella sería: "A Samantha le gusta reservar la ensalada de cordero marroquí a
través de la aplicación en el teléfono, ya que le ahorra tiempo entre reuniones".

Con esta tarea podemos realizar el user journal, que consiste en detectar la ta-
rea que hay que realizar y analizar cada paso para alcanzarlo. De ese modo,
podremos detectar dónde enfoca Noelia su momento menos placentero de su
pedido de comida y es ahí donde nos enfocaremos para darle a usuarios como
Noelia una mejor experiencia.

7
TEORÍA DEL DISEÑO WEB

Figura 2. Ejemplo de user journal

Una vez que este proceso se ha completado para cada persona, es posible refi-
nar el contenido necesario, elaborando la arquitectura de la información y el
mapa del sitio (site map) y comenzar con los prototipos en papel. Los prototipos
de papel son bocetos muy toscos en los que se pueden hacer cambios y mejo-
ras rápida y fácilmente.

3. Wireframes y pruebas de usuario.

Después de los prototipos en papel, vienen los wireframes, pruebas de usuario y

muchas iteraciones.

Un wireframe es un esquema de página o plano de

pantalla. Es la guía visual que representa el esqueleto
o estructura visual de un sitio web. El wireframe es-
quematiza el diseño de página, incluyendo elementos
de la interfaz y sistemas de navegación, y cómo fun-
El experto opina cionan en conjunto.

8
 TEORÍA DEL DISEÑO WEB

Los wireframes generalmente pasan por muchas etapas y no hay una forma co-
rrecta o incorrecta de hacerlos. A menudo comienzan como diseños en blanco y
negro, muy básicos, a papel y lápiz, y se convierten en diseños interactivos, donde
los usuarios pueden navegar entre las diferentes páginas como lo harán con el
producto final. Cada etapa está marcada con pruebas e iteraciones del usuario.

Los wireframes se enfocan en "qué hace la pantalla,

no en cómo se ve".

Importante

Cuando tenemos nuestra primera versión debemos someterla a test con poten-
ciales usuarios, dándoles una función a realizar dentro de los prototipos y ver
cómo se desenvuelven. Con ello, descubriremos dónde mejorar hasta conseguir
un diseño fluido.

Haz todos los test y cambios que veas necesarios hasta comprobar que el
usuario se siente cómodo y satisfecho con el funcionamiento.

Cuando ves que la versión está más o menos enfocada, puedes pasar tus sket-
ches a ordenador, siempre en low-fi (esquema en blanco y negro sin imágenes),
para no preocuparte por el diseño sino por la funcionalidad. En esta parte se
trabaja en escala de grises.

9
TEORÍA DEL DISEÑO WEB

Figura 3. Ejemplo de mockup

4. Diseño visual.

A continuación, viene el diseño visual, donde los wireframes se convierten en

maquetas. Las maquetas incluyen las imágenes, el color y la tipografía finales. El
enfoque principal es la apariencia: deben ser perfectos en píxeles y mostrar
exactamente cómo se verá el diseño cuando cobre vida, para que puedan usar-
se como guía cuando comience el desarrollo.

Figura 4. RD UX/UI for RonDesignLab

Fuente: https://dribbble.com/shots/3442096-UI-Style-Guide-for-E-commerce-Site

10
 TEORÍA DEL DISEÑO WEB

5. Pruebas de usabilidad y más.

Con el diseño visual implementado, existe un prototipo funcional del producto

cuya usabilidad puede ser probada completamente por participantes que coin-
cidan con las personas identificadas. Podrían realizarse varias rondas de prue-
bas antes de que el diseño sea completamente correcto; una vez lo esté, el
nuevo producto finalmente estará listo para su desarrollo.

Los diseñadores de UX también asisten a las reuniones de sprint, supervisan el

desarrollo de productos para asegurarse de que no haya problemas de caracte-
rísticas (¡ocurre a menudo!) y ayudan a hacer pequeños ajustes en el diseño
cuando y como sea necesario.

Un último punto que queremos destacar es que el trabajo de un diseñador de

UX rara vez se termina después del lanzamiento del producto: habrá mejoras,
pequeños cambios, nuevos lanzamientos, comentarios para recopilar y análisis
para discutir con el equipo. La tecnología está en constante evolución y es fun-
damental mantenerse al día con los últimos desarrollos o, de lo contrario, es
fácil quedarse atrás.

11
TEORÍA DEL DISEÑO WEB

2. DISEÑO DE INTERFACES (UI)

Figura 5. Diferencias UX vs UI

2.1. PRINCIPIOS DEL DISEÑO DE INTERFACES

1. Mantén la interfaz simple.

Las mejores interfaces son casi invisibles para el usuario. Evitan elementos inne-
cesarios y son claros en el lenguaje que utilizan, en las etiquetas y en los mensa-
jes. Se centran en que la interacción sea eficaz.

Ejemplo: Twitter presenta solamente la información necesaria. Observa cómo

se simplifica la información de un tweet en una tarjeta. Además, se resumen las
interacciones que un usuario puede hacer con un determinado tweet (respon-
der, retweet, me gusta o mensaje directo al usuario que publicó el tweet). ¡Eso es
todo lo que puedes hacer con alrededor de 140 caracteres!

12
 TEORÍA DEL DISEÑO WEB

Figura 6. Interfaz de Twitter

2. Crea coherencia y utiliza elementos comunes de la interfaz de usuario.

Al utilizar elementos comunes, los usuarios se sienten más cómodos y pueden

hacer las cosas más rápidamente. También es importante crear patrones en el
lenguaje, la distribución y el diseño en todo el sitio para ayudar a facilitar la efi-
ciencia. Una vez que un usuario aprende a hacer algo, debería poder transferir
esa habilidad a otras partes del sitio.

Ejemplo: Photoshop para dispositivos móviles utiliza el carrusel común para

mostrar los diferentes filtros que puede aplicar a una imagen. Echa un vistazo a
la simplicidad de los iconos. Es natural entender cómo agregar texto, cómo me-
jorar la calidad de la imagen o incluso cómo compartirla.

13
TEORÍA DEL DISEÑO WEB

Figura 7. Ejemplo del carrusel de Photoshop para móviles

3. Sé decidido en el diseño de la página.

Considera las relaciones espaciales entre los elementos de la página y estructu-

ra la página según la importancia. La ubicación cuidadosa de los elementos
puede ayudar a llamar la atención sobre las piezas de información más impor-
tantes y puede ayudar al escaneo y la legibilidad.

Ejemplo: ¡Amazon muestra mucha información! Por eso es muy importante

utilizar el espacio correctamente. Echa un vistazo al espacio que le dan a los
nuevos productos: Prime y Alexa. Además, a primera vista, tiene información
personalizada a través de sus categorías principales. La barra de navegación de
Amazon se ha vuelto menos importante, más pequeña y más oscura.

14
 TEORÍA DEL DISEÑO WEB

Figura 8. Uso del espacio de Amazon

4. Usa el color y la textura de manera estratégica.

Puede dirigir la atención o desviar la atención de los elementos utilizando el

color, la luz, el contraste y la textura a su favor.

Ejemplo: el calendario del iPhone permite personalizar citas con colores para
resaltarlas. Sin embargo, su rojo/naranja se usa para resaltar un elemento espe-
cífico en la interfaz de usuario. Echa un vistazo a la diferencia de textura y color
entre "qué día es hoy" y "qué día estoy viendo".

15
TEORÍA DEL DISEÑO WEB

5. Utiliza la tipografía para crear jerarquía y claridad.

Considera cuidadosamente cómo usar la tipografía. Diferentes tamaños, fuentes

y disposición del texto para ayudar a aumentar la capacidad de escaneo, la legi-
bilidad y la legibilidad.

Ejemplo: Blinkist permite leer las lecciones clave de más de 2.000 libros de no
ficción en 15 minutos o menos. Echa un vistazo a cómo usa tamaños, fuentes y
arreglos del mismo tipo de letra para diferenciar títulos, autores, descripciones
de libros y secciones de la aplicación.

Figura 9. Ejemplo de tipografía Blinklist

6. Piensa en valores predeterminados.

Al pensar detenidamente y anticiparte a los objetivos que las personas usuarias

buscan en un sitio, puedes crear valores predeterminados que reduzcan la car-
ga para ellas. Esto se vuelve particularmente importante cuando se trata del
diseño de formularios, donde se puede tener la oportunidad de tener algunos
campos preseleccionados o completados.

16
 TEORÍA DEL DISEÑO WEB

Ejemplo: los bancos usan mucho esto. Cuando tengas que crear una transfe-
rencia de dinero, puedes hacer clic en "Recuperar anterior" y los datos que ya
rellenaste de una transacción anterior se insertan automáticamente en los
campos correspondientes.

2.2. ELEMENTOS DEL DISEÑO VISUAL

Formas.

A partir de estos elementos puedes crear cualquier tipo y complejidad de forma.

Siempre que empieces el diseño de una forma, empezarás en un punto con una
dirección hacia otro punto; esa conexión formará una línea y, al final, sumando
todos los puntos y las líneas, conseguirás una forma.

Color.

Partiendo de la base de que los colores tienen significados que hemos aprendi-
do desde la infancia (rojo = parar; amarillo = precuación; verde = se puede) y
que varían según la cultura, es necesario que, al utilizarlos, tengamos en cuenta
que elegir un color tiene un cierto significado y transmite una intención y un
tono. Además, es conveniente tener en cuenta siempre para quién estamos
diseñando.

Tipografía.

Ten en cuenta que es importante lo que decimos pero también cómo lo presen-
tamos. La tipografía que escogemos es la forma en la que se ven las palabras y,
como el color, define un tono.

Las distintas fuentes están creadas con propósitos diferentes, es decir, algunas
son para grandes titulares y otras son perfectas para la lectura. Cuando tengas
que escoger una tipografía puedes ayudarte pensando que cada tipografía tiene
una personalidad distinta y ver si encaja con aquello que quieres transmitir.

17
TEORÍA DEL DISEÑO WEB

Espacio.

Entendemos el espacio de dos formas:

 Espacio positivo, que corresponde a los elementos que ocupan un

espacio: fotografías, formas, textos, etcétera.

 Espacio negativo es todo lo que queda vacío. Lo encontramos tanto

en la tipografía (espacio entre letras o kerning) como en el resto de
elementos y secciones.

Este último es muy importante y hay que tenerlo en cuenta como parte del di-
seño. Es un elemento más. Hay que considerarlo como un espacio de descanso
para el usuario, por lo que no ha de ocupar ni mucho ni poco, sino lo justo y
necesario.

Si tenemos mucho espacio, parecerá que el diseño no está acabado; si tenemos

muy poco, habrá demasiado ruido y es posible que el usuario se sienta estresa-
do y desorientado.

Figura 10. Importancia del espacio negativo

18
 TEORÍA DEL DISEÑO WEB

Equilibrio, ritmo y contraste.

Para crear un diseño equilibrado debemos crear un ritmo y un contraste que el

usuario siga. Para ello, se puede crear contraste jugando con los pesos de una
tipografía, jugando con tamaños o con colores.

Escala y jerarquización.

El tamaño no solo te permite crear equilibrio, ritmo y contraste, sino también jerar-
quía. La jerarquía determina la importancia de cada elemento dentro de un diseño.
Esto no consiste en hacer el logo más grande y llamativo. Para verlo más claro, lo
mejor es que cojas una revista o periódico. ¿Qué es lo que ves más grande?

Los titulares suelen ser lo más grande (en web, H1, H2) y lo más corto. Esto te
permite escanear la información y ver rápidamente si hay algo de esa página
que te interesa. Si ves un título que te interesa, podrás ver un subtítulo un poco
más extenso antes de entrar en el artículo final.

El ejemplo de jerarquización más común es el de textos.

Figura 11. Ejemplo de jerarquización de textos

19
TEORÍA DEL DISEÑO WEB

Guías y alineaciones.

Esta parte es muy importante. Si te causa rechazo, puedes intentar verlo como
un juego, por ejemplo el Tetris. Consiste en colocar elementos de forma que
haya un orden equilibrado. Conseguimos el equilibrio estableciendo relaciones
entre los elementos dispuestos en el diseño. Son invisibles, pero siempre están
ahí y, si te fijas, se ven, están en cualquier diseño. Ayudan mucho a la hora de
dar respuesta a cuestiones como "¿dónde pongo esto?". Dan un orden, una es-
tructura. Nos ayudan a diseñar y permiten que la persona usuaria pueda disfru-
tar y digerir la información fácilmente.

En función de las guías alineamos los elementos del

diseño.

Importante

Imágenes: framing.

A la hora de incluir imágenes o ilustraciones, un buen encuadre de la composi-

ción marca la diferencia. Con ello creamos interés. Consiste en dirigir la atención
hacia aquello que queremos que se vea.

Texturas y motivos/patterns.

Este elemento es opcional. A veces puede ser la guinda de tu diseño o añadirle

algo que le falta. Cuando los uses es necesario no saturar el diseño con un mon-
tón de texturas, elige una y sé fiel a ella durante todo el diseño.

Los motivos o patrones consisten en la repetición de elementos que proporcionan

dinamismo. También, según cómo los usemos, pueden funcionar como textura.

20
 TEORÍA DEL DISEÑO WEB

Concepto visual.

Es la diferencia entre un buen diseño y un diseño de stock. Es la idea detrás del

diseño, el significado más profundo más allá de unas fotos y elementos dispues-
tos. Es el propósito que busca la fidelidad a ese concepto base. Ser coherente
es muy importante.

Si tu concepto es fuerte, podrás defenderlo y vender-

lo prácticamente tú solo, dará igual a quién tengas
delante.
Importante

2.3. ELEMENTOS DEL DISEÑO WEB

Cabecera o header. En esta zona encontraremos el menú con el logotipo.

Cuerpo o body. Donde se encuentra el contenido. Este se divide en:

 Secciones. Es el apartado donde van a colocarse los elementos, es el

folio. Un rectángulo que normalmente tiene 1.920 px de ancho.

 Bloques. Dentro de las secciones encontramos los bloques que funcio-

nan como grid o retícula, es donde dividimos el contenido en columnas.

 Cajas. Lugar donde se encuentran todos los elementos:

 Textos.

 Botones.

 Links.

 Imágenes.

 Formato. Sangría de la primera línea, sangría izquierda.

21
TEORÍA DEL DISEÑO WEB

Pie o footer. Sección final de la web donde ponemos los créditos de la página, el
año de publicación y si está o no actualizada. Puedes encontrar una pequeña
guía de la web donde aparece de nuevo el logo, una descripción, el aviso legal, la
suscripción a la newsletter, etcétera. Esta sección es el cierre de la página.

Animaciones. Una vez tenemos los elementos dispuestos en nuestra web, toca
jugar con los elementos: darles movimiento aporta dinamismo y la hace más
atractiva. Un buen ejemplo es apple.com.

Figura 12. Elementos de la home de la web de la escuela

22
 TEORÍA DEL DISEÑO WEB

3. DICCIONARIO DE TÉRMINOS
 UX. User Experience = Experiencia de usuario.

 UI. User Interface = Diseño de interfaz.

 USP. Unique selling point = Propuesta de venta. Lo que nos hace únicos
y diferentes de la competencia.

 MVP. Minimum Viable Product = Producto viable mínimo: es un produc-

to con suficientes características para satisfacer a los clientes iniciales y
proporcionar retroalimentación para el desarrollo futuro.

 Wireframe. Es una guía visual que representa el esqueleto o estructura

visual de un sitio web.

 Low-fi o Low Definition. Una pieza en baja resolución.

 High-fi o High Definition. Una pieza en alta resolución.

 Call to action o CTA. Suele llamarse así a los botones o lugares donde
queremos atraer la atención del usuario para que realicen una acción.

 Scroll. El movimiento vertical que hacemos al deslizar una página web

hacia arriba o hacia abajo.

 Flow. Recorrido predeterminado en una web.

23
 TEORÍA DEL DISEÑO WEB

¿QUÉ HAS APRENDIDO?

Como te contábamos al comienzo de la unidad, antes de ponerte a diseñar hay

una investigación previa que debes realizar en función del proyecto que tienes
entre manos. Ahora ya sabes que este estudio se denomina diseño de expe-
riencia de usuario o UX Design.

Una vez que tengas desarrollada la primera fase de UX con sus test y wireframes
puedes pensar en diseñar la interfaz (User Interface o UI), donde has visto las
reglas principales del diseño de interfaces, los elementos que toman acción
dentro del diseño y cómo se secciona una web.

Además de distinguir entre UX y UI, conoces todo un nuevo diccionario de tér-

minos utilizados dentro de esta rama que te ayudarán a encontrar referencias y
más información para profundizar en este nuevo mundo.

25
 TEORÍA DEL DISEÑO WEB

AUTOCOMPROBACIÓN

1. ¿Qué es UX y UI?

a) UX hace que el producto sea bonito y UI que sea útil.

b) UX hace que el producto sea útil y UI que sea bonito.

c) UX estudia al usuario y UI crea una conexión especial.

d) Las dos anteriores son correctas.

2. ¿Cuál es el punto de partida del UX?

a) User persona.

b) Reseach.

c) Wireframes.

d) Todas las respuestas son incorrectas.

3. ¿Qué valora el UX?

a) El comportamiento.

b) La experiencia del usuario con un producto o servicio.

c) Los problemas a los que se enfrenta el usuario en contacto con un pro-

ducto o servicio.

d) Todas las respuestas son correctas.

27
TEORÍA DEL DISEÑO WEB

4. ¿Qué elemento del diseño proporciona orden en la composición?

a) La jerarquía de textos.

b) Las guías o grids.

c) La consistencia en los elementos dispuestos.

d) Todas las respuestas son correctas.

5. ¿Cómo se pueden hacer los primeros test de una app o una web?

a) En el ordenador.

b) A mano.

c) En una tableta gráfica.

d) Por teléfono.

6. ¿Por qué es tan importante el espacio en blanco?

a) Se ve más bonito.

b) Gusto propio.

c) Es una moda.

d) Deja reflexionar al usuario.

7. ¿Qué es el concepto visual?

a) La idea detrás del diseño.

b) La guía de estilo.

c) Ninguna de las anteriores.

d) Las dos primeras son correctas.

8. ¿Cuál es el elemento visual más básico que podemos encontrar?

a) Puntos.

b) Líneas.

c) Formas.

d) Todas las respuestas son correctas.

28
 TEORÍA DEL DISEÑO WEB

9. ¿Qué es el espacio positivo?

a) El lugar en el que no debemos poner nada.

b) El lugar en el que están los elementos como fotografías, botones, etcétera.

c) El lugar en el que hay una interacción.

d) Todas las respuestas son correctas.

10. ¿Qué se hace antes?

a) Primero UI.

b) Da igual.

c) Todas las respuestas son incorrectas.

d) Primero UX.

29
 TEORÍA DEL DISEÑO WEB

SOLUCIONARIO

1. d 2. b 3. d 4. d 5. b

6. d 7. a 8. d 9. b 10. d

31
 TEORÍA DEL DISEÑO WEB

BIBLIOGRAFÍA

 Diseñando la propuesta de valor: Cómo crear los productos y servicios que

tus clientes están esperando (Deusto, 3 de marzo de 2015). ISBN: 978-
8423419517.

 Busines Model Canvas:

https://www.strategyzer.com/canvas/business-model-canvas.

33