Diseño Web

INTRODUCCIÓN

Como en todo proyecto de diseño, se partió de una necesidad, la de promocionar a un artista o diseñador en internet. Las nuevas tecnologías e internet ponen al alcance de todos la posibilidad de hacer visible nuestro trabajo, algo que anteriormente suponía un gran esfuerzo y un coste que muchos no se podían permitir. Para este proyecto, se decidió desarrollar un portfolio online o sitio web personal, donde el creativo no solo mostrara su trabajo de mayor calidad, sino también a sí mismo, con una identidad propia. El sitio web debía servir como carta de presentación a empresas y posibles clientes, además de atraer a curiosos y otros creativos en búsqueda de inspiración.

 El trabajo trata pues, de un proyecto multidisciplinar, que comprende los campos del diseño gráfico, la ilustración digital y el diseño y desarrollo web. Se centró sobre todo en el diseño y desarrollo de webs adaptativas, que mantienen un diseño y estructura similares en los diferentes dispositivos y tamaños de pantalla. El trabajo comenzó con una primera etapa de planteamiento e investigación, poniendo sobre contexto las bases del mismo. Se desarrolló un briefing con la propuesta del proyecto, sus objetivos y el proceso de elaboración. Se investigó la evolución que ha seguido la Web hasta la fecha, finalizando con un pequeño análisis de las tendencias en la Web.

 En la etapa de desarrollo del proyecto se estudió la experiencia de usuario y se planteó la estructura del contenido y la interacción del sitio. Además, se diseñó la parte visual de la web, elaborando los gráficos necesarios. A partir del diseño, se desarrolló la web, maquetando el contenido y programando las funciones según la estrategia prevista. La última etapa fue la de evaluación, donde se realizaron una serie de pruebas en diferentes pantallas y dispositivos con diferentes navegadores, observando la adaptación y el correcto funcionamiento de la web. Por último, se publicó la web y se difundió en las redes sociales para estudiar el comportamiento de los usuarios y extraer conclusiones.

 OBJETIVOS Y METODOLOGÍA

 La meta del proyecto fue el diseño y desarrollo de un sitio web original y profesional, con cierta complejidad, dinámico y accesible desde cualquier dispositivo.

OBJETIVOS PRINCIPALES

 Los principales objetivos para alcanzar la meta del trabajo fueron: la elaboración de un diseño web adaptado a la propuesta del proyecto, el desarrollo de un sitio web adaptativo y dinámico, y la publicación y verificación de que pudiera ser visto desde cualquier dispositivo. El diseño debía cumplir una serie de requisitos. Sería sencillo, con una experiencia de usuario y una interfaz cercana a la de los dispositivos móviles. Además, el diseño se adaptaría al perfil del creativo Sr. Barba, ilustrador y diseñador gráfico y web. Por último, el diseño tendría en cuenta los diferentes tamaños de pantalla de los dispositivos que reproducirían la web, adaptándose a ellos sin perder su esencia. La maquetación de la web se ajustaría al diseño propuesto previamente. Se trabajó con HTML5 y CSS3, que permitirían mediante Media Queries, la adaptación del diseño a los diferentes dispositivos y tamaños de pantalla. La descarga y subida de contenidos se haría dinámicamente, programando la web con PHP y bases de datos en MySQL. En todo momento la web seguiría los estándares web, propuestos por el W3C, para cerciorarse de su correcto funcionamiento en los distintos navegadores que los aplican.

 PROCESO DE TRABAJO

Desarrollo de la Web

