¡Hola!
Aquí te dejo el enlace del proyecto en Figma.
Bienvenida al curso
Por qué aprender Responsive Design con Mobile First
Setup inicial
Analizando el diseño: proyecto del curso
El valor de Mobile First
Arquitectura inicial
Assets de nuestro proyecto
Fuentes de nuestro proyecto
Estilos base
Sección de Header
Maquetación del header
Implementando BEM
Uso de linear-gradient
Uso de position para botón flotante
Sección de Intercambios
Estructura base de la sección de intercambio
Imagen de background
Estructura de tabla de monedas
Estilos base de tabla de monedas
Detallando estilos de tabla de monedas
Finalizando estilos de tabla de monedas
Sección de Beneficios
Estructura base de la sección de beneficios
Estilos de la sección de beneficios
Maquetando tarjetas de beneficios
Sección de Planes
Maquetando sección comodín
Estructura de sección de planes
Aplicando estilos a sección de planes
Aplicando estilos a las tarjetas de la sección de planes
Detallando estilos en tarjetas de planes
Aplicando estilos al botón de call to action
Scroll horizontal con CSS
Sección de Footer
Footer
Media Queries
Aplicando media queries
Lighthouse
Análisis con Lighthouse
Próximos pasos
Cierre y próximos pasos
Comparte tu proyecto y certifícate
Última oportunidad para asegurar tu aprendizaje por 1 año a precio especial
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Es importante que sepas que este curso es la continuación práctica del Curso Definitivo de HTML y CSS, por lo que si aún no lo has tomado, este es el momento.
Vas a crear un proyecto real completo que se adapte a distintos tamaños de pantallas. Este será un proyecto que podrás agregar a tu portafolio para mostrar tus habilidades en el Desarrollo Web.
Estos son algunas de las herramientas que necesitas usar.
Uno de los softwares más utilizados para construir wireframes o prototipos de alta calidad es Figma.
Los proyectos web se analizan desde los wireframes que comparte el equipo de diseño. Los wireframes son prototipos que nos permiten tener una estructura clara de lo que será el proyecto real que como desarrolladores tendremos que crecer a código.
Si quieres profundizar tu conocimiento puedes tomar el Curso de Figma de Platzi.
El proyecto que vas a construir lo puedes encontrar aquí.
Se trata de una landing page estática con un header, un footer y cuatro secciones de contenido. Para poder revisar cómo está diseñado, vamos a la pestaña de arriba y seleccionamos “Abrir en editor”.
Podrás observar todas las pantallas que el equipo de diseño ha creado, junto con la paleta de colores, botones, fuentes, imágenes, etc. También podrás ver al dar clic sobre una sección, el código CSS que te recomienda Figma. No se trata de copiar ni pegar, sino de revisar los elementos que lo componen para usarlos en nuestro código, como la fuente, color o tamaños.
Contribución creada por: José Miguel Veintimilla (Platzi Contributor).
Aportes 110
Preguntas 21
¡Hola!
Aquí te dejo el enlace del proyecto en Figma.
Hola, les comparto una herramienta muy útil que descubrí hace unos meses. Se trata de una extensión para el navegador llamada: Responsive Viewer , la utilizo todos los días en algún experimento o cuando maqueto una web.
Me permite ver y crear simuladores de distintos dispositivos (móvil, tablet, desktop), super útil al trabajar con Responsive Web Development. Tiene click & scroll sync (lo que hagas en una pantalla, se hará automáticamente en el resto de manera automática).
Link: https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb
Hola gente!
El profesor en este video habla de los prototipos que podemos ver en la clase como Wireframes, pero en realidad estos son Mockups!
Los Wireframes (su traducción en inglés es “Estructura de alambre”) representan la estructura más básica, en este caso, de una página web) es decir, estructura del contenido como textos, imágenes, componentes, etc. Sólo eso. Esto se da así, ya que en esta etapa lo más importante es la arquitectura de la información.
Una vez que este wireframe ya esté terminado, se pasa a la siguiente etapa que son los MOCKUPS, que es lo que vemos que nos muestra el profe en Figma, este es una representación de alta fidelidad del producto final que diseñamos. En el se ven colores, contenido real, imágenes, etc.
Acá puedes tener inspiración para tu proyecto personal.
https://mediaqueri.es/
jajaja que bonito ver a los demas compañeros por ahi y saber que no estoy aprendiendo yo solito 😄
La primera parte de mi proyecto creado en Figma!!! ahora a escribir código!!!
Jaajjajaj está genial ver los cursores de los demás
Hey chicos, un amigo y yo hemos creado un grupo de Telegram para poder compartir Hacks de programación, ayudarnos con cualquier pregunta sobre Dev y además crear proyectos de código juntos. Te estamos esperando!
También tenemos una organización de GitHub donde pondremos nuestros proyectos, únete por aquí:
Nos encanta la filosofía de crear todo para Mobile First. Si estás interesado en crear proyectos con una comunidad de Devs cools entra en nuestro Telegram y escríbenos.
Recuerden revisar en cada clase la sección de Archivos y Enlaces donde podrán obtener todos esos recursos que comenta el profesor y cualquier material de ayuda que se comparta 😄
¡He esperado este momento por semanas!
** Figma** es una herramienta de diseño que ocupan los diseñadores, para poder conseguir su wireframe.
✔ El diseñador pasa la url, para ver el wireframe con ciertas espicificaciones que nos ayudarán con la arquitectura de nuestro proyecto.
✔ Luego hacerla crecer con codigo
wireframe o prototipo
Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web.
El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web. Esto incluye menús de navegación, bloques de contenido, etc… Además, te permite como interactuarán estos elementos entre sí.
En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo importante es centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad son los contenidos de la web.
No sabia que era un Wireframe, tampoco conocia Figma. Comparto estos enlaces por si tampoco los conoces:
Como especifica el profesor Diego es muy importante ya tener conocimientos en HTML y CSS. La herramienta del proyecto es Figma la cual dejaron el curso en Enlaces.
El proyecto también fue hecho durante un curso o como proyecto de un curso y fue este (Por si quieren ver el proceso que se hizo para llegar a ese diseño): https://platzi.com/clases/brief/
Figma le esta quitando mercado a Adobe XD, y personalmente creo es mucho mejor!
Se ve muy bueno el proyecto 🤳
Me distraje un poco viendo los curseros de los demas compañeros en el proyecto, queria ver que hacian :v
Por aqui pueden crear una cuenta de estudiante que nos permite tener funcionalidades pro
Tengo este problema al abrir figma (La pantalla aparece pequeña),
alguien sabe como solucionarlo?
Intente colocarlo en preguntas, pero por alguna razón no me dejo subir la captura.
Resumen:
.
Primeramente y lo más importante es analizar el diseño que se nos es brindado para comenzar a maquetar, por lo regular los estilos que serán utilizados justamente como los colores, las fuentes, tamaños de letra entre otras cosas, que por lo regular son almacenados en variables de CSS con la pseudo clase:
:root {
......
}
¿Esta página nos sirve para el portafolio que estamos construyendo?
Figma sugiere estilos, que se pueden tomar como base para crear propios.
Este es el link de LA PAGINA REAL o el producto en produccion del proyecto. Es raro porque esta en github pages. Eso no luce muy profesional, pero ahí esta: https://josearc23.github.io/04batatabit/#plans
Resumen pequeño
Tener en consideracion que solo el css que muestra el wireframe figma solo son sugerencias. Por lo tanto, solo se debe tener en consideracion el tipo de fuente y el tamaño. No se recomienda copiar y pegas las reglas CSS.
Sin embargo, los diseñadores entregan un wireframe a los desarrolladores de lo cual es importante hacer analisis de las secciones respectivas.
Quiero poner otro incapié en el concepto de wireframe. Este es utilizado como el ultima etapa de diseño para la elaboración de un software. Se asemeja a lo mas real a su diseño como etapa final. Algunos lo mencionan como prototipo en la fase de toma de requerimientos con el cliente.
Platzi la rompe
Wireframe según la Wikipedia.
De https://www.flickr.com/people/doos/ - https://www.flickr.com/photos/doos/3931846833/, CC BY 2.0, https://commons.wikimedia.org/w/index.php?curid=12888965
Mis conceptos nuevos a manejar en este curso
Wireframe:
mockup
Figma:
Ahora si viene lo chido.
Una pregunta, el profe Diego ya tiene el diseño echo porque trabaja con un equipo de diseño y el solo se tiene que encargar de desarrollar el proyecto pero nosotros que no trabajamos con un equipo de diseño cómo hacemos para conseguir wirefreams para practicar en figma? Alguien sabe dónde se pueden encontrar diseños ya echos de otras personas para practicar?
Gracias!!
Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test
Les recomiendo descargar la extensión en los navegadores que ustedes usan.
https://chrome.google.com/webstore/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg/related?hl=en
Así les saldrá la opción Open in Editor
Emocionado por empezar este curso.
super listo!!!
Este es el verdadero enlace:
https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=83%3A132
Esto se va a poner bueno
Bueno, creo que va siendo hora de empezar a maquetar la landing de mi sitio web
Antes de tomar este curso, te recomienda primero ver el curso Definitivo de HTML y CSS https://platzi.com/clases/2030-mobile-first/32493-analizando-el-diseno/?time=6
Si con el link de la descripción les aparece cualquier cosa (como a mi), aca esta la transcripción del mismo que lleva al lugar correcto: https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-bit?node-id=44%3A593
Responsively es una excelente herramienta que nos permite visualizar varias pantallas de distintos tamaños al mismo tiempo
https://responsively.app/
Figma se está utilizando mucho últimamente en diseño web. Muy recomendado.
Voy a crear un nuevo proyecto desde 0. Porque estoy usando este curso para un trabajo real y no voy a necesitar figma. ya el design system esta creado.
Esto no es mobile first, es “mobile only”.
💪 Figma nos ayuda a tener un prototipo de la página a construir, sus estilos son una guía para maquetar.
Aquí dejo el link para los que quieran descargarlo
Link per il Proyecto Batatabit in Figma:
https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=44%3A593
Yo creo que una de las fuentes mas grandes de inspiracion es Pinterest, es genial a la hora de pensar en diseno.
Si algo no van comprendiendo pueden encontrar el codigo por etapas en mi repositorio de GitHub
https://github.com/brash22/batatabit.git
Esta va a ser la página de una empresa real que puede ser el primer proyecto de mi portafolio.
Tenemos que generar un análisis, este lo haremos con una herramienta llamada Figma, que es una herramienta de diseño para construir wide frames, una vez listos nos pasan la URL para poder ver como podemos comenzar con la arquitectura de nuestro proyecto.
Al meternos a detalle saldrán en la parte derecha sugerencias de CSS que hay que tomar como base, más no los estilos finales. Los que si nos interesan son los de fuentes o colores.
Ya iré mejorando con el tiempo la entrada
A
https://www.pinterest.com.mx/pin/4644405855525692/ encuentra buenos diseños
Lo que mas me gusta de este profesor es que aunque ya explico todo de manera detallada, lo vuelve a explicar.
Grande degranda!!!
Comparto el enlace https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=68%3A168
Como dato curioso: al buscar Figma en Google, el resultado SEM es Platzi jaja
Estamos ready!
Hola chicos! Por aquí les dejo un acceso a figma 100% gratuito y con todas las funciones disponibles ❤️
https://platzi.com/tutoriales/1961-figma/9683-crea-tu-cuenta-educacional-con-figma/
Emocionante😊
Muy importante saber todo como vamos creciendo poco a poco.
Los proyectos web se analizan desde los wireframes que comparte el equipo de diseño. Los wireframes son prototipos que nos permiten tener una estructura clara de lo que será el proyecto real que como desarrolladores tendremos que crecer a código.
Un proyecto real, muy bueno en los cursos para realmente aprender como se hacen las cosas de manera profesional.
Figma
Herramienta de diseño para poder construir Wireframes que son especificaciones que ayudan a comenzar con la arquitectura de un proyecto para luego hacerlo crecer usando código.
Aprendí AdobeXD, pero supongo que no hay mucha diferencia con Figma.
En el curso de diseño para desarrolladores vemos lo que es un wireframe y esto que vemos en figma es un mockup una representacion visual de alta fidelidad.
Los diseñadores nos pasan el diseño,en esta caso hecho en figma.
A seguir aprendiendo, ahora toca profundizar en RWD, vamos con todo y nunca pares de aprender.!!!
Aquí les dejo el curso de figma https://platzi.com/cursos/figma/
A seguir creciendo!!
Buen día, aquí te comparto mis notas sobre el curso, espero te sea de utilidad:
Claro que estoy emocionado por este curso. Vamos a por todas.
De verdad, siempre se puede aprender algo nuevo, algo mas♥
Estoy ansioso de aplicar lo ya aprendido en los cursos anteriores.
¡ Excelente inicio para todos !
Analizando el diseño
Al momento de iniciar a desarrollar un proyecto web es importante tomar el tiempo para analizar el diseño que recibimos por parte del equipo encargado de diseño. En esta parte lo más importante es identificar las distintas secciones en las que se divide el proyecto (header, secciones, footer); teniendo estos detalles podemos comenzar a maquetar en HTML estas secciones con sus respectivos espacios y tamaños.
Como herramienta de diseño, Figma es una excelente opción para tener una primera vista del diseño que se implementará en el proyecto.
Lo que dice el profe sobre no conpiar y pegar es muy importante solo nos sirve como referencia es util para:
Se ve increíble este curso! 😃
Figma es una herramienta muy poderosa.
Excelente, tengo una expectativa enrome por este curso.
Estuve esperando mucho tiempo este curso, que emoción… Grande Diego!!!
Excelente la conexión con el curso de Figma ✨
Interesante propuesta, cuando inicie el desarrollo web mi talón de Aquiles siempre fue la parte de como poder organizar el contenido y que las cosas tanto en web y móvil se vean bien y sobre todo que genere un buen impacto al usuario final, como dicen “Todo entra por los ojos”
Se ve excelente!!!
increibleeeee seria realizarlo
Después de este sigue el curso de Figma
vamos!
Emocion es poco
Sólo deben darle el botón de play seleccionando el diseño y listo!
Super emocionado
I’m excited with this project. Here we go! 🚀
Figma es una herramienta de diseño para construir wireframes. Una vez que tengan listo, mediante una url podremos ver los wireframes con especificaciones que nos ayudarán a comenzar la arquitectura del proyecto para poderla hacer crecer con código.
Les recomiendo que se registren y usen Figma para aprender mejor esta clase.
Emoción por el curso !!!
👌
Gracias este curso me va a ser de muchísima ayuda con mi proyecto de verdad lo deje para después de varios cursos por que quería que fuera full responsive.
Si tome el curso de Frontend Developer ya puedo tomar este curso o me recomiendan tomar el Curso Definitivo de Html y Css?
estoy muy emocionado por este curso
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.