Monday, November 4, 2013

Adventures in Responsive Design - with a minor in bootstrap

Twitter's bootstrap launch quite awhile back until a couple months back I hadn't had a need for it so I never bothered with it. My current position as a graphic designer/web designer at Handstands in Sandy Utah, manufactures of Refresh Your Car, Driven by Refresh, and Bahama & Co. automotive air fresheners, I was tasked with redesigning all four of our websites. The task was to bring them from their current 1999 design wrapped around 2002 code and build something great; simple right?!

In my last job I had worked with a team of developers, my job being Senior U/I designer. One of the developers kept pushing for responsive technology to be used and was a fan of Twitter's Bootstrap, ultimate he lost to decision makers that had no business making the decision and it was built around something else. However his enthusiasm stuck with me and so I proposed Bootstrap for my redesign. 

The sites are only hours now away from launch, ahead of the company going to the AAPEX tradeshow in Las Vegas for the 2013 show. As the deadline approach and the sites are now in the hands of other employees for some quality checking, I thought I would take a minute and post a short note. 

The verdict on Bootstrap: its a win! As a designer who codes and not a coder who designs, I would give Bootstrap a resounding thumbs up for being designer friendly. Obviously you need to be able to code a basic site from the ground up rather than drag and drop your elements like some services out there allow for. But having the media queries built in, all the classes for the different sizes all defined, a detailed outline of how stuff stacks and flows, really went a long way to going from dipping your toe in the pond to just saying 'screw it!' and plunging into the water head first. As I moved through the sites I became more comfortable and found new and better ways to implement the classes, which leads me to the only real problem I faced.

The only issue I had was that by the time I had completed the first two of the four sites using Bootstrap V2, V3 had been released which while similar, had changed up several things. The largest thing I had to incorporate into my design and thinking was the 'mobile first' aspect. With this way of thinking your site is actually built for col_xs first rather than for desktop viewing and then is essentially scaled up rather than down. More clearly stated, the 'xs' state of the site is the base size. I won't lie and say I built my sites in the best possible way and took full advantage of this 'mobile first' approach but I did learn a lot over the last two sites that I can use in the future. (Just as a side note, no I probably won't go back and convert the first to sites to V3, just cuz I don't get paid enough for that!)

I took this opportunity to also try some new design paths and explored some avenues in the same township as Microsoft's Metro design aesthetic. I love Metro and how well it works so this was great opportunity try my hand at it as well.

If you are interested you can view the sites I've built around Bootstrap at the following url's starting on November 5th, 2013.

Handstands Corporate Site:

Driven by Refresh:

Bahama & Co.:

-Zombie Jake

Here are three screen captures as the main site, Refresh Your Car, responds to browser window size. (using version 2 of Bootstrap)
Full Screen View

Medium Screen View

Small Screen View

Friday, December 14, 2012

Terribly sad day. Tears as all of those little ones leave this world.

Monday, October 29, 2012

Two Big Updates

Update 1 - 

Working with my close friend DJ Osborne of BlackLabel Development, who I did the branding for, we are nearly completion of a huge iOS app, retina iPad specially, for Miller Motorsports Park in Tooele, Ut. The app will debut tomorrow, 10/30/12, in Las Vegas, Nevada at the 2012 SEMA event. The 2012 SEMA event, SEMA Show Website, is described as: 

          "The SEMA Show is the premier automotive specialty products trade event in the world. It draws the industry’s brightest minds and hottest products to one place, the Las Vegas Convention Center. In addition, the SEMA Show provides attendees with educational seminars, product demonstrations, special events, networking opportunities and more."

With last year's event drawing more than 60,000 domestic and international buyers the opportunity is one I took very seriously and work feverishly to complete on time but with close attention to detail.

Here is a sample of the the default screen, seen after the app loads on your device:

A subpage for the tracks unique Boss Mustang program the Boss Track Attack for Boss 302 Owners.

An additional subage for Miller's Raptor SVT Assault, a one of a kind program in a 900+ acre off road racing park.

The app represents an entirely new look for Miller Motorsports Park as they diverge into a more professional look representative of their rankings among the world's premier motorsports facilities.

The app was developed under the Black Label Development banner, or

Update #2 -  has been up and running for a few months now with growing success. In the short time I have moved production from Printfection to Spreadshirt and have already been able to cut prices to a more reasonable price for tshirts. Lunacium Speed is represented on facebook as well as twitter at #lunacium and of course the retail site.

Additionally Lunacium Speed is the premier sponsor of the number #52 car, twitter #52OsborneRacing, run by Osborne Motorsports.

Both Osborne Motorsports and Lunacium Speed have teamed up to give away two (2) Traxxas gas RC cars. Follow @lunacium and @52OsborneRacing on twitter and share away to enter. When the accounts hit 1,000 followers each both RC cars will be given away with graphics to match the car pictured above.

Th th th thats all Folks!


