Brave
Cross

O intervaloentre ver e entender

Ofício17 min de leitura

15 sites de empresas de Minas Gerais para estudar design (e como analisar cada um offline)

Quinze sites de empresas e instituições com sede em Minas, abertos em outubro de 2026: o que cada um ensina de estrutura, tipografia e conversão, e o método para estudar cada um offline.

17 min · Brave Cross
Neste texto

Os sites de empresas de Minas Gerais que mais ensinam design em 2026 são os que resolvem uma tarefa na primeira dobra: Localiza, Inter, Hotmart, Sympla, Blip, Inhotim, UFMG, PUC Minas, Unimontes, Mater Dei, Unimed-BH, Cooxupé, Cemig, Usiminas e Algar. Abrimos cada um em outubro de 2026 e anotamos o que vale copiar no nível, nunca no site.

Por que estudar sites de empresas de Minas Gerais, e não só os premiados de fora?

Porque eles vendem num mercado que você conhece, com as restrições reais de quem opera aqui: conselho profissional, cooperado que precisa de portal, agência que precisa de reserva, universidade que atende cinco públicos de uma vez. Um site premiado em Amsterdã ensina movimento e tipografia. Um site de Guaxupé ensina a colocar a cotação do café no menu porque o cooperado abre a página para isso.

O mercado sustenta sites de primeira linha. O PIB de Minas Gerais foi estimado em R$ 1,157 trilhão em 2025, 9,1% do PIB brasileiro, segundo a Fundação João Pinheiro, e já tinha passado de R$ 1 trilhão em 2023, conforme a mesma fundação. O estado tinha 20.539.989 habitantes no Censo 2022 do IBGE, 2.315.560 deles em Belo Horizonte. Empresas desse porte contratam design com orçamento, e o resultado fica público para quem quiser abrir o código.

Os critérios foram três: sede em Minas confirmada no próprio site (rodapé ou página de relações com investidores), nenhuma agência ou estúdio de design, e descrição de estrutura e código, não de gosto. É o mesmo olhar do nosso guia de 20 sites para estudar em 2026, aplicado ao estado que mapeamos em ecossistema de inovação de Minas.

R$ 1,157 tri

PIB de Minas Gerais em 2025, 9,1% do PIB brasileiro

Fundação João Pinheiro, 2026

20,5 milhões

habitantes em Minas Gerais no Censo 2022

IBGE, 2022

52 mil

estudantes da UFMG em todos os níveis de ensino

UFMG, 2026

22 mil

cooperados da Cooxupé, a cooperativa de café de Guaxupé

Cooxupé, 2026

O que os sites das grandes marcas mineiras ensinam: Localiza, Inter, Cemig, Usiminas e Algar

As grandes marcas ensinam a colocar a tarefa do visitante antes da história da empresa: em quatro dos cinco sites, a primeira dobra é um formulário, um botão único ou uma lista de serviços.

1. Localiza (Belo Horizonte): o formulário antes da história

