PILARES DEL DISEÑO WEB
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>WEB</strong> Y MULTIMEDIA<br />
UNIDAD II<br />
<strong>PILARES</strong> <strong>DEL</strong> <strong>DISEÑO</strong> <strong>WEB</strong><br />
JOHANNA TORRES<br />
4to CICLO<br />
<strong>DISEÑO</strong> GRÁFICO Y MULTIMEDIA<br />
OBJETIVO<br />
Descubre algunos de los principios fundamentales pre<br />
vios para la realización de una página web mediante<br />
las tendencias y elementos que debe conocer todo<br />
diseñador.
EL HEADER<br />
El header (encabezado) es la parte superior de la página.<br />
Generalmente está formado por una serie de elementos comunes: logo<br />
de la empresa, nombre, una imagen o imágenes representativas y, en<br />
algunos casos, datos de contacto como teléfono e email.<br />
EL CONTENT<br />
El content o también conocida como área de contenido<br />
esdonde se presenta todos los contenidos de la página<br />
web.<br />
BASES <strong>DEL</strong> <strong>DISEÑO</strong><br />
<strong>WEB</strong><br />
La palabra diseño web está relacionado con una<br />
parte de la página web, el front-end, determina la<br />
apariencia y la percepción de un sitio web.<br />
Comprende el diseño, la navegación, la gama de<br />
colores,la estética y la experiencia del usuario.<br />
EL FOOTER<br />
El footer es la parte inferior de una estructura web en la que<br />
generalmente se incluyen links de navegación, enlaces de<br />
interés, copyright o botones a las redes sociales del sitio.
TENDENCIAS <strong>DEL</strong> <strong>DISEÑO</strong> <strong>WEB</strong><br />
CINEMAGRAPHS<br />
Un Cinemagraph es una fotografía con un elemento móvil, grande o pequeño en proporción, con el resto de la imagen está<br />
paralizada tal como una foto.<br />
FULL SREAN VIDEOS<br />
Esta técnica permite que el usuario de tu web se desplace horizontalmente en ella y los contenidos se vayan mostran<br />
do de una forma animada.<br />
DEGRADADOS CON VARIOS COLORES<br />
Hace referencia a degradar con varios colores determinados fondos o elementos en un sitio web.<br />
Al igual que las animaciones, no se recomienda sobrecargar los diseños con degradados, pero que al usarlos de<br />
manera correcta, aportan un toque muy vistoso y creativo.<br />
<strong>DISEÑO</strong> TIPOGRÁFICO<br />
Las tipografías realizadas a mano le brindan al diseño web una personalidad única, por lo general este tipo de tipo_<br />
grafía es usada para el diseño de logotipos y en zonas que se quieran realizar del sitio web, como cabeceras o titu<br />
lares.<br />
<strong>DISEÑO</strong>S MINIMALISTAS<br />
Este tipo de diseños destacan por el predominio de fondos blancos o muy claros, un único color para las tipografías y<br />
diseño con pocos elementos, pues se trata de emplear los elementos de diseño estrictamente necesarios para focali<br />
zar en el objetivo que persigue el sitio web.
RESPONSIVE <strong>WEB</strong> DESING.<br />
•El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta visualización de una<br />
misma página en distintos dispositivos. Desde ordenadores de escritorio a tablets y móviles.<br />
•Permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos<br />
ya que permite compartirlos de una forma mucho más rápida y natural.<br />
•Trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo<br />
permitiendo una correcta visualización y una mejor experiencia de usuario.
SITEMAP DE UNA PÁGINA <strong>WEB</strong> O SITIO <strong>WEB</strong><br />
•El sitemap o mapa del sitio es un mapa de tu sitio web, en forma de<br />
archivo el cual los webmasters pueden usar para nombrar individual_<br />
mente las páginas de tu sitio web.<br />
•Un mapa del sitio debe ser utilizado para decirles a los motores de<br />
búsqueda, como Google y Bing, qué páginas de un sitio web que deben<br />
pasar.<br />
•El responsive design corresponde a una tendencia de creación de<br />
páginas web que pueden ser visualizadas perfectamente en todo tipo<br />
de dispositivos, desde ordenadores de escritorio hasta smartphones o<br />
tablets.
BIBLIOGRAFÍA<br />
http://www.amebacomunicacion.com/cual-es-la-diferencia-entre-diseno-web-y-desarrollo-web/<br />
https://arpentechnologies.com/es/blog/diseno-y-programacion-web/bases-del-diseno-web/<br />
http://www.superdweb.com.ar/preguntas-frecuentes/item/649-diseno-web-ique-es-el-header.html<br />
https://www.40defiebre.com/que-es/footer/<br />
https://3lentes.com/cinemagraph-que-es-y-como-se-hace/<br />
https://madridnyc.es/tendencias-diseno-web-2018/<br />
https://www.maxcf.es/tendencias-diseno-web-2018/<br />
https://www.40defiebre.com/que-es/diseno-responsive/<br />
http://www.maestrosdelweb.com/que-es-responsive-web-design/