El documento presenta una charla sobre el origen y evolución del diseño web. Se explica cómo los primeros sitios web se hacían con HTML y GIFs de forma rudimentaria y cómo luego llegaron tecnologías como Flash, CSS y JavaScript que revolucionaron el diseño web. También se describen diferentes perfiles de diseñadores web y herramientas para organizar y realizar proyectos de diseño.

1. FORO DE PERIODISTAS / FACULTAD DE PERIODISMO
UNIVERSIDAD MIGUEL HERNÁNDEZ
Diseño Web
#dwebumh

2. Presentación
• Tres años trabajando en Madrid para
Delvico Redcell
•Caja Madrid, PWC, Grupo Santander
•Revolución a crisis de las .com 2000 / 2001

3. Presentación
• 2002 Vuelta a Alicante
•Mi perfil profesional no termina de encajar en
ninguna empresa
•2005 empiezo a trabajar como Freelance
•2009 creamos Avanza Soluciones

4. Orígenes del Diseño Web

5. Orígenes del Diseño Web
El maravilloso html...
Orígenes del diseño web

6. Orígenes del Diseño Web
El maravilloso html...
… hacíamos lo que podíamos
Orígenes del diseño web

7. … hacíamos lo que podíamos
Orígenes del diseño web

8. … y llegaron los gifs
Orígenes del diseño web
http://www.11points.com/Web-Tech/11_Best_Old_School_Animated_GIFs

9. …y las intros en flash
Orígenes del diseño web

10. …y vino a salvarnos el css y el dhtml
Orígenes del diseño web

11. …y para aportarnos más
interactividad jQuery y Html5
Orígenes del diseño web

12. Orígenes del diseño web

13. Perfiles del diseñador web
Perfiles
del diseñador web

14. 1
Perfiles del diseñador web
1. Diseñador
gráfico

15. 1
Perfiles del diseñador web
2. Arquitecto de
la información

16. 1
Perfiles del diseñador web
3. Diseñador de aplicaciones
usabilidad y multimedia

17. 1
Perfiles del diseñador web
Diseñador multidisciplinar
con conocimientos “avanzados” de
programación

18. 1
Perfiles del diseñador web
Oferta de empleo:
Buscamos diseñador gráfico/multimedia licenciado en Bellas Artes con
experiencia en el diseño de interfaces. Especialista en el uso de Adobe
Photoshop, Dreamweaver, Illustrator , Flash.
Conocimientos avanzados en programación smarty, php, lynux, mysql,
javascript, jquery. Experiencia demostrable en integración de
plataformas Wordpress, Joomla, Magento, Prestashop
Se valorarán conocimientos en Silver Light, Asp, .Net , 3DStudio Max,
Maya y Blender, Marketing Online, posicionamiento en buscadores y
aptitudes comerciales.

19. 1
Perfiles del diseñador web
Oferta de empleo:
675€

20. Diseño + Usabilidad =
Diferenciación
y Coherencia

21. Isidro Pérez
Diseño Web
Diseño = sentimientos
●
Con el diseño buscamos captar
la atención del usuario
●
Buscamos fidelizarlo y que se sienta
cómodo e identificado usando nuestra web

22. Isidro Pérez
Diseño Web

23. Isidro Pérez
Diseño Web

24. Isidro Pérez
Diseño Web

25. Isidro Pérez
Diseño Web
Diseño = marca + diferenciación
●
Crear un ambiente que el usuario identifique
con una determinada marca
●
Diferenciarnos de nuestros competidores
●
Fomentar la personalidad empresarial

26. Isidro Pérez
Diseño Web

27. Isidro Pérez
Diseño Web

28. Isidro Pérez
Diseño Web

29. Isidro Pérez
Diseño Web

30. Isidro Pérez
Diseño Web
Diseño = orden + belleza
●
Crear diseños proporcionados
●
Utilizar colores que combinen de forma
adecuada
●
Sensación de orden y armonía

31. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
●
1,1,2,3,5,8,13,21,34,55,89....
●
La sucesión inicia con 1 y 1, y a partir de ahí
cada elemento es la suma de
los dos anteriores.

32. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

33. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

34. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

35. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

36. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

37. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

38. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

39. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

40. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

41. Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci

42. Isidro Pérez
Diseño Web
Usabilidad =
Coherencia + Orden

43. Isidro Pérez
Diseño Web
Usabilidad = Retícula
●
La retícula nos ayuda a establecer una
coherencia lógica a nuestra navegación
●
Los elementos importantes siempre estarán
ordenados de la misma forma
●
Cumpliremos una jerarquía de la información

44. Isidro Pérez
Diseño Web
Ejemplos de Retícula

45. Isidro Pérez
Diseño Web
Ejemplos de Retícula

46. Isidro Pérez
Diseño Web
Ejemplos de Retícula

47. Isidro Pérez
Diseño Web
Ejemplos de Retícula

48. Isidro Pérez
Diseño Web
Ejemplos de Retícula

49. Isidro Pérez
Diseño Web
Ejemplos de Retícula

50. Isidro Pérez
Diseño Web
Ejemplos de Retícula

51. Isidro Pérez
Diseño Web
Ejemplos de Retícula

52. Isidro Pérez
Diseño Web
Ejemplos de Retícula

