Instituto Tecnológico Superior “Daniel Álvarez Burneo”
PILARES DEL DISEÑO OBJETIVO Descubre algunos de los principios fundamentales previos para la realización de una página web mediante las tendencias y elementos esenciales que debe conocer todo diseñador.
AYANARA V A L L E
IV Ciclo
Diseño Gráfico y Multimedia
Una web puede y debe ser y parecer diferentes de otras, pero todas tienden a contener elementos comunes, a menos que estén destinadas a mostrar un video en pantalla completa, un juego, formen parte de un proyecto artístico concreto o simplemente estén mal estructuradas.
BASES DEL DISEÑO WEB CONTENT Contenido Es la parte ancha central de nuestra página y contiene el contenido único de la misma. Esta parte es distinta de una página a otra dentro de nuestro sitio web.
HEADER Encabezamiento
FOOTER Pie de página
Formado por una gran franja que cruza la parte superior de la página con un encabezamiento y/o un logo, suele permanecer invariable mientras navegamos dentro de un sitio web.
Parte inferior de la página que generalmente contiene la letra pequeña, el copyright o la información de contacto. Es el sitio donde colocar información común,pero normalmente esta información no es tan importante o es secundaria para la propia página.
HEADER
Logo Eslogan Menú principal Login Selector de idiomas
CONTENT Contenido varieable en todad la web Imágenes textos, etc.
FOOTER
Información de contacto Dirección Créditos Accesos directos
CONTENT NAV
HEADER
Por defecto, las estructuras estándares posicionan los menús de navegación arriba o en los laterales, pero también existen otras posibilidades:
FOOTER Toda estructura web se basa en cajas (donde se vacía la información) de manera que la web que diseñas sea fácil de programar, eso no significa que tengas que lucirse las cajas o todo tenga que basarse en cuadrados.
INSPIRACIÓN
¿QUÉ TENDENCIAS DEBO CONOCER? No todas las tendencias son para todos. lo que le funciona a otro no tiene porqué funcionar en tu web ni gustar a tu público objetivo. Debes de elegir una tendencia que esté en equilibrio con los objetivos de tu empresa. De no ser así, el mensaje puede confundirse y apagarse.
Tendencias del diseño web para que puedas renovar tu página eligiendo la que más se adapte a los objetivos de tu empresa
Si tienes una empresa y promocionas o vendes tus productos o servicios en tu web, ya sabrás que es muy importante tenerla actualizada. Un usuario que entra en internet buscando un producto y se encuentra con una web anticuada y obsoleta tendrá una mala imagen del negocio. No puedes crear una web y tenerla con el mismo diseño durante años mientras la competencia renueva la suya siguiendo las tendencias de diseño web.Tampoco se trata de centrarse en seguir todas las tendencias cada año, sino en ver hacia dónde van los gustos y las modas y ver cómo se pueden adaptar a tu página web.
TENDENCIAS Diseño web CINEMAGRAPHS Una imagen animada que sale combinando fotografía y vídeo. En el ejemplo todo es una fotografía normal excepto el agua de cascada que se mueve. Puedes ver el efecto entrando en la web, la imagen está enlazada.
FULL SCREEN VÍDEOS El fondo de la web es un vídeo que ocupa toda la pantalla del navegador. Los menús de la página, están sobrepuestos en el mismo vídeo. No quedan espacios en blanco en la pantalla.
MICRO TINTERACCIONES Son pequeñas interacciones entre un dispositivo o web y el usuario. Puedes mejorar la experiencia de los visitantes a tu web con ellas.
PWA
.
Son las siglas en inglés de aplicaciones web progresivas. ¿Por qué progresivas? Porque son aplicaciones, que cambian su funcionalidad según la capacidad del dispositivo en el que se estén ejecutando.
Esto quiere decir que si un usuario de tu web la abre desde un smartphone, usará las funciones necesarias para que el contenido se vea óptimamente en él; pero si otro usuario la abre en un ordenador, la web se adaptará y se optimizará a ese dispositivo.
ANIMACIONES EN SCROLL Esta técnica permite que el usuario de tu web se desplace horizontalmente en ella y los contenidos se vayan mostrando de una forma animada. Hace la visión de tu website más divertida y amena para los posibles clientes.
PARALLAX Si accedes a una web, haces scroll y ves que el fondo se mueve a otra velocidad que el contenido puedes estar seguro de que el diseñador de esta página ha utilizado la técnica parallax
DISEÑO TIPOGRÁFICO La tipografía en sí y la ordenación de la misma, tiene mucho impacto en la experiencia de tus clientes y usuarios. Cuando se diseña un sitio web, lo ideal es que la tipografía sirva para complementar el diseño del mismo..
RESPONSIVE WEB DESIGN
¿Qué es el diseño responsive? El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos. Desde ordenadores de escritorio a tablets y móviles. Responsive web design Reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad
¿En qué consiste el diseño responsive? Redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario.
Unresponsive web design
¿Qué es un Sitemap? Un Sitemap o mapa del sitio Web, es un listado de URL’s que contiene todas las páginas de una Web que quieres que sean indexadas. Es decir, una especie de índice de una web, que por lo general, es diseñado para hacer accesible una web a los robots de búsqueda.
¿Para qué sirve? Gracias al Sitemap podemos dar información a los motores de búsqueda sobre la jerarquía de nuestra Web, sobre las actualizaciones que hayamos realizado, las páginas que queremos que los buscadores indexen, y por último, sobre la prioridad que los buscadores deben asignar a cada página.
SITEMAP DE UNA PÁGINA WEB
Conclusión El diseño de páginas web se encuentra en constante evolución con nuevas tendencias y estilos, pero existen unas bases que todo diseñador web debe conocer. Unos principios que son innegociables a la hora de afrontar un proyecto web.
PILARES DEL DISEÑO WEB Bases del diseño web Inspiración. Responsive web design. Sitemap de una página web o sitio web
Bibliografía https://madridnyc.es/tendencias-diseno-web-2018/ https://www.maxcf.es/tendencias-diseno-web-2018/ https://www.domestika.org/es/courses/34-diseno-web-be-responsive/units/139-introduccion-al-diseno-web/lessons/489-bases-del-diseno-web https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/estructura0000