Atom design UX UI páginas web con buen feng shui

Átomos, moléculas, organismos, plantillas y páginas web, Apps…

La tecnología y el diseño unidos para crear páginas que personalmente denomino páginas web con buen Feng Shui* ¿Y por qué?

Porqué son webs creadas y pensadas para y por los usuarios que las van a consumir… como todo lo que creamos desde el marketing debería ser.

Cercano, personalizable, fácil… cálido, serio y confiable…

Si buscas dentro del ser humano vemos que la base de la vida son los sistemas moleculares y de conjunto… con dinámicas en espiral, que además son las mismas que descubrimos en  nuestras relaciones interpersonales y en el Universo, como dijo Stephen Hawking y antes Albert Eistein (o su primera mujer Mileva Marić, que dicen que en realidad creó ella las teorías pero al ser mujer no podía acceder a la investigación y desarrollarlas, nunca lo sabremos).

Las dinámicas en espiral explican que la capacidad de las personas para adaptarse al mundo y según su consciencia vital se desarrolla y evoluciona de una forma más individualista o cósmica.

Así deben ser también las webs donde acceden los seres humanos, adaptables y flexibles para cada tipo de Target objetivo de manera natural.

El diseño industrial, el urbanismo y la arquitectura han desarrollado sistemas modulares inteligentes para fabricar objetos y espacios inmensamente complejos como aviones, barcos, rascacielos y sistemas de telecomunicaciones globales.

El Feng Shui es una aplicación del orden en base al número áureo natural en los aspectos de la vida, en los espacios, en la vida, organización de las ciudades, sobretodo en Asia, para armonizar con los elementos naturales y las formas lógicas que mejoran las dinámicas orgánicas de las personas.

Así se aplican la teorías del color del Feng Shui y de la Teoria del color y la forma de la Bauhaus, que son muy similares.

También la organización base de la arquitectura web y el diseño puede adquirir estos beneficios y aplicarlos para conjugar en beneficio de las personas que las van a utilizar, de manera natural.

Un ejemplo es crear una web pensando en su base y el flujo dinámico de sus contenidos.

Los colores cálidos convierten más clicks, según la Teoría del color, el Feng shui, los profesionales del diseño UX UI y ahora también el Atom design, que hace que ese “botón” sea más orgánico y adaptable a todos los dispositivos y utilidades que necesiten las personas que lo usan.

www.uniformesprat.com web app responsive tienda online creada por lutxana con UI y Atom design

Así como Gaudí se inspiraba en el origen de la naturaleza, el “número áureo“, podemos crear webs basadas en elementos esenciales naturales como las moléculas y los átomos, de ahí surge el “Atom design”, complementando el diseño de webs UX UI.

Brad Frost crea el “Atom design”  http://atomicdesign.bradfrost.com/

Pero no es nada más que organizar la información y el diseño de una página web teniendo en cuenta a las personas y sus circunstancias, sus necesidades, como establece la definición del buen marketing.

El lenguaje de los átomos, las moléculas y los organismos conlleva una jerarquía útil para que construyamos deliberadamente los componentes de nuestros sistemas de diseño.

  1. ÁTOMOS, elementos HTML esenciales

Estos átomos incluyen elementos HTML básicos como etiquetas (tags, metatags), formularios, entradas, botones y otros elementos funcionales esenciales.

Personalmente y con mi “mente SEO” también establezco  un orden creativo de web estructural en base a las 3/5 palabras clave que definen el objetivo base de la marca a conseguir con su web en Internet.

Igual para mi las palabras clave que serían como los átomos origen que fundamentarán todo el contenido mediante relaciones intrínsecas entre sí.

Las formas circulares atraen mucho mejor a la vista del ojo humano, por eso de un tiempo a esta parte las fotos de perfil de usuario han pasado a ser circulares en toda web que se precie. Esto lo establece la Teoría de la forma o de la Gestalt, el Feng Shui y ahora también cualquier profesional del diseño UX UI web y de Apps.

www.papeleriasegarra.com web app responsive tienda online creada por lutxana con UI y Atom design

2. MOLÉCULAS, elementos diseño UI

Son las agrupaciones de contenidos en relación a un átomo origen, estos grupos moleculares tienen relaciones entre sí mediante conexiones y combinaciones diversas.

En las interfaces web, las moléculas son grupos relativamente simples de elementos de diseño UI (diseño web que se enfoca en crear interfaces de fácil uso para las personas y accesible desde los diferentes dispositivos digitales) que funcionan juntos como una unidad.

