This is my MFA Thesis project at RIT CGD program. It's a responsive website design project for First Unitarian Church of Rochester, NY. The design concept is to provide users immersive visiting experience on cross platforms by using HTML5 video and responsive design.

1. MFA Thesis / 05.16.2012

2. Computer Graphic Design / Chen Zhang

3. Responsive Website Design for
First Unitarian Church

4. Marla Schweppe / Chris Jackson / Jeffery Sonstein

5. Thesis Proposal

6. 1
Responsive Design for Cross-platform Experience /
Desktop, Tablet & Mobile

8. 2
Provide users real digital visiting experience /
immersive & vibrant

9. 3
Keep the art direction same as Louis Kahn /
disciplined & clean

13. Website Audience

14. Architecture faculty & students / Architects /
Design enthusiasts

15. Design Process

16. 1
Mood Board

18. 2
Inspiration Example Analysis /
7 categories & 31 examples

19. Frank Lloyd Wright’s Fallingwater

20. 2.5
Photos and Panoramas /
Canon 5D Mark II & iPhone App

22. http://occipital.com/account/panoramas

23. 3
Functional Specification

24. Responsive Design / 360 Panoramas /
Video and Photo Gallery / Text Info /
Interactive Map / Interactive Timeline

25. Responsive Design / 360 Panoramas /
Video and Photo Gallery / Text Info /
Interactive Map / Interactive Timeline

26. 4
Site Map

29. Part I Part II Part III
Gilbert
Entrance Lobby
Hall
Office
Lobby
Part 2.1
Williams Minister’s
Sanctuary Gallery Corridor
Podium UpStairs
Choir Loft
Lounge UpStairs
Back to
Part I
Kitchen Entrance
Reception
Office
Lobby Part II
First Path Plan

30. Part 1 Part 3 Part 4
Gilbert
Entrance Reception
Part 3 Hall
Office
Part 3.1
Sanctuary Williams Minister’s
Gallery Corridor
Podium
UpStairs
UpStairs Part 4
Part 2 Choir Loft
Kitchen Back to
Part I
Entrance
SBA
Lounge
UpStairs Part 4
Second Path Plan

31. Part 1 Part 2 Part 4
Entrance Kitchen
Choir Loft
SBA
Sanctuary Lounge Back to
Part I
Podium
Reception Williams Minister’s
Office Gallery Corridor
Kitchen UpStairs
UpStairs
Part 2 Part 3
Part 3
Williams
Gallery
Final Path Plan on April 26th

33. 5
Wireframe / Prototype

38. http://chenzhangdesign.com/thesis/test5.html

39. http://share.axure.com/3OMAJ3/

40. 5.5
Video Shooting /
Spider Dolly & Tripod

47. 6
Visual Design

48. 6
Visual Design

49. 6
Visual Design

50. 6
Visual Design

51. 6
Visual Design

52. 6
Visual Design

53. 6
Visual Design

54. 6
Visual Design

58. 7
Coding

59. 8
Testing / Optimization

60. Navigation /
Panoramas Back Button / Sound Off Button /
Copy / Mobile Layout / Video Quality

64. Project

65. http://chenzhangdesign.com/kahn/

66. https://vimeo.com/42186905

67. What I Have Learned

68. 1
Users Matter / Usability Testing

69. 2
Like Design / Dislike Coding

70. 3
Photography / Video

71. Special Thanks

72. 1
Committee Members / RIT Professors

73. 2
Yinan Cheng / Photography Specialist

74. 3
Boyang Ma / Xuan Zhang /
Fei Gao / Jiaying Li
Daniel Stroke / Yuqi Xiao /
Chien-Ju Peng

75. Q/A