El documento presenta una introducción al diseño web a través de una charla. Explica los orígenes del diseño web con HTML y las primeras páginas web. Luego describe la evolución con la llegada de GIFs, Flash e introducción de CSS y JavaScript. Finalmente, analiza perfiles de diseñadores web, herramientas para diseño y desarrollo, y algunos consejos para empezar en el diseño web.

1. Diseño Web
FORO DE PERIODISTAS / FACULTAD DE PERIODISMO
UNIVERSIDAD MIGUEL HERNÁNDEZ
#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
Orígenes del Diseño Web
El maravilloso html...

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

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

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

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

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

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

12. Orígenes del diseño web

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

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

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

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

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

18. 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.
1
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. Perfiles del diseñador web
Oferta de empleo:
675€1

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

21. 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
Isidro Pérez

22. Diseño Web
Isidro Pérez

23. Diseño Web
Isidro Pérez

24. Diseño Web
Isidro Pérez

25. 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
Isidro Pérez

26. Diseño Web
Isidro Pérez

27. Diseño Web
Isidro Pérez

28. Diseño Web
Isidro Pérez

29. Diseño Web
Isidro Pérez

30. 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
Isidro Pérez

31. 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.
Isidro Pérez

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

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

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

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

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

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

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

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

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

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

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

43. 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
Isidro Pérez

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

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

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

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

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

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

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

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

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

53. Limitaciones de los CMS

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

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

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

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

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

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

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

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

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

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

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

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

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

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. ¿Como se organiza un
diseñador web?
Isidro Pérez

72. Organización Diseñador Web
¿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
Isidro Pérez

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

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

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

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

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

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

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

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

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

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

83. Diseño web
Isidro Pérez

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

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

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

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

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

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

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

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

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

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

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

95. 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
Isidro Pérez

96. Algunos casos prácticos
Isidro Pérez

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

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

99. Analiza analiza
y analiza
Isidro Pérez

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

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

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