Foundations

Estamos aprendiendo que los sistemas de diseño se basan en gran parte en su documentación. ¿Cómo viabilizar y optimizar la administración y actualización de esta documentación sabiendo que los productos digitales están sujetos a cambios y transformaciones rápidos, constantes y traslapados?

Fundations son los elementos configurables con el cual vamos a construir distintos elementos de nuestro producto.

Tipografía: Definir los tamaños en especifico y familia tipografica en cada caso de uso.

Colores

Layout- spaces: Layout determina como van a estar distribuido nuestros elementos en la pagina. (Ej: Sidebar a la derecha, Tirulos, descripción de la pagina, etc) y ademas debemos tener en cuenta el espaciado entre los elementos.

Iconografía: Definir las reglas de la iconografia en nuestro sistema nos ayudara a mantener la consistencia. Tener en cuenta el tipo de iconos (Outline, relleno, emojis, etc(

Style: (nuestra marca puede presentarse con estilos juguetones o realistas, lo importante es definir tan claro como sea posible qué intentamos transmitir)
Tono: Que tipo de personalidad tiene nuestro producto, como habla, que características y que NO debería decir.

Martín Coronel
Diseño UX/UI

Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel`

Fundations: Son los elementos configurables con los cuales podremos construir nuevas cosas. Son las partes más básicas de nuestro proyecto.
.

• Tipografía: Un elemento primordial del diseño de nuestras interfaces. Hay que definirlo desde el principio.
  .
• Colores: Se definen también desde le principio para que el resultado sea el planeado y no se vaya tomando decisiones en el camino.
  .
• Layouts - Spaces: Formas y espacios que utilizamos para ordenar los elementos en nuestro sistema.
  .
• Iconografía: Hoy en día son importantes debido a que existe mucha comunicación con íconos o emojis.
  .
• Styles: Todo lo referente a los estilos que representen a la marca.
  .
• Tono: ¿Desde que posición hablas con tu audiencia? ¿Con qué personalidad o “tono”?

Los foundations son elementos que vamos a crear para después configurarlos en pantallas, darle funcionalidades y construir nuestro proyecto.

Los aspectos que definimos en esta área son:

1. Tipografía. Define el tamaño especifico y familia tipográfica en cada caso de uso.
2. Colores. Define la paleta de colores a utilizar en el proyecto.
3. Layouts. Determina como van a estar distribuidos los elementos en la página y además a tener en cuenta el espaciado entre los elementos.
4. Animaciones. Define las animaciones permitidas dentro del sitio.
5. Iconografía. Define las reglas de la iconografía de nuestro proyecto ya que esto ayuda a mantener la consistencia. Se debe de tener en cuenta el tipo de iconos como lo son los outline, relleno, emojis, etcétera.
6. Estilos. Define como se presenta nuestra marca ya sea con estilos juguetones o realistas pero que sea homogéneo a lo largo de todo el sitio.

Este profe es supersimpático. ¡Qué buen rollo tramsmite!

Creo que al documentar lleva su tiempo pero a la larga nos hará fácil de trabajar en los diferentes etapas de un sistema(wiframes, sketch y employ).

Foundations

ℹ️ Definición
Los Foundations son elementos visuales necesarios para crear experiencias de usuario atractivas de punto a punto.

.
Se incluye, como Foundations, una referencia sobre iconografía, tipografía, diseño y estructura.
.

Tipografía (Typography)

ℹ️ Definición
La tipografía es nuestro sistema de fuentes.

.
Cada fuente seleccionada, sirve para asistir a nuestros usuarios a través de toda la representación visual de nuestra aplicación
.
Mantener la tipografía consistente y bajo un sistema de jerarquías, se garantiza que los elementos de la interfaz de usuario sean claros y fácilmente reconocibles al escanear la página.
.

✨ Concepto clave
Se seleccionaron tamaños de texto, estilos y diseños para equilibrar el contenido y la interfaz de usuario y fomentar la familiaridad.

.

Colores (Colors)

ℹ️ Definición
Los colores son la distinción de nuestra marca, manteniendo una experiencia consistente entre nuestros productos.

.
Cada color seleccionado, auxilia en la identificación exacta de aquello en lo que los usuarios necesitan ver.
.
Los colores son equilibrados y seleccionados para armonizar la visibilidad de nuestro producto, trayendo un sentido objetivo de marca.
.

✨ Concepto clave
Escoger categorías (primarias, secundarias y extendidas), permiten que los colores se enfoquen en su usabilidad permitiendo un contraste entre elementos y componentes.

.

Distribución (Grid / Layout)

ℹ️ Definición
Recursos visuales que funcionan como guías al momento de distribuir cada elemento de nuestro producto.

.
Un correcto layout, provee de una carga visual equilibrada, consistente en el posicionamiento de los elementos en la vista.
.
El diseño de un layout puede ser aplicado desde un componte hasta un plantilla entre diferentes vistas.
.

✨ Concepto clave
Generar guías de distribución deberá cubrir desde la distribución espacial tanto en columnas como renglones, así mismo texto embebido (oraciones o botones, por ejemplo).

.

Ilustraciones (Illustrations)

ℹ️ Definición
Las ilustraciones son representaciones de ideas complejas que sirven para reflejar un contexto o estado emocional.

.
Las ilustraciones son un elemento clave de nuestra marca, ya que refleja la personalidad mediante recursos visuales alusivos.
.
Podemos seleccionar ilustraciones en diferentes ámbitos marginando una narrativa consistence en un momento dado.
.
Con el uso clave de color y creatividad, se puede experimentar como un área en especifico de desarrollo.
.

✨ Concepto clave
El uso de ilustraciones permiten difundir información clave para el marketing, ya que son usado para dirigir la atención al objetivo clave como mensaje.

.

Iconografía (Iconography)

ℹ️ Definición
Los iconos son representaciones visuales de comandos, dispositivos, directorios o acciones comunes.

.
Los iconos deberías se usados con el propósito de maximizar la compresión y reducir la carga cuando necesitemos resaltar la acción o sección.
.
Los iconos son diseños con la personalidad de nuestra marca, combinando el significado basado en experiencia para generar una progresión a través del texto.
.

✨ Concepto clave
El uso inadecuado de la iconografía, generará confusión en los usuario dependiendo, inicialmente, de su reconocimiento así como la perspectiva de uso o semántica con el texto que lo fuera relacionar.

.

❓ Debate
¿Conoces más referencias como Foundations para complementar nuestros sistemas de diseños?

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

Apuntes de la clase:

Son las partes más básicas de nuestro sistema. Son elementos configurables con los cuales vamos a poder construir muchas cosas.

• Tipografía: Es de lo primero que debes de definir.
• Colores: De igual forma, de lo primero que debes definir.
• Layouts y Spaces: Cambia el paradigma.
• Iconografía: Son muy importantes hoy en día los emojis para tener una comunicación efectiva.
• Style: Definir esto en documentación es fundamental no solo para los diseñadores/programadores sino para cualquier persona que esté aplicando cosas del producto.
• Tono: Describe qué tipo de personalidad tiene el producto, cómo habla, qué tipo de características y qué NO debería de decir.

Algo me dice que todos los programadores deberian ser tambien diseñadores. por lo menos yo que no soy diseñador esto me abre el panorama a agilizar todos los procesos, sobretodo el programadores super full que tenemos un proyecto propio o que le toca hacer todo en la parte tecnologica.

Todo esto tiene mucho que ver con la creación de un manual de identidad corporativa

Para todos los que somos nuevos en este campo y para todos los que queremos aprender más; existe esta plataforma: Uxcel
En la que invirtiendo solo 5 minutos por día podemos aprender sobre UI / UX design.

En el enlace el contenido en notion no se encuentra más que la información de principios, sistemas, fundations y componentes no tienen información.

Gran clase, lo que tenemos que presentar para darle consistencia a nuestro diseño

Para lo de voz y tono les recomiendo el curso de UX writting que tiene Platzi 😄

Los foundations son las partes mas básicas de nuestro sistema, son los elementos configurables con los que vamos a poder construir muchas cosas. Estos son:

• Tipografia: Definir una tipografia nos ayudara a no salirnos de la reglamentacion y seremos consistente.
• Colores: Generan esta regla de por donde ir o por donde no podemos ir, si los definimos los diseños que haremos tendrán mas sentido y tomara un mejor camino.
• Layout - Spaces: Muchos sistemas no toman estos en cuenta, porque justamente cambian el como se ordena nuestro sistema y cambiar esto podría darle a nuestro proyecto otra perspectiva.
• Iconografia: Hoy en dia todos usamos iconos o emojis , y el usar el mismo tipo de iconos nos ayuda a tener concistencia.
• Style: nuestra marca puede presentarse con estilos juguetones o realistas, lo importante es definir tan claro como sea posible qué intentamos transmitir.
• Tono: Este es el tipo de forma en la que habla o la personalidad que tiene nuestro producto.

Voice & tone, es uno de los foundations o partes más básicas de todo sistema de diseño, y se refiere a la descripción de la personalidad del producto, cómo habla y qué no debe decir. Es muy importante en el marketing, ya que le da carácter al producto.

Increíble tu curso. Muy muy muy recomendado.

La escritura correcta es foundation.

Foundations

Los sistemas de diseño son un conjunto de reglas que organizamos con nuestros equipos, y los fundations son las partes más básicas que podemos configurar en nuestro sistema. Vamos a repasar cada una de estas bases mientras escribimos la documentación en Notion:

• • Tipografía
  • Colores
  • Layout y spaces (son las formas y espacios fundamentales que utilizamos para ordenar los elementos de nuestro sistema)
  • Iconografía
  • Styles (nuestra marca puede presentarse con estilos juguetones o realistas, lo importante es definir tan claro como sea posible qué intentamos transmitir)
  • Tono (con qué personalidad o de qué forma debemos hablar con nuestra audiencia)

algunas de los fundations que yo añadiría y siempre fueron requeridos en mi trabajo son:

• • Ilustraciones (los lineamientos de cómo tienen que verse o crear las ilustraciones a utilizar)
  • Botones (tipos de botones a utilizar puede ir de grande a pequeño y los estados correspondientes de cada botón como deshabilitado o hover)
  • Mensajes de alerta (cómo trabajar estos mensajes mediante pop ups, sliders que aparecen desde abajo etc.)
  • Campos de formulario (siempre y cuando se necesite reglamentar como se ven los campos de rellenado de formulario con sus estados de inicio, llenado, erróneo, etc.)

Definir los fundations desde el inicio garantiza consistencia en nuestro sistema.

Hola a todos, en mi experiencia lo Ideal antes de crear los fundamentos de un sistema de diseño es preguntarte
¿Para quien estas diseñando? Ya que definiendo quiénes son los usuarios podrás obtener los insights y el contexto necesarios para crear el producto con las características ideales

¡Excelente Clase Rulótico! corazón coreano jaja ❤️

Malditos Emojis lo arruinaron todo(?

Son los elementos configurables con los que podemos construir cosas, tenemos varios foundations como:

• Tipografía: es importante definirlo desde antes para generar un esquema y no salirnos de la reglamentación, definirlos desde antes
• Colores: generan una regla de por donde podemos ir o por donde no, si lo definimos desde antes son un resultado planeado
• Layout - spaces: cambian como se ordenan los elementos dentro de nuestro sistema
• Iconografía: los iconos nos ayudan en la comunicación
• Style: el estilo que va a llevar para mejorar la experiencia
• Tono (Voice and tone): saber de donde hablas, el tipo de personalidad que hablas, que tipo personalidad tendrá el producto

8. Foundations

Los Foundation son las reglas que tendremos:

1. Tipografía
2. Colores: Tipo de definiciones, colores y variantes.
3. Layout - spaces: Determina cómo esta distribuido nuestro sistema. “Spaces” se refiere a los espacios entre elementos.
4. Iconografía.
5. Style
6. Tono (Voice and tone): Qué tipo de personalidad tiene el producto. ****

Las partes más básicas del sistema, los elementos que se configuran en los distintos sitios de la plataforma.

Elementos primordiales del sistema, definir la fuente, los tamaños.

Definen la regla de por donde se puede ir y donde no.

Cambian el orden de los elementos dentro del sistema.

Hacen gran parte del mundo actual, se debe tener una consistencia en los iconos

Es importante definir el estilo que va a tener la aplicación. Todo el equipo debe entender como es nuestro producto.

¿Desde dónde hablas? Se define que tipo de personalidad tiene el producto.

Foundations 📦

Son las partes más básicas de nuestro sistema, son los elementos configurables con los cuales vamos a construir muchas cosas

Tipografía 🅰

Las tipografías abarca una de las cosas primordiales dentro del diseño. Definirlo desde antes genera un esquema del que ya no puedes salir de él

Colores 🎨

Los colores generan está regla que por donde puedes ir y por donde no.

Layout - spaces 🎈

Muchos sistemas consideran a estos fuera de los foundations.

Los layouts cambian como se ordenan los elementos en nuestro sistema.

Iconografía 🙅‍♂️

Definir las reglas de la iconografía va hacer que seamos consistentes y no a veces tengamos un emoji o un icono realista, etc…

Style 🕶

Definir el estilo como realista, contemporáneo, etc…

Todos en el equipo tiene que entender como habla nuestro producto hacia el mundo

Tono 📢

Definir el voice and tone para saber como a quien va dirigido

Me agrada como los Foundations marcan la ruta del proyecto, desde la tipografía, los íconos y los colores…

Clases super entretenidas, breves y constructivas pues tienen un orden y una consistencia que brinda una buena aceptación por parte de nosotros Los estudiantes.

• Los fundations son los elementos configurables con los cuales vamos a poder construir muchas cosas. (Procedural)

Foundations

Foundations are the visual elements needed to create engaging end-to-end user experiences. This includes guidance on iconography, typography, layout and structure.
https://atlassian.design/foundations/

Los “foundations” se refieren a las bases esenciales que constituyen los cimientos de un sistema de diseño. Estas incluyen elementos fundamentales como tipografía, colores, diseño y espacios, iconografía, estilos y tono de comunicación. Estas son las partes más básicas y fundamentales que se configuran en un sistema de diseño para establecer la coherencia y la identidad visual.
Al enfocarse en estos elementos, un equipo puede construir una estructura sólida y cohesiva para la creación y el mantenimiento de productos digitales, asegurando que haya consistencia en la apariencia y la comunicación, lo que contribuye a una experiencia de usuario más efectiva y reconocible.

Foundations

Son los elementos configurables con el cual vamos a construir distintos elementos de nuestro producto.

• Tipografía
• Colores
• Layout-spaces
• Iconografía
• Style
• Tono

Foundations:

• Tipografías
• Colores
• Layout - spaces
• Iconografía
• Style
• Tono

Los foundations son los elementos configurables como
Tipografia: Definir tamaños especificos para tener consistencia en el diseño
Colores: Tener una paleta de colores preestablecida para tener un orden, y apoyarnos en la psicologia del color para transmitir mejor un mensaje
Layout-spaces: Tener en claro el espaciado que llevaran las paginas y que se repetiran

Me he dado cuenta que si al probar un diseno los layouts y los spaces no son consistentes genera incomodidad porque al cambiar de una pagina a otra los elementos no permanecen en el mismo lugar

Iconografia:Usar iconos para tener una estetica mas agradable, y que estos tengan un diseno respecto a nuestras ideas
Style: El estilo que queremos buscar para lograr mostrar un producto de la mejor manera, ya sea con estilos realistas para mostrar un producto real o dibujos kawaii para una tienda de dulces, o venta de camisetas con estampados bonitos y adorables
Tono: Saber como le hablamos al usuario, dependiendo el producto y a quienes nos vamos a dirigir

Como cuando vienes a ver una clase por recomendación de otro curso y te quedas picado por la energía que transmite el profe.

Estamos aprendiendo que los sistemas de diseño se basan en gran parte en su documentación. ¿Cómo viabilizar y optimizar la administración y actualización de esta documentación sabiendo que los productos digitales están sujetos a cambios y transformaciones rápidos, constantes y traslapados?

Los fundation son un conjunto de reglas que pueden modificarse dependiendo el producto y su evolución.

Dentro del link de notion y dentro del apartado de Fundations, no está el Style. ¿Alguno lo pudo ver? Me parece muy interesante, y me gustaría tener un ejemplo más concretro.

jaja que gracioso este Profe…!

Muy buen maestro, estoy muy contento con sus explicaciones

La verdad es que a veces diseñamos algo y no tenemos la debida documentación. Gracias a este curso estoy viendo todo un panorama de planificación previa que podría resultar tedioso pero al fin de cuenta hará más ágil el desarrollo.

“Los sistemas de diseño son un conjunto de reglas que pueden modificarse dependiendo del producto y su evolución en particular”

Los Foundations son tan simples pero tan necesarios para marcar las reglas de trabajo y no ir creando sobre la marcha.

Wow! Este curso es increíble me hace sentir capaz de diseñar un marketplace que alcance un valor de 45 mil millones de euros en el mercado.

wauu bonito el diseño pero diapositivas como la hace

si soy programador, puedo apoyarme de bootstrap, foundation o material desing de google para tener en cuenta estas reglas de diseño?

Hola ¿en los fundations puedo meter los componentes? o más bien ¿por qué no meter los fundations dentro de los componentes? Me ayudan por favor…

Volviendo a repasar esta clase genial

Me encantan las clases de Rulótico!

Ahora veo lo importante de tener bien definido cada componente al desarrollar un sistema que puede ser escalable, de esta manera invertimos tiempo al construirlo para evitar perderlo haciendo lo mismo una y otra vez.

Que lo que haces no sea un resultado de lo que estabas diseñando…

Jajaj yo siempre uso Emojis 😄

Foundations son la base de todo lo que es visual del sistema que vamos a construir