Diseño web

El diseño web abarca muchas habilidades y disciplinas diferentes en la producción y el mantenimiento de sitios web. Las diferentes áreas del diseño web incluyen:

• El diseño gráfico web.
• El diseño de la interfaz de usuario (diseño UI).
• La autoría, incluyendo el código estandarizado y el software propietario.
• El diseño de la experiencia del usuario (diseño UX).
• La optimización de los motores de búsqueda.

A menudo, muchas personas trabajan en equipos que cubren diferentes aspectos del proceso de diseño, aunque algunos diseñadores los cubren todos. El término «diseño web» se utiliza normalmente para describir el proceso de diseño relacionado con el diseño del front-end (lado del cliente) de un sitio web, incluyendo la escritura de marcas (sobre todo en HTML).

El diseño web se solapa parcialmente con la ingeniería web en el ámbito más amplio del desarrollo web, además see espera que los diseñadores web sean conscientes de la usabilidad y, si su función implica la creación de marcas, también se espera que estén al día con las directrices de accesibilidad web. Pero ¿Qué es el diseño web realmente?

¿Qué es el diseño web?

El diseño web se refiere al diseño de los sitios web que se muestran en Internet. Suele referirse a los aspectos de la experiencia del usuario en el desarrollo de sitios web más que al desarrollo de software. El diseño web solía centrarse en el diseño de sitios web para navegadores de escritorio; sin embargo, desde mediados de la década de 2010, el diseño para navegadores de móviles y tabletas es cada vez más importante.

Un diseñador web trabaja en la apariencia, el diseño y, en algunos casos, el contenido de un sitio web.

• La apariencia, por ejemplo, está relacionada con los colores, la fuente y las imágenes utilizadas.
• El diseño se refiere a la forma en que la información está estructurada y categorizada. Un buen diseño web es fácil de usar, estéticamente agradable y se adapta al grupo de usuarios y a la marca del sitio web. Muchas páginas web se diseñan centrándose en la simplicidad, de modo que no aparezca información y funcionalidades extrañas que puedan distraer o confundir a los usuarios. Como la piedra angular del resultado de un diseñador web es un sitio que se gane y fomente la confianza del público objetivo, eliminar el mayor número posible de puntos potenciales de frustración del usuario es una consideración fundamental.

Dos de los métodos más comunes para diseñar sitios web que funcionen bien tanto en el escritorio como en el móvil son el diseño responsive y el adaptativo.

• En el diseño responsive, el contenido se mueve dinámicamente en función del tamaño de la pantalla
• En el diseño adaptativo, el contenido del sitio web se fija en tamaños de diseño que se ajustan a los tamaños de pantalla habituales.

Preservar un diseño lo más coherente posible entre dispositivos es crucial para mantener la confianza y el compromiso del usuario. Como el diseño adaptativo puede presentar dificultades en este sentido, los diseñadores deben tener cuidado al renunciar al control de cómo aparecerá su trabajo. Si también son responsables del contenido, aunque tengan que ampliar sus conocimientos, disfrutarán de la ventaja de tener el control total del producto final.

Historia del diseño web

Diseño web en los años 1988-2001

Aunque el diseño web tiene una historia bastante reciente. Puede relacionarse con otras áreas como el diseño gráfico, la experiencia del usuario y las artes multimedia, pero se ve más bien desde un punto de vista tecnológico. Se ha convertido en una parte importante de la vida cotidiana de las personas. Es difícil imaginar Internet sin gráficos animados, diferentes estilos de tipografía, fondos, vídeos y música.

El inicio de la web y el diseño web

En 1989, mientras trabajaba en el CERN, Tim Berners-Lee (también conocido como TimBL) propuso crear un proyecto global de hipertexto, que más tarde se conocería como World Wide Web (WWW). Entre 1991 y 1993 nació la World Wide Web. En 1993, Marc Andreessen (Cofundador de Netscape) y Eric Bina (El otro cofundador) crearon el navegador Mosaic (el primer navegador real de la historia).

En aquel momento había múltiples navegadores, pero la mayoría de ellos estaban basados en Unix y, naturalmente, eran de texto. No había un enfoque integrado de los elementos de diseño gráfico, como las imágenes o los sonidos. El navegador Mosaic rompió este molde. El W3C (La organización de estándares para la WWW, por cierto dirigida por TimBL también) se creó en octubre de 1994 para «conducir la World Wide Web a su pleno potencial mediante el desarrollo de protocolos comunes que promuevan su evolución y garanticen su interoperabilidad».

Esto impidió e impide a cualquier empresa de monopolizar un navegador y un lenguaje de programación propios, lo que podría haber alterado el efecto de la World Wide Web en su conjunto. El W3C sigue estableciendo estándares, lo que puede verse hoy en día con JavaScript y otros lenguajes.

