Diseño web

Aunque el diseño web tiene una historia relativamente reciente, se puede vincular con otras áreas como el diseño gráfico, la experiencia de usuario y las artes multimedia, pero se entiende mejor 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. La World Wide Web se anunció el 6 de agosto de 1991; en noviembre de 1992, el CERN fue el primer sitio web en publicarse en la World Wide Web. Durante este período, los sitios web se estructuraban mediante <table>etiquetas, que creaban números en el sitio web. Con el tiempo, los diseñadores web lograron encontrar la manera de sortear este sistema para crear más estructuras y formatos. En los inicios de la web, la estructura de los sitios web era frágil y difícil de gestionar, por lo que su uso resultaba muy complicado. En noviembre de 1993, ALIWEB fue el primer motor de búsqueda creado. ^{[ 2 ]}

Evolución del diseño web

En 1996, Microsoft lanzó su primer navegador competitivo, que incluía todas sus características y etiquetas HTML. También fue el primer navegador en admitir hojas de estilo, que en ese momento se consideraban una técnica de autoría oscura y que hoy en día son un aspecto importante del diseño web. ^{[ 6 ]} El marcado HTML para tablas se concibió originalmente para mostrar datos tabulares. Sin embargo, los diseñadores pronto se dieron cuenta del potencial de usar tablas HTML para crear diseños complejos de varias columnas que de otro modo no serían posibles. En ese momento, como el diseño y la buena estética parecían tener prioridad sobre una buena estructura de marcado, se prestaba poca atención a la semántica y la accesibilidad web . Los sitios HTML tenían opciones de diseño limitadas, aún más con las versiones anteriores de HTML. Para crear diseños complejos, muchos diseñadores web tenían que usar estructuras de tabla complicadas o incluso usar imágenes .GIF espaciadoras en blanco para evitar que las celdas vacías de la tabla se colapsaran. ^{[ 7 ]} CSS fue introducido en diciembre de 1996 por el W3C para admitir la presentación y el diseño. Esto permitió que el código HTML fuera semántico en lugar de ser tanto semántico como presentacional, y mejoró la accesibilidad web; véase diseño web sin tablas .

En 1996, se desarrolló Flash (originalmente conocido como FutureSplash). En aquel entonces, la herramienta de desarrollo de contenido Flash era relativamente simple en comparación con la actualidad, utilizando herramientas básicas de diseño y dibujo, un precursor limitado de ActionScript y una línea de tiempo, pero permitió a los diseñadores web ir más allá de HTML, GIF animados y JavaScript . Sin embargo, debido a que Flash requería un complemento , muchos desarrolladores web evitaron usarlo por temor a limitar su cuota de mercado debido a la falta de compatibilidad. En su lugar, los diseñadores volvieron a las animaciones GIF (si no renunciaron por completo al uso de gráficos en movimiento ) y JavaScript para widgets . Pero las ventajas de Flash lo hicieron lo suficientemente popular en mercados objetivo específicos como para llegar a la gran mayoría de los navegadores, y lo suficientemente potente como para usarse para desarrollar sitios completos. ^{[ 7 ]}

Desde principios del siglo XXI, la web se ha integrado cada vez más en la vida de las personas. Paralelamente, la tecnología web también ha evolucionado. Asimismo, se han producido cambios significativos en la forma en que las personas usan y acceden a la web, lo que ha modificado el diseño de los sitios web.

Desde el fin de la guerra de navegadores, se han lanzado nuevos navegadores. Muchos de ellos son de código abierto , lo que significa que suelen tener un desarrollo más rápido y son más compatibles con los nuevos estándares. Muchos consideran que las nuevas opciones son mejores que 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 como un estándar nuevo e independiente. Si bien el término HTML5 se utiliza únicamente para referirse a la nueva versión de HTML y algunas de las API de JavaScript, se ha vuelto común usarlo para referirse al conjunto completo de nuevos estándares (HTML5, CSS3 y JavaScript).

Con los avances en la cobertura de internet 3G y LTE , una parte significativa del tráfico web se trasladó a los dispositivos móviles. Este cambio influyó en la industria del diseño web, orientándola hacia un estilo más ligero y minimalista. Como resultado, surgió el enfoque "mobile first", que prioriza la creación de diseños web adaptados a dispositivos móviles antes de ajustarlos a pantallas más grandes.

Una herramienta popular en el diseño web es el diseño UX. Una modalidad popular del arte del diseño web moderno, se caracteriza por una interfaz fácil de usar y una presentación adecuada. ^{[ 11 ]}

