SlideShare una empresa de Scribd logo
1 de 17
Descargar para leer sin conexión
DISEÑO DE WEB
la primera web fue publicada en el
año 1991 por Tim Berners-Lee.
A la llegada de la web 2.0 ha supuesto una
revolución en el diseño, se refiere ala concepción
artística como en las interfaces. Desde el punto de
vista visual este nuevo modo de hacer webs ha
supuesto una estandarización .Mientras la web
1.0 los diseñadores realizaban paginas sin base
previo porque existían pocas diferencias.
NESESIDADES DE NEGOSIO DE LA
      EMPRESA QUE PUEDE CUBRIR.
• Comunicación interna.-los empleados que viajan pueden twitear
  desde cualquier lugar a su pagina personal para que en la oficina
  puedan saber en todo momento que hace y en donde esta el
  empleado.
• Comunicación externa.-la empresa puede recibir en tiempo real lo
  que los usuarios piensan de sus productos y servicios.
• Promoción.-es posible utilizar la herramienta para promocionar la
  empresa.

ESTILO 2.0 .-la web 2.0 ha supuesto la creación de una serie de clichés
de diseño , 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 2.0 que
debe tener.
CARACTERISTICAS
•   1.- Uso de colores vibrantes y contrastados. La web 2.0 se caracteriza por el uso de colores con
    mucho contraste.

•   2.-Badges.es una serie de botones en forma de chapas o placas.

•   3.-Brillos destellos y reflejos. Las barras de menú y los demás elementos de las composiciones
    cuentan con destello de luz.

•   4.-Bordes redondeados. A la llegada de la web2.0 a supuesto el fin de las esquinas.

•   5.-Degradados.

•   6.-Lineas diagonales.

•   7.-Desenfoques.

•   8.-Logotipos reflejados.
CARACTERISTICAS POR BEN HUNT
•   1.-Simplisidad.
•   2.- Diseño centrado.
•   3.-Menos columnas.
•   4.-Separar la navegación.
•   5.-navegacion simple.
•   6.-Tipografias mas grandes.
•   7.-Leads en negrita.
•   8.-Iconos atractivos.
FUTURO DEL DISEÑO 2.0
• Todos los movimientos artísticos se
  caracterizan porque mucha gente hace lo
  mismo , hasta que alguien lo rompe y hace
  algo mas innovador .
• Por esta razón la web 2.0 esta generando un
  movimiento en contra de estos estándares
EVOLUCION TECNOLOGICA y su uso
• 1Navegadores web.- es un programa que se itiliza
  para acceder a la web. Desde el primer
  explorador , llamado NCSA Mosaic de principio
  de los noventa hcy ,la evolución ha sido
  espectacular.
• A pesar de que las estadísticas actuales nos dicen
  que Ie sigue cambiando ,las corrientes
  alternativas van abriéndose paso .Opera abrió el
  camino y, hoy en día ,Mozilla FireFox esta
  haciendo pupa al dominio de IE con cuotas del
  20% en algunos países europeos.
Los otros navegadores
•    hoy en día existen otras aplicaciones que están ganando
    importancia como son los navegadores para móviles y para PDA, los
    navegadores de solo texto.
•    inicialmente se opto por hacer versiones especificas para cada tipo
    de navegador , pero es un costo inasumible ante la gran
    proliferación de aplicaciones y dispositivos
•   No queda mas remedio que utilizar un estándar común.
•    FLASH. Los archivos elaborados en el programa de animación
    2Dpor excelencia en el campo web, flash, han pasado de ser la
    solución definitiva cuando deseamos hacer una web visualmente
    atractiva , a una posesión mas discreta.
•    la utilización de este tipo de animaciones ha pasado como
    decíamos a una posición secundaria , que es en animaciones en las
    cabeceras delas web , en los banners o para ilustrar noticias. Como
    un ingrediente mas del diseño , pero no como plato único.
