Diseño web

Creación y mantenimiento de sitios 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 creación, incluido el código estandarizado y el software propietario ; el diseño de la experiencia del usuario (diseño UX); y la optimización de motores de búsqueda . A menudo, muchas personas trabajarán en equipos que cubren diferentes aspectos del proceso de diseño, aunque algunos diseñadores los cubrirán todos. [1] 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, incluida la redacción del marcado . El diseño web se superpone parcialmente a la ingeniería web en el ámbito más amplio del desarrollo web . Se espera que los diseñadores web tengan conciencia de la usabilidad y estén actualizados con las pautas de accesibilidad web .

Historia

Libros de diseño web en una tienda

1988–2001

Aunque el diseño web tiene una historia bastante reciente, se puede vincular a otras áreas como el diseño gráfico, la experiencia del usuario y las artes multimedia, pero se ve más acertadamente desde un punto de vista tecnológico. Se ha convertido en una gran parte de la vida cotidiana de las personas. Es difícil imaginar Internet sin gráficos animados, diferentes estilos de tipografía , fondos, videos y música. La web se anunció el 6 de agosto de 1991; en noviembre de 1992, CERN fue el primer sitio web en publicarse en la World Wide Web. Durante este período, los sitios web se estructuraron utilizando la etiqueta <table> que creaba números en el sitio web. Con el tiempo, los diseñadores web pudieron encontrar su camino para crear más estructuras y formatos. En la historia temprana, la estructura de los sitios web era frágil y difícil de contener, por lo que se volvió muy difícil usarlos. En noviembre de 1993, ALIWEB fue el primer motor de búsqueda que se creó (Archie Like Indexing for the WEB). [2]

El inicio de la web y el diseño web

En 1989, mientras trabajaba en el CERN , Tim Berners-Lee propuso crear un proyecto de hipertexto global , que más tarde se conocería como World Wide Web . De 1991 a 1993 nació la World Wide Web. Las páginas HTML de solo texto se podían ver utilizando un simple navegador web de modo de línea . [3] En 1993, Marc Andreessen y Eric Bina crearon el navegador Mosaic . En ese momento había varios navegadores, sin embargo, la mayoría de ellos estaban basados ​​en Unix y naturalmente tenían mucho texto. No había un enfoque integrado para elementos de diseño gráfico como imágenes o sonidos . El navegador Mosaic rompió este molde. [4] El W3C se creó en octubre de 1994 para "llevar la World Wide Web a su máximo potencial mediante el desarrollo de protocolos comunes que promuevan su evolución y aseguren su interoperabilidad ". [5] Esto disuadió a cualquier empresa de monopolizar un navegador y un lenguaje de programación propietarios , lo que podría haber alterado el efecto de la World Wide Web en su conjunto. El W3C sigue estableciendo estándares, que hoy se pueden ver en JavaScript y otros lenguajes. En 1994 Andreessen formó Mosaic Communications Corp. que más tarde se conocería como Netscape Communications , el navegador Netscape 0.9 . Netscape creó sus etiquetas HTML sin tener en cuenta el proceso de estándares tradicionales. 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 comenzaron las guerras de navegadores , ya que Microsoft y Netscape lucharon por el dominio definitivo de los navegadores. Durante este tiempo hubo muchas tecnologías nuevas en el campo, en particular Cascading Style Sheets , JavaScript y Dynamic HTML . En general, la competencia de navegadores condujo a muchas creaciones positivas y ayudó al diseño web a evolucionar a un ritmo rápido. [6]

Evolución del diseño web

