脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
3H
32M
36S

Analizando el dise帽o: proyecto del curso

2/32
Recursos
Transcripci贸n

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.

驴Qu茅 necesitas para trabajar en tu primer proyecto?

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.

Figma

Uno de los softwares m谩s utilizados para construir wireframes o prototipos de alta calidad es Figma.

image.png

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.

Proyecto

El proyecto que vas a construir lo puedes encontrar aqu铆.

image.png

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 鈥淎brir en editor鈥.

image.png

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.

image.png

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 110

Preguntas 21

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

隆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 鈥淓structura 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

Link del proyecto aqui
Puedes crearte tu cuenta de figma desde aqu铆 o bajarte el software, es gratis y te recomiendo 馃槂

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!

https://t.me/HackTzi

Tambi茅n tenemos una organizaci贸n de GitHub donde pondremos nuestros proyectos, 煤nete por aqu铆:

https://github.com/HackTzi

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

Mis conceptos nuevos a manejar en este curso
Wireframe:

  • es un boceto, un esquema o prototipo que muestra como ser谩 la pagina web antes de dise帽arla, por lo general esta en escala de grises.

mockup

  • define su apariencia, y aspecto visual que debe encajar con lo que se buscaba, encontramos la maquetaci贸n con los componentes definitivos, im谩genes, tipograf铆as, iconos, etc.

Figma:

  • Se trata de un sitio web que se puede utilizar online, o bien, descargar su propia aplicaci贸n que permite trabajar de manera offline. Figma est谩 basado en el navegador tambi茅n tiene un historial de cambios de cada archivo, por lo que siempre podr谩s volver a alg煤n punto anterior

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!!!

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 鈥渕obile 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

Aqu铆 les dejo el link para instalar Figma en sus computadoras como una app nativa que les ayuda en rendimiento:

Para Windows: Link
Para macOS: Link

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

2.-Analizando el dise帽o

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

Lo que mas me gusta de este profesor es que aunque ya explico todo de manera detallada, lo vuelve a explicar.
Grande degranda!!!

Como dato curioso: al buscar Figma en Google, el resultado SEM es Platzi jaja

Estamos ready!

Clase 2: Es importante que sepas que este curso es la continuaci贸n pr谩ctica del [Curso Definitivo de HTML y CSS](https://platzi.com/cursos/html-css/), por lo que si a煤n no lo has tomado, este es el momento. ## 驴Qu茅 necesitas para trabajar en tu primer proyecto? 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. ### Figma Uno de los softwares m谩s utilizados para construir wireframes o prototipos de alta calidad es Figma. ![image.png](https://static.platzi.com/media/articlases/Images/image%2895%29.png) 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](https://platzi.com/cursos/figma/) de Platzi. ### Proyecto El proyecto que vas a construir lo puedes encontrar [aqu铆](https://www.figma.com/proto/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=44:594\&scaling=scale-down). ![image.png](https://static.platzi.com/media/articlases/Images/image%2896%29.png) 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 鈥淎brir en editor鈥. ![image.png](https://static.platzi.com/media/articlases/Images/image%2897%29.png) 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. ![image.png](https://static.platzi.com/media/articlases/Images/image%2898%29.png)

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!!

El proyecto en producci贸n鈥

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:

  • colores
  • sombras
  • tipo de fuente
  • width y heigth
    Lo que no sirve son las posiciones de los objetos ya que los hace estaticos y lo que queremos es usar flex o grid para que estos se ajusten a los layouts

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 鉁

En el saludo, ese... Bienvenida, Bienvenido me hizo recordar al gran Celis. Grandes Profesores los dos. Estoy muy emocionado por tener la oportunidad de tomar este curso con en profe Diego :D Mucho 茅xito a todos y todas!

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 鈥淭odo 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鈥檓 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