Cómo diseñar un sitio web o blog estilo retro de los 90

¿Quieres hacer un sitio web al estilo de los 90 verdaderamente auténtico? En su mayoría, los diseñadores modernos se avergüenzan de las decisiones de diseño web de los 90, pero no puedes negar que los sitios web eran más divertidos en esa época. Aunque no sepas programar un sitio web a mano como lo hacía la mayoría en los 90, de todos modos puedes lograr esa estética web retro mediante constructores de sitios web de arrastrar y soltar, plantillas y temas de blogs. Este artículo de How.com.vn mencionará todas las características que debes añadirle a tu sitio web para que sea auténticamente de los 90, además de dónde encontrar las mejores imágenes gratuitas de los 90 (por ejemplo, fondos, botones, plantillas, GIFs animados y más).

Cosas que debes saber

A los sitios web al estilo de los 90 se les conoce por sus fondos cargados, colores vivos, y GIFs y botones animados.
Ceñirte a la paleta original de 216 colores "segura para la web" asegurará que tu sitio web tenga un aspecto auténtico.
Por lo general, necesitarás conocer un poco de HTML para que tu sitio web tenga esa estética retro de los 90.

1

Inspírate.

Descargar el PDF

Si buscas ejemplos de diseño web al estilo de los 90, tienes suerte. Ahora que el diseño web retro está volviendo a ponerse de moda, es fácil encontrar archivos de sitios verdaderos de la web 1.0, además de interpretaciones modernas de la estética web de los 90.
- Web Design Museum: esta galería web orientada hacia las "tendencias olvidadas en el diseño web" está llena de capturas de pantalla de sitios web que se remontan hasta 1991.^{[1]XFuente de investigación}
- Neocities: este sitio web de alojamiento gratuito alberga toneladas de sitios web al estilo de los 90 (y algunos modernos) gracias a la similitud del servicio con el megaservidor de sitios web de los 90, Geocities. Encontrarás muchos sitios web retro activos con todas las mejores (¿o peores?) características de los 90, incluyendo mucho texto colorido en la fuente Comic Sans y GIFs animados de baja resolución.
- The Geocities-izer: hablando de Geocities, esta herramienta divertida mostrará cualquier sitio web con el aspecto que habría tenido si hubiera estado en Geocities en los 90. Pruébalo con How.com.vn.com (¡tan solo baja primero el volumen de los altavoces!).
- Cameron's World: este sitio web combina los rasgos más locos de los sitios web de los 90 en una sola página web.
- Wayback Machine: si quieres ver antiguos sitios web de los 90 que ya no existen o tan solo ver versiones antiguas de sitios web actuales, te encantará la Wayback Machine de Archive.org.
Anuncio

2

Encuentra el servidor web adecuado.

Descargar el PDF

Si no has elegido un hogar para tu sitio web de los 90, es lo que debes hacer primero. Ya sea que quieras pagar por un servidor o probar con uno gratuito, tienes infinitas opciones. Tan solo asegúrate de elegir a un servidor que te permita personalizar el tema o editar HTML directamente, según tu nivel de habilidad.
- WordPress es la opción moderna preferida para los blogs gratuitos, pero no será fácil hacer que un blog de WordPress parezca de los 90 a menos que utilices un tema de WordPress de inspiración de los 90. En su mayoría, los desarrolladores modernos de sitios web se enfocan en el diseño reactivo, el cual no existía en los 90. Si quieres crear un blog auténtico de apariencia de los 90, necesitarás un servidor personalizable que te permita editar HTML directamente, como Blogger o Tumblr. Ambos tienen muchos temas de inspiración de los 90 con los que experimentar.
- Si quieres un servidor con el espíritu de los 90 y estás dispuesto a programar (o copiar y pegar) código HTML desde cero, Neocities tiene un nivel gratuito que posee suficientes opciones como para cubrir todas tus necesidades en cuanto a un sitio web de los 90. Y si eres nuevo en el HTML o estás un poco oxidado, puedes diseñar la disposición usando un generador como Layout Builder de Sadgrl y pegar el código en tu propio sitio web.
- Si tu servidor tiene soporte para Bootstrap, prueba con la plantilla para sitios web Geo para Bootstrap, la cual está llena de fuentes Comic Sans, colores del arcoíris, botones biselados, barras de progreso falsas y más.

3

Utiliza fuentes y efectos de fuentes de los 90.

Descargar el PDF