Por ejemplo: una etiqueta de formulario, una entrada de búsqueda y un botón se pueden unir para crear una molécula de “formulario de búsqueda”.

Ejemplos que usan diseño UI

  • Twitter: diseña su interface de manera que la puedes visualizar de forma resumida, abrirla y cerrarla fácilmente.
  • Pinterest: es la web precursora en utilizar UI design ya que permite crear grupos de contenidos por “tags” que organizan la información y le dan así mismo mejor accesibilidad.

3. ORGANISMOS, secciones distintas de una interfaz

Conjuntos de moléculas con funcionalidades anexionadas , relativas, según las necesidades de cada usuario/a.

Los organismos son componentes de IU relativamente complejos compuestos de grupos de moléculas y / o átomos y / u otros organismos. Estos organismos forman secciones distintas de una interfaz.

Revisemos nuestra molécula de formulario de búsqueda. A menudo se puede encontrar un formulario de búsqueda en el encabezado de muchas experiencias web, así que pongamos esa molécula de formulario de búsqueda en el contexto de un organismo encabezado.

  • El encabezado forma una sección independiente de una interfaz, a pesar de que contiene varias piezas de interfaz más pequeñas con sus propiedades y propiedades únicas.

Los organismos pueden consistir en tipos de moléculas similares o diferentes. Un organismo de cabecera puede consistir en elementos diferentes, como una imagen de logotipo, una lista de navegación principal y un formulario de búsqueda.

Podemos ver este tipo de organismos en casi todos los sitios web que visitamos: YAHOO, GOOGLE, FACEBOOK, AMAZON, etc.

Los organismos como los encabezados de sitios web constan de moléculas más pequeñas, como navegación primaria, formularios de búsqueda, navegación de utilidad y logotipos.

Algunos organismos pueden consistir en diferentes tipos de moléculas, otros organismos pueden consistir en la misma molécula repetida una y otra vez.

  • Por ejemplo, visita una página de categoría de casi cualquier sitio web de comercio electrónico y verá una lista de productos que se muestran en alguna forma de cuadrícula.

Un organismo de cuadrícula de producto en el sitio web de comercio electrónico de Gap consiste en la misma molécula de producto repetida una y otra vez.

Desarrollar desde moléculas hasta organismos más elaborados proporciona a los diseñadores y desarrolladores un importante sentido del contexto.

Los organismos demuestran esos componentes más pequeños y simples en acción y sirven como patrones distintos que se pueden usar una y otra vez.

El organismo de grilla de producto se puede utilizar en cualquier lugar donde se deba mostrar un grupo de productos, desde listas de categorías hasta resultados de búsqueda y productos relacionados.

Ahora que tenemos organismos definidos en nuestro sistema de diseño, podemos romper nuestra analogía química y aplicar todos estos componentes a algo que se asemeje a una página web.

4. TEMPLATES (ARQUITECTURA WEB, PLANTILLA)

La plantilla de página de inicio consiste en organismos y moléculas aplicadas a un diseño.

Las plantillas son objetos a nivel de página que colocan componentes en un diseño y articulan la estructura de contenido subyacente del diseño.

Para construir sobre una plantilla de página de inicio que muestra todos los componentes de página necesarios funcionando juntos ( TÍTULO, NOMBRE O MARCA, LOGO, PÇAGINAS ESENCIALES: INICIO, SOMOS, BLOG, CONTACTO Y BÚSQUEDA), lo que proporciona un contexto para estas moléculas y organismos relativamente abstractos.

Al diseñar un sistema de diseño eficaz, es fundamental demostrar cómo los componentes se ven y funcionan juntos en el contexto de un diseño para demostrar que las piezas se suman a un todo que funciona bien.

Las plantillas es que se centran en la estructura de contenido subyacente de la página en lugar del contenido final de la página.

Los sistemas de diseño deben tener en cuenta la naturaleza dinámica del contenido, por lo que es muy útil articular las propiedades importantes de los componentes, como el tamaño de las imágenes y la longitud de los títulos y el texto.

Al definir el esqueleto o arquitectura base de una página web, podemos crear un sistema que puede dar cuenta de una variedad de contenido dinámico, al tiempo que proporciona barandas necesarias para los tipos de contenido que pueblan ciertos patrones de diseño.

