Soy desarrollador backend y sé lo que es hacer un proyecto sin tener una idea clara del diseño y usabilidad de la aplicación **UNA PESADILLA **, pero también sé lo que es partir de una idea de diseño clara y luego a programar, un curso cómo este debería ser fundamental en cualquier tipo de estudios como desarrollador 😎.
Introducción
Todo lo que aprenderás sobre diseño para programadores
Entender los Fundamentos del diseño
El proceso creativo
Conceptos básicos de diseño
Diseño responsivo
Accesibilidad y diseño
Brief y requerimientos técnicos
Aprender sobre Diseño Experiencia de usuario
Definición de diseño UX
Diagramas de flujo
Wireframes y componentes
Aprender sobre Diseño de interfaz de usuario
Definición de diseño UI
Moodboard y línea gráfica
Teoría del color
Paletas de color
Tipografía
Layout y sistemas de grillas
Sistemas de componentes UI
Themes y customizaciones
Imágenes para web
Gráficos en movimiento para web
Resultado final
Conclusiones
Conclusiones del curso
Mentoría Expert
Diseño para programadores
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
What is a theme and how to transform a website with them?
Themes are essential tools that allow us to change the visual design of an application without making complex modifications to the code. Imagine being able to switch between a light and a dark theme with just one click, something common in modern operating systems such as Android 10. A theme gives you the ability to customize colors, fonts and background styles, among others, to adapt your application to the needs of your users or customers.
How to implement themes in a web application?
To implement themes in your web project, you can use CSS or SAS variables. These variables allow you to define a palette of colors and styles dynamically. In the example project, SAS variables are used because of their simplicity. Here is a walkthrough to achieve this:
-
Define your colors in a SAS variables file: Create a file where you store the main colors of your application. This will allow you to easily modify them in the future.
-
Create an alternative theme file: To implement a secondary theme, create another file with the new color palette. Make sure this file is independent from the main one.
-
Change theme with one line of code: By modifying the base CSS file, you change theme easily. Change the reference from the primary theme to the secondary theme and watch the application restyle itself effortlessly.
/* Example of theme change in base.css */@import 'color-theme-secondary'; /* Change to 'color-theme-primary' to revert */What are the advantages of using themes?
Implementing themes offers numerous advantages, especially in the field of design and project management. Some of them are:
-
Ease of modifications: By modifying a single line of code, you can change several components without much effort.
-
Flexibility: You can add as many themes as you want, allowing full customization of the application.
-
Efficiency in the testing team: Minimizes the need for extensive testing, facilitating a focus on cosmetic details that can be automated.
How can developers and customers benefit?
For developers, implementing themes means a significant reduction in time and effort when modifying the visual design of an application. It also provides flexibility to address specific customer requests without an overload of work.
In turn, customers benefit by getting an application aesthetically adjusted to their preferences or branding, which can improve user experience and brand perception.
Using themes and applying changes through variables in SAS or CSS is an effective and agile way to offer customized products. In addition, you can always invite your team to explore and experiment with the code to continue learning and optimizing your projects. So don't hesitate to fill yourself with enthusiasm and creativity while improving your web development skills.
Contributions 61
Questions 13
Sort by:
THEMES Y CUSTOMIZACIONES
Otra herramienta que podemos hacer uso en nuestra aplicación son los themes.
¿Qué es un themes? Es una capa de color y estilos que se añade por encima de nuestra aplicación y nos permite tener distintas variaciones sin hacer cambios drásticos en nuestro código. En otras palabras, theme es un archivo donde tenemos configurado la presentación visual de toda la aplicación. Teniendo dos o más theme podremos tener dos o más presentaciones visuales.
Para hacer los themes fácilmente podemos hacerlo por medio de variables de css o variables de Sass. Las variables de Sass son más sencillas.
Para tener varios themes, se crean un archivo de css por cada theme, pudiéndose intercambiar una por otra desde una archivo donde se configuran todos los archivos importados, sin tener que cambiar toda la programación de la aplicación. Simplemente con cambiar el nombre de un archivo por otro se realiza el cambio de theme.
Creo que este curso debería explicarse con html, css y js puro y no con otras tecnologías, lo digo por la posición donde está en la ruta de aprendizaje, esto hace que muchos alumnos se pierdan en las clases y no sepan que es sass, react y terminen más confundidos!
Hola, llevo varias clases del curso y no me queda claro cómo hacer la página. Sáquenme de una duda: ¿Es necesario llevar ciertos cursos antes de tomar este?
Se programar de manera básica (con HTML, CSS y JS), pero creo que tuve que tomar otros cursos primero porque no sé usar REACT, SCSS y me está costando entender todos los archivos que tiene en el GITHUB del curso de Diseño para programadores.
Muchas Gracias
Creo realmente que este curso es realmente una buena base para el diseño pero realmente creo que el curso no esta ubicado correctamente en la ruta de aprendizaje.
Chicos, el material de este curso es mas que todo una guía para diseñar. He notado que muchos no han visto algunos conceptos de CSS que aquí mencionan y eso los puede confundir, pero no se desanimen. Mi recomendación es que antes le echen un vistazo al curso de desarrollo web on line de Leonidas Esteban o el de frontend developer de la escuela de javascript.
Eso les dará una base sólida, en lo personal pienso que el segundo que les mencioné profundiza más.
¡Exito!
¿Hay que tomar cursos previos para este? Porque estoy siguiendo la ruta de fundamentos… Y aún no sé programas websites y solo conozco lo básico de javascript. La profe habla de React, frameworks y librerías… ando perdido.
Ufff, esto te ahorra un montón de trabajo empezaré a aplicar esto en mis proyectos.
Excelente pero qué programas estas usando? no me queda claro. Gracias!
A aprender sass!!!
PARA TODOS LOS QUE LLEVAMOS LA RUTA DE FUNDAMENTOS DE PROGRAMACIÓN: El curso es muy bueno pero está mal ubicado. No porque esté en la ruta equivocada (fundamentos de programación) sino porque antes necesitaríamos algunos cursos más para aprender a usar Github, React, CSS y SCSS. Porque en los cursos anteriores no explican casi nada de CSS (sólo lo teórico). Yo no pude ni abrir el proyecto en Github 😦 Lo que voy a hacer (y se los recomiendo) es ver todas las clases y entender la teoría lo más que podamos, pasar el examen y seguir avanzando, que lo más probable es que las dudas se nos despejen en los próximos cursos.
17. Themes y costumizaciones
Pues aquí sí que podemos jugar con el código de SASS y ver qué pasa, muy difícil si no sabes nada de SASS, en mi caso sé una pizca pero suficiente para cambiar los colores 😃, igual el concepto va quedando.
Les dejo mis apuntes, espero les sirva 😃
Theme
- Capa de color y estilos
- Nos permite tener variaciones sin hacer cambios drasticos
- Dark / Light theme
💚 El tema Platzi, tiene personalidad.
Si aún no entiendes muchos conceptos de éste curso, te recomiendo que vayas al curso de Desarrollo Web Online con el buen Leonidas Esteban.
THEME
,
Un Theme es una capa de color y de estilos que se añade encima de la aplicación. Lo que permite tener variaciones de colores sin hacer cambios distritos al código.
,
El uso de variables de CSS y Sass permite añadir un Theme de colores a la aplicación.
,
Se pueden crear templetes de paginas que manejan diferentes estilos, colores, tipografías, fondos, iconos en capas diferentes.
,
Se pueden usar los mismos componentes pero se definen diferentes variables de CSS y Sass,
,
Usar Themes es muy útil para el equipo de pruebas ya que no tiene que hacer una regresión sobre todo el sitio sino fijarse en cambios cosméticos que se pueden automatizar.
Uso basico de variables en CSS
Para declarar propiedades personalizadas (variables) usamos un nombre que comienze con dos guiones (–), y un valor que puede ser cualquier valor válido de CSS. Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo así:
elemento {
–main-bg-color: brown;
}
Copy to Clipboard
Ten en cuenta que el selector que usemos para las reglas de estilo define el ámbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena práctica común es declarar variables en la pseudo-clase :root, y así aplicarlas globalmente al documento HTML:
:root {
–main-bg-color: brown;
}
Copy to Clipboard
Sin embargo, esto no tiene por qué ser siempre así: podrían haber muy buenas razones para querer limitar el ámbito de tus propiedades personalizadas.
Nota: Los nombres de propiedades personalizadas son case sensitive (distinguen entre mayúsuculas y minúsculas) — --my-color será tratado como una propiedad personalizada distinta a --My-color.
Como mencionamos anteriormente, para acceder al valor de una propiedad personalizada usamos el nombre de la propiedad dentro de la función var(), en lugar de cualquier otro valor normal:
elemento {
background-color: var(–main-bg-color);
}
Creo que este curso no va en esta ruta, ya que tiene conceptos que realizando la ruta no aparcen, además usan tecnologías diferentes a lo visto anteriormente… no es que sea malo sino que muchos alumnos no ven clara la idea.
Una idea que he estado pensando aplicar en mis proyectos.
Me gusta la estructura que se usa en este proyecto, es muy practica y facil de hacer cambios
Genial!
¿Qué es un themes? Es una capa de color y estilos que se añade por encima de nuestra aplicación y nos permite tener distintas variaciones sin hacer cambios drásticos en nuestro código. En otras palabras, theme es un archivo donde tenemos configurado la presentación visual de toda la aplicación. Teniendo dos o más theme podremos tener dos o más presentaciones visuales.
Para hacer los themes fácilmente podemos hacerlo por medio de variables de css o variables de Sass. Las variables de Sass son más sencillas.
Para tener varios themes, se crean un archivo de css por cada theme, pudiéndose intercambiar una por otra desde una archivo donde se configuran todos los archivos importados, sin tener que cambiar toda la programación de la aplicación. Simplemente con cambiar el nombre de un archivo por otro se realiza el cambio de theme.
Aquí faltó un poco explicar cómo el proyecto en tiempo real cambiaría los estilos, y aquí está la respuesta.
En un componente o archivo de css main o principal, pasarle a un switch el tema seleccionado por el usuario o el default.
De esa manera, dependiendo el tema, retornará las clases de css a usar, dichas clases son las que definen los colores, y estas se les asignarán de manera dinámica a los elementos.
Es una idea, cada quien lo debe resolver a su manera.
Es interesante el comentario de la profesora, es más fácil aprender cuando tenemos los ejemplos sencillos en código.
Sencillo hubiera sido en html, css y javascript. Pero en react, pues no me parece sencillo.
Themes para cambios de estilos rápidos sin hacer cambios drásticos en la app ❤️
Hola amigos, aquí les dejo un proyecto que había hecho con el Dark mode y Light mode que explica la profesora en el principio. Es un proyecto sencillo pero ahí pueden ver de que se trata.
El theme es una herramienta de diseño para desarrolladores que consiste en generar con tan solo el cambio de una o dos lineas de codigo cambios significativos en el diseño del color de elementos en nuestra aplicacion o webpage, se logra adicionando un archivo indejpendiente con caracteristicas de color opcionales a nuestro proyecto.
Gracias!! Esta clase sin duda me va a ayudar un demasiado.
Me habría gustado que el curso fuese más práctico.
Me hubiera gustado que fuera la clase en html y css porqe la verdad no he podido usar los recursos porque no entiendo
Themes: son capas de color y estilos que se añade por enzima de nuestra aplicación y nos permite tener distintas variaciones sin hacer cambios drásticos en nuestro código. customizaciones:
Para tener varios themes, se crean un archivo de css por cada theme, pudiéndose intercambiar una por otra desde una archivo donde se configuran todos los archivos importados, sin tener que cambiar toda la programación de la aplicación. Simplemente con cambiar el nombre de un archivo por otro se realiza el cambio de theme.
¿Qué es un themes? Es una capa de color y estilos que se añade por encima de nuestra aplicación y nos permite tener distintas variaciones sin hacer cambios drásticos en nuestro código. En otras palabras, theme es un archivo donde tenemos configurado la presentación visual de toda la aplicación. Teniendo dos o más theme podremos tener dos o más presentaciones visuales.
Para hacer los themes fácilmente podemos hacerlo por medio de variables de css o variables de Sass. Las variables de Sass son más sencillas.
Es un curso interesante que nos aproxima en gran medida al diseño y no estar tan perdidos al momento de programar y no saber nada de diseño.
Hola me encanto el curso, la chica muy bien. Pero siento que le falto algo al curso; ejemplo ahorita no tengo ni idea de como echar andar el proyecto para moverle y ver como cambia.
Es decir previo a esto debemos ya de saber React y preprocesadores.
Excelente explicación para afirmar el aprendizaje.
https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties
Que genial !
esto es muy cool!!!
Themes y customizaciones
Los themes nos ayudan a cambiar la paleta de color de la app rápidamente. Especialmente útil para la negociación con el cliente al mostrarle la app con diferentes paletas de color
me ha ayudado bastante este curso
Me encanto esta clase aprendí mucho 😄
muy buena base para diseñar nuestra web app.
Gracias platzi!!!
Cúal sería la mejor estrategia para aplicar el cambio de colores en tiempo real (un menú de opciones con los colores para escoger)? En este ejemplo se hace manualmente el cambio de variables, pero como sería en la vida real? Una clase general desde el body que identifique?
No me queda claro sobre lo que deberiamos leer
Muy muy buenas estas clases, me encantaron, felicidades a la profesora
Que genial !
Qué es un theme
Este curso no esta ubicado nada bien en esta ruta de aprendizaje. Empieza muy bien, pero se extiende a conceptos de CSS que no manejamos.
WOW! estoy nos ahorra muchas idas y vueltas con el cliente
apesar de las dificultades, porque yo si es que no se nada de programcion, logre desenredarme y ya pude descargar todo el repositorio, abrir la terminal y poder ver todos los archivos que va explicando Samanta, que chevere poder jugar con todo eso
jajaja no puedo ni abrir el ejemplo 😔
A seguir practicando
muy bien !!!
Para ver mejor los colores en Visual Studio Code, les recomiendo que descarguen una extensión llamada Color Highlight. Lo que hace es colorear el código hexadecimal para que pueda verse mejor qué color es el que se está declarando.
Want to see more contributions, questions and answers from the community?