--- id: 671a892927fdba60db05edfe title: Revisão dos Fundamentos de Design challengeType: 31 dashedName: review-design-fundamentals --- # --description--

Terminologia de Design

• Layout: É assim que os elementos visuais são organizados em uma página ou tela para comunicar uma mensagem. Esses elementos podem incluir texto, imagens e espaço em branco.
• Alinhamento: É assim que os elementos são posicionados em relação uns aos outros. Usar o alinhamento corretamente é útil para fazer o design parecer limpo e organizado.
• Composição: Este é o ato de organizar elementos para criar um design harmonioso. Ele determina como elementos como imagens, texto e formas se relacionam entre si e contribuem para o design de uma maneira artística.
• Balance: É assim que o peso visual é distribuído dentro de uma composição. Designers buscam criar um equilíbrio por meio de arranjos simétricos ou assimétricos.
• Escala: Isso se refere a comparar as dimensões ou o tamanho de um elemento com o de outro.
• Hierarquia: Isso estabelece a ordem de importância dos elementos em um design. Trata-se de garantir que a informação mais importante seja notada primeiro.
• Contrast: This is the process of creating clear distinctions between the elements. Você pode fazer isso por meio de variações em cor, tamanho, forma, textura ou qualquer outra característica visual. Um forte contraste também é útil para melhorar a legibilidade.
• Espaço em branco (espaço negativo): Este é o espaço vazio em um design. É a área que envolve os elementos.
• UI (User Interface): UI inclui os elementos visuais e interativos que os usuários podem ver em suas telas, como ícones, imagens, texto, menus, links e botões.
• UX (User Experience): UX é sobre como os usuários se sentem ao usar um produto ou serviço. Um aplicativo com uma experiência do usuário bem projetada é intuitivo, fácil de usar, eficiente, acessível e agradável.
• Resumo do Projeto: Este é um documento que descreve os objetivos, metas e requisitos de um projeto. É um roteiro que orienta o processo de design e garante que o produto final atenda às necessidades do cliente.
• Design Baseado em Vetores: Isso envolve criar arte digital usando fórmulas matemáticas para definir linhas, formas e cores.
• Prototipagem: Isso se refere ao processo de criar um modelo interativo de um produto ou interface do usuário.

Fundamentos do Design de UI

• Bom Contraste para Cores de Fundo e Primeiro Plano: É importante garantir que as cores de fundo e primeiro plano tenham bom contraste para tornar o texto legível. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) recomendam uma razão mínima de contraste de 4.5:1 para texto normal e 3:1 para texto grande.
• Boa Hierarquia Visual no Design: Uma hierarquia visual forte pode fornecer um caminho claro para o olho seguir, garantindo que a informação que você transmite seja consumida na ordem que você pretende.
• Imagens Responsivas: Imagens responsivas são imagens que se ajustam para caber no tamanho da tela em que estão sendo visualizadas. Isso é importante porque garante que suas imagens fiquem boas em todos os dispositivos, de desktops a telefones móveis.
• Aprimoramento Progressivo: Esta é uma abordagem de design que garante que todos os usuários, independentemente do navegador ou dispositivo, possam acessar o conteúdo essencial e a funcionalidade de uma aplicação.
• Design centrado no usuário: Esta é uma abordagem que prioriza o usuário final, desde suas necessidades até suas preferências e limitações. O objetivo do design centrado no usuário é criar uma página web que seja intuitiva, eficiente de usar e agradável para seus usuários interagirem.
• Pesquisa de Usuário: Este é o estudo sistemático das pessoas que usam seu produto. O objetivo é medir as necessidades, comportamentos e pontos problemáticos dos usuários.
• Entrevistas de Saída: Esta é uma pesquisa que você pode aplicar aos usuários quando eles cancelam suas contas. Ela pode ajudar você a entender por que os usuários estão saindo e o que você pode fazer para reduzir o churn.
• Teste de Usuário: Isso se refere à prática de capturar dados dos usuários enquanto eles interagem com sua aplicação.
• A/B Testing: Este é o processo de lançar uma nova funcionalidade para um subconjunto selecionado aleatoriamente da sua base de usuários. Você pode então usar dados analíticos para determinar se a funcionalidade é benéfica.
• Requisitos do Usuário: Isso se refere às histórias ou critérios que sua aplicação precisa seguir. Os requisitos do usuário podem ser definidos por pesquisa com usuários ou padrões da indústria. Eles podem até ser definidos pela contribuição das partes interessadas.
• Divulgação Progressiva: Este é um padrão de design usado para mostrar aos usuários apenas o conteúdo relevante com base em sua atividade atual e ocultar o restante. Isso é feito para reduzir a carga cognitiva e tornar a experiência do usuário mais intuitiva.
• Registro Adiado/Preguiçoso: Este é um padrão de design de interface que permite aos usuários navegar e interagir com sua aplicação sem precisar se registrar.

