Diseño y desarrollo de la página web de la firma arquitectónica El Diseño Co.
En la planeación del proyecto se tuvo en consideración las necesidades de la compañia: ofrecer una
página web que siguiera los lineamientos gráficos del manual de marca, con información clara, fácil
de navegar y puntual en su contenido.
La web se compone por 4 páginas principales, el landing page, el portafolio de proyectos, el directorio
de integrantes del equipo y el formulario de contacto.
Para programar la página utilicé los lenguajes de programación HTML5 y CSS3, con la inclusión de un código
PHP para recuperar la información proporcionada en el formulario de contacto. La página es Responsive Design
por completo y se ajusta a cualquier dimensión y resolución de pantalla.
Puede visitar la página en www.eldiseno.co
El landing page presenta el Header con las 3 opciones principales: Proyectos, Sobre Nosotrso y Contacto. Seguido está una pequeña descripción sobre la misión y visión de la empresa. Continuan 4 imagenes interactivas, al poner el cursor sobre ellas muestran la descripción de los servicios que la compañía ofrece y al hacer click en ellas dirige hacia la página de proyectos. Por último se incluye otro pequeño párrafo que cuenta la historia de la compañia y el footer de la página.
La página de proyectos tiene una distribución que permite incluir proyectos nuevos cada que la compañía
lo requiera. Escribí el código HTML tal que el equipo de El Diseño Co pudiera incluir y modificar sus
proyectos según lo deseen.
A primera vista el catálogo de proyectos solo muestra una imagen representativa de cada trabajo que ha
realizado la compañía, pero al posicionar el cursor sobre la imagen se activa un recuadro que expone el
nombre del proyecto, un subtítulo que describe que función cumple el proyecto, el tipo de trabajo que
realizaron en El Diseño Co para lograr la obra, la ubicación, el año y la dimensión.
Para poder navegar de manera más fácil y permitir que los clientes consulten el tipo de proyecto que le
interesa, inclui una barra de navegación horizontal en la parte superior de la página la cual se divide
en 5 grandes categorías: Todos, Diseño Estructural, Diseño Arquitectónico, Diseño MEP y Diseño Contech.
Si el usuario clickea en alguna de las categorías será direccionado a una página que solo expone los proyectos
que cumplen con esa categoría. Es decir, si el usuario clickea Diseño Estructural, en la página solo se
mostrarán los proyectos que cumplan con esta categoría.
Cada proyecto cuenta con su propia página individual, de nuevo escribí el código HTML de tal manera que
el equipo de El Diseño Co pudiera edicar y crear nuevas entradas de proyectos siempre que lo requieran.
Sobre el diseño de la página en particular, esta se divide en 4 bloques de contenido: Un cabezal, el bloque
para la imagen de los planos del proyecto, el bloque que incluye la descripción de la obra y el bloque que
incluye las imagenes en detalle del proyecto.
Al hacer click sobre alguna de las imagenes del proyecto, el usuario abre un display a modo de slider que
le permite ver las imagenes en tamaño completo y poder visualizar mejor los detalles de la obra.
La página correspondiente al equipo incluye las fotografías de los integrantes de El Diseño Co, sus nombres,
cargos en la empresa y datos de contacto. Además, al clickear en la imagen de cada uno, abre una página que
presenta la información en detalle junto a una descripción de su perfil profesional.
Sobre la página de contacto no queda mucho que decir, salvo que es un formulario de contacto programado para
redireccionar el mensaje y las solicitudes al correo proporcionado por el equipo de El Diseño Co.