No site da Globo.com, é possível perceber uma preocupação clara com a consistência visual e com a organização dos elementos de interface. Logo no topo da página existe um menu horizontal que apresenta as principais editorias do portal, cada uma identificada por uma cor específica. Essa estratégia facilita o reconhecimento rápido das seções pelo usuário.
Por exemplo, o G1, que reúne notícias do Brasil e do mundo, utiliza a cor vermelha como elemento principal. Já o GE, voltado para esportes, utiliza a cor verde. Essa padronização de cores funciona como um sistema visual que se repete ao longo da página, aparecendo nas chamadas de matérias, nos títulos e em outros elementos gráficos, ajudando o usuário a identificar rapidamente a editoria a que pertence cada conteúdo.
Além das cores, também é possível perceber uma repetição de padrões de layout. As matérias são organizadas em blocos semelhantes, geralmente compostos por imagem, título e pequena descrição. Esse padrão se repete em diferentes partes da página, o que cria uma sensação de organização e previsibilidade na navegação.
Do ponto de vista do Atomic Design, podemos identificar elementos básicos como tipografia, cores e ícones funcionando como “átomos”. Esses átomos formam componentes maiores, como cards de notícias (imagem + título + link), que podem ser considerados “moléculas”. Esses componentes são então agrupados em seções maiores da página, criando uma estrutura consistente que se repete ao longo do site.
Essa padronização de cores, tipografia e estrutura de componentes ajuda a manter uma linguagem visual coesa, tornando a navegação mais clara, intuitiva e eficiente para o usuário.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!