• Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram

S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram
front-end design  ·  negative space  ·  user experience  ·  User Experience Insights  ·  User Interface Design  ·  white space

Cinco consejos para mejorar sus habilidades de diseño: parte 2 (espacio en blanco/espacio negativo)

By s4pcademy 


En Parte 1 de esta serie, I discutió el problema de tener demasiado contenido en un diseño, lo que puede generar confusión y distracción. En esta publicación, profundizaré más introduciendo el concepto de blanco espaciotambién conocido como espacio negativo, cual se refiere a las áreas vacías en un diseño. Mientras que algunos pueden ver blanco espacio como espacio desperdiciado, pretendo persuadirte de que cuando se usa correctamentepuede mejorar en gran medida el atractivo visual y la eficacia del diseño.

Comencemos con un ejemplo. Echa un vistazo a la pared de la sala de estar en el cifras abajo. Inorte Figura 1, toda una pared es completado con ilustracionesresultando en un desordenado apariencia, y haciéndolo difícil para cualquier soltero pieza a destacar.

Figura%201%3A%20Desordenado%20Pared

Figura 1: Pared desordenada

En la figura 2, hay tres piezas dispuestas de forma equilibrada. Es más fácil identificar un punto focal y el espacio vacío alrededor de las pinturas se conoce como espacio en blanco.

Figura%202%3A%20Pared%20equilibrada%20con%20espacio%20blanco%20circundante

Figura 2: Pared equilibrada con espacio en blanco circundante

Figura%203%3A%20El%20%20espacio%20vacío%20alrededor%20de%20las%20pinturas%20es%20llamado%20%20espacio%20blanco

Figura 3: El espacio vacío alrededor de las pinturas se llama espacio en blanco

Instintivamente entendemos que el muro en la figura 2, es un común representación de la decoración de una sala de estar. Sin embargo, cuando se trata de diseño de diapositivas y diseño de interfaz de usuario en el lugar de trabajo, tendemos a crear diseños que se asemejan a los desordenados pared en la figura 1, ocupando la mayor parte del lienzo (toda la diapositiva o página).

Figura%204%3A%20Dos%20and%20Donts%20of%20White%20Space

Figura 4: Pros y contras del espacio en blanco

Las personas a menudo evitan usar espacios en blanco, por temor a que el diseño podría no transmitir suficiente información. Esto es particularmente evidente en las diapositivas de PowerPoint, donde los presentadores/creadores a menudo intentan abarrotar La mayoría de sus puntos de conversación en una sola diapositiva. Soy seguro te has sentado esos tipos de presentaciones. ¿Pudiste concentrarte en algo en particular?

Entonces, ¿qué deberías hacer en su lugar?

Si se esforzó por reducir el contenido de un diseño, organice el contenido restante y los elementos de diseño en temas. Si desea resaltar una información específica, colóquela en un área rodeada de un amplio espacio en blanco.

Eche un vistazo al flujo de la tarjeta de crédito en la Figura 5. Observe cómo hay muchos elementos en la pantalla. ¿Notas algún contenido que no pertenece? ¿Crees que hay mucho espacio en blanco? Una interfaz de usuario abarrotada crea una experiencia de usuario deficiente (lo fácil que es usarla) y dificulta identificar qué información se requiere y qué acciones debe tomar el usuario. Hay un pobre sentido de jerarquía que impide que el ojo fluya a través de la interfaz. El espaciado efectivo ayuda a estructurar el diseño para fomentar un camino lógico a seguir.

Figure%205%3A%20A%20busy%20mobile%20Add%20Credit%20Card%20user%20interface

Figura 5: Interfaz de usuario Agregar tarjeta de crédito móvil ocupada

