Los Pilares Del Diseno Web

Embed Size (px)

DESCRIPTION

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.

Citation preview

  • 1.lospilares diseo web del

2. experiencia de usuariofuncionalidad objetivos diseo contenido 3. objetivos 4. www.paginasamarillas.com.do 5. primarios secundarios 6. msica su objetivoprincipal 7. contenido 8. no el usuario entra a buscardiseo contenidoentra a buscar 9. contenido rey es el 10. pgina ladebe dar honor contenido 11. experiencia de usuario 12. mi Pap no sabe usar el control remoto de la TV, pero sabe enviaremails, buscar en Google yescribir en Wikipedia :)juan tejada http://www.phixarmedia.com/index.php/news/14/51/Experiencia-de-usuario-Parte-1 13. paginasamarillas.com.do 14. paginasamarillas.com.do 15. paginasamarillas.com.do 16. paginasamarillas.com.do 17. la interfacees nuestro producto 18. la interfacees nuestro productopuntos 19. jerarquiza la informacinla interface es nuestro producto 20. www.paginasamarillas.com.do 21. flujo la interface es nuestro producto 22. www.basecamphq.com 23. www.metrotours.com.do 24. personal la interface es nuestro producto 25. www.prodacom.com 26. www.prodacom.com 27. customizacin la interface es nuestro producto 28. www.twitter.com 29. www.twitter.com 30. www.twitter.com 31. www.twitter.com 32. www.twitter.com 33. www.twitter.com 34. www.twitter.com 35. detalle la interface es nuestro producto 36. tweet1.com 37. tweet1.com 38. funcionalidad 39. graceful degradationdegradacin agraciada los diseadores crean las pginas para los navegadores ms recientes del momentoy procuran que trabaje tambin en viejas versiones del navegador http://es.wikipedia.org/wiki/Mejora_progresiva 40. progressive enhancementmejora progresiva busca el comn denonimadorde los peores navegadores y aade efectos especiales a aquellos que lo acepten http://es.wikipedia.org/wiki/Mejora_progresiva 41. progressive enhancement mejora progresivarealmente significa cosas chulas que no funcionan en IE@simplebits 42. contenido contenido contenido contenido 43. madebyelephant.com 44. madebyelephant.com 45. www.wdl.org 46. www.wdl.org 47. www.google.com 48. www.google.com 49. www.google.com 50. buen uso tecnologa 51. el salvador del universo 52. web standards estndares de la web 53. web standards estndares de la web 54. web standards estndares de la web 55. HTML contenido 56. CSSpresentacin 57. Java comportamiento cript 58. TML SS javascript 59. TML SS javascript 60. TML SS ash javascript 61. sIFR Scalable Inman Flash Replacement 62. IE6 63. IE6 64. la clave del xito es sabercundo y cmo usar la tecnologa. Esto es lo que hace el diseo web una obra de arte andy clark 65. diseo 66. inspiracin dnde la encontramos 67. quot;Los diseadores debemos ser sanguijuelas visuales,constntemente catalogando y grabando informacin como una cmara que est siempre tomando fotosquot; jason santa mara 68. colecciona, organiza, crea! john hicks 69. El diseo no es lo que haces,es un estilo de vida alan etcher 70. diseo - diagramacin 71. El diseo con grids o rejillas es una habilidad fundamental de cualquierdiseador. Entender la relacinproporcional, espacios en blancos, espacios y composicin son vitales enconstruir rejillas para cualquier plataforma - web, impresos y 3Dmark boulton 72. Buscar Contctenos Mapa del sitio Imprimir pgina A Tamano del textoAA CERVECERIA NACIONAL DOMINICANA Inicio Sobre la empresa Nuestras marcasExportaciones Responsabilidad social Sala de prensaThe One Movement The One Movement obtiene tres pre- mios en festival internacional Ver ms Tu ta en lo tuyo! Cerveza Bohemia devela su nueva campaa T.TT.El dominicano es dulce y saladoVer msQUINES SOMOS ULTIMAS NOTICIAS Marcas Cervecera Nacional Dominicana y Cervecera Bohemia, son las empresas pro-24 ABR The One Movement obtiene tres ductoras de cervezas y maltas del Grupo Len Jimenes. Sus plantas de produc- premios en festival internacional cin tienen una capacidad anual de 5,000,000 hectolitros. Ambas plantas estn certificadas bajo las normas ISO 9001 de calidad e ISO 14001 de medioambi- Marcas ente. Ver ms El Torneo de Voleibol Norceca,24 MAR Copa Presidente Light, arranca este viernes CONSUMO RESPONSABLEMERCADO DE EXPORTACION Marcas Un total de 16 pases24 MAR competirn en el Torneo de Voleibol Norceca, en busca de la Copa Presidente Ligh Cervecera Nacional Dominicana (CND)Cervecera Nacional Dominicana Marcas est ejecutando una campaa de comu-(CND) est ejecutando una campaa Cervecera Nacional24 MAR nicacin con la finalidad de promover lade comunicacin 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 alcohlicas.consumo de cerveza y de otras bebi- 73. phi 1.618 la seccin dorada 74. 960 / 1.618 593367 75. 960 / 1.618 593367 76. 960 / 1.618 593367 77. diseo - color 78. kuler.adobe.com 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, quisminim veniam, quis nostrud nostrud exercitation ullamcoexercitation ullamco laboris laboris nisi ut aliquip ex ea nisi ut aliquip ex ea commodo commodo consequat.consequat. 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, quisminim veniam, quis nostrud nostrud exercitation ullamcoexercitation ullamco laboris laboris nisi ut aliquip ex ea nisi ut aliquip ex ea commodo commodo consequat.consequat. 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 nostrudenim 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 nostrudincididunt ut labore et exercitation ullamco laboris nisi ut aliquip ex dolore magna aliqua. Ut enim ad minim veniam, ea commodo consequat. 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 nostrudenim 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 clicminim 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 nostruddolore magna aliqua. Ut enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 83. diseo - tipografa 84. usar una buena tipografa no es seleccionar una tipografa chula 85. usar una buena tipografa signica hacer algo imperceptibley ayudar a la lectura 86. Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. espacio entre lneas 87. Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. espacio entre lneas 88. Ttulos TtulosSubttulos Subttulosencabezados encabezadosCuerpo del texto Cuerpo del texto jerarquizar 89. diagramacin color tipografa 90. la excelencia grficaedward r. tufte 91. le da al espectador mucha informacin en el menor tiempo y con la menos cantidad de tintaposible en un espacio reducidoedward r. tufte 92. 13 3052 1 21 34 8 93. 13 3052 1 21 34 8 94. Discurso de presidente en el XI Encuentro De Economistas En Cuba Planes De Rescate Y 4 Mar 2009 Leer ms Estmulo: medidas insucientes ante una crisis global persistente Palabras expresadas por el Presidente Leonel 2 Mar 2009 Fernndez en Santiago de los Caballeros conLeer ms motivo de la culminacin de la primera etapa de la cumbre por la unidad nacional frente a la crisis econmica mundial Discurso del honorable Seor Presidente Leonel 27 Feb 2009 Fernndez ante la Asamblea Nacional en el 165Leer ms aniversario de la Independencia Nacional 95. Discurso de presidente en el XI Encuentro De 4 Mar 2009 Economistas En Cuba Planes De Rescate Y Estmulo: medidas insucientes ante una crisis global persistente Leer ms Palabras expresadas por el Presidente Leonel 2 Mar 2009 Fernndez en Santiago de los Caballeros con motivo de la culminacin de la primera etapa de la cumbre por la unidad nacional frente a la crisis econmica mundial Leer ms Discurso del honorable Seor Presidente Leonel 27 Feb 2009 Fernndez ante la Asamblea Nacional en el 165 aniversario de la Independencia Nacional Leer ms 96. Discurso de presidente en el XI Encuentro De 4 Mar 2009 Economistas En Cuba Planes De Rescate Y Estmulo: medidas insucientes ante una crisis global persistente Leer ms Palabras expresadas por el Presidente Leonel 2 Mar 2009 Fernndez en Santiago de los Caballeros con motivo de la culminacin de la primera etapa de la cumbre por la unidad nacional frente a la crisis econmica mundial Leer ms Discurso del honorable Seor Presidente Leonel 27 Feb 2009 Fernndez ante la Asamblea Nacional en el 165 aniversario de la Independencia Nacional Leer ms 97. Discurso de presidente en el XI Encuentro De 4 Mar 2009 Economistas En Cuba Planes De Rescate Y Estmulo: medidas insucientes ante una crisis global persistente Palabras expresadas por el Presidente Leonel 2 Mar 2009 Fernndez en Santiago de los Caballeros con motivo de la culminacin de la primera etapa de la cumbre por la unidad nacional frente a la crisis econmica mundial Discurso del honorable Seor Presidente Leonel 27 Feb 2009 Fernndez ante la Asamblea Nacional en el 165 aniversario de la Independencia Nacional 98. web 2.0 99. se reere a una segunda generacin en la historia de la Web basada en comunidades de usuarios y una gama especial de servicios que fomentan la colaboracin y el intercambio gil deinformacin entre los usuarios http://es.wikipedia.org/wiki/Web_2.0 100. web1.0 web2.0 101. web1.0web2.0mp3.comlimewire enciclopedia britnicawikipediaweb personalesblogging ofoto ickrespeculacin de nombresoptimizacin de los de dominios motores de bsquedasscreen scrapingservicios web 102. web1.0web2.0mp3.comlimewire enciclopedia britnicawikipediaweb personalesblogging ofoto ickrespeculacin de nombresoptimizacin de los de dominios motores de bsquedasscreen scrapingservicios web 103. web1.0web2.0mp3.comlimewire enciclopedia britnicawikipediaweb personalesblogging ofoto ickrespeculacin de nombresoptimizacin de los de dominios motores de bsquedasscreen scrapingservicios web 104. web1.0web2.0mp3.comlimewire enciclopedia britnicawikipediaweb personalesblogging ofoto ickrespeculacin de nombresoptimizacin de los de dominios motores de bsquedasscreen scrapingservicios web 105. web1.0web2.0mp3.comlimewire enciclopedia britnicawikipediaweb personalesblogging ofoto ickrespeculacin de nombresoptimizacin de los de dominios motores de bsquedasscreen scrapingservicios web 106. web1.0web2.0mp3.comlimewire enciclopedia britnicawikipediaweb personalesblogging ofoto ickrespeculacin de nombresoptimizacin de los de dominios motores de bsquedasscreen scrapingservicios web 107. wordpress bloggertwitterfacebookHi-5mySpacewikipedia delicious google readerickr youtubevimeodevianartlasf.fm ustream.tvthe simsworld of warcraft miniclip 108. wordpress bloggertwitterfacebookHi-5mySpacewikipedia delicious google readerickr youtubevimeodevianartlasf.fm ustream.tvthe simsworld of warcraft miniclip 109. wordpress bloggertwitterfacebookHi-5mySpacewikipedia delicious google readerickr youtubevimeodevianartlasf.fm ustream.tvthe simsworld of warcraft miniclip 110. wordpress bloggertwitterfacebookHi-5mySpacewikipedia delicious google readerickr youtubevimeodevianartlasf.fm ustream.tvthe simsworld of warcraft miniclip 111. wordpress bloggertwitterfacebookHi-5mySpacewikipedia delicious google readerickr youtubevimeodevianartlasf.fm ustream.tvthe simsworld of warcraft miniclip 112. wordpress bloggertwitterfacebookHi-5mySpacewikipedia delicious google readerickr youtubevimeodevianartlasf.fm ustream.tvthe simsworld of warcraft miniclip 113. colabo-racin 114. www.go2web20.net 115. experiencia de usuariofuncionalidad objetivos diseo contenido 116. lospilares diseo web del 117. phixarmedia.comtwitterphixarmedia facebook 118. fotos los http://www.ickr.com/photos/stoppinglight/126602298/ pilares http://www.ickr.com/photos/96dpi/2119924191/ http://www.ickr.com/photos/disneymike/221791867/sizes/o/ http://www.ickr.com/photos/jmvnoos/2614981455/ http://www.ickr.com/photos/jpeepz/8487174/ http://www.ickr.com/photos/41427422@N00/2171174895/in/photostream/ http://www.ickr.com/photos/mark_boucher/1417497654/ http://www.ickr.com/photos/dschwabe/3198535171/ del diseo http://www.ickr.com/photos/christmaswithak/1074766379/ web http://www.ickr.com/photos/helloinsane/ http://www.ickr.com/photos/courtneymay/2424038090/ http://www.ickr.com/photos/rufo_83/390404874/ pginas (x)html y css phixarmedia www.corporateriskwatch.comwww.phixarmedia.com www.subtractions.comwww.atlantisrd.com www.ilovetypography.com www.cnd.com.do www.vondutch.comwww.costablanca.com.do www.duoh.comwww.hotelhispaniola.com www.jasonsantamaria.com www.gobarahona.com www.veerle.duoh.com www.metrotours.com.do www.31three.com www.prodacom.com www.meagansher.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.orghttp://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