Category: Projects

Building a disc golf trophy

IMG_1253

As I previously mentioned, my buddies and I started a tradition of holding a little disc golf tournament on Independence Day. This, the second year, we decided it would be pretty cool to start the tradition of a traveling trophy. Something that could pass from winner to winner each year.

I got together with one of my handy friends, Lee, and set off to build an epic disc golf trophy. We both envisioned something huge. Something so large you could hold it over your head like the Stanley Cup. Something very disc golf, like a functional mini basket. But it needed to be big. Since the competition is always on the Fourth of July, we opted to make it extremely patriotic too. We were going for something that would make a statement. It needed to get the reaction of “you’re not putting that in the living room” from your wife. That’s what we were setting out to do and I’m pretty sure we succeeded. Here’s the process of building an epic disc golf trophy.

IMG_1261To start we were considering various materials. Since we wanted it to be durable and last for years, it had to be something sturdy. We wanted to be able to pick up the trophy in celebration. We ended up with a combination of wood and metal pipe.

We started with cutting out some circles. We figured one for the top and bottom of the basket would work well. We’d secure them together with a small metal pipe. We bought some chain, trimmed it to size and hooked it into the top of the basket with eye hooks and wire. The bottom of the chains were attached to a metal ring that fit around the pipe. The final piece of the basket, was some cut-to-size chicken wire fencing. We stapled it on after paint.

For the base pole, we used a larger pipe so the basket could stand on top of the trophy base. To make sure it was a really sturdy trophy, we attached the pipe all the way through the box used as the base.

As we started building, the trophy grew bigger than we even intended. It was getting big so instead of a couple, stepped boxes on the base we stuck to just one. The big box was meant to give a sturdy base and allow for a place to add each year’s winner on an engraved plate.

We got the trophy built, sanded down and then came time for paint. Like I mentioned, we thought tying in a patriotic theme would work well for an annual Fourth of July tournament. I thought a blue base, with stars and a striped red and white top would be perfect.

IMG_1427To start we sprayed the entire thing with primer and then a coat of white paint. After that dried, I placed on some star stickers I cut out on a friend’s Cricut. Then I painted over those stars with blue, let them dry overnight and then peeled of the stickers. This left perfectly sharp looking white stars. The stripes were a similar process, but with painters tape to create sharp lines. We left the silver of the metal pipes and chains for a little shimmer and contrast.

IMG_1439

The whole thing really came together and it looks amazing. I’m so happy I won it this year. I have it in my office, and now I can appreciate it each and every day. Did I mention it is a functional mini basket too?

Mini disc golf with trophy

What do you think? Have you ever tackled creating a trophy of your own?

A Responsive Retrofit: Frostic School of Art

Frostic School of Art HomepageA long, long time ago, in a gala… I mean when I was but a mere student of graphic design, I designed a really cool website for the Frostic School of Art along with fellow student, Max Millermaier. When it was time to build the site, I was hired on after graduation to do so. So in the summer of 2009, I was so psyched to launch, what at the time was, a bleading-edge, video-background website. Fast forward four years and the site was starting to feel sluggish, dated and disjointed.

A few months back I started thinking the Frostic School of Art’s site was a prime candidate for a makeover. I didn’t want to completely remake the site. Instead I decided it just needed to take advantage of the latest trends and technology. I dropped the dreaded use of Flash for videos and replaced them with HTML5 video, thanks to BigVideo.js.

iPhone screenshot of Frostic School of Art websiteThe next step was to make it mobile friendly. I’m a huge fan of responsive websites and have dabbled with them for a while now. I recently did a project that used the Skeleton boilerplate and found it to be very easy to use and produce great results with. I set off to re-write the whole site on top of the Skeleton. It wasn’t a small task, but in doing so I removed a lot of messy and redundant code. Like I said, the original site was made in 2009. A lot has changed in the Web world, and I’ve learned a lot too. Now the site looks awesome whether you’re on a desktop, a smartphone or a tablet.