El primer buscador web de la historia

Por esa época se nos presentó ALIWEB. ALIWEB (Archie Like Indexing for the WEB) está considerado como el primer motor de búsqueda de la Web. Abrieron sus puertas en noviembre de 1993 proporcionando a los usuarios enlaces útiles a los mejores contenidos de la web. En sólo dos años, se empieza a ver cómo el diseño cobra vida. El objetivo de ALIWEB era ayudar a los usuarios a encontrar información útil. Querían que los usuarios se sintieran atraídos por los enlaces del sitio. Utilizando un fondo de color, atraían la mirada hacia los elementos más importantes de la página.

La primera landing page de la historia

Fue en ese mismo año cuando MTV lanzó su sitio web.VJ Adam Curry dirigió el sitio de forma no oficial y personal al principio. MTV fue uno de los primeros en adoptar las conocidas landing pages. Esta era la imagen que veías cuando aterrizabas en su sitio en 1993. Una gran diferencia con respecto a unos pocos años antes. ¿Te imaginas lo que tardaba en cargarse? Según un estudio del investigador del MIT Matthew Gray, a finales de 1993 había 623 sitios web. Internet estaba despegando y el diseño también.

El primer banner publicitario de la historia de internet

En 1994 Andreessen formó Mosaic Communications Corp. que más tarde se convirtió en Netscape Communications, el navegador Netscape 0.9. Netscape creó sus propias etiquetas HTML sin tener en cuenta el proceso tradicional de estándares. Por ejemplo, Netscape 1.1 incluía etiquetas para cambiar los colores de fondo y formatear el texto con tablas en las páginas web. Entre 1996 y 1999 comenzó la guerra de los navegadores, ya que Microsoft y Netscape luchaban por el dominio definitivo de los navegadores. Durante este tiempo, aparecieron muchas tecnologías nuevas, sobre todo las hojas de estilo en cascada, JavaScript y el HTML dinámico. En general, la competencia de navegadores dio lugar a muchas creaciones positivas y ayudó a que el diseño web evolucionara a un ritmo rápido.

El futuro de la web se estaba perfilando rápidamente. JavaScript ayudó a los diseñadores a superar las limitaciones del HTML estático al permitirles aportar algo de movimiento a la web. Así nació la ventana «emergente». El problema es que tiene que cargarse encima de la página existente, lo que hace que los sitios se carguen más lentamente. Muchas de las primeras funciones de JavaScript se pudieron realizar posteriormente mediante CSS. Hoy en día, JavaScript sigue siendo fuerte, sobre todo con la versión de front-end conocida como JQuery.

Evolución del diseño web

Los usuarios de Internet se duplicaron con creces en el año 1996 hasta alcanzar los 36 millones de usuarios en todo el mundo. El resumen del año 1996 de la CNN es una página web emblemática. Utilizando texto, imágenes y anuncios, la CNN presentó un diseño de sitio equilibrado con gran facilidad de uso para mediados de los 90. En 1996, vimos crecer el número de sitios web de 25.300 a 257.601, lo que hizo que la media de usuarios por sitio web pasara de 1908 a 301.

En esa época, el diseño y la estética parecían tener prioridad sobre la estructura de marcado, y se prestaba poca atención a la semántica y la accesibilidad web. Los sitios HTML estaban limitados en sus opciones de diseño, más aún con las versiones anteriores de HTML.

Para crear diseños complejos, muchos diseñadores web tenían que utilizar complicadas estructuras de tabla o incluso utilizar imágenes .GIF de espaciado en blanco para evitar que las celdas vacías de la tabla se colapsaran .El W3C introdujo el CSS en diciembre de 1996 para apoyar la presentación y el diseño. Esto permitió que el código HTML fuera semántico en lugar de semántico y de presentación, y mejoró la accesibilidad de la web, véase el diseño web sin tablas.

En 1996 se desarrolló Flash (originalmente conocido como FutureSplash, desarrollado por FutureWave). En aquel momento, la herramienta de desarrollo de contenidos Flash era relativamente sencilla en comparación con la que vendría después, ya que utilizaba herramientas básicas de diseño y dibujo, un precursor limitado de ActionScript y una línea de tiempo, pero permitía a los diseñadores web ir más allá del HTML, los GIF animados y el JavaScript.

