---
title: 10 AÑOS DE DISEÑO WEB, ¿QUÉ COSAS HAN CAMBIADO?
description: Sitelicon, padre de Contrabase y de este blog, está de aniversario. Cumple…
---

[Artículos](https://articulos.sitelicon.com)

# [10 AÑOS DE DISEÑO WEB, ¿QUÉ COSAS HAN CAMBIADO?](https://articulos.sitelicon.com/main/articulo/10-anos-de-diseno-web-que-ha-cambiado)

 Escrito por [Sitelicon Ecommerce Services](https://articulos.sitelicon.com/author/sitelicon-ecommerce-services) | Jul 3, 2015, 9:37:17 AM

Sitelicon, padre de Contrabase y de este blog, está de aniversario. Cumple 10 años, y queremos hacer balance de lo que hemos aprendido y mejorado en este tiempo. En 2005, el diseño web había llegado a cierta madurez y ya no era el horror de los inicios, pero aún así, muchas cosas han seguido evolucionando hasta llegar al día de hoy y nosotros nos hemos ido adaptando a ello. Te contamos algunos de los cambios más significativos de los últimos 10 años en el diseño web:

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**TAMAÑO DE PANTALLA**

*1024px vs multipantalla*

**2005**  Solo nos conectábamos desde el ordenador, con una pantalla que probablemente tendría 1024 px de ancho o similar, y todas las webs se diseñaban para encajar en ese tamaño estándar.

**2015**  Ahora nos podemos conectar a internet desde una **[gran variedad de dispositivos](http://www.contrabase.com/diseno-web/tipo-resolucion-mas-extendido/)** grandes o pequeños: desde la tele de casa hasta el móvil que llevamos en el bolsillo. Incluso, más recientemente, desde las aplicaciones de los nuevos relojes de pulsera inteligentes. Probablemente este gran cambio es lo que más ha influido a la hora de diseñar.

 

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**ESTRUCTURA**

*Ancho fijo vs diseño responsive*

**2005**  Casi todas las webs se diseñaban con un ancho fijo. También existía el diseño fluido, que permitía que el contenido se expandiera según el ancho de la pantalla, pero era algo minoritario y no válido para cualquier diseño.

**2015**  ante la proliferación de diferentes dispositivos y tamaños lo que se ha impuesto es el **[diseño responsive](http://www.contrabase.com/diseno-web/google-penalizara-las-webs-no-adaptadas-a-dispositivos-moviles/)**, que adapta o reubica el contenido de la web para garantizar que siempre se vea bien desde cualquier pantalla.

 

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**APLICACIONES**

*Web clásica vs app*

**2005**  Nos conectábamos a internet para visitar páginas web.

**2015**  Además de navegar por las webs tradicionales, con la generalización del mundo móvil (smartphones, tablets…), también realizamos tareas en internet a través de apps. Éstas se conciben de manera diferente a una web y han marcado nuevas normas a la hora de diseñar.

 

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**ANIMACIONES**

*Fash vs HTML5 & CSS3, jQuery*

**2005**  Flash era gran recurso para los diseñadores. Permitía introducir en la web animaciones visualmente muy atractivas, contenido interactivo y otros efectos. Sin embargo, esto era fundamentalmente ornamental y presentaba muchos problemas: flash no se visualizaba en cualquier dispositivo, y el contenido en este formato no era indexado por los buscadores.

**2015**  HTML5, CSS3 y jQuery abren nuevas posibilidades. No solo ha cambiado la tecnología, mucho más amigable para buscadores y para mejorar la experiencia de usuario. El estilo de las animaciones ha cambiado, ya no buscan el efectismo sin más, sino apoyar la usabilidad y mejorar de forma sutil y práctica la experiencia de usuario.

 

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**ENFOQUE**

*Estética vs UX*

**2005**  En esta época las posibilidades de diseño se estaban ampliando enormemente. Cada vez había menos límites en el uso de colores, tipografías, imágenes, etc. y crecía el interés por crear sitios web visualmente profesionales y estéticos.

**2015**  Hoy tenemos más recursos técnicos de diseño que nunca y la preocupación por crear webs atractivas continúa. Sin embargo, la usabilidad y la experiencia del usuario son la máxima prioridad en el proceso de diseño.

 

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**PÁGINA DE INICIO**

*Página intro vs home directa*

**2005**  No todas las webs eran así, pero estaban de moda las páginas intro. Eran una especie de presentación previa, a menudo en flash, que debías “saltar” si querías ir directamente al contenido de la web.

**2015**  Diseñar bien la página de inicio es vital, tanto de cara al usuario como para buscadores. Esto implica que la home debe ser atractiva, pero también contener la información principal.

 

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**SCROLL**

*Páginas cortas vs parallax*

**2005**  En general se evitaban las páginas demasiado largas que requerían hacer mucho *scroll*. El usuario podía molestarse o aburrirse si tenía que bajar demasiado para encontrar la información que quería, y de cara a buscadores, las páginas infinitas tampoco eran óptimas. Esto hacía que a veces se “apelotonara” un poco el contenido cuando éste tenía mucho volumen.

**2015**  Con la variedad de tamaños de pantalla, el pánico por el scroll casi se ha dado la vuelta. Ahora es casi un recurso necesario, sobre todo para navegar cómodamente desde el móvil. Incluso ha dado pie a la creatividad, como los efectos *parallax* que han proliferado últimamente.

 

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**ICONOS**

*Imagen vs fuente*

**2005**  Cuando queríamos incluir iconos en la web normalmente eran imágenes png o jpg.

**2015**  Ahora podemos insertar los iconos como una tipografía. ¿Ventajas?: son escalables y no se pixelan, se les puede añadir estilos mediante CSS y se reducen las solicitudes al servidor.

 

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**IMÁGENES**

*Ornamento vs contenido*

**2005**  En esta época ya se utilizaban fotos y gráficos de buena calidad para acompañar a los textos o apoyar la identidad de la web. Cada vez hay menos restricciones en la maquetación, pero las imágenes aún son un elemento complementario u ornamental.

**2015**  Las imágenes tienen protagonismo total y hay múltiples opciones para su uso: fotazas a pantalla completa, gráficos animados, gifs modernizados, galerías de todo tipo… Las imágenes aportan valor.

 

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

**VIDEO**

*Reproductor insertado vs integración total*

**2005**  Nace Youtube y poder insertar vídeos en webs y blogs supone toda una revolución. En los inicios el reproductor de vídeo estaba basado en Flash.

**2015**  El vídeo adquiere protagonismo en la web. Supone un tipo de contenido muy valioso y también es atractivo para el usuario. La tecnología y el estilo de los reproductores ha evolucionado enormemente e incluso se pueden insertar vídeos como elemento de diseño, como fondo de una web, por ejemplo.

 

**BALANCE**

Internet evoluciona y cada vez más rápido ¿Cuáles serán los próximos retos del diseño web? Parece que los *wearables* van a marcar las próximas tendencias. Relojes y gafas inteligentes, realidad aumentada, mayor interactividad… ¿Qué opináis? ¡Seguimos aprendiendo!

[Ver post completo](https://articulos.sitelicon.com/main/articulo/10-anos-de-diseno-web-que-ha-cambiado)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Sitelicon Ecommerce Services"
  },
  "dateModified" : "2024-01-30T08:12:28.702Z",
  "datePublished" : "2015-07-03T09:37:17Z",
  "headline" : "10 AÑOS DE DISEÑO WEB, ¿QUÉ COSAS HAN CAMBIADO?",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://articulos.sitelicon.com/main/articulo/10-anos-de-diseno-web-que-ha-cambiado",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Artículos"
  }
}
```