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.
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
De las Tintas a los Pixels - El Diseño Gráfico Aplicado a la Web
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
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