El diseño de marketing y comunicación en un sitio web puede identificar qué funciona para su mercado objetivo. Este puede ser un grupo de edad o una corriente cultural particular; por lo tanto, el diseñador puede comprender las tendencias de su audiencia. Los diseñadores también pueden comprender el tipo de sitio web que están diseñando, lo que significa, por ejemplo, que las consideraciones de diseño de un sitio web de empresa a empresa (B2B) pueden diferir mucho de un sitio web dirigido al consumidor, como un sitio web de venta minorista o de entretenimiento. Se puede hacer una consideración cuidadosa para asegurar que la estética o el diseño general de un sitio no entre en conflicto con la claridad y precisión del contenido o la facilidad de navegación web , ^{[ 12 ]} especialmente en un sitio web B2B. Los diseñadores también pueden considerar la reputación del propietario o la empresa que el sitio representa para asegurarse de que se les represente favorablemente. Los diseñadores web normalmente supervisan el desarrollo de los sitios con respecto a su funcionamiento, a menudo iniciando cambios según lo requieran las necesidades del negocio. Pueden cambiar elementos como texto, fotos, gráficos y diseño. Antes de comenzar a trabajar en un sitio web, los diseñadores web normalmente programan una cita con sus clientes para discutir el diseño, el color, los gráficos y el diseño. Los diseñadores web dedican la mayor parte de su tiempo a diseñar sitios y garantizar su correcto funcionamiento. Suelen participar en pruebas y comunicarse con otros diseñadores sobre cuestiones de marketing, diseño y composición de los sitios web. ^{[ 13 ]}

La comprensión que tiene el usuario del contenido de un sitio web a menudo depende de su comprensión de cómo funciona el sitio. 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. El grado de comprensión que tiene un usuario sobre cómo puede interactuar en un sitio también puede depender del diseño interactivo del sitio. Si un usuario percibe la utilidad del sitio web, es más probable que continúe usándolo. Los usuarios que son hábiles y están familiarizados con 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, es menos probable que los usuarios con menos experiencia vean las ventajas o la utilidad de una interfaz de sitio web menos intuitiva. Esto impulsa la tendencia hacia una experiencia de usuario más universal y una facilidad de acceso para dar cabida a la mayor cantidad de usuarios posible, independientemente de su habilidad. ^{[ 14 ]} Gran parte del diseño de la experiencia del usuario y el diseño interactivo se consideran en el diseño de la interfaz del usuario .

Las funciones interactivas avanzadas pueden requerir complementos si no se poseen conocimientos avanzados de programación. Decidir si utilizar o no interactividad que requiera complementos es una decisión crucial en el diseño de la experiencia del usuario. Si el complemento no viene preinstalado en la mayoría de los navegadores, existe el riesgo de que el usuario no tenga ni los conocimientos ni la paciencia necesarios para instalarlo solo para acceder al contenido. Si la función requiere conocimientos avanzados de programación, su desarrollo puede resultar demasiado costoso, tanto en tiempo como en dinero, en comparación con la mejora que aportará 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 funcione correctamente puede ser peor para la experiencia del usuario que no intentarlo. Depende del público objetivo si es probable que sea necesaria o si merece la pena correr algún riesgo.

La mejora progresiva es una estrategia de diseño web que prioriza el contenido web , permitiendo que todos accedan al contenido y la funcionalidad básicos de una página web, mientras que los usuarios con funciones adicionales del navegador o un acceso a Internet más rápido reciben la versión mejorada.

En la práctica, esto significa servir el contenido a través de HTML y aplicar estilos y animaciones a través de CSS en la medida de lo técnicamente posible, para luego aplicar mejoras adicionales a través de JavaScript . El texto de las páginas se carga inmediatamente a través del código fuente HTML en lugar de tener que esperar a que JavaScript se inicie y cargue el contenido posteriormente, lo que permite que el contenido sea legible con un tiempo de carga y un ancho de banda mínimos, y a través de navegadores basados ​​en texto , y maximiza la compatibilidad con versiones anteriores . ^{[ 15 ]}

Por ejemplo, los sitios basados ​​en MediaWiki , como Wikipedia, utilizan la mejora progresiva, ya que siguen siendo utilizables incluso cuando JavaScript e incluso CSS están desactivados, puesto que el contenido de las páginas se incluye en el código fuente HTML de la página, mientras que, como contraejemplo, Everipedia depende de JavaScript para cargar el contenido de las páginas posteriormente; aparece una página en blanco cuando JavaScript está desactivado.

