Descubre qué ha cambiado en nuestro medio

1

Todo sobre el diseño de páginas web acaba de cambiar

Conceptos que forman parte del diseño en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Dinámica: ¿Cómo se vería?

¿Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Dinámica: ¿Qué usarías? (Parte 1)

10

Dinámica: ¿Qué usarías? (Parte 2) + Reto

11

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Modern Layouts con CSS Grid

12

¿Qué son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Diseño web para desarrolladores

16

Dinámica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de diseño UI/UX: Fase de inspiración y creatividad

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del diseño al código

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¿existirá CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Dinámica: No puedo dejar de ver

16/28
Recursos

Aportes 114

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Mi cara al buscar las diferencias en la 12

  1. B por la cámara
  2. A por el color del 2h ago
  3. A se nota el color de letra del botón xD
  4. No lo sé… de repente B? Siento que se ve mejor xD Además creo que le veo los bordes redonditos
  5. A, la B tiene el texto alineado en start
  6. B, la imagen, obvio xD
  7. A por la opacidad de los botones jaja
  8. B porque en la A pareciera que SKIP es una acción importante, lo cual no es
  9. B Porque se debe mantener el diseño, si un botón es mayúsculas, el otro igual tiene que serlo
  10. B Por el tamaño de la lupa:3… ¡¿Cómo que A?! Yo veo que la lupa de la A está más chiquita que el texto!!! xD
  11. A por la separación entre el nombre y el 2h ago
  12. No aquí si no veo diferenmcia xD Si al caso la alineación de los iconos porque los de la B se ven como más moviditas pero no se xD

.
Juro que mis respuestas son 100% fiables, pausé el video:3
.
Por cierto, object-fit hace que las imagenes se vean bien al darles un width y un height que las deforma:3 O creo que así funciona, yo lo uso para fotos de perfil circulares:3

Me gustó mucho el reto de Can’t Unsee. Les comparto mi resultado:

No puedo creer que le pegue a la nº12, YO TENGO EL PODER!

11/12 😄 no estuvo mal. Muy divertida ésta dinámica.

Quiero aportar con mi punto de vista en la parte 7 y 9 de la dinámica:

(parte 7) Yo opté por ambas o mejor dicho dependiendo, me refiero a que en una situación donde los botones están activados lo correcto es la A y si los botones están desactivados lo correcto sería la B.

(parte 9) A parte del icono, creo que en el boton “Skip” del A está escrito primero con mayúscula y el resto con minúscula y el del B todo con mayúsculas, el destalle está en que el primary button están escritos ambas con mayúsculas y creo que pierde sentido la forma en la que se crean los botones, a parte de que puede confundir al usuario haciéndolo percibir como un texto normal en vez de un botón (como punto de vista mio, corríjanme si me equivoco) :c.

10 de 12 pero me siento orgullosa de captar rápidamente la número 12 jajaja

lastima que los cursos sean asi

Me gustó esta clase mucho

Mis respuestas 👀
1: (B). Por que el icono tiene una mejor proporción frente al texto.

2: (B). Por que el texto abajo del nombre de usuario tiene un color más obscuro, lo que hace notar que es un dato a parte del nombre de usuario.

3: (A). Por que el color del texto del botón tiene contraste frente al color del fondo del mismo.

4: (B). El input de búsqueda se ve mejor con ese borde redondeado.

5: (A). La alineación de bloque del icono y del texto es la correcta ya que están en el centro ambos.

6: (B). Aquí me estoy arriesgando y dejándome llevar por mi intuición. Creo que se ve mejor el fondo de la guitarra pese a que no se vea la parte inferior. Frente a la primera que se mal la proporción por la altura que esta tiene.

7: (A). Los iconos tienen buen contraste al ser de color blanco frente a su fondo que es de color gris.

8: (B). Por que se tiene el botón con la acción principal que es invitar amigos pero si no se quiere esta opción, se ve claramente la segunda que es de saltar y se diferencia por el estilo del botón, siendo esta la acción secundaria.

9: (B). Por que el texto del primer botón esta en mayusculas por lo cual el segundo también debe ser así para que haya armonía en el diseño.

10: (A). El icono tiene mejor proporción frente al texto de placeholder que tiene delante.

