DISEÑO DE PAGINAS WES 2.0

17

Transcript of DISEÑO DE PAGINAS WES 2.0

Page 1: DISEÑO DE PAGINAS WES 2.0
Page 2: DISEÑO DE PAGINAS WES 2.0

DISEÑO DE WEB

El diseño web es una actividad que consiste

en la planificación, diseño e implementación

de sitios web y páginas web. No es

simplemente una aplicación del diseño

convencional, ya que requiere tener en

cuenta cuestiones tales como navegabilidad,

interactividad, usabilidad,

arquitectura de la información y la

interacción de medios como el audio, texto,

imagen, enlaces y vídeo. Se lo considera

dentro del diseño multimedia.

Page 3: DISEÑO DE PAGINAS WES 2.0
Page 4: DISEÑO DE PAGINAS WES 2.0
Page 5: DISEÑO DE PAGINAS WES 2.0

ESTILO 2.0

La web 2.0 a creado una serie de clichés (películas) de elementos comunes, que configuran un estilo propio, hasta el punto de que a la hora de abordar el diseño de una pagina se habla del grado de aplicación del arquetipo ( modelo original) 2.0 que debe tener.

Grandes masas con volumen utilizando técnicas de 3D.

el diseño 2.0 como una conjunción de estilos cuya máxima es

la sutileza y la combinación de elementos dispares. Grandes

masas con volumen, utilizando técnicas de 3D, a la vez que

figuras planas; pequeños detalles de luz o degradados

delicados, con grandes tipografías

Page 6: DISEÑO DE PAGINAS WES 2.0

CARACTERÍSTICAS:

Uso de colores vibrantes contrastados : se caracteriza por

el uso de colores con mucho contraste. Bargés: se tata de una serie de botones con forma de chapas,

consiste en una estrella con bordes redondeados. Brillos destellos y reflejos: Tanto los logotipos como las

barras de menú y los distintos elementos cuentan con detalles de luz y pequeñas zonas sobreexpuestas.

Bordes Redondeados: La llegada del Web 2.0 ha supuesto el fin de las esquinas dando paso a un nuevo arquetipo, en el que todo los bordes son redondeados.

Degradados: Es una de las técnicas visuales más pronunciados o más sutiles, los gradientes de color son empleados desde los fondos de las páginas.

Page 7: DISEÑO DE PAGINAS WES 2.0

Líneas Diagonales: Se emplean en los fondos de las

páginas y en los titulares como motivos decorativos, el

contraste siempre es leve para no dificultar la lectura ni

centrar la atención sobre elementos decorativos.

Desenfoques: Se hacen especialmente patente en las

sombras. En lugar de ser sombras duras, los diseñadores

utilizan leves desenfoques.

Logotipos Reflejados: Se convirtieron prácticamente en un

estándar los logotipos reflejados de forma que según van

separándose el dibujo del reflejo va desenfocándose como si

se tratara de un papel mojado

Page 8: DISEÑO DE PAGINAS WES 2.0

CONCEPTOS PARA UN BUEN DISEÑO WEB

Simplicidad: Es igualdad de condiciones de solución más sencilla y

que exijan menos esfuerzos a los usuarios.

Diseño Centrado: Debido a que se muestra mejor presentación

mejorando la visualización de los contenidos.

Menos Columnas: Reducir a lo mínimo el uso de las columnas ya que

esto da la impresión de un diario (Periódico)

Separa la Navegación: En un área definida para su navegación o

interacción.

Navegación Simple: Organizar la página con iconos familiares para

y sepa para que sirve cada elemento .

Page 9: DISEÑO DE PAGINAS WES 2.0

HOJA DE ESTILO (CCS)

Las hojas de estilo en cascada (Cascading Style

Sheets, CSS) son un lenguaje usado para definir la

presentación de un documento estructurado escrito

en HTML o XML. Consiste en uno o varios documentos

en los que se escriben las características que va a

tener cada uno de los elementos de la página:

titulares, párrafos, columnas, enlaces, etc., de modo

que afectan o pueden afectar al conjunto del site.

Page 10: DISEÑO DE PAGINAS WES 2.0

LAS VENTAJAS PARA USAR CCS SON

Es más sencillo realizar cambios globales: si queremos realizar un

cambio en el diseño, como puede ser la distancia entre las fotos el

texto, el color de los hipervínculos o el tamaño de los titulares, será

más sencillo hacerlo en las CSS ya que bastará con modificar un

archivo y no página por página.

El estilo del site se mantiene en toda su extensión: salvo que

marquemos lo contrario, todas las páginas tendrán el titular y los

párrafos en el mismo formato, los mismo márgenes entre los

elementos, etc.

El site es más accesible, ya que pueden definirse estilos para cada tipo

de navegador. Pueden crearse distintos formatos para que cada

navegador lo interprete como le señalemos.

Page 11: DISEÑO DE PAGINAS WES 2.0

Rápida descarga: en general las páginas son más ligeras, ya que toda

la información de estilo está en los archivos CSS, que cargamos al

acceder al site, y no hay que cargar unos estilos cada vez que

cambiamos de página.

Separación del diseño y la programación. Los dos pueden trabajar en

la web sin interferir uno en el trabajo del otro.

Está optimizado para buscadores: hay menos código en los archivos y

resulta más fácil para el buscador encontrar palabras clave.

El usuario puede usar sus propias normas de estilo: algunos

navegadores de Internet permiten personalizar las CSS de las

páginas, por lo que son ellos quienes eligen cómo visionarlas

Page 12: DISEÑO DE PAGINAS WES 2.0

Tipografía más Grande: Esto cosiste en usar las

fuentes un poco más grande para ser visualmente

atractivas.

Leads en Negrita: Al usar los Leads, usar de

preferencia de color negro, de tal manera que no se

confundan con los colores del diseño de la página.

Usar Iconos Atractivos: El uso de los iconos hace mas

interesante la navegación para los usuarios

Page 13: DISEÑO DE PAGINAS WES 2.0

NAVEGADORES

Un navegador es un programa que se utiliza para

acceder a la web.

A pesar de que las estadísticas actuales nos dicen que

IE sigue caminando, las corrientes alternativas van

abriéndose paso. Opera abrió el camino y, hoy en día,

Mozilla FireFox está haciendo “pupa” al dominio de IE

con cuotas del 20% en algunos países europeos.

Page 14: DISEÑO DE PAGINAS WES 2.0

PRINCIPALES NAVEGADORES

Internet

Explorer

Firefox

Opera

Safari…

Page 15: DISEÑO DE PAGINAS WES 2.0

ARQUITECTURA DE LA INFORMACIÓN

Entender el contenido de la web, determinar los servicios que se ofrecen y a quién está dirigida la web.

Realizar estudios de card sorting. Se trata de un ejercicio que consiste en utilizar a usuarios potenciales de nuestra para web para que organicen el contenido a través de fichas, ordenándolo según sus esquemas mentales. Esto hace que la estructura resultante se adecúe más a lo que el internauta espera encontrarse.

Elaborar un borrador del árbol de la web, agrupando la información y estableciendo jerarquías.

Evaluar la correspondencia entre nuestro árbol y los resultados del card sorting.

Crear el mapa del sitio. Definir las funcionalidades de la página y cómo se llega a

ellas. Contrastar la organización de la información que hemos

propuesto con el resto de miembros del equipo.

Page 16: DISEÑO DE PAGINAS WES 2.0
Page 17: DISEÑO DE PAGINAS WES 2.0

ESTHER YOVANY ASCURRA LOPEZ