En 1996, Microsoft lanzó su primer navegador competitivo, que estaba completo con sus características y etiquetas HTML. También fue el primer navegador en soportar hojas de estilo, lo que en ese momento se consideraba una técnica de creación oscura y hoy es un aspecto importante del diseño web. [6] El marcado HTML para tablas fue pensado originalmente para mostrar datos tabulares. Sin embargo, los diseñadores rápidamente se dieron cuenta del potencial de usar tablas HTML para crear diseños complejos de múltiples columnas que de otra manera no eran posibles. En ese momento, como el diseño y la buena estética parecían tener prioridad sobre una buena estructura de marcado, se prestó 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 tuvieron que usar estructuras de tabla complicadas o incluso usar imágenes .GIF con espaciadores en blanco para evitar que las celdas de tabla vacías colapsaran. [7] CSS fue introducido en diciembre de 1996 por el W3C para soportar la presentación y el diseño. Esto permitió que el código HTML fuera semántico en lugar de semántico y presentacional, y mejoró la accesibilidad web (ver diseño web sin tablas) .

En 1996 se desarrolló Flash (originalmente conocido como FutureSplash). En ese momento, la herramienta de desarrollo de contenido Flash era relativamente simple en comparación con la actualidad, ya que utilizaba 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á del HTML, los GIF animados y JavaScript . Sin embargo, debido a que Flash requería un complemento , muchos desarrolladores web evitaron usarlo por temor a limitar su participación en el mercado debido a la falta de compatibilidad. En cambio, los diseñadores volvieron a las animaciones GIF (si no renunciaron por completo al uso de gráficos en movimiento ) y JavaScript para los widgets . Pero los beneficios de Flash lo hicieron lo suficientemente popular entre mercados objetivo específicos como para eventualmente abrirse camino en la gran mayoría de navegadores, y lo suficientemente potente como para ser utilizado para desarrollar sitios completos. [7]

Fin de las primeras guerras de navegadores

En 1998, Netscape lanzó 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 comenzar un estándar para la web desde cero, que guió el desarrollo del navegador de código abierto y pronto se expandió a una plataforma de aplicación completa. [6] Se formó el Proyecto de estándares web y promovió la conformidad del navegador con los estándares HTML y CSS . Se crearon programas como Acid1 , Acid2 y Acid3 para probar el cumplimiento de los navegadores con los estándares web. En 2000, se lanzó Internet Explorer para Mac, que fue el primer navegador que admitió completamente HTML 4.01 y CSS 1. También fue el primer navegador en admitir completamente el formato de imagen PNG . [6] En 2001, después de una campaña de Microsoft para popularizar Internet Explorer, Internet Explorer había alcanzado el 96% de la cuota de uso de navegadores web , lo que significó el final de las primeras guerras de navegadores, ya que Internet Explorer no tenía competencia real. [8]

2001–2012

Desde principios del siglo XXI, la web se ha integrado cada vez más 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 las personas utilizan y acceden a la web, y esto ha cambiado la forma en que se diseñan los sitios.

Desde el final de la guerra de navegadores [ ¿cuándo? ] 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 son más compatibles con los nuevos estándares. Muchos [ palabras confusas ] 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 una como un estándar nuevo pero individual. [ ¿cuándo? ] Si bien el término HTML5 solo se utiliza para referirse a la nueva versión de HTML y algunas de las API de JavaScript, se ha vuelto común usarlo para referirse a todo el conjunto de nuevos estándares (HTML5, CSS3 y JavaScript).

2012 y posteriores

Con los avances en la cobertura de Internet 3G y LTE , una parte importante del tráfico de los sitios web se desplazó a los dispositivos móviles. Este cambio influyó en la industria del diseño web, orientándola hacia un estilo minimalista, más ligero y más simple. Como resultado, surgió el enfoque "mobile first", que enfatiza la creación de diseños de sitios web que priorizan los diseños orientados a dispositivos móviles primero, antes de adaptarlos a pantallas de mayor tamaño.

Herramientas y tecnologías

Los diseñadores web utilizan una variedad de herramientas diferentes según la parte del proceso de producción en la que estén involucrados. Estas herramientas se actualizan con el tiempo con estándares y software más nuevos, pero los principios detrás de ellas siguen siendo los mismos. Los diseñadores web utilizan editores de gráficos vectoriales y rasterizados para crear imágenes con formato web o prototipos de diseño. Se puede crear un sitio web utilizando un software de creación de sitios web WYSIWYG o un sistema de gestión de contenido , o las páginas web individuales se pueden codificar a mano de la misma manera en que se crearon las primeras páginas web. Otras herramientas que los diseñadores web pueden utilizar incluyen validadores de marcado [9] y otras herramientas de prueba de usabilidad y accesibilidad para garantizar que sus sitios web cumplan con las pautas de accesibilidad web. [10]