Melhores Práticas de Design

• Modo Escuro: Esta é uma funcionalidade especial em aplicações web onde você pode alterar o esquema de cores claro padrão para um esquema de cores escuro. Você deve usar cores dessaturadas no modo escuro. Cores dessaturadas são cores que são menos intensas e têm um nível de saturação mais baixo.
• Breadcrumbs: Este é um recurso de navegação que mostra ao usuário onde ele está na hierarquia do site. É melhor colocar os breadcrumbs no topo da página para que os usuários possam encontrá-los facilmente. Além disso, você deve garantir que os breadcrumbs sejam grandes o suficiente para serem facilmente lidos, mas não tão grandes a ponto de ocuparem muito espaço na página.
• Componente Card: Seu componente card deve ser simples no design, não visualmente poluído nem exibir muita informação. Para mídia, certifique-se de escolher imagens e vídeos de alta qualidade para melhorar a experiência do usuário.
• Infinite Scroll: Este é um padrão de design que carrega mais conteúdo conforme o usuário rola a página para baixo. Você deve considerar usar um botão de carregar mais porque ele dá ao usuário o controle sobre quando eles querem ver mais conteúdo. Você também pode adicionar um botão de voltar para que os usuários tenham a capacidade de retornar à página anterior sem precisar rolar toda a página para cima.
• Modal Dialog: Este é um tipo de pop-up que será exibido sobre o conteúdo existente da página. Normalmente o conteúdo de fundo terá uma sobreposição de cor escura para ajudar o usuário a focar melhor no conteúdo do modal. Além disso, é sempre uma boa ideia permitir que o usuário clique fora do modal para fechá-lo. Quando você usa o elemento HTML dialog, você terá muitas das funcionalidades e benefícios de acessibilidade incorporados.
• Indicação de Progresso para Registro de Formulário: Esta é uma forma de mostrar aos usuários o quão avançados eles estão em um processo. Pode ser usado em formulários, registros e processos de configuração. Seu design deve ser simples, fácil de encontrar e possibilitar o retorno aos passos anteriores.
• Carrinho de Compras: Carrinhos são um local para o usuário ver quais itens ele já selecionou em uma plataforma de comércio eletrônico. Seus carrinhos devem estar sempre visíveis para o usuário, usar um ícone comum como um carrinho, bolsa ou cesta, e ter um botão de chamada para ação claro para os usuários prosseguirem para o checkout.

Ferramentas Comuns de Design

• Figma: Esta ferramenta baseada na nuvem é especializada em design de Interface do Usuário e Experiência do Usuário (UI / UX). Ela permite que equipes de design e desenvolvimento colaborem de qualquer lugar, oferecendo recursos integrados incluindo design baseado em vetor, layout automático, um sistema de comentários e feedback e mais.
• Sketch: Esta é uma ferramenta de design popular usada por sua interface intuitiva e simplicidade, tornando-a ideal para desenvolvedores que querem criar protótipos rapidamente. Também é amplamente usada por designers para tarefas como criar UIs, ícones e layouts web.
• Adobe XD: Esta é uma ferramenta de design e prototipagem baseada em vetor para design de UI/UX, conhecida por sua integração perfeita com outros aplicativos Adobe como Photoshop, Illustrator e After Effects.
• Canva: Esta ferramenta permite que você crie uma ampla variedade de conteúdo visual, incluindo cartazes, fotos de capa, apresentações, vídeos curtos e mais. Seu design simples e fácil de usar a torna ideal para iniciantes.

# --assignment-- Revise os tópicos e conceitos dos Fundamentos de Design.