Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Identifica las pantallas de tu proyecto

3/22
Recursos

La maquetación o diagramación web consiste en transformar un diseño gráfico —boceto— (hecho por UX/UI en Figma o Scketch) en una interfaz funcional en términos de programación que entienda un navegador o dispositivo específico.

shopping-cart.jpg

El área de diseño nos proporcionó el bosquejo del proyecto en Figma.

Podemos identificar las vistas de:

  • Inicio
  • Creación de cuenta
  • Acceso
  • Carrito de compras
  • Orden de compra
  • Detalle de producto
  • Menú
proyecto.png

Desde aquí puedes ver cómo es la interacción entre las diferentes pantallas.

Contribución creada por Porfirio González y Guadalupe Monge Barale.

Aportes 118

Preguntas 14

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Desde el curso practico de Html y Css amo usar figma para apoyarme al hacer el front, que genial que hayan manenido esa metodologia ❤️

Ahorita mismo este soy yo, mirando con asombro el proyecto que estaremos creando

Wowowowowowoowow, no me puedo creer que este diseno tan espectacular lo desarrollare yo con ayuda de estefany, no veo la hora de terminar este curso 😃
Pero lo mas importante eso si, de aprender

Lo que más me gusta son los cursos prácticos. ¡Vamos!

Comparto que intenté imitar la pagina browse de Netflix y ahí más o menos quedó

Voy a hacer el proyecto con React 😄, a ver que pasa xD

Heyyy este curso se ve que esta geniall y nos adelantaron que Oscar estara complementado me imagino que en el Curso de React Practico
Que notaaaa 💚

Este proyecto va para mi github ❤️

¿Quieres saber más del diseño movil First?

Este curso de Diego de Granda de Mobile first te ayudara ¡Quiero ir al Curso Ya!
Te tomara solo una tarde en completar el curso, en promedio, pero te ayudara en fundamentos gigantes para la Práctica. Además tiene un proyecto de una empresa real para que añadas a tu Github, sin duda va como anillo al dedo a este curso Práctico, sin más, Vamos a ello!!

Muy emocionado por este curso 💚💚

Este proyecto se ve espectacular 💚

0:22 ya se había tardado en decir básicamente…

me encanta esta profesora !! team Estefany !!

Muy emocinado, el material de ayuda es similar con el de curso practico de HTML y CSS, gracias al equipo de diseño de platzi.

Si alguien quiere observar de mejor manera los estilos. Si entra al enlace que compartió la profesora.
Pueden darle click a la flechita que aparece a lado del nombre del proyecto en la parte superior y seleccionar abrir en editor

Una vez se les habra, pueden ver de mejor manera los estilos.
Pueden cambiar de vista entre móvil o desktop en la barra lateral de la izquierda, entre más opciones que ofrece Figma.

¡Me acabo de caer de la silla al ver el diseño tan espectacular!

Ver el total del shopping cart me dio ansiedad jajajajajajaja

Tienen que cuidar el lenguaje de los profesores, vengo del curso de frontend developer, y cada vez que dice básicamente se me quitan las ganas de seguir viendo las clases.

Que bueno cuando se deja claro el proyecto y el objetivo del curso, Vamo a darle

la primera vez que vi Figma fue en el curso de Mobile first responsive desing de Diego DeGranda, esta genial que lo usen nuevamente en este curso, gracias equipo Platzi, estoy super emocionada por empezar!

Wow este proyecto está súper estructurado y tiene paleta de colores me encanta ❤️

Oh me encanta el proyecto pero siento que necesito más conocimiento, se me hace que está mal ordenada la ruta de web developer…voy a hacer primero el curso definitivo de html y css y volveré! les juro que volveré ! jejej

