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

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

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

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

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

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

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

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

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

Why UI/UX?

Page 10: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 11: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 12: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 13: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 14: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 15: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 16: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 17: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 18: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 19: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 20: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 21: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 22: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 23: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 24: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 25: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 26: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 27: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 28: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 29: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 30: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 31: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 32: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 33: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 34: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 35: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 36: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects

Sandbox3D:Real-time Design Collaboration

Page 37: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 38: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 39: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 40: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 41: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 42: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 43: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 44: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 45: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 46: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects

Concepts to consider between UX Design & Architecture

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

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
Page 49: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects

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
Page 51: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects
Page 52: UI/UX Design and Architecture: Leveraging Web Technologies for and by Architects

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

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

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

Version Control

http://thedreamwithinpictures.com/wp-content/uploads/2015/07/ac4f6__psdrevisioning.jpg

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

Designing Architecture Like We Design Software

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

Potential applications

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

WebGL – Web Graphics Library 

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

WebVR– Web Virtual Reality

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

Virtual Reality

Amit Nambiar MSCD '16

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

Virtual Reality

George Wang MSCD '17

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

Augmented Reality

SketchUp + Hololens

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

THREE.js

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

Unity

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

D3.js

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

Highcharts

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

Taxi Visualization

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

PlayCanvas

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

Modelo

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

Flux

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

Onshape

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

Rehan Butt

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

This concludes The American Institute of Architects Continuing Education Systems Course

[email protected]


Top Related