• AJAX.-el termino AJAX al igual que el de la web 2.0, no
  es ningún invento ,ni u n gran avance tecnológico ,es el
  nombre que se le puso a una serie de técnicas y
  combinación de tecnologías ya existentes .
• El uso del AJAX ha supuesto una revolución en el
  concepto de interacción del usuario con la pagina web.
  Ya podemos mover las ventanas a nuestro gusto y
  ponerlas en donde nos apetezca ,eliminarlas o añadir
  nuevas ventanas con nuestras RSS favoritas en
  servicios como Netvives o Igoogle.
• EL INTERNAUTA 2.0.-Los usuarios quieren crear el
  objetivo ultimo de la web 2.0 .Un internauta que
  crea contenidos y que, por lo tanto , no se
  encuentra ante una pagina diseñada con mejor o
  peor resultado, sin ante una interface. No se trata
  de hacer una aplicación amable por fuera y dura
  por dentro, sino que es necesario poner a la vista
  las entrañas de la web para que nuestro visitante
  suba documentos , organice videos o retoque
  fotos. cada una de estas entrañas debe estar
  diseñadas cumpliendo unos principios
  reusabilidad.
Interface para un internauta 2.0
• 1. USABILIDAD. Se trata de una disciplina cuyo objetivo
  es facilitar la interacción del usuario y, por esta razón,
  es lógico que naciera o, mas bien, cobrara fuerza, con
  la llegada de la web 2.0 .
• De ahí el nacimiento de una nueva profesión
  inexistente hace poco: los expertos en usabilidad,
  personas especializadas en la interacción entre los
  ordenadores y las personas , y concretamente, entre
  los sitios web y los internautas de hoy en día .Para
  hacernos idea de cómo funciona , podemos ver los
  cinco componentes con los que Jacob Nielsen mide la
  usabilidad.
• 2. PRINCIPIOS DE LA USABILIDAD.
• 2.1Anticipacion. Es el sitio web debe anticiparse a las necesidades del
  usuario.
• 2.2Autonomia. Los usuarios deben tener el control sobre el sitio web.
• 2.3Los colores a utilizarse con precaución. Para no dificultar el acceso a los
  usuarios con problemas de distinción de colores.
• 2.4Consistencia. Las aplicaciones deben de ser consistentes con las
  expectativas de los usuarios.
• 2.5Eficencia del usuario. Los sitios web se deben centrar en la
  productividad del usuario ,no en la del propio sitio web.
• 2.6Rebersabilidad.un sitio web ha de permitir deshacer de las acciones
  realizadas.
• 2.7. Ley de fitts. Indica el tiempo para alcanzar un objetivo con el raton
  esta en función de la distancia y el tamaño del objetivo.
•   2.8Reduccion de tiempo de latencia.
•   9.9Aprendizaje.
•   2.10 El uso adecuado de metáforas.
•   2.11 la protección del trabajo de los usuarios.
•   2.12 Legibilidad.
•   2.13 Seguimiento de las acciones del usuario.
•   2.14 Interfaz visible.
USABILIDAD FRENTE AL DISEÑO
• La usabilidad se desarrolla con la parte izquierda del
  cerebro y representa la razón y la acción lógica , por lo
  tanto se corresponde con marte. Por su parte el diseño
  reside en la parte derecha del cerebro y se identifica
  con lo emocional y la acción intuitiva, así que se
  corresponde con venus.
• El paso del tiempo a demostrado que ninguna web
  puede prescindir de la usabilidad , porque el usuario se
  frustra y se va si no sabe manejar la interface y , al
  mismo tiempo , si algo no es atractivo visualmente
  para el internauta es difícil que se desarrolle como
  producto: no se diferencia de los demás pareciera
  anticuado, nadie recordaría la web etc.
ARQUITECTURA DE LA INFORMACION
• Tomando como punto de partida el articulo de rain Baker podemos definir
  los siguientes pasos necesarios para una arquitectura de la información
  acertada.