Ahora eche un vistazo a la Figura 6. Primero, se eliminó el contenido innecesario.. Una técnica para eliminar contenido es dividirlo en flujos o pasos. También, las entradas de formulario de Primero y Apellido son reducido a Titular de la tarjeta. Este simplifica y reduces la cantidad de bienes inmuebles e insumos requeridos. Segundoobserve la cantidad de relleno alrededor de la imagen de la tarjeta principal y botón. El relleno es blanco espacio, o el espacio alrededor de un elemento. Las imágenes y los botones también están en sus proporciones correctas sin tener a estirar hasta los márgenes. Finalmente, observe la gran cantidad de espacio en blanco entre el forma y botón. Es posible que se incline a pensar que el botón debe moverse arriba pero dejarlo con mucho espacio y hacia el fondo puede crear una facilidadubicación fácilmente reconocible como un botón de acción o el siguiente paso.

Figura%206%3A%20Mejorando%20la%20interfazdeusuario%20por%20incorporando%20espacio%20blanco

Figura 6: Mejora de la interfaz de usuario mediante la incorporación de espacios en blanco

Resumen

Aprovechar el poder del espacio en blanco puede crear diseños más efectivos, sofisticados y memorables. Como se discutió en Parte 1, A veces menos es más. La próxima vez que cree una diapositiva de Power Point, una interfaz de usuario o cualquier tipo de diseño, recuerde considerar la importancia del espacio en blanco. Por supuesto, incluso algo como el espacio en blanco puede ser exagerado, así que use su mejor juicio para asegurarse de que sus diseños no parezcan vacíos o escasos. Piense en el ejemplo de la sala de estar y use su intuición.

Próximos pasos:

Hasta ahora en esta serie, hemos hablado sobre la reducción de contenido y la incorporación de espacios en blanco. Estén atentos a mi próxima publicación, ya que exploraré el uso del color.

¿Has visto una diapositiva o una interfaz de usuario demasiado desordenada? Deja un comentario con ¿cómo te hizo sentir? ¿O te cuesta eliminar contenido o crear espacios en blanco? Deja un comentario con algunas de tus razones o preocupaciones.



Source link


blancoespacioCincoconsejosDiseñoespaciohabilidadesmejorarnegativoparapartesus

Artículos relacionados


ADM330  ·  downtime optimized  ·  s/4hana  ·  SDMI  ·  Technical Articles  ·  upgrade  ·  zdo  ·  zero downtime
¿Por qué un administrador de base debería aprobar la evaluación ADM330 (ZDO para actualizaciones y actualizaciones de S/4HANA)?
#signavio  ·  labstalk  ·  Personal Insights
SAP LabsTalk – Ep02 – 2023: Optimización de procesos comerciales para experiencias de cliente perfectas
HANA snapshot  ·  Personal Insights
Eliminación de instantáneas antiguas para reducir el tamaño del volumen de datos/hana duplicado/grande

Deja tu comentario Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

Hipervínculo SAC a SAP GUI
Previo
SAP Integration Suite: supervisión simplificada con Open Connectors: Twilio, parte 1
Siguiente

Madrid

Calle Eloy Gonzalo, 27
Madrid, Madrid.
Código Postal 28010

México

Paseo de la Reforma 26
Colonia Juárez,  Cuauhtémoc
Ciudad de México 06600

Costa Rica

Real Cariari
Autopista General Cañas, 
San José, SJ 40104

Perú

Av. Jorge Basadre 349
San Isidro
Lima, LIM 15073

Twitter Linkedin Instagram
Copyright 2022 | All Right Reserved.
Cookies Para que este sitio funcione adecuadamente, a veces instalamos en los dispositivos de los usuarios pequeños ficheros de datos, conocidos como cookies. La mayoría de los grandes sitios web también lo hacen.
Aceptar
Cambiar ajustes
Configuración de Cookie Box
Configuración de Cookie Box

Ajustes de privacidad

Decida qué cookies quiere permitir. Puede cambiar estos ajustes en cualquier momento. Sin embargo, esto puede hacer que algunas funciones dejen de estar disponibles. Para obtener información sobre eliminar las cookies, por favor consulte la función de ayuda de su navegador. Aprenda más sobre las cookies que usamos.

Con el deslizador, puede habilitar o deshabilitar los diferentes tipos de cookies:

  • Bloquear todas
  • Essentials
  • Funcionalidad
  • Análisis
  • Publicidad

Este sitio web hará:

Este sitio web no:

  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
  • Recuerde sus detalles de inicio de sesión
  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
Guardar y cerrar