El trabajo se enfocó como un encargo de diseño, en el que se partía de un briefing como propuesta del proyecto. En él se detallaron aspectos importantes como el perfil del cliente y el target o usuarios destinados. Se realizó una búsqueda de referentes, basada en lo que se había hecho y lo que se estaba haciendo entorno al diseño web. Se enfocó la búsqueda en páginas personales de otros creativos y de promoción de artículos. La intención fue estudiar las tendencias, observar las similitudes y extraer conclusiones. Previo al diseño de los contenidos gráficos, se estudió la experiencia de usuario. Se determinó el esquema de la web, cuantas páginas dispondría el sitio y de que manera se comunicarían unas con otras. También se planteó un recorrido que el usuario debía seguir a la hora de navegar por la web. Los diseños se realizaron teniendo en cuenta los diferentes tamaños de pantalla. La interfaz de usuario se diseñó de manera similar a la de las aplicaciones móviles, funcionando como una plantilla que se repite en las páginas de la web y adaptando los elementos al tamaño de la pantalla.

 El encargado de la parte visual de la web solía ser el mismo programador o un diseñador gráfico, habituado a trabajar con formatos de impresión. A causa de ello, las páginas carecían de movimiento e interacción. Era importante que el encargado de la parte gráfica comprendiera también las capacidades y limitaciones de la web. Fue cuestión de tiempo que los diseñadores se adaptaran a esta materia y se hablara de la figura del diseñador web. Además de la parte gráfica, el diseño web se ocupa de la experiencia de usuario. Determina los objetivos del proyecto y las necesisades de los usuarios. Define la arquitectura web, el número de páginas y bloques de contenido de los que dispondrá el sitio. Estudia la interacción de usuario, las funciones y la navegación que se realizará en la web. Estructura el contenido en las diferentes páginas del sitio, mediante composiciones o plantillas, con el objetivo de elaborar prototipos o wireframes.

ANTECEDENTES EN LA WEB

 El diseño se consideró durante mucho tiempo algo secundario en la creación de páginas web. El principal motivo fueron las limitaciones que el código ofrecía a la hora de dar estilo al contenido. Las primeras etiquetas HTML permitían definir atributos tipográficos básicos, introducir textos e imágenes, dejando al navegador la interpretación del estilo. Para dar presencia a la web se utilizaban gráficos que ocupaban el lugar de textos y otros atajos que dificultaban

 Diseño y desarrollo web. Juan Pedro Barba Soler 9 cultando el posicionamiento en los buscadores y la usabilidad para usuarios discapacitados. La resolución de pantalla fue aumentando con el tiempo, produciendo dolores de cabeza a los diseñadores web. Las páginas se desarrollaban en un tamaño fijo, habitualmente 800x600 píxeles de resolución. El objetivo era que la página pudiera verse correctamente en todas las resoluciones sin activar el scroll en el eje x, es decir, sin exceder el ancho de las pantallas. Entre otras cosas, esto llevó al uso de medidas relativas que permitían que los elementos de la web se adaptaran, en cierta medida, al tamaño de la ventana. El formato flash calló en desuso, pues carecía de tamaño relativo y los elementos se adaptaban todos a la vez, deformando imágenes y reduciendo el texto al límite de lo ilegible. Los desarrolladores web buscaban siempre alternativas para la simplificación del código. Aparecieron librerías JavaScript y frameworks que facilitaron el desarrollo de interacciones avanzadas. La librería más popular es JQuery y su filosofía es “escribe menos, haz más”. Se produjo una gran cantidad de material programado que representaba elementos básicos de las páginas web, con un estilo fácil de editar para su uso en distintos proyectos. Todo esto llevó a un nivel mayor de complejidad los diseños y la interacción de usuario.  Con la aparición de dispositivos móviles con acceso a internet, se produjo un conflicto con el tamaño de las páginas web. Ya no sobraba con trabajar en medidas relativas. Los dispositivos móviles requerían un diseño diferente, una tipografía ajustada al tamaño de la pantalla, botones más grandes, etc. Como respuesta, se realizaron webs con versiones para escritorio y móvil. Para estos diseños se aplicaba la estrategia del graceful degradation5 , reducir progresivamente las funcionalidad de los sitios conforme disminuía la capacidad del navegador o el dispositivo, con el objetivo de asegurar la usabilidad del producto. 

 Los desarrolladores se percataron del trabajo que suponía desarrollar varias webs para un mismo proyecto y buscaron alternativas. 

 En este documento se hablaba de las posibilidades, por parte del servidor o del cliente, de adaptar una web a las características del dispositivo. Ya en la propuesta inicial de CSS de Håkon Wium Lie en 19947 , se esbozaba lo que podrían ser las Media .

 Éstas permiten definir la presentación del contenido según el medio y sus características, como la resolución de pantalla o funciones de accesibilidad. 

 Esta estrategia consiste en una mejora del graceful degradation, donde la preocupación reside en el contenido y no en la usabilidad del dispositivo.