Another goal I wanted to complete during this process was clean up. Over the years, files, directories and content became a mess. By starting from scratch, I was able to cleanup a lot of the mess. Now the end user should have an easier time getting around the site and finding what they’re looking for. There’s still some work to be done, but it’s already improved leaps and bounds.

Overall, I’m quite pleased with this retrofit. It’s not always an easy task to take an existing site and slap on a responsive framework. I suppose in a way, I didn’t really do that. I more or less rewrote the site, staying within the design guidelines of the original, but replacing almost all of the underpinnings. It was interesting to revisit a design from four years ago, and I’m happy with the results. What do you think?

Screen Shot 2013-05-15 at 2.48.09 PM

The Red Wings go Duck Hunting

The Detroit Red Wings have extended their stellar playoff record to 22 consecutive seasons and I decided that was worth celebrating. Over the weekend I whipped up a little image that played on the fact the Wings will be facing the Ducks. I took a screen from the classic game “Duck Hunt” and dressed the dog up in Red Wings gear. It was great to create something just for fun. It seems too often I get caught up in work or freelance projects and forget to just make things for myself. Good luck, Red Wings!

red-wings-duck-hunt

Bonus: Can you spot the Easter egg?

BNs for Bruce

Jones-BN-Swatch-FinalOne of my graphic design professors is retiring. After 39 years (not a shabby run), Bruce Naftel is “Beginning New.” Last week we celebrated with a “Big Night” retirement party. Obviously, the theme was Bruce’s initials B and N. Bruce’s former students (including myself), some colleagues and friends all came together to create a special project for Bruce. We each created a composition using the letters B and N. Here a few I came up with.

My paint composition has a particularly special meaning. My first class with Bruce during my very first semester in the graphic design program was “Color for Graphic Design.” During the class we studied color theory. To do so, we often painted little swatches by hand. This particular composition was an ode to those little swatches we painstakingly painted. My version for this project was much less than perfect like we were expected to make back in school. I figured it’d read better as “paint” this way. I’m sure Bruce would have NEVER accepted something like that in real life, but that kind of made it more fun to make.

bns-combined

The last two were just fun explorations. They’re reminiscent of my early typography classes when we’d crop in on type. There’s no deep meaning to them but they were still fun to make.

It was very nice to be a part of Bruce’s retirement. He was a huge part of my design education, and it was great working on one last project for him. It was even better not getting graded this time. 😛

Project: Partners in Dance

Screenshot of WMU Partners in Dance website.

I  recently launched a website project at work for Partners in Dance, which is a community support group for Western Michigan University’s Department of Dance. It was a fun project because there wasn’t a ton of content and I could have a little fun with the design.

I opted to keep it very clean and simple with a big, bold area for photos. The dance department provided me with some great shots from previous performances. I noticed most of the pictures had a natural “fade to black” quality to them. I capitalized on this by creating a black band at the top of the page. I then set it to randomly choose from a variety of images that all make it seem like the photo exists across the entire top of the page.

The “Partners in Dance” logotype at the top carries over from a brochure they had made previously. The rest of the type is a Google web font called Lato. I was trying to find a nice sans-serif with a good mix of weights and Lato seemed to fit the bill.

Below are a few more screenshots, but be sure to check out and explore the live site. Feedback? Questions? Leave them in the comments.

Screenshot of WMU Partners in Dance website.

Screenshot of WMU Partners in Dance website.

Screenshot of WMU Partners in Dance website.

Project: University Theatre 2012 Season Site

At work I’m often playing within strict guidelines. The university is moving everyone into the same look and feel on the web as part of their massive branding effort. It makes sense but it can be dull when you’re working on it day after day. Sometimes it feels like I’m just going through the motions.

University Theatre Season website screenshot

That’s why I was so excited to have a project that breaks the mold. The University Theatre at Western Michigan University was interested in a website to feature their upcoming shows for the new season. Luckily they fall under one of the areas I work for so I was happy to oblige. The overall design of the posters and other materials were done by interns in the Design Center (oh the memories). They were a great jumping off point for a new website.