Es bastante claro el uso de figma incluso en la industria, recomiendo m[as usarlo en la aplicación de escritorio para optimizar recursos del navegador. En cuanto al diseño es lindo y se puede reutilizar para proyectos

Se ve muy interesante y desafiante al mismo tiempo, ya hize un intento de pagina web con ayuda solo de ChatGPT y con este curso espero mejorar mus habilidades y poder colocar un bonito proyeto en mi portafolio

y aqui esta mi Proyecto (estoy abierto a criticas constructivas) https://github.com/Nyu00/SkinCare-PageWeb

Excelente clase , Me gusto que comenzara con un diseño ya construido con figma y poder trabajar con el proyecto desde 0.

muy muy interesante este proyecto, ya quiero codear esas lineas

¡Profundiza tus skills de diseño con Figma!

Esto esta de lujo, así da gusto aprender, gracias Platzi.

Proyecto bastante interesante para practicar. Buena UI.

Estoy muy feliz de iniciar mi Primer proyecto para mi Portafolio ❤️

No sé si le pasó a alguien más pero cuando empecé a ver el proyecto empecé a imaginarme las etiquetas en VSC. Ya me imaginaba las div, .class y sobre todo las ul y li.

Veo que el proyecto está en Zeplin y no en Figma, como dijo la profe. Osea que es otra app para sketching para conocer, eso me parece bien

¡que emoción este curso! 🙊🤩

Se ve incredible iniciando este increible curso

Dia uno iniciando este curso, ya estoy emocionada 😮

Maquetación

La maquetación web consiste en transformar el diseño de una web en un conjunto de archivos (HTML, CSS, JS) para que los navegadores web puedan interpretarlos y reproducirlos correctamente en diferentes dispositivos. La maquetación es una fase avanzada del proceso de desarrollo web.

Fuente: https://www.mantis.cat/es/maquetacion-web.html

La maquetación o diagramación web se refiere a transformar un diseño gráfico en una interfaz funcional en términos de programación que entienda un navegador o dispositivo específico.

Fuente: https://www.pragma.com.co/academia/lecciones/10-pasos-para-una-maquetacion-eficiente-con-html-y-css#:~:text=La maquetación o diagramación web,un navegador o dispositivo específico.

Mi concepto

La maquetación o diagramación web consiste en transformar un diseño gráfico —boceto— (hecho por UX/UI en Figma o Scketch) en una interfaz funcional en términos de programación que entienda un navegador o dispositivo específico.

Sencillo: De un boceto → Archivos HTML, CSS, JS

Sería bueno tener una lista genérica de las cosas que debemos preguntar y tener en cuenta para que no se nos olvide nada, de ahí en más ajustar nuestra lista a los proyectos que se nos presenta.
También ver contantemente diseños para poder aportar nuestro granito de arena y sugerir una estilización que se ajuste al máximo a nuestros clientes.

Amo Figma, pero que deli trabajar sobre un diseño, nos ahorra ese tiempo y vamos de una al código. Me encanta. ❤

Excelente que nos familiaricen con la forma en que se realizan las entregas por parte del equipo de diseño. Considero súper importante que como frontend developers le tomemos atención a esta parte.

💚 CURSO Adobe XD
💚CURSO Figma

Enamorándome fuertemente de esto. ❤️

Let’s do it

Seria interesante pegarse a una API y traer los productos, se ve genial esta practica, voy a ver si la hago ocn bootstrap 5

esta de locos el proyecto!

Interesante

Se ve super bien el proyecto :3

Wow esta increíble, ansioso por aprender nuevas cosas de fronted!💪

Ya me dieron ganas de aprender algo de Figma para complementarlo con el curso…

Es importante tener los diseños establecidos antes de empezar a programar ya que, es importante tener claro el contexto de la aplicación

.

Excelente, este proyecto se ve genial 😍

Luego de haber tomado el curso de Frontend Developer, siendo que será un gran reto, apenas empiezo en este mundo y espero comprender muchas más cosas e ir interiorizando conceptos más adelante.

Clase 3 - Identifica las pantallas de tu proyecto


¿Con quienes debemos de hablar para saber el diseño de las pantallas de los errores en un proyecto, además de las razones de estos mismos?

  • Con el equipo de diseño.

¿Es importante saber el flujo de las pantallas de un proyecto web o app antes de empezar su maquetación?

  • Sí.

¿Qué es maquetación o diagramación web?

  • Es una técnica que se usa en desarrollo web la cual consiste en transformar un diseño gráfico (boceto) en una interfaz funcional en el sector de la programación y que el navegador o dispositivo la entienda.

lo que me parece interesante es que se puede hacer el proyecto desde la planificación y pasando por el proceso de diseño y el orden de las pantallas; por esas cosas es que me gusta el desarrollo web, no me imagino como sería el producto final, seria super

Estoy siguiendo la ruta de HTML y CSS a profundidad y espero no tener que llevar otros cursos a parte de este por el momento 😅

Excelente ejercicio práctico para aplicar los conocimientos adquiridos de los anteriores cursos. No puedo esperar para ver el resultado final. 😁😁

Se ve asombroso todo lo que vamos a construir, espero interiorizar todos los conocimientos y en el futuro hacerlo sin seguir los videos.

Let’s Get It! 🔥🔥

Me gusto mucho la interfaz se ve muy limpia. Excelente trabajo equipo Platzi.

Sin duda muchas espectativas, se ve magnifico

Termine el curso práctico de HTML y CSS donde se realiza un clon de Google y estoy muy emocionado de continuar con este curso y este proyecto, con la profe Teff ya sé que voy a comprender muy bien los temas y explicaciones

Súper emocionado por empezar a desarrollar este maravilloso proyecto!

Se ve muy bueno el proyecto, intentaré construir otro en paralelo conforme vamos avanzando en el curso.

El proyecto final se ve bastante interesante. Comencemos!

El producto estará más orientado a un diseño mobile.
Veo que no cambia mucho en web 😅

ok

muy buena expicacion gracias

Los diseños están geniales para dar inicio 😃

Wao! sinceramente se ve espectacular esta vista previa del proyecto 😄

Realmente estoy emocionado, desde que comencé la carrera estaba esperando este momento. 😁😎

No conocía esta valiosa herramienta <<Figma>>. Va a ser de gran aporte al desarrollo profesional.

Muy innovador. ¡¡Adelante!!

Veo que es muy importante poder usar figma, espero poder aprender ello en el transcurso de la ruta.

Que Genial!!!

Estafany tienes un gusto… exquisito, me parece super profesional el diseño

y en este punto es donde te das cuenta q debes volver a ver el curso anterior jajaja xD

Esta muy chevere el proyecto

yard sale

  • proyecto
  • texto
  • tipografia
  • fuente
  • diseños
  • password

Este es el link de Yard Sale en zeplin:
https://scene.zeplin.io/project/60afeeed20af1378ed046538

No soy muy bueno en UI/UX pero todo se aprende así que ¡Aquí vamos!

¡¡Excelente!! Tener al menos la sensación de un proyecto real, es gran ayuda para nuestro desarrollo, aunque depende mucho de nosotros también, ya que nosotros mismo podemos plantearnos el reto de desarrollar en paralelo un proyecto con los conocimientos obtenidos en clases anteriores, para poder desarrollar proyectos solo por diversión o simplemente jugar con los elementos.

Super emocionado de iniciar el proyecto! Se ve espectacular!

Sencillamente, esto se ve espectacular!! 😲

wooow!! estoy muy emocionado de hacer este proyecto!!

Aprendo muhco más con los cursos prácticos que con las teorias…

En 20 clases vamos a hacer este proyecto!! Estoy myuy emocionada por comenzar!!

Pinta muy bien, justo lo que busco aprender.

Un proyecto muy completo.

Viendo este video me sentí super motivada por todo lo que voy a aprender!

Muy bonito el proyecto

Este curso se ve que será muy interesante.
Y me parece super increible que podamos hacer un proyecto real como si hablaramos de un entorno de trabajo

Emocionado de poder programar este proyecto!

Loading project XD

ay que emoción ame el diseño !!!

Se ve genial el proyecto, toca afianzar Figma. El curso que tienen de Figma en Platzi es demasiado espectacular aunque no le he concluido, a darle una repasada 😃

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

El proyecto de este curso se ve geniaaaaal. Motivación a 1000.

Se ve espectacular! 💚

vamoa dalre pues

¿Que? Me voy un año a dedicarme al backend, regreso y ya no están desarrollando PlatziVideo? pfff…