Presentación sobre diseño y planificación de interfaces gráficas web

1. Planificación de
interfaces
gráficas
Autor: Sinuhé Navarro Martín

2. ¿Qué es el diseño?
Diseñar es resolver un
problema.
Eso implica ponerse en
los zapatos de otras
personas y observar de
cerca

3. “Diseño web no es saber usar una
aplicación.
Es conocer la utilidad de tus
herramientas y recursos”
@Wakkos

4. Llegando a acuerdos
❖ Diseñadorxs y desarrolladorxs deben trabajar juntos y
conocer el proceso de trabajo y las herramientas del otro.
❖ Ambos han de conocer la utilidad y finalidad de sus
herramientas y recursos para conseguir asesorar al cliente de
manera efectiva.
“La gente no sabe lo que
quiere hasta que se lo
enseñas”
Steve Jobs

5. Del diseño a la web
❖ Una web no es un poster. Tienden a ser minimalistas para
resaltar el contenido. Una web demasiado innovadora es
contraproducente.
❖ Una interfaz web tiene un objetivo. Diseña el camino más
corto hacia él y evita la disrupción.

6. Fases de la
planificación de un
diseño web
1. Define las propuestas de
valor únicas de cada página
o sección.
2. Conoce a tu usuario.
3. Proporciona una
experiencia placentera
mediante las herramientas
y conocimientos de diseño
web que conozcas.

7. Define con precisión
y claridad la
propuesta de valor
única
Una propuesta única de valor debe aportar
una solución a los problemas de nuestros
clientes o satisfacer una necesidad de los
mismos.
Se trata de una característica única que
nuestra competencia no puede imitar. Por
ejemplo:
❖ Atención de postventa en productos y
servicios.
❖ Consultoría posterior al servicio.
❖ Entrega gratuita / inmediata sobre todo en el
caso de productos.
❖ Mantenimiento gratuito (por ejemplo un sitio
web).
❖ Atención al cliente 24/7.

8. Define con precisión
y claridad la
propuesta de valor
única
Eliminar problemas
Como te mencionaba antes, la propuesta de
valor debe resolver un problema de nuestros
clientes potenciales.
Reducir el gasto de dinero, de tiempo o
de esfuerzo para realizar una tarea.
Hacer sentir mejor al cliente.
Corregir o mejorar herramientas que no
dan buenos resultados en la actualidad.
Acabar con problemas cotidianos.
Facilitar las cosas.
Aumentar el prestigio, confianza o
estatus de nuestros clientes.
Disminuir el riesgo: social, tecnológico o
financiero.

9. Define con precisión
y claridad la
propuesta de valor
única
Satisfacer necesidades
La verdadera revolución del iPhone se
centró en satisfacer nuestra necesidad de
entretenimiento e información. Una
verdadera computadora de bolsillo que nos
permite tener una navegador (browser) +
juegos, músicas aplicativos, y de paso nos
comunica; al igual que cualquier otro
teléfono.
Hoy en día cubre nuestras necesidades de
estatus ya que el resto de los dispositivos
han imitado sus funcionalidades.

10. Define con precisión
y claridad la
propuesta de valor
única
Características
❖ Es el centro y pilar fundamental de un
modelo de negocio bien pensado y
ejecutado.
❖ Se centra en resolver problemas o
satisfacer necesidades de los clientes.
❖ Se enfoca en lo que el cliente desea y
no en lo que nosotros queremos.
❖ Se trata de una característica única
que nuestra competencia no puede
imitar.
❖ No sólo se trata de ofrecer una
característica en un producto, sino que
se focaliza en cuestiones emocionales
y sociales de los clientes.

11. Conoce a tu
público
1. Antes de comenzar a diseñar tu sitio web,
primero debes definir quiénes son tus
visitantes, porque lo que es intuitivo para
una audiencia puede que no lo sea para otra.
2. Después, debes averiguar qué están
esperando tus visitantes y cómo
responden al diseño de página. Haz
usabilidad y pruebas A/B, encuesta a tus
clientes, y monitorea el contenido de los
influenciadores dentro tu industria.
3. Una vez que hayas entendido sus
comportamientos, expectativas y brechas
de conocimiento, puedes diseñar un sitio
web que les resulte fácil de usar.

