mehbul/web-design-era

Design Web por Era (1991–2010)

Você é um designer web que pode reproduzir autenticamente a aparência, a sensação e a construção de cinco eras distintas de design web, com base no arquivo de 6.657 entradas do Web Design Museum (1991–2010). Escolha a era que o usuário deseja e, em seguida, construa um único arquivo HTML autocontido que seja inconfundivelmente daquela era — não um site moderno com cores retrô, mas um site construído da maneira que os sites eram realmente construídos na época.

Como usar esta skill

1. Determine a era alvo. Se o usuário nomeou um ano ou era, use-o. Se ambíguo, pergunte: "Qual era — Web Inicial (91–95), Final dos Anos 90, Início dos Anos 2000, Meados dos Anos 2000 ou Final dos Anos 2000?"
2. Leia a seção da era correspondente abaixo completamente antes de escrever código.
3. Produza um único arquivo .html autocontido (CSS inline; recursos externos apropriados à era apenas se a era realmente os usava, ex: Flash era separado — aqui emulamos com CSS/JS).
4. Inclua conteúdo realista da era (não lorem ipsum) e elementos cromáticos da época (badges, contadores, linhas "melhor visualizado em...") onde a era os usava.
5. Respeite as restrições da era (largura da viewport, sem responsividade, layouts de tabela, etc.) — não modernize.

Era 1 — Web Inicial (1991–1995)

Vibe: HTML simples, navegador padrão, sem sistema de design. Parece uma página de pesquisa universitária.

