Lección 1 de 0
En Progreso

5.1 : Imponer estructura: resumen con ejemplos

5 diciembre, 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.9.0″ 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|” hover_enabled=”0″ 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” sticky_enabled=”0″]

Imponer estructura: resumen con ejemplos

[/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=1669990493” 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/51ImposeStructure.jpg?media=1669990493” title_text=”2014-04-25: Edited by Adam Kyne {memberID:1261}
2014-04-24: Edited by Adam Kyne {memberID:1261}” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.9.0″ 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.9.0″ 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″]

Las leyes de agrupación Gestalt se pueden utilizar para mejorar sus pantallas, pero el uso indebido o mostrar indiferencia por nuestros sesgos de percepción probablemente conducirá a malas experiencias de usuario.

Para ayudarnos a apreciar cómo se aplican las leyes de la Gestalt en el diseño web como un medio de estructurar el contenido, veremos tres ejemplos. Cada sitio web tendrá características de diseño que se pueden categorizar bajo uno o más de los principios Gestalt de organización perceptiva, pero hemos seleccionado estas imágenes web (mostradas arriba) para resaltar las mejores prácticas al emplear un enfoque de diseño impulsado por Gestalt. Identificaremos una Gestalt en acción para cada uno de los ejemplos, como una forma de cristalizar la (s) intención (es) del diseñador y cómo esto se ha traducido en la exhibición teniendo en cuenta la naturaleza del procesamiento visual humano. Hemos utilizado el término ‘imponer estructura’ para reflejar el esfuerzo consciente y concertado necesario para organizar elementos, imágenes, texto y otros elementos,

[/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.9.0″ 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″]

Ejemplo A

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.9.0″ 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″]

Imposición de estructura con la Ley de Similitud – El pequeño panel, tomado de la Sitio web de Guardian, ejemplifica perfectamente el poder de la similitud para ayudar al usuario a identificar de inmediato qué elementos pertenecen a una categoría específica. Las características superficiales genéricas son las mismas para todos los elementos de video (por ejemplo, fuente, tamaño de fuente, color de fuente, espaciado y un pequeño icono de video). Además, cada noticia va acompañada de una imagen, y para distinguir el mejor video del día del resto, el video de este artículo es considerablemente más grande; por lo tanto, utilizar la similitud para agrupar todos los elementos y la disimilitud para distinguir un elemento de interés particular. La similitud es una de las herramientas más simples disponibles para los diseñadores web; Úselo para agrupar elementos y crear estructura. Sin embargo, también es importante tener en cuenta el potencial de confusión cuando los elementos no agrupados comparten características superficiales.

[/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.9.0″ 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″]

Ejemplo B

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.9.0″ 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″]

Imponiendo estructura con la Ley de Proximidad– La lista de historias de investigación destacadas de Science Daily muestra cómo el diseñador, lidiando con muchos elementos diferentes y un espacio limitado, ha utilizado la proximidad para estructurar la pantalla. Con la simple adición de un espacio en blanco entre los tres grupos principales de noticias, el diseñador ha agrupado los elementos y ha creado una estructura perceptible al instante que ayudará a los usuarios a buscar historias específicas. Unos pocos milímetros más de distancia pueden tener un gran impacto en la estructura aparente dentro de un sitio web. Si se usara la misma cantidad de espacio en blanco para separar todos los elementos en las tres secciones diferentes, la estructura y la agrupación serían menos evidentes en la primera visualización y al escanear la pantalla. Por lo tanto, Se puede lograr una estructura imponente con el uso de la proximidad simplemente reduciendo la cantidad de espacio en blanco entre los elementos que desea que se vean agrupados, mientras aumenta la cantidad de espacio en blanco entre los elementos no agrupados. Hay muchos casos en los que la proximidad puede mejorar la estructura aparente dentro de un sitio web, pero una vez más, asegúrese de que la ley de la proximidad se considere tanto en términos de cómo apoya la agrupación prevista como de la prevención de la agrupación no deseada.

[/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.9.0″ 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″]

Ejemplo C

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.9.0″ 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″]

Imponiendo estructura con la Ley del Destino Común– Un carrusel es una característica de diseño que se encuentra a menudo en la página de inicio de los sitios de comercio electrónico, y el carrusel que se muestra en la imagen C ejemplifica la capacidad estructural del destino común. Al agrupar productos o imágenes interesantes en un patrón de diseño de interfaz de usuario, donde se revelan gradualmente uno tras otro y en una dirección común, el usuario probablemente los percibirá como agrupados. Agrupar elementos de acuerdo con su dirección y movimiento compartidos no es un método que se use típicamente en el diseño web, pero los carruseles y presentaciones de diapositivas (un patrón de diseño de interfaz de usuario similar) demuestran el poder del movimiento, al ayudar al usuario a establecer qué elementos pertenecen a un determinado categoría o grupo. Sin embargo, también debemos reconocer la naturaleza fascinante del movimiento. No es ningún secreto que los anunciantes buscan constantemente formas de atraer a los usuarios atención y evitar que ignoren sus productos, por lo que no es de extrañar que muchos anuncios contengan imágenes en movimiento. (Para obtener más ejemplos y detalles sobre la ley del destino común en el diseño web, visite De Andy Rutledge sitio).

[/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.9.0″ 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″]

Cada uno de los ejemplos de diseño web demuestra cómo los sesgos perceptuales de la Gestalt se pueden acomodar con métodos simples. Una visualización estructurada y ordenada es esencial para la experiencia del usuario asociada con cualquier sitio web. Por lo general, examinamos la pantalla para identificar la información rápidamente, y nuestra capacidad para hacerlo se ve afectada por el nivel de consideración que se le da a la forma en que vemos y agrupamos los elementos. Las leyes de similitud, proximidad y destino común representan solo tres de estas importantes consideraciones, pero hay muchas formas en que el diseñador puede apoyarlas y / o explotarlas para el usuario o su beneficio.

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