Diseño UX

Una herramienta popular en el diseño web es el diseño UX, un tipo de arte que diseña productos para que muestren un fondo de usuario preciso. El diseño UX es muy profundo. UX es más que la web, es muy independiente y sus fundamentos se pueden aplicar a muchos otros navegadores o aplicaciones. El diseño web se basa principalmente en cosas basadas en la web. UX puede superponerse tanto al diseño web como al diseño. El diseño UX se centra principalmente en productos que están menos basados ​​en la web. [11]

Habilidades y técnicas

Diseño de marketing y comunicación

El diseño de marketing y comunicación en un sitio web puede identificar lo que funciona para su mercado objetivo. Este puede ser un grupo de edad o una rama particular de la cultura; 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 sitios web de empresa a empresa (B2B) pueden diferir en gran medida de un sitio web dirigido al consumidor, como un sitio web minorista o de entretenimiento. Se puede realizar una consideración cuidadosa para garantizar que la estética o el diseño general de un sitio no entren 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 representa el sitio para asegurarse de que se los represente de manera favorable. Los diseñadores web normalmente supervisan todos los sitios web que se crean y cómo funcionan u operan en las cosas. Constantemente están actualizando y cambiando todo en los sitios web detrás de escena. Todos los elementos que hacen son texto, fotos, gráficos y diseño de la web. Antes de comenzar a trabajar en un sitio web, los diseñadores web suelen concertar una cita con sus clientes para hablar sobre el diseño, el color, los gráficos y el diseño. Los diseñadores web pasan la mayor parte de su tiempo diseñando sitios web y asegurándose de que la velocidad sea la adecuada. Los diseñadores web suelen dedicarse a realizar pruebas y trabajos, a comercializar y a comunicarse con otros diseñadores sobre el diseño de los sitios web y la búsqueda de los elementos adecuados para ellos. [13]

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

La comprensión del usuario del contenido de un sitio web a menudo depende de la comprensión del usuario de cómo funciona el sitio web. Esto es 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. Lo bien que un usuario entiende 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 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 tienen menos probabilidades de ver 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 facilidad de acceso para acomodar a tantos usuarios como sea posible independientemente de la habilidad del usuario. [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 de usuario .

Las funciones interactivas avanzadas pueden requerir complementos si no se necesitan conocimientos avanzados de lenguaje de codificación. Elegir si se debe o no utilizar interactividad que requiera complementos es una decisión crítica 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 para instalar un complemento solo para acceder al contenido. Si la función requiere conocimientos avanzados de lenguaje de codificación, puede resultar demasiado costosa en tiempo o dinero para codificarla en comparación con la cantidad de mejoras que la función agregará a la experiencia del usuario. También existe el riesgo de que la interactividad avanzada sea incompatible con navegadores más antiguos o configuraciones de hardware. Publicar una función que no funciona de manera confiable es potencialmente peor para la experiencia del usuario que no intentarlo. Depende del público objetivo si es probable que sea necesaria o si vale la pena correr el riesgo.

Mejora progresiva

El orden de mejora progresiva

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

En la práctica, esto significa servir contenido a través de HTML y aplicar estilos y animaciones a través de CSS en la medida 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 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]

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

Diseño de página

Parte del diseño de la interfaz de usuario se ve afectado por la calidad del diseño de la página . Por ejemplo, un diseñador puede considerar si el diseño de la página del sitio debe permanecer consistente en diferentes páginas al diseñar el diseño. El ancho de píxel de la página también puede considerarse vital para alinear los objetos en el diseño del diseño. Los sitios web de ancho fijo más populares generalmente tienen el mismo ancho establecido para que coincida con la ventana del navegador más popular en la actualidad, con la resolución de pantalla más popular en la actualidad y con el tamaño de monitor más popular en la actualidad. La mayoría de las páginas también están alineadas al centro por cuestiones de estética en pantallas más grandes.

