May 25, 2011

Going Native with Responsive Web Design

Responsive Design

To see the live site in action, click here.

As a web designer, I have always been frustrated with the lack of control I have over how the user views my design in a live environment. Between inconsistent window sizes, x-browser conundrums, and a limiting screen-font selection, my original Photoshop output is rarely seen in all it’s glory by the end-user. Add-in small screened mobile devices and the valley grows deeper.

However, as more browsers adopt web-standards and web-type gets more sophisticated, we’re starting to see more flexibility and close-in-on the divide. By using media queries to serve stylesheets and layouts based on window and device size we can narrow the gap even further with a responsive design. While not totally future-proof or without limitations, fluid layouts are a best practice and a great way to prepare for the future of web design.

I’ll be writing about my process in more detail in the days to come, but for now head over to the site and view my first foray into responsive design in action.


March 29, 2011

Wasatch Area Freeride Trails Association

wasatch area freeride trails association

Spring has arrived… which means bike season is quickly approaching. Soon we’ll be trading our ‘world’s greatest snow’ for redrock and hero dirt. With such amazing access to seemingly endless singletrack, it’s easy to take for granted the countless hours of blood, sweat, and tears that goes into the trails we ride.

Which is why I am thrilled to be working with the Wasatch Area Freeride Trails Association (WAFTA). WAFTA’s mission is to progress the freeride and downhill mountain bike scene throughout Utah by working with land managers and owners to build sustainable downhill trails. While there’s still a lot of work to do, WAFTA has definitely established a freeride presence in Utah over the past few years, and are responsible for many great trails including the Road to Arcylon trail which will officially open this spring.

We’re in the process of building a comprehensive site, but until then head over to wafta.com and subscribe to receive all the latest WAFTA related news & updates.


February 17, 2011

Snooki Illustration

Snooki Illustration

Recently while reading Kurt Vonnegut’s Welcome To the Monkey House, I came across a quote from the late satirist HL Mencken, which resonated with me on a number of levels. I knew I wanted to make something with the quote, and had originally intended on just drawing up some fancy lettering.

“Nobody ever went broke underestimating the intelligence of the American public.”

HL Mencken

Then a few days later while watching old episodes of Arrested Development (perhaps one of the most brilliant television shows ever, only to be canceled midway during it’s third season) it occurred to me that Jersey Shore, which just signed on for a 4th season, will have had a more successful run than Arrested Development. As a creative thinker, this pandering to the lowest common denominator is the type of thing that makes my blood boil. So I ditched my previous idea and in turn drew myself a Snooki.


February 2, 2011

Holy Water Buffalo Lettering Process

Hand-Lettered Holy Water Buffalo T

Holy Water Buffalo hails from Heber, UT, and is deeply rooted in the heavy, blues-soaked riffs reminiscent of bands like Jeff Beck Group, Black Sabbath, & Blue Cheer. I first caught a glimpse of them performing at the Corner Store in Park City, and have had my eyes and ears on them ever since. So I thought I’d put some letters to good use, and draw up a t-shirt for the band.

Step 1: I knew I wanted to reference Holy Water Buffalo’s psychedelic tendencies as well as create something that looked hard and heavy; maybe explore some black-letter elements, but a bit more free-formed. I broke open a crisp new Field Notes and got to sketching. Once I was satisfied with my pencil sketch (Figure 1), I went ahead and outlined it in ink, erased all the stray pencil marks, and scanned it in at 300dpi.

(Figure 2).

Holy Water Buffalo Sketch

Step 2: Now that I have the scanned file on my computer, I open it up in photoshop and adjust levels, brightness, and contrast, to where I only have solid blacks and whites. I then knock out all the white leaving me with the just the darkened outline, and apply a light blue color overlay (Figure 3). This allows me to print it and touch up areas by hand that still need some work.

Holy Water Buffalo Ink

Step 3: After inking up my printout (Figure 4), I rescan and open up again in photoshop repeating Step 2 until I am satisfied. The latest version then gets opened with illustrator and I either trace by hand, or use live trace to create a vector of the image. Occasionally I can get good results by tweaking the Live Trace Options, but more often than not I end up tracing manually.

Tools Used: Field Notes, .05 Mechanical Pencil, Staedtler Fineliner Pens, Rubber Eraser, Scanner/Printer, Macbook Pro, Photoshop, Illustrator, & Brain


January 5, 2011

Creating Current Menu States in WordPress

Rule #1 for creating a good user experience is to make your product as easy to use as possible. Whether it’s a web site, or a vacuum cleaner, if it’s difficult to use it’s a shitty product. In the web world, user experience often get’s overlooked for fancy graphics and unnecessary animation (the old myspace comes to mind). The good news is as more browsers start to adopt web standards it’s becoming easier for designers to make sites that are both good looking and usable.

Good design equals better functioning — that if the true path of good design is followed scrupulously, then not only does the thing look very cool, but it is also a better object all around.

David Byrne from The Bicycle Diaries

One of the most surefire ways designers can enhance a user’s experience on the web is to provide clear navigation for the reader; the user should always know where they are on the site. One of the more subtle yet effective ways of achieving this is to give the current page menu item a different state from the rest of the menu items.

Easy enough in theory, however implementing requires a bit more trickery than normal CSS styling. I have used WordPress to build my site so this tutorial will cover how to implement current menu states using CSS & a little PHP with WordPress, however there are also other methods that utilize JavaScript and straight CSS that you can read about here and here if you like.

So getting started, your basic navigation probably looks something like this:

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

You should be able to find where your menu is being called from in the header.php file. Now with a little PHP magic we can determine what page the user is on and place “current” in the right spot. Here’s how the first <li> element from above should look after replacing the code:

<li<?php  if (is_home()) {  echo " id=\"current\""; } ?>><a href="#">Home</a></li>

Assuming everything goes as planned, WordPress should generate some HTML that looks like this for the current page item:

<li id="current"><a href="#">Home</a></li>

You’ll now need to go through for each menu item and edit the code appropriately. Our navigation structure should now look something like this:

<ul id="menu">

<!-- To show "current" on the home page --> <li<?php if (is_home()) { echo " id=\"current\""; } ?>><a href="#">Home</a></li>

<!-- To show "current" on the About Page --> <li<?php if (is_page('About')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">About</a> </li>

<!-- To show "current" on the Blog Page --> <li<?php if (is_page('Blog')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">Blog</a> </li>

<!-- To show "current" on the Contact Page --> <li<?php if (is_page('Contact')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">Contact</a> </li> </ul>

Now throw a little CSS in your stylesheet and you’re in business:

#current { background-color: red; }

For more information on defining current menu states visit the WordPress Codex.


January 3, 2011

Life in Perpetual Beta

Perhaps one of the most notable differences between print and interactive design is the absence of a clearly-defined stopping point. In print, the work is finished when it goes to press or is in circulation. However, with the organic nature of the web we are forever revisiting and testing better solutions.

To show the world a product that may not be perfect in our eyes can be a very intimidating proposition. Many web designers don’t have websites because they are in a constant state of re-design.

With that being said, I am releasing Alex Deckard 3.0 to the world. While unfinished, I feel that Phase 1 is fit for public consumption. So don’t be surprised if you encounter an occasional bug or something doesn’t look quite right in the old Internet Explorer. Phase 2 is just around the corner.


December 27, 2010

Rework

Rework should be on every creative professionals reading list. Written by Jason Fried & David Heinemeier, the brains behind 37 Signals, Rework offers a unique perspective on re-structuring the modern work day and office. Rework is a quick and entertaining read as well as an excellent way to start thinking about getting the most out of your 2011. Purchase your copy here.