A Localiza abre com o formulário de reserva: onde retirar, data e hora, onde devolver. Nenhum slogan. O título promete "a maior frota do Brasil" e a home organiza o que vem depois: Fast Retirada Digital, Portal do Cliente, grupos de carros, destinos. O CSS carrega uma fonte própria, LocalizaDinDisplay, com Inter e Open Sans, e o verde está no theme-color (#01602A). O rodapé lista agências por cidade, e cada praça vira página indexável. O que nós testaríamos: menos banners disputando com o formulário.

2. Inter (Belo Horizonte): um botão só

A home do Inter tem um H1 ("O Super App da sua vida financeira"), uma linha de apoio e um único botão, "Abrir sua conta", repetido ao longo da página. Conta PJ, conta global e Inter Shop são seções com link próprio, sem competir com a ação principal. O site é gerado com Gatsby 5.16.1 e usa Inter, Sora e a própria Citrina; o laranja está no theme-color (#EA7100). A página de relações com investidores lista o escritório da Avenida Barbacena, em Belo Horizonte. O que nós testaríamos: uma prova concreta no herói no lugar do slogan.

3. Cemig: autoatendimento em ordem de procura

A Cemig abre com barra de acessibilidade (recursos, Libras, contraste) e seletor PT/EN antes de qualquer conteúdo. O bloco "Serviços mais acessados" está em ordem de procura: segunda via, troca de titularidade, estou sem luz, religação. A bandeira tarifária do mês aparece como informação viva. É WordPress com VLibras. A empresa diz ter mais de 70 anos e quase 500 mil acionistas em 39 países. O que nós testaríamos: um serviço resolvido sem login, já que hoje todos levam ao Cemig Atende.

4. Usiminas (usina em Ipatinga): o site institucional que não vende

A home da Usiminas fala com comunidade, imprensa e candidatos, não com compradores de aço. O herói diz "Aço em dia com o futuro"; as chamadas da primeira dobra são a comunidade no WhatsApp de Ipatinga e o estágio de férias de 2027. A seção de meio ambiente traz números e as linhas de produto só aparecem no rodapé. Há PT/EN e WordPress. A lição é de priorização: quando o cliente compra por outro canal, a home serve a quem de fato a visita. O que nós testaríamos: uma ficha técnica de produto a um clique.

5. Algar (Uberlândia): a cidade antes da oferta

A Algar pergunta a cidade antes de mostrar preço. O seletor abre com Uberlândia como padrão e avisa quando só há produtos para empresas na cidade escolhida. Os segmentos (Você, Empresas, Governo, Atacado) trocam o menu inteiro, e "Monte seu pacote" junta fibra, celular e serviços digitais. O CSS carrega Montserrat, a cor está no theme-color (#28bea5) e o carrossel usa Swiper. O rodapé confirma o endereço na Rua José Alves Garcia, em Uberlândia. O que nós testaríamos: mostrar parte da oferta antes de exigir a escolha da cidade.

O que as empresas de tecnologia de Belo Horizonte ensinam: Hotmart, Sympla e Blip

As três ensinam prova: números no herói, listagens que viram páginas de busca e logos de clientes antes do argumento, todas com endereço em Belo Horizonte no rodapé.

6. Hotmart: prova numérica e preço na home

A Hotmart abre com "No lugar certo, você ganha mais desde o primeiro dia", um botão "Cadastre-se agora" e três números de prova logo abaixo. A tabela de taxas está na própria página inicial, e um FAQ de oito perguntas fecha o argumento. O seletor de idiomas cobre português, inglês, espanhol de cinco países e francês. Roda em Next.js e carrega duas fontes próprias, Hotmart Sans e Hotmart Display. O rodapé diz "Feito em Belo Horizonte" e traz o endereço da Avenida Assis Chateaubriand. O que nós testaríamos: a origem mineira mais perto do topo.

7. Sympla: a listagem como produto

A Sympla tem como título "Descubra o que fazer perto de você" e organiza a home em menus de cidades (Belo Horizonte primeiro) e de categorias, mais um bloco de "eventos mais comprados nas últimas 24h". Atende dois públicos sem se perder: quem compra ingresso e quem cria evento. É Next.js, e o rodapé mostra o endereço no Sion. A lição é de arquitetura: cada cidade e cada categoria é uma URL, e isso é o que o Google indexa. O que nós testaríamos: um campo de busca no herói, que não aparece no HTML servido.

8. Blip: a pilha de prova de um B2B

A Blip abre com "Conversas que geram resultado. Inteligência que não para de aprender." e, acima, um banner com contagem regressiva para o evento Blip ID 2026. A ordem das seções é uma aula de prova B2B: 22 logos de clientes, demonstrações animadas, cases nomeados, ISO 27001, selos e FAQ. É WordPress com Elementor, Lottie nas animações e a fonte Carbona via Adobe Fonts: a ferramenta não define o nível. O rodapé lista a Rua Sergipe, na Savassi, e outro endereço em São Paulo. O que nós testaríamos: um CTA principal só, porque ingresso, demonstração e plataforma disputam o herói.

O que universidades e cultura ensinam: UFMG, PUC Minas, Unimontes e Inhotim

Instituições ensinam navegação para vários públicos e serviço como conteúdo (horário, calendário, campus, acessibilidade), e por isso são as mais úteis para quem faz site de escola, clínica ou cooperativa.

9. UFMG: dois menus, um por público e outro por tema

A UFMG resolve o problema clássico de universidade com dois modelos de navegação ao mesmo tempo: uma barra "Informações para" (Candidatos, Estudantes, Servidores, Sociedade, Imprensa) e um menu por tema (A Universidade, Cursos, Pesquisa e Inovação, Extensão, Cultura). Uma linha de acessos rápidos atende quem já sabe o que quer. A página de números fala em mais de 52 mil estudantes e três campi, Pampulha, Saúde e Montes Claros. É WordPress com a fonte Lexend, desenhada para leitura. O que nós testaríamos: um campo de busca visível.

10. PUC Minas: a matrícula manda

O portal da PUC Minas coloca "Inscreva-se" e o Processo Seletivo 2027 acima de tudo, com uma barra de acesso por público (Aluno, Professor, Funcionário). A grade "Escolha a PUC Minas mais perto de você" lista os campi, de Barreiro a Serro, e transforma a escolha de unidade em passo de conversão. Por baixo, os caminhos /_layouts/15/ indicam SharePoint, uma plataforma corporativa que limita desempenho e HTML. A lição: a prioridade da página está certa mesmo numa plataforma difícil. O que nós testaríamos: texto alternativo nas imagens, vazio em muitas.

11. Unimontes (Montes Claros): acessibilidade na primeira linha

A Unimontes, universidade estadual com sede em Montes Claros, abre com VLibras, contraste, tamanho de fonte e idioma antes do logotipo. Os menus se dividem por público (Aluno, Professor, Servidor, Cidadão, Fornecedor) e "Nossos campi" lista doze unidades além da sede, de Almenara a Unaí, passando por Janaúba, Januária, Pirapora e Salinas: o alcance regional vira conteúdo. A fonte é Open Sans. Para quem está no Norte de Minas, é a referência mais próxima de site com público disperso por centenas de quilômetros. O que nós testaríamos: um H1 só, porque a página marca três.

12. Inhotim (Brumadinho): horário, mapa e ingresso

O Inhotim mantém o botão de ingresso fixo no topo, com venda pela Sympla, e abre com um vídeo manifesto e a marca dos 20 anos. O que ensina está nos serviços: um painel "Hoje" com horário de 9h30 às 16h30 e as áreas em manutenção, um mapa interativo com filtros por artista, galeria e destaque botânico, e um aviso de fechamento no dia da eleição em destaque. Há PT/EN, VLibras e banner de cookies com rejeição. É WordPress com tema próprio. A lição: para um lugar que se visita, informação de serviço é a primeira dobra. O que nós testaríamos: as fotos sem o placeholder transparente que a captura mostrou.

O que saúde e cooperativas ensinam: Mater Dei, Unimed-BH e Cooxupé

Os três últimos ensinam a separar públicos e a dar tarefa a quem já é cliente, lições diretas para o site de uma clínica em Belo Horizonte ou o site de uma cooperativa em Minas.

13. Rede Mater Dei: tarefas em azulejos

A Rede Mater Dei abre com um seletor de unidade e uma linha de azulejos de tarefa: transferência hospitalar, agendar consulta e exame, resultado de exames, fila virtual do pronto-socorro. O telefone aparece por unidade, de Belo Horizonte a Salvador. Só depois vêm os banners de excelência clínica e acreditação. Roda em Next.js com a fonte Barlow, e o endereço do rodapé é no Santo Agostinho. A lição para clínicas menores: o paciente que volta quer resolver algo, e a home precisa oferecer isso antes de se apresentar. O que nós testaríamos: um botão de WhatsApp e um H1 explícito, ausentes no HTML.

14. Unimed-BH: cliente e cooperado no mesmo site

A Unimed-BH separa os públicos em abas no topo: Sou Cliente, Quero ser Cliente, Cooperado, Colaborador, Parceiros. O cabeçalho traz "Contrate on-line", WhatsApp e telefone; o acesso rápido oferece guia médico, segunda via do boleto e resultado de exames. Os números de IDSS 2025 ficam na home. Há link de Libras e skip link. É Drupal com a fonte Roboto. A lição para cooperativas: cooperado e cliente entram pela mesma porta e precisam de caminhos distintos desde o primeiro clique. O que nós testaríamos: um carrossel mais curto, que hoje passa de dez banners.

15. Cooxupé (Guaxupé): transparência no menu

A Cooxupé, cooperativa de cafeicultores fundada em 1932, com mais de 22 mil cooperados e café de mais de 360 municípios, coloca no menu o que a lei e o cooperado pedem: estatuto em português e inglês, código de conduta, demonstrações financeiras e relatório de transparência salarial. Um pop-up anuncia o novo Portal do Cooperado e mantém o link para o antigo, uma transição bem feita. Cotações, preço histórico do café e meteorologia aparecem como serviço. É WordPress com Montserrat e Open Sans. O que nós testaríamos: um carrossel mais curto, que dilui o que importa.

GrupoSitesTecnologia lida no HTMLFonte principal no CSS
Next.jsHotmart, Sympla, Mater DeiReact com geração no servidorHotmart Sans e Display; Barlow
WordPressBlip, Inhotim, UFMG, Usiminas, Cemig, CooxupéTema próprio ou Elementor; VLibras em doisCarbona; Lexend; Montserrat
GatsbyInterSite estático geradoInter, Sora e Citrina
DrupalUnimed-BHCMS com tema próprioRoboto
SharePointPUC MinasPortal corporativonão identificada
PróprioLocaliza, Algar, UnimontesFront próprio com Swiper nos dois primeirosLocalizaDinDisplay; Montserrat; Open Sans

Fontes: HTML servido pelas páginas iniciais de Localiza, Inter, Hotmart, UFMG e dos demais sites linkados acima, consultadas em outubro de 2026.

Como estudar cada site com o Extrator, em cinco passos

O método é capturar o site inteiro, abrir offline, ler o design system gerado, comparar com o seu projeto e reconstruir um bloco do zero. Olhar a home por dez minutos ensina pouco; desmontar um site por uma tarde ensina o que o designer decidiu e por quê.

O Extrator de Sites, que é o nosso, faz a captura: uma extensão para Chrome, Brave e Edge que baixa a página com animações, fontes e 3D funcionando numa pasta local, e gera de brinde um design system em 15 seções (tipografia, cores, botões, componentes, animações, breakpoints, tokens) mais um tokens.css. O plano grátis dá 2 downloads por mês, sem cartão; o plano de lançamento custa R$ 297 no primeiro ano e depois R$ 497 por ano, com capturas ilimitadas e uso comercial, valores consultados em outubro de 2026. O modo Completo resolve a maioria da lista; para UFMG, Unimontes e PUC Minas, o modo Site inteiro segue os links do menu até dois níveis.

Onde ele não é a melhor escolha: não funciona em Safari nem em Firefox; não captura o que fica atrás de login, como o Portal do Cooperado da Cooxupé ou o Cemig Atende; e não serve para publicar o site de outra empresa como seu. Estudar estrutura, ritmo e sistema de cores é livre; texto, imagem e código têm dono, como explicamos em copiar site é crime?. O caminho manual está em como extrair cores, fontes e espaçamentos de um site e, para sites com scroll e WebGL, em como estudar um site do Awwwards por dentro.

01

Escolher a lição

defina o que vai estudar antes de abrir o site: formulário na primeira dobra, menu por público, prova social ou tipografia

02

Capturar

abra o site no Chrome, Brave ou Edge e baixe no modo Completo; nas universidades, use Site inteiro para seguir dois níveis de menu

03

Abrir offline

abra a pasta com dois cliques e confira se animação, fontes e carrossel funcionam sem internet

04

Ler o design system

leia as 15 seções geradas e o tokens.css: escala tipográfica, cores, botões, breakpoints

05

Comparar e reconstruir

coloque os tokens do site ao lado dos do seu projeto e refaça um bloco do zero com as suas decisões

Quem quer transformar esse estudo em ofício encontra no Método Brave Cross um módulo chamado "Copie o nível, não o site": identificar a decisão por trás do que se vê e reproduzir a decisão, não o layout.

Perguntas frequentes

Posso copiar o layout de um desses sites para o site do meu cliente?

Não. Estudar a estrutura, a hierarquia e o sistema de cores é livre; texto, imagens e código têm dono e são protegidos pela Lei 9.610. O caminho certo é reconstruir a decisão com os seus elementos: se a Localiza põe o formulário antes da história, o seu site de locação pode fazer o mesmo com o seu formulário.

O Extrator baixa sites feitos em Next.js e Gatsby, como Hotmart e Inter?

Sim. A captura acontece dentro do navegador, depois que o JavaScript montou a página, então o resultado inclui o que o React renderizou. O que não entra é o que exige login ou só carrega depois de uma interação. Ferramentas que leem só o HTML do servidor falham nesses sites, como mostramos em por que o HTTrack não baixa sites modernos.

Qual desses quinze sites é o mais rápido no celular?

Não medimos velocidade neste levantamento, só estrutura e código. Para comparar, rode cada URL no PageSpeed Insights e olhe LCP, INP e CLS no percentil 75, como explicamos em Core Web Vitals em 2026. Sites gerados estaticamente tendem a abrir mais rápido, mas carrosséis longos e vídeo no herói podem anular a vantagem.

Por que MRV, Méliuz e outras marcas conhecidas ficaram de fora?

Por critério, não por qualidade. O rodapé do site da Méliuz mostra endereço em São Bernardo do Campo, então a sede confirmada no site não é em Minas. A home da MRV só é montada pelo navegador (Adobe Experience Manager com React), e a captura sem navegador não trouxe conteúdo para descrever. Agências e estúdios ficaram de fora para não misturar estudo com concorrência.

Como confirmo que uma empresa tem sede em Minas Gerais?

Pelo rodapé do site, que costuma trazer razão social, CNPJ e endereço, e pela página de relações com investidores quando a empresa tem capital aberto. Quando o site lista dois endereços sem rotular a sede, como Blip e Inter, o texto diz "endereço em Belo Horizonte", não "sede".

Conclusão

Os quinze sites têm pouco em comum no visual e muito em comum na decisão: a tarefa do visitante vem antes da apresentação, os públicos entram por portas separadas e a prova aparece antes do argumento. É isso que vale copiar. A fonte, a cor e o framework de cada um estão na tabela para você conferir, não para repetir.

A diferença entre olhar e estudar está na captura: com o site inteiro numa pasta e o design system ao lado, dá para medir a escala tipográfica, contar os breakpoints e entender o ritmo das seções. Um site mineiro desmontado numa tarde ensina mais do que dez premiados rolados no celular.

Quer um site no nível dos melhores de Minas? Veja as soluções do estúdio

  • sites de empresas de minas gerais
  • sites para estudar design
  • minas gerais
  • belo horizonte
  • referências de design
  • extrator de sites

O que não cabe numa nota cabe numa conversa.

  1. Ofício

    Quanto cobra um freelancer de sites em Minas Gerais

    Em Minas, o mesmo site institucional é cobrado de R$ 1.500 a R$ 15.000.

    15 minLer
  2. Ofício

    Como criar sites para clientes no interior de Minas

    Minas tem 173 cidades entre 20 mil e 150 mil habitantes, 2,5 milhões de pequenos…

    16 minLer
  3. Ofício

    Tipografia para sites

    Fonte bonita não faz site premium; escala, entrelinha, comprimento de linha e peso dos…

    15 minLer