Friday, July 20, 2012

Lunacium Speed: Gear For Gearheads

The clothing line is closer to reality in spite of major set backs in finances and sourcing. To help things move forward I will be using Printfection initially and then hopefully move to production and distribution via better priced source. Printfection's prices are higher than I would want the shirts to sell for but it lets me maintain my commitment to quality and durable t shirt blanks. Gildan Ultra and American Apparel shirt blanks with direct to garment printing along with access to their entire color pallet. This will help me maintain the integrity of the Lunacium brand, collect some market research (ie what shirt designs sell and on what colors and what blanks) and get the clothing out there sooner.

The account is setup as is the store and the products are entered but the store front hasn't been styled yet. I'm hoping to get to that this weekend through next week. After that I will start pushing the brand out via online marketing options, car show/event attendance, and of course word of mouth.


Thursday, June 7, 2012


So apparently the testing I did on the new gallery didn't actually survive to the live site. A friend pointed out some issues he saw in FireFox and I hadn't even bothered to test in IE, I knew it was probably broken to start with!

So, I have just spent several hours going through and figuring out the problem and it all came down to a single line of code. The reason why the body {background} would break the whole gallery is beyond me but I ended up having to target FireFox and IE uniquely with a background-color while Chrome can actually display the gallery the way I intended it. Whew.

Anyway, the gallery skin is where the changes reside so in the future, as long as I keep the skin files intact, I can skip all this hoopla and just make updates!


PS: Please let me know if anyone see anything broken in any of the main three browsers, thanks!

been to long...

Ok, so the first big news is some MASSIVE updates to the portfolio page. Lots of new content there including the shirts for the sub brand Lunacium Speed that I've been working on. Some new stuff and some old stuff and some big stuff like car wraps too. Take a look.

On the Lunacium Speed front, I've had a little set back on the financial side and I won't make my launch date of the 4th of July weekend but I hope to still get the line off the ground mid summer. Watch for updates.


Thursday, February 23, 2012

Shirts are out for bidding!

Lunacium: Speed  is one step closer to reality! I've contacted some companies to get bids on my shirt design to officially launch my line of shirts. Here is a list of the shirts that will be part of my initial launch, six designs in all.

Design 1 'Wire Wings'
    Placement: Back (with a 4" square logo on the front, centered on the chest.)

Design 2 - 'Motor Running'
    Placement: Front

Design 3 - 'Twins, Basil'
    Placement: Front

Design 4 - 'BJ'
    Placement: Front

Design 5 - 'Cardiac'
    Placement Front

Design 6 - 'Wrench & Repeat'
    Placement: Front

The shirts will be available as black printing on white shirts and possibly with red and blue shirts being part of the initial launch as well depending on pricing. All the designs are intended to include printed care tags on the inside back of the collar and sewn on hem tags on the bottom hem line.


Tuesday, January 31, 2012

Time for a new shirt design, and here it is:

Tuesday, December 6, 2011

I have been working with RawData's,, CTO on the visuals for the next generation of our MoARC, Mobile Audio Recognition Client, application for the Android mobile OS while simultaneously working on the visuals for our survey app, I'm calling it QQs for Quick Question Surveys. Both apps will have nearly the same splash screen with only the app name swapped out. Here are my initial mockups for both.

Again, these are nothing more than the simple splash screens shown only while the program loads and both will go to unique landing pages that help the users into the apps and its' features. Those screens are forth coming.

Also, in VERY big news... at least for me... I am designing a promotional iOS app for the NBA team the Utah Jazz! My good friend will be doing the coding and development based on my designs! As I make progress on this I will be posting mockups here as well.


Monday, October 24, 2011

Some new shirt designs:

Titled 'Wire Wings'

Titled 'Skullburator'

Titled 'Oil Bag'

Thursday, October 20, 2011


Did up another tshirt design recently. While browsing the web one day I found a shirt that had a new style that I liked a lot so I wanted to try it and this is what I came up with.

What do you think? Would you wear it??


Wednesday, September 21, 2011

Wire Wings t-shirt teaser

I've been working on a tshirt design for a long time and I've finally made the jump to starting the digital work on it. Here is a teaser of the base work that has been done so far. I'm calling it the 'Wire Wings' for now.

Hope you like it! More to come on this for sure.


Thursday, September 15, 2011

RawData Web Project

As promised, though a couple days slow, here is a link to the RawData website which went live earlier this week.

There are some holes in the site as far as database integration but that is not what I was responsible for. There is also some bigger functionality stuff that will be revised in the near future but for now here it is!


(Here is a screen shot of the home page.)

Tuesday, September 6, 2011

Quick update, I've been cramming on the previously posted RawData website. The site design was completed awhile back and then we started development but had to fire the development company when they didn't actually do anything do anything after multiple weeks. Now I'm taking a more active role by doing the front end coding as well as the original design. When the site goes live look for a link.