• 1. entender el contenido de la web.
• 2. realizar estudios de card Stirling.
• 3. elaborar un borrador del árbol de la web, agrupando la información
  estableciendo jerarquías.
• 4. evaluar la correspondencia de nuestro árbol y los resultados del card
  sorting.
• 5. crear el mapa del sitio.
• 6. definir las funcionalidades de las pagina y como se llega a ellas.
• 7. contrastar la organización de la información que hemos propuesto con
  el resto de miembros del equipo.
• 8. elaborar el wireframe que le pasaremos al departamento de diseño y al
  e programación.
ESTANDARES
• EL VERDADERO TRIUNFO DE LAS WEB 2.0 HA SIDO EL
  TRIUNFO DE LOS ESTANDARES .Web se define como el
  conjunto de recomendaciones dados por el Word Wide
  web consortium y otras organizaciones internacionales
  acerca de como crear e interpretar documentos basados en
  el web.
• Son normas que permiten alas webs se puedan visionar no
  solo en el internet exploer , si no también en los
  navegadores para personas ciegas o dispositivos móviles
  como PDA o teléfonos móviles , as como para los
  internautas que utilizan velocidades de transparencia baja.
  En un papel de guía de los desarrolladores web , law3c
  recomienda el uso de dos estándares :CCS Y HTML.
CCS
• Son un lenguaje usado para definir la presentación de
  un documento estructurado escrito en HTML o XML.
• 1. VENTAJAS:
• Es mas sencillo realizar cambios globales.
• El estilo del site se mantiene en toda su extensión .
• El site es mas accesible.
• Rápida descarga.
• Separación del diseño y la programación.
• Esta optimizado para buscadores.
• El usuario puede utilizar sus propias normas de estilo.
• Una mayor libertad en la maquetación.
XHTML
• Es el lenguaje demarcado pensando para sustituir al HTML ,pero
  aun le queda camino por recorrer .
• El HTML es una versión mas estricta del código HTML para
  conseguir reducir las posibilidades de uso y que la interpretación
  por los distintos dispositivos sea mas simple, y que pequeños
  positivos , con menor capacidad que los ordenadores de mesa
  tradicionales puedan soportar , como los móviles

•   VENTAJAS.
•   La compatibilidad con navegadores antiguos.
•   La independencia del diseño.
•   Facilidad de edición del código y su mantenimiento.
•   Mejoras de rendimiento.

Más contenido relacionado

La actualidad más candente (15)

Web 2
Web 2Web 2
Web 2
 
Web2mili
Web2miliWeb2mili
Web2mili
 
Que es Diseño web
Que es Diseño webQue es Diseño web
Que es Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
W ebb pdf
W ebb pdfW ebb pdf
W ebb pdf
 
Presentación1
Presentación1Presentación1
Presentación1
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño web
Diseño webDiseño web
Diseño web
 
La web 2
La web 2La web 2
La web 2
 
Pdf
PdfPdf
Pdf
 
Diseño weeb
Diseño weebDiseño weeb
Diseño weeb
 
Diseño web semana 3
Diseño web semana 3Diseño web semana 3
Diseño web semana 3
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño & Web 2.0
Diseño & Web 2.0Diseño & Web 2.0
Diseño & Web 2.0
 

Destacado

Guía afiche preg existencial antropología-2do medio-1semestre
Guía afiche preg existencial antropología-2do medio-1semestreGuía afiche preg existencial antropología-2do medio-1semestre
Guía afiche preg existencial antropología-2do medio-1semestreProfeClaudioY
 
Que es un software contable
Que es un software contableQue es un software contable
Que es un software contableGrupo VisualCont
 
Calidad Del Producto Software
Calidad Del Producto SoftwareCalidad Del Producto Software
Calidad Del Producto Softwarealbert317
 
