Como Criar um Site ou Blog com Estética dos Anos 90

PDF download Baixe em PDF
Coescrito por Anar Kazimov

Referências

PDF download Baixe em PDF

Você quer criar um site retrô com estética dos anos 1990? Que legal! Embora a maioria dos web designers de hoje ache a ideia ultrapassada, não podemos negar que navegar na web era muito mais divertido nos primórdios! E não se preocupe: mesmo que você não saiba escrever o código de um site à mão (como era muito comum se fazer na época), ainda dá para conseguir o efeito desejado com modelos, temas e afins. Leia este artigo para aprender o passo a passo e até saber onde conseguir recursos como imagens de fundo, botões, GIFs animados e muito mais!

O que você precisa saber

  • Os sites dos anos 1990 eram recheados de imagens, cores chamativas, GIFs e botões animados.
  • Quanto mais você seguir a paleta de 216 cores, que era comum na época, mais o site vai ficar autêntico.
  • É bom ter pelo menos um pouco de conhecimento em HTML para dar uma estética retrô real ao site.
1

Busque inspiração.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/15\/Make-a-Website-Like-the-90s-Step-1.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/15\/Make-a-Website-Like-the-90s-Step-1.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Agora que a onda retrô está aí com força total, é fácil encontrar arquivos de sites da web 1.0, além de versões modernas com essa estética. Veja alguns recursos bastante intuitivos (mesmo estando em inglês):
    • Web Design Museum : essa galeria é voltada para “tendências passadas do web design”, trazendo vários prints de páginas criadas a partir de 1991. [1]
    • Neocities : esse site de hospedagem gratuito reúne várias páginas com estética noventista (e alguns mais modernos), tudo graças à semelhança do serviço com o servidor Geocities — que era comum nos primeiros anos da internet. Ele traz várias páginas retrô ativas com alguns dos melhores (ou piores?) recursos da época, incluindo textos em Comic Sans MS coloridos e GIFs de baixa resolução.
    • The Geocities-izer : por falar do Geocities, esta ferramenta para lá de divertida “transforma” qualquer site em uma versão noventista como se ele estivesse no servidor. Experimente com o wikiHow… Mas abaixe o volume antes!
    • Cameron's World : este site pega os recursos mais malucos do web design dos anos 1990 e os junta em uma única página.
    • Wayback Machine : se você quer ver sites noventistas que já não existem (ou acessar versões antigas de sites atuais), aproveite tudo que o Wayback Machine oferece.
    Publicidade
2

Encontre o melhor serviço de hospedagem na web.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c1\/Make-a-Website-Like-the-90s-Step-2.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c1\/Make-a-Website-Like-the-90s-Step-2.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Existem inúmeras opções, tanto pagas quanto gratuitas! Você só precisa escolher uma que tenha recursos de personalização de temas ou edição direta em HTML, dependendo da sua habilidade com essa linguagem de programação.
    • Apesar de o WordPress ser a opção mais popular para criar blogs gratuitos, não é fácil dar à página a estética dos anos 1990 que você quer. A maioria dessas ferramentas tem mais foco em aspectos como design responsivo, que não existia há 30 anos. É por isso que é melhor usar um serviço que permita a edição direta em HTML, como Blogger ou Tumblr.
    • Caso você queira um serviço de hospedagem que simule os anos 1990 de verdade — e esteja disposto a escrever (ou copiar e colar) código HTML do zero —, o Neocities tem uma versão gratuita com recursos mais que suficientes. E se você não entende muito de HTML, pode usar um gerador como Sadgrl's Layout Builder e colar o código no seu próprio site!
    • Se o serviço de hospedagem tiver suporte ao Bootstrap, use o modelo Geo for Bootstrap , que disponibiliza a fonte Comic Sans MS, cores do arco-íris, botões diferentes, barras de progresso falsas e muito mais.
3

Use fontes e efeitos típicos dos anos 1990.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/Make-a-Website-Like-the-90s-Step-3.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/Make-a-Website-Like-the-90s-Step-3.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Por isso, é melhor você optar por fontes como Comic Sans MS para todo o texto. Se não for possível, pelo menos opte pela Times New Roman. E outra coisa: quanto mais cores você usar, melhor!
    • Agora que é padrão personalizar fontes na internet, muitas das tags HTML antigas que estilizar fontes nos anos 1990 já não funcionam (incluindo a famosa tag <blink> ).
    Publicidade
4

