From projects on the Boston Tea Party in 5th grade, to attempting to dupe my friends into thinking I found a real pirate map, when I was a youngin’ I was always in need of a way to make stuff look old.  My parents were smart to keep the matches hidden, and I was left with dabbing tea bags on crumpled and ripped up paper.  It was always a let down!  In the end it looked like I had left my notebook out in the rain, or at best, the cat had peed on it.

Now that I’m older and have access to things like matches and coffee grinds, it’s easy to make stuff look old, and you can too!

Supplies:
- paper (preferably with something cool on it, find some good old-looking fonts at dafont.com and get to work!)
- coffee grinds
- matches
- water
- shallow baking sheet (but make sure it has at least a 1/2″ edge
- oven

How-to:

1. Take paper and crumple it up.  Tear it if you want to, but I prefer not to put any intentional tears into it.  If you are going to burn some of the edges, this is a good time to do it.  You can also do it at the very end.  If you do light the paper on fire it’s important that you barely let the flame catch the edge of the paper, and then blow it out right away.  This is best done over a metal sink, with a ready supply of water nearby.  If you’re well practiced, you can also hold the flame close enough to the paper so it darkens, but does not actually light (I like to think of this as a very authentic effect, since real-deal pirate maps were quite obviously read at night or in a cave, by candle- or torchlight.)

2. Lay it on the baking sheet.

3.  Dump a serious amount of coffee grinds on top.  Put them all over the place.  Huge clumps add more color later.  Today I got lucky and had fresh coffee grinds, which worked especially well.  I just dumped them on and added enough water to cover the paper.  In the past, I’ve just made a really strong cup of coffee (so strong you wouldn’t even think to drink it).  Pour that on top and then you can also add the grinds too.

Today I was making a gift certificate for an event Powder7.com is sponsoring for a ski area in Vermont.

4.  Let it soak.  Go do something for a few hours.  The longer you can leave it, the better.  Today I let mine sit for about 5 hours.

You can see all of the grinds and just enough water to cover the paper. The more water you use, the more diluted the grinds will get, so you want to use the minimum.

5.  Carefully lift paper off of baking sheet and drain water.  Wipe baking sheet clean and dry, and place paper back on it.  It’ll have some stubborn grinds sitting on it, and that’s perfect.

6.  Heat oven to 200 degrees.  Once heated, slide baking sheet into oven.

7.  ”Bake” for 8-15 minutes.  Check frequently, I can’t stress that enough.

8.  It’ll start to curl up around the corners, which means it’s drying out.  It should feel pretty dry when it comes out.

Fresh out of the oven!

To top-off the presentation, I’ll either tri-fold it or roll it up, seal it with wax, and secure with a knot of twine.

I added a few more burnt edges, and called it a day.

One of the coolest things about our company is that we do almost everything in-house.  It’s pretty rare to find a small business with a decent amount of sales that has built their own site from scratch, without the aid of any templates or content management systems (Joomla, ZenCart, OSCommerce, etc.).  It’s like making brownies with Duncan Hines mix — it gets the job done, but can you really be proud of it since the brunt of the work isn’t your own?

Jordan built the first MileHighAthletic.com using some very basic HTML.  It was just for informative purposes, you couldn’t buy anything on the site.  Over the summer of 2007 he learned PHP and the site took a huge leap: customers could buy skis directly from the site and skip eBay altogether.

MileHighAthletic.com circa December 2007. Table-based layout, no CSS.

Aesthetically the site was still primitive, and so in January 2008 I started learning XHTML and CSS, and with our forces combined we churned out a pretty decent looking site.

An improved, CSS-based site. Circa February 2008.

Since then, Jordan’s PHP skills and my HTML/CSS skills have far improved.  Jordan’s PHP has allowed us to have a one-of-a-kind CMS designed specifically for  selling used skis.  From a design and user interface perspective, we knew what worked with the old site and where we needed to make improvements.  Thanks to Google Analytics, we know that a lot of our customers use our “Ski Finder” feature, a wizard that narrows down products we have available to what they are looking for, be it a price range, ski length, ski type, etc.  The overall navigation worked well too, the menu was easy to find and since it was chunked into smaller pieces, easy to find what you’re looking for.

One of the biggest problems with the old site was the landing page, or the page you first arrive on when you visit Powder7.com.  Instead of displaying our products (what we sell, what we do, a very important message to get across to customers, especially online where attention spans are very short), I had rotating graphics of some skis we sell.  The graphics were pretty dense, and though I meant well, there was no way I could keep updating them to coincide with what we have in stock at that exact moment.  I grabbed photos of of some of our best-selling skis and created a visual spread that placed each ski within a classification.  Jordan wrote some code that randomly selects three skis from each category and displays them under the category.

One of the categories, displaying our most popular women's ski: the K2 Burnin Luv.

The new landing page.

We also updated the item display page, making it easier to find the ski’s specs and replacing two medium sized photos with one big photo of the tops of the skis and a smaller one of the bases.  Clicking on the photos takes you to a giant-sized photo of the tops and bases that you can zoom in on.

Item display page - notice the navigation is consistent throughout the site.

Finally, since a site that is too bland can look a bit unwelcoming, I perked it up with a background:

Might be a bit hard to tell in this small image, but the background is our logo.

Next up: Part III - Our First Ad Campaign

It’s pretty amazing where you can start at the beginning of the creative process and where you can end up.  I’ve been working on our new website’s image and branding since February and it’s fun to look back and see what I originally planned for it.  Since I haven’t posted about anything work-related in a long time I figured it would be fun to take you through the steps of launching Powder7.com, not only the website, but all of the branding and imagery that goes into it.  Though this blog doesn’t reflect it often enough, there’s way more to me than running/biking/swimming/talking about my dog.

So, here is installment one in a series of building the brand.  Enjoy!

Before you can have a logo, you have to have a brand.  Jordan and I spent many winter weekends cozied up in the Windy Saddle, our brains brewing with all sorts of ideas.  I filled pages and pages of my notebook with every word that reminded me of skiing, no matter how obscure.

My notebook, filled with all things skiing related as well as winter animals and snowy adjectives.

Eventually we settled on Powder7.com, and secured the domain name.  Then I moved forward with creating a logo.  I came up with some stuff on my own before consulting with some trusty resources.  I wanted to play off the symmetry of the ‘P’ and ‘7′ and also build up the snow theme.

Some very random 'doodles' were followed by some more focus with the P7 outlines and snowflakes, both of which I was very keen on.

I emailed my favorite rough sketches to my brother, Tim, and sister-in-law, India.  India responded with a cell phone photo of a doodle on a napkin, where all brilliant business ideas are born!

India's sketch.

Another variation.

Immediately I knew we had our logo.  Turning the ‘7′ into the mountain - brilliant!  Tim didn’t even get a chance to send his submission in…next time!

I got to work on sprucing up India’s idea and turning it into vector artwork.

One of my first digital versions of the final logo.

At first I used gradients for the mountains, fading to a whitish, snowy peak.  Then I thought the better of it, realizing this would be a big pain to always maintain this exact gradient and really limit reproducing it in other colors.  So I opted for a solid color and changed up the font and word placement.  I also put a cross in the ‘7′ that India initially had.  It adds a little more dimension to the ‘mountain’ and makes it more recognizable as a 7.

The slightly edgier and cleaner final product.

Next up: Part II - Building the Website

If you only do one race this summer, make it this one.

The Great Colorado Triathlon will be held for the first time in Evergreen, Colorado on August 16th.  The Olympic distance race will be a unique event with a swim in Evergreen Town Lake, a hilly two-loop bike leg on surrounding roads, and a flat and fast run.  It’s an ideal race for Front Rangers/Denverites looking to get in a late summer race and make the most of living near the foothills of the Rockies.  Check it out, it will be a good time.

Link: greatcoloradotri.riptidemultisports.com

Last night I picked up a carton of Tropicana OJ from Albertson’s.  Having seen the new packaging before and knowing it hides important information such as, lots of pulp, no pulp, low acid, and low sugar, I know I have to pay extra attention to my product selection.  Ever the super-picky consumer I only drink no pulp.  I looked over the selection, grabbed one, and off I went.

Once home I poured myself a glass of the vitamin-C rich goodness.  No pulp, but something wasn’t quite right.  Looking at the carton again, the fine print glared at me: Low acid.  Noooo!  How did this happen?

The newly designed Tropicana packaging: front view.

No pulp is easy enough to see, but the low acid sneaks in under the radar. Notice they also ditched the oh-so-drinkable orange with the red and white straw stuck into it, the symbol for the most delicious OJ ever for as far back as I can remember.

New Tropican design: top view.

The top of the container that is easily viewable from eye-level (important for high shelves or shorter people) makes it seem like the contents is just free of pulp. You need a bird’s eye view of the container to see that it’s low acid. The new color-coding they put in place is therefore useless, since it is in an inconspicuous place on the carton and is so small a potential buyer can’t see it from an arm’s length away.

The easily recognizable old Tropicana packaging.

The old design was easily recognizable.  Very clearly Tropicana, with its original typography that could be spotted from down the grocery aisle.  It’s obvious this package contains no pulp, and because they don’t try to hide other information elsewhere, I don’t have to hunt around the fine print checking to ensure it doesn’t say low acid as well.

Though I am mostly concerned with conveying information in a logical, appealing way online, this example shows just how annoying it can be to not provide customers with what they desire, and what they expect.  Translated to web design this is often what makes the difference between a great site and a poor one.  As the world becomes more reliant on the internet, professionally designed websites are no longer an option, but a standard.

Today I’ve been trying out several online wireframe/user experience flow tools.  Normally, I would just use Fireworks but thought it would be fun to try something different.  I’ve briefly experimented with Balsamiq Mock-ups, RapidRabb.it, and Gliffy.  Gliffy stands out far from the others, though I need to add an asterisk to my reviews and say that my “test” was based largely on intuitive usability.

So far my design mediums of choice are CSS + XHTML, but I’m planning on launching a Flash component of a race website in coming months.  Ideally, the Flash site will contain pro athlete interviews, race course footage, and additional multimedia to get potential entrants excited about the race.  This is a [very incredibly raw] mock-up I created using Gliffy.

A really raw mock-up of the Flash site that is to come.

It’s not much to look at, but serves its purpose for the planning stages of the site.  For example, if I am debating between two different page layouts, I can create two mock-ups and then survey potential users which one they prefer.

Same content, but with a different layout.

Gliffy has a library full of useful icons and site elements that you can drag and drop onto your blank page. There’s an optional grid view that makes aligning elements precisely a breeze (something the other online tools lacked).  Also helping to win over my heart is the ability to upload images for use in the mock-up, such as the header for The Great Colorado Triathlon that I had already created.

Hats off to you, Gliffy.  After just a 20 minute foray I’m already hooked.

More in-depth reviews to follow.

Yesterday morning the Table Mountain Triathlon website launched.  Table Mountain Triathlon (herein referred to as TMT) is another great event put on by Sean Wendt and Riptide Multisports.  It’s a super-sprint event, with a 500yd pool swim, 12.5mi bike, and 5k run.  …I know a lot of people who would be happy about such a short swim!  It’s based out of the Duncan YMCA in Arvada, Colorado with the bike and run portions taking place on surrounding neighborhood roads.  It’s a great race for beginners and a nice fitness check for veterans.

The site design is similar to the other Riptide sites, but I added bullet-proof tabbed navigation to this one to create a better user experience.  It’s always nice to know where you are on a website, and the tabs provide a nice sense of direction.  The best part?  No Javascript, no Spry, just standard HTML + CSS.  What does that mean for the user?  A super-light design that loads faster and is highly compatible across all browser types.

Table Mountain Triathlon site screenshot

I went with an old-school recreation softball team look for the site theme, for no other reason than it will look great on a race shirt (and wait until you see the logo I’ve been dreaming up).  In my opinion, race shirts are the single best marketing tool triathlons have: make a shirt look cool and you ensure that the athlete wears it around and it doesn’t get tossed in that wretched old rag bag.  It might just be me, but if I see someone wearing a sweet race shirt I instantly become interested in the race; my logic being if they make a cool shirt, they probably put on a pretty cool event as well.

Check it out! tablemountaintri.riptidemultisports.com

Introducing my first race website!  The Littlefoot Triathlon is a sprint distance event (750m swim, 15mi bike, 5k run) held in Bear Creek Lake Park by Sean Wendt and Riptide Multisports.  The 2009 race will be the third running of the event.  Last year I had the opportunity to compete in the event, and despite frigid water temps (~55F), I can’t say enough good things about the race. Overall a really well organized event with a delicious hot breakfast afterward.  What more could you want?

Designing the site I had two goals:

1. Strong branding that easily links Littlefoot and Riptide Multisports.  I wanted the Littlefoot site to have the same basic layout as the main Riptide site.  Littlefoot also needed strong branding for the race specifically.  While I am still developing the logo, it was important to design the site with a unique and strong feel,  provided with the black and lime green color scheme coupled with a rugid, but modern look.

2.  Ease of use.  Triathletes range in age from 14-80+ (seriously).  The site has to look cool, but also be highly functional.  Nothing is more frustrating than hunting around forever trying to find how much the race costs or the link to register.  All information can be accessed within 2 clicks from the Littlefoot home page.  This is very key when designing in general, but even more so when you must appeal to a variety of ages and demographics.

Coming soon for the Littlefoot Triathlon:

• race logo
• race shirts

Coming soon for other race sites:

• Table Mountain Triathlon
• The Great Colorado Triathlon

Please visit (better yet, register for it!) the Littlefoot Triathlon site and let me know what you think.

http://littlefoottri.riptidemultisports.com

After working on my own site for over five months, it’s finally presentable to the outside world.  Since August I’ve been fortunate to have my plate full of other sites to design, so this one has taken a backseat.

So here we go!  This blog will be more work-focused than my old one, but of course with the occasional triathlon and skiing posts mixed in.

Please share your comments!

Enjoy =)