El documento presenta los fundamentos del diseño visual y desarrollo web aplicando principios de Gestalt, como proximidad, similitud y figura-fondo, a un prototipo de sitio web. Se discute la elección de la tipografía Montserrat por su estética moderna, versatilidad y legibilidad, así como la selección de tonalidades para crear una experiencia visual acorde con el teatro. Finalmente, se destacan herramientas y principios implementados que contribuyeron a un diseño profesional y coherente del sitio web.

1. ™ LAS
CONDES
FUNDAMENTOS DEL DISEÑO VISUAL Y DESARROLLO WEB

2. Principios de
Gestalt en el
diseño
Aplicando los principios
de la Gestalt al
prototipo en alta
definición.
1

3. 3
Principio de proximidad
Tendemos a agrupar las formas o
elementos visuales que están próximos
entre sí. Para ello, dichos objetos deben
compartir alguna de estas características
en común: forma, color, tamaño o textura.
En nuestro prototipo podemos
evidenciarlo en que los elementos que
forman parte de una misma sección (por
ejemplo Expo Virtual) están ubicados
próximos entre sí.

4. 4
Principio de similitud
La tendencia a unir elementos que estén o
no próximos entre sí. Si los encontramos
similares, tendemos a verlos como parte de
un grupo.
En nuestro prototipo agrupamos elementos
similares en la Cartelera para denotar que
cada uno se trata de una obra u evento
disponible.

5. 5
Principio de figura y fondo
La tendencia que tiene el ojo humano a ver un objeto separado de lo que le rodea. Nuestra
mente no es capaz de interpretar un mismo elemento como figura o como fondo al mismo
tiempo.
En nuestro prototipo hacemos uso de este principio en el footer donde utilizamos una fotografía
del teatro como fondo de la sección y los demás elementos como figura, separados del primero.

6. 6
Principio de simetría y orden
La disposición de los elementos simétrica y
ordenada, favorece a que los percibamos
como parte de un grupo, en nuestro
prototipo, agrupar de manera simétrica los
elementos de la sección Cómo Llegar
ayuda al usuario a entender que todos
estos elementos forman parte de un
conjunto.

7. Tipografía
Selección de familia
tipográfica y sus usos.
1

8. Familia Tipográfica
8
Montserrat es una familia tipográfica moderna y versátil
diseñada por Julieta Ulanovsky. Combina elementos
geométricos con un toque contemporáneo, lo que la hace
adecuada para una amplia gama de proyectos.

9. 9
Heading 1
Heading 1
Heading 1
Heading 3
Botón
Botón
Tipografía & Prototipo
Estilos de texto:

10. Razones de elección
tipográfica
10
Estética contemporánea: Montserrat ofrece una
sensación moderna con su enfoque geométrico y
líneas limpias. Le da a su sitio web una nueva
apariencia y lo ayuda a crear una imagen moderna y
profesional.
Versatilidad: Montserrat es una familia de fuentes
versátiles adecuada para una amplia gama de
aplicaciones. Ya sea que necesite una tipografía de
encabezado impactante o una legibilidad óptima de
los párrafos, Montserrat tiene opciones para ambos.
Legibilidad: la claridad y la legibilidad son aspectos
clave del diseño de la interfaz de usuario. Montserrat
ha sido cuidadosamente diseñada para garantizar una
buena legibilidad incluso en tamaños pequeños. Esto
asegura que los usuarios puedan leer y comprender
fácilmente el contenido de su sitio web.
Disponibilidad y accesibilidad: Montserrat es una
fuente de código abierto en Google Fonts, lo que
significa que es de uso gratuito y está disponible para
todos. Puede integrar fuentes fácilmente en las
plantillas de su sitio web sin preocuparse por
problemas de licencia o costos adicionales.

11. Teoria del
Color
1

12. Selección de tonos
12
En un principio, el equipo propone para el sitio el tono full blanco, una opción
segura y válida para generar contraste. Luego de evaluar opciones,
conectamos con los conceptos del teatro y se trata de replicar la experiencia
por lo que recatamos el fondo negro. La sala que se centra en el escenario
envuelve con la oscuridad y destacan luces, formas y colores.

13. La experiencia de las artes escénicas llenas de
dramatismo, despiertan en el espectador un abanico
de sensaciones. Queremos llevar el modo
expectante al sitio replicando el recubrimiento de la
oscuridad.
“

14. Detalle
14
Este cambio drástico en la selección de tonos, permite darle al
proyecto más identidad. Las imágenes pasan a ser protagonistas y por
medio de parches con tonos claros el sitio adquiere ritmo y contraste.
Destacamos secciones para que la visita no sea plana y al hacer scroll
el ojo del espectador no se canse. La selección del tonos, no son full
negros ni full blancos, tambien para evitar la fatiga visual.
TONOS SITIO WEB

15. 15
Tono para fondo
Conceptualización teatral
Tono corporativo
Conceptos asociados a la marca
Para link
Para distinguir o diferenciar
Para generar contraste
Permite ritmo
Call to action
Distinción entre todo, indica la acción.
Los sitios web diseñados con un
color negro que da un aspecto
serio, sofisticado y clásico al
diseño.
A diferencia del diseño claro, que a
menudo mantiene a los visitantes
ocupados haciendo clic y
desplazándose, el diseño oscuro
atrae la atención del visitante
hacia las partes más importantes
de su sitio web. El producto o el
servicio.

16. “
16
Encuesta voluntaria a personas de 24 a 50 años:
4 escogen versión blanca
24 escogen versión negra
Los usuarios comentan sentirse más cómodos en
una web oscura, siente que el blanco vibra mucho
y los tiene un poco aburridos.

17. 17
Al momento de hacer este cambio, detalles se “afinan” o minimalizan.

18. 18

19. 19
Rescatamos de estas
darks web, su dominio
de marca, orden,
simplicidad. Y sus
llamados a la acción.
Puntos destacados
según nos enseña
Gestalt (organización
de elementos,
proximidad, similitud,
figura y orden y
simetría.)

23. 23
En sección Expo Virtual hicimos uso de position (absolute y relative) y z-
index para superponer elementos

24. 24
En barra de navegación se hizo uso de flexbox y float para ubicar los
elementos

25. 25
En sección cartelera se hizo uso de flexbox para ordenar elementos y se
reutilizaron estilos del home para no sobrecargar hoja de estilos

26. “
26
Las herramientas presentadas permitieron
al equipo desarrollar un sitio web de la
manera óptima posible. Elementos que
observamos funcionar bien en otros sitios,
aunque replicarlo no resulte tan sencillo.
Destacamos los principios de gestalt y el ui
kit como fundamentales. Luego de estas
implementaciones el sitio tomaba una forma
profesional y coherente.
Los miembros del equipo podrán aplicar los
conocimientos adquiridos de manera
práctica en próximos proyectos..
CONCLUSIONES

27. “
MUCHAS GRACIAS :)
NOS VEMOS!