Use somente cores de uma paleta segura para a web.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/66\/Make-a-Website-Like-the-90s-Step-4.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/66\/Make-a-Website-Like-the-90s-Step-4.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Embora os dispositivos de hoje sejam capazes de reproduzir milhões de cores, computadores mais antigos só conseguiam exibir até 256 de cada vez. E como apenas 216 dessas eram exibidas exatamente do mesmo jeito em PCs Windows e Mac, os desenvolvedores usavam uma paleta segura nos anos 1990 — que fosse igual em todas as plataformas. [2] Apesar de essa paleta já não ser necessária, sua página vai ficar com estética noventista caso você a siga nos textos, imagens e elementos HTML.
    • Faça uma busca na internet com os termos “paleta cores segura para web” para encontrar os códigos hexadecimais e nomes dos tons. Você também pode acessar este site .
    • Dá para usar esses códigos hexadecimais em fontes , tabelas e muito mais.
5

Escolha uma imagem de fundo com um padrão interessante.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/Make-a-Website-Like-the-90s-Step-5.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/Make-a-Website-Like-the-90s-Step-5.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Qualquer imagem que repita algum detalhe serve — como um céu estrelado, nuvens e um arco-íris, paredes de tijolos, cimento, fractais coloridos, madeira etc.
    • Faça uma busca no Google com os termos “fundo padrão gratuito” e veja o que você encontra. Também dá para usar sites como Background Tiles ou a galeria de repetição do Pixabay .
    • Dê uma olhada no site Textures Town , que oferece texturas animadas em 3D em formato GIF.
    • Se você não quiser algo tão espalhafatoso, pode escolher um fundo preto básico. Nesse caso, opte por cores chamativas nos textos e imagens.
    Publicidade
6

Crie títulos e tipografias com efeitos retrô.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/03\/Make-a-Website-Like-the-90s-Step-6.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/03\/Make-a-Website-Like-the-90s-Step-6.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Os sites dos anos 1990 eram repletos de logos e textos com fontes detalhadas ou futuristas. Você precisa de pelo menos uma peça assim para dar as boas-vindas aos visitantes!
    • O gerador de logos e textos do Cool Text traz diversas opções para você criar um estilo que seja a cara dos anos 1990.
    • O Flaming Text também oferece modelos de criação de logos noventistas, além de alternativas modernas.
    • O Make Wordart tem recursos incríveis para você criar logos inspirados em WordArt do Word nos anos 1990. Tudo direto do navegador!
7

Deixe seu site repleto de GIFs e botões animados.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/Make-a-Website-Like-the-90s-Step-7.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/Make-a-Website-Like-the-90s-Step-7.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Felizmente, a internet está repleta de sites com esses recursos, além de motores de busca capazes de baixar versões pixeladas de GIFs que não estão circulando nas mídias sociais. Salve os que você achar mais interessantes para seu site.
    • Um dos melhores lugares para encontrar GIFs dos anos 1990 é o GeoCities Animated GIF Search Engine . Faça uma pesquisa com o termo “button” (assim, em inglês) para encontrar toda sorte de botões direcionais (como “Next” e “Back”)... Ou digite “cat” para encontrar GIFs de gatinhos.
    • Visite o 99GIF Shop para ter acesso a muitos GIFs direto da web 1.0!
    • Dá para você criar suas próprias animações pixeladas com um editor on-line gratuito, como o Piskel .
    • Acesse o Glitter Graphics para baixar imagens de fundo, ícones, banners e botões cheios de glitter para seu site.
    • Visite o 88x31 GIF Collection para acessar centenas de botões com 88x31 pixels, o tamanho mais comum para esses recursos em sites nos anos 1990.
    • O site Web Badges World oferece centenas de recursos e ferramentas para sites, mas você também pode fazer algo personalizável nos botões no Blinkies Café .
    Publicidade
8

Ponha um contador de visitas em algum lugar do site.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Make-a-Website-Like-the-90s-Step-8.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Make-a-Website-Like-the-90s-Step-8.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Apesar de a maioria dos sites modernos calcular a quantidade de visitantes em segundo plano, as páginas dos anos 1990 exibiam essa informação logo de cara. Felizmente, ainda dá para adicionar um contador de visitas funcional usando o Free Website Hit Counter ou Free Web Counter ! Basta selecionar o contador mais absurdo que você encontrar, inserir sua URL no campo e clicar em Generate free hit counter HTML code (“Gerar código HTML de contador de visitas”).
9

Faça o site parecer sempre “Em construção”.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/Make-a-Website-Like-the-90s-Step-9.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/Make-a-Website-Like-the-90s-Step-9.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Por mais que seja difícil achar essas relíquias na internet hoje em dia, um membro do coletivo de arquivistas norte-americano Archive Team coletou todos os textos "Under Construction" (assim, em inglês) e os colocou em uma única página . [3] O mais legal é que o download é gratuito!
    Publicidade
10

Use tabelas HTML para organizar o site.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fb\/Make-a-Website-Like-the-90s-Step-10.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fb\/Make-a-Website-Like-the-90s-Step-10.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Felizmente (ou não!), elas não ficaram obsoletas: você ainda pode usar tabelas HTML para criar layouts de sites noventistas, desde que tenha alguma familiaridade com a linguagem e saiba escrever código. [4]
    • As tabelas HTML dos anos 1990 tinham bordas espessas e em relevo, muitas vezes trazendo pouco espaço entre o texto e os objetos e essas extremidades.
    • Se você prefere não mexer com tabelas, pode aplicar as propriedades do CSS às tags Div — principalmente a propriedade border-style: inset .
