2.

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 dentro 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 temario, 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!
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 malas, 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 empresas, 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.

¿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
detectar 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 oportunidades 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

principales 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
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 maravilloso mundo de los user persona. El objetivo es
detectar diferentes perfiles de cliente ideal para concretar nuestro
estudio.
Importante
Una app que puede ayudarte a trabajar en equipo y tener
todo research ordenado y limpio es MIRO.
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 tarea 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.

Figura 2. Ejemplo de user journal

Una vez que este proceso se ha completado para cada persona, es
posible refinar 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 mejoras 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.
El experto opina
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 esquematiza el diseño de página, incluyendo elementos de la
interfaz y sistemas de navegación, y cómo funcionan en conjunto.
Los wireframes generalmente pasan por muchas etapas y no hay una
forma correcta 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.
Importante
Los wireframes se enfocan en “qué hace la pantalla, no en cómo se ve”.
Cuando tenemos nuestra primera versión debemos someterla a
test con potenciales 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 sketches 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.
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 usarse 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)
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 coincidan con las personas identificadas. Podrían
realizarse varias rondas de pruebas 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 caracterí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 fundamental mantenerse al
día con los últimos desarrollos o, de lo contrario, es fácil quedarse atrás.

DISEÑO DE INTERFACES (UI)

Figura 5. Diferencias UX vs UI

PRINCIPIOS DEL DISEÑO DE

INTERFACES
1. Mantén la interfaz simple.
Las mejores interfaces son casi invisibles para el usuario. Evitan
elementos innecesarios y son claros en el lenguaje que utilizan, en las
etiquetas y en los mensajes. 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 (responder, retweet, me gusta o mensaje directo
al usuario que publicó el tweet). ¡Eso es todo lo que puedes hacer con
alrededor de 140 caracteres!
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 eficiencia. 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 mejorar la calidad de la imagen o incluso cómo
compartirla.
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
estructura 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 importantes 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.
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 especí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".
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 legibilidad 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 carga 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.

Ejemplo: los bancos usan mucho esto. Cuando tengas que crear una
transferencia 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.

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
aprendido 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
presentamos. 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.

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 diseñ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 estresado y desorientado.

Figura 10. Importancia del espacio negativo

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 jerarquí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 periodico. ¿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

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 dedar respuesta acuetiones
como “¿dónde pongo esto?”. Dan un orden, una estructura. Nos ayudan
a diseñar y permiten que la persona usuaria pueda disfrutar y digerir la
información fácilmente.

Importante
En función de las guías alineamos los elementos del diseño.
Imágenes: framing.
A la hora de incluir imágenes o ilustraciones, un buen encuadre de la
composició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 montó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.

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 dispuestos. Es el propósito que busca la fidelidad a ese
concepto base. Ser coherente es muy importante.
Importante
Si tu concepto es fuerte, podrás defenderlo y venderlo prácticamente tú
solo, dara a quién tengas delante.
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 funcionan como grid o retícula, es donde dividimos el

contenido en columnas.
▪ Cajas. Lugar donde se encuentran todos los elementos:

o Textos.

o Botones.

o Links.
o Imágenes.

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

izquierda.

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
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
producto 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.
¿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 experiencia 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érminos utilizados dentro de esta rama que te ayudarán a encontrar
referencias y más información para profundizar en este nuevo mundo.