Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: broccolini/broccolini.github.com
base: 6ab835e8ff
...
head fork: broccolini/broccolini.github.com
compare: 32e2bd516f
  • 5 commits
  • 27 files changed
  • 0 commit comments
  • 1 contributor
View
73 _layouts/default.html
@@ -27,47 +27,46 @@
</script>
<!-- ClickTale end of Top part -->
-<div class="site">
- <div class="title">
- <a href="/">broccolini</a>
- </div>
+
+<div class="background">
+ <div class="container-title banner">
+ <a href="/"><h1>broccolini</h1></a>
+ </div><!--container-title-->
+
{{ content }}
+<div class="block">
<div class="footer">
- <!-- <div class="portfolio"> -->
- <div class="columnA">
- <!-- <h1>I'm on teh Internets!</h1> -->
- </div>
- <div class="columnB">
- <h1 id="me-on-teh-internets">I'm on teh Internets!</h1>
- <div class="contact">
- <p>
- Diana Mounter is broccolini<br />
- diana.mounter@gmail.com<br />
- <a href="http://twitter.com/broccolini/">twitter.com/broccolini</a><br />
- <a href="http://broccolini.tumblr.com/">broccolini.tumblr.com</a><br />
- <a href="http://github.com/broccolini/">github.com/broccolini</a>
- </p>
- </div>
- <div class="contact">
- <p>
- <a href="http://dribbble.com/broccolini">dribbble.com/broccolini</a><br />
- <a href="http://flickr.com/photos/broccolini/">flickr.com/photos/broccolini</a><br />
- <a href="http://pictajam.com/broccolini">pictajam.com/broccolini</a><br />
- <a href="http://www.quora.com/Diana-Mounter">quora.com/Diana-Mounter</a><br />
- <a href="http://au.linkedin.com/in/dianamounter">au.linkedin.com/in/dianamounter</a>
- </p>
- </div>
- <!-- </div> -->
- </div>
- <!-- <div class="rss">
- <a href="http://feeds.feedburner.com/broccolini">
- <img src="/images/rss.png" alt="Subscribe to RSS Feed" />
- </a>
- </div> -->
- </div>
-</div>
+ <div class="container-title">
+ <h2 class="footer">I'm on teh Interwebs!</h2>
+ </div><!--container-title-->
+ <div class="container">
+ <div class="social">
+ <p>Diana Mounter is broccolini<br />
+ diana.mounter@gmail.com<br />
+ <a href="http://twitter.com/broccolini/">twitter.com/broccolini</a>
+ </p>
+ </div><!-- social -->
+ <div class="social">
+ <p>
+ <a href="http://github.com/broccolini/">github.com/broccolini</a>
+ <a href="http://dribbble.com/broccolini">dribbble.com/broccolini</a><br />
+ <a href="http://speakerdeck.com/u/broccolini">speakerdeck.com/u/broccolini</a>
+
+ </p>
+ </div><!-- social -->
+ <div class="social">
+ <p>
+ <a href="http://broccolini.tumblr.com/">broccolini.tumblr.com</a><br />
+ <a href="http://flickr.com/photos/broccolini/">flickr.com/photos/broccolini</a><br />
+ <a href="http://www.quora.com/Diana-Mounter">quora.com/Diana-Mounter</a>
+ </p>
+ </div><!-- social -->
+ </div><!-- container -->
+ <div><!-- footer -->
+ </div><!-- block -->
+ </div><!-- background -->
<!-- ClickTale Bottom part -->
<div id="ClickTaleDiv" style="display: none;"></div>
View
36 _layouts/portfolio.html
@@ -1,38 +1,6 @@
---
layout: default
---
-<div id="portfolio">
- <p>&#171; <a class="back" href="/index.html">back to home</a></p>
+<div class="container">
{{ content }}
-<p>&#171; <a class="back" href="/index.html">back to home</a></p>
-</div>
-
-<!-- <div id="related">
- <h2>Related Posts</h2>
- <ul class="posts">
- {% for post in site.related_posts limit:3 %}
- <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
- {% endfor %}
- </ul>
-</div> -->
-
-<!-- <div id="disqus-comments">
-<div id="disqus_thread"></div>
-<script type="text/javascript">
- /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
- var disqus_shortname = 'broccolini'; // required: replace example with your forum shortname
-
- // The following are highly recommended additional parameters. Remove the slashes in front to use.
- var disqus_identifier = 'unique_dynamic_id_1234';
- // var disqus_url = 'http://example.com/permalink-to-page.html';
-
- /* * * DON'T EDIT BELOW THIS LINE * * */
- (function() {
- var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
- dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
- (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
- })();
-</script>
-<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
-</div> -->
+</div><!-- container -->
View
512 css/screen.css
@@ -1,436 +1,248 @@
-/*****************************************************************************/
-/*
-/* Common
-/*
-/*****************************************************************************/
-
-/* Global Reset */
-
-* {
- margin: 0;
- padding: 0;
-}
-
-html, body {
- height: 100%;
+* @group Meyer Reset */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
}
-
body {
- background-color: #f4f4f4;
- color: #202020;
- font: 13.34px "Helvetica Neue", Helvetica, Arial, clean, sans-serif;
- *font-size: small;
- text-align: center;
+ line-height: 1;
}
-
-h1, h2, h3, h4, h5, h6 {
- font-family: courier, georgia, serif;
- font-weight: normal;
+ol, ul {
+ list-style: none;
}
-
-h1 {
- font-size: 2.5em;
- line-height: 1em;
+blockquote, q {
+ quotes: none;
}
-h1.hai {
- margin-top: 6px;
+/* remember to define focus styles! */
+:focus {
+ outline: 0;
}
-h2 {
- font-size: 1.8em;
- line-height: 1.2em;
-}
-
-p {
- line-height: 1.7em;
- margin: 4px 0 20px 0;
-}
-
-a {
- color: #666666;
+/* remember to highlight inserts somehow! */
+ins {
text-decoration: none;
- border-bottom: 1px dashed;
}
-
-a:hover {
- color: #ff4b33;
- border-bottom: 1px dashed;
+del {
+ text-decoration: line-through;
}
+/* tables still need 'cellspacing="0"' in the markup */
table {
- font-size: inherit;
- font: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
}
- a.top {
- position: relative;
- bottom: 41px;
- left: -250px;
- }
-/* .bio p {
- margin-top: 2px;
- }*/
+.clear { clear: both; }
-/*****************************************************************************/
-/*
-/* Home
-/*
-/*****************************************************************************/
+::-webkit-input-placeholder { color: #00A5D8; opacity: .7; }
+:-moz-placeholder { color: #00A5D8; opacity: .7; border: none; }
+:required { box-shadow: none; }
-ul.posts, ol.posts {
- list-style-type: none;
- margin: 12px 0 50px 10px;
-}
- ul.posts li, ol.post li {
- line-height: 1.75em;
- margin-bottom: 0.75em;
- }
+/* @end */
- ul.posts span {
- color: #444;
- font-family: Monaco, "Courier New", monospace;
- font-size: 0.8em;
- }
+/* background: #FAFAFA url(../img/bg.png) 0 65px repeat-x; */
-/*****************************************************************************/
-/*
-/* Site
-/*
-/*****************************************************************************/
-
-.site {
- font-size: 110%;
- text-align: left;
- width: 750px;
- margin: 3em auto 2em auto;
- line-height: 1.7em;
-}
-
-.title {
- color: #a00;
- font-weight: bold;
- margin-bottom: 1em;
-}
-
- .site .title a {
- color: #202020;
- background: url(../images/fighters.png) no-repeat 570px 0;
- text-decoration: none;
- font-family: courier, georgia, serif;
- font-size: 4em;
- font-weight: normal;
- height: 50px;
- display: block;
- padding: 140px 0 0 250px;
- border-bottom: none;
- }
-
- .site .title a:hover {
- background: url(../images/fighters.png) no-repeat 570px -194px;
- }
-
- .site .title img {
- margin-top: -50px;
- }
-
- .site .title a.extra {
- color: #202020;
- font-size: 2em;
- text-decoration: none;
- margin-left: 1em;
- }
-
- .site .title a.extra:hover {
- color: black;
- }
-
- .site .bio {
- line-height: 1.5em;
- margin-bottom: 100px;
- }
-
- .site .meta {
- color: #202020;
- font-family: Monaco,"Courier New",monospace;
- font-size: 0.8em;
- }
-
- .site .footer {
- font-size: 80%;
- color: #202020;
- float: left;
- border-top: 4px solid #eee;
- margin-top: 2em;
- overflow: hidden;
- width: 750px;
- }
-
- .site .footer .contact {
- float: left;
- margin: 0 3em 0 2px;
- }
-
- .site .footer .contact a {
- border-bottom: none;
- }
-
- .site .footer .contact a:hover {
- border-bottom: thin dashed;
- }
-
- .site .footer .rss {
- margin-top: 1.1em;
- margin-right: -.2em;
- float: right;
- }
-
- .site .footer .rss img {
- border: 0;
- }
-
- .site .footer .columnB h1 {
- margin-top: 6px;
- text-transform: none;
- }
-
-/*****************************************************************************/
-/*
-/* Posts and portfolio
-/*
-/*****************************************************************************/
-
-#post,
-#portfolio {
-
-}
-
- /* standard */
-
- #post pre,
- #portfolio pre {
- border: 1px solid #ddd;
- background-color: #eef;
- padding: 0 .4em;
- }
-
- #post ul,
- #post ol
- #portfolio ul,
- #portfolio ol{
- margin-left: 1.35em;
- }
-
- #post code,
- #portfolio code {
- border: 1px solid #ddd;
- background-color: #eef;
- font-size: 85%;
- padding: 0 .2em;
- }
+/* @group Global */
- #post pre code,
- #portfolio pre code {
- border: none;
- }
- /* terminal */
-
- #post pre.terminal,
- #portfolio pre.terminal {
- border: 1px solid black;
- background-color: #333;
- color: white;
- }
-
- #post pre.terminal code,
- #portfolio pre.terminal code {
- background-color: #333;
- }
-
- #related {
- font-size: 90%;
- margin-top: 70px;
- }
-
- #related h2 {
- }
-
-
-/*****************************************************************************/
-/*
-/* Disqus comments
/*
-/*****************************************************************************/
+Text styles
-
+*/
-#disqus-comments {
- margin: 50px 0 50px 0;
- border-top: 4px solid #eee;
+body {
+ font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #333;
+ background-color: #fafafa;
+ padding-bottom: 60px;
}
-#disqus-comments a {
- border-bottom: none;
+h1 {
+ font-size: 59px;
}
-#disqus-comments a.dsq-subscribe-email em {
- text-decoration: none;
+h1, h2 {
+ color: #333;
+ font-family: "courier new", georgia, serif;
+ font-weight: 200;
+ padding-bottom: 0px;
}
-#disqus-comments a.dsq-subscribe-rss em {
- text-decoration: none;
+h2 {
+ font-size: 50px;
+ width: 100%;
+ display: block;
}
-/*****************************************************************************/
-/*
-/* Resume
-/*
-/*****************************************************************************/
-
-div.jobs h3 {
- margin: 20px 0 5px 0;
+h2.portfolio {
+ margin-top: 115px;
}
-div.jobs p {
- margin-top: 0;
- padding-top: 0;
+h2.footer {
+ font-size: 40px;
+ padding-bottom: 11px;
}
-p.caption {
- color: #202020;
- font-family: Monaco,"Courier New",monospace;
- font-size: 0.8em;
- margin: 0 0 20px 0;
+h3 {
+ font-size: 30px;
+ font-weight: normal;
+ margin-top: 3em;
}
-h2.portfolio {
- margin-bottom: 20px;
+
+h3, h4 {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
-/*****************************************************************************/
-/*
-/* Portfolio
-/*
-/*****************************************************************************/
-
-.portfolio {
- width: 750px;
- margin-top: 50px;
+p, p.description-text, ul li {
+ margin: 0 0 35px;
+ line-height: 1.6em;
+ font-weight: 200;
}
-.columnA {
- color: #444;
- width: 200px;
- margin: 0 50px 50px 0;
- float: left;
+p.hello {
+ font-weight: bold;
}
- .columnA p {
- font-family: courier,
- georgia, serif;
- }
-
+p.caption {
+ font-size: 12px;
+}
-.columnB {
- width: 490px;
- margin: 1px 10px 50px 0;
- float: left;
+ul li {
+ list-style: circle;
}
-/*.intro {
- padding-top: 20px;
-} --- fix baseline for intro*/
+ul.meta {
+ margin: 0 0 0 -40px;
+}
-.portfolio img {
- border: dashed 1px #ccc;
+ul.meta li {
+ list-style: none;
}
-.portfolio img.thumb {
- margin-right: 12.9px;
+ul.meta li, ul.portfolio li {
+ margin-bottom: 15px;
}
-.portfolio img:hover {
- border: dashed 1px #ff4b33;
+
+.banner a {
+ text-decoration: none;
}
-.portfolio a.img{
+.banner a h1 {
+ background: url(../images/fighters.png) no-repeat 628px 0;
+ display: block;
+ padding: 140px 0 0 0;
border-bottom: none;
+ text-decoration: none;
}
-.portfolio ul {
- margin-bottom: 70px;
+.banner a:hover h1 {
+ background: url(../images/fighters.png) no-repeat 628px -204px;
}
-.portfolio ul li {
- line-height: 1.25em;
- margin-bottom: 0.75em;
+
+img.portfolio {
+ margin-top: 3em;
}
-.portfolio ul li {
- border-top: 2px solid #202020;
- list-style-type: none;
- margin-bottom: 50px;
- padding: 2px 0 0;
+
+
+/*
+layout
+*/
+
+div.background {
+ width: 100%;
}
-.portfolio ul h2 a {
- color: #202020;
- border-bottom: none;
+div.page {
+ width: 100%;
+ margin: 0 auto;
+ max-width: 780px;
}
-.portfolio ul h2 a:hover {
- color: #ff4b33;
+div.block {
+ width: 100%;
+ padding-top: 75px;
+ display: block;
+ clear: both;
}
+div.container-title {
+ width: 780px;
+ display: block;
+ margin: 0 auto;
+}
-/*****************************************************************************/
-/*
-/* Detail
-/*
-/*****************************************************************************/
+div.container {
+ width: 780px;
+ margin: 0 auto;
+ display: block;
+ border-top: 4px solid;
+ margin-top: -58px;
+ padding: 35px 0 0;
+}
-.detail {
- width: 750px;
- margin-top: 50px;
+div.detail {
+ width: 100%;
}
-.detail ul.summary {
- margin-top: 6px;
+div.description {
+ display: block;
+ width: 380px;
+ float: left;
+ margin: 0 20px 0 0;
}
-.detail ul.summary li {
- border-top: 1px dashed #CCCCCC;
- font-size: 90%;
- line-height: 1.2em;
- list-style-type: none;
- margin-bottom: 15px;
+div.feature-image {
+ width: 380px;
+ display: block;
+ float: left;
}
-.detail ul.points {
- margin-bottom: 50px;
+div.footer {
+ width: 780px;
+ display: block;
+ margin: 0 auto;
}
-.detail ul.experience {
- list-style-type: none;
+div.social {
+ display: block;
+ width: 230px;
+ float: left;
+ margin: 0 30px 0 0;
}
- ul.experience h3 {
- font-size: 1.5em;
- }
-
- ul.experience li {
- margin-top: 10px;
- }
-.detail ul.points li {
- margin-bottom: 1em;
+div.minor {
+ display: block;
+ width: 180px;
+ float: left;
+ margin: 0 40px 0 0;
}
-a.back {
- text-transform: uppercase;
- font-size: 90%;
+div.major {
+ width: 560px;
+ display: block;
+ float: left;
}
+
+
View
18 designs/github-black-swan-posters.html
@@ -0,0 +1,18 @@
+---
+layout: portfolio
+title: GitHub black swan posters
+---
+
+ <div class="container-title">
+ <h3> {{ page.title }} </h3>
+ </div><!--container-title-->
+
+ <div class="major">
+ <p>I wanted to stretch my Illustrator skills so I created myself a project, which was to design a poster for GitHub as if it were a film in the style of the <a href="http://www.annihall.com/beautyblog/wp-content/uploads/2010/12/FI_BLACKSWAN_posters4.jpeg">Black Swan movie posters</a> using the <a href="http://octodex.github.com/">GitHub Octocat</a> as the main visual feature.</p>
+ <a class="img" href="/images/portfolio/github-poster1.png"><img class="thumb" src="/images/portfolio/github-poster1-thumb.png"></a>
+ <a class="img" href="/images/portfolio/github-poster2.png"><img class="thumb" src="/images/portfolio/github-poster2-thumb.png"></a>
+ <a class="img" href="/images/portfolio/github-poster3.png"><img src="/images/portfolio/github-poster3-thumb.png"></a>
+
+
+
+ </div><!--major-->
View
17 designs/octoswan-wallpaper.html
@@ -0,0 +1,17 @@
+---
+layout: portfolio
+title: OctoSwan wallpaper
+---
+
+<div class="major">
+ <h3> {{ page.title }} </h3>
+ <p>After making the <a href="/designs/github-black-swan-posters.html">GitHub "black swan" posters</a> I turned 2 of the designs into wallpaper for desktop and devices.</p>
+ <p>I made variations of the cream one into a faint grey background after a friend said he liked low contrast backgrounds. I then experimented and made myself a bright red version. I expected to find it too much, but I find the bright red color energetic and it helps make me feel motivated. I've totally fallen in love with it and have it on my iPhone too.</p>
+ <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-red.png"><img src="/images/backgrounds/octoswan-red.png"></a>
+ <p>You can download all of the backgrounds I've made so far from my <a href="https://github.com/broccolini/background_downloads/tree/master/downloads">background downloads repo on GitHub</a> </p>
+ <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-lite.png"><img class="thumb" src="/images/backgrounds/octoswan-grey.png"></a>
+ <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-black.png"><img class="thumb" src="/images/backgrounds/octoswan-black.png"></a>
+ <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-cream.png"><img src="/images/backgrounds/octoswan-cream.png"></a>
+ <p>I'm working on a few other backgrounds and I am working on a site to host them all so that's in the pipeline.</p>
+ </div><!-- major -->
+
View
14 designs/octotron.html
@@ -0,0 +1,14 @@
+---
+layout: portfolio
+title: OctoTron
+---
+
+ <h3> {{ page.title }} </h3>
+
+ <div class="major">
+ <p>After seeing <a href="http://octodex.github.com/ironcat/">IronCat</a> way back in April this year I couldn't help but think what octocat I would make. I'd recently watched Tron and so naturally I had to make OctoTron.</p>
+ <a href="/images/backgrounds/octotron-desktop-dark-blue.png"><img src="/images/backgrounds/octotron-on-dark-blue.png"></a>
+ <p>I decided to go with a version inspired by the first movie. It took me a while to finish with the small event of moving countries. But finally, here's <a href="/images/backgrounds/octotron.jpg">OctoTron</a>, now also proudly living on the <a href="http://octodex.github.com/octotron/">octodex</a>.</p>
+ <p>You can also grab him from my <a href="https://github.com/broccolini/background_downloads/tree/master/downloads/github">backgrounds repo</a> for iPhone, iPad and desktop in a few variations. Enjoy. </p>
+
+ </div><!-- major -->
View
10 designs/stick-party.html
@@ -0,0 +1,10 @@
+---
+layout: portfolio
+title: Stick Party
+---
+
+<div class="major">
+ <h3> {{ page.title }} </h3>
+ <p>The Stick Party site was for advertising a web app that a friend of mine was building. He wanted it to be a fun design and liked the hand-drawn sketched look. I created "Mr Stick" which I think help achieved the fun feel.</p>
+ <img src="/images/portfolio/stickparty.png">
+</div><!-- major -->
View
BIN  images/broccolini.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/design-feature.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/design-feature.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/fighters-red.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/fighters.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/me-in-tahoe.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/octotron-feature.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/portfolio/stickparty.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/projects-feature.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/prototyping-feature.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/talks-feature.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/talks-scrum.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
184 index.html
@@ -3,116 +3,78 @@
title: Broccolini
---
- <div class="portfolio">
- <div class="columnA">
- <h1 id="top" class="hai">Oh Hai!</h1>
- <p>View my <a href="#design">designs</a>, <a href="#projects">projects</a>, and <a href="#talks">talks</a>, or find me in other places on <a href="#me-on-teh-internets">teh internets</a>.</p>
- </div><!-- End columnA -->
-
- <div class="columnB" class="bio">
- <p><strong>Hello, I'm Diana Mounter.</strong></p>
- <p>I am a user experience pirate working in San Francisco. I am influenced by human-centric design processes and agile development.</p>
- <p>I currently work at <a href="http://about.vast.com">Vast</a> doing visual design and user experience strategies. Previously I worked in Sydney at <a href="http://digitaleskimo.net">Digital Eskimo</a> as an Experience Architect.</p>
+ <!-- <div class="block"> -->
+ <div class="container">
+ <div class="description">
+ <p class="hello">Hello, I'm Diana Mounter.</strong></p>
+ <p class="description-text">I am a user experience pirate working in San Francisco. I am influenced by human-centric design processes and agile development.</p>
+ <p class="description-text">I currently work at <a href="http://about.vast.com">Vast</a> doing visual design and user experience strategies. Previously I worked in Sydney at <a href="http://digitaleskimo.net">Digital Eskimo</a> as an Experience Architect.</p>
+ </div><!--description-->
+ <div class="feature-image">
+ <img src="/images/broccolini.png">
+ </div><!--feature-image-->
+ </div><!--container-->
+ <!-- </div> -->
+
+ <div class="block">
+ <div class="container-title">
+ <h2 id="design">design</h2>
+ </div><!--container-title-->
+ <div class="container">
+ <div class="description">
+ <p class="description-text">I start any design by sketching my ideas out with a black pen and plain white paper. I continue to craft my designs in Illustrator, Photoshop, and Fireworks, for digital and printed things.</p>
+ <p>In my current role I am unable to show design work until the sites are live, so for now here are a couple of illustrative projects I've done:</p>
+ <ul class="portfolio">
+ <li><a href="/designs/octotron.html">OctoTron</a></li>
+ <li><a href="/designs/octoswan-wallpaper.html">OctoSwan backgrounds</a></li>
+ </ul>
+ </div><!--description-->
+ <div class="feature-image">
+ <img src="/images/octotron-feature.png">
+ </div><!--feature-image-->
+ </div><!--description-->
+ </div><!--container-->
+ </div><!--block-->
+
+
+ <div class="block">
+ <div class="container-title">
+ <h2 id="projects">projects</h2>
+ </div><!--container-title-->
+ <div class="container">
+ <div class="description">
+ <p class="description-text">At Digital Eskimo my role was to research and design user experiences, develop concepts into UI specifications, and oversee their implementation.</p>
+ <p>Here are some projects I was particularly proud of:</p>
+ <ul class="portfolio">
+ <li><a href="/projects/urban-sketch-lab.html">Urban sketch lab</a></li>
+ <li><a href="/projects/virtual-learning-environment.html">Virtual learning environment</a></li>
+ </ul>
+ </div><!--description-->
+ <div class="feature-image">
+ <img src="/images/prototyping-feature.png">
+ </div><!--feature-image-->
+ </div><!--description-->
+ </div><!--container-->
+ </div><!--block-->
+
+
+ <div class="block">
+ <div class="container-title">
+ <h2 id="talks">talks</h2>
+ </div><!--container-title-->
+ <div class="container">
+ <div class="description">
+ <p class="description-text">I like to make my talks entertaining, these examples show my personality, things that influence my work practice, and my amazing stick men drawing skillz.</p>
+ <ul class="portfolio">
+ <li><a href="/talks/scrummaster-lord-of-the-universe.html">How I became ScrumMaster Lord of the Universe</a></li>
+ <li><a href="/talks/build-cool-stuff-for-local-government.html">How I build cool stuff for local government</a></li>
+ <li><a href="http://0.0.0.0:4000/talks/better-experience-design.html">Better Experience Design</a></li>
+ </ul>
+ </div><!--description-->
+ <div class="feature-image">
+ <img src="/images/talks-scrum.png">
+ </div><!--feature-image-->
+ </div><!--description-->
+
- </div><!-- End columnB -->
-
- <div class="columnA">
- <h1 id="design">Design</h1>
- <p>I start any design by sketching my ideas out with a black pen and plain white paper. I continue to craft my designs in Illustrator, Photoshop, and Fireworks, for digital and printed things.</p>
- </div><!-- End columnA -->
-
- <div class="columnB">
- <ul>
- <li>
- <h2>OctoTron</h2>
- <p>After seeing <a href="http://octodex.github.com/ironcat/">IronCat</a> way back in April this year I couldn't help but think what octocat I would make. I'd recently watched Tron and so naturally I had to make OctoTron.</p>
- <a class="img" href="/images/backgrounds/octotron-desktop-dark-blue.png"><img src="/images/backgrounds/octotron-on-dark-blue.png"></a>
- <p>I decided to go with a version inspired by the first movie. It took me a while to finish with the small event of moving countries. But finally, here's <a href="/images/backgrounds/octotron.jpg">OctoTron</a>, now also proudly living on the <a href="http://octodex.github.com/octotron/">octodex</a>.</p>
- <p>You can also grab him from my <a href="https://github.com/broccolini/background_downloads/tree/master/downloads/github">backgrounds repo</a> for iPhone, iPad and desktop in a few variations. Enjoy. </p>
- <li>
- <h2>OctoSwan wallpaper</h2>
- <p>After making the <a href="/projects/github-black-swan-posters.html">GitHub "black swan" posters</a> I turned 2 of the designs into wallpaper for desktop and devices.</p>
- <p>I made variations of the cream one into a faint grey background after a friend said he liked low contrast backgrounds. I then experimented and made myself a bright red version. I expected to find it too much, but I find the bright red color energetic and it helps make me feel motivated. I've totally fallen in love with it and have it on my iPhone too.</p>
- <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-red.png"><img src="/images/backgrounds/octoswan-red.png"></a>
- <p>You can download all of the backgrounds I've made so far from my <a href="https://github.com/broccolini/background_downloads/tree/master/downloads">background downloads repo on GitHub</a> </p>
- <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-lite.png"><img class="thumb" src="/images/backgrounds/octoswan-grey.png"></a>
- <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-black.png"><img class="thumb" src="/images/backgrounds/octoswan-black.png"></a>
- <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-cream.png"><img src="/images/backgrounds/octoswan-cream.png"></a>
- <p>I'm working on a few other backgrounds and I am working on a site to host them all so that's in the pipeline.</p>
- </li>
- <li>
- <h2><a href="/images/portfolio/stickparty.png">Stick Party</a></h2>
- <p>The Stick Party site was for advertising a web app that a friend of mine was building. He wanted it to be a fun design and liked the hand-drawn sketched look. I created "Mr Stick" which I think help achieved the fun feel.</p>
- </li>
- <li class="last">
- <p>I am also pretty good at drawing <a href="http://www.flickr.com/photos/broccolini/sets/72157626315012025/">Poodles</a></p>
- <a href="#top" id="top" class="top">back to the top</a>
- </li>
- </ul>
- </div><!-- End columnB -->
-
- <div class="columnA">
- <h1 id="projects">Projects</h1>
- <p>I research and design user experiences, and develop concepts into UI specifications.</p>
- </div><!-- End columnA -->
-
- <div class="columnB">
- <ul>
-
- <li><h2><a href="/projects/urban-sketch-lab.html">Urban Sketch Lab</a></h2>
- <p>I was the producer and experience architect for developing an interactive installation and accompanying event website and blog. This project taught me a lot about designing interactions for use during and after events.</p>
- <a class="img" href="/projects/urban-sketch-lab.html"><img src="/images/portfolio/USL-prototype.jpg"></a>
- </li>
-
- <li><h2><a href="/projects/virtual-learning-environment.html">Virtual Learning Environment</a></h2>
- <p>I was the producer and developed the user experience strategy for an online learning tool. We were asked to develop a prototype though the first version was used for a real course by students in the Asia Pacific.</p>
- <!-- <a class="img" href="/projects/virtual-learning-environment.html"><img src="/images/portfolio/vle-home1.jpg"></a> -->
- </li>
-
- <li><h2><a href="/projects/designing-broccolini.html">Designing broccolini.net</a></h2>
- <p>Being your own client is hard. To get past staring at a blank screen I took a strategic approach like I usually would on projects at work. I allowed myself just one weekend to design and build it so it is essentially the MVP version of my own website.</p>
- <!-- <a class="img" href="/projects/designing-broccolini.html"><img src="/images/portfolio/fighters-sketch.jpg"></a> -->
- </li>
- <li class="last">
- <p>More projects I'm proud of: <a href="http://bouncr.com">Bouncr</a>; <a href="http://www2.acfonline.org.au/">ACF GreenHome</a>; <a href="http://sustainability.unsw.edu.au/">UNSW Sustainability</a>; <a href="http://culturalawards2009.lgsa.org.au/">LGSA Cultural Awards 2009</a>.</p>
- <a href="#top" id="top" class="top">back to the top</a>
- </li>
- </ul>
- </div><!-- End columnB -->
-
- </div><!-- End portfolio -->
-
-
- <div class="portfolio">
- <div class="columnA">
- <h1 id="talks">Talks</h1>
- <p>I like to make my talks entertaining, these examples show my personality, things that influence my work practice, and my amazing stick men drawing skillz.</p>
- </div><!-- End columnA -->
-
- <div class="columnB">
- <ul>
- <li>
- <h2><a href="/talks/scrummaster-lord-of-the-universe.html">How I became ScrumMaster Lord of the Universe</a></h2>
- <p>My <a href="http://ignitesydney.com">Ignite</a> talk is a humorous yet honest reflection on how I learnt some hard life lessons after doing the ScrumMaster certification.</p>
- <a class="img" href="/talks/scrummaster-lord-of-the-universe.html"><img src="/images/talks/scrum-boardroom.jpg"></a>
- </li>
-
-<!-- <li><h2><a href="#">Better Experience Design</a></h2>
- <p>A quick five minute "lightning talk" for colleagues on key things that have influenced my user experience and interaction design.</p>
- <img src="/images/talks/better-ed.jpg">
- </li> -->
-
- <li>
- <h2><a href="/talks/build-cool-stuff-for-local-government.html">How I build cool stuff for Local Government</a></h2>
- <p>I had 3 minutes to impress the Webjam crowd. As one of few non-programmers presenting I talked about how I got stuff done using a plethora of web apps whilst working in a not for profit.</p>
- <a class="img" href="/talks/build-cool-stuff-for-local-government.html"><img src="/images/talks/webjam.jpg"></a></li>
-
- <li class="last">
- <p>More talks and presentations I'm proud of: <a href="http://www.slideshare.net/diana.mounter/testing-the-release-early-the-release-often-mantra">Testing the release early: the "release often" mantra</a>; <a href="http://www.slideshare.net/diana.mounter/social-mediaforvisualartists-upload">Social Media for Visual Artists</a>; <a href="http://www.slideshare.net/diana.mounter/the-role-of-personas-in-usercentred-design">The role of personas in user-centered design</a>.</p>
- <a href="#top" id="top" class="top">back to the top</a>
- </li>
- </ul>
- </div><!-- End columnB -->
-
- </div>
View
105 projects/designing-broccolini.html
@@ -1,71 +1,66 @@
---
layout: portfolio
-title: Designing broccolini.net
+title: designing broccolini.net
---
-<div class="detail">
- <div class="columnA">
-<ul class="summary">
- <li><strong>Timeframe</strong>: 1 weekend</li>
- <li><strong>Client</strong>: Myself!</li>
- <li><strong>Work produced</strong>: This website</li>
- <li><strong>My role</strong>: Design and development</li>
- </ul>
- </div><!--End columnA-->
+ <ul class="meta">
+ <li><strong>Timeframe</strong>: 1 weekend</li>
+ <li><strong>Work produced</strong>: This website (broccolini.net)</li>
+ <li><strong>My role</strong>: Design and development</li>
+ </ul>
+
+ <div class="block">
+ <div class="container-title">
+ <h2> {{ page.title }} </h2>
+ </div><!--container-title-->
- <div class="columnB">
- <h1> {{ page.title }} </h1>
- <p>I decided I'd put off building a personal website for myself for far too long, so I gave myself one weekend to get it done.</p>
+ <div class="container">
+ <div class="major">
+
+ <p>I decided I'd put off building a personal website for myself for far too long, so I gave myself one weekend to get it done.</p>
- <h2>Goals</h2>
- <p>My goals were to have a site that:</p>
- <ul class="points">
- <li>is simple to update that won't "get in the way" of me blogging</li>
- <li>allows me to focus on and practice my front-end skills</li>
- <li>has a visual style that reflects my personality</li>
- <li>promotes my professional work</li>
- </ul>
+ <h3>Goals</h3>
+ <p>My goals were to have a site that:</p>
+ <ul class="portfolio">
+ <li>is simple to update that won't "get in the way" of me blogging</li>
+ <li>allows me to focus on and practice my front-end skills</li>
+ <li>has a visual style that reflects my personality</li>
+ <li>promotes my professional work</li>
+ </ul>
- <h2>Design</h2>
- <p>I wanted the design to be simple, that wouldn't take too long to create so that I could design and build it within the weekend, and that reflected my personality.</p>
- <p>I decided to do some research and look at other sites that I wanted to be on a par with content wise, or that I liked the visual design of. I like typography and simple monotone colours, and I wanted the images on my site to be sketched - I sketch things all the time at work and for fun, so I felt it was an important to use sketches in my website design.</p>
+ <h3>Design</h3>
+ <p>I wanted the design to be simple, that wouldn't take too long to create so that I could design and build it within the weekend, and that reflected my personality.</p>
+ <p>I decided to do some research and look at other sites that I wanted to be on a par with content wise, or that I liked the visual design of. I like typography and simple monotone colours, and I wanted the images on my site to be sketched - I sketch things all the time at work and for fun, so I felt it was an important to use sketches in my website design.</p>
-<p>I looked at a few different sites but the following three sites influenced my website design the most.</p>
+ <p>I looked at a few different sites but the following three sites influenced my website design the most.</p>
-<img src="/images/portfolio/haskell.jpg">
-<p class="caption">Hand drawn sketches on <a href="http://learnyouahaskell.com/">Learn You a Haskell</a></p>
-<p>I had stumbled across <strong>Learn You a Haskell</strong> previously and I liked the cutsy style of the sketches.
-</p>
-<img src="/images/portfolio/fathom.jpg">
-<p class="caption">Large typographic headings on <a href="http://fathom.info">Fathom.info</a></p>
-<p>I came across the <strong>Fathom</strong> site as I have a love/hate relationship with infographics (i.e. I love good ones, hate bad ones - of which there are many!). I like the huge size of the heading, and I also like that the site is all greyscale.</p>
+ <img class="portfolio" src="/images/portfolio/haskell.jpg">
+ <p class="caption">Hand drawn sketches on <a href="http://learnyouahaskell.com/">Learn You a Haskell</a></p>
+ <p>I had stumbled across <strong>Learn You a Haskell</strong> previously and I liked the cutsy style of the sketches.
+ </p>
+ <img class="portfolio" src="/images/portfolio/fathom.jpg">
+ <p class="caption">Large typographic headings on <a href="http://fathom.info">Fathom.info</a></p>
+ <p>I came across the <strong>Fathom</strong> site as I have a love/hate relationship with infographics (i.e. I love good ones, hate bad ones - of which there are many!). I like the huge size of the heading, and I also like that the site is all greyscale.</p>
-<img src="/images/portfolio/squaredeye.jpg">
-<p class="caption">Monotone colours on <a href="http://squaredeye.com">squaredeye.com</a></p>
-<p>The design of <strong>Squared Eye</strong> is busier than I wanted personally, but I like the pale colours, the illustrations and the textured feel.</p>
+ <img class="portfolio" src="/images/portfolio/squaredeye.jpg">
+ <p class="caption">Monotone colours on <a href="http://squaredeye.com">squaredeye.com</a></p>
+ <p>The design of <strong>Squared Eye</strong> is busier than I wanted personally, but I like the pale colours, the illustrations and the textured feel.</p>
-<p><strong>I started to look at fonts</strong> but found myself going down a rabbit hole. Seeing as I wanted to complete the project in a weekend I decided to keep it simple and stick with Courier and Helvetica for now.</p>
+ <p><strong>I started to look at fonts</strong> but found myself going down a rabbit hole. Seeing as I wanted to complete the project in a weekend I decided to keep it simple and stick with Courier and Helvetica for now.</p>
-<p>I like sci-fi films and love drawing spaceships, aliens and robots, so as part of reflecting my personality I was keen to include the space fighter jets as part of my design. My website is very simple with large headings, but the fighter jets add a bit of fun and recognisable visual branding that I can apply to other collateral.</p>
+ <p>I like sci-fi films and love drawing spaceships, aliens and robots, so as part of reflecting my personality I was keen to include the space fighter jets as part of my design. My website is very simple with large headings, but the fighter jets add a bit of fun and recognisable visual branding that I can apply to other collateral.</p>
-<img src="/images/portfolio/fighters-sketch.jpg">
-<p class="caption">Hand drawn sketches of the fighter jets</p>
+ <img class="portfolio" src="/images/portfolio/fighters-sketch.jpg">
+ <p class="caption">Hand drawn sketches of the fighter jets</p>
-<p>I went with very simple grey colours as I plan to include photos and colourful images in the future. I think this style will work as I develop my site and add more imagery in the content.</p>
+ <p>I went with very simple grey colours as I plan to include photos and colourful images in the future. I think this style will work as I develop my site and add more imagery in the content.</p>
-<h2>Technical bits</h2>
-<p><!-- I considered using Wordpress as I was familiar with it, but wasn't that excited about it seeing as I often find myself fidling with plugins to get it working how I want. I thought about learning Django for setting up a new blog as I'm familiar with using it at work but figured that would take me too long to setup. -->I decided to use <a href="https://github.com/mojombo/jekyll">Jekyll</a> as it didn't require me to learn any programming, but I can still style as I like. It's really easy to install and I can use HTML, Markdown, or Textile for pages and blog posts. An added bonus is that I can host it on <a href="https://github.com/">GitHub</a> (as Jekyll is the engine behind GitHub pages) which means I can practice using Git which previously I was using very infrequently and thus forgetting commands.</p>
+ <h3>Technical bits</h3>
+ <p>I decided to use <a href="https://github.com/mojombo/jekyll">Jekyll</a> as it didn't require me to learn any programming, but I can still style as I like. It's really easy to install and I can use HTML, Markdown, or Textile for pages and blog posts. An added bonus is that I can host it on <a href="https://github.com/">GitHub</a> (as Jekyll is the engine behind GitHub pages) which means I can practice using Git which previously I was using very infrequently and thus forgetting commands.</p>
-<h2>The end result</h2>
-<p>I have a site that I designed and built and published live in a weekend. I am able to improve it easily bit by bit when I have time. Though it has a very simple minimal design, it still reflects my personality, and it's easy to maintain.</p>
-</div><!-- End columnB -->
-
-<div id="related">
- <h2>More projects</h2>
- <ul class="posts">
- <li>&raquo; <a href="/projects/virtual-learning-environment.html">Virtual Learning Environment</a></li>
- <li>&raquo; <a href="/projects/urban-sketch-lab.html">Urban Sketch Lab</a></li>
- </ul>
-</div>
-
-</div><!-- End portfolio -->
+ <h3>The end result</h3>
+ <p>I have a site that I designed and built and published live in a weekend. I am able to improve it easily bit by bit when I have time. Though it has a very simple minimal design, it still reflects my personality, and it's easy to maintain.</p>
+ </div><!-- major -->
+ </div><!--container-->
+ </div><!--block-->
+
View
81 projects/urban-sketch-lab.html
@@ -1,59 +1,56 @@
---
layout: portfolio
-title: Urban Sketch Lab
+title: urban sketch lab
---
-<div class="detail">
- <div class="columnA">
-<ul class="summary">
- <li><strong>Timeframe</strong>: 10 weeks</li>
- <li><strong>Client</strong>: University</li>
- <li><strong>Work produced</strong>: Interactive installation, event website, and blog </li>
- <li><strong>My role</strong>: User experience design; UI specification; project management</li>
- </ul>
- </div><!--End columnA-->
-
- <div class="columnB">
-<h1> {{ page.title }} </h1>
-
- <p>After initially contracting Digital Eskimo to develop their new event website and blog, the UNSW&#8217;s <a href="http://www.niea.unsw.edu.au/">National Institute of Experimental Arts</a> (NIEA) asked us to partner with them to create an interactive installation for the event, the <a href="http://hothouse.unsw.edu.au/">HotHouse Symposium</a> at the Opera House. We created the <a href="http://hothouselaunch.unsw.edu.au/sketch-lab/">Urban Sketch Lab</a>— <strong>a digital sketching tool which attendees used to express ideas about re-designing urban space.</strong> Images of well-known sites around Sydney were projected onto a digital drawing table which could then be sketched over using an infra-red pen. The sketches were then uploaded to the event site and linked with the profiles of attendees so that people could continue to discuss and share their sketches.</p>
+ <ul class="meta">
+ <li><strong>Timeframe</strong>: 10 weeks</li>
+ <li><strong>Client</strong>: University</li>
+ <li><strong>Work produced</strong>: Interactive installation, event website, and blog </li>
+ <li><strong>My role</strong>: User experience design; UI specification; project management</li>
+ </ul>
+
+ <div class="block">
+ <div class="container-title">
+ <h2> {{ page.title }} </h2>
+ </div><!--container-title-->
+
+ <div class="container">
+ <div class="major">
+ <p>After initially contracting Digital Eskimo to develop their new event website and blog, the UNSW&#8217;s <a href="http://www.niea.unsw.edu.au/">National Institute of Experimental Arts</a> (NIEA) asked us to partner with them to create an interactive installation for the event, the <a href="http://hothouse.unsw.edu.au/">HotHouse Symposium</a> at the Opera House. We created the <a href="http://hothouselaunch.unsw.edu.au/sketch-lab/">Urban Sketch Lab</a>— <strong>a digital sketching tool which attendees used to express ideas about re-designing urban space.</strong> Images of well-known sites around Sydney were projected onto a digital drawing table which could then be sketched over using an infra-red pen. The sketches were then uploaded to the event site and linked with the profiles of attendees so that people could continue to discuss and share their sketches.</p>
-<h2>Developing the concept</h2>
-<p>Creating the Sketch Lab from concept to completion was a collaborative process.</p>
-<p>To begin with we needed to understand more about what the event was aiming to achieve, what message NIEA wanted to give people coming to the event. I found we needed to explore the branding of HotHouse before we could start to develop concepts that were in tune with the aims of the event.</p>
+ <h3>Developing the concept</h3>
+ <p>Creating the Sketch Lab from concept to completion was a collaborative process.</p>
+ <p>To begin with we needed to understand more about what the event was aiming to achieve, what message NIEA wanted to give people coming to the event. I found we needed to explore the branding of HotHouse before we could start to develop concepts that were in tune with the aims of the event.</p>
-<img src="/images/portfolio/hh-branding.jpg">
-<p class="caption">Exploring branding with NIEA staff</p>
+ <img src="/images/portfolio/hh-branding.jpg">
+ <p class="caption">Exploring branding with NIEA staff</p>
-<p>In the early stages we brainstormed ideas with our designers and programmers, workshopped ideas with NIEA staff, artists and curators, and in the early stages, even brainstormed ideas with a visiting artist and computer science pHD candidate from Holland.</p>
+ <p>In the early stages we brainstormed ideas with our designers and programmers, workshopped ideas with NIEA staff, artists and curators, and in the early stages, even brainstormed ideas with a visiting artist and computer science pHD candidate from Holland.</p>
-<img src="/images/portfolio/hh-concept.jpg">
-<p class="caption">Concept sketch</p>
+ <img src="/images/portfolio/hh-concept.jpg">
+ <p class="caption">Concept sketch</p>
- <p>One of the developers had been testing out an open source program that allows you to use wii remotes to turn any surface into <a href="http://www.uweschmidt.org/wiimote-whiteboard">an interactive whiteboard</a>. So we started to explore ideas using <a href="http://processing.org/">Processing</a> to develop the interface. These tools were used in our final version of the installation.</p>
+ <p>One of the developers had been testing out an open source program that allows you to use wii remotes to turn any surface into <a href="http://www.uweschmidt.org/wiimote-whiteboard">an interactive whiteboard</a>. So we started to explore ideas using <a href="http://processing.org/">Processing</a> to develop the interface. These tools were used in our final version of the installation.</p>
-<h2>Prototyping</h2>
-<p>With a short timeline to design and develop the interface and build the table, we created a <a href="http://www.flickr.com/photos/digitaleskimo/sets/72157624734975120/">prototype</a> using spare wood, parts of other tables, our bathroom mirror (!) and, amongst other things, a sheet of humble tracing paper. Our first infra-red pen was actually made using a glue stick. This large contraption attracted a lot of attention around the studio which also gave us a good opportunity to gather some early user feedback from fellow eskimos.</p>
+ <h3>Prototyping</h3>
+ <p>With a short timeline to design and develop the interface and build the table, we created a <a href="http://www.flickr.com/photos/digitaleskimo/sets/72157624734975120/">prototype</a> using spare wood, parts of other tables, our bathroom mirror (!) and, amongst other things, a sheet of humble tracing paper. Our first infra-red pen was actually made using a glue stick. This large contraption attracted a lot of attention around the studio which also gave us a good opportunity to gather some early user feedback from fellow eskimos.</p>
- <img src="/images/portfolio/USL-prototype.jpg">
- <p class="caption">Prototyping in the studio</p>
+ <img src="/images/portfolio/USL-prototype.jpg">
+ <p class="caption">Prototyping in the studio</p>
-<p>Setting up a simple prototype proved invaluable, not just from the lessons we learned on the user interface but it also proved incredibly useful when we began to collaborate with an industrial artist to build the physical table. Early on in the conception phase we were keen to work with <a href="http://www.chrisfox.com.au/">Chris Fox</a> a friend of the eskimos and exceptional sculptural artist. Chris immediately got what we were aiming to do with the Sketch Lab concept and took measurements and schematic information directly from the prototype. Most of the basic setup used for the prototype was maintained in the final version for the event (which utilised an old architects drawing table heavily customised for our purposes) even down to the use of tracing paper (between perspex screens) to create a surface that would reflect the projection.</p>
+ <p>Setting up a simple prototype proved invaluable, not just from the lessons we learned on the user interface but it also proved incredibly useful when we began to collaborate with an industrial artist to build the physical table. Early on in the conception phase we were keen to work with <a href="http://www.chrisfox.com.au/">Chris Fox</a> a friend of the eskimos and exceptional sculptural artist. Chris immediately got what we were aiming to do with the Sketch Lab concept and took measurements and schematic information directly from the prototype. Most of the basic setup used for the prototype was maintained in the final version for the event (which utilised an old architects drawing table heavily customised for our purposes) even down to the use of tracing paper (between perspex screens) to create a surface that would reflect the projection.</p>
-<h2>User testing</h2>
-<p>The HotHouse launch event was the first time we could put the full setup together. We&#8217;d tested the software, the table, and pen prototypes, but due to the short timeline we were unable to test the final versions of each component altogether. This was a bit nerve-wracking but also a fascinating experience from a usability perspective. <strong>Observing how different people used the tool first hand gave us important user feedback.</strong> Many event attendees also had their own ideas about how the Sketch Lab could be improved or used in different contexts.</p>
+ <h3>User testing</h3>
+ <p>The HotHouse launch event was the first time we could put the full setup together. We&#8217;d tested the software, the table, and pen prototypes, but due to the short timeline we were unable to test the final versions of each component altogether. This was a bit nerve-wracking but also a fascinating experience from a usability perspective. <strong>Observing how different people used the tool first hand gave us important user feedback.</strong> Many event attendees also had their own ideas about how the Sketch Lab could be improved or used in different contexts.</p>
-<img src="/images/portfolio/hh-event.jpg">
-<p class="caption">The Sketch Lab in use at the event</p>
+ <img src="/images/portfolio/hh-event.jpg">
+ <p class="caption">The Sketch Lab in use at the event</p>
-<p>The installation generated a lot of interest online too from those unable to attend as <a href="http://www.flickr.com/photos/digitaleskimo/sets/72157624480862991/">we posted images on flickr.</a> the insights gained from this first-hand user feedback were used to inform how we re-purposed it for a global web conference series - <a href="http://south10.webdirections.org/">Web Directions</a> - as they asked us to develop a custom version as the Sydney events key interactive feature.</p>
-</div><!-- End columnB -->
+ <p>The installation generated a lot of interest online too from those unable to attend as <a href="http://www.flickr.com/photos/digitaleskimo/sets/72157624480862991/">we posted images on flickr.</a> the insights gained from this first-hand user feedback were used to inform how we re-purposed it for a global web conference series - <a href="http://south10.webdirections.org/">Web Directions</a> - as they asked us to develop a custom version as the Sydney events key interactive feature.</p>
+ </div><!--major-->
+ </div><!-- container -->
+ </div><!-- block -->
-<div id="related">
- <h2>More projects</h2>
- <ul class="posts">
- <li>&raquo; <a href="/projects/virtual-learning-environment.html">Virtual Learning Environment</a></li>
- <li>&raquo; <a href="/projects/designing-broccolini.html">Designing broccolini.net</a></li>
- </ul>
-</div><!-- End portfolio -->
+
View
155 projects/virtual-learning-environment.html
@@ -1,82 +1,79 @@
---
layout: portfolio
-title: APF Virtual Learning Environment
+title: virtual learning environment
---
-<div class="detail">
- <div class="columnA">
-<ul class="summary">
- <li><strong>Timeframe</strong>: 6 weeks</li>
- <li><strong>Client</strong>: Not For Profit</li>
- <li><strong>Work produced</strong>: Online learning application</li>
- <li><strong>My role</strong>: UX design; UI specifications; project management.</li>
- </ul>
- </div><!--End columnA-->
-
- <div class="columnB">
- <h1> {{ page.title }} </h1>
- <p>The <a href="#">Asia Pacific Forum</a> (APF) asked us to develop a Virtual Learning Environment for use by people learning how to setup and run human rights organisations.</p>
-<h2>Project Goals and Stakeholders</h2>
-<p>To kick off the project I ran a workshop with APF staff and trainers involved in the courses. During the workshop we explored project goals, key stakeholders, and developed persona journey's to look at user needs and motivations over time.</p>
-
-<p><strong>The key stakeholders were</strong>:</p>
-<ul class="points">
- <li><strong>Students</strong>: with english as a second language; using low speed internet connections with older versions of browsers; with varying computer and internet skills; and who are likely to have never participated in an online training course before</li>
- <li><strong>Trainers</strong>: with moderate technical skills, familiar with participating in online training courses; accessing from various locations and time zones</li>
- <li class="last"><strong>APF staff delivering the course</strong>: experienced with other virtual learning environments such as Moodle; moderate technical skills; most likely to setup courses.</li>
-</ul.points>
-
-<img src="/images/portfolio/persona-journey.jpg">
-<p class="caption">Exploring persona journey's</p>
-
-<p>The goal of the project was to build a working prototype ready for use by trainers and students for a course starting in six weeks time.</p>
-
-<p><strong>We agreed on the following release goals</strong></p>
-<ul.points>
- <li>Intuitive and simple user interface over 'bells and whistles' design</li>
- <li>Less features built right rather than many features built below par</li>
- <li>Delivering on time over delivering features</li>
-</ul>
-
-
-<h2>Planning and specification</h2>
-<p>One of the challenges of this project was that the APF project manager had little experience with website projects. We met to plan the first sprint but she found it difficult to understand what were building. So we captured high level priorities and then agreed to develop basic wireframes and come back and prioritise features based around components of the site such as discussion and assignments.</p>
-
-<img src="/images/portfolio/gui-jam.jpg">
-<p class="caption">GUI jam sketch 1</p>
-
-<img src="/images/portfolio/gui-jam2.jpg">
-<p class="caption">GUI jam sketch 2</p>
-
-<p>I met with the designer and programmer and discussed and sketched out our ideas about the design of the interface so that we could work through the features quickly together. These sketches informed the development of the wireframes.</p>
-
-<img src="/images/portfolio/wireframe.jpg">
-<p class="caption">wireframes</p>
-
-<p>I kept the wireframes quite simple as we had limited budget to do detailed documentation, but with enough detail to allow us to discuss features during sprint planning.</p>
-
-<h2>Production</h2>
-<p>The production phase was split into 2 sprints so that we could include some user testing with APF staff and trainers before completing development. This helped us prioritise what was essential for the release. Design started slightly ahead of development, once the core styles had been set the rest of the design was done in the browser rather than continuing with photoshop flats. The team worked closely together during production so that we could discuss detail and make quick decisions.</p>
-
-<p>The end result was an application that was easily to use with robust features and a simple clear design.</p>
-
-<img src="/images/portfolio/vle-home1.jpg">
-<p class="caption">Interface design - modules closed</p>
-
-<img src="/images/portfolio/design.jpg">
-<p class="caption">Interface design - modules expanded</p>
-
-<img src="/images/portfolio/design-quiz.jpg">
-<p class="caption">Interface design - quiz</p>
-
-<p>APF were happy with the result and claimed they had a much higher retention with their students than previous online courses. They approached us to develop the application further which is currently under development.</p>
-</div><!-- End columnB -->
-
-<div id="related">
- <h2>More projects</h2>
- <ul class="posts">
- <li>&raquo; <a href="/projects/urban-sketch-lab.html">Urban Sketch Lab</a></li>
- <li>&raquo; <a href="/projects/designing-broccolini.html">Designing broccolini.net</a></li>
- </ul>
-</div>
-
-</div> <!--End detail -->
+ <ul class="meta">
+ <li><strong>Timeframe</strong>: 6 weeks</li>
+ <li><strong>Client</strong>: Not For Profit</li>
+ <li><strong>Work produced</strong>: Online learning application</li>
+ <li><strong>My role</strong>: UX design; UI specifications; project management.</li>
+ </ul>
+
+ <div class="block">
+ <div class="container-title">
+ <h2> {{ page.title }} </h2>
+ </div><!--container-title-->
+
+ <div class="container">
+ <div class="major">
+ <p>The <a href="#">Asia Pacific Forum</a> (APF) asked us to develop a Virtual Learning Environment for use by people learning how to setup and run human rights organisations.</p>
+
+ <h3>Project Goals and Stakeholders</h3>
+ <p>To kick off the project I ran a workshop with APF staff and trainers involved in the courses. During the workshop we explored project goals, key stakeholders, and developed persona journey's to look at user needs and motivations over time.</p>
+
+ <p><strong>The key stakeholders were</strong>:</p>
+ <ul class="portfolio">
+ <li><strong>Students</strong>: with english as a second language; using low speed internet connections with older versions of browsers; with varying computer and internet skills; and who are likely to have never participated in an online training course before</li>
+ <li><strong>Trainers</strong>: with moderate technical skills, familiar with participating in online training courses; accessing from various locations and time zones</li>
+ <li class="last"><strong>APF staff delivering the course</strong>: experienced with other virtual learning environments such as Moodle; moderate technical skills; most likely to setup courses.</li>
+ </ul>
+
+ <img src="/images/portfolio/persona-journey.jpg">
+ <p class="caption">Exploring persona journey's</p>
+
+ <p>The goal of the project was to build a working prototype ready for use by trainers and students for a course starting in six weeks time.</p>
+
+ <p><strong>We agreed on the following release goals</strong></p>
+ <ul class="portfolio">
+ <li>Intuitive and simple user interface over 'bells and whistles' design</li>
+ <li>Less features built right rather than many features built below par</li>
+ <li>Delivering on time over delivering features</li>
+ </ul>
+
+
+ <h3>Planning and specification</h3>
+ <p>One of the challenges of this project was that the APF project manager had little experience with website projects. We met to plan the first sprint but she found it difficult to understand what were building. So we captured high level priorities and then agreed to develop basic wireframes and come back and prioritise features based around components of the site such as discussion and assignments.</p>
+
+ <img src="/images/portfolio/gui-jam.jpg">
+ <p class="caption">GUI jam sketch 1</p>
+
+ <img src="/images/portfolio/gui-jam2.jpg">
+ <p class="caption">GUI jam sketch 2</p>
+
+ <p>I met with the designer and programmer and discussed and sketched out our ideas about the design of the interface so that we could work through the features quickly together. These sketches informed the development of the wireframes.</p>
+
+ <img src="/images/portfolio/wireframe.jpg">
+ <p class="caption">wireframes</p>
+
+ <p>I kept the wireframes quite simple as we had limited budget to do detailed documentation, but with enough detail to allow us to discuss features during sprint planning.</p>
+
+ <h3>Production</h3>
+ <p>The production phase was split into 2 sprints so that we could include some user testing with APF staff and trainers before completing development. This helped us prioritise what was essential for the release. Design started slightly ahead of development, once the core styles had been set the rest of the design was done in the browser rather than continuing with photoshop flats. The team worked closely together during production so that we could discuss detail and make quick decisions.</p>
+
+ <p>The end result was an application that was easily to use with robust features and a simple clear design.</p>
+
+ <img src="/images/portfolio/vle-home1.jpg">
+ <p class="caption">Interface design - modules closed</p>
+
+ <img src="/images/portfolio/design.jpg">
+ <p class="caption">Interface design - modules expanded</p>
+
+ <img src="/images/portfolio/design-quiz.jpg">
+ <p class="caption">Interface design - quiz</p>
+
+ <p>APF were happy with the result and claimed they had a much higher retention with their students than previous online courses. They approached us to develop the application further which is currently under development.</p>
+
+
+ </div><!-- major -->
+ </div><!--container-->
+ </div><!--block-->
View
16 talks/better-experience-design.html
@@ -0,0 +1,16 @@
+---
+layout: portfolio
+title: Better experience design
+---
+
+<p>A presentation I did a few years ago to my colleagues at Digital Eskimo about some of the top things that have helped me become a better user experience designer. Many of these things are still a huge influence on the way I work.</p>
+
+ <div class="container-title">
+ <h3> {{ page.title }} </h3>
+</div><!--container-title-->
+
+ <div class="major">
+
+ <script src="http://speakerdeck.com/embed/4f41a5d9d436c1001f001239.js"></script>
+
+ </div><!--major-->
View
23 talks/build-cool-stuff-for-local-government.html
@@ -3,17 +3,16 @@
title: How I build cool stuff for Local Government
---
-<h1> {{ page.title }} </h1>
-<p>I had 3 minutes to impress the Webjam crowd. As one of few non-programmers presenting I talked about how I got stuff done using a plethora of web apps whilst working in a not for profit.</p>
+ <p>I had 3 minutes to impress the Webjam crowd. As one of few non-programmers presenting I talked about how I got stuff done using a plethora of web apps whilst working in a not for profit.</p>
+
+ <div class="container-title">
+ <h3> {{ page.title }} </h3>
+ </div><!--container-title-->
+
+ <div class="major">
+ <object width="490" height="auto"><param name="movie" value="http://www.zdnet.com.au/videos/embed/22464550/"></param></param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.zdnet.com.au/videos/embed/22464550/" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="490" height="280"></embed></object>
-<object width="490" height="auto"><param name="movie" value="http://www.zdnet.com.au/videos/embed/22464550/"></param></param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.zdnet.com.au/videos/embed/22464550/" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="490" height="280"></embed></object>
-
-<p><a href="http://www.zdnet.com.au/videos/play/22464550/">View this video on ZDNet</a></p>
-
-<div id="related">
- <h2>More talks and presentations</h2>
- <ul class="posts">
- <li>&raquo; <a href="/talks/scrummaster-lord-of-the-universe.html">How I became ScrumMaster Lord of the Universe</a></li>
- </ul>
-</div>
+ <p><a href="http://www.zdnet.com.au/videos/play/22464550/">View this video on ZDNet</a></p>
+
+ </div><!-- major -->
View
0  talks/release-often-mantra.html
No changes.
View
27 talks/scrummaster-lord-of-the-universe.html
@@ -1,19 +1,18 @@
---
layout: portfolio
-title: How I became ScrumMaster Lord of the Universe
+title: how I became ScrumMaster Lord of the Universe
---
-<h1> {{ page.title }} </h1>
+ <p>My <a href="http://ignitesydney.com">Ignite</a> talk is a humorous yet honest reflection on how I learnt some hard life lessons after doing the ScrumMaster certification.</p>
-<p>My <a href="http://ignitesydney.com">Ignite</a> talk is a humorous yet honest reflection on how I learnt some hard life lessons after doing the ScrumMaster certification.</p>
-
-<div style="width:595px" id="__ss_7006611"> <object id="__sse7006611" width="595" height="497"> <param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=scrummaster-lord-of-the-universe-final-110221210828-phpapp01&stripped_title=scrum-master-lordoftheuniversefinal&userName=diana.mounter" /> <param name="allowFullScreen" value="true"/> <param name="allowScriptAccess" value="always"/> <embed name="__sse7006611" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=scrummaster-lord-of-the-universe-final-110221210828-phpapp01&stripped_title=scrum-master-lordoftheuniversefinal&userName=diana.mounter" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="595" height="497"></embed> </object> <div style="padding:5px 0 12px"> </div> </div>
-
-<p><a href="http://www.slideshare.net/diana.mounter/scrum-master-lordoftheuniversefinal">View this presentation on slideshare</a></p>
-
-<div id="related">
- <h2>More talks and presentations</h2>
- <ul class="posts">
- <li>&raquo; <a href="/talks/build-cool-stuff-for-local-government.html">How I build cool stuff for Local Government</a></li>
- </ul>
-</div>
+ <div class="container-title">
+ <h3> {{ page.title }} </h3>
+ </div><!--container-title-->
+
+ <div class="major">
+
+ <iframe width="560" height="315" src="http://www.youtube.com/embed/-Sc6XJ3q4Ow" frameborder="0" allowfullscreen></iframe>
+ <p><a href="http://speakerdeck.com/u/broccolini/p/how-i-became-scrummaster-lord-of-the-universe">View these slides on Speaker Deck</a></p>
+
+ </div><!--major-->
+

No commit comments for this range

Something went wrong with that request. Please try again.