Los diseños fluidos se hicieron populares alrededor del año 2000 para permitir que el navegador pudiera realizar ajustes de diseño específicos para el usuario en diseños fluidos basados ​​en 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 al diseño basado en cuadrículas tanto en los principios de diseño de la disposición de la página como en la técnica de codificación, pero su adopción fue muy lenta. [nota 1] Esto se debió a consideraciones sobre los dispositivos de lectura de pantalla y los diferentes tamaños de las ventanas, sobre los que los diseñadores no tienen control. En consecuencia, un diseño se puede dividir en unidades (barras laterales, bloques de contenido, áreas de publicidad integradas , áreas de navegación) que se envían al navegador y que el navegador ajustará en la ventana de visualización lo mejor que pueda. Aunque una visualización de este tipo a menudo puede cambiar la posición relativa de las unidades de contenido principales, las barras laterales se pueden desplazar debajo del cuerpo del texto en lugar de a un lado. Esta es una visualización más flexible que un diseño basado en cuadrícula codificado de forma rígida que no se ajusta a la ventana del dispositivo. En particular, la posición relativa de los bloques de contenido puede cambiar sin afectar el contenido dentro del bloque. Esto también minimiza la necesidad del usuario de desplazarse horizontalmente por la página.

El diseño web adaptable es un enfoque más nuevo, 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 @mediaregla CSS. En marzo de 2018, Google anunció que implementaría la indexación para dispositivos móviles. [16] Los sitios que utilizan diseño adaptable están bien posicionados para garantizar que cumplan con este nuevo enfoque.

Tipografía

Los diseñadores web pueden optar por limitar la variedad de fuentes de un sitio web a solo unas pocas que tengan un estilo similar, en lugar de utilizar una amplia gama de fuentes o estilos de letra . La mayoría de los navegadores reconocen una cantidad específica de fuentes seguras, que los diseñadores utilizan principalmente para evitar complicaciones.

La descarga de fuentes se incluyó más tarde 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 aumentado posteriormente el interés en la tipografía web , así como el uso de la descarga de fuentes.

La mayoría de los diseños de sitios incorporan espacios negativos para dividir el texto en párrafos y también evitar el texto alineado al centro. [17]

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

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]

Calidad del código

Los diseñadores de sitios web pueden considerar que es una buena práctica cumplir con los estándares. Esto se hace generalmente a través de una descripción que especifica lo que hace el elemento. El incumplimiento de los estándares puede no hacer que un sitio web sea inutilizable o propenso a errores, pero los estándares pueden relacionarse con el diseño correcto de las páginas para facilitar su lectura, así como con asegurarse de que los elementos codificados se cierren adecuadamente. Esto incluye errores en el código, un diseño más organizado para el código y asegurarse de que los identificadores y las clases se identifiquen correctamente. 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 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 los estándares de diseño web. Esta información puede ser corregida por el usuario. [19]

Contenido generado

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

Sitios web estáticos

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 sola vez, durante el diseño del sitio web. Por lo general, se crea manualmente, aunque algunos sitios utilizan un proceso de creación automatizado, similar a un sitio web dinámico, cuyos resultados se almacenan a largo plazo como páginas completadas. Estos sitios estáticos creados automáticamente se volvieron más populares alrededor de 2015, con generadores como Jekyll y Adobe Muse . [20]

Las ventajas de un sitio web estático son que era más sencillo alojarlo, ya que su servidor solo necesitaba ofrecer 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 ofrecer páginas más rápidamente, en hardware de servidor de bajo costo. Esta ventaja perdió importancia a medida que el alojamiento web barato se expandió para ofrecer también funciones dinámicas, y los servidores virtuales ofrecían un alto rendimiento durante intervalos cortos a bajo costo.

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

Sitios web dinámicos

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

En el proceso de diseño, las páginas dinámicas suelen ser maquetadas o creadas a partir de páginas estáticas. El conjunto de habilidades necesarias para desarrollar páginas web dinámicas es mucho más amplio que para una página estática, ya que implica 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 lo tanto, incluso los proyectos dinámicos de tamaño mediano casi siempre son un trabajo en equipo.

