Archive for the ‘Design Love’ Category

Getting More from Mobile Sites

Tuesday, April 24th, 2012

Mobile sites are generally designed for the on-the-go user. With this user-type in mind, mobile sites can become overly paired down to just the basic details that a user might need, such as directions, a phone number, and social media links. Yes, a mobile user may most-likely be on-the-go, but I think the mobile audience is shifting. When I’m away from work, I use my phone as my primary method of surfing the web, meaning I’m not just using it on-the-go. It’s the main way I access the internet and I’m now expecting more than the most basic functionality from a mobile site.

Like most people with smartphones or other mobile devices, you can find me using mine everywhere. I’m on it while I’m at lunch, estate saleing on the weekends and definitely on the couch while “watching” TV. Since I’m using my phone as my second computer, I would hope that the mobile site would have the same functionality of a laptop or desktop, but optimized for my mobile device. A mobile site has to accommodate every user, if they are out and about, or just laying in bed before they turn off the lights.

Because of this common over simplification, I often find myself clicking on “view full site” taking me away from the mobile version of the page. I’ll get frustrated when information on a mobile site isn’t intuitive or if a site is so pared down that I can’t find the information I’m looking for. And once I move away from the site, the user experience deteriorates. I have to pinch and zoom to read any text or sit waiting for pages to load. The mobile site experience becomes a missed opportunity. A better experience causes increased engagement, more conversion and a good chance someone will walk away feeling positive about your company or product.

A mobile site should create a focused experience, not a limited experience. To do this:

1. Information needs to be highly prioritized. Present the content that will be most important to the user first. A mobile site should focus on prime information pages upfront, but let you dive deeper if needed. The content users interact with should be adjusted to suit the size of their site— the same information from the full site may need to be presented in a different order from the full site to make more sense for the mobile user.

2. Navigation should be simplified, minimizing the user options. The navigation needs to be clear and intuitive to the user so they can find exactly what they are looking for. If needed, pages should include sub navigation so the user can still access any meaty details.

3. Your site should be touch-friendly. Buttons or links need to be large and easy to hit with a thumb or finger tip, based off of standard finger sizes (Apple suggests 44 pixels) Not only should it be click-able, but it should be in an area it can be easily clicked—buttons shouldn’t be placed too closely together, or you risk taking the user to the wrong link.

4. Images should be limited. Reduce the number of images to limit loading times.

The ultimate goal in having a mobile is to create a platform that is adapted to a device’s size, but mainly to what the user needs. We need to think about what mobile users want when visiting a mobile site, if it is to get things quickly on-the-go, or if they are using it as their main computer. A mobile site should not be limiting, but focused to give the user a valuable and positive experience that keeps them coming back for more.

Tangerine Tango Dream

Tuesday, March 27th, 2012

Back in December of 2011 Pantone announced the 2012 Color of the Year — Tangerine Tango. It’s always fun to see how and where the color of the year shows up in design, fashion, interiors, product and packaging design, among other places. The general spirit of Tangerine Tango has been showing up in fashion in general, and makeup in particular, throughout the year. I’ve been seeing coral lipstick everywhere and loving it! But now, its really official, Sephora and Pantone have teamed up to create a Color Of The Year makeup collection inspired by Tangerine Tango. I definitely have an eye on the lip gloss set! I’m not wild about the packaging, but I’ll leave that commentary for another day… In the meantime, I’ve collected images showing just a few of the places I’ve seen this bright reddish orange trend showing up. Enjoy!

That’s Banana Cakes!

Friday, February 17th, 2012

Banana cakes is a phrase started by me after I heard it randomly one day from a person talking on the radio. I said to myself, “That is so flippin’ fun, I’ve got to use that!” Since then, I’ve been throwing out “banana cakes” left and right to express my excitement, surprise or disbelief. With my constant use, it finally caught on around the office and now I’ve got everyone spreadin’ the fun. Now that’s banana cakes!

What is this “Tat-A-Day” all about?
The Zoom Creates team has created six sets of temporary tattoos, and to share some of our ink-spiration, we’ll be posting a “Tat-A-Day”. The “Tat-A-Day” posts will last throughout the duration of the Rethink Ink contest. So tune in and get ink-spired to create your own!

