Diseño web

El diseño web es una actividad que consiste en planificar, diseñar, implementar y mantener sitios web. No se trata simplemente de la implementación del diseño convencional, ya que abarca diferentes aspectos como el diseño gráfico web, el diseño de interfaces y la experiencia del usuario, como la navegabilidad, la interactividad, la usabilidad, la arquitectura de la información; la interacción con los medios de comunicación, entre los que podemos mencionar el audio, el texto, la imagen, los enlaces, el vídeo y la optimización para buscadores. A menudo muchas personas trabajan en equipos que cubren los diferentes aspectos del proceso de diseño, aunque hay algunos diseñadores independientes que trabajan solos.

La unión de un buen diseño con una jerarquía de contenidos bien elaborada, aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, lo que ofrece posibilidades como el contacto directo entre el productor y el consumidor de contenidos.

El diseño web ha tenido una amplia aplicación en los sectores comerciales de Internet, especialmente en la World Wide Web. La web se utiliza a menudo como medio de expresión plástica en sí misma. Los artistas y creadores hacen de las páginas de Internet un medio adicional para ofrecer sus producciones y utilizarlas como canal de difusión de su obra.

Diseño web aplicado

El diseño de páginas web es la construcción de documentos de hipertexto para su visualización en diferentes navegadores. Además de asignar una presentación para diferentes dispositivos de salida (en una pantalla de ordenador, en papel, en un teléfono móvil, etc.).

Estos documentos o páginas web pueden ser creados:

• Creación de archivos de texto en HTML, Asp, Aspx, Aspx, JavaScript, JSP, Python, Ruby.
• Usando un programa de creación de páginas visuales WYSIWYG o WYSIWYM.
• Usando scripts del lado del servidor para generar la página web.

Etapas del diseño de paginas web

Para el diseño de las páginas web debemos tener en cuenta tres etapas:

• El diseño visual de la información a editar. En esta etapa, el trabajo se realiza distribuyendo el texto, los gráficos, los enlaces a otros documentos y otros objetos multimedia que se consideran relevantes. Es importante que se haga un boceto o prediseño antes de «escribir» el sitio web. Esto hará más fácil tener un orden claro sobre el diseño.
• Estructura y relación jerárquica de las páginas del sitio web. Para ello, y fundamentalmente para manejar los enlaces entre documentos, se creó el lenguaje de marcado de hipertexto o HTML. La importancia de la estructura web y de la estructura de árbol radica en el hecho de que los usuarios no siempre acceden a la página principal o de inicio y, en ese caso, el sitio debe responder rápidamente a lo que buscan, además de permitirles navegar por el sitio.
• Posicionamiento en buscadores o SEO. Consiste en optimizar la estructura del contenido para mejorar la posición en la que aparece la página en una búsqueda determinada.
• El HTML consiste en una serie de elementos que estructuran el texto y se presentan en forma de hipertexto por medio de agentes de usuario o navegadores. Esto se puede hacer con un simple editor de texto (debe ser guardado como texto plano, sin formato y con extensión.html o.htm). Aprender HTML es relativamente fácil, por lo que es fácil crear páginas web de esta manera. Esta fue la única forma de generarlas hasta que a mediados de 1996 aparecieron algunos editores HTML visuales como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque es recomendable), por lo que el desarrollador se concentra en lo más importante, el diseño del documento.

Un buen diseño web es aquel que considera dentro de su desarrollo tanto los elementos básicos del diseño gráfico (maquetación, color, gráficos y fuentes) como los fundamentos técnicos (estructura, compatibilidad, funcionalidad e interactividad) para crear tanto el impacto visual como la experiencia de usuario óptima para la asimilación de los contenidos.

Fundamentos del diseño web

El diseño web implica saber utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por el W3C y en relación con la web semántica. Debido a la permisibilidad de algunos navegadores como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador hace innecesario cerrar las etiquetas de marcado, utiliza código propietario, etc. Esto impide que este documento web sea universal e independiente del medio utilizado para visualizarlo.

La web semántica, por su parte, aboga por un uso lógico de los elementos en función del sentido para el que fueron concebidos. Por ejemplo, el elemento <P> se usará para marcar párrafos, y <TABLE> para tabular datos (nunca para organizar visualmente los diferentes elementos del documento). En última instancia, esto ha supuesto una verdadera revolución en el diseño web, ya que se ha comprometido a separar completamente el contenido del documento de la visualización.

De esta manera, el documento HTML sólo se utiliza para contener, organizar y estructurar la información y las hojas de estilo CSS para indicar cómo se mostrará esta información en los diferentes medios (como un monitor de ordenador, un teléfono móvil, impreso en papel, leído por un sintetizador de voz, etc.). Lógicamente, esta metodología beneficia enormemente la accesibilidad del documento.