Ingenieria De Software Para Dummies
Ingenieria De Software Para DummiesIngenieria De Software Para Dummies
Ingenieria De Software Para DummiesSorey García
 

Destacado (6)

software libre
software libresoftware libre
software libre
 
Software
SoftwareSoftware
Software
 
Guía afiche preg existencial antropología-2do medio-1semestre
Guía afiche preg existencial antropología-2do medio-1semestreGuía afiche preg existencial antropología-2do medio-1semestre
Guía afiche preg existencial antropología-2do medio-1semestre
 
Que es un software contable
Que es un software contableQue es un software contable
Que es un software contable
 
Calidad Del Producto Software
Calidad Del Producto SoftwareCalidad Del Producto Software
Calidad Del Producto Software
 
Ingenieria De Software Para Dummies
Ingenieria De Software Para DummiesIngenieria De Software Para Dummies
Ingenieria De Software Para Dummies
 

Similar a Diseño de web (20)

Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Alberto
AlbertoAlberto
Alberto
 
Alberto
AlbertoAlberto
Alberto
 
Presentación1
Presentación1Presentación1
Presentación1
 
Web 2.0. sanchez
Web 2.0. sanchezWeb 2.0. sanchez
Web 2.0. sanchez
 
WEB 2.0
WEB 2.0WEB 2.0
WEB 2.0
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Diseñ0 w3d
Diseñ0 w3dDiseñ0 w3d
Diseñ0 w3d
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Web de diseño
Web de diseñoWeb de diseño
Web de diseño
 
Presentación1
Presentación1Presentación1
Presentación1
 
Lidia
LidiaLidia
Lidia
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Lyseth (1)
Lyseth (1)Lyseth (1)
Lyseth (1)
 
Que Es La Web 2.0
Que Es La Web 2.0Que Es La Web 2.0
Que Es La Web 2.0
 
Trabajo de tic
Trabajo de ticTrabajo de tic
Trabajo de tic
 
Web 2.o y el diseño web
Web 2.o y el diseño webWeb 2.o y el diseño web
Web 2.o y el diseño web
 

