Analizando el diseño: proyecto del curso

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 😄

Jaajjajaj está genial ver los cursores de los demás

La primera parte de mi proyecto creado en Figma!!! ahora a escribir código!!!

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:

• https://www.juanpol.com/que-es-figma/
• https://webdesdecero.com/wireframes-que-son-y-como-crearlos/

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.

Esto no es mobile first, es “mobile only”.

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

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.

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

Articulo de Platzi para entender la diferencias entre
Wireframe, Mockup y Prototipo

https://platzi.com/blog/wireframes-prototipos-mockups-que-son/?gclid=CjwKCAjwyaWZBhBGEiwACslQo_-gczNwcKKGMyGvDZvj58CGxdvNLmL8p-mg26460WaGTmRbsypf7hoCjAEQAvD_BwE&gclsrc=aw.ds

Esta genial!!

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

Curso definitivo de HTML y CSS

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.

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/

💪 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

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

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

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!

No te vas a arrepentir…

Genial…!

Wireframe vs mockup vs prototype: What’s the difference?

Before we get to the detailed comparison between wireframes, mockups and prototypes, let’s look at the basic definitions of all three

Clase 2 - Analizando el diseño: Proyecto del curso

Repaso de la clase

¿Qué es y para qué sirve Figma?

• Es una herramienta de diseño, que usan los diseñadores para construir wireframes o prototipos de productos digitales (webs o apps).

¿Para qué nos sirven a nosotros los desarrolladores los wireframes que construyen los diseñadores con Figma?

• A entender la arquitectura del proyecto de manera fácil y que pasar el diseño a código sea mucho mejor.

¿Por qué es buena idea tener una cuenta en Figma a la hora de ver y analizar los wireframes?

• Porque al tener una cuenta somos capaces de ver con más detalle el wireframe.

¿Qué debemos de hacer antes de empezar a codificar un producto web?

• Analizar y dividir el producto en secciones acorde con HTML semántico.

¿Es buena práctica tomar el código CSS que nos brinda Figma para construir nuestros productos digitales?

• No. Los estilos que nos brinda Figma son útiles para saber los siguientes datos del proyecto:
  • Tamaños.
  • Fuentes tipográficas.
  • Colores.

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:

• Para activar el modo oscuro presiona CTRL + SHIFT + L
• Notas del curso Responsive design

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 ✨

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

👌