Design System y detalles visuales a tener en cuenta

Queremos código!!! Queremos código!!! Queremos código!!! Queremos código!!!

Este es el enlace de la guía de diseño de Shopify: https://polaris.shopify.com/design/design 😄

TailwindCss es un framework muy potente se los recomiendo.

Documentación oficial de TailwindCss https://tailwindcss.com/docs
Curso de TailwindCss de platzi https://platzi.com/clases/tailwind-css/

Existe un Curso de Sistemas de diseño que a mi particularmente me gusto mucho y lo dicta Rulótico González : https://platzi.com/clases/sistemas-diseno/

Los cursos con Estefany tienen mucho para mejorar, a los estudiantes nos sirve mucho más escribir código, más allá de hacerlo por nuestra cuenta, estaría genial que las cosas que explica las llevara a la práctica en el mismo curso.

🍥 Design System y detalles visuales a tener en cuenta

• Design Sistem ⇒ Es una colección de componentes reutilizables guiados por estándares claros.
• Se puede definir como un plan maestro, el cual será la fuente de la verdad
  • Una referencia para asegurarse de que todos los que trabajan en el producto estén siempre en la misma página.
• Empresas como Airbnb, Uber e IBM han cambiado la forma en que diseñan productos digitales al incorporar sus propios sistemas de diseño únicos.
• Nos permite tener consistencia
• Cada una de estas empresas ha podido cambiar el ritmo de creación e innovación dentro de sus equipos.

• Utilizando una colección de componentes repetibles.
• Utilizando un conjunto de estándares que guían el uso de esos componentes.

• Todo un equipo de producto (programadores, ingenieros, diseñadores, gerentes de producto, equipo C-suite, etc.)

• Se hace un inventario:

  • Colores, logotipos, encabezados, pies de página, formularios, código, etc.
  • Y se llega a un consenso sobre cómo se deben diseñar, codificar, presentar y hablar de las cosas.

• Podemos tener un boceto donde encontraremos: Ideas, Colores, Etc.

• Los integrantes de un equipo deben tomar decisiones para el producto el cual llegara a afectar al código

• Basado en ese tipo de decisiones las cuales se guían de las necesidades, se puede encontrar herramientas

Design - Shopify Polaris

• Una, guía de diseño que nos puede ayudar es la de Shopify
• También podemos usar Frameworks CSS
• Tailwind CSS ⇒ nos ayuda a guiarnos en ciertos aspectos como espaciados, breakpoints, etc.

muy buna la teoría pero hace falta un curso practico de estos temas

No quero juzgar pero me parece que un platzi master cometiendo ese tipo de errores con el tamaño de la letra no tiene presentación.

Frontends: Les recomiendo mucho este curso porque le dará las bases para comprender bien un sistema visual antes de mandarse al código :3
https://platzi.com/clases/sistemas-diseno/

El curso lo da el gran Rulótico 😄

Se ven muchos comentarios negativos… Amigos NO TODO ES CODIGO. Hay mucho mas!!! Cuando empiecen a trabajar para una empresa, pasaran el 70% del tiempo leyendo codigo y solo el otro 30% escribiendo codigo. No crean que es pasar todo el dia escribiendo codigo sin dormir… Hay mucho mas.

Les recomiendo usar Notion para toda las especificaciones de diseño en el proyecto que trabajen, es muy simple de usar pero poderoso.

me aburro con tanto que habla…

https://www.uifrommars.com/design-tokens-que-son-ventajas/

https://css-tricks.com/what-are-design-tokens/

Y el código para cuando??
.
.
Hasta ahora, solo teoría 👎

Vaya, estos son conceptos que tal cual no sabía que se llamaban así, pero que sí tenía en cuenta en mis páginas, es decir, sé que la consistencia en el diseño es importante, y también trabajaba con base en componentes, es bueno saber que tienen un nombre jaja

He visto que aprender React + Tailwind + Ingles es un buen fit si se quiere obtener un empleo remoto en Estados Unidos, muy buenos consejos en esta clase 💚

Si no hago codigo no puedo entender bien las propiedades de las que habla

Me lo parece a mí o…
😂jajaaj, muy buenas las diapos

11:20 Literal, queremos código!!!🥺

Este curso a pesar de no ser tan práctico como otros, es una joya. Todo estos conceptos son clave para desarrollarnos en nuestra carrera como FrontEnd. No todo es práctica también se requiere teoría y entender conceptos fundamentales.

Cada clase nos dan demasiada documentacion, y digo no esta mal, pero de todo lo que voy a leer voy a absorber muy poco, prefiero que nos den mas ejemplos practicos con codigo, se absorbe mas facil y pacticamos mas que estar leyendo y leyendo.

