WordCamp Sevilla 2013: WordPress como framework, mucho más que un CMS
CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los...
Transcript of CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los...
![Page 1: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/1.jpg)
CON LOS PRINCIPIOS BASICOS DE GESTALT APLICADOS AL DISEÑO WEB
UI ROMPEDORACREAR UNA
![Page 2: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/2.jpg)
![Page 3: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/3.jpg)
![Page 4: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/4.jpg)
UTILIZA LOS PRINCIPIOS DE GESTALT PARA EVITAR SOBRECARGA COGNITIVA.
UNA UI ROMPEDORA HACE QUE TUS USUARIOS NO PIENSEN.
![Page 5: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/5.jpg)
![Page 6: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/6.jpg)
IMÁGENES COMPLEJAS SE REDUCEN A FORMAS MAS SENCILLAS
LOS PRINCIPIOS GESTALT DESCRIBEN COMO EL OJO HUMANO PERCIBE LOS ELEMENTOS VISUALES.
![Page 7: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/7.jpg)
EL TODO ES DIFERENTE DE LA SUMA DE LAS PARTES.
Kurt Koffka
SOMOS CAPACES DE IDENTIFICAR OBJETOS ENTEROS INMEDIATAMENTE Y SIN UN ESFUERZO CONSCIENTE
![Page 8: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/8.jpg)
LA TEORÍA DEL DISEÑO OCCIDENTAL SE BASA EN GESTALT
LA MAYORÍA DE LOS PRINCIPIOS DE DISEÑO GRÁFICO SURGEN DE LA TEORÍA GESTALT.
![Page 9: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/9.jpg)
EMERGENCIA UNA IMAGEN COMPLEJA ES FORMADA DE MUCHOS DETALLES SENCILLOS.
![Page 10: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/10.jpg)
LA APARIENCIA GENERAL DE LOS ELEMENTOS DE UI SIEMPRE DEBE SER MÁS IMPORTANTE QUE SUS DETALLES.
PRINCIPIO DE EMERGENCIA: ENSEÑANZA PARA EL DISEÑO WEB
![Page 11: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/11.jpg)
MULTIESTABILIDAD HAY IMÁGENES QUE TIENEN MÁS QUE UNA INTERPRETACIÓN, PERO NUESTRA MENTE SÓLO PUEDE VER UNA A LA VEZ
![Page 12: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/12.jpg)
![Page 13: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/13.jpg)
NO LES HAGAS PENSAR: EVITA AMBIGÜEDAD Y SOBRECARGA DE INFORMACIÓN EN TU UI. TESTEA LA USABILIDAD
PRINCIPIO DE MULTIESTABILIDAD: ENSEÑANZA PARA EL DISEÑO WEB
![Page 14: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/14.jpg)
REIFICACIÓN TENDENCIA A COMPLETAR UNA IMÁGEN INCOMPLETA
![Page 15: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/15.jpg)
![Page 16: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/16.jpg)
LA MENTE DE TUS USUARIOS ES CAPAZ DE RELLENAR LOS HUECOS: UTILIZA EL ESPACIO COMO HERRAMIENTA DE DISEÑO.
PRINCIPIO DE REIFICACIÓN: ENSEÑANZA PARA EL DISEÑO WEB
![Page 17: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/17.jpg)
INVARIABILIDAD RECONOCEMOS OBJETOS A PESAR DE VARIACIONES Y DEFORMACIONES
![Page 18: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/18.jpg)
![Page 19: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/19.jpg)
INVARIABILIDAD ES LA VENTAJA DEL CEREBRO HUMANO SOBRE LOS ROBOTS – POR AHORA. UTILIZADA EN CAPTCHA.
PRINCIPIO DE INVARIABILIDAD: ENSEÑANZA PARA EL DISEÑO WEB
![Page 20: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/20.jpg)
HAY UNOS PRINCIPIOS QUE SE UTILIZAN CON MÁS FRECUENCIA
LOS PRINCIPIOS DE GESTALT MÁS ÚTILES CUANDO DISEÑAMOS PARA EL WEB
![Page 21: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/21.jpg)
FIGURA/FONDO LA MENTE ENFOCA UNA PARTE DE UNA ESCENA IGNORANDO LOS DETALLES
![Page 22: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/22.jpg)
![Page 23: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/23.jpg)
ASEGÚRATE DE QUE LAS PARTES MÁS IMPORTANTES DE TU UI DESTAQUEN CLARAMENTE DEL FONDO.
FIGURA/ FONDO: ENSEÑANZA PARA EL DISEÑO WEB
![Page 24: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/24.jpg)
SEMEJANZA LA MENTE AGRUPA LOS ELEMENTOS SIMILARES EN UNA ENTIDAD
![Page 25: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/25.jpg)
![Page 26: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/26.jpg)
AGRUPA LOS ELEMENTOS DE UI CON FUNCIONES SIMILARES, APLICÁNDOLES ATRIBUTOS VISUALES SEMEJANTES
PRINCIPIO DE LA SEMEJANZA: ENSEÑANZA PARA EL DISEÑO WEB
![Page 27: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/27.jpg)
PROXIMIDAD LOS OBJETOS ADJUNTOS TIENDEN A SER VISTOS COMO UNA UNIDAD.
![Page 28: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/28.jpg)
![Page 29: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/29.jpg)
ASEGÚRATE DE QUE LOS ELEMENTOS DE UN MISMO GRUPO SEAN PRÓXIMOS ENTRE SÍ.
PRINCIPIO DE PROXIMIDAD: ENSEÑANZA PARA EL DISEÑO WEB
![Page 30: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/30.jpg)
REGIÓN COMÚN ELEMENTOS QUE ESTÁN DENTRO DE LA MISMA REGIÓN DE ESPACIO SE AGRUPAN
![Page 31: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/31.jpg)
![Page 32: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/32.jpg)
CREA UI DE FÁCIL UTILIZACIÓN AGRUPANDO LOS ELEMENTOS ENTRE AREAS DE ESPACIO CLARAMENTE MARCADAS
PRINCIPIO DE LA REGIÓN COMÚN: ENSEÑANZA PARA EL DISEÑO WEB
![Page 33: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/33.jpg)
CIERRE TENDENCIA A CERRAR LAS FORMAS CUANDO FALTE INFORMACIÓN COMPLETA.
![Page 34: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/34.jpg)
![Page 35: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/35.jpg)
EL DISEÑO MINIMALISTA PUEDE AYUDAR TU UI, EVITANDO SOBRECARGA DE INFORMACIÓN.
PRINCIPIO DEL CIERRE: ENSEÑANZA PARA EL DISEÑO WEB
![Page 36: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/36.jpg)
CONTINUIDAD EL OJO PERCIBE LAS LÍNEAS EN UN FLUJO CONTINUATIVO
![Page 37: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/37.jpg)
![Page 38: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/38.jpg)
UTILIZA LOS PRINCIPIOS DE GESTALT PARA CREAR UNA UI VERDADERAMENTE ROMPEDORA.
PSICOLOGÍA GESTALT: ENSEÑANZA PARA EL DISEÑO WEB
![Page 39: CREAR UNA UI ROMPEDORA - WordCamp Madrid 2018 | 21 y 22 de … · 2018-04-23 · utiliza los principios de gestalt para evitar sobrecarga cognitiva. una ui rompedora ... la teorÍa](https://reader034.fdocuments.mx/reader034/viewer/2022050418/5f8da7f6e4c2e85d31773ed4/html5/thumbnails/39.jpg)
NO LES HAGAS PENSAR.
PSICOLOGÍA GESTALT: ENSEÑANZA PARA EL DISEÑO WEB