Tweedle Beetle Paddle Battle

Tuesday, February 14th, 2012

“What do you know about tweedle beetles? Well… When tweedle beetles fight, it’s called a tweedle beetle battle. And when they battle in a puddle, it’s a tweedle beetle puddle battle. AND when tweedle beetles battle with paddles in a puddle, they call it a tweedle beetle puddle paddle battle.”

Thank you Dr. Seuss for creating Fox in the Socks for today’s Tat-A-Day inspiration.

Why tweedles, you ask? Well, Corrina and I have been deemed the official “Tweedles” in the office, lovingly named by Eva approximately 5 years ago because of our obvious similarities in our sense of style and design and that we have a tendency to carry on like two peas in a pod from time to time.

“The Tweedles” has become an exclusive group that many have tried to enter into. It’s not easy, but you can become an official “Tweedle” too, just let us know if you’d like to join and we’ll provide a lengthy application and put you on our wait list. FYI, Tim has been wait-listed for about 5 years now.

What is that “Tat-A-Day” all about?
The Zoom Creates team has created six sets of temporary tattoos, and to share some of our ink-spiration, we’ll be posting a “Tat-A-Day”. The “Tat-A-Day” posts will last throughout the duration of the Rethink Ink contest. So tune in and get ink-spired to create your own!

Happy, Happy Birthday!

Friday, September 23rd, 2011

In honor of 2 very special birthdays (June’s & my very own), I’ve collected a few of my favorite birthday cards. Enjoy!

Calligraphy with Illustrator

Monday, September 12th, 2011

Sometimes calligraphy brushes in Illustrator just don’t cut it. As much as you may try, a brush style in Illustrator just can’t mimic the flowing hand drawn style we crave. In the past, Illustrator was very limiting in creating flourish elements. To get shapes the way you want, you had to rely on your skill with the pen tool and the Bézier curve. With Illustrator CS5 in our hands, we now have the ability to manipulate line weight at different points on a line, making a job that would have been very time consuming, a breeze.

1. To mimic the hand drawn calligraphic style, I’d suggest starting on paper. Erasers are definitely your friends. Grab references of calligraphy styles you enjoy. Play with flourishes at the ends of words and with how words interact with eachother. Draw out your words. Don’t worry about the line weight at this stage, we’ll be adding this in the next steps.

2. Scan in your sketch. Bring it into Photoshop and clean up your drawing. This step makes it easier to trace in Illustrator.

3. Open your clean sketch in illustrator and starting tracing. Using the pen tool, trace over all of your lines. I’d suggest trying to keep the number of points to a minimum, but if your having trouble getting smooth lines, I’d try using the smooth tool.

4. Now we can get crazy with those curves. Press Shift (W) to begin using the width tool. Once you have this selected you can click on any point in your illustration to adjust the width of the line. Just click and drag away from the line to create a thicker stroke or toward the line for a thinner stroke. This will adjust the width of the entire line from that single point. To have more control over the whole stroke, use the direct select tool (white arrow) to select a point on your line. Then press Shift (W) and adjust the point. This will only effect the width of the line from that point until it reaches the next point on the line. This method is great for getting high-contrasting line weights on a single line. A great way to start is by scaling down the width of the line on each end-point of your type. This creates clean beginning and endpoints and helps the lines feel more brush-like.

5. With your reference images in hand, mimic the line weights you see. I’d suggest trying to keep all of your thick strokes a similar weight and thin strokes a similar weight. This way your type has a very consistent and cohesive feeling. Once you have all of the type in the style to your liking, try playing around with embellishments. Add extra flourishes or lines to enhance the design. To finish up my own design, I added a soft gradient halo around my text and a subtle feathered drop shadow to make the text stand out from the background.

Now get out there and start experimenting, you’ll be surprised at what you can make and how easy it can be to get fabulous looking designs!

The Trend Effect

Wednesday, September 7th, 2011

