Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Comprendiendo las Partes Compuestas de tu Diseño

by
Length:MediumLanguages:

Spanish (Español) translation by Gabriel Acosta (you can also view the original English article)

En este artículo vamos a ver una analogía simple que ilustrará formas efectivas de comunicarse a través del diseño. Una vez que hayamos establecido la idea, echaremos un vistazo a algunos ejemplos conocidos para llevar el punto a casa.

La analogía que vamos a a ver es la Transformación de Fourier, una intrigante herramienta matemática llamada así por el francés Joseph Fourier

Podría no impresionarte con las complejas (y aparentemente aburridas) ecuaciones. Pero, escondida dentro de estas ecuaciones, se encuentra una idea simple: que cualquier onda, o señal basada en el tiempo, se puede descomponer en muchas otras ondas, que conforman la original. En otras palabras, señala los ingredientes individuales que entran en la fabricación del producto final. En otras palabras, señala los componenetes individuales que entran en la fabricación del producto final.

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

Image source: Wikipedia
Fuente de la imagen: Wikipedia
Joseph Fourier, image released into the public domain by its author, Bunzil
Imagen de Joseph Fourier publicado en el dominio público por su autor, Bunzl

Por ejemplo, usted se propuso crear un sitio web cuando usted tiene un concepto que debe ser transmitido a los usuarios. Su trabajo, como diseñador web, es crear una página web que rompe esta idea en bits manejables; bits de imágenes, fragmentos de texto, o incluso vídeos que cuando son vistos por un visitante entonces transmite la idea a 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 parezca totalmente diferente cuando se toman individualmente, contribuyen de alguna manera a crear la onda roja que se combina con las otras ondas azules. Su trabajo consiste en investigar  las "ondas azules" (los elementos compuestos) de su mensaje principal. Por desgracia, si sólo tuvieramos una fórmula para eso!

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


Diseñar para construir contenido, no desordenar

El último iOS 7 de Apple, aunque recibió una respuesta mixta sobre los nuevos colores, la estética, la iconografía y la tipografía, es un paso adelante positivo. Como usuario del iPhone, encuentro la última oferta de software de Apple una experiencia mucho más útil y agradable que su predecesor. No puedo imaginar volver a iOS 6 ahora que me he acostumbrado a la nueva interfaz. Esto se atribuye a algo más que efectos de paralaje, animaciones y otras mejoras visuales. Una de las razones principales que hacen iOS 7 tan utilizable es que abarca contenido, en lugar de envolverlo en una piel skeuomorphic. Apple llama a este enfoque "deferencia".

La interfaz de usuario ayuda a los usuarios a comprender e interactuar con el contenido, pero nunca compite con él. - iOS Human Interface Guidelines

En la primera página de la guía de diseño, una captura de pantalla lado a lado de la aplicación nativa de tiempo que se ejecuta en iOS 6 e iOS 7 habla por sí mismo; El diseño abarca contenido. Usted no tiene que leer una palabra para ser informado sobre el clima actual instantáneamente. Cada detalle debe ayudar a expresar el mensaje.

weather

Al diseñar su sitio web perfecto, asegúrese de pensar dos veces en cada detalle. Cada componente que lo constituye; Tipografía, color, imágenes, cada detalle hasta el favicon, debe contribuir constructivamente, trabajando juntos en perfecta armonía para entregar su mensaje de manera efectiva.

Detalles Contraproducentes

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

Hay que decir que, su cerebro está continuamente recibiendo información de sus ojos y otros órganos sensoriales sobre el entorno a su alrededor. Un buen ambiente de la tienda cambiaría definitivamente su mente sobre no comprar un producto de ellos. Volviendo al tema, los enlaces de retroalimentación deben ser accesibles, pero escondidos. Gmail hace un buen trabajo en esto:

gmail

Hágase dos preguntas al agregar 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 añadir, pero sí cuando no queda nada para quitar

Antoine de Saint-Exupéry

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 principal, porque la gente llega a Google.com para buscar, no para distraerse con otros productos que Google tiene para ofrecer. Esta barra extra nunca contribuyó nada al mensaje principal de su motor de búsqueda: buscar en la web. En su lugar, estos vínculos ahora se colocan perfectamente en una ventana emergente desplegable, de modo que los usuarios interesados pueden echar un vistazo y navegar cuando sea necesario.

google

GoodUI.org es una excelente recopilación de 32 ideas de Jakub Linowski que le ayudará a construir una interfaz de usuario buena y utilizable. El primer consejo es que debe probar un diseño de una columna en lugar de un diseño multicolumna. La justificación de este argumento es que haciendo esto, usted debe ser capaz de guiar a sus lectores de una manera más predecible de arriba a abajo, mientras que un enfoque de varias columnas corre algún riesgo adicional de distraer el propósito principal de una página.

Los diseños multicolumna se han utilizado en la impresión por edades, 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 título destacado. No tienen un solo mensaje central para sus visitantes, sino una colección de información para ellos, y sus interfaces ofrecen esto de manera eficaz.

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

Image source: Goodui.org
Fuente de la imagen: http://Goodui.org

Diseño para expresar mejor

Echa un vistazo a este simple diagrama, que utilizo para representar "expresión":

express-circles

El círculo interior representa lo que expresas a los demás y el círculo exterior es el mensaje que pretendes expresar. Esto no sólo se aplica al diseño web, de hecho, este concepto le ayudará a mejorar sus habilidades de comunicación en general. Siempre que intente expresar, o comunicar una idea a otros, inténtelo lo mejor posible para aumentar el círculo interno. Evaluarte a ti mismo y tratar de ponerse en los zapatos de tu audiencia. ¿Cuánto de su mensaje pretende expresar?

El Portfolio 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 nota es la palabra "Calma" escrita en enormes letras Sans-Serif contra un fondo azul. El contraste usado entre el blanco y el azul es perfecto; No demasiado y no demasiado poco, sólo lo suficientemente tranquilo. El color azul es bien conocido por promover sentimientos de calma y serenidad.

calm

No se aleje de cualquier oportunidad que pueda ayudarle a expresar las cosas mejor. 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. Atrás quedaron los días en que se limitaban a crear páginas estáticas. No se niegue a utilizar el último conjunto de herramientas y tecnología si puede ayudarle a transmitir mejor su mensaje a sus visitantes. Hago hincapié en la segunda mitad de esa frase: si puede ayudarte a transmitir tu mensaje a tus visitantes mejor.

Hace unos años, no podíamos imaginar la colocación de un vídeo completo como el fondo de un sitio web. Pero, existe y está aquí, no es práctica rara 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 de Nexus.

nexus7

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

spotify

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

superb

Conclusión

Vamos a ejecutar brevemente lo que hemos cubierto en este artículo:

  • La transformación de Fourier es una idea simple pero eficaz, que nos informa de los ingredientes individuales que entran en 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 tener como objetivo hacer.
  • Diseño para construir contenido, no desordenar. Cada detalle, hasta el favicon debe ayudar a expresar el mensaje del contenido.
  • Diseño para expresar. No se aparte de esa milla extra para expresar su idea de una manera mejor. Utilice lo último y más grande que la tecnología tiene para ofrecer, si usted piensa que le ayudará a expresar más eficazmente.

Espero que haya disfrutado de este artículo. Gracais por leer

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.