Dribbble – What Were You Working On?

Paravel SchmaravelYesterday I was cleaning up my hard drive and migrating some design assets to Dropbox when I came across a few PSD files for a version of the Paravel site from over 6 years ago. I’m not sure what I was thinking, but I got such a kick out of it I figured I’d upload a crop as a Dribbble shot and invite others to do the same. Seeing what fellow designers were doing 5 and 10+ years ago has been great fun. It’s also been pretty interesting to sort through folders of Paravel’s early work…

Much of it doesn’t exist anymore. Gone. Vanished. All that hard work, thinking, stressing… poof. It’s a nice reminder of what’s important, and the reality of the ever-evolving web. A lot of this junk is just temporary.  – Dan Cederholm

Whusky Desktop & iPad Wallpaper

Recently, I’ve really been enjoying Rdio. Each morning I’ll add a bunch of music to my queue and be set for the rest of the day. The Sons of the Pioneers have been in heavy rotation and their version of “Cigareetes, Whusky and Wild, Wild Women” has been stuck in my head all week. When walking around the house singing the song failed to dislodge the tune from my noggin, I figured designing some of the lyrics would help.  That didn’t work worth a durn either, but at least I’ve got some graphics to show for it.

whusky

Feel free to download any of the following resolutions:

iPad 1024 x 1024
2560 x 1600
2560 x 1400
1920 x 1080

CSS Text-Rendering

This morning I saw a couple of tweets from @seangaffney and @maxvoltar about the CSS text-rendering property, which is in the W3C Working Draft. Aesthetically Loyal has outlined the differences in kerning pairs and browser support for text-rendering: optimizeLegibility; quite nicely, and after seeing how well capital As, Vs, Ys and Ts display I had to test it for myself.

compared type

Similar to Kyle Meyer’s experiment, I noticed a significant improvement and added the property to my body CSS for this site.  Overall, type looks much tighter and successive capital letters, like “CSS”, seem more evenly spaced.  Firefox uses optimizeLegibility by default for font sizes 20px or larger and I agree with Paul Irish’s thought that Webkit should do the same.

Typekit, @font-face & This Site

typekitSince launching and outlining the process for the latest version of this site, I’ve had a bit of a type adventure going on.  After fielding a variety of questions on the subject, I thought it’d be helpful to outline what I’m learning here.

  • When the site launched, I had Typekit serving up only the regular version of FF Meta Serif Web Pro to the web, iPhone and iPad versions.  Knowing that multiple styles and weights being pulled from the same font via Typekit could crash Mobile Safari, I opted for a single font file to rule them all.
  • After seeing Stephen Coles’ comment about faux italics I did a little more peeking around.  Taking into account mobile load times, the inability to apply styles through CSS in Mobile Safari and how great the real italic version of FF Meta Serif looks, I changed my plan and switched both iPhone and iPad support OFF to let the stacked Georgia render instead.  I really like this solution, and while I haven’t made up my mind on what to do about an iPhone version for this site, I’m satisfied with where it lies.
  • Yesterday, Typekit announced that iPhone iOS4 includes a fix for the multiple weights/styles crashing issue.  I switched iPhone support ON in my kit editor and was glad to see that the fonts were loading perfectly.  Ultimately, I decided to switch iPhone support back OFF and serve Georgia instead of FF Meta Serif.  In this case, I think the speed for Wi-Fi-less users is essential.  However, when iPad gets the updated iOS4 I’ll revisit my game-plan and consider enabling in that case.

I’d also like to state my support for Typekit.  They’re doing a lot of good work on multiple fronts: customer & tech support, working with foundries to make more fonts available and participating in the greater discussion on how browsers should handle them once we can serve ‘em up.  Any inquiries or questions I’ve had have been fielded quickly and I think that paying for any  service like this doesn’t just get you fonts easily, it endorses the web-font movement and supports progress.  It’s messy work, and I’m glad it’s being done.

TDC in CSS3

Earlier this year I was fortunate enough to become acquainted with Brian Hoff through DesignSwap and Dribbble. After being really impressed with his redesign shots for The Design Cubicle , I was thrilled when Paravel got the call from Brian asking us to jump on board to provide the HTML & CSS. Working with Brian has been a privilege and a joy. So much so, that I couldn’t help but spend some free time taking his beautiful masthead design and translating it into CSS. Using the same techniques from my last background-clip & @font-face experiment, came up with this example:

.the {font: 30px "adrianne-1","adrianne-2","Times New Roman", Times, serif;}
.design {font-size: 68px;line-height: .9;text-shadow: #f5f5f5 -1px 1px 0;}
.cubicle {font-size: 40px;letter-spacing: 1px;line-height: .8;font-weight: 500;}
.main {
	font-family: "refrigerator-deluxe-1","refrigerator-deluxe-2";
	text-transform: uppercase;
	line-height:1;
	font-weight: bold;}
.tdc {
	background: url(../img/diag.png) repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	z-index: -5;
	display: block;
	text-shadow: none;
	font-size: 220px;
	margin-top: -112px;
	height: 160px;
	font-weight: 700;}
.diamond {
	margin-bottom: 12px;
	margin-top:0px;
	font: italic 14px/0 "Times New Roman", Times, serif;}
.view {
	font: 15px "adrianne-1","adrianne-2", serif; margin-top: 10px;}
.explanation{
	font: 12px/1.7 "adrianne-1","adrianne-2",serif;
	margin-top: 0px;
	margin-bottom: 30px;}
 .line-left, .line-right {
 	border-bottom: 1px solid #f8f8f8;
 	width: 150px;
 	display: inline-block;
 	margin-bottom: -30px;
 	border-top: 1px solid #cdcdcd;}
.line-left {float: left;margin-top: 0px;}
.line-right {float: right;margin-top: -17px;}

I think I came pretty close. The main differences are related to the fonts I used, as Tungsten and Sentinel aren’t yet @font-face-able. Fortunately, Typekit was able to serve up Refrigerator Deluxe and Adriane as more than suitable replacements. Just like my last last experiment, some of the class styles may seem oddly titled. I sourced them from the first few letters from each line of text. At the moment this will only work in webkit, so fire up Safari or Google Chrome and check out the example.

Dave Rupert’s WP Dribbble

I love Dribbble. In addition to being continually inspired and challenged by the caliber of the pixel-shots, I’ve made quite a few new friends through this great online community. When Dan Cederholm and Rich Thornett took dribbble public, I noticed an RSS feed available for each player’s latest shots. This lead to me begging the multi-talented Dave Rupert to cook up a WordPress plugin that would display a player’s latest dribbble shots on his or her blog. As you may have already noticed from the bottom right-hand corner of my site, Dave has been kind enough to share this with the entire dribbble community, posting it as a free download on his newly redesigned website. Click here to visit Dave’s site & download the WP Dribbble plugin.

Kyle Steed & 52 Profiles

Kyle Steed's 52 Profiles While Yaron Schoen and I were in the early planning stages of DesignSwap, we realized that we’d need something really special to showcase the designer profiles for each swap. Our immediate thought was to get in touch with Kyle Steed, who we both met at SXSW, and see if he’d be interested in jumping on board. Fortunately he said yes and is now illustrating swapper head shots. I don’t think the project would have been the same without Kyle’s signature 52profiles.com style. Be sure to follow Kyle’s work at kylesteed.com