peterbamuhigire/premium-ui-ux-design

Design Premium de UI/UX

Reconhecimento: Compartilhado por Peter Bamuhigire, techguypeter.com, +256 784 464178.

Traduza a estratégia de site aprovada e as evidências de experiência em uma direção de UX premium distinta e implementável.

Quando Usar

• Um site de geração de leads, e-commerce, alto valor ou prova pública precisa de um portão de UX premium
• A direção visual deve estar conectada às restrições de implementação.

Não Usar Quando

• Use para doutrina visual geral, que pertence ao chwezi-design-engine, ou para implementação de tokens de propriedade do design-system.

Entradas Necessárias

| Artefato | Fonte ou provedor | Obrigatório? | Propósito | Se ausente | |---|---:|---|---| | Estratégia aprovada, mapa de experiência, hierarquia de conteúdo, evidências de marca, análise de referências e restrições técnicas | Skills upstream de site e doutrina de design externa | sim | Definir uma direção de experiência implementável | Pare quando a estratégia ou hierarquia de conteúdo estiver ausente |

Fluxo de Trabalho

1. Carregue a doutrina de design externa e valide a estratégia upstream
2. Escolha direção de hierarquia, interação, tipografia, estados e comportamento responsivo
3. Teste distintividade, acessibilidade, crescimento multilíngue e restrições de baixa largura de banda
4. Pare em um padrão proibido ou não suportado, repare a direção e entregue as decisões ao design-system e page-builder.

Saídas

Artefato	Consumidor	Condição de aceitação
Direção de UX premium e resumo de implementação	Design-system e page-builder	Nomeia a justificativa do tipo, hierarquia, componentes, estados, breakpoints, limites de movimento e riscos de qualidade

Evidências Produzidas

Evidência	Consumidor	Condição de aceitação
Registro de decisão e revisão	Design e proprietários de lançamento	Vincula cada escolha visual importante a evidências de marca, comportamento, acessibilidade ou desempenho

Contrato de Capacidade

Leitura, pesquisa e inspeção visual são necessárias. O planejamento é somente leitura por padrão; editar artefatos de design ou código requer autoridade de implementação. Licenciamento de ativos, publicação externa, gastos e mutação de produção requerem autoridade explícita.

Modo Degradado

Sem renderização, fontes, ativos ou doutrina externa, retorne a direção qualificada mais restrita, marque as verificações visuais como não avaliado e não certifique qualidade premium.

Regras de Decisão

Escolha	Ação	Falha ou risco evitado
A marca e o conteúdo justificam uma face de exibição distinta	Especifique-a com fallback de desempenho	Tipografia genérica padrão de IA
A interação não agrega valor à tarefa ou prejudica o uso 3G	Remova ou simplifique-a	Fricção decorativa

Padrões de Qualidade

• Declare a tipografia escolhida e sua razão antes da produção visual; cubra estados de erro, vazio, carregamento, foco e desabilitado; atenda às restrições de acessibilidade e desempenho na África.

Anti-Padrões

• Escolher Inter ou uma pilha de sistema básica como face primária. Correção: selecione uma face permitida que se ajuste à marca e documente o porquê.
• Usar um gradiente roxo como atalho premium. Correção: derive cor e contraste de evidências da marca.
• Projetar apenas a página inicial. Correção: defina padrões compartilhados para cada família de template.
• Ignorar estados não felizes. Correção: especifique comportamento de erro, vazio, carregamento, foco e desabilitado.
• Certificar qualidade sem renders. Correção: marque a avaliação visual como não avaliado e exija QA visual.

Exemplo Prático

Para uma empresa de consultoria em Kampala, escolha uma serifa editorial licenciada com base em seu posicionamento de autoridade, combine-a com uma sem compacta para utilidade móvel e teste ambas dentro do orçamento de fontes 3G antes da entrega.

Referências

• ux-strategy-differentiation-and-meaning.md — leia ao estruturar estratégia de UX, diferenciação e a regra de evidência sem teste sem lançamento.

• lean-design-cycle-and-deliverable-selection.md — leia ao escolher ciclos de design enxuto e o entregável certo.

• enterprise-internal-tools-and-portal-ux.md — leia ao projetar ferramentas internas ou portais de cliente.

• ai-feature-discovery-and-risk-framing.md — leia ao decidir se e como adicionar um recurso de IA.

• ai-interface-trust-and-control-spec.md — leia ao especificar confiança, controle e correção para interfaces de IA.

• ux-discovery-and-wireframe-procedure.md — leia ao executar descoberta de UX, grids de jornada, mapas de site e wireframes.

• Website Skills authoring standard

Orientações de Uso no Domínio Preservado