12. Conoce a tu
público
Define tus users personas
Las user personas son arquetipos que
representan de forma ficticia los diferentes
tipos de usuarios que pueden interactuar con
tu servicio o producto y que debes conocer en
un contexto amplio: motivaciones, intereses
y comportamientos.
Debes tener en cuenta que las user personas
están construidas con base en datos, producto
de una investigación previa donde se
recolecta información en entrevistas, pruebas
de usabilidad, datos cualitativos, soporte y
comentarios de todas las personas
involucradas directamente con los usuarios.

13. Herramientas
Técnicas de web anaytics
La analítica Web es una herramienta que nos ayuda a
medir, entender y optimizar el uso de nuestra web.
Se utiliza el rastro que dejan los usuarios, para observar
cuál es la experiencia que están teniendo y así detectar
posibles problemas, tomar decisiones y poder
solucionarlos.
Técnicas cualitativas
❖ 1- Test de usuario
❖ 2- Entrevistas
❖ 3- Focus Group
❖ 4- Etnografía
❖ 5- Voice of the
Customer
❖ 6- BenchMarking
❖ 7- CardSorting
Técnicas cuantitativas
❖ 1- Inteligencia Competitiva
❖ 2- Encuestas
❖ 3- Paneles de usuarios
❖ 4- Heatmaps
❖ 5- Herramientas de
tendencias (Uso de
buscadores)
❖ 6- Data Mining
❖ 7- ClickStream

14. Conoce el cerebro
humano
Escaneo en Z
Usa un patrón en forma de Z o F para determinar la
ubicación de los elementos; de esta manera trabajas
con el movimiento natural del ojo:
❖ Ubica el contenido más importante en los dos
primeros párrafos
❖ Usa imágenes con colores marcados y buen
contraste en intervalos regulares para
reforzar la atención de los lectores
❖ Usa estratégicamente espacios en blanco
para generar ritmo en la lectura
❖ Aplica la “regla de los tercios” para llevar la
atención a los elementos importantes, como
una llamada a la acción

15. Conoce el cerebro
humano
Psicología del color
El color se asocia a las emociones de la persona
y es una manera de influenciar el estado físico y
mental del paciente.
Averiguar qué colores funcionan bien con los
demás no es sólo una cuestión de suerte. Existen
muchos estudios sobre los efectos que provocan
los colores en las personas.
La impresión que generemos en nuestros
usuarios dependerá de muchos factores, y uno
de los más importantes es el color.
En la teoría del color existen diversas
combinaciones de colores que se agrupan por
categorías y que van muy bien para lograr un
objetivo concreto en el diseño web de tu página.

16. Conoce el cerebro
humano
Colores primarios
Los colores primarios son aquellos que no se pueden
obtener de la mezcla de ningún otro.
Son los colores básicos que mezclados darán lugar al
resto de colores de la gama cromática.
❖ Rojo.
❖ Amarillo,
❖ Azul.
Sin embargo, si estamos hablando de colores de
pantalla los colores primarios son (RGB):
❖ Rojo
❖ Verde
❖ Azul.

17. Conoce el cerebro
humano
Colores secundarios
Si mezclamos a partes iguales los
colores primarios, es decir, el rojo con el
amarillo, el amarillo con el azul, y el azul
con el rojo, se crean los colores
secundarios:
❖ Naranja.
❖ Verde.
❖ Magenta.
La combinación de estos colores en
diseño web generan una gran variedad
de contrastes.

18. Conoce el cerebro
humano
Colores terciarios
Los colores terciarios se consiguen si mezclamos
a partes iguales un color primario + secundario,
es decir, rojo con magenta, azul con verde, amarillo
con verde, rojo con naranja y amarillo con naranja.
Ahora que ya conoces cómo se crean los colores,
podrás entender mejor cómo trabajan las
combinaciones de colores en el modelo de rueda
de colores.
Esto te ayudará a:
❖ Elegir las combinaciones de colores que
funcionan bien juntas.
❖ Generar las emociones adecuadas.
❖ Crear una adecuada cantidad de
contrastes en tu diseño web.

19. Conoce el cerebro
humano
Colores complementarios
Situados uno frente al otro en
la rueda de color.
Las combinaciones de colores
complementarios crean un
gran contraste entre sí al
usarlos a la vez.

20. Conoce el cerebro
humano
Colores análogos
Están uno justo al lado del otro
en la rueda de color.
Es buena idea elegir un
conjunto de colores análogos
para crear una sensación de
variedad en el diseño de tu
página web.