Sin embargo, como Flash requería un plug-in, muchos desarrolladores web evitaron utilizarlo por miedo a limitar su cuota de mercado debido a la falta de compatibilidad. En su lugar, los diseñadores recurrieron a las animaciones GIF (si no renunciaban por completo a utilizar gráficos en movimiento) y a JavaScript para los widgets. Sin embargo, las ventajas de Flash lo hicieron lo suficientemente popular entre mercados específicos como para acabar llegando a la gran mayoría de los navegadores, y lo suficientemente potente como para ser utilizado para desarrollar sitios enteros.

Flash cambió el panorama del diseño de sitios web. Por primera vez, los diseñadores podían crear cualquier forma, añadir animación y desarrollar sitios más atractivos que nunca con una sola herramienta. El final de la página compactaría toda la información en un solo archivo para ser cargado. El principal problema era que no todos los usuarios de la web tenían un plugin de Flash instalado y los sitios en Flash tardaban mucho más en cargarse. La era de Flash nos trajo las páginas de bienvenida y las intros animadas. Aunque Flash sigue utilizándose, su caída se debió a la falta de «facilidad de búsqueda» y a su gran consumo de potencia de procesamiento, lo que hizo que Apple lo dejara atrás en 2007 con el lanzamiento del iPhone.

Fin de la primera guerra de los navegadores

En 1998, Netscape liberó el código de Netscape Communicator bajo una licencia de código abierto, lo que permitió a miles de desarrolladores participar en la mejora del software. Sin embargo, estos desarrolladores decidieron iniciar un estándar para la web desde cero, lo que guió el desarrollo del navegador de código abierto y pronto se amplió a una plataforma de aplicaciones completa. Se formó el Proyecto de Estándares Web, que promovió el cumplimiento de los estándares HTML y CSS por parte de los navegadores. Se crearon programas como Acid1, Acid2 y Acid3 para comprobar el cumplimiento de los estándares web por parte de los navegadores.

En el año 2000, se lanzó Internet Explorer para Mac, que fue el primer navegador totalmente compatible con HTML 4.01 y CSS 1. También fue el primer navegador totalmente compatible con el formato de imagen PNG. En 2001, tras una campaña de Microsoft para popularizar Internet Explorer, éste había alcanzado el 96% de la cuota de uso de los navegadores web, lo que supuso el fin de la primera guerra de navegadores, ya que Internet Explorer no tenía competencia real.

Poco después de la creación de Flash, CSS entró en escena. A medida que aumentaba el número de usuarios que se conectaban a Internet, la velocidad se convertía en un gran problema. La idea detrás de CSS es simple: separar el contenido y la presentación. El contenido del sitio estaba en HTML y el estilo del sitio se codificaba en CSS. La lucha inicial de CSS fue el resultado de la escasa compatibilidad con los navegadores. Por suerte, luchó durante los primeros años y aún hoy se utiliza plenamente. El CSS puede ser el «lenguaje» más importante que un diseñador web necesita conocer.

Aunque el efecto 2000 trajo consigo el temor a un posible colapso, el año también marcó el comienzo de una nueva forma de hacer negocios. Paypal, la principal empresa de pagos en línea del mundo, empezó en 1999, pero fue el año 2000 cuando PayPal despegó de verdad. El efecto 2000 también fue un gran año para el desarrollo web. A medida que aumentaba el número de empresas que se conectaban a Internet, tener un sitio web atractivo empezaba a ser algo más que un deseo, se estaba convirtiendo en una necesidad.

Diseño web en los años 2001-2002

Desde el comienzo del siglo XXI, la web está cada vez más integrada en la vida de las personas. Al mismo tiempo, la tecnología de la web también ha evolucionado. También se han producido cambios significativos en la forma en que la gente utiliza y accede a la web, lo que ha modificado el diseño de los sitios.

Desde el final de la guerra de los navegadores se han lanzado nuevos navegadores. Muchos de ellos son de código abierto, lo que significa que tienden a tener un desarrollo más rápido y apoyan más los nuevos estándares. Muchos consideran que las nuevas opciones son mejores que el Internet Explorer de Microsoft.

El W3C ha publicado nuevos estándares para HTML (HTML5) y CSS (CSS3), así como nuevas API de JavaScript, cada uno de ellos como un estándar nuevo pero individual. Aunque el término HTML5 sólo se utiliza para referirse a la nueva versión de HTML y a algunas de las API de JavaScript, se ha convertido en algo habitual utilizarlo para referirse a todo el conjunto de nuevos estándares (HTML5, CSS3 y JavaScript)

Diseño web en 2003

Hasta el año 2000, el diseño de páginas web era un campo mucho más técnico, gestionado por los departamentos de informática de las empresas. En 2003 todo cambió. En 2003 se lanzó WordPress, que es ahora el principal sistema de gestión de contenidos (CMS) del mundo. Se calcula que en mayo de 2003 WordPress estaba instalado en unos 2.000 blogs. En enero de 2015, más del 23,3% de los 10 millones de sitios web más importantes utilizaban ahora WordPress. WordPress es gratuito y un CMS basado en PHP y MySQL. Sus características incluyen una arquitectura de plugins y un sistema de plantillas.

