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

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

Post on 11-Apr-2017

62 views

Category:

Design

1 download

Embed Size (px)

TRANSCRIPT

Slide 1

Dzgn.IOA217UI/UX Design & ArchitectureUIUX_BP17Eddy Man Kim & Rehan ButtApril 5, 2017

1

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.

2

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 2017Copyright Materials

3

Hello

Dzgn.IO Co-founders

Eddy Man KimAssistant Teaching ProfessorCo-Director, Computational Design (Code) LabChair, Master of Tangible Interaction Design (MTID) ProgramCarnegie Mellon University School of Architecture

Rehan ButtMaster of Tangible Interaction Design (MTID) StudentCarnegie Mellon University School of Architecture

We design and create with an approach of playful pragmatism. A group with the goal to deliver design services incorporating holistic values of aesthetics, experience, and communication

Please feel free to ask us questions throughout the presentation4

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

5

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:

6

UI/UX?

DesignInteraction DesignInformation ArchitectureVisual DesignInformation DesignTechnical CommunicationService Design

ResearchUser ResearchAccessibilityHuman Factors / Ergonomics

StrategyUX Strategy (Business Goals)Content StrategyCustomer ExperienceUser Interface / User Experience

7

UI/UX?

DesignInteraction DesignInformation ArchitectureVisual DesignInformation DesignTechnical CommunicationService Design

ResearchUser ResearchAccessibilityHuman Factors / Ergonomics

StrategyUX Strategy (Business Goals)Content StrategyCustomer ExperienceUser Interface / User Experience

8

Why UI/UX?

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

Sandbox3D:Real-time Design Collaboration

36

37

38

39

40

41

42

43

44

45

Concepts to consider between UX Design & Architecture

46

Structural Elements

http://homequity.us/planhouse/villa_savoye_house_plans.html

Arch Col grids + foundation grid

47

The one main difference is that web is responsive (context aware [device] )48

Analytics

https://monetizepros.com/encyclopedia/heat-map/

http://www.retailerin.com/images/features/heatmap.png

49

(clarity)(user testing) Venmo Example: Is pay or request selected??50

51

Material Library /Style Guides

https://designmodo.com/create-style-guides/https://www.uh.edu/news-events/stories/2011articles/Sept2011/0912MRC.php

52

Accessibility

https://s.aolcdn.com/hss/storage/midas/bb6756ad9c524c0816e3ff74c4cddd42/203251771/braille-display-u-michigan.jpghttp://evstudio.com/wp-content/uploads/2010/04/ADA-turning-500x326.png

53

Project Delivery

https://s-media-cache-ak0.pinimg.com/originals/3b/06/72/3b06727081f439d551ae769fb5b598a0.jpg

54

Version Control

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

55

Designing Architecture Like We Design Software

56

Unicorns are in Demand

57

Potential applications

58

WebGL Web Graphics Library

59

WebVR Web Virtual Reality

60

Virtual Reality

Amit Nambiar MSCD '16

61

Virtual Reality

George Wang MSCD '17

62

Augmented Reality

SketchUp + Hololens

63

THREE.js

64

Unity

65

CL3VER

66

New York Times

67

Cell Cycle

68

D3.js

69

Highcharts

70

Google Charts

71

Taxi Visualization

72

Mapbox

73

PlayCanvas

74

Modelo

75

Flux

76

Clara

77

Onshape

78

Additional Resources: https://dzgn.io/works/uxarchitecture.html

79

Rehan Butt

80

This concludes The American Institute of Architects Continuing Education Systems Coursehello@dzgn.io

questions81