21. Conoce el cerebro
humano
Triada de colores
Conjunto de tres colores que
están dispuestos
uniformemente alrededor de la
rueda de color.
Una tríada contiene una buena
variedad de colores bien
equilibrados.

22. Conoce el cerebro
humano
Complementarios divididos
Parten de tomar un color y, en lugar
de elegir el color complementario que
le corresponde en la rueda de color,
tomamos los dos situados en
posiciones inmediatamente
adyacentes.
En el ejemplo anterior, si elegimos el
amarillo, el color opuesto en la rueda
de color es el morado, pero en vez
elegir este, cogemos el azul-morado y
rojo-morado, que crearán un gran
contraste con el amarillo y entre ellos
serán colores muy cooperativos.

23. Conoce el cerebro
humano
Cuadrado de colores
Tiene cuatro colores uniformemente
espaciados alrededor de la rueda de
color.
Estos esquemas de color son muy
bonitos y funcionan bien con un color
fuerte y versiones más aclaradas de
los otros tres colores.

24. Conoce el cerebro
humano
Tetrádica (doble complementario)
Los esquemas de color en tetrádica se
construyen mediante la creación de
un rectángulo en la rueda de color.
Selecciona dos opuestos en la rueda
de color y a continuación
seleccionamos otro color
desplazándonos dos espacios en la
rueda y más su color complementario.

25. Conoce el cerebro
humano
Aclarados y oscurecidos
Aclarado: Se consigue agregando
blanco a un color.
Oscurecido: es un color al que se le ha
añadido negro.
Puedes crear un gran esquema de
colores monocromáticos con
aclarados y oscurecidos del mismo
tono de color.

26. Conoce el cerebro
humano
Colores cálidos
Crean una sensación de calidez.
Cuando vemos colores cálidos,
pensamos en el sol, el calor, el fuego y
el amor (la pasión).
El rojo es el color de la sangre, que es
caliente, y naranja y amarillo están
más relacionados con el verano.
La adición de un filtro anaranjado a
una fotografía hace que se vea más
cálida y más alegre.

27. Conoce el cerebro
humano
Colores cálidos
Llevan connotaciones de climas fríos:
invierno, la muerte, la tristeza, el hielo, la
noche y el agua.
Los colores fríos se pueden asociar
con la calma, la tranquilidad, la
confianza, la limpieza.
El morado está asociada con la realeza,
ya que socialmente se supone que
está reservado a ellos.

28. Conoce el cerebro
humano
La efímera atención
En un estudio realizado por Microsoft, se detectó que la
mayoría de las personas tiene un lapso de atención de 8
segundos
Si los visitantes llegan a tu sitio web y no pueden
encontrar lo que están buscando en los primeros
segundos, probablemente salgan de la página y no
vuelvan nunca.
No pasarán tiempo tratando de descifrar lo que ven.
Debes mostrarles inmediatamente lo que necesitan
saber sobre tu empresa y lo que deben hacer.
La página de inicio de Shopify no da vueltas, te muestra
exactamente cómo funciona la plataforma, por qué es
relevante para los visitantes y lo que deben hacer

29. Las tipografías
1. Establece una jerarquía clara.
2. Elige el mínimo tamaño de fuente
fácil de leer.
3. Elige una tipografía para los párrafos
fácil de leer. Deja las tipografías más
artísticas para los títulos.
4. Usa un máximo de 3 tipografías.
5. Aplica un interlineado que facilite la
lectura.
6. No abuses de las mayúsculas.
7. No abuses de la alineación centrada.
8. Elige colores con buen contraste con
el fondo.

30. La teoría de las
Gestalt en el
diseño
Los 7 principios
1. Principio de la semejanza
2. Principio de la proximidad
3. Principio de la continuidad
4. Principio de dirección común
5. Principio de la relación figura-
fondo
6. Principio de igualdad
7. Principio del cierre

31. La teoría de las
Gestalt en el
diseño
La semejanza
La mente tiene tendencia a agrupar elementos,
escogiendo y juntando aquellos que son parecidos en
forma, color y tamaño, entre otros aspectos. Utiliza,
además, experiencias pasadas para evaluar qué agrupar
y qué no.
Por ejemplo, en la página principal de Amazon vemos
cómo percibimos como «grupo» los elementos de la
barra lateral, porque tienen la misma estructura:
número + producto.
Nos sucede lo mismo con los productos recomendados,
son miniaturas del mismo tamaño, colocadas una al lado
de la otra y con el título cerca.

