El documento describe los pasos clave en el proceso de diseño de un sitio web, incluyendo la creación de un mapa del sitio, el diseño y diagramación, el maquetado y pruebas de compatibilidad, y la publicación en línea del proyecto. También analiza tendencias populares en el diseño web para 2013 como diseños de una sola página, elementos circulares, y diseños adaptables a diferentes pantallas.

1. De las Tintas a los Pixels
El diseño gráfico aplicado a la web
Nicolás Salinas
Mobile & Interactive Web Designer

2. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
¿Por dónde
empezamos?

3. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Todo diseñador gráfico debe tener
presente 3 puntos fundamentales antes
de comenzar a diseñar un proyecto web

4. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Trabajar para la web no es lo mismo
que trabajar para una imprenta.
#1

5. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Los diseñadores gráficos no
necesariamente deben aprender
y entender de programación.
#2

6. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
HTML no es código, es un lenguaje
basado en etiquetas (tags).
#3

7. ¿Cuales son los pasos a
seguir en el proceso de
diseño de un proyecto web?

8. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
1 32 4
Sitemap
(Mapa del Sitio)

9. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
En este primer paso es donde el
diseñador podrá saber que tan
complejo o simple será el proyecto,
es aquí donde deberá organizar y
jerarquizar toda la información que
se publicará en la web a diseñar.
Este proceso se lo conoce como
“Arquitectura de la Información”

10. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Sitemap: Fogasa - Fondo Global de Alimentos S.A.
www.fogasa.com.py
Home
(página de inicio)
Productos Mercados Nosotros Contactos

11. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Sitemap: Fortaleza S.A. de Inmuebles
www.fortalezainmuebles.com
Home
Sist. Fortaleza
Sobre Nosotros Nuestras Obras
Fortaleza I Novedad 1Futuro
Fortaleza II Novedad 2Mi Hogar
Fortaleza III Novedad 3Inversión
Fortaleza IV Novedad 4
Planes Fortaleza Novedades Preg. Frecuentes Contáctenos
Tour Virtual Testimonios Speak English?

12. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
1 32 4
Sitemap
(Mapa del Sitio)
Diseño y
Diagramación

13. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer

14. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer

15. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer

16. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
1 32 4
Sitemap
(Mapa del Sitio)
Diseño y
Diagramación
Maquetado, testeo
y Compatibilidad

17. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer

18. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Adobe Dreamweaver
TextMate (Mac OS X)

19. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Compatibilidad entre Navegadores
(Cross-Browser)
Plataformas Móviles
(Mobile Browsers)

20. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Internet
Explorer 6
Internet
Explorer 7
Internet
Explorer 8
¡Están muertos!
#LaCrudaVerdad

21. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
1 32 4
Sitemap
(Mapa del Sitio)
Diseño y
Diagramación
Maquetado, testeo
y Compatibilidad
Funcionamiento
online del proyecto

22. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Mozilla Firefox

23. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Google Chrome

24. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Opera

25. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Safari

26. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Internet Explorer 10

27. Tendencias para este
2013 en el campo
del Diseño Web

28. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#1 Navegación Fija www.metropoliscreative.com

29. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#2 Photo Backgrounds kinhr.com

30. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#3 Single-page websites www.boldking.com

31. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#4 Elementos Circulares www.solutionstream.com

32. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#5 Incluir Tipografías thegregthompson.com

33. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#6 Uso de Slides www.mediafire.com

34. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#7 Scroll Infinito pinterest.com

35. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#8 ilustraciones peterwesolowski.co.uk

36. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#9 Social Media Widgets www.seballero.com

37. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#10 Parallax Scrolling www.iutopi.com

38. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#11 Responsive Design www.millerhonduras.com

39. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
#12 Flat Design www.microsoft.com

40. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Conclusión
Actualmente un diseñador gráfico ya no debe limitarse
sólo a trabajar para piezas de impresión, hoy las nuevas
tecnologías están avanzando a grandes pasos en el
mundo, y cada vez es mayor la necesidad de diseñar piezas
gráficas orientadas a soportes digitales.

41. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer

42. De las Tintas a los Pixels - El diseño gráfico aplicado a la web Nicolás Salinas - Mobile & Interactive Web Designer
Muchas Gracias!
Nicolás Salinas
Mobile & Interactive Web Designer
@nick_supremacy nicky.salinas@gmail.com