New Portfolio

This is my new portfolio site, featuring 10 items that I’ve created since I left school in December. I thought it necessary to put together something that looked a little more formal than my current home page, so this is it. Click here to visit.

OIBDC Re-Branding Mock-Up

mock-up of oibdc rebranding

mockup as it would appear in browser (Google Chrome)

These are mock-ups for the re-branding of the Osoyoos Indian Band Developement Corporation website.

Pixelborne: my new website!

This is my new website, Pixelborne.com, which is mostly a blog now, but in the future will have portfolio samples of work that I do. As you can see, it still needs a little work. It’s been running for a tad under two weeks now but is putting up good visitor numbers.

Invitation Design

This is an invitation I designed for a business reception that’s being held by the Tsali Waututh First Nation and the Osoyoos Indian Band in Vancouver on February 23rd. It was a pretty quick and simple.

3-Year Evolution of NHL’s Top 5 Scorers

This is another data visualization using NHL stats in an XML format, drawn with Processing. This one was a lot easier to produce, having already created one. It maps out the games played, goals, assists, points and plus/minus of each of the NHL’s current top 5 scorers over the last three seasons, not including this current season underway.

NHL Data Visualization: 2009 Playoffs

This is the first of a series of data visualizations I plan on creating using NHL statistics in Processing. Basically, this sketch compiles stats from six teams in the Western Conference 2009 playoffs: Blackhawks, Flames, Ducks, Canucks, Red Wings, and Blue Jackets. Probably the hardest part in creating this visualization was compiling the data. Because I couldn’t find any sort of compiled XML data on the NHL, not anywhere, I decided to compile some myself, which is tediously boring, and the reason there’s only data on six teams instead all eight in the Western Conference, or the 16 in both conferences.

Anyhow, Processing is awesome. And I love these sorts of info graphics. So you can count on seeing more in the future. Some of my favorite data visualizations include DoodleBuzz, created by Brendan Dawes (one of my favorite designers) at Magnetic North, and a lot of the stuff Jer Thorpe does, such as this recent piece where he compares Haiti Earthqauke Aid by Nation in “Avatar Minutes”, which was very clever. And Brendan Dawes’ Cinema Redux, is amazing, if you haven’t seen it. Also, there’s a great article on the Web Designer Depot about visualizations.

Click here to see larger image.

Web Design for OIBDC

Here’s a look at what I’ve been doing so far this year. Click here to view the site. It’s a relatively simple and quick design. It’s meant to communicate progress and development, which is what the OIBDC is all about. It still needs a bit of tweaking, but overall, I’d say I’m on a good path for the New Year.

On a side note, my new apartment is amazing. And I’ve been learning about jQuery. I don’t know why we only skimmed over it in school: it’s so awesome. Such an easy language, and the possibilities are just baffling.

Tone Scribbler: an AS3 toy

Ever wonder what a smiley face sounds like? Or your own signature? Well, now you can know with the Tone Scribbler.

The Tone Scribbler is a small Flash toy I built using Joe Berkovitz’s StandingWave2, which is an open source AS3 sound engine. You can download StandingWave2 on Google Code at http://code.google.com/p/standingwave/.

Basically, it’s a simple program that converts your doodles into sound sequences, then plays them for you. You can adjust the speed if you like, and there’s an erase button, so you can start over. Overall, it’s a very simple program, but it’s kinda fun to play around with.

The tones are generated dynamically with Actionscript, as oppose to loading MP3s into the Flash file. You don’t see a lot of dynamically generated sounds in web development, probably because there’s not a lot of practical use for it. As far as I know, StandingWave2 is the only accessible sound engine for AS3 that makes it easy to generate tones through code. There’s not a lot of documentation on it, not even from Adobe, so I was very glad to find Joe Berkovitz’s website, it made this project a hell of a lot easier.

New CSS3 Tricks

NOTE: the animation example only works in Safari.

A lot of web designers are getting really excited about CSS3, and for good reason. Even though the browser support isn’t quite there yet, we’re starting to get a peek at what the future holds for standards compliant design. From what I’ve seen of CSS3 so far, things are really starting to look good. For those interested, all of what I discuss in this post I learned from this Smashing Magazine article about CSS3.

The three things I’m most excited about are rounded corners, drop shadows, and animations. That’s right. Animations in CSS! I almost couldn’t comprehend it when I first saw it, but it’s true.

A rounded corner doesn’t sound like a big deal to anyone who’s not a web designer, but trust me, it’s a big deal. Anyone who’s ever designed a website knows that something as seemingly simple as a rounded corner can be a real pain in the ass.

To use rounded corners in CSS3, you have to use the “border-radius” property. Like almost all of the properties in CSS3, there’s a Mozilla version and Safari version. The Safari properties always use the prefix “-webkit-”, whereas the Mozilla properties always use the prefix “-moz-”. If you’d like to see a full list of the Webkit css styles, you can go here.

For my example, I’ve created a link in an HTML file. The link is in a div called “myBtnBack”. The CSS for the div is as follows:

#myBtnBack {
width: 110px;
height: 20px;
background-color: #0000CC;
text-align: center;
padding: 10px 0 10px 0;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
}

There we have it. Rounded corners, as simple as one line of code. Wanna add a drop shadow? Again, only one line a code (well, two if you want to include both the Safari and Mozilla versions).

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.7);
-webkit-box-shadow: 1px 4px 6px rgba(0,0,0,0.5);

For the drop shadow (or box shadow, as it’s called), the first three values are x-offset, y-offset, and blur amount. The rgba tells it what color and opacity. And that’s it.

Now onto the fun stuff. Animations in CSS. No javascript. No Flash. This next trick is only available using Webkit properties, which means it’ll only work in Safari. So if you’re reading this in Firefox (or heaven forbid Explorer), and you’re wondering why it’s not animating, you’re going to have to check it out in Safari.

The code, as a whole, is as follows:

#myBtnBack {
width: 110px;
height: 20px;
background-color: #0000CC;
text-align: center;
padding: 10px 0 10px 0;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.7);
-webkit-box-shadow: 1px 4px 6px rgba(0,0,0,0.5);
text-shadow: 0 1px 1px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.5);

-webkit-animation-name: blueGlow;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes blueGlow{
from {
background-color: #0000CC;
-webkit-box-shadow: 0 0 9px #333;
}
50% {
background-color: #000055;
-webkit-box-shadow: 0 0 18px #333;
}
to {
background-color: #0000CC;
-webkit-box-shadow: 0 0 9px #333;
}
}

You have to use the “@-webkit-keyframes” property, followed by whatever name you want to give your animation. I named mine “blueGlow”. In the “from” state, write the properties at which you’d like your animation to start. In the “50%” state, write the properties you’d like to animate to. And in the “to” state, it’s best you restate whatever you put in the “from” state, because the animation will always return to the “from” state after playing, so if the “from” and “to” states aren’t the same, your animation will be choppy.

And there you have it, a glowing blue button with rounded corners and a drop shadow. It might not be the prettiest button ever, but it is the future. Mind you, all of these properties don’t have to be applied to something as simple as a button. Web designers are now free to throw rounded corners and drop shadows on anything. Hopefully that won’t be the case, but it’s certainly an option.