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
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aportes 133
Preguntas 5
DISEÑO RESPONSIVO.
Es una metodología que nos permite crear diferentes diseños que sean adaptables a diferentes dispositivos.
¿Cómo garantizamos que nuestro diseño sea responsivo?
1º Tenemos que empezar por dispositivos móviles. Esto nos garantiza que partimos desde el contenido básico hasta el contenido más complejo.
2º Separando las capas de contenido con la de funcionalidad. Así aseguramos que todo el contenido este accesible a todos los usuarios.
3º Utilizar sistemas de Grilla y columnas. Las columnas son referencia para dividir el ancho de la página. Así es más fácil el diseño.
DIFERENTES METODOLOGÍAS.
-. Mejora progresiva. (Progressive enhacement) Se parte de una base donde tenemos solo los elementos esenciales del diseño para un movil, e iremos ampliando la complejidad a medida que vamos subiendo hasta el PC.
-. Degradación Agraciada. (Graceful degradation) Empezamos desde una versión completa y vamos reduciendo la complejidad a medida que bajamos de dispositivo.
Este método se usa sobre todo cuando la web ya esta hecha y queremos adaptarla a móviles o tablets.
Estas metodologías afectan tanto al diseño como a la funcionalidad.
En diseño En Código
4º Animaciones 4º JS
3º Diseño Visual 3º CSS
2º Wireframes 2º HTML
1º Contenido 1º Data
Mis notas