11: (A). Por que entre el nombre de usuario y el segundo texto que es hace cuanto tiempo se conecto, existe un espacio entre ambos textos. Lo que hace que se sienta que respiran los textos.

12: (A). Por que veo los iconos más centrados frente a los de la imagen B.

Tuve 11 bien jaja
Me equivoque en la 2. Pero resulta que yo vi mas bonito la B que la A que era la correcta por el tema del contraste 😅

¡Muchisiiiiiiimas Gracias Teacher Teff 💜!
Esta actividad ha sido mi favorita de todas las actividades que he hecho en todos los cursos. Mas así, por favor 🚀

Se comenta mucho del color en esta clase y yo quiero volver a treaer esta pagina que se recomendo en cursos pasados
https://www.materialpalette.com/
al dar dos colores te da todos los otros colores como de texto o background para que no tengas problemas de contraste

para la ultima no note la diferencia jejej. Pero super entretenido el reto.

tuve 3 malas
4-A
6-B
8-A

12/12 o 11/12 no estoy seguro jajaj. Sinceramente fue fácil la 12 lo que se me complico fue la 10.

acepto la dinamica

  1. B por la cámara la veo mas grande.
  2. A por el color
  3. A ?, genial
  4. A? no se , este estadificil jejej
  5. A se ve mas alineado
  6. B, la imagen.
  7. A es mas facil ver los iconos
  8. B me gusta mas el diseño, jejejej
  9. A, que? por que la b?
  10. B? xD
  11. A por la separación entre texto?
  12. No veo diferencia XD, ya me quede ciego. jeje

.

11 buenas. Falle en el boton primario, no sabia que solo debia haber uno.

Estan interesantes estos ejercicios para mejorar nuestro ojo de diseñador de cara a nuestro futuro como frontend.

Estos recursos van bien, ahora a practicar!

10/12 en puntaje final.
No me fue bien en el icono de busqueda primero por los bordes y luego por el tamaño de la lupa.

Excelente dinámica, me encanta aprender así, jajaja. En mi caso acerté 10/12. Nada mal, creo.

Estaba todo feliz hasta que llego la 12 y me quede mirándola por media hora hahaha. Todos pausaron ahí seguro!!
Me llego a parecer que los iconos del centro de la b estaban mas pequeños pero la verdad los veo muy igual :C

Necesito usar anteojos

  1. a (texto-color y fuentes,img con el borde,las cajas de texto tambien en el borde)
  2. b (el icono se ve raro)
  3. no se
    3.a(texto del boton)
  4. b( el borde la caja)
    5.a(alineación del texto en el botón)
  5. b(el ancho de la img)
  6. paso
  7. b (por el primary boton)
  8. b(mayuscula de los textos)
    10.a (el tamaño del icono)
    11.a(un espacio q hay entre el nombre y la fecha)
  9. dificil jejeje

me falta, afilar los ojos

12/12 Estuvo muy chevere el ejercicio y si que fue complicado darse cuenta de cual era el posible error en las últimas, pero estuvo genial.

estuvo facilito todas correctas jeje

Les comparto estas dos herramientas: - Grid: https://grid.layoutit.com/

https://cantunsee.space/ genial jajajajaaj

👍🏼 12/12

12/12! 💪💚

11/12 😄

Tuve las 12 correctas jaja, pero sobre todo debemos resaltar la importancia de tener buen ojo para el diseño web ya que desde la visualización ya podemos crear los layouts imaginarios y empezar a ordenar el código en nuestra cabeza! 😃

Tuve 11 buenas!!!

Acá una documentación mas clara y con ejemplos de para que sirve el object-fit (Por cierto es una propiedad que nos ayuda bastante en el tema de imágenes).

Las tuve todas bien!!!
🥳🥳🥳

10/12 Las últimas dos estuvieron difíciles, no las vi muy bien 😦 Fue las que me llevaron a no tener 12/12. Excelente dinámica para entrenar el ojo !!!

Encontré todas las diferencias menos la primera, al no pausar el video escuche la respuesta.

Lo difícil es cuando estamos en el código y vemos esos detalles, y no sabemos de buenas a primeras que propiedad debemos usar para esos alineamientos, juegos de contraste, etc.