Diseño web en 2004 – MySpace

Diseño web en 2006 – Facebook

Aunque Facebook se lanzó originalmente en 2004 junto con MySpace, estaba reservado sólo para estudiantes universitarios y había que tener una dirección de correo electrónico .EDU para poder acceder. En 2006, Facebook se hizo público y cambió por completo las redes sociales y la forma en que el público utilizaba Internet. Mientras que MySpace permitía a los usuarios personalizar sus páginas, Facebook optó por no dar a sus usuarios esta posibilidad. Esto dio lugar a un aspecto sencillo y coherente en toda la red. Facebook centra su diseño en torno a su marca. Todo en su red decía algo sobre Facebook. Sus usuarios conectaron con su marca y se convirtieron rápidamente en evangelizadores del sitio. Hoy en día, Facebook es el sitio más visitado en Estados Unidos y tiene más de mil millones de usuarios en todo el mundo. Todo ello con un diseño web sencillo, de corte limpio y de marca.

Las páginas web en la era de los smartphones

Los dispositivos móviles y los teléfonos inteligentes han cambiado la forma en que la gente usa y piensa en la web. En 2007, la mayoría de los sitios no eran «aptos para móviles» bajo ningún concepto. Además, utilizar la web en un dispositivo móvil era a menudo frustrante. Esto obligó a los diseñadores web a crear un mejor enfoque del diseño web para móviles. Esta nueva frontera planteaba muchas preguntas. ¿Debe reducirse la escala de un sitio web para móviles? ¿Debemos crear estándares para móviles? ¿Cómo acelerar la carga para que los usuarios no desperdicien datos? La respuesta llegó en forma de la cuadrícula 960. Bootstrap y Foundation se convirtieron en la base del nuevo mundo de la web móvil.

2007 La revolución móvil

El 29 de junio de 2007 salió a la venta el primer iPhone, dando paso a una nueva era de diseño web. Antes de la invención del teléfono inteligente, los usuarios navegaban por la web con navegadores muy básicos, que la mayoría consideraba frustrantes e innecesarios. Aunque Apple no inventó el SmartPhone, lo convirtió en la corriente principal.

2009 Las imágenes se vuelven herramientas sociales

A finales de la primera década del nuevo milenio, Internet había saturado todos los ámbitos de nuestra cultura. Flickr fue nombrado uno de los 50 mejores sitios web de 2009. Creado por Yahoo, Flickr ofreció a la gente un lugar donde almacenar y compartir sus fotos en línea. Flickr fue el primer sitio que utilizó el etiquetado colaborativo. La idea es que si todo el mundo puede etiquetar las fotos subidas por los demás, surgirá de forma natural una categorización aproximada a partir de la sabiduría de la multitud. Esto es lo que «hizo» Flickr.

El comienzo del diseño responsive

A medida que aumentaba el uso de Internet móvil, el diseño móvil se convirtió en el número uno. En 2010, un diseñador web brillante y motivado llamado Ethan Marcotte desafió la forma en que se estaba abordando el diseño de sitios web para móviles. En lugar de crear un sitio móvil por separado, propuso que se utilizara el mismo contenido, pero con diferentes diseños en función del tamaño de la pantalla. Así nació el Responsive Design.

Desde un punto de vista técnico, seguimos utilizando HTML y CSS, por lo que es más bien un avance conceptual. La principal ventaja del Responsive Design es la paridad de contenidos, es decir, que es el mismo sitio web en todas partes.

Las páginas web en 2014 – El nacimiento del Inbound

Con la creciente economía online, las empresas buscaban más formas de interactuar y conectar con sus clientes potenciales. Los anuncios online y las ventanas emergentes llevaban años frustrando a los usuarios y ahora había más formas que nunca de bloquear estas interrupciones. En lugar de dirigirse a los clientes potenciales, los responsables de marketing inteligentes decidieron probar un nuevo enfoque. Ofreciendo consejos y atrayendo a los clientes potenciales con su sitio web, los profesionales del marketing podían ahora convertir a los clientes potenciales en clientes. Así nació el Inbound.

El software de Hubspot ha ayudado a miles de empresas en todo el mundo. ¿Su principal fuente de clientes potenciales? Su sitio web. El diseño interactivo y los CTA por encima del pliegue han sido probados y comprobados. Muchos de los sitios de marketing de hoy en día miran a Hubspot para obtener ideas de diseño. Muchos más se han pasado a su plataforma COS.

