MAQUETACIÓN SITIO WEB VISUAL
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
1
En esta etapa se organiza todos los elementos de la futura página web, se estructura de manera gráfica los contenidos escritos, imágenes, video, títulos, enlaces, menús, botones, formularios, y todo aquel elemento que haya sido considerado en la lista de requerimientos del proyecto.
BOCETOS
La principal importancia de la maquetación de un sitio web, es el hecho de organizar y pre-visu alizar la futura página, tener un mapa de cómo debemos hacer el trabajo, donde colocar los elementos, los colores y el tipo de programación se usará.
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
Estrictamente el proceso de maquetar, sólo se refiere al acto deestructurar la página web, distribuir y organizar los elementos y los espacios de la página. Sin embargo, este proceso se mejora cuando la maquetación se convierte en una pre-visualización del sitio web,
2
IMAGENES
TEXTO
es decir, además de estructurar y organizar los elementos,también se elige una paleta de colores, y se diseña ya sea en papel o en algún editor gráfico la visión final del sitio web. TÍTULOS TEXTO BOTÓNES
PRISTINA 20P ARIAL 12P PRISTINA 9P
C:79 M: 0 Y: 2 K: 2
R: 55 G:180 B: 207
C:79 M: 0 Y: 2 K: 2
R: 55 G:180 B: 207
C:20 M: 2 Y: 86 K: 0
R: 205 G: 228 B: 44
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
Iconos, vídeos y FX
En cuanto a los iconos, son recursos gráficos que continuarán respirando del Flat Design y de la inspiración en los dispositivos móviles, ya que no sólo son fácilmente interpretables por los usuarios,
3
sino que pesan poco y si están en formatos vectoriales se adaptan perfectamente a las resoluciones de los diferentes dispositivos, además de tener posibilidades dinámicas e interactivas cuando optamos por lo elementos SVG de los que hablamos en Ventajas de utilizar SVG en nuestros desarrollos web .
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
Cabecera
De todas las partes de la estructura del diseño web, el encabezado es la que mayor tendencia tiene a repetirse entre páginas de un mismo sitio.
4
La cabecera es una franja horizontal que ocupa todo el ancho de la página en la parte superior de la misma.
Logotipo A la izquierda del encabezado suele ubicarse el logotipo del sitio, que ocupa un área importante dentro del mismo. La zona inferior del encabezado se emplea para ubicar el menú de navegación principal, uno de los elementos más importantes a la hora de ayudar a los usuarios a encontrar las páginas componentes del sitio web.
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
Pie de página
Finalmente, debajo de todas las secciones, se coloca una faja horizontal en cuyo interior se colocan algunos elementos importantes, como el autor, copyright, acceso a diversas políticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos, etc.
5
Buscador
Otra forma de colaborar con la exploración del sitio por parte de los usuarios es la instalación de un buscador interno.
puede encontrarse en la parte superior de alguna de las columnas laterales.
Redes Sociales
enlaces que llevan a las diferentes redes sociales del sitio.
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
6
Proporción de los gráficos y texto en una página Es fácil dejarse llevar por la gran cantidad de imágenes pero si te pasas añadiendo imágenes a tu web, puedes hacer que resulte muy difícil de leer o incluso molesto.
tipo de alineación para la estructura de tu sitio web más adecuado, tanto para texto como para imagenes. organizar cada página en diferentes capas para su mejor orden.
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
7
Página principal nuestra pagina principal lleva en si a lo que se refiere el sitio como son los batidos y sus respectivas descripciones.
tenemos que tener en cuenta la alineacion de las imagenes con el texto para que sea mjor visible.
El contraste a las diferencias que existen entre dos elementos relacionados y es uno de los principios de diseño web. El empleo del contraste en el diseño web resulta muy importante para atraer la atención del usuario.
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
Sección salud
8
ubicamos imagenes respecto a la seccion de igual manera alineando con el texto y sobre el recuadro que reposan. hablaremos sobre cudiados de la piel y alimentacin.
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
Sección Nosotros
9
hablaremos en general de la empresa como su mision, vision y que clase de productos ofrecen desde su personal hasta su local.
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
Sección Contáctos
10
exponemos nuestros numeros de contacto para poder responder cualqueir duda o inquitud y se adiciona google maps para referencia ocmo llegar .
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
PROTOTIPOS PARA DISPOSITIVOS MÓVILES
Se usó “wireframe o prototipo que es más que un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web.
11
El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web. Esto incluye menús de navegación, bloques de contenido, Además, te permite como interactuarán estos elementos entre sí. En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo importante es centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad son los conOBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
DISPOSITIVO MÓVIL: SITIO BATIDOS
12
Se colocó lo elementos del prototipo para ordenador con la diferencia de reducción de elementos como: imágenes y el tamaño.
Como se observa el boceto ayuda a dar una idea de cómo termina el producto final. Se aplica la misma tipografía, colores, grafica del encabezado y tratamiento en las foOBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
DISPOSITIVO MÓVIL: SITIO SALUD
13
En el programa se coloca la medida en pixeles, estas pueden variar para cada dispositivo, en nuestro caso para un móvil fue de 350 de ancho x 700 pixeles de
Se coloca la medida en pixeles, en este caso utilizamos el ancho de 350Pixeles x 700 Pixeles de alto. OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
DISPOSITIVO MÓVIL: SITIO CONTACTOS
14
Para reducir el tamaño del menú en un dispositivo móvil, se crea el botón conocido como hamburguesa que contiene todo el Botón hamburguesa
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
DISPOSITIVO MÓVIL: SITIO NOSOTROS
15
La optimización para Web es el proceso de compresión de imágenes y de definición de opciones de visualización para un uso óptimo
Al colocar imágenes en Internet, el tamaño de archivo es un factor importante; se pretende obtener un tamaño de archivo que sea lo suficientemente pequeño como para permitir un tiempo de descarga razonable pero lo suficientemente grande como para mantener unos colores y detalles satisfactorios OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.
16 Bibliografía: https://webdesdecero.com/wireframes-que-son-y-como-crearlos/ https://www.creativosonline.org/blog/tutorial-maquetar-una-pagina-web-adobe-photoshop.html
OBJETIVO : Desarrolla proyectos visuales mediante el diseño de una página web para que se adapte a diferentes dispositivos a través del curso asignado por el docente.