11

Toque um arquivo de som MIDI no fundo.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b8\/Make-a-Website-Like-the-90s-Step-11.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b8\/Make-a-Website-Like-the-90s-Step-11.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Muitos sites noventistas incluíam músicas — e ainda dá para usar a tag HTML5 <audio> para reproduzir faixas automaticamente sempre que alguém carregar a página. [5] Confira a coleção Geocities MIDI do Internet Archive para ver um verdadeiro acervo de músicas retrô.
    Publicidade
12

Use e abuse de animações em JavaScript.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/02\/Make-a-Website-Like-the-90s-Step-12.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/02\/Make-a-Website-Like-the-90s-Step-12.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ou algo como estrelinhas ou gotinhas de chuva em cima do texto? Na época, os web designers usavam códigos simples em JavaScript para adicionar vários tipos de imagens e efeitos a páginas da internet, como aqueles que transformam o cursor em corações, estrelas ou smileys. [6] Se você conseguir editar o HTML do seu site diretamente, pode copiar o código JavaScript que põe esses efeitos na página.
    • O 90s Cursor Effects oferece nove efeitos de cursor simples, incluindo arco-íris e flocos de neve.
    • O RV's Free JavaScript/DHTML Effects tem vários efeitos para mouse, texto e outras artes, todos fáceis de aplicar em qualquer site.
    • O Web Neko traz cursores animados que mostram um gatinho perseguindo um rato.
13

Adicione uma página ou seção de links longos.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ed\/Register-to-Vote-by-Mail-Step-4-Version-3.jpg\/v4-460px-Register-to-Vote-by-Mail-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ed\/Register-to-Vote-by-Mail-Step-4-Version-3.jpg\/v4-728px-Register-to-Vote-by-Mail-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Na década de 1990, todo site tinha links para outras páginas interessantes da internet. Não importa se você quer adicionar os seus diretamente à página principal ou criar outra que seja dedicada para isso, preencha a seção com URLs recomendáveis (e o wikiHow.com, claro!).
    Publicidade
14

Peça para os visitantes assinarem seu livro de visitas.

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/26\/Make-a-Website-Like-the-90s-Step-14.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/26\/Make-a-Website-Like-the-90s-Step-14.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Antes do surgimento das seções de comentários em blogs, as pessoas deixavam suas impressões em livros de visitas virtuais. Os provedores desses recursos podem até não existir mais, mas há alternativas fáceis de usar em endereços como 123 Guestbook e Smart GB .

Dicas

  • Se você baixar artes ou botões de um site para usar na sua própria página, lembre-se de incluir o link dele nos respectivos lugares.
Publicidade

Avisos

  • Usar imagens que piscam no seu site é uma ideia legal, mas pode causar um impacto negativo nos visitantes que tiverem epilepsia, convulsões ou quadros parecidos. Tenha moderação — ou, no mínimo, coloque um aviso para quem entrar na página.
  • Quando você encontrar recursos visuais, imagens de fundo e botões na internet, baixe-os do site e faça o upload no seu próprio serviço de hospedagem antes de incorporar tudo à página. Não é recomendado acessar imagens via hotlink (quando um site usa imagens do servidor de outra pessoa), já que isso “come” a internet do artista ou arquivo. [7]
Publicidade

WikiHows Relacionados

Como
Inserir Espaços no HTML
Como
Definir a Largura e Altura de uma Imagem Usando HTML
Como
Ativar o WebGL
Como
Configurar Cores de Fundo em HTML
Como
Criar uma Wiki
Como
Mudar a Cor do Texto em HTML
Como
Centralizar uma Imagem em HTML
Como
Centralizar Texto no HTML
Como
Alterar a Cor de um Botão em HTML
Como
Inserir Imagens Usando HTML
Como
Abrir Arquivos HTML
Como
Definir um Plano de Fundo em HTML
Como
Instalar o XAMPP para Windows
Como
Criar um Feed RSS
Publicidade

Referências

  1. ↑ https://www.webdesignmuseum.org/
  2. ↑ https://www.techopedia.com/definition/24359/browser-safe-palette
  3. ↑ http://textfiles.com/underconstruction/
  4. ↑ https://www.w3.org/WAI/PF/HTML/wiki/Table/layout_TABLE_deprecation
  5. ↑ https://html.com/media/
  6. ↑ https://github.com/tholman/cursor-effects
  7. ↑ https://www.pixsy.com/academy/image-owner/hotlinking/

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 1 500 vezes.

Este artigo foi útil?

Publicidade