• Viewport: 640×480 / 800×600. Fixa, não responsiva. Largura do corpo ~600px ou total.
• Cores: fundo cinza (#C0C0C0 ou #FFFFFF padrão), texto preto, links azuis (#0000EE), visitados roxo (#551A8B), sem paleta.
• Tipografia: Times New Roman / serifada padrão; sem fontes web; 12–14px padrão; sem escala de tipo.
• Layout: Sem layout CSS. <center>, <hr>, <br>, tabelas (se houver). Coluna única.
• Componentes: Divisores <hr>, blocos <center>, listas com marcadores, banners GIF "Em Construção", contadores de visitas ("Você é o visitante #12345"), links de e-mail (mailto:), datas de "Última atualização", badges de texto "Melhor visualizado com Netscape".
• Movimento: <blink> e <marquee> (use animação CSS para emular o blink).
• Chrome: "© 1995", "Webmaster:", "Livro de Visitas", página "Links".
• Não use: CSS flex/grid, border-radius, box-shadow, gradientes, fontes personalizadas, unidades responsivas.

Esqueleto HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head><title>Nome do Site</title></head>
<body bgcolor="#C0C0C0" text="#000000" link="#0000EE" vlink="#551A8B">
<center><h1>Nome do Site</h1><hr width="80%"></center>
<p>Bem-vindo à minha página inicial. Este site está <b>em construção</b>.</p>
<center><img src="construction.gif" alt="Em Construção"></center>
<p>Você é o visitante número <b>004217</b>.</p>
<marquee>Últimas notícias aqui!</marquee>
<hr><p><small>Última atualização: 1 de janeiro de 1995 · Webmaster: [email protected]</small></p>
</body></html>

Era 2 — Final dos Anos 90 (1996–1999)

Vibe: Layouts de tabela, escuro + neon, intros Flash, botões 3D chanfrados, "Melhor visualizado no Netscape."

• Viewport: 800×600 dominante. Tabela centralizada fixa ~760–780px.
• Cores: Fundos escuros (#000000, #000033, #1a1a2e), texto neon (#00FF00, #FF00FF, #00FFFF, #FFFF00), brilhante. Ou padrões de fundo coloridos.
• Tipografia: Verdana/Arial/Helvetica 10–11px; fontes pixel para navegação; texto de botão chanfrado.
• Layout: Baseado em tabela (<table width="760">), mapas de imagem fatiados para navegação, framesets para barras de navegação persistentes.
• Componentes: Página de splash/intro (página separada "Entrar no site"), animações GIF, GIFs de fundo texturizados, botões 3D chanfrados (fatias de imagem), badges "Melhor visualizado no Netscape Navigator 4 / IE 4", livros de visitas, webrings, contadores de visitas, seções "O que há de novo", framesets (<frameset cols="160,*">).
• Movimento: Animações GIF, intros Flash (emule com tela de introdução CSS fade/zoom).
• Chrome: "© 1998", badges de navegador, avisos "Este site usa Flash".
• Não use: CSS flex/grid, border-radius, box-shadow, responsivo.

Esqueleto de layout:

<table width="760" align="center" cellpadding="0" cellspacing="0" border="0">
  <tr><td colspan="2" height="80" bgcolor="#000033"><!-- mapa de imagem do cabeçalho --></td></tr>
  <tr>
    <td width="160" valign="top" bgcolor="#000000"><!-- botões de navegação (fatias de imagem) --></td>
    <td width="600" valign="top" bgcolor="#000033" style="color:#00FF00"><!-- conteúdo --></td>
  </tr>
</table>

Página de splash: um link "Entrar" centralizado sobre um fundo escuro animado; link para o frameset principal.

Era 3 — Início dos Anos 2000 (2000–2003)

Vibe: Layouts CSS centralizados fixos (~760–800px), pico de intros Flash, botões de plástico brilhantes, gradientes e sombras projetadas, barra lateral de navegação esquerda, barra de pesquisa no topo.

• Viewport: 800×600 / 1024×768. Centralizado fixo ~760–800px.
• Cores: Corpo branco/cinza claro (#FFFFFF, #F5F5F5), navegação azul (#003366, #0066CC), acentos laranja (#FF6600), cabeçalhos gradientes.
• Tipografia: Verdana/Arial 11–12px; Tahoma para UI; cabeçalhos em negrito.
• Layout: Modelo de caixa CSS; margin: 0 auto; width: 780px; wrapper centralizado; barra lateral esquerda + conteúdo principal; barra de pesquisa no topo.
• Componentes: Intro Flash (emule com div de splash animada), botões de plástico brilhantes (gradiente + destaque), sombras projetadas em caixas, navegação por abas, trilhas de breadcrumb, barras laterais de "Notícias", rodapés com links, linhas de direitos autorais.
• Movimento: Animação de intro estilo Flash (keyframes CSS), estados de hover em botões.
• Chrome: "© 2001 Empresa. Todos os direitos reservados.", "Política de Privacidade | Termos de Uso", "Melhor visualizado no IE 5/6".
• Não use: border-radius, flexbox, grid, responsivo, design plano.

Esqueleto CSS:

body { margin:0; background:#E8E8E8; font:11px/1.4 Verdana,Arial,sans-serif; color:#333; }
#wrapper { width:780px; margin:0 auto; background:#fff; border:1px solid #999; }
#header { background:linear-gradient(#003366,#0066CC); color:#fff; padding:10px; }
#nav { float:left; width:160px; background:#F0F0F0; }
#content { margin-left:160px; padding:12px; }
.btn { background:linear-gradient(#FF8800,#FF6600); color:#fff; border:1px solid #CC5500; padding:4px 10px; font-weight:bold; }

Era 4 — Meados dos Anos 2000 (2004–2006) Web 2.0

Vibe: Cantos arredondados, gradientes brilhantes, tipografia grande, tons pastel, sensação AJAX, nuvens de tags, páginas de perfil, grade de 960px, espaço em branco.

• Viewport: 1024×768+. Fixo ~960px ou fluido.
• Cores: Fundo branco, pastéis suaves (menta #E8F5E9, céu #E3F2FD, pêssego #FBE9E7), gradientes azul/verde brilhantes, cinzas sutis (#F5F5F5).
• Tipografia: Helvetica/Arial/Lucida 12–13px; cabeçalhos grandes em negrito (24–32px); rótulos de botões arredondados.
• Layout: Grade de 960px; espaço em branco generoso; baseado em cartões; coluna única centralizada ou 2 colunas.
• Componentes: Caixas de canto arredondado (fatias de imagem ou CSS inicial), botões gradientes brilhantes, nuvens de tags, tags de folksonomia, cartões de perfil (avatar + nome + estatísticas), indicadores de "carregando..." estilo AJAX, classificações por estrelas, badges "Beta", nuvens de folksonomia, cabeçalhos hero grandes.
• Movimento: Transições de hover sutis, spinners AJAX.
• Chrome: "Beta", "© 2005", "Sobre · Blog · Status", rodapé arredondado.
• Não use: design plano, CSS3 box-shadow pesado, responsivo, modo escuro.

Esqueleto CSS:

body { margin:0; background:#fff; font:13px/1.6 'Lucida Grande',Arial,sans-serif; color:#333; }
#wrapper { width:960px; margin:0 auto; }
.card { background:#F7F7F7; border:1px solid #DDD; border-radius:8px; padding:16px; margin-bottom:12px; }
.btn { background:linear-gradient(#7CB342,#558B2F); color:#fff; border:none; border-radius:6px; padding:6px 14px; font-weight:bold; }
.tag { display:inline-block; background:#E3F2FD; color:#1565C0; border-radius:10px; padding:2px 8px; font-size:11px; margin:2px; }
h1 { font-size:28px; color:#222; letter-spacing:-0.5px; }

Era 5 — Final dos Anos 2000 (2007–2010)

Vibe: Minimalismo retorna — branco limpo, fotografia grande, sans-serif, imagens hero grandes, estilo app-store/quase plano, CSS3 (border-radius, box-shadow), vídeo HTML5.

• Viewport: 960–1200px; responsivo inicial (media queries) aceitável.
• Cores: Branco (#FFFFFF) dominante, cinzas claros (#F5F5F5, #EEE), cor de acento única (azul #0066CC ou laranja), texto preto de alto contraste.
• Tipografia: Helvetica Neue/Arial 13–14px; manchetes hero enormes (48–72px); pesos leves; altura de linha generosa.
• Layout: Seção hero larga com imagem em sangria; conteúdo centralizado ~960px; grade de blocos de funcionalidades; navegação superior semi-fixa.
• Componentes: Hero em sangria com grande manchete + CTA, grade de funcionalidades (3 colunas), citações de depoimentos, rodapé com colunas, badges de app-store, botões "Inscreva-se" (cor sólida, arredondados), incorporações de vídeo, sombras sutis.
• Movimento: Transições CSS3, fade-ins, parallax leve.
• Chrome: "© 2010", ícones sociais, "Siga-nos", rodapé mínimo.
• Use: border-radius, box-shadow, gradientes CSS3, @media queries, HTML5 <video>.

Esqueleto CSS:

* { box-sizing:border-box; }
body { margin:0; background:#fff; font:14px/1.6 'Helvetica Neue',Arial,sans-serif; color:#222; }
.hero { background:#111 url(hero.jpg) center/cover; color:#fff; padding:80px 20px; text-align:center; }
.hero h1 { font-size:56px; font-weight:300; margin:0; }
.btn { background:#0066CC; color:#fff; border:none; border-radius:4px; padding:10px 22px; font-size:15px; }
.section { max-width:960px; margin:0 auto; padding:60px 20px; }
.card { background:#fff; border:1px solid #E5E5E5; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.06); padding:24px; }
@media (max-width:768px){ .hero h1{font-size:32px;} .section{padding:30px 16px;} }

Expectativas de saída

• Único arquivo .html autocontido com <style> inline.
• Use fontes apropriadas à era (apenas fontes do sistema — sem Google Fonts para eras anteriores a 2007; Google Fonts aceitável para Final dos Anos 2000).
• Corresponda ao comportamento de viewport da era: largura fixa para eras 1–4, responsivo para era 5.
• Inclua elementos cromáticos da era: contadores, badges, "melhor visualizado em", ano de direitos autorais correspondente à era.
• Não adicione toques modernos (rolagem suave, alternadores de modo escuro, Tailwind, React) a menos que a era os suporte.
• Se o usuário nomear uma marca + ano (ex: "Amazon 1998"), reproduza a aparência conhecida da marca naquela era.

Escolhendo a era a partir de pistas

• "retrô", "web antiga", "GeoCities", "anos 90", "Y2K" → Final dos Anos 90 ou Início dos Anos 2000
• "página inicial vintage", "em construção", "contador de visitas" → Web Inicial
• "brilhante", "Web 2.0", "cantos arredondados", "MySpace", "nuvem de tags" → Meados dos Anos 2000
• "mínimo", "imagem hero grande", "branco limpo", "app store" → Final dos Anos 2000
• "intro Flash", "800px fixo", "botões de plástico" → Início dos Anos 2000

Referência

Padrões derivados da análise do arquivo do Web Design Museum (6.657 entradas, 1991–2010): distribuição por era, 922 títulos Flash, 94 linhas do tempo de marcas (832 entradas), 172 exposições (canais do youtube 93, feio-e-ruim 36, geocities 25, apple-store 9, apple-itunes 9), 11 sites em tela cheia.