-
Notifications
You must be signed in to change notification settings - Fork 0
/
OWL.html
91 lines (71 loc) · 4.99 KB
/
OWL.html
1
2
3
4
5
6
7
8
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
<head>
<!-- <link rel="stylesheet" href="assets/rm-docs.css"> -->
<link rel="stylesheet" href="assets/styles.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
</head>
<body>
<div id="navbar">
<div id="navbar-contents">
<a href="/" class="brand"></a>
<div id="header-title">
Charlie Mouton <br>
Interaction Designer
</div>
<div id="header-email">
<script language="JavaScript">
var username = "Charlie";
var hostname = "Moutons.org";
document.write("<a href='" + "mail" + "to:" + username + "@" + hostname + "'>" + '<img src="assets/img/email.png" height=50px;>' + "</a>");
</script>
</div>
</div>
</div>
<div id="content-body">
<a href="/firstdesignprocess">
<div class="nav-left">
<img src="assets/img/table.png" height=50px; width=50px;>
<br> <br>
My First Design Process
</div>
</a>
<a href="/digitaldesign">
<div class="nav-right">
<img src="assets/img/mouse.png" height=50px; width=50px;>
<br> <br>
Diving into Digital
</div>
</a>
<div style="padding-top: 200px;">
<div> <img src="assets/img/OWL.png"> </div>
<br>
<h1> Creating Spaces <h1>
</div>
<div id="text-body">
   After launching a focus on campus of improving spaces, I was invited along with six other students to be a part of the high-energy library development project called the Summer Design/Build. We produced several experiments every two weeks, relying on rapid, iterative prototyping to help us value various ideas. Over the course of the summer, I became much more comfortable jumping to building and letting my hands help me think through challenges. Working in a much larger team allowed for lots of peer review and I began to better appreciate how we could catalyze and energize the team during the tougher stretches of the summer.
</div>
<div id="img-body">
<iframe src="https://player.vimeo.com/video/139410557" width="700" height="394" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/139410557">Olin Workshop on the Library, Summer Design/Build 2015</a> from <a href="https://vimeo.com/user32365617">Olin College Library</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<img class="lrgImg" src="assets/img/OWL/library.jpg" alt="A prototype of the moss-lettered 'Library' sign posted outside of the library."> </img>
<img class="lrgImg" src="assets/img/OWL/sketching3.jpg" alt="Me sketching some ideas on black paper using a white pen, a staple of the summer experience."> </img>
<img class="smlImgLeft" src="assets/img/OWL/sketching2.jpg" alt="Another look at the sketches we used to discuss possible directions for the project."> </img>
<img class="smlImgRight" src="assets/img/OWL/sketching1.jpg" alt="Another sketch image. These sketches allowed us to document dozens of ideas, while discussing which ones to pursue."> </img>
<img class="lrgImg" src="assets/img/OWL/hoover_Me_Computer.jpg" alt="I sit at a computer showing my professor a draft of the Style Guide I developed with the team."> </img>
<img class="lrgImg" src="assets/img/OWL/screen_Mounted.jpg" alt="A television is mounted inside a bookcase to create an opportunity to display video or images in context."> </img>
<img class="lrgImg" src="assets/img/OWL/microLibrary.jpg" alt="The micro-library cart we designed and built can be rolled anywhere to allow for books and periodicals to be displayed around campus."> </img>
<img class="smlImgRight" src="assets/img/OWL/documentation.jpg" alt="A colleague holds our Ronin Gimbal system, which we used to document our process during the summer."> </img>
<img class="smlImgRight" src="assets/img/OWL/back_of_VisRad.jpg" alt="A chromebox is mounted to the back of the television to allow a website to be displayed in the bookcase."> </img>
<img class="lrgImg" src="assets/img/OWL/visual_Radio_Prototype.jpg" alt="A black cover is placed around the television to improve the aesthetic of the installation."> </img>
<img class="lrgImg" src="assets/img/OWL/lunch_Powwow.jpg" alt="The team gathers around the bookshelf television during lunch to watch a speech by President Obama."> </img>
<img class="smlImgLeft" src="assets/img/OWL/gaby_Sanding.jpg" alt="A colleague routs the edges of a tabletop which will become an alternative seating space for students in the library."> </img>
<img class="lrgImg" src="assets/img/OWL/final_Product.jpg" alt="A student lounges on a couch while reading a book with Visual Radio, the bookshelf television, playing a peaceful video of a long train ride in the background."> </img>
<a href="#">
<div class="button_link">
Return to Top
</div>
</a>
</div>
</div>
</body>
</html>