• Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
S4PCADEMY_Logo
Twitter Linkedin Instagram
S4PCADEMY_Logo
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.




blancoespacioCincoconsejosDiseñoespaciohabilidadesmejorarnegativoparapartesus

Artículos relacionados


Product Information
Punto de entrada alternativo para proyectos de servicios profesionales en SAP S/4HANA Cloud, Public Edition
Product Information  ·  SAP Customer Engagement Initiative  ·  SAP Globalization Services  ·  SAP Influencing
Su oportunidad de influir en SAP: proyectos de la Iniciativa de participación del cliente 2023-1 para la localización con los servicios de globalización de SAP
Event Information  ·  SAP Integration Experience Feedback  ·  SAP Intelligent Enterprise
Grabación disponible: Llamada de la comunidad de SAP con comentarios sobre la experiencia de integración de SAP: ¡Oportunidades de influencia práctica para usted!
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.