Los Pilares Del Diseno Web

2,795 views

Published on

Influencias que ejercen otros aspectos de la web como la funcionalidad/experiencia de usuario, el contenido, las herramientas de desarrollo y los objetivos del proyecto. Creemos que es importante que los nuevos diseñadores que se están formando entiendan el equilibrio que debe existir entre todos estos aspectos que muchas veces entran en conflicto en un proyecto. En la medida que podamos tener una visión completa del problema podremos diseñar soluciones exitosas.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,795
On SlideShare
0
From Embeds
0
Number of Embeds
179
Actions
Shares
0
Downloads
74
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Los Pilares Del Diseno Web

  1. 1. los pilares diseño web del
  2. 2. experiencia de usuario funcionalidad objetivos diseño contenido
  3. 3. objetivos
  4. 4. www.paginasamarillas.com.do
  5. 5. primarios secundarios
  6. 6. música su objetivo principal
  7. 7. contenido
  8. 8. no el usuario entra a buscar diseño contenido entra a buscar
  9. 9. contenido rey es el
  10. 10. página la debe dar honor contenido
  11. 11. experiencia de usuario
  12. 12. “mi Papá no sabe usar el control remoto de la TV, pero sabe enviar emails, buscar en Google y escribir en Wikipedia :)” juan tejada http://www.phixarmedia.com/index.php/news/14/51/ Experiencia-de-usuario-Parte-1
  13. 13. paginasamarillas.com.do
  14. 14. paginasamarillas.com.do
  15. 15. paginasamarillas.com.do
  16. 16. paginasamarillas.com.do
  17. 17. la interface es nuestro producto
  18. 18. la interface es nuestro producto puntos
  19. 19. jerarquiza la información la interface es nuestro producto
  20. 20. www.paginasamarillas.com.do
  21. 21. flujo la interface es nuestro producto
  22. 22. www.basecamphq.com
  23. 23. www.metrotours.com.do
  24. 24. personal la interface es nuestro producto
  25. 25. www.prodacom.com
  26. 26. www.prodacom.com
  27. 27. custom ización la interface es nuestro producto
  28. 28. www.twitter.com
  29. 29. www.twitter.com
  30. 30. www.twitter.com
  31. 31. www.twitter.com
  32. 32. www.twitter.com
  33. 33. www.twitter.com
  34. 34. www.twitter.com
  35. 35. detalle la interface es nuestro producto
  36. 36. tweet1.com
  37. 37. tweet1.com
  38. 38. funcionalidad
  39. 39. “graceful degradation” degradación agraciada los diseñadores crean las páginas para los navegadores más recientes del momento y procuran que trabaje también en viejas versiones del navegador http://es.wikipedia.org/wiki/Mejora_progresiva
  40. 40. “progressive enhancement” mejora progresiva busca el común denonimador de los peores navegadores y añade efectos especiales a aquellos que lo acepten http://es.wikipedia.org/wiki/Mejora_progresiva
  41. 41. “progressive enhancement” mejora progresiva realmente significa cosas chulas que no funcionan en IE @simplebits
  42. 42. contenido contenido contenido contenido
  43. 43. madebyelephant.com
  44. 44. madebyelephant.com
  45. 45. www.wdl.org
  46. 46. www.wdl.org
  47. 47. www.google.com
  48. 48. www.google.com
  49. 49. www.google.com
  50. 50. buen uso tecnología
  51. 51. el salvador del universo
  52. 52. “web standards” estándares de la web
  53. 53. “web standards” estándares de la web
  54. 54. “web standards” estándares de la web
  55. 55. HTML contenido
  56. 56. CSS presentación
  57. 57. Java comportamiento cript
  58. 58. TML SS javascript
  59. 59. TML SS javascript
  60. 60. TML SS flash javascript
  61. 61. sIFR Scalable Inman Flash Replacement
  62. 62. IE6
  63. 63. IE6
  64. 64. “la clave del éxito es saber cuándo y cómo usar la tecnología. Esto es lo que hace el diseño web una obra de arte” andy clark
  65. 65. diseño
  66. 66. inspiración dónde la encontramos
  67. 67. quot;Los diseñadores debemos ser sanguijuelas visuales, constántemente catalogando y grabando información como una cámara que está siempre tomando fotosquot; jason santa maría
  68. 68. “colecciona, organiza, crea!” john hicks
  69. 69. “El diseño no es lo que haces, es un estilo de vida” alan fletcher
  70. 70. diseño - diagramación
  71. 71. “El diseño con “grids” o rejillas es una habilidad fundamental de cualquier diseñador. Entender la relación proporcional, espacios en blancos, espacios y composición son vitales en construir rejillas para cualquier plataforma - web, impresos y 3D” mark boulton
  72. 72. Buscar Contáctenos Mapa del sitio Imprimir página A Tamañno del texto A A CERVECERIA NACIONAL DOMINICANA Inicio Sobre la empresa Nuestras marcas Exportaciones Responsabilidad social Sala de prensa The One Movement The One Movement obtiene tres pre- mios en festival internacional Ver más Tu ta en lo tuyo! Cerveza Bohemia devela su nueva campaña T.TT. El dominicano es dulce y salado Ver más QUINES SOMOS ULTIMAS NOTICIAS Marcas Cervecería Nacional Dominicana y Cervecería Bohemia, son las empresas pro- 24 ABR The One Movement obtiene tres ductoras de cervezas y maltas del Grupo León Jimenes. Sus plantas de produc- premios en festival internacional ción tienen una capacidad anual de 5,000,000 hectolitros. Ambas plantas están certificadas bajo las normas ISO 9001 de calidad e ISO 14001 de medioambi- Marcas ente. Ver más El Torneo de Voleibol Norceca, 24 MAR Copa Presidente Light, arranca este viernes CONSUMO RESPONSABLE MERCADO DE EXPORTACION Marcas Un total de 16 países 24 MAR competirán en el Torneo de Voleibol Norceca, en busca de la Copa Presidente Ligh Cervecería Nacional Dominicana (CND) Cervecería Nacional Dominicana Marcas está ejecutando una campaña de comu- (CND) está ejecutando una campaña Cervecería Nacional 24 MAR nicación con la finalidad de promover la de comunicación con la finalidad de Dominicana presenta tres nuevos sabores de Smirnoff Ice responsabilidad en el consumo de cer- promover la responsabilidad en el veza y de otras bebidas alcohólicas. consumo de cerveza y de otras bebi-
  73. 73. phi 1.618 la sección dorada
  74. 74. 960 / 1.618 593 367
  75. 75. 960 / 1.618 593 367
  76. 76. 960 / 1.618 593 367
  77. 77. diseño - color
  78. 78. kuler.adobe.com
  79. 79. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit, sed do eiusmod tempor sed do eiusmod tempor incididunt ut labore et incididunt ut labore et dolore dolore magna aliqua. Ut magna aliqua. Ut enim ad enim ad minim veniam, quis minim veniam, quis nostrud nostrud exercitation ullamco exercitation ullamco laboris laboris nisi ut aliquip ex ea nisi ut aliquip ex ea commodo commodo consequat. consequat.
  80. 80. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit, sed do eiusmod tempor sed do eiusmod tempor incididunt ut labore et incididunt ut labore et dolore dolore magna aliqua. Ut magna aliqua. Ut enim ad enim ad minim veniam, quis minim veniam, quis nostrud nostrud exercitation ullamco exercitation ullamco laboris laboris nisi ut aliquip ex ea nisi ut aliquip ex ea commodo commodo consequat. consequat.
  81. 81. veniamcommodo consequat. Lorem ipsum dolor sit amet, consectetur jorem ipsum dolor sit amet, consectetur adipisicing elit, sed do adipisicing elit, sed do eiusmod tempor eiusmod tempor incididunt ut labore et incididunt ut labore et dolore magna aliqua. Ut dolore magna aliqua. Ut enim ad minim veniam, quis nostrud enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex quis nostrud exercitation ullamco ea commodo consequat. laboris nisi ut aliquip ex ea commodo consequat. minim veniamcommodo jorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit adipisicing elit, sed do eiusmod tempor amet, consectetur incididunt ut labore et dolore magna aliqua. Ut adipisicing elit, sed do eiusmod tempor enim ad minim veniam, quis nostrud incididunt ut labore et exercitation ullamco laboris nisi ut aliquip ex dolore magna aliqua. Ut enim ad minim veniam, ea commodo consequat.
  82. 82. veniamcommodo consequat. Lorem ipsum dolor sit amet, consectetur jorem ipsum dolor sit amet, consectetur adipisicing elit, sed do adipisicing elit, sed do eiusmod tempor eiusmod tempor incididunt ut labore et incididunt ut labore et dolore magna aliqua. Ut dolore magna aliqua. Ut enim ad minim veniam, quis nostrud enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex quis nostrud exercitation ullamco ea commodo consequat. laboris nisi ut aliquip ex ea commodo consequat. clic clic minim veniamcommodo Lorem ipsum dolor sit jorem ipsum dolor sit amet, consectetur amet, consectetur adipisicing elit, sed do eiusmod tempor adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut incididunt ut labore et enim ad minim veniam, quis nostrud dolore magna aliqua. Ut enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  83. 83. diseño - tipografía
  84. 84. “usar una buena tipografía no es seleccionar una tipografía “chula””
  85. 85. “usar una buena tipografía significa hacer algo imperceptible y ayudar a la lectura”
  86. 86. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. espacio entre líneas
  87. 87. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. espacio entre líneas
  88. 88. Títulos Títulos Subtítulos Subtítulos encabezados encabezados Cuerpo del texto Cuerpo del texto jerarquizar
  89. 89. diagramación color tipografía
  90. 90. la excelencia gráfica edward r. tufte
  91. 91. “le da al espectador mucha información en el menor tiempo y con la menos cantidad de tinta posible en un espacio reducido” edward r. tufte
  92. 92. 13 3 0 52 1 21 34 8
  93. 93. 13 3 0 52 1 21 34 8
  94. 94. Discurso de presidente en el XI Encuentro De Economistas En Cuba “Planes De Rescate Y 4 Mar 2009 Leer más Estímulo: medidas insuficientes ante una crisis global persistente” Palabras expresadas por el Presidente Leonel 2 Mar 2009 Fernández en Santiago de los Caballeros con Leer más motivo de la culminación de la primera etapa de la cumbre por la unidad nacional frente a la crisis económica mundial Discurso del honorable Señor Presidente Leonel 27 Feb 2009 Fernández ante la Asamblea Nacional en el 165 Leer más aniversario de la Independencia Nacional
  95. 95. Discurso de presidente en el XI Encuentro De 4 Mar 2009 Economistas En Cuba “Planes De Rescate Y Estímulo: medidas insuficientes ante una crisis global persistente” Leer más Palabras expresadas por el Presidente Leonel 2 Mar 2009 Fernández en Santiago de los Caballeros con motivo de la culminación de la primera etapa de la cumbre por la unidad nacional frente a la crisis económica mundial Leer más Discurso del honorable Señor Presidente Leonel 27 Feb 2009 Fernández ante la Asamblea Nacional en el 165 aniversario de la Independencia Nacional Leer más
  96. 96. Discurso de presidente en el XI Encuentro De 4 Mar 2009 Economistas En Cuba “Planes De Rescate Y Estímulo: medidas insuficientes ante una crisis global persistente” Leer más Palabras expresadas por el Presidente Leonel 2 Mar 2009 Fernández en Santiago de los Caballeros con motivo de la culminación de la primera etapa de la cumbre por la unidad nacional frente a la crisis económica mundial Leer más Discurso del honorable Señor Presidente Leonel 27 Feb 2009 Fernández ante la Asamblea Nacional en el 165 aniversario de la Independencia Nacional Leer más
  97. 97. Discurso de presidente en el XI Encuentro De 4 Mar 2009 Economistas En Cuba “Planes De Rescate Y Estímulo: medidas insuficientes ante una crisis global persistente” Palabras expresadas por el Presidente Leonel 2 Mar 2009 Fernández en Santiago de los Caballeros con motivo de la culminación de la primera etapa de la cumbre por la unidad nacional frente a la crisis económica mundial Discurso del honorable Señor Presidente Leonel 27 Feb 2009 Fernández ante la Asamblea Nacional en el 165 aniversario de la Independencia Nacional
  98. 98. web 2.0
  99. 99. se refiere a una segunda generación en la historia de la Web basada en comunidades de usuarios y una gama especial de servicios que fomentan la colaboración y el intercambio ágil de información entre los usuarios http://es.wikipedia.org/wiki/Web_2.0
  100. 100. web1.0 web2.0
  101. 101. web1.0 web2.0 mp3.com limewire enciclopedia británica wikipedia web personales blogging ofoto flickr especulación de nombres optimización de los de dominios motores de búsquedas screen scraping servicios web
  102. 102. web1.0 web2.0 mp3.com limewire enciclopedia británica wikipedia web personales blogging ofoto flickr especulación de nombres optimización de los de dominios motores de búsquedas screen scraping servicios web
  103. 103. web1.0 web2.0 mp3.com limewire enciclopedia británica wikipedia web personales blogging ofoto flickr especulación de nombres optimización de los de dominios motores de búsquedas screen scraping servicios web
  104. 104. web1.0 web2.0 mp3.com limewire enciclopedia británica wikipedia web personales blogging ofoto flickr especulación de nombres optimización de los de dominios motores de búsquedas screen scraping servicios web
  105. 105. web1.0 web2.0 mp3.com limewire enciclopedia británica wikipedia web personales blogging ofoto flickr especulación de nombres optimización de los de dominios motores de búsquedas screen scraping servicios web
  106. 106. web1.0 web2.0 mp3.com limewire enciclopedia británica wikipedia web personales blogging ofoto flickr especulación de nombres optimización de los de dominios motores de búsquedas screen scraping servicios web
  107. 107. wordpress blogger twitter facebook Hi-5 mySpace wikipedia delicious google reader flickr youtube vimeo devianart lasf.fm ustream.tv the sims world of warcraft miniclip
  108. 108. wordpress blogger twitter facebook Hi-5 mySpace wikipedia delicious google reader flickr youtube vimeo devianart lasf.fm ustream.tv the sims world of warcraft miniclip
  109. 109. wordpress blogger twitter facebook Hi-5 mySpace wikipedia delicious google reader flickr youtube vimeo devianart lasf.fm ustream.tv the sims world of warcraft miniclip
  110. 110. wordpress blogger twitter facebook Hi-5 mySpace wikipedia delicious google reader flickr youtube vimeo devianart lasf.fm ustream.tv the sims world of warcraft miniclip
  111. 111. wordpress blogger twitter facebook Hi-5 mySpace wikipedia delicious google reader flickr youtube vimeo devianart lasf.fm ustream.tv the sims world of warcraft miniclip
  112. 112. wordpress blogger twitter facebook Hi-5 mySpace wikipedia delicious google reader flickr youtube vimeo devianart lasf.fm ustream.tv the sims world of warcraft miniclip
  113. 113. colabo- ración
  114. 114. www.go2web20.net
  115. 115. experiencia de usuario funcionalidad objetivos diseño contenido
  116. 116. los pilares diseño web del
  117. 117. phixarmedia.com twitter phixarmedia facebook
  118. 118. fotos los http://www.flickr.com/photos/stoppinglight/126602298/ pilares http://www.flickr.com/photos/96dpi/2119924191/ http://www.flickr.com/photos/disneymike/221791867/sizes/o/ http://www.flickr.com/photos/jmvnoos/2614981455/ http://www.flickr.com/photos/jpeepz/8487174/ http://www.flickr.com/photos/41427422@N00/2171174895/in/photostream/ http://www.flickr.com/photos/mark_boucher/1417497654/ http://www.flickr.com/photos/dschwabe/3198535171/ del diseño http://www.flickr.com/photos/christmaswithak/1074766379/ web http://www.flickr.com/photos/helloinsane/ http://www.flickr.com/photos/courtneymay/2424038090/ http://www.flickr.com/photos/rufo_83/390404874/ páginas (x)html y css phixarmedia www.corporateriskwatch.com www.phixarmedia.com www.subtractions.com www.atlantisrd.com www.ilovetypography.com www.cnd.com.do www.vondutch.com www.costablanca.com.do www.duoh.com www.hotelhispaniola.com www.jasonsantamaria.com www.gobarahona.com www.veerle.duoh.com www.metrotours.com.do www.31three.com www.prodacom.com www.meaganfisher.com/ www.arspalicsalud.com.do www.mattdempsey.com/ www.sinfonia.org.do www.wallswaps.com/ www.e-diesco.com justinworrall.com/blog/ student.opendoorsuk.org/ www.generationchurch.org/ otras referencias particletree.com/ www.ocean70.com/ www.twitter.com www.ndesign-studio.com/ www.paginasamarillas.com.do www.silverbackapp.com/ www.google.com www.robweychert.com/ www.apple.com/iphoto www.mica.edu www.apple.com/ipod www.multiways.com/ http://picassa.google.com brendandawes.com/ www.islandree#ob.com/ www.madebyelephant.com boagworld.com/ www.wdl.org http://en.wikipedia.org/wiki/Social_media adaptd.com/ http://es.wikipedia.org/wiki/Mejora_progresiva 24ways.org/ new.typographica.org/ balhar.com/ squaredeye.com/ kuler.adobe.com/ tweet1.com/ http://experiments.instrum3nt.com/ markmahoney/ball/# http://www.kelvinluck.com/assets/jquery/ boingPic/index.html

×