Preparación para el diseño de wireframes
Clase 8 de 20 • Curso de Diseño de Prototipos 2018
Contenido del curso
Clase 8 de 20 • Curso de Diseño de Prototipos 2018
Contenido del curso
Leonardo Grabow
Lenin Gutiérrez Ramos
Ariadna Martiñon
Alejandro Sol Villaseñor
Carlos Gómez Mont
Joao Alejandro Pereira Quiñones
Carlos Gómez Mont
Tania Ramírez
Alejandro Sol Villaseñor
Carlos Gómez Mont
Victoria Yleana Goicoechea Miguel
Victoria Yleana Goicoechea Miguel
Victoria Yleana Goicoechea Miguel
Diego Forero
Antony C. Medina
Julian Mora
Edith Giselle Lopez Lopez
Nehuén Benitez
German Alfonso
Julian Mora
José Ezequiel Chiotta
Antony C. Medina
Uriel Ramírez
Beicker Jesus Zambrano Escalona
zefe torres
zefe torres
Hellen Alexandra Rozo Suarez
Uriel Ramírez
Cecilia Salazar
Luis Rodrigo Velazquez Cabrera
Jorge Alberto González Herrera
Carlos Gómez Mont
Estimados: Verificar el minuto 8, donde no se aplica los estilos requeridos a los textos 32...Por favor verificar video y tratar de corregirlo... Muchas gracias
Es cierto. No llego a aplicar el estilo en el cambio de color. Pensé que al final lo iba a resolver, pero no.
Layout grid: modificar a 12 columnas, margen de 20
Placeholder: son los contenedores ya definidos que serán llenados más tarde por los componentes (espacios y valores)
Input: es un campo de información
Crear estilos de texto: Text/plus/create new text style. Estos estilos nos permiten reproducir cambios en todos lados donde se haya ocupado.
Muy buen aporte, gracias!
Excelente, gracias!
acabo de entender por que bootstrap usa 12 como el numero máximo de una columna.
no sabia que era un estándar en la web.
Es genial así todos podemos comprender mejor los conceptos y tener una comunicación más fluida en equipo.
Cuántos distintos tamaños de letra se recomienda usar?
Yo personalmente utilizo Material Design para guiarme en los tamaños de cada uno de los elementos que tengo en mis diseños. Aquí te dejo un link por si gustas darle una revisada
Aquí una imagen de los tamaños de texto (Material Design)
Damn, eso es un muy buen dato!! :)
Les paso esta pagina para los atajos de Figma: https://shortcuts.design/toolspage-figma.html
Y consejos generales para trabajar en Figma: https://webdesign.tutsplus.com/es/tutorials/figma-general-and-miscellaneous-tips--cms-31994
Me quede con la intriga de como cambiar el color en los estilos de texto XD
Hola, cuando tienes seleccionado un texto aparece la opción de fill justo de bajo de texto hay al darle click al cuadrado de color aparece el color picker con todas sus opciones para el cambio de color en el texto.
¿Si diseñamos para móvil cuantas columnas se usan?
Usa dos, máximo 4 si te quieres complicar la vida
Gracias por el aporte
Un recurso para crear grillas de columnas: http://gridulator.com/
Como se hace para sacar los screenshots de freehand? He probado mucha extensiones de chrome pero ninguna saca el screenshot del wireframe completo.
Hola GerAlfonso a qué te refieres con Freehand, el programa?
En cuanto a la extensión para chrome yo uso esta
Yo uso esta para hacer screenshots
¿Alguien tiene el listado de componentes acabado y detallado como lo muestra en este video?
En recursos tenemos un archivo con todo el ejercicio, puedes importarlo a Figma y de ahí consultarlos todos
Eso Fue lo que no me gustó de Invision. Hay que tomar capture de todas las pantallas y recortarlas para poder trabajar con ellas en vez de tener una opción de descargar o enviar por correo. Para eso mejor lo hago todo en papel y Adobe XD o Sketch.
Como puedo modficar el color de la fuente en todos los Text32 por ejemplo ?
Para agregar estilos, para cambiar de color a la fuente no funciona. Probé creando un estilo Text32 y se lo aplique a otro Text32 pero solo aplico el estilo de tamaño de letra y el color no lo aplico.
Se debe hacer el prototipo con base a Atomic Desing o a UX orientado a objetos? o de ambas maneras?
Lo que más me funciona a mi es usar UX orientado a objetos para wireframes ya que estamos haciendo iteraciones rapida. Para ya la parte visual si enfocarnos en Atomic Design ya que esta pensando en si para toda la taxonomia de UI
Todo esto me recuerda a cómo maquetar en diseño editorial. Es genial que en todo tipo de diseño sea la retícula algo tan indispensable. Figma es genial!
muchas gracias por el aporte
Algo falló ahi a la hora de querer mostrar como es que los estilos se actualizan automáticamente al cambiar uno…
:/