The weekend before last, I participated in Rails Rumble: a 48-hour contest between small teams of Ruby on Rails developers worldwide. Viget had members in four of the teams, and everyone really delivered (you can read more about the others here). Our team (Patrick Reagan, Nicholas Schlueter, Rob Ares, and myself) built Qflip, an app that randomizes your next Netflix rental with the help of an anonymous community.

Working closely with 3 developers (photographic evidence) on a tight timeline was a unique experience, and it forced me to rethink a lot of my web design processes. While these lessons specifically apply to tight design projects, in some sense, every project is a tight design project: It never seems like you have enough time or resources to get the results you want.

So, here are a few thoughts I had on designing with developers, designing within constraints, and designing for maximum impact with minimum resources:

Continue reading "Under Pressure: Lessons Learned from 48 Hours of Design"

Leave a comment ( 6 )

For some reason, it remains difficult to hunt down font families that have a serif and sans-serif combo. As far as I have found, none of the font sites allow you to search by this designation, yet it seems quite useful to utilize the hard work of typographers who, with great attention, have designed sets that work in this capacity. I'm not a huge student of typography, but I do understand that there's some grumbling about the use of these pairings, that using them produces less-than-ideal results or reflects a bit of laziness. I get it, and agree that some of the best combos are hand picked, but this post isn't about that. There are plenty of other font pairings that don't share a family, that work together because they contrast nicely, but again maybe a different post. This post is simply put together to identify what is available in the event that you're needing a quick sans/sans-serif harmonious combo or you're looking for wider variations within a single family style.

There isn't a clearly standardized name for serif/sans-serif paired families, but from what I can find, superfamily is the term most commonly used. You may also find references that use the terms suite, hyperfamily, type system, or family group. Following is a list compiled from other posts that I found and personal font searches. Please share superfamilies that you know of that didn't make the list, and I'll be glad to add them.

Continue reading "Superfamily Font Roundup: 40+ Serif and Sans Font Pairings"

Leave a comment ( 15 )

I was working on a project the other day that took advantage of a technique very similar to the one used in the image above, and I realized that I haven’t seen any tutorials online that really explained this process, so I figured I would share it in the case that you’re ever interested in achieving a similar effect. It’s also a chance to go over exactly what channels and load selection can do for you as a designer working in Photoshop.

Channel controls aren’t just for color/plate separation. We can wield the power of channel selection to capture elements of an image—very similar to creating paths—and apply them to our design. This can come in handy when you want to do anything from knocking out a white background from a logo, to creating true monotone images right in a RGB PSD file. The uses are endless. Load Selection, on the other hand, is a slightly more hidden feature, though just as powerful as Channels. You might know Load Selection through the use of paths you’ve created in Photoshop or imported over from Illustrator.  Loading a Selection in tandem with a Channel works pretty much the same way. With that said, on to the tutorial.

Continue reading "Load Selections with Channels in Photoshop"

Leave a comment ( 10 )

Throughout the year the team here at Viget embarks on numerous internal projects aimed to expand our expertise. With that thought in mind, we just recently designed an built an iPhone-specific site to accommodate the majority of our mobile users. The overall process was an enjoyable one. Here's a glimpse of how the project came together.

Continue reading "Viget.com gets iPhone-ized"

Leave a comment ( 12 )

There are three things that I hold dear to my heart: design, the web, and community. Being a web designer who loves participating in both educational and social events, I have noticed a strange divided amongst the web design and traditional design communities.  In the DC area, these two very distinct circles seem to rarely mix. 

My observations were recently confirmed and discussed in a very public blog post called “Dear AIGA, where are the web designers?” by Jeffery Zeldman which raised a lot of interesting comments. Jeffery’s post specifically addresses the absence of web designers speaking at the AIGA Business and Design Conference:

Continue reading "Bridging the Gap Between the Print and Web Community"

Leave a comment ( 12 )

Recently, our team set aside some time to make another flash mob happen. If you’re unfamiliar with what that is, take a look back at our first. This time around, we decided to use our 4 hours to whip up some t-shirt designs that reflected some of our “inspirations”. We talked about defining parameters, but bailed quickly on that and decided to leave it wide open. To keep it fun (somebody needs bragging rights), we’re asking that you check out the design concepts and vote on your favorite. We’ll then print up 3 of the winning design and draw randomly from the commenters who respond to this post to see who gets them. If you want to purchase one of these t-shirts in the meantime, we’ve set up a no-commissions Spreadshirt shop where you can grab one. We’ve ordered a couple of test shirts and the quality is nice, although not perfect (it’s what you’d expect from a one-off, digitally printed t-shirt shop). We’re pretty happy with the results, though.

Continue reading "Viget Flash Mob: T-Shirts"

Leave a comment ( 19 )

The major use for a transparent mask in Flash is the alpha gradient. In the following examples, I'm going to show you how to create a gradient mask with either the Flash authoring tool or ActionScript.

Flash Authoring Tool
Start by placing two objects on the stage, one an alpha gradient you want to use as a mask and the object you want to be masked. It is necessary to convert both the mask and object being masked to movieclips so you can apply caching properties to them. Something we are not doing is creating a mask layer and a layer to be masked. A masked layer does not allow for bitmap caching, so we're going to have to do that using ActionScript. On the timeline, enter the following code:

object.mask = mask_mc;

Now, set both the mask and the object to be cached as a bitmap at runtime. If you need to, open up your properties panel by clicking Windows => Properties => Properties. Now, click the "use runtime bitmap caching" box for both your mask and the item being masked.

That's it! Publish your movie and you will see your alpha gradient movieclip masked.

ActionScript
If you just want to use only ActionScript (this way is easier if you are dynamically placing objects onto the stage), you need to set both the alpha gradient mask and the mc being masked cacheAsBitmap property to "true." Using ActionScipt to set the caching is the same as checking "use runtime bitmap caching."

mask_mc.cacheAsBitmap = true;
object.cacheAsBitmap = true;

And, just like above, apply your mask to your object.

object.mask = mask_mc;

Why do we need to bother with the "cacheAsBitmap" property anyway?
When you set the "cacheAsBitap" property on a display object to "true," what you are doing is telling the Flash player to cache an internal representation of the vector object as a bitmap. Using bitmaps is much more efficient than using vector. When vector is rendered on the stage, the Flash player will render everything. So, if you have a movieclip with 10,000 vector objects stacked on top of each other, it will render each of those 10,000 objects even if objects are hidden behind other objects. When using bitmaps, you are only rendering what is visible on the stage. So you can see that when working with alpha and gradients, which are already heavy on your CPU, you want to render them as bitmaps.

Overall, bitmaps can increase performance significantly, especially if you are using complex objects, lots of animation, and/or high frame rates. Objects with these aspects require more from your processor because they are redrawn each frame. Higher frame rates mean quicker redrawing. Quicker redrawing of highly complex objects ... wel,l you get the idea. (Then, add that to slower machines, and your animation will slow down and become jerky).

Source files for the above example can be found here.

Leave a comment ( 2 )