I’ve been living on Pinterest since I first signed up and I am constantly getting a first hand look at some great trends in action. With Pinterst you see all types of images that members are bookmarking across the internet, from fashion, interiors, to graphic design. It allows you to get a first hand look at what’s popular and new.

There is always a trickle effect in design trends. I’ve said it before, that what you see in fashion effects the world of interior design and finally touches on graphic design. These effects can be seen through color, pattern, shape, balance and even texture. Keeping up with the trends in all three areas is important. It allows us to see design trends from a different angle and lets us evolve our own designs.

On Pinterest you may need to do some wading, but there are definitely some great current trends that you can pick up on. Below are a few trends I’ve been noticing in the fashion and interior realms and how these trends may effect design choices for current graphic design.

Industrial: Industrial design is everywhere in interior design. It’s a mixture of clean lines, heavy metals, warm woods and simple shapes. Industrial is all about form and function without any fluff.

How it translates to graphic design: Minimalist designs, heavy gritty textures, shiny and smooth surfaces, dark moody grays, taupes and blacks, chunky slab serif and modern serif fonts, simple icons, and geometric forms.

Industrial Design

Pattern: Geometric, tribal and Southwest patterns are all over fashion and interior spaces. Patterns are generally a wonderful mix of rich vibrant colors combined with neutrals like soft gray, white and black.

How it translates to graphic design: Exciting geometric designs, bright colors and contrasting neutrals. Subtle patterned backgrounds and unique color pallets.

Mod/Mid Century: The 60s are coming back with tailored clothing, contrasting stripes, warm leathers, rich wood tones, and pops of vibrant color paired with charcoal grays and blacks.

How it translates to graphic design: Bold geometric shapes. Vibrant mix of muted warm colors paired with strong dark neutrals. Heavy use of typography and a mixture of font types.

Romantic / Organic: Softer shades are emerging. Dusty Rose is back in along with nudes, taupes, and creams. Gauzy fabrics, organic materials, tufted furniture, velvet, reflective mirrored surfaces and elegant shapes and lines.

How it translates to graphic design. Heavy use of neutrals, soft organic shapes and textures. Hand drawn calligraphic fonts. Light and subtle textures. Thin lines, natural shapes and soft curves.

Web Design Trends 2011: Typography

Monday, August 29th, 2011

Web safe fonts. If you are a web designer or developer, names like Arial, Verdana, Georgia, or Tahoma instantly come to mind when you hear those words. Up until recent years, designers (sometimes begrudgingly) relied on these and a small handful of other web safe fonts to allow visitors to view fonts correctly on screen. Internet browsers could only display fonts that were installed on a person’s individual computer, so this standard set of fonts became the typographical foundation for most websites.

With only a few web safe fonts available, web designs of the past have been extremely limited in the use of exciting and engaging typography. Specialty fonts online were generally reserved for main headlines and could only be placed in as static images, limiting the functionality of the type and hurting search engine optimization (SEO).

In recent years, there has been an emergence of font-embedding services, like Typekit, letting designers break out of the “safe” zone. Designers have more font options and can not only play with font style, but also the important details of leading and line height. These new options for fonts allow text to be easily updated and copied and selected from the browser, meanwhile maintaining a positive effect on SEO.

The font-embedding tools have created a boom in typographical exploration. Strong typography on a site can help tell a story as well as evoke an emotion from the audience. It can also set a tone for the site or emphasize a chosen theme. This year are seeing designs that are using large and exciting font choices, both through the use of static image and services like Typekit.

The big trend right now is to go huge with your headlines. These over-sized headlines capture the attention of the audience immediately and can make a site stand apart from their web-safe counterparts. Not only that, they can also create a visual hierarchy with the rest of the elements on the page as well as improve legibility for the viewer. The trend of typography on the web is definitely long-awaited and something I think it will keep growing and continue to be explored through a variety of methods. Typography lends a richness to websites that we haven’t seen in past years and gives web designers a whole new way to present information.

Check out the designs below for great uses of large typography.

CarsonifiedTapp3 MediaNeiman GroupMarie CatribsJeroen HomanChirp TwitterBlack Estate Vineyard

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.