53. Limitaciones de los CMS

54. Isidro Pérez
Diseño web para CMS
Tipo de
licencia
GPL
Plataforma Multiplataforma
Escrito en: PHP, MYSQL
Versión 3,2,1
Wordpress

55. Isidro Pérez
Diseño web para CMS

56. Isidro Pérez
Diseño web para CMS

57. Isidro Pérez
Tipo de
licencia
GPL
Plataforma Windows,
GNU/Linux, Mac
OS X
Escrito en: PHP
Versión 1.6
Joomla
Diseño web para CMS

58. Isidro Pérez
Diseño web para CMS

59. Isidro Pérez
Tipo de
licencia
GPL
Plataforma Multiplataforma
Escrito en: PHP
Versión 7,8
Drupal
Diseño web para CMS

60. Isidro Pérez
Diseño web para CMS

61. Isidro Pérez
Tipo de
licencia
OSL Ver. 3
Plataforma Multiplataforma
Escrito en: PHP
Versión 1.4.1.1
Magento Commerce
Diseño web para CMS

62. Isidro Pérez
Diseño web para CMS

63. Isidro Pérez
Tipo de
licencia
OSL Ver. 3
Plataforma Multiplataforma
Escrito en: PHP
Versión 1.4.5.1
Prestashop
Diseño web para CMS

64. Isidro Pérez
Diseño web para CMS

65. Isidro Pérez
Tipo de
licencia
GPL
Plataforma Multiplataforma
Escrito en: PHP
Versión 2,1
Moodle
Diseño web para CMS

66. Isidro Pérez
Tipo de
licencia
GPL
Plataforma Multiplataforma
Escrito en: PHP
Versión 7,0
Boonex Dolphin
Diseño web para CMS

67. Nos adaptamos a los nuevos
formatos

68. Formatos para Diseño Web

69. Formatos para Diseño Web

70. Formatos para Diseño Web

71. Isidro Pérez
¿Como se organiza un
diseñador web?

72. Isidro Pérez
¿Como se organiza y produce un
Diseñador Web
-Organización/Gestión de proyectos
-Prototipado/Usabilidad del proyecto
-Diseño Web
-Maquetación y desarrollo
-Otras áreas
Organización Diseñador Web

73. Isidro Pérez
Organización y gestión de proyectos
Organización Diseñador Web

74. Isidro Pérez
Openproj
Organización Diseñador Web

75. Isidro Pérez
Abanq
Organización Diseñador Web

76. Isidro Pérez
Libre Office
Writer
Calc
Impress
Organización Diseñador Web

77. Isidro Pérez
Thunderbird
-Correo
-Calendario
Compartido
-Contactos
Sincronización
con Android
Organización Diseñador Web

78. Isidro Pérez
Prototipado y usabilidad del proyecto
Organización Diseñador Web

79. Isidro Pérez
Pencil
-Pluggin
Firefox
Organización Diseñador Web

80. Isidro Pérez
Balasamic
Mockups
Organización Diseñador Web

81. Isidro Pérez
Inkscape
Organización Diseñador Web

82. Isidro Pérez
Fireworks
Organización Diseñador Web

83. Isidro Pérez
Diseño web

84. Isidro Pérez
Desarrollo Web con Open Source
Gimp

85. Isidro Pérez
Maquetación y desarrollo
Organización Diseñador Web

86. Isidro Pérez
Desarrollo Web con Open Source
Aptana

87. Isidro Pérez
Desarrollo Web con Open Source
Dreamweaver

88. Isidro Pérez
Desarrollo Web con Open Source
Web
Developer
Toolbar
(Firefox,
Chrome)

89. Isidro Pérez
Desarrollo Web con Open Source
Otras áreas

90. Isidro Pérez
Desarrollo Web con Open Source
Cinelerra

91. Isidro Pérez
Desarrollo Web con Open Source
Avidemux

92. Isidro Pérez
Desarrollo Web con Open Source
Audacity

93. Isidro Pérez
Desarrollo Web con Open Source
Blender

94. Isidro Pérez
Desarrollo Web con Open Source
¿Como seleccionar nuevas
herramientas?

95. Isidro Pérez
Desarrollo Web con Open Source
¿Como seleccionar nuevas
herramientas?
-Que nos resulte útil para nuestro trabajo
-Que haya documentación y tutoriales disponibles
-Una comunidad activa que actualice la herramienta

96. Isidro Pérez
Algunos casos prácticos

97. Isidro Pérez
5 “tips” para empezar

98. Isidro Pérez
Navega + investiga
www.coolwebsites.dk
www.creatiu.com
www.lacriaturacreativa.com

99. Isidro Pérez
Analiza analiza
y analiza

100. Isidro Pérez
Oportunidad vs Perfección
“Si está todo controlado signifca
que no vas lo suficientemente
rápido”

101. Isidro Pérez
Enfócate en el cliente
de tu cliente
“Traslada tu personalidad a los diseños
pero no te desvíes el foco
del cliente”

102. MUCHAS GRACIAS!!!!
Isidro Pérez
Avanza Soluciones
twitter: @isidroperez
blog: www.isidroperez.com
Empresa: www.avanzaentinternet.com
Emprendedores: www.linktostart.com