Diseño de Pagina Web

17
Twitter Es una red social que permite al usuario escribir mensajes con caracteres q se publican en una pagina web personal . Los mensajes se pueden insertar atreves de la propia web personal , vía mensajes , mensajes instantáneos de chat . También se puede sincronizar las actualizaciones con redes sociales como Facebook .

description

aprenda a diseñar paginas web paso a paso

Transcript of Diseño de Pagina Web

Page 1: Diseño de Pagina Web

Twitter

Es una red social que permite al usuario escribir mensajes con caracteres q se

publican en una pagina web personal . Los mensajes se pueden insertar atreves de la

propia web personal , vía mensajes , mensajes instantáneos de chat . También se puede sincronizar las actualizaciones

con redes sociales como Facebook .

Page 2: Diseño de Pagina Web

La primera web fue publicada en el año 1991 por Tim Berners-lee.

Trece años después en el año 2004, el descubrimiento de Berners-lee

se reinvento, no porque cambiara de un día para otro, sino como

suele ocurrir en el mundo de internet alguien le puso un nuevo

nombre: web 2.0.

La llegada de la web 2.0 ha supuesto una revolución en el diseño.

Desde el punto de vista visual este nuevo modo de hacer webs a

supuesto una estandarización .

La webs 2.0 ha sido creada por creadores especializados en el diseño

de webs.

DISEÑO DE WEB

Page 3: Diseño de Pagina Web
Page 4: Diseño de Pagina Web

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.

Aunque existen unas característica concretas, que abordaremos a

continuación, podemos definir el diseño 2.0 como una conjunción de

estilo cuya máxima es la sutileza y la combinación de elementos

dispares.

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

Estilo 2.0

Page 5: Diseño de Pagina Web

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.

Características:

Page 6: Diseño de Pagina Web

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 7: Diseño de Pagina 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 .

Conceptos para un buen Diseño Web

Page 8: Diseño de Pagina Web

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.

Hoja de estilo (ccs)

Page 9: Diseño de Pagina Web

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.

Las principales ventajas para usar CCS son

Page 10: Diseño de Pagina Web

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 11: Diseño de Pagina Web

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 12: Diseño de Pagina Web

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.

NAVEGADORES

Page 13: Diseño de Pagina Web

Internet Explorer

Firefox

Opera

Safari…

Principales Navegadores

Page 14: Diseño de Pagina Web

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.

ARQUITECTURA DE LA INFORMACIÓN

Page 15: Diseño de Pagina Web

No está claro de donde provino el estilo 2.0. Nos recuerda elementos

muy dispares: desde la portada del disco Tubular Bells de Mike

Oldfield, hasta los reflejos de las obras de Roy Lichtenstein o las

siluetas contrastadas de Keith Haring. Pero lo que sí está claro que

esta forma de diseñar está traspasando los límites de las pantallas de

ordenador, para convertirse en un referente del diseño digital como

se aprecia, por ejemplo, en los grafismos de televisión.

Toda la imagen corporativa de las cadenas, desde los printers con el

nombre de los presentadores hasta las ráfagas entre programas o los

gráficos explicativos de las noticias, la pantalla va llenándose de

degradados, reflejos y demás. ¿Supondrá la

CONCLUSIONES

Page 16: Diseño de Pagina Web

Toda la imagen corporativa de las cadenas,

desde los printers con el nombre de los

presentadores hasta las ráfagas entre

programas o los gráficos explicativos de las

noticias, la pantalla va llenándose de

degradados, reflejos y demás.

RECOMENDACIONES

Page 17: Diseño de Pagina Web

ROCIO MARILU OMERO CHAVEZ