También existen páginas dinámicas, que permiten la interacción entre la web y el visitante, proporcionando herramientas como motores de búsqueda, salas de chat, foros, sistemas de encuestas, etc. y disponen de un panel de control para la gestión de contenidos. Le permite crear, actualizar y administrar cantidades ilimitadas de contenido en él.

Historia del diseño web

Originalmente era sólo texto, pero a medida que la tecnología ha ido evolucionando, tanto los ordenadores como las redes de telecomunicaciones han generado nuevas formas de desarrollar la web. La inclusión de imágenes fue la más significativa, pero también hay que mencionar el vídeo y la animación, o los espacios 3D, que aportan valores estilísticos, de diseño e interactividad nunca antes imaginados.

El diseño web se ha desarrollado a medida que Internet ha evolucionado. Las estadísticas (2005) muestran que el número de sitios web es de unos 8.000 millones, a los que añadimos unos 4.400 millones diarios.

Rápidamente, su importancia alcanzará las mismas proporciones que la televisión o el teléfono. Datos recientes estiman que hay alrededor de dos mil millones de páginas publicadas y se espera que alcance los ocho mil millones en los próximos años, superando el número de habitantes del planeta. Sin embargo, sólo una fracción de este número es visitada regularmente por la mayoría de los usuarios (sólo unos 15 000 sitios web, el 0,4% del total).

A partir de estos datos es posible entender la necesidad de concentrar esfuerzos para atraer y mantener la atención de los usuarios. Junto con un desarrollo efectivo de la estructura y contenido de la web, el diseño y uso del color es la clave para atraer y ser identificado, formando enlaces en el subconsciente del usuario y generando esquemas para atraer y retener nuevos visitantes.

Al mismo tiempo que la evolución de los dispositivos y su introducción en los hogares, la calidad de las transmisiones por Internet también ha aumentado y su precio ha caído. Como la tecnología ha resuelto estas dificultades, ya no nos enfrentamos a problemas de forma, sino de contenido.

HTML 5

La última versión de este lenguaje básico corresponde a HTML5, donde se introducen nuevos elementos para mejorar la navegación y usabilidad de los sitios web en diferentes navegadores, como el uso de <header>, <canvas>, <video>, <section>, <article>, <nav> y <footer>.

Esta nueva versión no sólo consiste en cambiar y eliminar las etiquetas. Va mucho más allá de eso.

Cada sitio web tiene elementos que se utilizan. El encabezado, las barras laterales, el pie de página, los menús de navegación se utilizarán en esta nueva versión como etiquetas ya establecidas, proporcionando una mejora en la intuición para el desarrollo.

Además, una de las mayores mejoras es el uso de «Canvas» o marcos, que pueden utilizarse para utilizar animaciones sin necesidad de instalar plugins o utilizar un reproductor de Adobe Flash para vídeos web, un estándar considerado de facto. Esta opción es un gran avance, ya que Flash tiene importantes desventajas en los gráficos web, como los motores de búsqueda que no son capaces de leer el texto en su interior, que son pesados y tardan mucho tiempo en cargar. Cuando se implementa con lienzo, sólo se utilizará código Javascript, lo que aligerará el peso de la página.

Algunos elementos de HTML 4 también están obsoletos, por lo que es conveniente revisar las noticias que incluyen HTML5, cuyo lenguaje está regulado por el W3C.

CMS

Los CMS o sistemas de gestión de contenidos son plataformas web que estandarizan los procesos y permiten a los usuarios que no tienen muchos conocimientos técnicos en lenguaje de programación crear y maquetar fácilmente el contenido de su sitio web a través de un backend o gestor de contenidos. Entre los CMS más completos y famosos del mercado se encuentran WordPress y Joomla. Detrás de varios CMS hay una gran comunidad de desarrolladores de plugins que realizan tareas específicas como la gestión de contenidos. Estas plataformas son famosas por la versatilidad de los diseños que pueden ser implementados a través de plantillas. Esto a su vez reduce los costos de creación de la página, ya que elimina un eslabón en la cadena de publicación, el diseñador de diseño, y añade la capacidad de replicar fácilmente el contenido.

El lenguaje de programación normalmente utilizado por estas plataformas es PHP, HMTL5, CSS Java Script y JQuery. El usuario puede acceder a la programación del sitio, lo que hace que estas plataformas de creación de contenidos web sean muy versátiles. Son bastante escalables debido a su estandarización de contenidos y a su gestión dinámica de usuarios y permisos.

Imágenes de diseño web