Cuando se desarrollaron las primeras páginas web dinámicas, normalmente se codificaban directamente en lenguajes como Perl , PHP o ASP . Algunos de ellos, en particular PHP y ASP, utilizaban un enfoque de "plantilla" en el que una página del lado del servidor se parecía a la estructura de la página completa del lado del cliente y los datos se insertaban en lugares definidos por "etiquetas". Este era un medio de desarrollo más rápido que la codificación en un lenguaje de codificación puramente procedimental como Perl.

En muchos sitios web, ambos enfoques han sido reemplazados por herramientas de nivel superior centradas en aplicaciones, como los sistemas de gestión de contenido . Estos se basan en plataformas de codificación de uso general y suponen que un sitio web existe para ofrecer contenido de acuerdo con uno de varios modelos reconocidos, como un blog secuenciado en el tiempo , una revista temática o un sitio de noticias, una wiki o un foro de usuarios. Estas herramientas hacen que la implementación de un sitio de este tipo sea muy sencilla y una tarea puramente organizativa y basada en el diseño, sin necesidad de codificación.

La edición del contenido en sí (así como de la página de plantilla) se puede realizar tanto a través del propio sitio como con el uso de software de terceros. La capacidad de editar todas las páginas se proporciona solo a una categoría específica de usuarios (por ejemplo, administradores o usuarios registrados). En algunos casos, a los usuarios anónimos se les permite editar cierto contenido web, lo que es menos frecuente (por ejemplo, en foros, agregando mensajes). Un ejemplo de un sitio con un cambio anónimo es Wikipedia .

Comunicación técnica en el diseño web

Los autores de un artículo de investigación analizan en profundidad qué hace que la comunicación técnica sea eficaz. Presentan un método de medición llamado coeficiente de comunicación, que mide la calidad de la comunicación de conceptos técnicos complejos. Especifican específicamente tres filosofías que, en su opinión, conducen a una buena comunicación técnica:

  1. Filosofía 1: La forma en que nos comunicamos afecta la forma en que los demás perciben nuestro trabajo. Lo perciben como más válido y útil cuando lo comunicamos bien y menos cuando lo comunicamos mal.
  2. Filosofía 2: Los individuos juzgan la calidad de la comunicación basándose en una serie de factores personales, incluidas sus experiencias, preferencias, formación técnica, formación lingüística y membresía en grupos profesionales.
  3. Filosofía 3: La comunicación es importante durante todas las interacciones interpersonales, en distintos grados.

Los autores no dan indicaciones claras de una aplicación específica, pero ofrecen un marco claro y conciso para una comunicación técnica eficaz.

En un estudio adicional sobre políticas de privacidad, los autores presentan una alternativa al acuerdo de privacidad. Proponen un enfoque más visual y basado en el usuario, en contraposición a los clásicos acuerdos de privacidad redactados en extenso. Este enfoque implica “clasificaciones de privacidad” que pertenecen a categorías y están claramente representadas jerárquicamente. Esta representación deja claro qué información se está compartiendo y cuán seguro es un sitio web de una manera más fácil de usar. Sus resultados muestran una respuesta generalmente positiva de su grupo de muestra y destacan la utilidad de una estructura de este tipo en el diseño de sitios web.

Diseño de página de inicio

Los expertos en usabilidad, entre ellos Jakob Nielsen y Kyle Soucy, han hecho hincapié a menudo en el diseño de la página de inicio para el éxito de un sitio web y han afirmado que la página de inicio es la página más importante de un sitio web. [21] Nielsen, Jakob; Tahir, Marie (octubre de 2001), Homepage Usability: 50 Websites Deconstructed, New Riders Publishing, ISBN 978-0-7357-1102-0[22] [23] Sin embargo, a principios de los años 2000, los profesionales comenzaron a descubrir que una cantidad cada vez mayor de tráfico de sitios web pasaba por alto la página de inicio y se dirigía directamente a las páginas de contenido interno a través de motores de búsqueda, boletines electrónicos y canales RSS. [24] 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. [25] [26] [27] [28] 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. [29]