• Um site deve ter aparência premium o suficiente para justificar preços altos, confiança ou atenção comercial séria.
• Construção de sites de geração de leads, e-commerce, produtos, portfólio, marketing SaaS, hospitalidade, educação, saúde, organizações sem fins lucrativos ou empresariais.
• O site corre o risco de parecer genérico, padronizado, excessivamente decorado, lento, difícil de escanear ou visualmente barato.
• O site deve fazer a oferta do proprietário parecer mais valiosa, ao mesmo tempo que atua como prova do trabalho premium do desenvolvedor.

Entradas do Domínio Preservado

• Brief de estratégia do site, público-alvo, oferta, posicionamento de marca, inventário de conteúdo, fotos/ativos e meta de conversão.
• Qualquer sistema de design atual, capturas de tela, benchmarks de concorrentes e restrições de desempenho/acessibilidade.

Fluxo de Trabalho do Domínio Preservado

1. Defina o trabalho de negócios do site: confiança, conversão, suporte de vendas, aplicação, reserva, doação, educação de produto ou autoridade.
2. Escolha a voz visual que se adequa ao comprador e à oferta: operacional, editorial, minimalismo de luxo, polido para consumidor, institucional ou premium local.
3. Carregue premium-website-product quando o brief precisar de posicionamento premium, conteúdo, SEO, stack ou prova de agência antes do início da estilização.
4. Construa hierarquia a partir do caminho de conversão antes de estilizar seções.
5. Crie o sistema de design usando o playbook premium: princípios visuais, cor, tipo, espaçamento, imagens, movimento, gráficos/tabelas e polimento de produção.
6. Aplique o portão premium do site antes da produção de página e novamente após o QA visual.
7. Registre evidências no scorecard do projeto e no relatório de qualidade de design.

Orientações de Qualidade do Domínio Preservado

• O primeiro viewport imediatamente comunica marca/categoria, oferta, credibilidade e ação primária.
• O layout é responsivo, rápido, acessível e visualmente coerente nos templates primários.
• Imagens mostram o produto real, lugar, pessoa, prova, interface ou resultado sempre que disponível.
• Cor, tipografia, espaçamento e movimento são tokenizados e comercialmente apropriados.
• Formulários, preços, páginas de serviço, páginas de produto e fluxos de contato reduzem a ansiedade e tornam o próximo passo óbvio.
• Dados, depoimentos, estudos de caso, estatísticas e comparações são apresentados com hierarquia visual precisa e legível.
• Simplicidade é tratada como premium: navegação, formulários, blocos de copy, mudanças de estado e fluxos móveis removem o esforço do comprador sem esconder provas necessárias.
• Cada template primário pontua pelo menos 8/10 no portão premium de UI/UX e na rubrica de score de qualidade de design.

Anti-Padrões do Domínio Preservado

• Landing pages que parecem saída genérica de IA: gradientes vagos, fundos com blob, pilhas de cartões decorativos, fotos de stock fracas e afirmações não fundamentadas.
• Páginas bonitas que não explicam a oferta ou movem o usuário em direção a um resultado de negócio.
• Paletas de cores monotônicas, layouts móveis apertados, mídia de herói lenta e sobreposições inacessíveis.
• Usar novidade visual onde prova, clareza e confiança são necessárias.

Saídas do Domínio Preservado

• Brief de UX premium de site, direção visual, plano de tokens, notas de qualidade em nível de página, orientação de caminho de conversão ou relatório de portão.

Referências do Domínio Preservado

• references/premium-website-ui-ux-playbook.md - regras de design de site derivadas de livros.
• references/enterprise-website-ux-playbook.md - stakeholder de site empresarial, prova, navegação, confiança e regras de UX calibradas para África.
• references/mobile-dashboard-website-patterns.md - navegação móvel, orientação na primeira visita, apresentação de dashboard/prova e verificações de qualidade móvel.
• references/premium-website-gate.md - pontuação e bloqueio de defeitos.
• ../premium-website-product/references/premium-website-market-asset-gate.md - site como produto premium, conteúdo, SEO, lançamento, stack e portão de prova de agência.
• references/source-register.md - disposição de proveniência e portão de direitos; nenhum caminho de fonte ativo é afirmado.

Fundamentos de UX de Classe Mundial (derivados de livros)

Leitura obrigatória antes de iniciar um engajamento premium:

• references/levy-four-tenets.md — Estrutura de quatro princípios (Estratégia de Negócios + Inovação de Valor + Pesquisa de Usuário Validada + Design de UX Matador); Top-10 anti-padrões a rejeitar em briefs de clientes.
• references/enterprise-five-outcomes.md — Cinco resultados obrigatórios (Útil / Fácil / Eficiente / Agradável / Acessível) como portão de pré-lançamento. Um Não = sem lançamento.
• references/pm-collaboration-rules.md — Fekeshazi 5+1 (5-10 min para explicar, design como processo contínuo, etc.) e a regra "não esconda funções importantes em menus".

Se um brief falhar na verificação Top-10 de Levy ou omitir qualquer um dos 5 resultados, recue antes de escopar.