Diseño: no es sólo cuestión de estética

Presentación de la charla dada por @misterymotion en el Campus Party Colombia 2012 #cpc05

Transcript

1. No es sólo una cuestión de estética DISEÑO WEB Si! es Comic Sans http://www.fonts.com/content/learning/fyti/typefaces/story-of-comic-sans
2. @misterymotion #cpc05est
4. “ Las decisiones estéticas están justificadas por un entendimiento del propósito del producto.” Dieter Rams
5. estética percepción
7. 50M clasificados 30B Paginas vistas
8. lo que pensamos que era increíble y lo que el cliente quería ver. DISEÑO WEB
9. http://bit.ly/MgC2Yx El éxito del sitio web gira en torno a una sola cosa: cómo los usuarios perciben.
10. No es solo visual Se enfoca en metas y objetivos Demuestra bene cios Fluye y se adapta Evoluciona Diseño Web Necesidades de los usuarios, objetivos del sitio
11. http://www.jjg.net/elements/translations/elements_es.pdf Los elementos de la experiencia del usuario Jesse James Garrett
12. Roles & Procesos Photo: http://www.flickr.com/photos/14617207@N00/3432232452/
13. Arquitectura de Información Diseñado de Interacción Diseñado Visual / Interface Codificacion / Maquetación Programación Front End
14. Diseño Web (CD, AR, UI, UX, UXD, AI, ID, SEO, SEM, SM, B2B, B2C )
16. Wireframes Moodboards Diseño de Interface { {
18. Craigslist
21. Diseño Visual
22. Sistema de Grillas
23. Sistema de Grillas https://pulsosocial.com
24. Sistema de Grillas
25. Sistema de Grillas
26. Balance http://gnosh.co.uk/
27. http://www.hotelavenida-povoa.com/ Balance
28. Balance http://www.hotelavenida-povoa.com/
29. Proporción http://voxer.com/
30. Proporción http://jeanmarcdenis.me/work
31. Proporción http://get.wunderkit.com/
32. Proporción http://get.wunderkit.com/
33. Volumen y profundidad http://www.bbc.co.uk/
34. Volumen y profundidad http://www.guardian.co.uk/
35. Volumen y profundidad https://www.aupeo.com/
36. Volumen y profundidad http://www.nikevision.com/
37. Color http://www.84colors.com/
38. Color http://www.plugobrowser.com/
39. Color http://www.sullivannyc.com/
40. Color http://foodsense.is/
41. http://www.f-i.com/ http://www.f-i.com/ Color
42. Tipogra a http://techcrunch.com/
43. http://www.reuters.com/politics Tipogra a
44. http://www.oatbook.co.uk/ Tipogra a
45. reddit.com Tipogra a
46. http://lifeingreenville.com/life/cultured Tipogra a
47. http://informationarchitects.net/ Tipogra a
48. Tendencias Fuentes grandes Cintas Navegación ja Slideshows Sitios web de 1 página Efecto scroll inverso (paralax) Imagenes y footers de gran tamaño Responsive design Animaciónes HTML Circulos
49. Cintas Contenido Transparente Tamaños de Fuente Grandes Circulos Navegacíon fija
50. Inspiración Fusil vs
51. http://www.jorgerigabert.com/ Original
52. http://gizmodo.com/343641/1960s-braun-products-hold-the-secrets-to-apples-future
53. Roy Lichtenstein - “Whaam!", 1963, Acrylic All-American Men at War #89, Irv Novick
54. Roy Lichtenstein - House I, 1998
55. http://bit.ly/Om9rXt Recomendados
56. Gracias!