No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Foundations

10/23
Recursos

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)

Aportes 59

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渢ono鈥?
<h3>馃摝 Foundation</h3>

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).

鈿ueden ver todas las notas de la clase en este Notion, adem谩s le agregu茅 recursos extras, espero les guste.

鉁擳ambi茅n escrib铆 el siguiente tutorial 8 atajados de teclado para ser un m谩ster en Notion.

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?

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.

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.

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(?

<h3>Fundations</h3>

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. 鈥淪paces鈥 se refiere a los espacios entre elementos.
  4. Iconograf铆a.
  5. Style
  6. Tono (Voice and tone): Qu茅 tipo de personalidad tiene el producto. ****
<h3>Foundations</h3>

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

<h3>Tipograf铆a</h3>

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

<h3>Colores</h3>

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

<h3>Layout - spaces</h3>

Cambian el orden de los elementos dentro del sistema.

<h3>Iconograf铆a</h3>

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

<h3>Style</h3>

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

<h3>Tono</h3>

驴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)
Gracias

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/

Que bien que explica este chabon por dios.
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)*

Los 鈥渇oundations鈥 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.

鈥淟os sistemas de dise帽o son un conjunto de reglas que pueden modificarse dependiendo del producto y su evoluci贸n en particular鈥

驴Como podr铆amos implementar un sistema de dise帽o que se adecu茅 a las necesidades de clientes diferente? Ya que cada uno tiene ideas y necesidades muy distintas.

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.

Jajaj yo siempre uso Emojis 馃槃

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