Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects

811 views

Published on

It is high time architects are critical of the standard suite of digital design and communication tools that are being used in practice. These tools are typically outdated, immobile, heavy-handed, over-wrought with features, and difficult to learn. Meanwhile, web technologies are developing at a phenomenal pace and are proving to be efficiently scalable and reliable at all scales of application. This course will provide a comprehensive overview of web technologies and discuss the merits of their application in architectural design practice. More specifically, the course will identify opportunities to create early design or pre-design tools to forge new design communication interfaces. On a conceptual level, the course will discuss the parallels between traditional understanding of architectural design practice and the emerging principles of UI/UX design for digital experiences on the web.

Published in: Design
  • Be the first to comment

  • Be the first to like this

UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects

  1. 1. Dzgn.IO A217 UI/UX Design & Architecture UIUX_BP17 Eddy Man Kim & Rehan Butt April 5, 2017
  2. 2. Credit(s) earned on completion of this course will be reported to AIA CES for AIA members. Certificates of Completion for both AIA members and non-AIA members are available upon request. This course is registered with AIA CES for continuing professional education. As such, it does not include content that may be deemed or construed to be an approval or endorsement by the AIA of any material of construction or any method or manner of handling, using, distributing, or dealing in any material or product. _______________________________________ ____ Questions related to specific materials, methods, and services will be addressed at the conclusion of this presentation.
  3. 3. This presentation is protected by US and International Copyright laws. Reproduction, distribution, display and use of the presentation without written permission of the speaker is prohibited. © Dzgn.IO 2017 Copyright Materials
  4. 4. Hello Dzgn.IO Co-founders Eddy Man Kim Assistant Teaching Professor Co-Director, Computational Design (Code) Lab Chair, Master of Tangible Interaction Design (MTID) Program Carnegie Mellon University School of Architecture Rehan Butt Master of Tangible Interaction Design (MTID) Student Carnegie Mellon University School of Architecture
  5. 5. It is high time architects are critical of the standard suite of digital design and communication tools that are being used in practice. These tools are typically outdated, immobile, heavy-handed, over-wrought with features, and difficult to learn. Meanwhile, web technologies are developing at a phenomenal pace and are proving to be efficiently scalable and reliable at all scales of application. This course will provide a comprehensive overview of web technologies and discuss the merits of their application in architectural design practice. More specifically, the course will identify opportunities to create early design or pre-design tools to forge new design communication interfaces. On a conceptual level, the course will discuss the parallels between traditional understanding of architectural design practice and the emerging principles of UI/UX design for digital experiences on the web. Course Description
  6. 6. Learning Objectives 1. Learn the basics and the broader landscape of web design and development, and how they affect the design profession at large. 2. Learn how traditional architectural concepts and workflows can be applied to designing digital experiences, and vice versa. 3. Gain an “under-the-hood” understanding of dynamic digital experiences to projectively imagine the role of architects in the future. 4. Learn how to continue exploring the realm of UI/UX design beyond this course; what resources are out there and how to find them. At the end of the this course, participants will be able to:
  7. 7. UI/UX? Design - Interaction Design - Information Architecture - Visual Design - Information Design - Technical Communication - Service Design Research - User Research - Accessibility - Human Factors / Ergonomics Strategy - UX Strategy (Business Goals) - Content Strategy - Customer Experience User Interface / User Experience
  8. 8. UI/UX? Design - Interaction Design - Information Architecture - Visual Design - Information Design - Technical Communication - Service Design Research - User Research - Accessibility - Human Factors / Ergonomics Strategy - UX Strategy (Business Goals) - Content Strategy - Customer Experience User Interface / User Experience
  9. 9. Why UI/UX?
  10. 10. Sandbox3D: Real-time Design Collaboration
  11. 11. Concepts to consider between UX Design & Architecture
  12. 12. Structural Elements http://homequity.us/planhouse/villa_savoye_house_plans.html
  13. 13. Analytics https://monetizepros.com/encyclopedia/heat-map/http://www.retailerin.com/images/features/heatmap.png
  14. 14. Material Library / Style Guides https://designmodo.com/create-style-guides/https://www.uh.edu/news-events/stories/2011articles/Sept2011/0912MRC.php
  15. 15. Accessibility https://s.aolcdn.com/hss/storage/midas/bb6756ad9c524c0816e3ff7 4c4cddd42/203251771/braille-display-u-michigan.jpg http://evstudio.com/wp-content/uploads/2010/04/ADA-turning-500x326.png
  16. 16. Project Delivery https://s-media-cache- ak0.pinimg.com/originals/3b/06/72/3b067 27081f439d551ae769fb5b598a0.jpg
  17. 17. Version Control http://thedreamwithinpictures.com/wp- content/uploads/2015/07/ac4f6__psdrevisioning.jpg
  18. 18. Designing Architecture Like We Design Software
  19. 19. “Unicorns” are in Demand
  20. 20. Potential applications
  21. 21. WebGL – Web Graphics Library
  22. 22. WebVR– Web Virtual Reality
  23. 23. Virtual Reality Amit Nambiar MSCD '16
  24. 24. Virtual Reality George Wang MSCD '17
  25. 25. Augmented Reality SketchUp + Hololens
  26. 26. THREE.js
  27. 27. Unity
  28. 28. CL3VER
  29. 29. New York Times
  30. 30. Cell Cycle
  31. 31. D3.js
  32. 32. Highcharts
  33. 33. Google Charts
  34. 34. Taxi Visualization
  35. 35. Mapbox
  36. 36. PlayCanvas
  37. 37. Modelo
  38. 38. Flux
  39. 39. Clara
  40. 40. Onshape
  41. 41. Additional Resources: https://dzgn.io/works/uxarchitecture.html
  42. 42. Rehan Butt
  43. 43. This concludes The American Institute of Architects Continuing Education Systems Course hello@dzgn.io

×