En 2012 y 2013, los carruseles (también llamados "sliders" y "banners rotatorios") se han convertido en un elemento de diseño extremadamente popular en las páginas de inicio, a menudo utilizados para mostrar contenido destacado o reciente en un espacio reducido. [30] 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. [30] [31] [32]

Ocupaciones

Hay dos trabajos principales involucrados en la creación de un sitio web: el diseñador web y el desarrollador web , quienes a menudo trabajan en estrecha colaboración en un sitio web. [33] 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 tendrán un conocimiento práctico de lenguajes de marcado como HTML y CSS, aunque el alcance de su conocimiento variará de un diseñador web a otro. Particularmente en organizaciones más pequeñas, una persona necesitará las habilidades necesarias para diseñar y programar la página web completa, mientras que las organizaciones más grandes pueden tener un diseñador web responsable solo del aspecto visual.

Otros trabajos que pueden estar implicados en la creación de un sitio web incluyen:

  • Diseñadores gráficos para crear elementos visuales para el sitio, como logotipos, diseños y botones.
  • Especialistas en marketing de Internet que ayudan a mantener la presencia en la web a través de soluciones estratégicas para atraer visitantes al sitio, mediante técnicas de marketing y promoción en Internet.
  • Los redactores de SEO investigan y recomiendan las palabras correctas que se deben incorporar a un sitio web en particular y hacer que el sitio web sea más accesible y se pueda encontrar 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 [1]
  • El diseñador de experiencia de usuario (UX) incorpora aspectos de consideraciones de diseño centradas en el usuario que incluyen arquitectura de la información, diseño centrado en el usuario, pruebas de usuario, diseño de interacción y, ocasionalmente, diseño visual.

Véase también

Notas

  1. Imágenes GIF con espaciadores y marcado basado en ^<table>

