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.

1. los
pilares
diseño
web
del

3. experiencia
de usuario
funcionalidad
objetivos
diseño
contenido

4. objetivos

5. www.paginasamarillas.com.do

7. primarios
secundarios

9. música
su objetivo
principal

12. contenido

13. no
el usuario entra a buscar
diseño
contenido
entra a buscar

14. contenido
rey
es el

15. página
la
debe
dar honor
contenido

16. experiencia de usuario

23. “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

31. paginasamarillas.com.do

32. paginasamarillas.com.do

33. paginasamarillas.com.do

34. paginasamarillas.com.do

35. la interface
es nuestro producto

36. la interface
es nuestro producto
puntos

37. jerarquiza la información
la interface es nuestro producto

38. www.paginasamarillas.com.do

42. flujo
la interface es nuestro producto

43. www.basecamphq.com

44. www.metrotours.com.do

45. personal
la interface es nuestro producto

47. www.prodacom.com

48. www.prodacom.com

49. custom
ización
la interface es nuestro producto

51. www.twitter.com

52. www.twitter.com

53. www.twitter.com

54. www.twitter.com

55. www.twitter.com

56. www.twitter.com

57. www.twitter.com

58. detalle
la interface es nuestro producto

59. tweet1.com

60. tweet1.com

61. funcionalidad

62. “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

66. “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

67. “progressive enhancement”
mejora progresiva
realmente significa cosas chulas
que no funcionan en IE
@simplebits

68. contenido
contenido
contenido
contenido

71. madebyelephant.com

72. madebyelephant.com

73. www.wdl.org

74. www.wdl.org

75. www.google.com

76. www.google.com

77. www.google.com

78. buen
uso
tecnología

80. el salvador
del universo

81. “web standards”
estándares de la web

82. “web standards”
estándares de la web

83. “web standards”
estándares de la web

84. HTML
contenido

85. CSS
presentación

86. Java
comportamiento
cript

87. TML
SS
javascript

117. TML
SS
javascript

118. TML
SS flash
javascript

120. sIFR
Scalable Inman Flash Replacement

133. IE6

134. IE6

136. “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

137. diseño

138. inspiración
dónde la encontramos

139. 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

141. “colecciona, organiza, crea!”
john hicks

151. “El diseño no es lo que haces,
es un estilo de vida”
alan fletcher

152. diseño - diagramación

159. “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

167. 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-

175. phi 1.618
la sección dorada

187. 960 / 1.618
593 367

188. 960 / 1.618
593 367

189. 960 / 1.618
593 367

192. diseño - color

197. kuler.adobe.com

198. 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.

199. 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.

200. 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.

201. 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.

202. diseño - tipografía

204. “usar una buena tipografía
no es seleccionar
una tipografía “chula””

205. “usar una buena tipografía
significa hacer algo imperceptible
y ayudar a la lectura”

206. 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

207. 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

208. Títulos Títulos
Subtítulos
Subtítulos
encabezados
encabezados
Cuerpo del texto
Cuerpo del texto
jerarquizar

217. diagramación
color
tipografía

218. la
excelencia
gráfica
edward r. tufte

219. “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

220. 13 3 0
52 1
21 34 8

221. 13 3 0
52 1
21 34 8

223. 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

224. 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

225. 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

226. 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

227. web
2.0

228. 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

229. web1.0 web2.0

230. 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

231. 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

232. 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

233. 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

234. 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

235. 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

237. 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

238. 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

239. 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

240. 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

241. 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

242. 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

243. colabo-
ración

244. www.go2web20.net

245. experiencia
de usuario
funcionalidad
objetivos
diseño
contenido

246. los
pilares
diseño
web
del

249. phixarmedia.com
twitter
phixarmedia
facebook

251. 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