-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (155 loc) · 9.54 KB
/
index.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Stewart Murrie's Portfolio</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/portfolio.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsemenu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
Stewart Murrie
</a>
</div>
<div class="collapse navbar-collapse" id="collapsemenu">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#pro-projects">Professional</a></li>
<li><a href="#side-projects">Side</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="content container">
<div class="row frontmatter">
<div class="col-xs-12">
<h1 class="text-primary" id="about">Stewart Murrie</h1>
<h2 class="text-muted">Designing products for people</h2>
<p>Hello, I'm Stewart and I like making things more useable and useful.</p>
</div>
</div>
<div class="row projects" id="projects">
<div class="col-xs-12">
<h1 class="text-primary" id="pro-projects">Professional Projects</h1>
<p>Here are some of the professional projects I've worked on recently.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<h3 class="project-title">Dolby DP590</h3>
<img class="img-responsive" src="images/800x500/dp590.png" alt="#">
<p class="project-desc">Live Dolby Atmos content creation for TV</p>
<p class="project-role">UX design; UI design</p>
<p class="project-brief">(In progress). Designing the UI for the DP590 Live Dolby Atmos Creator, which will allow broadcasters to create immersive and personalizable next-generation TV content.</p>
<p class="project-tools">Skills and tools used: sketching, storyboarding, scenarios, interaction design, visual design, usability testing, Balsamiq, Sketch, ethnographic research, contextual inquiry.</p>
</div>
<div class="col-sm-6 col-md-3">
<h3 class="project-title">Dolby DP600</h3>
<img class="img-responsive" src="images/800x500/dp600.jpg" alt="#">
<p class="project-desc">Emmy award-winning broadcast automation</p>
<p class="project-role">UX design; UI design; UI implementation</p>
<p class="project-brief">Designed and implemented the on-board touchscreen UI and companion remote client application for the multi-award winning DP600 Program Optimizer.</p>
<p class="project-tools">Skills used: sketching, interaction design, prototyping, visual design, usability testing, Java Swing, touchscreen design.</p>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-3">
<h3 class="project-title">Project P.</h3>
<img class="img-responsive" src="images/800x500/projectp.jpg" alt="#">
<p class="project-desc">Next generation TV demo platform</p>
<p class="project-role">UX design; UI design</p>
<p class="project-brief">Designed two interfaces—a tablet, and a TV on-screen display—to demonstrate Dolby's latest technologies for next-generation TV standards bodies.</p>
<p class="project-tools">Skills and tools used: interviewing, sketching, storyboarding, prototyping, scenarios, interaction design, visual design, usability testing, Balsamiq, Sketch, Android development, OSD, etc.</p>
<p></p>
</div>
<div class="col-sm-6 col-md-3">
<h3 class="project-title">Dialogue Enhancer</h3>
<img class="img-responsive" src="images/800x500/dedemo.png" alt="#">
<p class="project-desc">A technology demo made simple</p>
<p class="project-role">UX design; UI design</p>
<p class="project-brief">Designed two interfaces—a tablet, and a TV on-screen display—to demonstrate Dolby's latest technologies for next-generation TV standards bodies.</p>
<p class="project-tools">Skills and tools used: sketching, simplifying, Android, Sketch, prototyping.</p>
<p></p>
</div>
</div>
<div class="side-projects">
<h1 class="text-primary" id="side-projects">Side Projects</h1>
<p>Here are some of the side projects I've worked on for fun or the opportunity to learn something new.</p>
<div class="row">
<div class="col-sm-6 col-md-3">
<h3 class="project-title">Toastmasters</h3>
<img class="img-responsive" src="images/800x500/progcover.jpg" alt="#">
<p class="project-desc">District 4 Toastmasters Spring Conference 2016, serving San Francisco to Monterey.</p>
<p class="project-role">Graphic design; print publication</p>
<p class="project-brief">Designed the physical assets for the Conference, including the principle logo, a 44-page glossy conference programme, a dozen posters, and a lapel pin. Included graphic design, layout and typesetting.</p>
<p class="project-tools">Skills and tools learned: composition and layout, colour theory, typography, InDesign, Illustrator, Photoshop 3D, print production.</p>
</div>
<div class="col-sm-6 col-md-3">
<h3 class="project-title">Pan Halen</h3>
<img class="img-responsive" src="images/800x500/ph_szm.jpg" alt="#">
<p class="project-desc">Hackathon-winning live musician technology</p>
<p class="project-role">Hardware design; programming; interaction design</p>
<p class="project-brief">Designed and developed a system allowing musicians to pan live music in 3D space. Also sang lead vocals. A lot.</p>
<p class="project-tools">Skills and tools learned: Python, Pi, Arduino, MIDI</p>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-3">
<h3 class="project-title">12-bit Arcade</h3>
<img class="img-responsive" src="images/800x500/12bit.JPG" alt="#">
<p class="project-desc">A multiple award-winning next-generation arcade game featuring the latest Dolby technologies.</p>
<p class="project-role">Control surface design; pitchman</p>
<p class="project-brief">Designed the control surface and interaction for a next-generation arcade game. Also designed the graphics and animated signage.</p>
<p class="project-tools">Skills and tools learned: Arduino, hardware hacking, graphic design, interaction design, idea pitching, human factors, prototyping, electonic signage</p>
</div>
<div class="col-sm-6 col-md-3">
<h3 class="project-title">Free Code Camp</h3>
<img class="img-responsive" src="images/800x500/rd.jpg" alt="#">
<p class="project-desc">Working through the open-source web development course.</p>
<p class="project-role">Student, citizen</p>
<p class="project-brief">Free Code Camp is a MOOC focusing on full-stack web development. I am working through this course to learn essential web technologies and apply them to real-world problems.</p>
<p class="project-tools">Skills and tools learned: HTML5, CSS3, ES3/5/6, TypeScript, Bootstrap, Angular, etc.</p>
</div>
</div>
</div>
<div class="div" id="contact">
<h1 class="text-primary">Contact</h1>
<address class="">
<a href="mailto:stew@murrie.org?subject=I saw your portfolio and..." target="_blank">stew@murrie.org</a>
<br>
</address>
<a class="btn btn-default" href="https://twitter.com/stewartmurrie" role="button" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="btn btn-default" href="https://www.linkedin.com/in/murrie" role="button" target="_blank"><i class="fa fa-linkedin"></i></a>
<!-- TODO figure out the FCC icon -->
<a class="btn btn-default" href="https://www.freecodecamp.com/stewartmurrie" role="button" target="_blank"> Free Code Camp</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="js/portfolio.js"></script>
</div>
</div>
</body>
</html>