Esta clase está supremamente interesante, hace un tiempo queria avanzar y encontrar trabajo lo más rápido posible y me salté muchas bases para comenzar a aprender React JS.

Después a las malas entendí que las bases son supremamente importantes y como nuestros diseños deben ser consistentes, tanto en espaciamentos, alineación, fuentes, colores etc…

Muchos quieren ver código pero estos consejos son extremadamente necesarios.

Soy un estudiante kinestésico, necesito practicar para aprender , la teoría esta bien pero estos cursos me cuestan un montón en avanzar

Código Código Código.

Palabra clave: Branding
Es lo unico que llegó a mi mente cuando hablabas del desing system.

Aunque este es un curso muy teórico, siempre se pueden hacer los pequeños ejemplos que se muestran, además estoy aprendiendo y entendiendo muchos detalles que me parecen importantes a la hora de maquetar. Logicamente me gustaria algo mas practico, pero no todo es picar codigo. es mi punto de vista.

Les comparto las 10 mejores reglas de diseño por TOPTAL:

• Diseña en un programa de gráficos. No diseñes desde el código, ni siquiera las cosas pequeñas.
• Coincide con el diseño. Se consciente del diseño original y no trates de mejorarlo, solo igualarlo.
• La tipografía es enorme. El tiempo que pasas asegurándose de que es correcta debe reflejar su importancia.
• Evita la visión de túnel. Asegúrate de que sus adiciones se destacan como deberían. No son más importantes sólo porque los diseñaste.
• Relaciones y jerarquía: comprende cómo funcionan en el diseño para que puedas implementarlos correctamente.
• El espacio en blanco y la alineación son importantes. Hazlos precisos para el píxel y hacerlos de manera uniforme en todo lo que agregues.
• Si tu no está confiado en tus habilidades, después haz las adiciones tan mínimamente diseñadas como puedas.
• Tómate el tiempo entre las revisiones. Vuelve más tarde para ver tu trabajo de diseño con los ojos frescos.
• La implementación perfecta de píxeles es importante siempre que sea posible.
• Sé valiente. Busca a diseñadores experimentados para criticar tu trabajo.
  No todos los desarrolladores Front-End van a ser un diseñador fantástico, pero cada desarrollador de Front-End debe ser al menos competitivo en términos de diseño.

Necesitas entender lo suficiente acerca de los conceptos de diseño para identificar lo que está pasando y para aplicar correctamente el diseño a tu producto final. A veces, puedes escapar con copias ciegas si tienes un diseñador completo (y si es lo suficientemente detallado como para copiarlo en píxel).

Sin embargo, con el fin de hacer brillar grandes proyectos a través de muchas variaciones de contenido, necesitas cierta comprensión de lo que está pasando por la cabeza del diseñador. No sólo necesitas ver cómo se ve el diseño, sino que debe saber por qué se ve así y de esa manera puedes estar atento a las limitaciones técnicas y estéticas que afectarán tu trabajo.

Así, incluso como desarrollador de Front-End, parte de tu auto-mejora regular debe incluir siempre aprender más sobre el diseño.

