UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
-
Upload
aia-pittsburgh -
Category
Design
-
view
70 -
download
1
Transcript of UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
![Page 1: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/1.jpg)
Dzgn.IOA217
UI/UX Design & ArchitectureUIUX_BP17
Eddy Man Kim & Rehan ButtApril 5, 2017
![Page 2: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/2.jpg)
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 ofhandling, 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.
![Page 3: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/3.jpg)
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
![Page 4: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/4.jpg)
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
![Page 5: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/5.jpg)
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.
CourseDescription
![Page 6: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/6.jpg)
LearningObjectives
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:
![Page 7: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/7.jpg)
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
![Page 8: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/8.jpg)
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
![Page 9: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/9.jpg)
Why UI/UX?
![Page 10: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/10.jpg)
![Page 11: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/11.jpg)
![Page 12: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/12.jpg)
![Page 13: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/13.jpg)
![Page 14: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/14.jpg)
![Page 15: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/15.jpg)
![Page 16: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/16.jpg)
![Page 17: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/17.jpg)
![Page 18: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/18.jpg)
![Page 19: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/19.jpg)
![Page 20: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/20.jpg)
![Page 21: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/21.jpg)
![Page 22: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/22.jpg)
![Page 23: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/23.jpg)
![Page 24: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/24.jpg)
![Page 25: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/25.jpg)
![Page 26: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/26.jpg)
![Page 27: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/27.jpg)
![Page 28: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/28.jpg)
![Page 29: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/29.jpg)
![Page 30: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/30.jpg)
![Page 31: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/31.jpg)
![Page 32: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/32.jpg)
![Page 33: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/33.jpg)
![Page 34: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/34.jpg)
![Page 35: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/35.jpg)
![Page 36: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/36.jpg)
Sandbox3D:Real-time Design Collaboration
![Page 37: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/37.jpg)
![Page 38: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/38.jpg)
![Page 39: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/39.jpg)
![Page 40: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/40.jpg)
![Page 41: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/41.jpg)
![Page 42: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/42.jpg)
![Page 43: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/43.jpg)
![Page 44: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/44.jpg)
![Page 45: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/45.jpg)
![Page 46: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/46.jpg)
Concepts to consider between UX Design & Architecture
![Page 47: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/47.jpg)
Structural Elements
http://homequity.us/planhouse/villa_savoye_house_plans.html
![Page 48: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/48.jpg)
![Page 49: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/49.jpg)
Analytics
https://monetizepros.com/encyclopedia/heat-map/http://www.retailerin.com/images/features/heatmap.png
![Page 50: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/50.jpg)
![Page 51: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/51.jpg)
![Page 52: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/52.jpg)
Material Library /Style Guides
https://designmodo.com/create-style-guides/https://www.uh.edu/news-events/stories/2011articles/Sept2011/0912MRC.php
![Page 53: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/53.jpg)
Accessibility
https://s.aolcdn.com/hss/storage/midas/bb6756ad9c524c0816e3ff74c4cddd42/203251771/braille-display-u-
michigan.jpg
http://evstudio.com/wp-content/uploads/2010/04/ADA-turning-500x326.png
![Page 54: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/54.jpg)
Project Delivery
https://s-media-cache-ak0.pinimg.com/originals/3b/
06/72/3b06727081f439d551ae769fb5b598a0.jpg
![Page 55: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/55.jpg)
Version Control
http://thedreamwithinpictures.com/wp-content/uploads/2015/07/ac4f6__psdrevisioning.jpg
![Page 57: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/57.jpg)
“Unicorns” are in Demand
![Page 58: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/58.jpg)
Potential applications
![Page 61: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/61.jpg)
Virtual Reality
Amit Nambiar MSCD '16
![Page 62: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/62.jpg)
Virtual Reality
George Wang MSCD '17
![Page 63: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/63.jpg)
Augmented Reality
SketchUp + Hololens
![Page 79: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/79.jpg)
Additional Resources: https://dzgn.io/works/uxarchitecture.html
![Page 81: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects](https://reader031.fdocuments.in/reader031/viewer/2022021500/58eced651a28abcb678b45cf/html5/thumbnails/81.jpg)
This concludes The American Institute of Architects Continuing Education Systems Course