Por ejemplo, mostrar algunos componentes clave en acción y también la estructura del contenido con respecto a los tamaños de imagen y las longitudes de los caracteres.

5. PÁGINAS (SECCIONES)

Las páginas son instancias específicas de plantillas que muestran cómo se ve una web IU con contenido representativo real.

Sobre la base de nuestro ejemplo anterior, podemos usar la plantilla de la página de inicio y verter texto representativo, imágenes y medios en la plantilla para mostrar el contenido real en acción.

El escenario de la página es la etapa más concreta del diseño atómico. Es lo que los usuarios verán e interactuarán cuando visiten su experiencia.

Es donde ves todos esos componentes que se unen para formar una interfaz de usuario bella y funcional. ¡Emocionante!

Las páginas son esenciales para probar la efectividad del sistema de diseño.

Es en la etapa de la página que podemos observar cómo todos esos patrones se mantienen cuando se aplica contenido real al sistema de diseño.

¿Todo se ve bien y funciona como debería?

Si la respuesta es no, podemos retroceder y modificar nuestras moléculas, organismos y plantillas para abordar mejor las necesidades de nuestro contenido.

Cuando vertimos contenido en la plantilla de la página de inicio podremos ver cómo se sostienen todos los patrones de diseño aplicados.

Debemos crear sistemas que establezcan patrones de diseño reutilizables y también reflejen con precisión la realidad del contenido.

Las páginas también proporcionan un lugar para articular variaciones en las plantillas, lo cual es crucial para establecer sistemas de diseño robustos y confiables.

Ejemplo páginas variables según usuario en tiendas online “atom design”:

Un usuario tiene un artículo en su carrito de compras y otro usuario tiene diez artículos en su carrito.
El tablero de una aplicación web generalmente muestra actividad reciente, pero esa sección se suprime para usuarios nuevos.
Un título de artículo puede tener 40 caracteres de largo, mientras que otro título de artículo puede tener 340 caracteres.
Los usuarios con privilegios administrativos pueden ver botones y opciones adicionales en su tablero en comparación con los usuarios que no son administradores.
En todos estos ejemplos, las plantillas subyacentes son las mismas, pero las interfaces de usuario cambian para reflejar la naturaleza dinámica del contenido.

Estas variaciones influyen directamente en cómo se construyen las moléculas subyacentes, los organismos y las plantillas.

Por lo tanto, crear páginas que tengan en cuenta estas variaciones nos ayuda a crear sistemas de diseño más resistentes. ¡Así que ese es el diseño atómico!

Estas 5 etapas distintas funcionan simultáneamente para producir sistemas de diseño de interfaz de usuario efectivos. 

ATOM DESIGN METODOLOGÍA

*Puedes ver aquí la tabla periódica de los elementos HMTL5 DE Josh Duck.

http://smm.zoomquiet.top/data/20110511083224/index.html

Los átomos son elementos de la interfaz de usuario que no se pueden desglosar más y sirven como bloques de construcción elementales de una interfaz.

Las moléculas son colecciones de átomos que forman componentes de IU relativamente simples.

Los organismos son componentes relativamente complejos que forman secciones discretas de una interfaz.

Las plantillas colocan componentes dentro de un diseño y demuestran la estructura de contenido subyacente del diseño.

Las páginas aplican contenido real a las plantillas y articulan variaciones para demostrar la UI final y probar la resistencia del sistema de diseño.

Cuando se combinan, estos átomos abstractos de repente tienen un propósito.

El átomo etiqueta ahora define el átomo de entrada. Al hacer clic en el botón átomo ahora se envía el formulario. El resultado es un componente simple, portátil y reutilizable que se puede colocar en cualquier lugar donde se necesite la funcionalidad de búsqueda.

La creación de componentes simples ayuda a los diseñadores y desarrolladores de interfaces de usuario a cumplir el principio de la responsabilidad única, un antiguo precepto de informática que fomenta la mentalidad de “hacer una cosa y hacerlo bien”.

Por lo tanto, la creación de moléculas simples de interfaz de usuario facilita las pruebas, fomenta la reutilización y promueve la coherencia en toda la interfaz.

Ahora tenemos componentes simples, funcionales y reutilizables que podemos poner en un contexto más amplio.

El diseño atómico es una metodología útil de diseño y desarrollo, pero esencialmente es simplemente un modelo mental para construir una UI.

  • info http://atomicdesign.bradfrost.com/

@lutxana

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.