WorksheetsTema 1 DIW
Total questions: 95
Worksheet time: 2hrs 34mins
Name
Class
Date
1.
¿Cuál de las siguientes áreas NO forma parte de los pilares fundamentales del diseño web?
a)
Estructura y composición
b)
Componentes visuales
c)
Estilo y apariencia
d)
Patrones de interacción del navegador
2.
En una página con jerarquía clara, ¿qué evidencia indica que la atención está bien dirigida?
a)
Fijaciones iniciales uniformes
b)
El CTA principal capta la primera o segunda fijación
c)
Recorrido lineal forzado de arriba a abajo
d)
La imagen secundaria concentra más atención que el titular
3.
¿Qué define con mayor precisión los componentes visuales de una interfaz?
a)
El sistema de columnas y gutters
b)
Color, tipografía, espaciado, iconografía y bordes
c)
Animaciones e interacciones avanzadas
d)
El mapa de navegación entre páginas
4.
Cuando hay conflicto entre forma y uso, ¿qué criterio debe prevalecer para mantener la experiencia consistente?
a)
Priorizar la estética si mejora el CTR
b)
La apariencia debe estar al servicio de la usabilidad
c)
Equilibrio 50/50 entre estética y función
d)
Definir el estilo visual antes que la arquitectura
5.
En fase temprana, ¿cuál es la ventaja práctica de trabajar en baja fidelidad?
a)
Forzar decisiones tipográficas inmediatas
b)
Explorar y corregir ideas con poca inversión
c)
Evitar pruebas con usuarios
d)
Eliminar iteraciones de desarrollo
6.
Para dar personalidad a una interfaz sin tocar la arquitectura de información, ¿qué conjunto es más determinante?
a)
Rejillas, breakpoints y CDN
b)
Tipografía, paleta, sistema de bordes y tono de interfaz
c)
Caching, SEO técnico y A/B testing
d)
Patrones de routing y microservicios
7.
Respecto a la percepción del color en pantalla, ¿qué afirmación es correcta?
a)
El blanco absorbe todo el espectro
b)
El negro refleja toda la luz
c)
El blanco se percibe cuando se reflejan todos los colores
d)
El negro es la suma aditiva máxima
8.
¿Cuál de estas propiedades NO forma parte de las características básicas del color?
a)
Tono
b)
Saturación
c)
Luminosidad/valor
d)
Opacidad
9.
Distinguir primarios luz (aditivos) y pigmento (sustractivos) permite…
a)
Ajustar el tamaño de las fuentes
b)
Comprender cómo se mezclan los colores en pantalla e impresión
c)
Calcular la proporción de contraste
d)
Definir el ancho de columna
10.
Los colores complementarios se emplean principalmente para…
a)
Crear armonías neutras
b)
Atenuar tonos intensos
c)
Aumentar contraste y resaltar elementos clave
d)
Reducir vibración en fondos amplios
11.
¿Qué aporta el uso de tríadas/tetradas en un sistema con muchos módulos?
a)
Un diseño monocromático
b)
Variedad visual equilibrada
c)
Sustituir neutros por saturados
d)
Eliminar contraste entre secciones
12.
La temperatura de color se usa para…
a)
Reducir tamaño de archivos
b)
Simular sombras internas
c)
Transmitir sensaciones acordes al contexto
d)
Asignar niveles de encabezado
13.
Las serif se asocian principalmente con…
a)
Interactividad y dinamismo
b)
Formalidad, tradición y autoridad
c)
Minimalismo tecnológico
d)
Lectura en pantallas pequeñas
14.
En mobile-first, la ventaja típica de las sans-serif es…
a)
Menor legibilidad en baja densidad
b)
Mejor legibilidad en pantallas pequeñas
c)
Uso exclusivo en titulares
d)
Requieren menos interlineado
15.
¿Cuándo conviene usar tipografías decorativas?
a)
En párrafos extensos
b)
En formularios densos
c)
En títulos/logotipos o usos puntuales
d)
En tablas de datos
16.
¿Por qué las monoespaciadas ayudan en tablas?
a)
Glifos de ancho variable oxigenan la tabla
b)
Mismo ancho por carácter mejora la alineación
c)
Kerning automático más rico
d)
Son recomendables solo en impresión
17.
Los bordes rectos/angulosos comunican habitualmente…
a)
Cercanía lúdica
b)
Seriedad y estructura clara
c)
Informalidad marcada
d)
Movimiento orgánico
18.
Los bordes redondeados transmiten con mayor frecuencia…
a)
Rigidez profesional
b)
Menor tocabilidad
c)
Amabilidad y accesibilidad
d)
Complejidad visual
19.
Si eliminas el borde visible de tarjetas/inputs, ¿qué debes reforzar?
a)
Saturación de la paleta
b)
Más familias tipográficas
c)
Espaciado, sombras y contraste de planos
d)
Reducir line-height
20.
Al normalizar bordes en un design system, ¿qué criterios priorizar?
a)
Variabilidad y sorpresa
b)
Consistencia, funcionalidad y accesibilidad
c)
Contraste extremo y saturación
d)
Preferencia estética del diseñador
21.
¿Por qué limitar opciones (paleta, espaciado, tamaños) acelera el trabajo?
a)
Aumenta la libertad creativa
b)
Evita bloqueos y facilita decisiones coherentes
c)
Impide reutilizar componentes
d)
Fomenta tamaños arbitrarios
22.
Utilidad central de una guía de estilos en equipos grandes:
a)
Reemplazar documentación de interacción
b)
Asegurar coherencia y eficiencia en decisiones repetidas
c)
Evitar colaboración diseño-desarrollo
d)
Congelar el producto
23.
¿Qué elemento NO corresponde al índice de una guía de estilos?
a)
Tipografía y line-height
b)
Dimensiones y sombras de caja
c)
Opacidades y radios
d)
Políticas fiscales corporativas
24.
Mantener una guía 'viva' facilita…
a)
Detener cambios para asegurar consistencia
b)
Integrar componentes nuevos sin perder coherencia
c)
Aislarla del crecimiento del producto
d)
Eliminar pruebas con usuarios
25.
La sección 'Marca' debería incluir…
a)
CDN y pipelines de despliegue
b)
Descripción, visión/misión, valores y público objetivo
c)
Batería de tests unitarios
d)
KPIs de conversión
26.
En tipografía de la guía, es imprescindible documentar…
a)
Solo el nombre de la familia
b)
Justificación y usos (principal/secundaria, pesos, tamaños)
c)
Tamaños en puntos exclusivamente
d)
Prohibición de secundarias
27.
Para especificar paleta en UI, formatos recomendados:
a)
Solo CMYK
b)
Solo nombres CSS
c)
HEX, RGB y HSL
d)
Solo HSB
28.
Una señal de jerarquía visual bien aplicada es…
a)
Mismo peso visual en todo
b)
Lo mayor/contrastado se percibe antes
c)
Imagen pesa menos que cualquier texto
d)
El espaciado no afecta la percepción
29.
¿Qué práctica tiende a degradar la jerarquía en una pantalla compleja?
a)
Destacar lo primario
b)
Hacer competir todos los elementos por atención
c)
Atenuar metadatos frente a datos
d)
Separar focos con espacio
30.
Para construir jerarquía tipográfica de forma robusta conviene…
a)
Usar solo tamaño
b)
Combinar tamaño, peso y, cuando proceda, color
c)
Títulos gigantes y cuerpo mínimo
d)
Pesos homogéneos
31.
En lecturas prolongadas, el contraste texto–fondo debería ser…
a)
Intencionalmente bajo
b)
Alto, ajustado a la función
c)
Irrelevante para accesibilidad
d)
Aleatorio para experimentar
32.
Cuando el formato del dato ya desambigua (p.ej., 1.234,56 €), la etiqueta…
a)
Es siempre obligatoria
b)
Puede omitirse si no aporta claridad
c)
Debe tener el mismo peso que el dato
d)
Debe ir en complementario saturado
33.
La jerarquía semántica (H1–H6) se utiliza principalmente para…
a)
Alinear a ojo
b)
Proveer significado, SEO y accesibilidad
c)
Ajustar interlineado
d)
Sustituir la rejilla por tablas
34.
Desalinear jerarquía visual y semántica suele provocar…
a)
Mejor SEO
b)
Confusión en usuarios y lectores de pantalla
c)
Lectura más rápida
d)
CSS más simple
35.
Arquitectura de acciones en pantalla (recomendado):
a)
Varias primarias equivalentes
b)
Una primaria clara + 1–2 secundarias + terciarias puntuales
c)
Eliminar terciarias por sistema
d)
Igualar todas para neutralidad
36.
Tratamiento visual adecuado para un botón primario:
a)
Solo contorno (outline)
b)
Enlace de texto
c)
Fondo sólido y alto contraste
d)
Mismo color que el fondo
37.
Tratamiento habitual para botones secundarios:
a)
Mismo estilo que el primario
b)
Más llamativos que el primario
c)
Siempre más grandes
d)
Outline con menor contraste y jerarquía
38.
En general, las acciones destructivas deben…
a)
Ser primarias en cualquier contexto
b)
Ser secundarias/terciarias salvo cuando el objetivo es destruir
c)
Diseñarse siempre rojas y enormes
d)
Situarse a la izquierda por convención
39.
Configuración de rejilla habitual en productos web generalistas:
a)
5 columnas en desktop
b)
12 en desktop y ~8 en móvil/app sencilla
c)
24 en móvil
d)
3 fijas para todo
40.
Tamaños base seguros para legibilidad:
a)
Cuerpo <12 px en desktop
b)
Cuerpo 14–16 px en desktop y ≥16 px en móvil
c)
Titulares ≤18 px
d)
Metadatos ≥20 px
41.
Interlineado recomendado para párrafos de lectura continuada:
a)
90–100% del tamaño
b)
120–150% del tamaño
c)
160–200% del tamaño
d)
Fijo a 1.0
42.
Longitud de línea confortable en lectura corrida:
a)
20–35 caracteres
b)
50–75 caracteres
c)
90–110 caracteres
d)
130–150 caracteres
43.
En alfabetos latinos, la alineación de párrafo con mayor legibilidad suele ser:
a)
Centrada
b)
Derecha
c)
Justificada sin control de ríos
d)
Izquierda
44.
La justificación sin control de guiones tiende a…
a)
Evitar ríos de espacios
b)
Formar ríos de espacios si no se controla
c)
Ser preferible en móvil
d)
Rendir igual que la izquierda
45.
Para legibilidad global en una app de lectura, el contraste debería…
a)
Ser alto en textos largos
b)
Ser bajo para títulos
c)
Ser bajo en lo importante
d)
No considerarse en accesibilidad
46.
El skeuomorfismo se caracteriza por…
a)
Formas planas sin efectos
b)
Recrear materiales/relieves del mundo físico
c)
Eliminar metáforas visuales
d)
Priorizar 3D en tiempo real
47.
El flat design se define por…
a)
Texturas realistas y profundidad simulada
b)
Eliminar efectos tridimensionales y texturas
c)
Imitar leyes físicas
d)
Reflejos y brillos metálicos
48.
El neumorfismo se describe como…
a)
Realismo material clásico
b)
Uso exclusivo de primarios
c)
Rechazo de efectos de luz
d)
Minimalismo plano con sombras suaves/relieves sutiles
49.
Una sombra proyectada (drop shadow) suele indicar…
a)
Elemento hundido respecto al plano
b)
Elemento por encima del fondo
c)
Desaparición de jerarquías
d)
Brillo lateral
50.
Una sombra interna (inset) sugiere…
a)
Botón flotante
b)
Hueco o pulsador hundido
c)
Elevación extrema
d)
Plano sin profundidad
51.
El uso de sombras dobles sutiles es típico de…
a)
Skeuomorfismo hiperrealista únicamente
b)
Neumorfismo con relieve discreto
c)
Flat estricto
d)
UI tipográfica pura
52.
Brillos y degradados, bien usados, ayudan a…
a)
Simular incidencia de luz y tactilidad
b)
Reducir tamaño de fuente
c)
Sustituir jerarquías
d)
Eliminar contraste
53.
Una imagen comunicativa en producto digital…
a)
Debe sustituir al texto
b)
Aporta información clave útil al objetivo
c)
Es inadecuada en cabeceras
d)
No debe usarse en e-commerce
54.
Para coherencia de catálogo de imágenes conviene…
a)
Mezclar estilos sin criterio
b)
Mantener una línea visual consistente con la marca
c)
Elegir stock aleatorio
d)
Cambiar filtros por página
55.
Asignación de formato más adecuada hoy: No ENTRA
a)
JPG para transparencias complejas
b)
PNG para fotos con mucho color
c)
WebP/AVIF para compresión eficiente con calidad
d)
SVG para fotos con ruido
56.
El lazy loading se usa para…
a)
Precargar todos los recursos
b)
Diferir la carga hasta que el recurso sea visible o cercano
c)
Incrementar el TTFB
d)
Forzar carga del viewport completo
57.
En 'Componentes UI básicos' no debería faltar…
a)
Botones con estados, formularios, tarjetas y navegación
b)
Solo botones primarios
c)
Checklists legales
d)
Patrones de deploy
58.
Set mínimo recomendable de estados de botón:
a)
Solo normal y hover
b)
Normal, hover, activo y deshabilitado
c)
Únicamente activo
d)
Solo deshabilitado
59.
'Espaciados/Rejillas/Layout' debería definir…
a)
Solo breakpoints
b)
Márgenes/paddings, columnas y reglas de alineación
c)
Solo márgenes verticales
d)
Nada de composición
60.
En 'Iconografía/Imágenes' conviene incluir…
a)
Estilo, tamaños y reglas para foto/ilustración
b)
Iconos en cualquier tamaño
c)
Solo iconos raster
d)
Prohibir ilustraciones
61.
Un design system maduro suele…
a)
Limitarse a colores y tipografías
b)
Sustituir HTML semántico
c)
Omitir documentación de estados
d)
Integrar patrones y componentes reutilizables
62.
La relación entre jerarquía visual y semántica debería ser…
a)
Independiente para flexibilidad
b)
Coherente para claridad y accesibilidad
c)
Contradictoria para sorprender
d)
Irrelevante para SEO
63.
Si el H1 semántico es más pequeño que un subtítulo visual, el riesgo es…
a)
Inexistente
b)
Confusión para usuarios y tecnología asistiva
c)
Mejor SEO
d)
Lectura más veloz
64.
Sustituir etiquetas por iconos mejora cuando…
a)
El icono es ambiguo
b)
Se mantiene la claridad y se gana limpieza
c)
Se busca densidad textual
d)
Falta paleta definida
65.
En paneles con cifras similares, las etiquetas…
a)
Deben eliminarse
b)
Deben apoyar si hay ambigüedad, con menor peso
c)
Deben igualar el peso del dato
d)
Deben ir en complementario saturado
66.
Número adecuado de acciones primarias por pantalla:
a)
Varias primarias para libertad
b)
Una primaria clara
c)
Ninguna para evitar sesgos
d)
Primarias en outline
67.
En un diálogo cuya tarea principal es eliminar, lo correcto es…
a)
Mantener 'Eliminar' como terciaria
b)
Tratar 'Eliminar' como primaria
c)
Ocultarla por defecto
d)
Igualarla a 'Cancelar'
68.
Para 'Guardar borrador' frente a 'Publicar', el botón debería…
a)
Competir en contraste con el primario
b)
Ser outline con menor contraste
c)
Ser más grande que el primario
d)
Usar fondo más saturado
69.
En móvil, una pauta fiable de tamaño de cuerpo es…
a)
12 px es suficiente
b)
Mínimo recomendado de 16 px
c)
Interlineado al 100%
d)
>90 caracteres por línea
70.
Para bajar jerarquía de metadatos (fecha/autor) conviene…
a)
Aumentar tamaño y saturación
b)
Justificar y alinear derecha
c)
Subrayar con trazo grueso
d)
Usar gris suave o menor peso
71.
Una longitud de línea <35 caracteres en textos corridos suele…
a)
Ser óptima universalmente
b)
Fragmentar el ritmo de lectura
c)
Mejorar seguimiento horizontal
d)
Ser ideal en todos los idiomas
72.
La justificación en web sin control de guiones tiende a…
a)
Evitar ríos
b)
Formar ríos de espacios
c)
Ser preferible en móvil
d)
Igualar la alineación izquierda
73.
En dashboards densos, un compromiso razonable es…
a)
Aumentar espacios aunque se pierda información
b)
Compactar algo manteniendo legibilidad esencial
c)
Evitar rejillas
d)
Usar decorativas para ahorrar ancho
74.
Elegir entre 500 y 510 px para un ancho clave…
a)
Introduce un salto perceptivo claro
b)
Suele ser irrelevante; mejor usar escalas coherentes
c)
Exige siempre 510 px
d)
Debe someterse a votación
75.
¿Cuál de las siguientes NO es un error frecuente?
a)
Abusar de fuentes distintas
b)
Ignorar interlineado
c)
Emplear decorativas en párrafos
d)
Asegurar contraste suficiente
76.
Un color vivo sobre fondo neutro suele…
a)
Reducir importancia percibida
b)
Aumentar importancia percibida
c)
No afectar jerarquía
d)
Exigir cursivas
77.
Para marcar jerarquía sin cambiar tamaños, el peso tipográfico…
a)
No afecta la percepción
b)
Puede reemplazar parcialmente el tamaño
c)
Debe permanecer constante
d)
Es irrelevante en móviles
78.
Un elemento rodeado de espacio negativo suficiente…
a)
Pasa desapercibido
b)
Atrae atención por aislamiento
c)
Rompe la semántica
d)
Requiere sombra interna
79.
Formato más adecuado para logotipos e iconos escalables:
a)
JPG
b)
PNG
c)
SVG
d)
GIF
80.
Formato típico para fotografías con mucho color en web:
a)
JPG
b)
SVG
c)
ICO
d)
PNG
81.
Sobre WebP/AVIF en producción moderna:
a)
Obsoletos frente a JPG
b)
Mejor compresión manteniendo calidad
c)
Sin soporte de transparencia nunca
d)
Exclusivos de impresión
82.
Una guía de estilos bien aplicada debería aportar…
a)
Solo coherencia cromática
b)
Identidad, eficiencia y escalabilidad
c)
Sustituir documentación de componentes
d)
Eliminar versionado
83.
Definir ~4–5 valores de marca claros y accionables permite…
a)
Cubrir menos matices pero dar foco útil
b)
Evitar condicionantes en UI
c)
Basarse solo en métricas
d)
Duplicar la cantidad para detalle
84.
En el catálogo de componentes, una 'card' debería…
a)
Ignorar estados hover/focus
b)
Definir estructura, estilo y comportamiento por estados
c)
Forzar sombras internas siempre
d)
Evitar variaciones de densidad
85.
Para estados de formulario (éxito/error), conviene…
a)
Usar solo color
b)
Combinar color, icono y mensaje breve
c)
Usar solo iconos
d)
Retrasar señales hasta el envío
86.
En un sistema de espaciado robusto, es preferible…
a)
Incrementos de 1–2 px entre niveles
b)
Saltos perceptibles (~20–25%) entre escalones clave
c)
Variar libremente por módulo
d)
Usar múltiplos de 7 px
87.
Si un H2 visual supera al H1 semántico en tamaño…
a)
No impacta la accesibilidad
b)
Puede generar confusión y lectura errática
c)
Mejora el SEO
d)
Acelera el escaneo
88.
Para distinguir acciones primarias y peligrosas, el color del CTA debería…
a)
Ser idéntico para consistencia total
b)
Contrastar con el destructivo y el fondo
c)
Coincidir con el texto del párrafo
d)
Usar tonos pastel siempre
89.
En menús de navegación, la claridad mejora con…
a)
Nombres creativos no literales
b)
Nomenclatura orientada a intención del usuario
c)
Orden aleatorio
d)
Exceso de niveles anidados
90.
El estado 'deshabilitado' de un botón debe…
a)
Ser indistinguible del normal
b)
Mantener legibilidad sin invitar a la acción
c)
Parecer operativo
d)
Tener la misma jerarquía que el primario
91.
En tarjetas con imagen y texto, para priorizar contenido…
a)
Hacer competir la imagen con el título
b)
Dar jerarquía al título y atenuar metadatos
c)
Reducir contraste del título
d)
Justificar texto por densidad
92.
Para distinguir enlaces en texto largo sin perder claridad…
a)
Color con bajo contraste
b)
Color con buen contraste y, preferible, subrayado
c)
Mismo color que el cuerpo
d)
Versalitas constantes
93.
¿Cuál es la mejor práctica para el uso de colores en una interfaz de usuario?
a)
Usar una paleta de colores limitada
b)
Incluir todos los colores del espectro
c)
Evitar el uso de colores contrastantes
d)
Usar colores brillantes en todos los elementos
94.
En diseño responsivo, ¿qué aspecto es crucial para la usabilidad en dispositivos móviles?
a)
Tamaños de fuente fijos
b)
Interacciones táctiles adecuadas
c)
Imágenes de alta resolución
d)
Diseño de una sola columna
95.
¿Qué efecto tiene un espaciado adecuado entre elementos en una interfaz?
a)
No tiene impacto en la experiencia del usuario
b)
Mejora la claridad y la jerarquía
c)
Aumenta la confusión visual
d)
Reduce la legibilidad
100 %