12/12, cabe destacar que siempre existen malos alineamientos en los iconos, como de fuentes de textos y contrastes, y estos al ser de muy poca visibilidad, un desarrollador puede pasarlos por alto.

Ay, no! no vi muchas y eso que algunas eran muy evidentes como una sombra, habrá que practicar porque ahora eso de la “Atención al detalle” se está poniendo en juego…

En el ejemplo 11 es el interlineado o separación del “2hr ago” respecto al elemento de arriba, solo me falló el del tamaño de la lupa y el 12 aunque si notaba un poco la alineación de los iconos

Un profe de matemáticas en la Universidad nos explicó que los bebés con 6 MESES APENAS! de edad, ya tienen una preferencia a mirar objetos armónicos.

La armonía en el diseño es algo que nos impacta muy muy adentro nuestro.

Creo que me fue medianamente bien xD

10/12 con la firme creencia que en las otra dos se equivoco teff y no yo (: jasjajs

  1. B. icono de la cámara.
  2. A. la parte del tiempo de conexión.
  3. A. por el botón, y el contraste mencionado en la opción anterior.
  4. B. icono de la lupa.
  5. A. alineamiento del contenido del botón.
  6. B. la imagen de la guitarra.
  7. B. contraste de los iconos.
    A mi parecer estaría bien, ya que de esta manera se sabe que icono se tiene seleccionado.
  8. B. contraste de botones principales y secundarios.
  9. B. tipografía del icono SKIP.
  10. A. tamaño de iconos y letras.
  11. A. line-heigh de separación entre líneas.
  12. A-B no vi la diferencias de la alineación 😦.

en la cuarta ambas son correctas, ya depende del estilo de la web, si manejan todo puntiagudo o redondeado.

De 12, correctas 9.
Interesante esta dinámica

12/12… y yo pensando que el TOC no servia para nada 😅😅

Tengo ojo de Cybor para los errores jajaja

Creo que este tipo de dinámicas le hacen falta a los demás cursos, son entretenidas y útiles, sin embargo siento que este curso también tiene algunas falencias importantes como falta de práctica por parte del estudiante. Espero que eso mejore pronto.

Ala acerte todas, las ultimas son super complicadas

Object-fit cover es algo así como cuando uno cambia el fondo de pantalla de windows…que le dices que se expanda, que se contraiga o que se ajuste. wao !!!

  1. B
  2. A
  3. A
  4. B
  5. A
  6. B
  7. A
  8. B
  9. B
  10. A
  11. A
  12. X

Tuve bien 11/12 estuve mal en la 8, no sabía que solo debe haber un botón primario pero tiene lógica el que solo haya uno.

  1. B
  2. A
  3. A
  4. B
  5. A
  6. B
  7. A
  8. B
  9. B
  10. En esta me confundi, eleji la B y era A…
  11. A
  12. A se nota los que en la A los iconos estan bien centrados en su contenedor, mientras que en la B los iconos estan hacia el top left de su contenedor.

Objetivo: Entrar nuestro ojo 👁💪🏻 como desarrolladores 👨🏻‍💻👩🏻‍💻 para tener un muy buen nivel de detalle 🤔🧐 .

1B por la cámara
2A por el color del 2h ago
3A se nota el color de letra del botón
4 B, por el contraste de los colores.
5A, la B tiene el texto alineado en start
6. B, por la imagen
7. A, por los colores de los íconos, así se ven mejor
8. Me confundí, pense que era A
9. El B, por las letras de los botones
10. El A, porque tiene espacio entre los íconos.
11. No sé jajaaja
12. Me perdí

  • 1 = B
    El botón tiene una mejor distribución del espacio entre la cámara y el texto gracias a las dimensiones de la misma cámara.

  • 2 = A
    Por temas de accesibilidad en el uso de contrastes el primer texto es más lejible.

  • 3 = A
    De la misma manera el contraste juega un papel muy importante, no puedes poner texto oscuro sobre un backgroun tambien oscuro.

  • 4 = A X
    Pero la respuesta correcta es la B ya que el fondo de el searcher es mucho más legible con respecto a los contrastes entre el fondo y el elemento.

  • 5 = A
    Tiene que ver con el alineamiento de los elementos dentro del botón en el eje Y ya que establece equilibrio visual.

  • 6 = B
    Con respecto a las imágenes debemos evitar que se modifiquen de su tamaño original como en la foto ya que esta en la opción A ha sido estirada de izquiera a derecha gracias al tamaño de la tarjeta.
    Porpiedad recomendada:

img 
{
	object-fit: cover;
}
  • 7 = A
    Sigue siendo los contrastes entre los iconos y su background, con colores que tengan relación 1:2 en contraste.
    “Si me equivoco por favor corrijanme”

  • 8 = B
    Por la diferenciación de elementos.

  • 9 = B
    La tipografia debe ser homogenea.
    “No encontré nada malo con los íconos, tal vez uno es más oscuro que otro”

  • 10 = A
    El tamaño de los íconos siendo homogeneos con el tamaño de la tipografía.

  • 11 = A
    Le atiné, pero la verdad no estoy seguro. Pero siento que el fonto hace aún más contraste con sus elementos que en la opción B .

  • 12 = A
    La alineación de ciertos íconos dentro de sus contenedores. Los de la opción B No están completamente centrados.

Me encanto esta dinamica , fue retadora pero me encanto 😄

11/12
La 12 esta muy dificil, no logro notar la diferencia aun
😭

12 correctas 😄

¡Bastante bien! 😄

¡Excelente el desafío!

6/12 :'v

👶

Respuestas:

  1. B ok
  2. A ok
  3. A ok
  4. B ok
  5. A ok
  6. B ok
  7. A ok
  8. B ok
  9. A x (me quedó mal :c)
  10. A ok
  11. A ok (gracias por la felicitación uwu)
  12. A ok

11/12 ;D

9 DE 11

Haciendo las primeras dije eso tan fácil ya que fueron pasando, ya tocaba dedicarle mas tiempo
BUENA PRACTICA

  1. B icono cámara
  2. A opacidad (2h ago)
  3. A color de la letra del botón
  4. B el borde
  5. B alineación texto del botón
  6. B imagen
  7. A iluminación iconos
  8. Esta la Falle :´( pero es la B
  9. B por el diseño de los botones, si el principal es en mayúsculas por buenas practicas que los otros sean igual.
  10. A porque el alto y el ancho del icono del B esta un poco mas grande que el texto
  11. A por el espaciado de líneas
  12. Esta la Falle :´( pero es la A

10 de 12 correctas, en la 11 es un tema de distancia entre el texto de nombre y el texto de conexión. la 12 me costo, se nota una diferencia en la alineación de los iconos, en la A están bien centrados.

10 :,v la 12 estaba dificil xd

1.- B
2.- A por el contraste en la palabra 2h ago,
3.- A por el color en el texto del botón
4.- B por los bordes
5.- A porque el icono está mejor alineado
6.- B porque la img no se distorsiona
7.- A resalta más el blanco
8.- B solo debe haber un botón primario
9.- B por el manejo de la fuente
10-. A se ve más amigable
11.- A mejor espacio entre los textos
12.- A los iconos están mejor alineados

  1. B tamaño del ícono - Correcta!
  2. A contraste del subtítulo - correcta!
  3. A color del texto del botón - correcta!
  4. B bordes circulares - correcta!
  5. A alineación horizontal del ícono de cámara - correcta!
  6. B tamaño de la imágen - correcto.
  7. B contraste de los íconos inactivos - incorrecta
  8. B botón secundario debe ser diferente - correcto!
  9. B los botones tienen letras mayúsculas solamente - correcta!
  10. A espacio entre el ícono y el texto- correcta!
  11. A espacio el nombre y estado del perfil - correcta!
  12. A los íconos tiene que estar centrados - correcta!
    Wuuu 11 de 12! 🥳

Después de las primeras 18 se ponen muy difíciles xD

Bueno. Teniendo en cuenta lo poco detallista que soy no me fue tan mal. Me equivoqué en 2.

12 de 12 😃

12/12 let’s go!!!, sin embargo creo que lo mas complicado es detectar pequeños errores en un diseño lleno de detalles donde no lo esperas.

en la cajita de comentario*12

Me encanto practicar con la página cant unsee
He aquí mis resultados

Para tener ese “buen ojo”, les recomiendo mucho el curso de Diseño para programadores aqui en Platzi, creo que si no lo hubiera cursado antes que este, no hubiera acertado en todos los quizes.


Esto, por supuesto es trabajo de un diseñador UI/UX, no del desarrollador, pero si tu interes principal como desarrollador es el Frontend, seria una gran ayuda que sepas un poco de esos fundamentos para cuando te pasen un diseño a codear, puedas ser capaz de detectar alguna inconsistencia.

En la mayoria de los quizes los problemas de las opciones incorrectas tenian que ver con contraste, alineacion, agrupacion de elementos, consistencia, entre otros conceptos que los aprenden en el curso que les mencione. La verdad me sorprendio lo facil que los pude detectar, se los recomiendo mucho.

1: a, 2: a, 3:a, 4:b, 5:a, 6:b, 7:a, 8:b, 9:a, 10:a, 11:a, 12: no veo la diferencia

Debo admitir que en las primeras 5 TeffCode me clavó una goleada con esas imagenes. Pero ya de ahí para adelante como que le fui agarrando el golpe.
Lecciones aprendidas de este ejercicio. Fíjense siempre en el tamaño de ícono, contraste del texto o de los elementos y espaciados. Ahí es!!

De la #12 a mi opinion es la A por que los iconos deben tener tamaño uniforme y estar alineados de la misma manera
En conclusion debo decir que falle en 3 : # 9 # 2 # 4

De la #11 a mi opinion es la A por que el background de los iconos no debe estar demasiado saturado en color

En la pregunta #2 para mi el contraste es en el nombre de la persona y el texto que indica si esta o hace ceuanto estubvo conectado , de igual manera en el background y el color del circolo de la camrara

B. la cámara es mucho mejor ahí (texto e icono del mismo tamaño es mejor)
B: sentía que el contraste debería ser mas oscuro pero no
A. La A. el contraste es mucho mejor
B. sentía que era ese pero no sabía porqué. Quizas border radius
A. El texto esta alineada a la vez con el texto
B. La imagen es mucho mas buena
A. Tiene mas contraste!
B. Difícil. creería que este porque hay un botón de llamado a la acción
B. esta en mayúsculas el botón igual que en el otro!
A. el icono esta mejor posicionado
A. esta mejor alineado
A. siento que los iconos están mejor ubicados

11 de 12 😀

  1. Pregunta 1: B, el icono de la cámara tiene el mismo tamaño que el texto y está posicionado a la misma altura.
  2. Pregunta 2: A, contraste en la tipografía.
  3. Pregunta 3: A, de nuevo sucede lo del contraste, en este caso en la tipografía del botón.
  4. Pregunta 4: B, el buscador tiene los bordes redondeados.
  5. Pregunta 5: A, el icono de la cámara está a la misma altura que el texto.
  6. Pregunta 6: B, la imagen tiene mejor calidad que en la otra opción.
  7. Pregunta 7: A, los iconos se aprecian mejor con el color blanco que con el color gris.
  8. Pregunta 8: B, se destaca mejor el botón principal con la diferencia de colores.
  9. Pregunta 9: B, ya que el botón secundario mantiene la tipografía en mayúsculas y está en armonía con el botón principal. En estos casos, la diferencia de colores es suficiente para que el botón principal siga destacando.
  10. Pregunta 10: A, el icono de la opción B tiene la lupa de un tamaño más grande al texto. Es importante que los iconos y textos tengan el mismo tamaño y estén posicionados a la misma altura.
  11. Pregunta 11: A es la opción correcta, ya que en la opción B el texto que indica la hora de conexión está demasiado pegado al nombre del usuario. Es importante esa pequeña separación porque lo hace más legible.
  12. Pregunta 12: A, en la opción B los dos iconos del centro no están centrados. El detalle es pequeño, pero si te fijas se nota y por eso en este caso es la opción A la correcta.
  1. B por el icono
  2. A me parece mejor el contraste del 2h ago
  3. A porque el B no se ve
  4. B por los border redondeados.
  5. A esta alineado, el b no
  6. B porque la imagen A esta deformada
  7. A pensaria al ver el b que esta muy suave y parecen deshabilitados
  8. B pensaria yo que no pueden ser iguales y sobrecarga la visual. la misma jerarquia no ayuda a tomar decision
  9. A realmente es solo por gusto, no me gusta como se ve la B ( me EQUIVOQUE segun la profe la respuesta correcta es la B)
  10. A los veo casi igual, pero se ve mas bonita la A jajaja
  11. A porque en la B el 2h ago esta muy pegado al nombre
  12. sinceramente las veo igual, asi que no tengo respuesta( segun la profe es la A)

11/12 😃

10 de 12 acertadas ✔

aprobado 100% y sin parar el video 😃

Detalles que hacen la diferencia.

La dinámica esta muy cool. Obtuve 11/12, nada mal.

R B - Si vemos donde esta la cámara y el texto y la idea es que tenga el mismo alto.

R personal, la A

R correcta la A - la razón es el contrasté

R personal, la A

R correcta es la A, también tiene que ver con temas de constraste y es el cta o call to action

R personal, La A, siento que es mejor a nivel visual

R correcta, la B

R personal, La A ya que es el que mejor se alinea la camara con el texto.

R Correcta, La A

R personal, la B ya que la imagen se ve mejor, en cambio la a se ve muy rara la imagen, esto lo podemos arreglar con una propiedad llamada object-fit: cover.

R personal, La A, ya que combina con los otros iconos

R Correcta, la A

R personal, La B tal vez haga mejor juego.

R Correcta, La B ya que hay que tener en cuenta los botones primarios ya que resaltan mas y los usuarios se pueden ir por ese lado.

R personal, La B, ya que hace mas juego con el tema de mayusculas

R Correcta, La B

R personal, La B, tema de contraste y tamaño

R correcta, La A

R personal, La A, creo que es mas tema de alineamiento y visualización

R correcta, La A, Yes Yes!, si se fijan es tema de alineamiento, con el texto que dice 2h ago

R personal, La A, hay algunos iconos que no estan muy bien alineados es muy mínimo pero hay una pequeña diferencia.

R Correcta, La A.

Correctas 10.

Tuve problemas con la misma imagen.

Excelente ejercicio. Me ha gustado bastante.
Pude acercar en todas js

1.- B
2.- A por el contraste de color de 2h,
3.- A por las las letras del botón azul
4.- B creo que por los bordes
5.- A por que esta alienado bien con el icono de cámara
6.- B por que esta bien posicionada la imagen
7.- A por los colores, por que resalta más
8.- B por solo uno es call to action
9.- B por las letras del skip
10-. A por los iconos
11.- A por el espacio entre los elementos
12.- A por que esta bien acomodado el icono de la cámara

11 / 12

10/12. Interesante el reto

Muy difícil de notar en las 2 últimas

  1. B por el icono de la camara
  2. A por el color del texto “2h ago”
  3. A por el color del boton “INVITE FRIENDS”
  4. B por el border-radius
  5. A porque el icono de la camara esta en la misma linea que el texto
  6. B porque la imagen se ve perfectamente
  7. A por el color de los iconos de microfono, camara, y los dos cuadrados
  8. B porque se diferencia la importancia de cada boton con sus colores de fondo para dar a entender que realizan acciones distintas a la hora de cliquearlos
  9. B porque el texto “SKIP” del boton es más visible
  10. B porque el icono es mucho más visible por ser grande
  11. No tengo idea jaja
  12. A por el centrado de los iconos
11 de 12 :)

10/12, no estuvo tan mal mi ojo.

  1. B
  2. A
  3. A
  4. B. Porque los bordes resaltan que es un elemento en el que se podría interactuar.
  5. A.
  6. B.
  7. Escogí la B porque por el principio de similitud de Gestalt entendía que tal vez se quería generar dos agrupaciones, en este caso de acciones. Y esa agrupación se podía generar a través del contraste de los íconos con su fondo.
  8. B.
  9. B.
  10. A.
  11. A. El espaciado entre el nombre y el tiempo de la publicación. También hay una diferencia en el color de la línea que es menos saturada.
  12. A. por la lineación al centro del ícono de colgar.