Las páginas web de 2015

En diciembre de 2015, había más de 935.000.000 de sitios web publicados como parte de la red mundial. Google comenzó a realizar ajustes constantes en el algoritmo para combatir las tácticas de enlaces black hat. Con tantas mejoras en la plataforma, la competencia para ser encontrado orgánicamente en internet se volvió más y más desafiante.

En ese momento, incluso las tiendas tradicionales entendieron la necesidad de tener una fuerte presencia digital. Además, muchos sitios web se estaban convirtiendo en el «mejor vendedor» de una empresa.

Growth Driven Design adopta un enfoque sistemático de la optimización SEO para ayudar a garantizar que las empresas dediquen tiempo a atraer a los visitantes adecuados y a cerrar mejores contactos, lo que se traduce en un mejor retorno de la inversión y un crecimiento más rápido de los ingresos. Las mejores empresas entienden que su sitio web nunca está «terminado». En su lugar, trabajan con los responsables de marketing para garantizar que su sitio web se adapte y crezca con sus usuarios.

El diseño web en 2016

Las plataformas de medios sociales como Facebook, Instagram, Twitter y LinkedIn, YouTube y Pinterest, funcionaban como motores de búsqueda al igual que Google y Yahoo. Esto aumentó la demanda de contenidos y los profesionales del marketing se vieron obligados a esforzarse más cada mes.

Los backlinks internos y externos relevantes son una parte vital para ayudar a Google a entender el contexto y la autoridad de su sitio web. La necesidad de backlinks White hat también aumenta el ritmo al que las empresas comienzan a empujar el contenido en las redes sociales. Las métricas para medir con precisión el ROI de la venta social no se conocen del todo, sin embargo, los profesionales de las ventas creen en el poder de la venta social.

Diseño web en 2019

Los vendedores de hoy en día entienden que un sitio web de una empresa es a menudo la primera oportunidad que tendrán de conectar con un cliente potencial. Los colores complementarios, un logotipo llamativo y páginas que presenten la misión de la empresa son importantes. El diseño de la web también debe incorporar una navegación clara, contenido relevante e imágenes que se relacionen con los productos o servicios.

El tiempo de carga es una parte esencial del diseño general y no puede ignorarse. Con millones de sitios web por los que navegar, hoy en día no merece la pena esperar un sitio lento.

Cada página debe incorporar la optimización SEO en todas las imágenes, así como las meta descripciones y las etiquetas de título. Un gran diseño puede parecer bonito, pero no ayudará a Google a encontrarle.

A medida que Google siga ajustando su algoritmo para los profesionales de la búsqueda semántica que se ciñan a las prácticas recomendadas de SEO y realicen un seguimiento de su progreso mediante Google Analytics, podrán realizar pequeños ajustes basados en la información sobre la clasificación de su sitio web en las búsquedas, el tráfico orgánico, los sitios de referencia y las páginas más populares de su sitio web.

Las páginas web en 2020 – La era de los constructores web

Durante la pandemia, se produjo un aumento significativo de las búsquedas mundiales del término «construir un sitio web». Por ejemplo, en los países africanos, la consulta «cómo construir un sitio web para una empresa» experimentó un aumento del 110%. Las empresas de todo el mundo buscaron cómo mejorar y actualizar su sitio web existente o construir uno nuevo para retener a los clientes y atraer a otros nuevos, ya que gran parte del mundo se ha conectado a Internet.

Herramientas y tecnologías

Los diseñadores de páginas web utilizan diferentes herramientas en función de la parte del proceso de producción en la que participan. Estas herramientas se actualizan con el paso del tiempo gracias a nuevos estándares y programas informáticos, pero los principios que las sustentan siguen siendo los mismos. Los diseñadores web utilizan editores de gráficos vectoriales y rasterizados para crear imágenes con formato web o diseñar prototipos. Las tecnologías utilizadas para crear sitios web incluyen estándares del W3C como HTML y CSS, que pueden ser codificados a mano o generados por software de edición WYSIWYG. Otras herramientas que pueden utilizar los diseñadores web son los validadores de marcas y otras herramientas de pruebas de usabilidad y accesibilidad para garantizar que sus sitios web cumplen las directrices de accesibilidad.

Habilidades y técnicas

Diseño de marketing y comunicación