I tried to keep the overall “awaken” theme the interns had come up with in their work but translate it to the web. I filled the site with the pertinent information about each show and how to get tickets. It is an extremely simple site and there were still some stiff requirements but compared to the templates I usually work in all day, it was creative field day. It’s nice to break away from the constraints every once in a while and think creatively. Make sure you explore the University Theatre 2012 Season Site and let me know what you think.

Failed or Stalled Projects

At some point in your life you’re going to have a project that just doesn’t go anywhere. It’s as true in life (a bookshelf that’s half built) as it is in the design world (that sweet iPad app that ran out of budget). I’ve had my fair share of projects that fell into oblivion. Most of the time it just plain sucks. For reasons often outside of your control, a project you’ve put hours of work into will never see the light of day.

How do you cope with this? It can be extremely frustrating and somewhat confusing. What do you tell your friends and family (whom you’ve inevitably been talking up this project to for months)? Can it still go in your portfolio?

For me the worst part is feeling like you wasted your time. You can spend months on something and have nothing to show for it. In your next job interview you’ll explain what you’ve been working on for the past few months and when they ask to see it you’ll have that lame answer “well it didn’t get made.”

Hours iPhone mockupsA recent example for me was called Hours. It was an iPhone app I had designed screens for. The project was going to serve up business hours on top of the foursquare database. We were nearing launch when foursquare announced they were adding hours into their main database. The months of time and effort we had invested was all for naught. Foursquare had beaten us to the punch. Our spirits were broken and even though our standalone app could still be useful to non-foursquare users, it was never finished.

The reality is it happens. Much more often than anyone would like to admit. I think the best thing to do is try to move on. I hate that advice; it sound so simple but it’s very difficult. In the case of a designer, you are left with un-built screen designs or the artwork of un-printed posters. You’ve done the work, you’ve taken the time to think through the project but it was never put into production. Moving on for a designer could simply be taking the skills and experience you’ve gained and applying them to your next project.

I think it’s still appropriate to put in your portfolio. I have a couple of app projects that stalled out for one reason or another (like Hours) but I plan to put them into my portfolio. The screens were thought out and designed. The mockups were completed. My side of the project was finished, even if the other side wasn’t. Why shouldn’t I have at least something to show for it? Sure it might not be as valuable as a full-fledged running app but until I have those completed projects I want and need something in my portfolio demonstrating my interest and abilities in the app arena. Sometimes just having a few mock ups can be enough to demonstrate your skill and thought processes. In the end that’s what a portfolio is all about anyway, right?

Disc Golf Course Review Quick Search [Updated]

I’m constantly looking for new disc golf courses to play. That means I’m visiting Disc Golf Course Review all the time. It’s a great site with a wealth of information. The only problem I run into is that it’s not a very mobile friendly site. This means when I’m on the go and want to search for a course, it’s a very clunky process. I decided there was an easier way and set off to create it.

I’m happy to introduce my one-page, mobile-friendly, mini-site for searching DG Course Review. It’s nothing fancy, in fact it only does one thing, but it does that well. You enter a course name or zip (or both) and press the button to search. You’ll be redirected to the DG Course Review site results page. It only took a few lines of javascript to capture the user input and then build out the URL.

Screen shot of DG Course Review Quick Search in Mobile Safari

I really like these simple projects. They’re very gratifying to be able to fill a need with such an easy solution. I think the whole site took me about 15 minutes to complete and I’m sure I’ll use it over and over again. I welcome you to give it a shot too. Eventually I’ll add in other search options offered on DG Course Review but the two there now are what I use most.

**Update July 18, 2012**
Turns out there is a mobile version of DG Course Review. I stumbled upon it in the forums. You have to navigate specifically to it (there’s no device/resolution detection to redirect you) but it is pretty handy.