32. La teoría de las
Gestalt en el
diseño
Proximidad
Este es, quizás, el principio que más nos interesa. Los
seres humanos tenemos tendencia a “agrupar”
elementos basándonos en la distancia que existe entre
ellos.
Es decir, si hay determinados módulos “muy” juntos,
nuestra mente los percibirá como un solo bloque. En
cambio, si la separación es grande -hay demasiado
espacio negativo-, tenderá a percibirlos por separado.
Este principio es importante, porque un buen uso
permite que el usuario entienda los bloques de la
página: navegación, separación de tipos de contenidos,
agrupación de galerías de imágenes, etc.

33. La teoría de las
Gestalt en el
diseño
Continuidad
Se produce cuando los distintos elementos del diseño
mantienen una dirección y están próximos y alineados
entre sí. Nos dan la sensación de que siguen una
dirección y los percibimos como elementos continuos.

34. La teoría de las
Gestalt en el
diseño
Relación figura-fondo
Este principio afirma que no podemos interpretar un
elemento como figura y fondo al mismo tiempo. Esto
nos permite “organizar” el contenido por capas, de
manera que somos conscientes de qué elemento está
por delante de cuál y diferenciarlos del que actúa de
fondo.
Es quizás el ejemplo más fácil de encontrar. Por
ejemplo, en la página de Tesla podemos percibir
claramente cómo el coche forma parte del fondo y la
«figura» son todos los bloques de texto e iconos que hay
encima.

35. La teoría de las
Gestalt en el
diseño
Igualdad
Acostumbramos a percibir como “grupos” aquellos elementos que
tienen algún tipo de característica común: comparten la misma
figura, el mismo color, etc.
Funciona mejor cuando se trata de igualdad en colores, seguido
de tamaño y forma. Este principio se puede utilizar para “romper”
patrones y destacar un contenido por encima del resto, dándole
un color distinto o un tamaño mayor.
En la página de Billin, por ejemplo, vemos como utilizan el verde
para destacar el botón que realiza la acción principal, el registro a
la página.

36. La teoría de las
Gestalt en el
diseño
Cierre
El ojo humano prefiere los objetos cerrados. Esto significa que si
hay elementos de UI que no están completos, el usuario podrá
imaginarse cómo es, completando la información visual que falta.
Esto sucede, por ejemplo, cuando mostramos un carrousel en una
aplicación de modo que se ve un trozo del siguiente elemento.
Nuestra mente se imaginará que hacia ese lado hay un elemento
como el resto.
Y también lo vemos en el caso de distintos bloques de contenido.
No existen líneas visuales que los separen, pero nuestra mente se
imaginará los bloques y “encerrará” el contenido en ellos.

37. Herramientas
Patrones de diseño
Soluciones contrastadas para problemas típicos y
recurrentes que evitarán errores y nos ayudarán a
desarrollar soluciones de manera más ágil.
Pero, ¡ojo! no es obligatorio en todos los casos pues
limitan tu creatividad y es posible que existan mejores
soluciones a la necesidad concreta del cliente.

38. Herramientas
Guías de estilo
Una guía de estilo es una colección de elementos
prediseñados gráficos y reglas que diseñadores o
desarrolladores web deben seguir para asegurarse que
partes separadas del sitio web sean consistentes y
creen una experiencia cohesiva al final.
Elementos:
❖ Principios del diseño
❖ User personas
❖ Tono y terminología
❖ Logo y marca
❖ Estructura básica
❖ Paleta cromática
❖ Tipografía
❖ Iconos, botones, otros elementos visuales
❖ Imágenes.
❖ Otros detalles

39. Guías de estilo
Principios de diseño básicos
¿Por qué se caracteriza la
empresa?
¿Cuáles son los objetivos de la
página web?
¿Cuáles son los principios de
diseño propios de la filosofía de la
empresa?

40. Guías de estilo
User personas
¿A quién debe ir dirigida la
página?
¿Cómo puede delimitar el
público objetivo?
¿Cuáles son sus preferencias,
deseos e intereses?

41. Guías de estilo
Tono y terminología
¿Cómo se tiene que tratar a
los clientes, lectores o
visitantes?
¿Qué términos son tabú o no
deben usarse?