El diseño de marketing y comunicación de un sitio web puede identificar lo que funciona para su mercado objetivo. Puede tratarse de un grupo de edad o de una corriente cultural concreta, por lo que el diseñador puede entender las tendencias de su público. Los diseñadores también pueden entender el tipo de sitio web que están diseñando, lo que significa, por ejemplo, que las consideraciones de diseño del sitio web de empresa a empresa (B2B) pueden diferir en gran medida de un sitio web dirigido a los consumidores, como un sitio web de venta al por menor o de entretenimiento. Hay que tener muy en cuenta que la estética o el diseño general de un sitio web no chocan con la claridad y la precisión del contenido o la facilidad de la navegación web, especialmente en un sitio web B2B. Los diseñadores también pueden tener en cuenta la reputación del propietario o de la empresa a la que representa el sitio web para asegurarse de que se les presenta de forma favorable.

Diseño de la experiencia del usuario y diseño interactivo

La comprensión del contenido de un sitio web por parte del usuario suele depender de la comprensión del funcionamiento del mismo. Esto forma parte del diseño de la experiencia del usuario. La experiencia del usuario está relacionada con el diseño, las instrucciones claras y el etiquetado de un sitio web. Que un usuario entienda cómo puede interactuar en un sitio web también puede depender del diseño interactivo del mismo.

Si un usuario percibe la utilidad del sitio web, es más probable que siga utilizándolo. Los usuarios expertos y versados en el uso de sitios web pueden encontrar útil una interfaz de sitio web más distintiva, pero menos intuitiva o menos fácil de usar. Sin embargo, los usuarios con menos experiencia son menos propensos a ver las ventajas o la utilidad de una interfaz de sitio web menos intuitiva. Esto impulsa la tendencia a una experiencia de usuario más universal y a la facilidad de acceso para dar cabida al mayor número posible de usuarios, independientemente de sus conocimientos.

Si la función requiere conocimientos avanzados de codificación, puede ser demasiado costosa en tiempo o dinero en comparación con la cantidad de mejoras que la función añadirá a la experiencia del usuario. También existe el riesgo de que la interactividad avanzada sea incompatible con navegadores o configuraciones de hardware antiguos. Publicar una función que no funciona de forma fiable es potencialmente peor para la experiencia del usuario que no hacer ningún intento. Depende del público al que se dirija si es probable que sea necesario o si merece la pena correr riesgos.

Diseño de la página

Una parte del diseño de la interfaz de usuario se ve afectada por la calidad del diseño de la página. Por ejemplo, un diseñador puede tener en cuenta si el diseño de la página del sitio debe ser consistente en diferentes páginas al diseñar la maquetación. El ancho de píxel de la página también puede considerarse vital para alinear los objetos en el diseño de la disposición. Los sitios web de ancho fijo más populares suelen tener la misma anchura establecida para ajustarse a la ventana del navegador más popular del momento, a la resolución de pantalla más popular del momento, en el tamaño de monitor más popular del momento. La mayoría de las páginas también están alineadas al centro por razones de estética en pantallas grandes.

Los diseños fluidos se hicieron más populares en torno al año 2000 para permitir que el navegador realizara ajustes de diseño específicos para el usuario en función de los detalles de la pantalla del lector (tamaño de la ventana, tamaño de la fuente en relación con la ventana, etc.). Se convirtieron en una alternativa a los diseños basados en tablas HTML y a los diseños basados en cuadrículas, tanto en el principio del diseño de la página como en la técnica de codificación, pero su adopción fue muy lenta debido a las consideraciones de los dispositivos de lectura de pantalla y a los diferentes tamaños de las ventanas sobre los que los diseñadores no tienen control.

En consecuencia, un diseño puede dividirse en unidades (barras laterales, bloques de contenido, áreas de publicidad incrustadas, áreas de navegación) que se envían al navegador y que éste encajará en la ventana de visualización, lo mejor que pueda. Aunque este tipo de visualización puede cambiar a menudo la posición relativa de las principales unidades de contenido, las barras laterales pueden desplazarse por debajo del cuerpo del texto en lugar de a un lado del mismo. Se trata de una visualización más flexible que una disposición basada en una cuadrícula codificada que no se ajusta a la ventana del dispositivo. En particular, la posición relativa de los bloques de contenido puede cambiar sin que el contenido dentro del bloque se vea afectado. Esto también minimiza la necesidad del usuario de desplazarse horizontalmente por la página.

El diseño web responsive es un enfoque más reciente, basado en CSS3, y un nivel más profundo de especificación por dispositivo dentro de la hoja de estilo de la página a través de un uso mejorado de la regla CSS @media. En marzo de 2018, Google anunció que desplegaría la indexación mobile-first Los sitios que utilizan el diseño responsive están bien situados para garantizar que cumplen con este nuevo enfoque.

Tipografía

