Lección 1 de 0
En Progreso

3.4 : La ley de la simetría: Gestalt y diseño web

30 noviembre, 2022

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.27.4″ background_color=”#7ebec5″ custom_padding=”||0px|” custom_padding_tablet=”||0px|” transparent_background=”off” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”||0px|” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_divider show_divider=”off” disabled_on=”on|on|off” admin_label=”Divider” _builder_version=”3.23.4″ height=”110px” hide_on_mobile=”on”][/et_pb_divider][et_pb_text admin_label=”Text” _builder_version=”4.4.9″ text_font=”PT Sans|on|||” text_text_color=”#ffffff” text_letter_spacing=”2px” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_margin=”||0px|” custom_padding=”||0px|” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

PSICOLOGÍA GESTALT Y DISEÑO WEB: LA GUÍA DEFINITIVA

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.8.1″ text_font=”PT Sans||||||||” text_text_color=”#010659″ text_font_size=”72″ text_line_height=”1.1em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” max_width=”660px” module_alignment=”center” custom_margin=”18px||80px|” text_font_size_tablet=”52″ text_font_size_phone=”” text_font_size_last_edited=”on|desktop” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

La ley de la simetría: Gestalt y diseño web

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Section” _builder_version=”3.27.4″ background_enable_color=”off” custom_padding=”0px|||” custom_padding_tablet=”0px|||” transparent_background=”off” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”0px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2019/09/logo-circular-nuevo.png?media=1669630544” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”3.27.4″ width=”20%” custom_margin=”-48px|||” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”off” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.27.4″ background_color=”#01065″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2021/02/4d5ce2ce1d3784ef301121a8ee984eba.jpg?media=1669630544” title_text=”4d5ce2ce1d3784ef301121a8ee984eba” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.8.2″ animation_style=”fade” animation_duration=”500ms” hover_enabled=”0″ use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on” sticky_enabled=”0″][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.8.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” hover_enabled=”0″ text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid” sticky_enabled=”0″]

Los diseñadores pueden utilizar nuestra atracción natural por la simetría para crear exhibiciones agradables. La simetría también se puede emplear para ayudar a los usuarios a identificar elementos agrupados.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.8.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” hover_enabled=”0″ text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid” sticky_enabled=”0″]

Aplicación de las leyes

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.8.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” hover_enabled=”0″ text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid” sticky_enabled=”0″]

El orden, la estructura y el equilibrio en el diseño web es importante. La psicología de la Gestalt identificó el sesgo perceptivo para agrupar mentalmente los elementos cuando están dispuestos en un patrón simétrico. La simetría puede ser una herramienta útil al diseñar sitios web, especialmente cuando desea que los usuarios identifiquen instantáneamente los elementos agrupados. Sin embargo, cuando los elementos no comparten una relación significativa, es importante evitar la simetría o los arreglos simétricos que sugieran que los elementos o secciones completas están conectados de alguna manera.

La percepción humana se ve afectada por muchas variables diferentes, algunas provienen del entorno (por ejemplo, iluminación y forma) y otras provienen del sistema visual y la mente humana (por ejemplo, los principios Gestalt de organización perceptiva y asignación de atención). Podemos considerar estas variables o factores por separado, pero trabajan constantemente en sincronía para crear nuestra visión del mundo. Una forma en que los factores ambientales afectan la percepción humana es en la forma en que los elementos o elementos visuales están dispuestos simétricamente.

Cuando los elementos individuales o los arreglos completos son simétricos, asumimos que representan grupos. Por ejemplo, el diseño web de Wagamama muestra jugos de frutas, por lo que hay cuatro elementos de menú a lo largo de una línea vertical con dos en un lado y dos en el otro; creando una apariencia simétrica. Al utilizar la simetría, el usuario puede determinar inmediatamente que estos elementos forman parte del mismo grupo.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.8.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” hover_enabled=”0″ text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid” sticky_enabled=”0″]

La simetría como herramienta del diseñador

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.8.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” hover_enabled=”0″ text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid” sticky_enabled=”0″]

La agrupación de elementos significativos de la pantalla con el uso de la simetría es una característica común en el diseño web, pero no es específica de la disposición de varios elementos. La mayoría de las veces, la simetría se aplica a elementos individuales u objetos completos. La mayoría de los objetos se pueden dividir en dos mitades más o menos simétricas y cuando vemos dos elementos no conectados que son simétricos, inconscientemente los integramos en un objeto coherente (o percepción).

Cuanto más parecidos son los objetos, más tienden a agruparse. Si bien esta puede ser una forma rápida de indicar que los elementos están agrupados aunque estén ubicados en distintas secciones de la misma pantalla, puede confundir al usuario cuando los elementos no son parte de un grupo significativo o no comparten una relación discernible. Por lo tanto, la simetría puede ser una herramienta simple del diseñador, pero puede ser un obstáculo para el usuario si la pantalla sugiere que los elementos están agrupados cuando no lo están.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.6.1″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

En resumen

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.8.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” hover_enabled=”0″ text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid” sticky_enabled=”0″]

La ley de la simetría es un principio Gestalt de organización perceptiva, que actúa para formar grupos a partir de elementos cuando están dispuestos simétricamente. Esta ley también se aplica a los objetos individuales, que a menudo son simétricos. Los diseñadores web pueden emplear la ley de la simetría para equilibrar sus pantallas y formar grupos a partir de elementos que se encuentran en distintas partes de la misma página web. Sin embargo, aunque generalmente encontramos atractiva la simetría, puede implicar falsamente agrupación, así que asegúrese de restringir la influencia de la simetría cuando los elementos no deban percibirse como agrupados.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]