42. Guías de estilo
Logo y marca denominativa
¿Qué apariencia tienen el
logo y la marca
denominativa?
¿Cuándo, cómo y dónde se
deben/tienen que utilizar?

43. Guías de estilo
Estructura básica de la web
¿Cómo se tiene que
estructurar la página web?
¿Qué anchura tienen las
columnas y qué altura tienen
las filas?
¿Cómo se tienen que
organizar los elementos?
¿Qué estructura de menú
tiene que ofrecerse?

44. Guías de estilo
Paleta cromática
¿Qué colores realzan la
intención de la página web y
se dirigen al público
objetivo?
¿Cómo se pueden integrar
los valores RGB y los códigos
hexadecimales?

45. Guías de estilo
Tipografía
¿Qué tipo de letra tiene que
utilizarse para qué tipo de
textos y elementos?
¿Cuál es el tamaño que tiene
que tener la letra y de qué
color tiene que ser?

46. Guías de estilo
Iconos, elementos de navegación y
otros elementos visuales
¿Qué iconos deben
utilizarse?
¿Dónde se tienen que
insertar y qué significan?

47. Guías de estilo
Imágenes
¿Qué tamaños tienes?
¿Qué proporciones poseen?
¿Cómo conviven?
¿Efectos?
¿Tipos y variaciones?

48. Herramientas
Frameworks de diseño
Los frameworks son librerías que
proporcionan una serie de CSS y
funciones de JavaScript ya
implementadas y testadas para ahorrar
tiempo.
Desventajas:
❖ Limitan tu creatividad.
❖ Peso del CSS
❖ Curva de aprendizaje
Algunos ejemplos
❖ Bootstrap
❖ Maetrialize
❖ JQuery Mobile
❖ ZURB Fundation

49. Resumen
1. ¿Qué es diseñar?
a. Solucionar un problema o necesidad
b. Implica empatía
2. Del diseño a la web
a. Conoce tus herramientas
3. Fases de la planificación de interfaces web
a. Propuesta valor único.
b. Conoce a tu audiencia.
c. Proporciona experiencia placentera
Herramientas
❖ El color
❖ La atención
❖ Las tipografías
❖ La Gestalt
❖ Herramientas
➢ Patrones de diseño
➢ Guías de estilo
➢ Frameworks de diseño
➢ Analitics

50. Referencias
❖ https://youtu.be/UsX_dyZvJ50
❖ https://youtu.be/0lKfBucTY3E
❖ https://youtu.be/oDX20sARygM
❖ https://youtu.be/jMEjKzlSbfE
❖ https://youtu.be/f0HdTlxG2i0
❖ https://youtu.be/1E3jGwGcgg0
❖ https://neilpatel.com/es/blog/diseno-web-intuitivo/
❖ https://www.conversion-uplift.co.uk/cultural-factors-in-
web-design/
❖ https://medium.com/service-design-
bogot%C3%A1/qu%C3%A9-son-las-user-personas-y-
como-aplicarlas-en-dise%C3%B1o-de-servicios-
44d44584a0ef
❖ https://www.uifrommars.com/principios-gestalt-diseno-
web/
❖ https://sebastianpendino.com/propuesta-unica-de-valor-
que-y-como/
❖ https://conversionxl.com/blog/ab-testing-guide/
❖ https://atractica.com/psicologia-del-color-aplicada-
❖ https://www.youtube.com/watch?reload=9&v=0lX4
96swgdE
❖ https://www.genbeta.com/desarrollo/patrones-de-
diseno-que-son-y-por-que-debes-usarlos
❖ https://www.lawebera.es/diseno-web/patrones-
layout-patron-z-gutenberg-f.php
❖ https://www.arcovia.com/documentacion/diseno-
sitios-web/patrones-de-diseno
❖ https://www.paredro.com/los-5-patrones-de-
diseno-web-adaptativo/
❖ https://www.ionos.es/digitalguide/paginas-
web/diseno-web/la-guia-de-estilo-perfecta-para-
paginas-web/
❖ https://blog.ida.cl/diseno/guia-de-estilo-diseno-
web/
❖ https://www.silocreativo.com/mejores-frameworks-
css/
❖ https://www.lomejordewp.com/teoria-color-diseno-
web/
❖ https://www.lawebera.es/diseno-web/tipografia-
aplicada-al-diseno-web.php