REVISTA DE WEB Y M PILARES del diseño web 1000

web
multimedia
PILARES DEL DISEÑO WEB
ingeniera María Cristina Carrillo
Ciclo:
IV Diseño Gráfico

BASES DEL DISEÑO WEB
1
BASES DEL DISEÑO WEB.
HEADER
El header o encabezado es
una parte importante del
diseño web, contiene el menú
principal y muestra el logotipo
de la empresa o el nombre del
sitio. En la portada suele venir
acompañado de un slider o
deslizador de imágenes con
titulares o claims del sitio que
invitan a seguir navegando.
Estas imágenes suelen ser de
calidad y muestran fotos de la
empresa, fotos relacionadas
con el sector, etc.
FOOTER
El footer o pie de página cierra todas las vistas de nuestra
web. En él se mostrarán normalmente las secciones
más relevantes de nuestro sitio, los enlaces a las redes
sociales de nuestra organización, el acceso a contacto y
los enlaces obligatorios por ley a la Política de Privacidad,
Cookies y Condiciones de uso. Dependiendo del
espacio que tengáis puede ser interesante mostrar la
dirección o razón social, teléfonos, etc
CONTENT
Contenido de la web es el
textual, visual o auditiva
contenido que se encuentra
como parte de la experiencia
del usuario en los sitios web .
Puede incluir, entre otras
cosas, texto, imágenes ,
sonidos , videos y animaciones
.
PILARES DEL DISEÑO WEB

INSPIRACIÓN WEB
INSPIRACIÓN WEB
2
SITE INSPIRE
Site Inspire es una galería de sitios webs,en las que nos
permiten visualizar las distintas webs , cada uno de
éstos sitios poseen innovaciones en cuanto a diseño
web se refiere.
PILARES DEL DISEÑO WEB

INSPIRACIÓN WEB
AWWWARDS
3
Es una galería de paginas de diseño web en
en la que los usuarios hacen las votaciones
de cada una de ellas, poseen diferentes
diseños web, los mismos que son un referente
a la hora de diseñar una página web.
PILARES DEL DISEÑO WEB

INSPIRACIÓN WEB
4
IDEAS DE PORTAFOLIOS WEBS
MANUAL
Es una página de estudio de
diseño en las que contiene
difetentes proyectos, cada
una de las imágenes se
habren del tamaño de la
retícula de la web y tiene la
opción de ir al próximo o
anterior proyecto, lo cual nos
ahorra tiempo para ir a la
lista de proyectos.
PILARES DEL DISEÑO WEB

INSPIRACIÓN WEB
PAWEL
NOLBERT
5
Es una página de estudio de
diseño en las que contiene
imágenes de diferentes
tamaños usando las distintas
retículas de diseño web,
podemos elegir una imagen y
la imagen es del tamaño de la
página web.
PILARES DEL DISEÑO WEB

RESPONSIVE WEB DESING
6
RESPONSIVE WEB DESING
El diseñador y autor norteamericano Ethan Marcotte creó y
difundió ésta técnica; es una filosofía de diseño y desarrollo
cuyo objetivo es adaptar la apariencia de las páginas web al
dispositivo que se esté utilizando para visitarlas. Hoy día las
páginas web se ven en multitud de dispositivos como tabletas,
teléfonos inteligentes, libros electrónicos, portátiles, PC, etcétera.
Además, aún dentro de cada tipo, cada dispositivo tiene
sus características concretas: tamaño de pantalla, resolución,
potencia de CPU, sistema operativo o capacidad de memoria
entre otras. “Esta tecnología pretende que con un único diseño
web, todo se vea correctamente en cualquier dispositivo.”
PILARES DEL DISEÑO WEB

RESPONSIVE WEB DESING
7
VENTAJAS
DE POSEER UNA RESPONSIVE
WEB DESING
1. Incrementa tu visibilidad en usuarios de
tabletas y dispositivos móviles.
2. Aumenta las ventas y el ratio de conversión.
3. Análisis e informes consolidados.
4. Mejora tu visibilidad para los motores de
búsqueda.
5. Ahorro de costes y tiempo en el desarrollo
de la versión para móvil.
6. Ahorro de tiempo y costes en la gestión del
sitio web.
7. Mejorar la experiencia de navegación offline.
En Síntesis:
El diseño responsive te permite estar en la
última tendencia de desarrollo online. Como el
uso de internet móvil y apps está creciendo,
deben de tenerse en cuenta varias implicaciones:
los costes de desarrollo y mantenimiento,
la visibilidad en los motores de búsqueda y la
mejora de los ratios de conversión. Las claves
del beneficio de un diseño responsive están en
todos esos factores combinados con un enfoque
unificado para el diseño.
PILARES DEL DISEÑO WEB

SITEMAP DE UNA WEB
8
SITEMAP DE UNA
WEB
Un Sitemap o Mapa del Sitio es la estructura de
enlaces de páginas web que definirá la buena o
mala navegación de un sitio web. Como veremos
en este artículo, además un sitemap se puede
usar para mejorar nuestro posicionamiento en
motores de búsqueda.
Empezando por la página de Inicio hasta la
página de contacto, todo sitio web debe tener un
mapa para que la navegación del usuario web sea
lo más fácil posible. El menú del sitio web debe
contener las páginas principales, que pueden
estructurarse en páginas y subpáginas, lo importante
es que la navegación sea lógica e intuitiva.
Crear un Mapa del Sitio Sencillo
Un mapa del sitio básico debería contener las
siguientes páginas:
. Inicio o Página Principal
. About también llamada: “Sobre Nosotros”, “Empresa”,
“Equipo”, “Sobre mí”
. Servicios
. Localización o Dónde Estamos
. Contacto
Además el Mapa del Sitio puede contener un Blog,
estás serían las categorías básicas del blog:
. Categoría Raíz: Noticias
. Categoría Principal: Eventos
. Categoría Principal: …
. Clases de Sitemaps
PILARES DEL DISEÑO WEB

SITEMAP DE UNA WEB
SITEMAP DE UNA WEB
98
CLASES DE SITEMAPS
El sitemap de página o html
El sitemap de página suele ser una
página web que incluye todos los
links o enlaces estructurados del
sitio web.
PILARES DEL DISEÑO WEB

SITEMAP DE UNA WEB
10
El sitemap en formato xml
Un sitemap en formato xml se usa como
herramienta de posicionamiento web para
facilitar la rápida inclusión de esas páginas
en el índice de los motores de búsqueda
como Google.
PILARES DEL DISEÑO WEB

TEMA: PILARES DEL DISEÑO WEB
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.
CONCLUSIÓN:
se pudo determinar que gracias a
los conocimientos adquiridos de
“los pilares del diseño web” aprendimos
los elementos , conceptos,
tendencias y fundamentos básicos
en cuanto a diseño web se refiere.
BIBLIOGRAFÍA:
• http://sergiodelamo.es/los-seis-pilares-del-diseno-web/
• http://www.adinteractive.co/web/diseno-web-adaptable-practico
• http://www.webpositer.com/blog/sitemap-xml-y-mapa-web.html
Moika Daniel Guaman moises.guaman mnoisesguaman@gmail.com