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 鈥攂oceto鈥 (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鈥oy 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 鈥攂oceto鈥 (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鈥檚 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鈥檚 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鈥