Con anterioridad habíamos definido ya qué es una página web, en esta ocasión responderemos la pregunta ¿Qué es el diseño de páginas web?

El diseño de páginas web es una actividad multidisciplinaria enfocada a la creación de documentos electrónicos, accesibles desde un navegador, para difundir información de toda índole a través de la Internet, donde se definen su estructura, apariencia visual, usabilidad, adaptabilidad y contenido.

A pesar de que el término diseño puede referirse específicamente a la parte gráfica y de usabilidad de un sitio web, van de la mano otros aspectos como la programación (comunmente CSS, HTML, Javascript, PHP, ASP, MYSQL o MSSQL), adaptabilidad (diseño responsivo) y optimización (SEO).

diseño de páginas

Diseño

Al referirnos específicamente al diseño, hablamos de la parte gráfica de la página web que puede ser representada por medio de textos e imágenes (en formato JPG o PNG), pero también por medio de su programación en HTML y CSS. Estos lenguajes forman parte primordial del diseño de una página web en su sentido más básico.

En su parte gráfica, el diseño de una página web debe hacer referencia a la identidad de la organización reflejando la personalidad de la misma con el uso del logotipo, tipografías, colores, etc. El diseño debe también ayudar a que la información que se muestra sea clara y de fácil navegación, utilizando elementos que claramente indiquen donde debe hacer clic el usuario para encontrar la información que busca dentro de nuestro sitio web. A esto último se le denomina usabilidad.

El HTML (hipertext markuo language) hace referencia un lenguaje de marcado para páginas web. Sirve para definir la estructura básica de la página, así como de sus contenidos:textos, imágenes, videos, etc.

El CSS (cascading style sheets) es un lenguaje de diseño gráfico para definir la presentación de un documento estructurado. Controla por medio de clases e identificadores los estilos de un documento HTML. El CSS puede definir tipografías, colores, bordes, espaciados, sombras y animaciones con todas sus respectivas variables.

Existen diversos programas de diseño que son de utilidad para el diseño de una página web, algunos de los más comunes son:

  • Illustrator, enfocado al diseño vectorial de diversos tipos de imágenes como diagramas, esquemas, infografías, banners, etc.
  • Photoshop, para la edición de imágenes y fotografías.
  • Dreamweaver, para hacer la integración de textos e imagenes con la parte básica de programación en HTML y CSS.

Programación

Cuando el sitio web necesita ofrecer algún tipo de funcionalidad avanzada o mostrar contenidos de manera dinámica, se requiere de lenguajes de programación más avanzados, aunque existen una gran variedad de lenguajes, los más comunes son el PHP (para servidores Linux aunque también puede ejecutarse en Windows), ASP (para servidores Windows) y el Javacscript (que a diferencia de los anteriores no se ejecuta a nivel servidor sino del lado del cliente, directamente en el Navegador).

El objetivo de estos lenguajes es el de proporcionar soporte para poder realizar en la página:

  • Consultas (búsquedas)
  • Creación edición y eliminación de información en una base de datos
  • Cálculos

Bases de datos

De la mano con los lenguajes de programación vienen las bases de datos, que nos permiten almacenar cualquier tipo de información en el servidor para ser posteriormente consultada desde la página web desde formularios especialmente diseñados, esto nos permite crear sitios tan variados como:

  • Administradores de contenido,
  • Tiendas en línea,
  • Foros de soporte, etc.

MYSQL es la base de datos por excelencia para servidores Linux, su equivalente en en Windows es MSSQL.

Adaptabilidad (diseño responsivo)

En sus comienzos, las páginas web eran accesadas casi exclusivamente desde computadoras personales de escritorio (PC), pero en los tiempos actuales, dónde ya es predominante el uso de dispositivos móviles como tablets pero principalmente el uso de smartphones, es necesario contar con páginas que se muestren de manera eficiente en todo tipo de dispositivo.

El diseño responsivo es la actividad enfocada en hacer que los contenidos de la página web se «adapten» a la resolución del monitor (display) del dispositivo en donde está siendo visualizada. Los contenidos de una página web responsiva deben ser igualmente legibles en un monitor de computadora de escritorio que en el display de un smartphone convencional.

diseño responsivo

Mediante la hoja de estilos (CSS) se definen los parámetros de como debe visualizarse la página web, dependiendo la resolución del dispositivo. Por ejemplo, una estructura de una página que en computadoras de escritorio se visualiza a cuatro columnas, en un smartphone se visualizará a una sola columna.

La adaptabilidad de una página web se extiende también a la optimización de los contenidos de la misma para que demoren su carga en los dispositivos móviles que pueden tener una velocidad de Internet más lenta en relación a la de las computadoras de escritorio. Dado que los displays de estos son mas pequeños, no es necesario cargar imágenes de gran tamaño que solo desperdiciarían ancho de banda.

Optimización para motores de búsqueda (SEO)

A pesar de que el objetivo principal de la página web es el de transmitir algún tipo de información, es importante considerar que para que esa información pueda ser transmitida tiene primero que ser encontrada y en este sentido los buscadores juegan un papel muy importante.

optimización para motores de búsqueda

El SEO (search engine optimization) es una estrategia en donde los contenidos de la página web son estructurados de tal manera que puedan ser encontrados en los buscadores con la combinación de determinadas palabras clave. A esto también se le denomina posicionamiento, donde el objetivo es aparecer en los primeros lugares dentro de los resultados de búsqueda de los diversos buscadores (motores de búsqueda).

Disciplinas

Comúnmente, las personas encargadas del diseño de una página web son diseñadores gráficos e ingenieros en sistemas. Un diseñador gráfico pondrá más interés en la parte estética del sitio, mientras que un ingeniero en sistemas pondrá mas énfasis en su programación. La realidad es que el diseño de páginas web es más una actividad multidisciplinaria que se ve enriquecida por las aportaciones de cada parte del equipo que puede ser de disciplinas tan variadas como:

  • Diseñadores gráficos,
  • Ingenieros en sistemas,
  • Mercadologos,
  • Lingúistas,
  • Psicólogos,
  • Redactores,
  • Traductores, etc.