Los diseñadores web pueden optar por limitar la variedad de tipos de letra del sitio web a sólo unos pocos que sean de un estilo similar, en lugar de utilizar una amplia gama de tipos de letra o estilos tipográficos. La mayoría de los navegadores reconocen un número específico de fuentes seguras, que los diseñadores utilizan principalmente para evitar complicaciones.

La descarga de fuentes se incluyó posteriormente en el módulo de fuentes de CSS3 y desde entonces se ha implementado en Safari 3.1, Opera 10 y Mozilla Firefox 3.5. Esto ha hecho que aumente el interés por la tipografía web, así como el uso de la descarga de fuentes.

La mayoría de los diseños de sitios web incorporan espacio negativo para dividir el texto en párrafos y también para evitar el texto alineado en el centro.

Gráficos en movimiento

El diseño de la página y la interfaz de usuario también pueden verse afectados por el uso de gráficos en movimiento. La decisión de utilizar o no gráficos en movimiento puede depender del mercado al que se dirige el sitio web.

Los gráficos en movimiento pueden ser esperados, o al menos mejor recibidos, en un sitio web orientado al entretenimiento. Sin embargo, el público objetivo de un sitio web con un interés más serio o formal (como las empresas, la comunidad o el gobierno) podría encontrar las animaciones innecesarias y que distraen si sólo tienen fines de entretenimiento o decoración.

Esto no significa que un contenido más serio no pueda ser mejorado con presentaciones animadas o de vídeo que sean relevantes para el contenido. En cualquier caso, el diseño de gráficos en movimiento puede marcar la diferencia entre unos visuales más eficaces o unos que distraigan.

Los gráficos en movimiento que no son iniciados por el visitante del sitio pueden producir problemas de accesibilidad. Las normas de accesibilidad del consorcio World Wide Web exigen que los visitantes del sitio puedan desactivar las animaciones.

Calidad del código

Los diseñadores de sitios web pueden considerar que es una buena práctica ajustarse a los estándares. Esto suele hacerse mediante una descripción que especifica la función del elemento. El hecho de no ajustarse a las normas no hace que un sitio web sea inutilizable o propenso a errores, pero las normas pueden referirse a la correcta disposición de las páginas para su legibilidad, así como a asegurarse de que los elementos codificados se cierran adecuadamente. Esto incluye errores en el código, un diseño más organizado del código y asegurarse de que los ID y las clases se identifican correctamente. Las páginas mal codificadas se denominan coloquialmente «sopa de etiquetas». La validación a través del W3C sólo puede realizarse cuando se realiza una declaración DOCTYPE correcta, que se utiliza para resaltar los errores en el código. El sistema identifica los errores y las áreas que no se ajustan a las normas de diseño web. Esta información puede ser corregida por el usuario.

Contenidos generados

Hay dos formas de generar sitios web: estática o dinámicamente.

Páginas web estáticas

Un sitio web estático almacena un archivo único para cada página de un sitio web estático. Cada vez que se solicita esa página, se devuelve el mismo contenido. Este contenido se crea una vez, durante el diseño del sitio web. Suele ser de autoría manual, aunque algunos sitios utilizan un proceso de creación automatizado, similar al de un sitio web dinámico, cuyos resultados se almacenan a largo plazo como páginas completas. Estos sitios estáticos creados automáticamente se hicieron más populares alrededor de 2015, con generadores como Jekyll y Adobe Muse.

Los beneficios de un sitio web estático son que eran más sencillos de alojar, ya que su servidor solo necesitaba servir contenido estático, no ejecutar scripts del lado del servidor. Esto requería menos administración del servidor y tenía menos posibilidades de exponer agujeros de seguridad. También podían servir páginas más rápidamente, en un hardware de servidor de bajo coste. Estas ventajas fueron perdiendo importancia a medida que el alojamiento web barato se ampliaba para ofrecer también funciones dinámicas, y los servidores virtuales ofrecían un alto rendimiento durante intervalos cortos a bajo coste.

Casi todos los sitios web tienen algún contenido estático, ya que los activos de apoyo, como las imágenes y las hojas de estilo, suelen ser estáticos, incluso en un sitio web con páginas muy dinámicas.

Páginas web dinámicas

Los sitios web dinámicos se generan sobre la marcha y utilizan tecnología del lado del servidor para generar páginas web. Suelen extraer su contenido de una o varias bases de datos back-end: algunas son consultas a una base de datos relacional para consultar un catálogo o resumir información numérica, otras pueden utilizar una base de datos de documentos como MongoDB o NoSQL para almacenar unidades de contenido más grandes, como entradas de blog o artículos de wiki.

