Entendiendo las partes compuestas de su diseño

En este artículo vamos a ver una analogía simple que ilustrará formas efectivas de comunicación a través del diseño. Una vez que hayamos establecido la idea, echaremos un vistazo a algunos ejemplos familiares para aclarar el tema..

La analogía que veremos es la Transformada de Fourier, una intrigante herramienta matemática que lleva el nombre del francés Joseph Fourier..

Para empezar, puede que no te impresione con sus complejas (y aparentemente aburridas) ecuaciones. Pero, escondido en lo profundo de estas ecuaciones, es una idea simple: que cualquier onda, o señal basada en el tiempo, se puede dividir en muchas otras ondas, que conforman el original. En otras palabras, señala los ingredientes individuales que forman parte del producto final..

La Transformada de Fourier tiene aplicaciones que van desde la resonancia magnética nuclear (RMN) hasta la compresión de MP3, pero vamos a aplicarla a algo más familiar: el diseño.


Fuente de la imagen: Wikipedia.
Joseph Fourier, imagen lanzada al dominio público por su autor, Bunzil.

Por ejemplo, se propone crear un sitio web cuando tiene un concepto que debe transmitirse a los usuarios. Su trabajo, como diseñador web, es crear una página web que rompa esta idea en partes manejables; fragmentos de imágenes, fragmentos de texto o incluso videos que, cuando los consume un visitante, transmiten la idea en su mente.

Piense en la onda cuadrada roja en la imagen de arriba como la idea o mensaje que desea transmitir a través de su sitio web. Cada onda azul, aunque se ve completamente diferente cuando se toma individualmente, contribuye a crear la onda roja de alguna manera cuando se combina con las otras ondas azules. Su trabajo es averiguar las "ondas azules" (los elementos compuestos) de su mensaje principal. Por desgracia, si solo tuviéramos una fórmula para eso!

En última instancia, si el visitante entiende completamente el propósito de su sitio web y confía en usarlo, entonces ha tenido éxito en su papel como diseñador.


Diseño para abrazar el contenido, no el desorden

El último iOS 7 de Apple, aunque recibió una respuesta mixta sobre los nuevos colores, estética, iconografía y tipografía, es un paso positivo hacia adelante. Como usuario de iPhone, considero que la última oferta de software de Apple es una experiencia mucho más fácil de usar que su predecesora. No puedo imaginar volver a iOS 6 ahora que me he acostumbrado a la nueva interfaz. Esto se atribuye a más que solo efectos de paralaje, animaciones y otros dulces a la vista. Una de las razones principales que hacen que iOS 7 sea tan utilizable es que abarca el contenido, en lugar de envolverlo en una piel skeuomorphic. Apple llama a este enfoque "deferencia".

Deferencia: la interfaz de usuario ayuda a los usuarios a comprender e interactuar con el contenido, pero nunca compite con él. Directrices de interfaz humana de iOS

En la primera página de la guía de diseño, una captura de pantalla de la aplicación nativa Weather que se ejecuta en iOS 6 y iOS 7 habla por sí misma; El diseño abraza el contenido. No tienes que leer una palabra para informarte sobre el clima actual al instante. Cada detalle debe ayudar a expresar el mensaje..


Al diseñar su sitio web perfecto, asegúrese de pensar dos veces en cada detalle. Cada componente que lo compone; La tipografía, el color, las imágenes, todos los detalles hasta el favicon, deben contribuir de manera constructiva, trabajando juntos en perfecta armonía para entregar su mensaje de manera efectiva..

Detalles contraproducentes

A menudo me pregunto por qué algunos sitios web colocan de manera prominente un botón de "comentarios" en la primera página. Si bien es absolutamente necesario obtener comentarios sobre su trabajo, nunca dé la impresión de que no está seguro y no está seguro. Piénsalo de esta manera: cuando vas de compras, ¿alguna vez te han preguntado "¿Qué piensas acerca de la iluminación y pintura de nuestra tienda?" justo cuando entras en una tienda? Tales detalles son esencialmente invisibles para nosotros. La buena iluminación de la tienda y el ambiente general de la tienda no son procesados ​​conscientemente por nosotros.

Dicho esto, su cerebro recibe continuamente información de sus ojos y otros órganos sensoriales sobre el entorno que lo rodea. Un buen ambiente de tienda definitivamente cambiaría de opinión acerca de no comprarles un producto. Volviendo al tema, los enlaces de comentarios deben ser accesibles, pero escondidos. Gmail hace un buen trabajo en esto:


Hágase dos preguntas cuando agregue algo a su sitio web:

  • ¿Esto ayuda a mis visitantes a entender el propósito de mi sitio web??
  • Hay una mejor manera de hacer esto?