Recomiendo comenzar la carrera en Platzi. También, recomiendo el curso de Figma o Adobe XD. Por último, les recomiendo el sitio de figma (https://www.figma.com/community/design_systems).

La pagina tailwindcss
Saben que es lo que resalto de este curso
No es lo practico
Es ver como nos brinda todas las herramientas posibles que nos ayudar a mejorar el trabajo en grupo, ser mas practico al momento de solucionar un problema y mucho mas.
En fin de cuenta practiquen muchachos, pero bastante ok

Les dejo este artículo de CSS tricks que habla de Design Tokens
https://css-tricks.com/what-are-design-tokens/

Les dejo este enlace para entender un poco más de “Design Token”. Hasta abajo hay un video muy interesante al respecto.

https://www.uifrommars.com/design-tokens-que-son-ventajas/

Otra recomendación: Curso de diseño para programadores ( Buscador de Platzi).

Pero ese diseño no hay que revisarlo para ver que esta horrible…

A pesar que de este curso no es precisamente el más rico en contenido, cuando ya tienes algo de noción en css y diseño, es importante una parte de la información aquí brindada, para tener mejores tips, sobre diseño, ( a veces tardas más tiempo en pensar como debe funcionar todo que en lo que tardas en escribir el código, y hay rutas más cortas donde todo es código)

Si quieren una página de inspiración y a la vez de código modularizado para la UI de su app: uiverse

Wow me acabo de enterar que lo que hacía al declarar las variables de css, es una herramienta bastante potente

Saben veo muchos comentarios donde practicamente tildan el curso de aburrido o inservible. Con mi experiencia personal si se siente un poco pesado después de venir de hacer cursos donde codeamos clase a clase , pero este curso es una super guia donde podemos venir a buscar cada que necesitemos buenas y nuevas practicas con css , creo que es un excelente curso si lo tomamos en el momento adecuado y enfocados en ser autodidactas, tomen cada explicacion , escriban y usenla inmediato practicando en proyectos personales

La diapositiva del protafolio tuvo muchos errores en cuanto a tipografías, margenes excesivos, falta de interlineado,guau. Aquí en la escuela de desarrollo web hay un curso de diseño para desarrolladores…

Estas es mi clase preferida hasta ahora, me ha resultado de mucha utilidad, no me mal interpreten las demás también, solo que no me esperaba aprender sobre design system.

No todo puede ser código, también es super necesario entender los conceptos, eso nos ayuda a reducir las líneas de código que usamos, a veces para centrar un ítem empezamos a usar position, left, top y resulta que solo necesitábamos un palce-item:center.

Para los que se quejan continuamente de que casi no hay código ni se practica mucho, les recomiendo páginas como Frontend Mentor o devChallenges, son muy buenos y de hecho el último hasta te da las herramientas en figma para que puedas basar tus componentes en un sistema de diseño.

Aunque soy partidario de que en este curso hace falta codigo, debemos tambien tener en cuenta de que el curso es de DISEÑO, jeje solo es una opinion ❤️

**Design tokens **

Son todos los valores que se necesitan para construir y mantener un sistema de diseño, como son: espacios, color, typografia, estilos, animaciones, entre otros. Los cuales representan datos.

La regla de los multiplos de 4 es un tema que se trata en otros cursos como el curso definitivo de html y css.
Muy básica pero no todos la tienen en cuenta.

Muy bueno tu aporte. Hice los 10 layouts de la clase anterior.

Este es mas un curso de diseño web que de programación. Bien pudieron sacar la parte de css grid y flexbox y unirlo a otro curso que si sea de programación

creo que este curso deberian recomendarlo niveles mas arriba incluso cuando ya se empezó con javascript en la escuela de desarrollo web. Cuando ya hiciste varios proyectos es de utilidad, antes vuelas.

Tarea: Design Tokens

Los Design Tokens son muy útiles porque, en esencia, son data centralizada en formato JSON, familiar a los devs.

Vieron que muchos de ustedes se están quejando de que hay poco código? Bueno, los Design Tokens ayudan a menos de esas quejas por parte de los devs. Es mejor un JSON que un PDF con el Design System.

Aprendí más en este video que el curso completo de sistemas de diseño, me gusta mucho como explica esta gran profesora.

Yo soy un súper fan de Tailwind CSS, sabiéndolo usar puedes crear sitios grandes 2x más rápido, la única pega es que tienes que tener conocimientos sólidos de CSS y sabes trabajar por componentes para evitar tener como 20 clases en una etiqueta 🤩

me siento mas diseñador que programador

Shopify

https://polaris.shopify.com/design/data-visualizations#section-accessibility

Guías de diseño de Shopify

Design Tokens

Hola a todos y todas, esper se encuentren muy bien. La profesora habló de design tokens y no vi documentacón en los recursos al respecto. Me tomé la tarea de encontrar una documentación que hiciera sencilla la exlicación de esto tanto en inglés como español.

Design tokens by Adobe En Inglés.

Design tokens En Español

a sacha no le gusto esta clase :'v

En esta página se pueden descargar los manuales de branding de bastantes empresas y algunos PDF sobre UI guidelines https://brandingstyleguides.com/ solo se tienen que loguear.

Aqui el curso de Tailwind CSS: https://platzi.com/clases/tailwind-css/

Un Design System por lo general es construido por diferentes miembros de un equipo para tener varias propuestas y por ende un sistema más sólido, claro y objetivo para cada sección de la plataforma. El objetivo de un Sistema de Diseño es crear tecnología de manera rápida y eficaz.

–
Tambien vale la pena leer un poco de lo que son los Design tokens. Basicamente, los design tokens son una forma agnostica de crear variables para la tipografia, colores, breakpoints, etc, pero no en cada lenguaje de programacion o para cada aplicacion, sino mas bien se crea un JSON y se consume en cada app, asi logramos tenes consistencia y estabilidad.

Esto sirve mucho para empresas que tiene una pagina web y aplicaciones en varias plataformas.

Bootstrap me parece un framework fabuloso y muy fácil de aprender y aplicar para el diseño de web independientemente de las nuevas técnicas y diseños que se pueden maquetar por medio de los layouts que creamos en figma o en Adobe Xd. 👨‍💻👨‍💻👍👍

Les comparto mi puntuación en la página que dejó la profe en la clase pasada:

Pd: Está muy divertida esta dinámica😅😅
URL: https://cantunsee.space/