En el proceso de diseño, las páginas dinámicas se suelen maquetar o esquematizar con páginas estáticas. Los conocimientos necesarios para desarrollar páginas web dinámicas son mucho más amplios que los de las páginas estáticas, ya que implican la codificación del lado del servidor y de la base de datos, así como el diseño de la interfaz del lado del cliente. Por eso, incluso los proyectos dinámicos de tamaño medio son casi siempre un trabajo en equipo.

Cuando las páginas web dinámicas se desarrollaron por primera vez, solían codificarse directamente en lenguajes como Perl, PHP o ASP. Algunos de ellos, especialmente PHP y ASP, utilizaban un enfoque de «plantilla» en el que una página del lado del servidor se asemejaba a la estructura de la página del lado del cliente completada y los datos se insertaban en lugares definidos por «etiquetas». Esta forma de desarrollo era más rápida que la codificación en un lenguaje puramente procedimental como Perl.

Ambos enfoques han sido sustituidos en muchos sitios web por herramientas de alto nivel centradas en la aplicación, como los sistemas de gestión de contenidos (CMS). Estos sistemas se basan en plataformas de codificación de propósito general y parten de la base de que un sitio web existe para ofrecer contenidos según uno de los varios modelos reconocidos, como un blog con secuencia temporal, una revista temática o un sitio de noticias, un wiki o un foro de usuarios. Estas herramientas hacen que la puesta en marcha de un sitio de este tipo sea muy fácil y una tarea puramente organizativa y de diseño, sin necesidad de codificación.

La edición del contenido en sí mismo (así como de la página de la plantilla) puede hacerse tanto por medio del propio sitio, como con el uso de software de terceros. La capacidad de editar todas las páginas se ofrece sólo a una categoría específica de usuarios (por ejemplo, administradores o usuarios registrados). En algunos casos, los usuarios anónimos pueden editar determinados contenidos de la web, lo que es menos frecuente (por ejemplo, en los foros, añadiendo mensajes). Un ejemplo de sitio con una modificación anónima es Wikipedia.

Diseño de la página principal

Los expertos en usabilidad, como Jakob Nielsen y Kyle Soucy, han insistido a menudo en el diseño de la página de inicio para el éxito del sitio web y han afirmado que la página de inicio es la más importante de un sitio web.

Sin embargo, en la década de 2000 los profesionales empezaron a comprobar que un número creciente de usuarios de sitios web se saltaba la página de inicio y se dirigía directamente a las páginas de contenido interno a través de los motores de búsqueda, los boletines electrónicos y los canales RSS. Esto llevó a muchos profesionales a argumentar que las páginas de inicio son menos importantes de lo que la mayoría de la gente piensa Jared Spool argumentó en 2007 que la página de inicio de un sitio era en realidad la página menos importante de un sitio web.

En 2012 y 2013, los carruseles (también llamados «sliders» y «banners giratorios») se convertieron en un elemento de diseño muy popular en las páginas de inicio, a menudo utilizado para mostrar contenido destacado o reciente en un espacio reducido, sin embargo, muchos profesionales sostienen que los carruseles son un elemento de diseño ineficaz y perjudican la optimización de los motores de búsqueda y la usabilidad de un sitio web. Actualmente su uso está en decadencia.

Equipo de diseño web

Hay dos trabajos principales en la creación de un sitio web: el diseñador y el desarrollador web, que a menudo colaboran estrechamente en un sitio web.

• Los diseñadores web son responsables del aspecto visual, que incluye el diseño, el colorido y la tipografía de una página web. Los diseñadores web también tienen conocimientos de lenguajes de marcado como HTML y CSS, aunque el alcance de sus conocimientos difiere de un diseñador web a otro.
• Especialmente en las organizaciones más pequeñas, una persona necesitará los conocimientos necesarios para diseñar y programar la página web completa, mientras que las organizaciones más grandes pueden tener un diseñador web responsable únicamente del aspecto visual.

Otros trabajadores que pueden intervenir en la creación de un sitio web son

• Diseñadores gráficos para crear elementos visuales para el sitio, como logotipos, diseños y botones.
• Especialistas en marketing en Internet para ayudar a mantener la presencia en la web mediante soluciones estratégicas para atraer a los visitantes al sitio, utilizando técnicas de marketing y promoción en Internet.
• Redactores SEO para investigar y recomendar las palabras correctas que deben incorporarse a un sitio web concreto y hacer que éste sea más accesible y se encuentre en numerosos motores de búsqueda
• Redactor de Internet para crear el contenido escrito de la página para atraer a los espectadores objetivo del sitio.
• El diseñador de experiencia de usuario (UX) incorpora aspectos de diseño centrados en el usuario que incluyen la arquitectura de la información, el diseño centrado en el usuario, las pruebas de usuario, el diseño de interacción y, ocasionalmente, el diseño visual.