La perfección se logra, no cuando no hay nada más que agregar, sino cuando no queda nada que quitar.

Antoine de Saint - Exupe

Minimalismo

Google siempre ha sido un maestro del minimalismo en el diseño. Una actualización reciente eliminó la barra superior oscura de su página de inicio, porque la gente viene a Google.com para buscar, no para distraerse con otros productos que Google tiene para ofrecer. Esta barra adicional nunca contribuyó en nada al mensaje principal de su motor de búsqueda: buscar en la web. En su lugar, estos enlaces ahora se colocan cuidadosamente en una ventana desplegable, para que los usuarios interesados ​​puedan echar un vistazo y navegar cuando sea necesario..


GoodUI.org es una excelente compilación de 32 ideas de Jakub Linowski que te ayudará a construir una buena interfaz de usuario utilizable. El primer consejo es que debe probar un diseño de una columna en lugar de un diseño de varias columnas. La justificación de este argumento es que al hacer esto, debería poder guiar a sus lectores de una manera más predecible de arriba a abajo, mientras que un enfoque de varias columnas conlleva un riesgo adicional de distraer el propósito principal de una página..

Los diseños de varias columnas se han utilizado en la impresión durante años y funcionan bien. Tomemos el caso de The New York Times o Mashable. El contenido es una colección de artículos (o noticias), cada uno con un encabezado prominente. No tienen un solo mensaje central para sus visitantes, más bien, una recopilación de información para ellos, y sus interfaces ofrecen esto de manera efectiva.

Un diseño de una columna guiará a sus lectores de una manera predecible, sin el riesgo de distraerlos del propósito principal de una página.

GoodUI.org


Fuente de la imagen: Goodui.org

Diseño para expresarse mejor

Eche un vistazo a este diagrama simple, que uso para representar "expresión":


El círculo interior representa lo que expresas a los demás y el círculo exterior es el mensaje que intentar para expresar. Esto no solo se aplica al diseño web, de hecho, este concepto lo ayudará a mejorar sus habilidades de comunicación en general. Siempre que intentes expresar o comunicar una idea a otros, haz todo lo posible para aumentar el círculo interno. Evalúate y trata de ponerte en la piel de tu audiencia. ¿Qué tanto de tu mensaje deseado estás expresando??

La cartera de Calm Digital es un buen ejemplo de cómo es posible expresar una idea central de manera efectiva. En este caso, lo primero que notará es la palabra "Calma" escrita en enormes letras Sans-Serif sobre un fondo azul. El contraste entre el blanco y el azul utilizado es perfecto; No demasiado y no muy poco, solo lo suficientemente tranquilo. El color azul es conocido por promover sentimientos de calma y serenidad..


No te alejes de cualquier oportunidad que pueda ayudarte a expresar mejor las cosas. Las conexiones a Internet son más rápidas de lo que solían ser, los navegadores son mucho más potentes y capaces, y las tecnologías ricas como HTML5, CSS3, etc. están dando más poder que nunca a los desarrolladores web. Se acabaron los días en los que estaba restringido a crear páginas estáticas. No deje de usar la última variedad de herramientas y tecnología si puede ayudarlo a transmitir mejor su mensaje a sus visitantes. Destaco la segunda parte de esa frase: Si puede ayudarle a transmitir mejor su mensaje a sus visitantes..

Hace solo unos años, no podíamos imaginar colocar un video completo como fondo de un sitio web. Pero, he aquí, no es una práctica poco común en estos días. No hay mejor manera de transmitir la experiencia de usar una tableta que un video. Esto es exactamente lo que Google hizo para su sitio web Nexus 7. Al hacer clic en un botón, se encuentra justo en medio de la experiencia Nexus..


Spotify va un paso más allá y reproduce automáticamente un video en segundo plano. Es cautivador ...


El sitio web del diseñador Fernando Maclen utiliza un video borroso en el fondo que lo muestra en el trabajo. Toda la página se mantiene fiel a la leyenda "Superb simplicidad".



Conclusión

Repasemos brevemente lo que hemos cubierto en este artículo:

  • La transformada de Fourier es una idea simple pero efectiva, que nos informa de los ingredientes individuales que forman parte de la fabricación de un producto final. Esta simple idea de dividir un mensaje principal en pequeños componentes es lo que un diseñador web debe tratar de hacer.
  • Diseño para abarcar el contenido, no el desorden. Cada detalle, hasta el favicon, debe ayudar a expresar el mensaje del contenido..
  • Diseño para expresar. No evite hacer un esfuerzo adicional para expresar su idea de una mejor manera. Utilice lo último y lo mejor que la tecnología tiene para ofrecer, si cree que lo ayudará a expresarse de manera más efectiva.

Espero que hayan disfrutado este artículo, gracias por leer.!