Parte del diseño de la interfaz de usuario se ve afectado por la calidad del diseño de la página . Por ejemplo, al diseñar la maquetación, un diseñador puede considerar si el diseño de la página debe ser consistente en las diferentes páginas. El ancho en píxeles de la página también puede ser fundamental para alinear los objetos en el diseño. Los sitios web de ancho fijo más populares suelen tener el mismo ancho preestablecido para adaptarse a la ventana del navegador más popular, con la resolución de pantalla más popular y el tamaño de monitor más popular. La mayoría de las páginas también están centradas por motivos estéticos en pantallas grandes.

Los diseños fluidos aumentaron su popularidad alrededor del 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 fuente en relación con la ventana, etc.). Surgieron como una alternativa a los diseños basados ​​en tablas HTML y en cuadrículas, tanto en los principios de diseño de maquetación como en las técnicas de codificación, pero su adopción fue muy lenta. ^{[ nota 1 ]} Esto se debió a las consideraciones sobre los dispositivos de lectura de pantalla y los diferentes tamaños de ventana sobre los que los diseñadores no tienen control. En consecuencia, un diseño puede dividirse en unidades (barras laterales, bloques de contenido, áreas publicitarias integradas , áreas de navegación) que se envían al navegador y que este ajustará a la ventana de visualización lo mejor posible. Aunque dicha visualización a menudo puede cambiar la posición relativa de las unidades de contenido principales, las barras laterales pueden desplazarse debajo del texto principal en lugar de a un lado. Esta es una visualización más flexible que un diseño basado en cuadrículas codificado que no se ajusta a la ventana del dispositivo. En concreto, la posición relativa de los bloques de contenido puede cambiar sin afectar al contenido que contienen. Esto también minimiza la necesidad de que el usuario desplace la página horizontalmente.

El diseño web responsivo es un enfoque más reciente, basado en CSS3, que ofrece un nivel más profundo de especificación por dispositivo dentro de la hoja de estilos de la página mediante un uso mejorado de las @mediareglas CSS. En marzo de 2018, Google anunció que implementaría la indexación prioritaria para móviles. ^{[ 16 ]} Los sitios que utilizan diseño responsivo están bien posicionados para garantizar que cumplan con este nuevo enfoque.

Los diseñadores web pueden optar por limitar la variedad de tipografías a solo unas pocas de estilo similar, en lugar de utilizar una amplia gama de fuentes 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 CSS3 y desde entonces se ha implementado en Safari 3.1, Opera 10 y Mozilla Firefox 3.5 . Esto ha incrementado 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 evitan el texto centrado. ^{[ 17 ]}

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 utilizarlos o no puede depender del público objetivo del sitio web. Es probable que se esperen gráficos en movimiento, o al menos que sean mejor recibidos, en un sitio web orientado al entretenimiento. Sin embargo, un público objetivo con un interés más serio o formal (como empresas, comunidades o gobiernos) podría considerar las animaciones innecesarias y distractoras, incluso si solo tienen fines de entretenimiento o decoración. Esto no significa que el contenido más serio no pueda mejorarse con presentaciones animadas o de video relevantes. En cualquier caso, el diseño de gráficos en movimiento puede marcar la diferencia entre imágenes más efectivas y otras que distraen.

Los gráficos en movimiento que no son iniciados por el visitante del sitio pueden generar problemas de accesibilidad. Los estándares de accesibilidad del consorcio World Wide Web exigen que los visitantes del sitio puedan desactivar las animaciones. ^{[ 18 ]}

Los diseñadores web pueden considerar una buena práctica cumplir con los estándares. Esto generalmente se hace mediante una descripción que especifica la función del elemento. El incumplimiento de los estándares no necesariamente hace que un sitio web sea inutilizable o propenso a errores, pero los estándares pueden estar relacionados con el diseño correcto de las páginas para una mejor legibilidad, así como con asegurar que las etiquetas se cierren adecuadamente. Esto incluye errores en el código, un diseño más organizado para el código y la correcta identificación de los ID y las clases. Las páginas mal codificadas a veces se denominan coloquialmente " sopa de etiquetas" . La validación a través de W3C ^{[ 9 ]} solo se puede realizar cuando se realiza una declaración de doctype correcta , que se utiliza para resaltar los errores en el código. El sistema identifica los errores y las áreas que no cumplen con los estándares de diseño web. Esta información puede ser corregida por el usuario. ^{[ 19 ]}

Existen dos formas de generar sitios web: de forma estática o dinámica.