Archive for June, 2011

Pinterest: catalog what you love

Monday, June 13th, 2011

I think my dreams have come true! Today I stumbled upon a new site that quickly struck my interest. Pinterest is a virtual pinboard that let’s you share and organize all of the images you find on the web. As I’m sure many designers do, I have saved TONs and TONs of images on my computer to use as references for design, pattern, texture, color, typography and the list goes on. The problem is, I save these images into one huge folder, and about once a month, have to take the time to organize them into each of their specific folder categories so I actually have a chance of them be useful.

With Pinterest, you create a link in your tool bar that quickly let’s you pin (bookmark) an image from the interwebs. You can then, from what I’ve read, create different pin boards that allow you to organize all of the images you have pinned. On top of that, you can edit, comment, repin, and follow other people who have awesome boards. Pinterest isn’t just for designers either, you can pin any kind of image you like, from fashion, to weddings, to foodie photos. I requested an invite immediately and I’m on the wait-list to start pinning. Just visiting the site was inspirational, it’s awesome to see what other people have pinned, and I can’t wait to start my own pinboard!


Tutorial: Tilt Shift Photography

Friday, June 10th, 2011

I have an obsession with small things. Starting at a young age, I can remember building tiny cities and farms with my brother with wood blocks and small plastic figurine pigs. I continuously checked out the same book on making my own miniature doll furniture, and was way obsessed with decorating Barbie’s dream house with all of her miniature accessories. Even a bit more grown up, I still find myself in love with small things, from miniature brass figurines to tiny tiny lamps and, as most here know, dogs with short legs.

Tiny is just too cute, and so I love the emergence of Tilt Shift Photography. I can now make everything appear at a smaller scale. Tilt shift photography gives the appearance of a scaled model, with a shallow focus, high-contrast, and vibrant colors. Today, I’m sharing a fun way to create this look in Photoshop, so you too can start shrinking your world.

1. Select a Photo. Generally a model is seen from above, so make sure you’re choosing a shot from a high and wide angle, this will give you the best results. For this tutorial, I choose a photo taken out of my upstairs window of the street below.

2. Enter Quick Mask Mode. Open the image in Photoshop and enter Quick Mask Mode. You can do this by pressing Q on the keyboard, or select the Quick Mask icon at the bottom of your tools palette.

3. Draw a Gradient. Select the gradient from the menu by pressing G. Choose the reflected gradient. Draw a line where you want your main focus to be on the image. In this picture I choose the car to be the most in-focus element. If you look closely, I drew a line from the bottom of the car wheel to the top of the car. Keep using the gradient until you get the placement you’d like.

(more…)


Tutorial: Subtle Web Backgrounds Using Photoshop Texturizer

Wednesday, June 8th, 2011

Subtle web background textures are extremely popular in current web design. They can be used to give a site depth and and add richness in a way that isn’t too overwhelming. I’ve been really into using these subtle textures in my web designs and I’ve been on the hunt for how to create my own textures from scratch. Today I’m going to share one way to create these patterns for your own web designs.

In this tutorial I’ll show you how to create a repeatable pattern in Photoshop and then use Photoshop’s texturizer to make a unique subtle and repeatable web background (as seen on the left). The texturizer’s great, because it allows you to add texture to an image without altering the image below. If you’ve already got a repeatable texture, you can jump down to section B to get started with the Texturizer!

A. CREATE A REPEATABLE TEXTURE

1. Find a Photo. Start with finding a high-res pattern image. I choose to work with a great fabric texture found here, but you could easily use a different photo or create your own.

2. Convert Texture to Grayscale and Resize. Bring your texture into Photoshop and convert to Grayscale. To do this go to, Image > Mode > Grayscale. Resize your image as necessary. I scaled mine down to create a more subtle look. Go to Image > Image Size to adjust the scale of your pattern.

(more…)


Mobile Web Design

Monday, June 6th, 2011

Mobile web design is a whole new beast when it comes to design. We are working with a new set of variables as designers: screen sizes are smaller and their dimensions are across the board. Mobile design is relatively new, so there is a bit of discovery and experimentation when it comes to user experience and interaction. Plus, mobile devices are rapidly changing, so you have to stay flexible so that a design can adapt to meet the needs of the audience. And let’s not forget about differences in bandwidth between phone users. These variables create a whole new mix of ingredients that effects how design decisions need to be made.

To add to the mix, we are no longer working with the same exact user as we do with the standard web. The mobile user is generally on the go, (waiting in line, walking the aisles in a store, in their car lost…) and trying to get information quickly without having to wade through tons of excess ads and information. Mobile users browse less, and it’s more likely that they are on the hunt for something specific. Information has to be streamlined and clear of clutter—only key information is given to the users, so they can get what they need quickly.

With mobile’s such limited screen space, sites are often a paired down version of their web counterpart. Often, you also see a link to the full site, a good way to keep your bases covered. A normal sites’ large graphics, videos and odd fitting content, however, can cause viewers to run, not to mention slow their phone down. So, removing the excess (without removing the what keeps users excited), and keeping a more liner vertically scrolling site, is extremely key in keeping the design effective for your users.

When designing for the mobile environment there is a bit of guess work and important considerations that need to be made before jumping head first into design. You need to consider phone and screen-size restraints, but I think most importantly you need to have a good understanding of your users, what information they will want to access and were they will be accessing it from. By streamlining and cutting the fat of our full sites, we can keep our audience’s need for information satisfied. But, we can’t just cut out all of the fun and beauty that keeps users engaged. A great mobile site needs to be functional, fit, and still maintain the excitement of the full website.


USDA Releases MyPlate Graphic

Thursday, June 2nd, 2011

Today the USDA launched the new MyPlate graphic to replace the old nutrition pyramid. From an info graphic standpoint this is a huge improvement. The graphic is simple and easy to understand at a glance. The use of a plate instead of a pyramid allows the graphic to immediately translate to a real world usage model and takes away the need for complicated measurements. Info graphics are meant to take complex information and explain it quickly and clearly. In order to achieve this, the concept needs to be boiled down to the most vital information and extraneous content needs to be eliminated for the sake of clarity. This is where the new graphic succeeds, where the updated MyPyramid (launched in 2005) failed. MyPyramid is a perfect example of an info graphic gone wrong and screams of design/decision making by committee. I can perfectly picture the countless meetings that must have occurred where each stake holder chimed in with “can you just add this, what about that?, oh and don’t forget that, oh and last but not least, add some stairs on one side so that we can communicate the importance of exercise as well”. The result is a graphic that includes everything but communicates nothing. In this case less is definitely more.

I must say, visually, I still prefer the earliest USDA guidelines — “Basic 7″, that were used from 1943 to 1956. But from an info graphic stand point, MyPlate, is the most successful by far.