Las fuentes simplistas de palo seco de hoy en día no te brindarán esa estética retro. Opta en cambio por fuentes a la vieja usanza (por ejemplo, Comic Sans) para todo el texto. Si no puedes obligarte a usar Comic Sans de lleno, cíñete a una fuente con serifas (por ejemplo, Times New Roman). Y mientras más colores uses, mejor.
- Ahora, ese estándar para personalizar las fuentes en la web, muchas de las antiguas etiquetas HTML que le daban estilo a las fuentes en los 90 ya no funcionan (incluyendo la famosa etiqueta <blink>.
Anuncio

4

Utiliza colores únicamente de la paleta segura para la web.

Descargar el PDF

Los dispositivos de hoy en día pueden mostrar millones de colores, pero las computadoras más antiguas podían mostrar únicamente 256 colores a la vez. Y debido a que tan solo 216 de ellos se mostraban exactamente igual en computadoras tanto PC como Mac, los desarrolladores web de los 90 dependían de una paleta de apenas 216 colores "seguros para la web" para asegurarse de que sus sitios web se vieran exactamente iguales en todas las plataformas.^{[2]XFuente de investigación} La paleta segura para la web ya no se necesita, pero ceñirte a los colores de esta paleta para el texto, las imágenes y los elementos de HTML te brindará esa verdadera estética de los 90.
- Busca en línea "paleta de colores segura para la web" para encontrar los códigos hexadecimales y nombres de los colores o tan solo dale un vistazo a este sitio web.
- Puedes usar estos códigos hexadecimales de colores para las fuentes, tablas y más.

5

Elige una imagen de fondo cargada en mosaico.

Descargar el PDF

En los 90, tener una imagen de fondo con un patrón que se repetía era lo último. Cualquier imagen que se repita de manera fluida funcionará como fondo (piensa en los cielos estrellados, las nubes con arcoíris, los ladrillos, el cemento, los fractales coloridos, las vetas de la madera y los estampados animales al estilo de Lisa Frank).
- Busca en línea "fondo que se repite gratuito" y fíjate qué obtienes. Asimismo, puedes darle un vistazo a Background Tiles o la galería de Pixabay para encontrar fondos que formen mosaicos con fluidez.
- Dale un vistazo a Textures Town para encontrar texturas de fondo animadas en 3D en formato GIF.
- Si no quieres excederte con un fondo cargado, de todos modos puedes lograr la estética con un fondo negro de color entero. Tan solo asegúrate de usar mucho texto e imágenes de colores vivos.
Anuncio

6

Crea imágenes basadas en texto usando efectos retro.

Descargar el PDF

Utiliza un generador para crear imágenes basadas en texto estilizadas y coloridas. Los sitios web de los 90 estaban llenos de logotipos ostentosos de texto hechos con fuentes ornamentadas o futuristas. Necesitarás como mínimo una imagen basada en texto para darles la bienvenida a los visitantes a tu sitio web.
- El generador de imágenes y logotipos de Cool Text te permite crear logotipos de texto gratuitos a partir de una selección de estilos fieles a los 90.
- Flaming Text tiene más plantillas gratuitas geniales para crear logotipos de los 90, además de algunas modernas.
- Make Wordart te permite diseñar logotipos de WordArt de Microsoft Word al estilo de los 90 directamente en tu navegador.

7

Llena tu sitio web con botones y GIFs animados.

Descargar el PDF

Los GIFs animados de los 90 no tenían tan buena calidad como los que encontrarás hoy en día. Por fortuna, hay muchos sitios web y buscadores de GIFs retro con los que puedes descargar todos esos fondos pixelados ostentosos que no encontrarás en las redes sociales. Guarda los que ames u odies más para tu sitio web.
- Uno de los mejores lugares para encontrar GIFs auténticos de los 90 es el buscador de GIFs animados de GeoCities de Internet Archive. Podías buscar "botón" para encontrar todo tipo de botones direccionales (por ejemplo, "Siguiente" y "Atrás") o "gato" para encontrar todo tipo de GIFs absurdos relacionados con los gatos.
- Dale un vistazo a 99GIF Shop para encontrar muchos GIFs gratuitos directamente de la web 1.0.
- Puedes crear tus propias animaciones de arte con píxeles usando un editor en línea gratuito (por ejemplo, Piskel).
- Dale un vistazo a Glitter Graphics para encontrar todo lo relacionado con la brillantina, incluyendo fondos, separadores, íconos, pancartas y botones animados relucientes para tu sitio web.
- Visita la colección de GIFs 88x31 para encontrar cientos de botones de 88x31 píxeles, el tamaño más común para los botones de los sitios web en los 90.
- Puedes encontrar una enorme cantidad de insignias gratuitas para todo tipo de herramientas y temas en Web Badges World o hacer tus propios botones parpadeantes en Blinkies Café.
Anuncio

8

Coloca un contador de visitas en algún lugar de la página.

Descargar el PDF

En su mayoría, los sitios web de hoy en día hacen seguimiento a los visitantes en segundo plano, pero los sitios web de los 90 mostraban con osadía contadores de visitas directamente en la página. Por fortuna, aún puedes añadir un contador de visitas de aspecto auténtico a tu sitio web gracias a sitios como Free Website Hit Counter y Free Web Counter. Tan solo selecciona el contador más absurdo de la página, añade tu URL en el campo y haz clic en Generate free hit counter HTML code ("Generar código HTML para un contador de visitas gratuito") para obtener el código que deberás añadir a tu sitio web.

9

Asegúrate de que tu sitio web permanezca "en construcción".

Descargar el PDF

Aunque es difícil encontrar estas reliquias hoy en día en la web, un archivista del Archive Team recolectó todas las imágenes de "En construcción" y las añadió a una sola página web.^{[3]XFuente de investigación} Pueden descargarse gratuitamente, así que llévate algunas.
Anuncio

10

Utiliza tablas de HTML para la disposición de tu sitio web.

Descargar el PDF

Antes del CSS, los diseñadores web utilizaban tablas burdas para disponer sus sitios web. Por fortuna (¿o por desgracia?), las tablas no se han vuelto obsoletas. Aún puedes usar tablas de HTML para crear disposiciones de sitios web que se vean como de los 90 de una forma realista si te sientes lo suficientemente cómodo con HTML como para ponerte manos a la obra con el código.^{[4]XFuente de investigación}
- Las tablas de HTML de los 90 solían tener bordes biselados gruesos, a menudo con demasiado (o muy poco) relleno entre el texto y los objetos en la página y esos bordes.
- Si prefieres no meterte con las tablas, puedes lograr los mismos efectos si aplicas las propiedades de CSS a las etiquetas Div (sobre todo la propiedad border-style: inset).

11

Reproduce un archivo de sonido MIDI en el fondo.

Descargar el PDF

Muchos sitios web en los 90 tenían música. Aún puedes usar la etiqueta <audio> de HTML5 para reproducir música automáticamente después de que un visitante cargue la página.^{[5]XFuente de investigación} Dale un vistazo a la colección de MIDI de Geocities del Internet Archive para encontrar una selección auténtica de archivos de canciones retro.
Anuncio

12

Excédete con las animaciones de JavaScript.

Descargar el PDF

¿Alguna vez has movido el ratón en un sitio web de los 90 y observado una animación absurda del cursor? ¿O quizás estrellas fugaces o gotas de lluvia que se mueven rápidamente de un lado a otro del texto? Los diseñadores web usaban un código simple de JavaScript para añadir todo tipo de imágenes y efectos en movimiento a los sitios web (por ejemplo, cambiar el cursor del ratón a corazones, estrellas o caras sonrientes).^{[6]XFuente de investigación} Con tal que puedas editar directamente el código HTML de tu sitio web, puedes copiar con facilidad código de JavaScript que lleve estos efectos de los 90 a tu página.
- 90s Cursor Effects tiene 9 efectos simples del cursor, entre ellos arcoíris y copos de nieve.
- Free JavaScript/DHTML Effects de RV tiene muchos efectos gratuitos para el ratón, el texto y las imágenes que puedes añadir con facilidad a cualquier sitio web.
- Web Neko incluye cursores animados del gato de la suerte que persigue el ratón a medida que se mueve.

13

Añade una página o sección extensa de enlaces.

Descargar el PDF

Ya sea que quieras añadir los enlaces directamente a tu página principal o crear una página dedicada a tus sitios web favoritos, asegúrate de llenar la sección de enlaces con otros sitios web de inspiración de los 90 (y, por supuesto, How.com.vn.com).
Anuncio

14

Diles a los visitantes que firmen tu libro de visitas.

Descargar el PDF

Si bien es posible que los proveedores de libros de visitas de los 90 ya no existan, de todos modos encontrarás libros de visitas fáciles de añadir a los que puedes incluir enlaces prominentemente en tu sitio web de inspiración de los 90, entre ellos 123 Guestbook y Smart GB.

Consejos

Si descargas imágenes o botones de un sitio web para usarlos en tus propios diseños, incluye un enlace a ese sitio web en tu página de enlaces.

Anuncio

Advertencias

Si bien usar imágenes parpadeantes o intermitentes en tu sitio web se ve genial, podrían tener un efecto negativo sobre los visitantes con trastornos convulsivos. Utiliza estas características con moderación o bien añade una gran advertencia en la parte superior de la página de forma que la gente pueda optar por salir del sitio.
Cuando encuentres imágenes, fondos y botones en línea, asegúrate de descargarlos del sitio web y subirlos a tu propio servidor web antes de usarlos en tus diseños. El hot-linking de imágenes (cuando un sitio web utiliza una imagen que se encuentra en el servidor web de otra persona) no está bien visto debido a que consume el ancho de banda del artista o del archivo.^{[7]XFuente de investigación}

Anuncio