Resolution Independence and One Web Designer’s Approach

the web is a brave new world

Web designers can’t design the way we did a year ago.

Since its inception, progress in the world of web development has been swift. But come on, this past year was exceptionally progressive with the widespread adoption of high-resolution devices of all shapes and sizes. The “Resolutionary” iPad, the 493 flavors of Android tablets, and…drumroll please…the Macbook Pro with Retina Display.

With high-res devices, it’s like looking through a microscope with 20/10 vision. Designing like we did a year ago before the advent of these devices would be like asking people to wear miscalculated eyeglass prescriptions. 

The bar has been raised and it’s up to us to build a more beautiful web.

Read More

Color Autonomy in Website Theme Development

same transparent png, multiple theme colors.

As the thirst for website theme design seems unquenchable and ever-increasing for development within popular CMS’s like wordpress, drupal, joomla, tumblr, etc… I thought it’d be helpful to offer some tips to save time for designers & developers alike, when creating themes where multiple color options will be made available.

Read More

Getting Physical with Mobile Design

san diego’s gaslamp quarter app

This is a shot of the home screen for an app we’re working on for the gaslamp district in san diego…another meridian-apps location. Trying to get a bit more “physical” lately in designing to fit the physical environment of a place. Instead of using the standard rounded rectangle “feature” or ad tiles that apple set a standard for, here I decided to make the lamp post banners you’ll find in the gaslamp clickable.

Check out the full view - http://cl.ly/2U251d0q253q1i170d2v

Adventures in Letterpress Printing

So today I took a dive into the world of letterpress printing. For those who don’t know what letterpress printing is, it’s basically relief printing using a certain type of press with a “type-high bed” and movable type. It’s really popular now with the new vintage craze among designers and it makes business cards and flyers look super fancy.

There are however, some important things to remember when preparing files for letterpress printing. These are things I had to learn, so I figured I’d pass them on.

tip #1: keep it to 1 or 2 pantone colors

First off, it’s important to limit your designs to 1-2 spot colors. Using more than 1-2 makes it tricky for the printer and raises cost significantly since each color needs its own run through the press. Make sure your colors are spot and not CMYK.

tip #2: Use at least .25 pt lines & 6 pt fonts

Don’t go smaller than 6 pt font for dark ink on light paper, and no smaller than 12 pt font for reverse type. Otherwise, you run the risk of your reverses clogging up on the press.

And there’s the quick and dirty. Check out Boxcar Press for more detailed info on letterpress printing. I found it to be super helpful.

You can see some great letterpress designs at carddsgn.com.

Oh, and if you’re interested, here’s a full view of my letterpress business card concepts.

Jacksonville Jaguars

grass ads are the future

Working on some designs for the Jacksonville Jaguar Stadium app.  I’ve never lawn-mowed feature tiles into grass before. What do you think ;)?

Portland Art Museum

Portland Art Museum on meridian-apps

Here’s a shot of the Portland Art Museum app I designed to exist within meridian apps.

One App. Many Flavors.

introducing meridian

Some shots of potential “places” I designed within the Meridian App. One of the really cool things about this app is, unlike most platforms (facebook, google, myspace), Meridian accommodates branded design for every location found within the app. Each place is designed to be visually consistent with itself, not with some larger dull and faceless platform.

However, if Meridian takes over the world like we’re anticipating ;), my hope is that each location will enlist the help of designers in creating their place - lest we become the dreaded, fully customizable, and all but deceased Myspace. I’m confident that my brilliant friends here at Spotlight Mobile will come up with spectacular tools to avoid DIY disaster.

Image-free Buttons with CSS3

photoshop / css3 throwdown

Been digging into some CSS3 sweetness. Respectable browsers (sorry IE) can render things like border-radius and multiple box-shadows. Still looks plain and stupid in Internet Explorer, but IE users should be accustomed to seeing the world through ugly glasses by now. Above, you can see how close I was able to come to my original design by using these CSS3 properties. I’ve listed out a few of the key ones here…

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
border: none;
-webkit-font-smoothing: antialiased;
-moz-outline: none;
-webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.2), 0 1px 0 0 #64add7 inset, 0 31px 0 -10px #3081c1 inset, 0 0 0 3px rgba(124,149,171,0.2);
-moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.2), 0 1px 0 0 #64add7 inset, 0 31px 0 -10px #3081c1 inset, 0 0 0 3px rgba(124,149,171,0.2);