Analizando el dise帽o

2/31
Recursos

Aportes 97

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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

Ac谩 puedes tener inspiraci贸n para tu proyecto personal.
https://mediaqueri.es/

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.

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

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

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 馃槃

** 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.

隆He esperado este momento por semanas!

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

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.

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/

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.

Por aqui pueden crear una cuenta de estudiante que nos permite tener funcionalidades pro

Platzi la rompe

Me distraje un poco viendo los curseros de los demas compa帽eros en el proyecto, queria ver que hacian :v

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

Figma le esta quitando mercado a Adobe XD, y personalmente creo es mucho mejor!
Se ve muy bueno el proyecto 馃こ

Figma sugiere estilos, que se pueden tomar como base para crear propios.

Emocionado por empezar este curso.

super listo!!!

驴Esta p谩gina nos sirve para el portafolio que estamos construyendo?

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 {
	......
}

Esto se va a poner bueno

Bueno, creo que va siendo hora de empezar a maquetar la landing de mi sitio web

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

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

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.

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

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

Aqu铆 dejo el link para los que quieran descargarlo

Ahora si viene lo chido.

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

Estamos ready!

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

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

Yo uso este browser open source, es increible !

Responsively

Alguien ya lo conoc铆a tambi茅n ?

隆Este es el nivel de proyectos que me parecen valiosos! 馃榾

Responsively App es una muy buena opcion para ir trabajando de forma fluida 馃槃

Yo siguiendo e cursos de mis compa帽eros en Figma lol

Yo solo pasaba por ac谩 para ver de que iba el curso (eventualmente pensaba llevarlo pero no hoy), hab铆a planeado empezar hoy el Platzi Web Challenge #6 , pero ya me anim茅 a hacer el curso hoy鈥︷煒馃槀

Eres el mejor degranda!

En caso de que no puedan ver el link, ac谩 les dejo el proyecto en Figma para puedan entrar

Estoy emocionado de empezar este proyecto

fgdfg

Buen d铆a. Les comparto otra herramienta (recomendada por Diego).
https://www.mydevice.io/#compare-devices