Diseño de web

  • 1. DISEÑO DE WEB la primera web fue publicada en el año 1991 por Tim Berners-Lee. A la llegada de la web 2.0 ha supuesto una revolución en el diseño, se refiere ala concepción artística como en las interfaces. Desde el punto de vista visual este nuevo modo de hacer webs ha supuesto una estandarización .Mientras la web 1.0 los diseñadores realizaban paginas sin base previo porque existían pocas diferencias.
  • 2. NESESIDADES DE NEGOSIO DE LA EMPRESA QUE PUEDE CUBRIR. • Comunicación interna.-los empleados que viajan pueden twitear desde cualquier lugar a su pagina personal para que en la oficina puedan saber en todo momento que hace y en donde esta el empleado. • Comunicación externa.-la empresa puede recibir en tiempo real lo que los usuarios piensan de sus productos y servicios. • Promoción.-es posible utilizar la herramienta para promocionar la empresa. ESTILO 2.0 .-la web 2.0 ha supuesto la creación de una serie de clichés de diseño , 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 2.0 que debe tener.
  • 3. CARACTERISTICAS • 1.- Uso de colores vibrantes y contrastados. La web 2.0 se caracteriza por el uso de colores con mucho contraste. • 2.-Badges.es una serie de botones en forma de chapas o placas. • 3.-Brillos destellos y reflejos. Las barras de menú y los demás elementos de las composiciones cuentan con destello de luz. • 4.-Bordes redondeados. A la llegada de la web2.0 a supuesto el fin de las esquinas. • 5.-Degradados. • 6.-Lineas diagonales. • 7.-Desenfoques. • 8.-Logotipos reflejados.
  • 4. CARACTERISTICAS POR BEN HUNT • 1.-Simplisidad. • 2.- Diseño centrado. • 3.-Menos columnas. • 4.-Separar la navegación. • 5.-navegacion simple. • 6.-Tipografias mas grandes. • 7.-Leads en negrita. • 8.-Iconos atractivos.
  • 5. FUTURO DEL DISEÑO 2.0 • Todos los movimientos artísticos se caracterizan porque mucha gente hace lo mismo , hasta que alguien lo rompe y hace algo mas innovador . • Por esta razón la web 2.0 esta generando un movimiento en contra de estos estándares
  • 6. EVOLUCION TECNOLOGICA y su uso • 1Navegadores web.- es un programa que se itiliza para acceder a la web. Desde el primer explorador , llamado NCSA Mosaic de principio de los noventa hcy ,la evolución ha sido espectacular. • A pesar de que las estadísticas actuales nos dicen que Ie sigue cambiando ,las corrientes alternativas van abriéndose paso .Opera abrió el camino y, hoy en día ,Mozilla FireFox esta haciendo pupa al dominio de IE con cuotas del 20% en algunos países europeos.
  • 7. Los otros navegadores • hoy en día existen otras aplicaciones que están ganando importancia como son los navegadores para móviles y para PDA, los navegadores de solo texto. • inicialmente se opto por hacer versiones especificas para cada tipo de navegador , pero es un costo inasumible ante la gran proliferación de aplicaciones y dispositivos • No queda mas remedio que utilizar un estándar común. • FLASH. Los archivos elaborados en el programa de animación 2Dpor excelencia en el campo web, flash, han pasado de ser la solución definitiva cuando deseamos hacer una web visualmente atractiva , a una posesión mas discreta. • la utilización de este tipo de animaciones ha pasado como decíamos a una posición secundaria , que es en animaciones en las cabeceras delas web , en los banners o para ilustrar noticias. Como un ingrediente mas del diseño , pero no como plato único.
  • 8. • AJAX.-el termino AJAX al igual que el de la web 2.0, no es ningún invento ,ni u n gran avance tecnológico ,es el nombre que se le puso a una serie de técnicas y combinación de tecnologías ya existentes . • El uso del AJAX ha supuesto una revolución en el concepto de interacción del usuario con la pagina web. Ya podemos mover las ventanas a nuestro gusto y ponerlas en donde nos apetezca ,eliminarlas o añadir nuevas ventanas con nuestras RSS favoritas en servicios como Netvives o Igoogle.
  • 9. • EL INTERNAUTA 2.0.-Los usuarios quieren crear el objetivo ultimo de la web 2.0 .Un internauta que crea contenidos y que, por lo tanto , no se encuentra ante una pagina diseñada con mejor o peor resultado, sin ante una interface. No se trata de hacer una aplicación amable por fuera y dura por dentro, sino que es necesario poner a la vista las entrañas de la web para que nuestro visitante suba documentos , organice videos o retoque fotos. cada una de estas entrañas debe estar diseñadas cumpliendo unos principios reusabilidad.
  • 10. Interface para un internauta 2.0 • 1. USABILIDAD. Se trata de una disciplina cuyo objetivo es facilitar la interacción del usuario y, por esta razón, es lógico que naciera o, mas bien, cobrara fuerza, con la llegada de la web 2.0 . • De ahí el nacimiento de una nueva profesión inexistente hace poco: los expertos en usabilidad, personas especializadas en la interacción entre los ordenadores y las personas , y concretamente, entre los sitios web y los internautas de hoy en día .Para hacernos idea de cómo funciona , podemos ver los cinco componentes con los que Jacob Nielsen mide la usabilidad.
  • 11. • 2. PRINCIPIOS DE LA USABILIDAD. • 2.1Anticipacion. Es el sitio web debe anticiparse a las necesidades del usuario. • 2.2Autonomia. Los usuarios deben tener el control sobre el sitio web. • 2.3Los colores a utilizarse con precaución. Para no dificultar el acceso a los usuarios con problemas de distinción de colores. • 2.4Consistencia. Las aplicaciones deben de ser consistentes con las expectativas de los usuarios. • 2.5Eficencia del usuario. Los sitios web se deben centrar en la productividad del usuario ,no en la del propio sitio web. • 2.6Rebersabilidad.un sitio web ha de permitir deshacer de las acciones realizadas. • 2.7. Ley de fitts. Indica el tiempo para alcanzar un objetivo con el raton esta en función de la distancia y el tamaño del objetivo.
  • 12. 2.8Reduccion de tiempo de latencia. • 9.9Aprendizaje. • 2.10 El uso adecuado de metáforas. • 2.11 la protección del trabajo de los usuarios. • 2.12 Legibilidad. • 2.13 Seguimiento de las acciones del usuario. • 2.14 Interfaz visible.
  • 13. USABILIDAD FRENTE AL DISEÑO • La usabilidad se desarrolla con la parte izquierda del cerebro y representa la razón y la acción lógica , por lo tanto se corresponde con marte. Por su parte el diseño reside en la parte derecha del cerebro y se identifica con lo emocional y la acción intuitiva, así que se corresponde con venus. • El paso del tiempo a demostrado que ninguna web puede prescindir de la usabilidad , porque el usuario se frustra y se va si no sabe manejar la interface y , al mismo tiempo , si algo no es atractivo visualmente para el internauta es difícil que se desarrolle como producto: no se diferencia de los demás pareciera anticuado, nadie recordaría la web etc.
  • 14. ARQUITECTURA DE LA INFORMACION • Tomando como punto de partida el articulo de rain Baker podemos definir los siguientes pasos necesarios para una arquitectura de la información acertada. • 1. entender el contenido de la web. • 2. realizar estudios de card Stirling. • 3. elaborar un borrador del árbol de la web, agrupando la información estableciendo jerarquías. • 4. evaluar la correspondencia de nuestro árbol y los resultados del card sorting. • 5. crear el mapa del sitio. • 6. definir las funcionalidades de las pagina y como se llega a ellas. • 7. contrastar la organización de la información que hemos propuesto con el resto de miembros del equipo. • 8. elaborar el wireframe que le pasaremos al departamento de diseño y al e programación.
  • 15. ESTANDARES • EL VERDADERO TRIUNFO DE LAS WEB 2.0 HA SIDO EL TRIUNFO DE LOS ESTANDARES .Web se define como el conjunto de recomendaciones dados por el Word Wide web consortium y otras organizaciones internacionales acerca de como crear e interpretar documentos basados en el web. • Son normas que permiten alas webs se puedan visionar no solo en el internet exploer , si no también en los navegadores para personas ciegas o dispositivos móviles como PDA o teléfonos móviles , as como para los internautas que utilizan velocidades de transparencia baja. En un papel de guía de los desarrolladores web , law3c recomienda el uso de dos estándares :CCS Y HTML.
  • 16. CCS • Son un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. • 1. VENTAJAS: • Es mas sencillo realizar cambios globales. • El estilo del site se mantiene en toda su extensión . • El site es mas accesible. • Rápida descarga. • Separación del diseño y la programación. • Esta optimizado para buscadores. • El usuario puede utilizar sus propias normas de estilo. • Una mayor libertad en la maquetación.
  • 17. XHTML • Es el lenguaje demarcado pensando para sustituir al HTML ,pero aun le queda camino por recorrer . • El HTML es una versión mas estricta del código HTML para conseguir reducir las posibilidades de uso y que la interpretación por los distintos dispositivos sea mas simple, y que pequeños positivos , con menor capacidad que los ordenadores de mesa tradicionales puedan soportar , como los móviles • VENTAJAS. • La compatibilidad con navegadores antiguos. • La independencia del diseño. • Facilidad de edición del código y su mantenimiento. • Mejoras de rendimiento.