Es una metodología de diseño que nos permite crear diferentes diseños que sean adaptables a diferentes tipos de pantalla
Conceptos:
Empezar por dispositivos móviles
garantiza que comencemos del contenido básico al complejo.
Separa las capas de contenido y funcionalidad
garantiza el acceso al contenido de la pagina, sin necesidad de correr scripts, ejecutar alguna acción o alguna animación compleja.
Usa sistemas de grillas y columnas
las columnas son una referencia del layout total de nuestra página y permiten ir mirando el ancho de nuestra página.
Metodologías
Mejora progresiva (Progressive enhancement)
Parte de una base sólida con elementos básicos y solidos de la aplicación a la que se le van agregando capas de complejidad, lo que permite que usuarios con baja memoria puedan seguir disfrutando del contenido y los usuarios con un mejor performance puedan disfrutar de una experiencia mas enriquecida.
Degradación agraciada (Graceful degradation)
Parte de una versión completa a la que se le van removiendo capas de complejidad para que se adapte a los diferentes dispositivos (tablets, móvil) garantizando su funcionamiento.
Mejora progresiva aplicada
Diseño:
Código:
Es una metodología de diseño que nos permite crear diferentes diseños que sean adaptables a diferentes tamaños de pantalla.
Hay distintas metodologías para poder trabajar con el Diseño responsivo. A continuación veremos algunas de ellas.
Consiste en partir de una base sólida a la que se le va añadiendo mejoras dependiendo de factores como tamaño de pantalla o sistema operativo.
<h5>Ejemplo de Mejora progresiva</h5>Vemos como tenemos en celular una fresa, en tablet dos frutas y en escritorio vemos varias frutas. Esto es como vamos agregando de una versión simple elementos para hacer más complejo el diseño.
<h5>Mejora progresiva aplicada</h5>Consiste en partir de una versión completa a la que se le van removiendo capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla y sistemas operativos. Esta metodología se recomienda en casos en los que se trabaja con una página que ya está hecha y de la cual tenemos que adaptar para otro tipo de pantallas como celular o tablet.
<h5>Ejemplo de Degradación ‘agraciada’</h5>Vemos como tenemos una versión de como Empieza una versión compleja, y como esta versión empieza a cambiar la distribución y el tamaño para ajustarse a pantallas de menor tamaño
🐱💻 El diseño responsivo permite adaptar el contenido según las dimensiones del dispositivo.
En esta web pueden ver diseños responsivos y como se realizan según su versión movil o de escritorio. MediaQueries
Que ganas de comenzar a hacer mi propia página web. 😍
Nuevamente nos llaman la atención, primero debemos empezar por lo básico y luego pasar a lo más complejo.
Metodologías del Responsive Design:
Mejora progresiva (progressive enhancement)
Degradación agraciada (Graceful degradation)
Buenos días, dejo mi aporte, espero les sirva 😃
DISEÑO RESPONSIVO
Es una metodología de diseño que nos permite crear diseños que se adpten a los diferentes tipos de pantalla.
Se debe empezar con los dispositivos móviles.
Debemos separar las capas de contenido y funcionalidad.
Utiliza sistemas de grillas y columnas.
Metodologías de Diseño Responsivo
Mejora Progresiva (Progressive Enhancement)
Consiste comenzar de una parte solida donde se tiene los elementos básicos de la aplicación y en esta se le va añadiendo las mejoras y las capas de complejidad. Esto permite a los usuarios que tienen hadware de menor capacidad puedan ingresar a nuestro contenido básico y los que tienen hadware mas potente gocen de una mejor experiencia. Sobre todo cuando hablamos de tamaño de la pantalla y memoria RAM.
Degradación Agraciada (Graceful Degradation)
En esta partimos de una versión compleja y se va quitando capas de complejidad para que se adapte a dispositivos móviles.
*Estas metodologías también aplican al código
Mejora progresiva aplicada.
Estas metodologías no solamente aplican al diseño sino también al código.
En diseño primero partimos de un contenido de nuestros datos. Luego hacemos los wireframes que son bocetos. Luego hacemos nuestro diseño final y finalmente añadimos las animaciones.
Lo mismo sucede cuando vamos a programar. Siempre vamos a empezar desde los datos, luego hacemos la maquetacion basica con HTML, luego se añaden los estilos con CSS y por ultimo el JavaScript. Si empezamos por JS primero, nuestra aplicación va a estar basada en scripts y no en web semántica que es lo ideal.
Las maquetas, un tipo de diagrama de diseño de alta fidelidad, debe mostrar de manera estética marcos de información, contenido y funciones. A diferencia que un wireframe, una maqueta se ve más como el producto terminado, pero no es interactiva o clickeable. Es más buen una representación gráfica. Esto puede ser útil, por ejemplo, para proveer una imagen a los invesionistas de cómo puede verse un producto terminado, y ayuda a los miembros de un equipo a revisar el producto visualmente.
Un prototipo está muy cerca de ser un producto terminado. Es aquí donde los procesos pueden ser simulados y se puede testear la interacción con usuarios. El prototipado temprano puede ahorrar gran cantidad de costos de desarrollo y tiempo para que el trabajo de arquitectura back-end del producto no sea en vano debido a una interfaz de usuario poco razonable. Un prototipo es una excelente herramienta para obtener feedback (retroalimentación) de los usuarios y probar el producto.
.
Ejemplos de herramientas online para hacer prototipos:
.
Figma
.
Marvel
Un wireframe es una manera de representar un producto a baja resolución, puede eficientemente definir estructuras y esquemas de un diseño. Un wireframe es una representación básica. El diseño de un wireframe no necesita ser minucioso, pero debe expresar las ideas de diseño y no debe olvidar las partes importantes que lo componen. Un wireframe es el canal que ayuda a los miembros del equipo a entender sus proyectos de mejor manera.
Hasta el momento no había pensado en eso, pero me gusta la idea de la metodología mobile first.
Diseño responsivo:
Metodología de diseño que nos permite crear diseños adaptables a diferentes pantallas y dispositivos
¿Cómo se garantiza que el diseño de una aplicación es responsivo?
Empieza por separar dispositivos móviles, esto para partir del contenido básico como base al contenido mas complejo
Separar las capas de contenido y funcionalidad, garantiza el acceso al usuario a todo el contenido en la pagina.
Usar un sistemas de grillas y columnas, para tener una referencia del layout total en la pagina y de esta manera adaptar los contenidos presentados.
Metodología para realizar diseño responsivo
Mejora progresiva (Progressive enhancement): Consiste en partir de una base solida a la que se le añade mejoras dependiendo de factores como tamaño de pantalla o sistema operativo (S.O.)
Degradación agraciada (Graceful degradation): Consiste de partir de una versión completa a la cual se la van removiendo capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla. ej. una aplicación de escritorio que es adaptada a un app movil
Mejora progresiva aplicada
Parte del contenido - Datos
Maquetado básico de la aplicación- HTML
Estilos y fuentes- CSS
Interactividad y animaciones - Javascript
Mobile first, es lo que he aprendido
Considero muy acertado el consejo de la Instructora, debemos empezar por diseño para dispositivos móviles.
Accesibilidad y diseño
Mejora progresiva Aplicada
Aprendí CSS a los golpes hace años, y en esta clase aprendí que lo que siempre hacia para hacer responsive design era degradación agraciada, probaré ahora usar mobile first
¿que es web semantinca?
En otras palabras:
El diseño responsivo es un diseño que responde al tamaño del dispositivo desde el que se está visualizando la web, adaptando las dimensiones del contenido y mostrando los elementos de una forma ordenada y optimizada sea cual sea el soporte.
Metodologías de Diseño Responsivo
Mejora Progresiva: A partir de una base sólida a la que se le van añadiendo mejores dependiendo de factores de tamaño de pantalla o sistema operativo.
Degradación agraciada: pare de una versión completa a la que s el van removiendo a capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla y sistemas operativos.
Super, le estoy entendiendo mucho comparándolo con experiencias.
Muy buena clase, yo aplico mobile first y es muy recomendable, dado que el lugar desde el cual el usuario consulta la mayoria de las paginas es el celular y tener nuestra pagina visualmente agradable y con una buena UX nos da puntos extra.
En desarrollos completamente nuevos es ideal comenzar usando la metodología de mejora progresiva.
Si se está actualizando un sitio web ya existente se utiliza la metodología de degradación agraciada.
Ahora entiendo porque escucho tan seguido la frase “Mobile first”. Pensé que se refería a que se accede más a través de móviles
Siempre será mejor opción comenzar desde móviles, ya que así solo se van modificando los elementos necesarios para distribuir correctamente el espacio.
Justamente vengo de tomar estos dos cursos :
Responsive Design
y el de CSS Grid layout con el profesor Leonidas Esteban. Super recomendados para ampliar la forma como vemos el diseño de una pagina
Es una metodología que nos permite crear diferentes diseños que sean adaptables a diferentes dispositivos (tamaños de pantalla).
¿Cómo garantizamos que nuestro diseño sea responsivo?
Diferentes metodologías
Mejora progresiva. (Progressive enhacement) Se parte de una base donde tenemos solo los elementos esenciales del diseño para un movil, e iremos ampliando la complejidad a medida que vamos subiendo hasta el PC.
Degradación Agraciada. (Graceful degradation) Empezamos desde una versión completa y vamos reduciendo la complejidad a medida que bajamos de dispositivo.
Este método se usa sobre todo cuando la web ya esta hecha y queremos adaptarla a móviles o tablets.
Mejora progesiva aplicada
En programación | En diseño |
---|---|
4. JS | 4. Animaciones |
3. CSS | 3. Diseño visual |
2. HTML | 2. Wireframes |
1. Data | 1. Contenido |
Siempre comienza desde lo mas basico y pequeño (Imagina que debes optimizar tu diseño al Alcatel de tu primito pequeño), luego, poco a poco vas aumentando la experiencia, con animaciónes y cosas por el estilo. Esto es Mejora progresiva
Aveces hiciste primero la version mas tocha, con mas animaciones y mejor diseño, pero el jefe quiere que optimices el diseño al Alcatel de tu primo, asi que ahora debes ir restando funcionalidades y adaptandolo a otro tipo de dispositivos. Esto es Degradacion agraciada
Si no tienes un primito pequeño con Alcatel, seguro el morro castroso de tu salon tiene es celular jajajaj
El diseño responsivo es clave en la creación de sitios web modernos, garantizando una experiencia fluida y consistente en todos los dispositivos, desde smartphones hasta computadoras de escritorio. Es como tener un traje a medida para cada pantalla.
Diseño Responsivo
<aside>
💡 Utilizas las mejoras progresivas
</aside>
Deiseño mobile first ó metodologia progresiva para los nuevos desarrollos y metodologia degradacion agraciada para cuando tenemos ya un producto y se requiere adaptar a los dispositivos mas pequeños
Tipos de responsive
Mobile first y mejora progresiva ❤️
Hay distintas metodologias para realizar responsive design teniendo en cuenta la accesibilidad, the proressive enhancement se recomienda porque se parte de una base solida a la que se le van añadiendo mejoras dependiendo de factores como tamaño de pantalla o sistema operativo del equipo.
Se enriquece la experiencia del usuario dependiendo del equipo receptor, siempre se garantiza un conendio basico.
Es muy importante pensar en Mobile First, eso nos alegará de meternos más en problemas, pero uno también debe de adaptarse a esos problemas que son los que normalmente pueden pasar.
El diseño responsive te permite llegar a un público más amplio con el que podrás satisfacer a los clientes que buscan una experiencia móvil atractiva.
Metodología para crear diseños que se adapten a los diferentes tamaños de pantalla.
Consiste en partir de una base solida a la que se le añaden mejoras dependiendo de factores como tamaño de pantalla o el sistema operativo
Partimos de una versión mas completa a la que se le van removiendo capas para hacerla mas sencilla garantizando su funcionamiento en todas pantallas y sistemas operativos.
Comenzar desde desktop a mobile es mucho mas complicado y requiere mas código en muchos casos. Lo mejor es comenzar mobile first.
El diseño responsivo es simplemente adaptar el diseño de tu web a todos los tamaños de pantalla del mercado, conservando la estructura principal, sin que se pierda la esencia de tu marca.
Nos permite generar diferentes tipos de diseños que sean adaptados a todas las pantallas.
Para realizar un buen RWD, sigue las siguientes recomendaciones:
✨ Empieza por dispositivos moviles.
✨ Separa las capas de contenido y funcionalidad.
✨ Usa sistemas de grillas y columnas.
Es una metodología que consiste en partir de una base solida a la que se levan añadiendo mejoras dependiendo de factores como tamaño de pantalla o sistema operativo.
Tenemos los elementos base y poco a poco le vamos añadiendo mayores funcionalidades.
Es una metodología que consiste en partir de una versión completa a la que se le van removiendo capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla y sistemas operativos.
Tenemos todos los elementos y poco a poco vamos retirando funcionalidades para adaptarla a otros dispositivos,
Definitivamente comenzar por el patron de diseño movil first y la metodologia Progressive enhancement es una buena practica. Que garantiza la escalabilidad del proyecto.
RESPONSIVE DESIGN
.
RESPONSIVE DESIGN “”diseño responsivo” es una metodología de diseño que permite crear diferentes diseños que sean adaptables a diferentes tamaños de pantalla.
.
para garantizar que la aplicación WEB sea responsive design el desarrollo debe comenzar por dispositivos móviles de esta manera se garantiza que desde el contenido básico hasta el mas complejo sea responsive.
.
Separar las capas de continuidad garantiza al usuario el acceso a todo el contenido de la pagina sin tener que ejecutar scripts, realizar alguna acción ni animaciones complejas.
.
Utilizar sistema de grillas y columnas. Donde las columnas son una referencia del Layout total de la pagina y sirve para medir el width de la pagina. De esta manera es mas fácil adaptar contenido como textos, imágenes, videos, etc.
soy un niño
Me encanta como va este curso hasta ahora, rápido, fácil de entender y conciso.
El responsive design se trata de crear diferentes diseños para diferentes tamaños de pantalla. Es importante empezar por dispositivos móviles. Ésto garantiza que empecemos por los requerimientos mínimos, que separa las capas de contenido a esta metodologia se le conoce como
<h5>Metodología:</h5>
- Trata de que nuestro diseño sea visible para diferentes resoluciones de pantalla.
- Se empieza a desarrollar por dispositivos móviles.
- Separa las capas de contenido y funcionalidad.
- Usa sistema de grillas y columnas.
<h6>Mejora Progresiva:</h6>
- Trata de que mientras va aumentando la resolución le vamos aumentando mejoras.
<h6>Degradacion ‘agraciada’:</h6>Partimos de una versión completa y vamos reduciendo funcionalidades mientras menos resolución.
- Contenido.
- Wireframes.
- Diseño visual.
- Animaciones.
Graceful degradation: Proyectos que por alguna razón solo tienen vista de escritorio. Iremos de pantallas grandes a pantallas pequeñas.
Progressive enhancement: El must-go para cuando empezamos un nuevo proyecto. Siempre hay que pensar primero en el usuario de smartphone porque es la gran mayoría de usuarios. Iremos de pantallas pequeñas a pantallas grandes.
Muchos devs de apps tienen que ver esta clase xD
El diseño responsivo pretende que con un único diseño web, todo se vea correctamente en cualquier dispositivo.
Degradación agraciada
Mejora progresiva
¿Cómo garantizamos que nuestro diseño sea responsivo?
1º Tenemos que empezar por dispositivos móviles. Esto nos garantiza que partimos desde el contenido básico hasta el contenido más complejo.
2º Separando las capas de contenido con la de funcionalidad. Así aseguramos que todo el contenido este accesible a todos los usuarios.
3º Utilizar sistemas de Grilla y columnas. Las columnas son referencia para dividir el ancho de la página. Así es más fácil el diseño.
DIFERENTES METODOLOGÍAS.
-. Mejora progresiva. (Progressive enhacement) Se parte de una base donde tenemos solo los elementos esenciales del diseño para un movil, e iremos ampliando la complejidad a medida que vamos subiendo hasta el PC.
-. Degradación Agraciada. (Graceful degradation) Empezamos desde una versión completa y vamos reduciendo la complejidad a medida que bajamos de dispositivo.
Este método se usa sobre todo cuando la web ya esta hecha y queremos adaptarla a móviles o tablets.
Estas metodologías afectan tanto al diseño como a la funcionalidad.
En diseño En Código
4º Animaciones 4º JS
3º Diseño Visual 3º CSS
2º Wireframes 2º HTML
1º Contenido 1º Data
DISEÑO RESPONSIVO.
Es una metodología que nos permite crear diferentes diseños que sean adaptables a diferentes dispositivos.
Sin duda alguna la mejor metodologia es la mejora progresiva, empezar el desarrollo desde Mobile first siempre va ser el trabajo un poco mas sencillo
El diseño responsivo es importante porque nos permite garantizar o asegurar que el contenido de nuestra paginas pueda llegar al usuarios en las diferentes pantallas, desde los móviles mas básicos, a los mas complejos.
Existen dos metodologías de diseño responsible:
DISEÑO RESPONSIVO
Les recomiendo el curso de DIego de granda sobre la practica de Mobile First, les dejo esta pagina que yo me arme en la cual lo disfrute muchísimo.
Me ha interesado, la seccion de separar las capas de contenido y funcionalidad, con el fin de garantizar el acceso a todo el contenido, por que muchas paginas de veras utilizan distintos scripts o animaciones y el resultado es que la pagina se ve afectada en rendimiento, me parece importante tener este puento en cuenta desde el diseño.
Conocido también como responsive design, es la metodología de diseño que se adapte a diferentes tamaños de pantalla.
Para ello, primero debemos empezar por dispositivos móviles (mobile first).
Separa las capas de contenido y funcionalidad.
Usa sistemas de grillas (grid) y columnas (flex).
Existen varias metodologías para aplicar responsive design, tenemos:
Metodología progresiva (Progressive enhancement): Consiste en partir de una base sólida, donde tenemos los elementos esenciales de nuestra aplicación, y luego se va aplicando capas de complejidad.
Degradación “agraciada” (Graceful degradation): Consiste en partir de una versión completa a la que se le van removiendo capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla y sistemas operativos.
Si aplicamos la Mejora progresiva aplicada, sería así:
Primero Contenido, luego wireframes, luego diseño visual, y finalmente animaciones. Es decir primero Data, luego HTML, luego CSS y finalmente JS.
Hay distintas metodologías para hacer responsive design, como:
Estas metodologías no solo aplican al diseño, también aplican al código
Es una buena idea empezar desde lo que creemos que es fundamental para que desde ahí se cree el diseño para dispositivos y desde ahí irlo completando para las versiones con mas juguetes de escritorio
Les recomiendo la extensión de Windows Resizerr para poder der desde el navegador como se vería desde distintos dispositivos de una manera más rápida.
Siempre debe iniciar por dispositivos móviles, separar por contenido y funcionalidad.
Responsive Design?
Son esas técnicas que usamos para adaptar nuestras aplicaciones web {pagina) a la mayor cantidad de pantallas, de pequeñas a grandes o de grandes a pequeñas… 😄
Responsive Design, Diseño responsivo
Metodología que nos permite garantizar que nuestro diseño sea adaptable a diferentes tamaños de pantalla.
• Empezar por dispositivos móviles
• Separar las capas de contenido y funcionalidad.
• Usa sistemas de grillas y columnas
Metodologías de Responsive Design
• Mejora progresiva: Consiste en partir de una base sólida a la que se le van añadiendo mejoras dependiendo de factores como tamaños de pantalla o sistemas operativos.
Degradación agraciada, Partir de una versión completa a la que se le van removiendo capas de complejidad, esto se puede aplicar para adaptar páginas ya hechas.
aprendiendo cosas nuevas con cada clase.
W I R E F R A M E
Es el plano, o esquema, de la pagina.
Es una guía para establecer cual va a ser el orden del contenido, como se va a mostrar y en que forma va a hacerlo.
El wireframe no se enfoca en los aspectos visuales como tipografía, ni colores.
Se enfoca en establecer:
.
Cuando publicas el comentario incompleto jaja*
Recomendar el curso específicamente de Accesibilidad: https://platzi.com/clases/accesibilidad-web/
considerar mobile first para iniciar el diseño.
Porque habla tan rápido, será la hermana de Fazt…?
Qué es el responsive design
1.- Mejora progresiva
Entiendo que tanto PE y GD garantizan el funcionamiento del producto en todos los dispositivos, cierto?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?