Referencias

  1. ^ ab Lester, Georgina. "Diferentes trabajos y responsabilidades de las distintas personas involucradas en la creación de un sitio web". Arts Wales UK . Consultado el 17 de marzo de 2012 .
  2. ^ CPBI, Ryan Shelley. "La historia del diseño de sitios web: 30 años de creación de la Web [actualización de 2022]". www.smamarketing.net . Consultado el 12 de octubre de 2022 .
  3. ^ "Biografía más larga" . Consultado el 16 de marzo de 2012 .
  4. ^ "Navegador de mosaicos" (PDF) . Archivado desde el original (PDF) el 2013-09-02 . Consultado el 2012-03-16 .
  5. ^ Zwicky, ED; Cooper, S; Chapman, DB (2000). Construcción de cortafuegos para Internet. Estados Unidos: O'Reily & Associates. pág. 804. ISBN 1-56592-871-7.
  6. ^ abcd Niederst, Jennifer (2006). Diseño web en pocas palabras. Estados Unidos de América: O'Reilly Media. págs. 12-14. ISBN 0-596-00987-9.
  7. ^ de Chapman, Cameron, La evolución del diseño web, seis revisiones, archivado desde el original el 30 de octubre de 2013
  8. ^ "AMO.NET America's Multimedia Online (VISTA PREVIA de Internet Explorer 6)". amo.net . Consultado el 27 de mayo de 2020 .
  9. ^ ab "Servicio de validación de marcado W3C".
  10. ^ W3C. "Iniciativa de Accesibilidad Web (WAI)".{{cite web}}: CS1 maint: nombres numéricos: lista de autores ( enlace )
  11. ^ "¿Qué es el diseño web?". The Interaction Design Foundation . Consultado el 12 de octubre de 2022 .
  12. ^ THORLACIUS, LISBETH (2007). "El papel de la estética en el diseño web". Nordicom Review . 28 (28): 63–76. doi : 10.1515/nor-2017-0201 . S2CID  146649056.
  13. ^ "¿Qué es un diseñador web? (Guía 2022)". BrainStation® . Consultado el 28 de octubre de 2022 .
  14. ^ Castañeda, JA Francisco; Muñoz-Leiva, Teodoro Luque (2007). "Modelo de aceptación web (WAM): efectos moderadores de la experiencia del usuario". Información y Gestión . 44 (4): 384–396. doi :10.1016/j.im.2007.02.003.
  15. ^ "Construcción de una interfaz resistente mediante mejoras progresivas". GOV.UK . Consultado el 27 de octubre de 2021 .
  16. ^ "Implementación de la indexación orientada a dispositivos móviles". Blog oficial de Google Webmaster Central . Consultado el 9 de junio de 2018 .
  17. ^ Stone, John (16 de noviembre de 2009). "20 consejos y advertencias para una tipografía web eficaz" . Consultado el 19 de marzo de 2012 .
  18. ^ Consorcio World Wide Web: Comprensión de las pautas de accesibilidad al contenido web 2.2.2: Pausar, detener, ocultar
  19. ^ Control de calidad del W3C. "¡Mi sitio web es estándar! ¿Y el tuyo?" . Consultado el 21 de marzo de 2012 .{{cite web}}: CS1 maint: nombres numéricos: lista de autores ( enlace )
  20. ^ Christensen, Mathias Biilmann (16 de noviembre de 2015). "Revisión de generadores de sitios web estáticos: Jekyll, Middleman, Roots, Hugo". Smashing Magazine . Consultado el 26 de octubre de 2016 .
  21. ^ Soucy, Kyle, ¿Su página de inicio está haciendo lo que debería?, Interfaz utilizable, archivado desde el original el 8 de junio de 2012
  22. ^ Nielsen, Jakob (10 de noviembre de 2003), Las diez pautas de diseño de páginas de inicio más infringidas, Nielsen Norman Group, archivado desde el original el 5 de octubre de 2013
  23. ^ Knight, Kayla (20 de agosto de 2009), Consejos esenciales para diseñar una página de inicio eficaz, seis revisiones, archivado desde el original el 21 de agosto de 2013
  24. ^ Spool, Jared (29 de septiembre de 2005), ¿Es relevante todavía el diseño de la página de inicio?, Ingeniería de interfaz de usuario, archivado desde el original el 16 de septiembre de 2013
  25. ^ Chapman, Cameron (15 de septiembre de 2010), 10 consejos de usabilidad basados ​​en estudios de investigación, seis revisiones, archivado desde el original el 2 de septiembre de 2013
  26. ^ Gócza, Zoltán, Mito nº 17: La página de inicio es tu página más importante, archivado desde el original el 2 de junio de 2013
  27. ^ McGovern, Gerry (18 de abril de 2010), El declive de la página de inicio, archivado desde el original el 24 de mayo de 2013
  28. ^ Porter, Joshua (24 de abril de 2006), Priorizar el tiempo de diseño: un enfoque de cola larga, Ingeniería de interfaz de usuario, archivado desde el original el 14 de mayo de 2013
  29. ^ Spool, Jared (6 de agosto de 2007), Podcast de herramientas de usabilidad: diseño de la página de inicio, archivado del original el 29 de abril de 2013
  30. ^ ab Messner, Katie (22 de abril de 2013), Carruseles de imágenes: cómo controlar el tiovivo, Usability.gov, archivado desde el original el 10 de octubre de 2013
  31. ^ Jones, Harrison (19 de junio de 2013), Homepage Sliders: Bad For SEO, Bad For Usability, archivado desde el original el 22 de noviembre de 2013
  32. ^ Laja, Peep (8 de junio de 2019), Carruseles y controles deslizantes de imágenes: no los use (aquí explicamos por qué), CXL, archivado del original el 10 de diciembre de 2019
  33. ^ Oleksy, Walter (2001). Carreras en diseño web . Nueva York: The Rosen Publishing Group, Inc., págs. 9-11. ISBN 978-0-8239-3191-0.
  • Consorcio W3C para estándares web
Obtenido de "https://es.wikipedia.org/w/index.php?title=Diseño_web&oldid=1251944196"