Ficha 02 · Plataformas, UI e workflow
- Adaptar por plataforma
- Exportar assets UI
- Definir workflow
- Aplicar acessibilidade
Parte I · Plataformas
Exercício 1 · Proporção (15 pts)
Indica a proporção/dimensão adequada:
a) Story de Instagram. ___
b) Thumbnail de YouTube. ___
c) Imagem de pré-visualização de link partilhado (Open Graph). ___
a) 9:16 (vertical) — ~1080×1920. b) 16:9 — 1280×720. c) 1200×630 (Open Graph standard).
Exercício 2 · Safe area (10 pts)
O que é a "safe area" numa imagem para redes sociais e porque deves respeitá-la?
É a zona "segura" da imagem onde o conteúdo importante (texto, rostos, logótipo) não é cortado nem tapado pela interface da plataforma (botões, nome de utilizador, barra de progresso de stories). Colocar elementos críticos fora dela faz com que apareçam cortados ou ilegíveis em diferentes dispositivos/plataformas.
Parte II · Assets UI
Exercício 3 · Densidades (15 pts)
a) Porque é preciso exportar @1x, @2x, @3x para uma app? (8 pts)
b) Quando é melhor usar SVG em vez destas variantes? (7 pts)
a) Os dispositivos têm densidades de ecrã diferentes (HiDPI/Retina têm mais pixéis físicos por ponto). Um asset "1×" fica desfocado num ecrã 2×/3×. Exportar @2x/@3x garante nitidez em cada densidade.
b) Quando o gráfico é vetorial (ícones, logótipos, formas simples): o SVG escala perfeitamente para qualquer densidade/tamanho, é leve e dispensa múltiplas variantes. Para fotografias (raster) o SVG não serve → usar os múltiplos bitmaps.
Exercício 4 · Nomenclatura (10 pts)
Critica e melhora estes nomes de assets exportados:
Sem título-1.png, final2 (cópia).jpg, IMG_3921.png
Problemas: não descrevem o conteúdo, têm espaços/parêntesis/acentos, não indicam densidade nem uso → impossível manter e propenso a erros.
Melhor (descritivo, sem espaços, com escala/uso):
- icon-cart@2x.png
- hero-home-mobile.webp
- logo-aulify.svg
Convenção consistente: tipo-contexto[-variante][@escala].ext.
Parte III · Workflow
Exercício 5 · Fluxo (15 pts)
Ordena o workflow de produção de assets (1 a 6):
- ___ Otimizar/comprimir
- ___ Preservar o mestre em alta qualidade
- ___ Exportar versão por destino
- ___ Testar em ecrã real e medir peso
- ___ Definir destinos e requisitos
- ___ Organizar e nomear
- Preservar o mestre em alta qualidade
- Definir destinos e requisitos
- Exportar versão por destino
- Otimizar/comprimir
- Testar em ecrã real e medir peso
- Organizar e nomear
Exercício 6 · Medir (10 pts)
Que ferramenta usarias para verificar o peso real de uma imagem transferida numa página e como?
As DevTools do browser → separador Network: recarregar a página, filtrar por Img, e ver o tamanho transferido de cada imagem (e o tempo). Também mostra se a imagem é maior do que o necessário (comparar tamanho do ficheiro vs dimensão exibida). Lighthouse/PageSpeed dão recomendações automáticas.
Parte IV · Cenário
Exercício 7 · Produzir para vários destinos (25 pts)
Tens uma fotografia mestre (6000×4000 px, TIFF). Tens de a entregar para: (a) banner do site (1600 px largura, HiDPI), (b) post quadrado de Instagram, (c) thumbnail e (d) anexo leve de email.
Descreve o que produzes para cada (formato, dimensão, cuidados).
Sempre a partir do mestre TIFF (não recomprimir versões já comprimidas), converter para sRGB, remover metadados.
a) Banner do site: WebP/JPEG, ~1600 px (e versão 2× ~3200 px via srcset), qualidade ~80%, comprimido. Definir width/height + loading.
b) Post Instagram quadrado: recortar a 1:1, exportar 1080×1080, JPEG/qualidade alta (a plataforma recomprime), elementos importantes na safe area.
c) Thumbnail: 16:9 → 1280×720 (ou menor conforme uso), JPEG/WebP otimizado, foco claro/legível em pequeno.
d) Email: largura fixa (ex.: 600 px), JPEG ~70%, muito leve (≤ ~100 KB), formato amplamente suportado (JPEG/PNG, não AVIF).
Organizar em pastas por destino, nomes descritivos; guardar o mestre.