Posts Tagged ‘design’

Inspiring Infographics

Friday, December 3rd, 2010

Lately I’ve come across some extremely eye-catching and functional infographics. An infographic is a graphic visual representation of information or data, usually created to explain complex information quickly and clearly. Infographics can most commonly be found on maps, signage, educational materials, in technical writing, etc. People generally don’t like reading a ton of detailed information, so if we can see an image that quickly gets to the nitty-gritty, it’s a welcome treat. An infographic is always a plus, but it’s even better when it is designed well. A good infographic can tell a story, leading it’s audience on an adventure for the eyes and hopefully teaching you something useful in the process. Below are some of the awesome and inspiring examples that I’ve happened upon recently:


Patterns in Illustrator

Monday, November 29th, 2010

We have been doing a lot of work with patterns in Illustrator recently and I thought I would share some of the things we learned and re-learned.

The easiest way to make a pattern is to just drag your object (perhaps a sweet Van Halen logo you made) into the ‘swatches’ pallet.

This creates a swatch that can be applied to the shape as a fill or a stroke.

A pattern does not have to be a square. It can be a rectangle, too.The pattern will repeat at the outer edges of the object (VH). If you do not want the pattern to repeat that way, draw a rectangle with no fill or stroke and move it behind the object.

Drag your object (VH) and the rectangle into the swatches pallet. Now, the pattern will repeat where the edges of the rectangle were.

You can scale or rotate the pattern within the shape. Select your pattern-filled shape and double-click on the “rotate” or “scale” tool to bring up its dialogue box. Make sure that only the pattern is selected and then enter the amount you would like scaled or rotated.

You can also move the pattern inside the shape by selecting the shape then holding down the Tilde key (the keyboard key to the right of the 1 Key), then clicking and dragging. Crazy.

It is a little more complicated to make a staggered repeating pattern. I will cover that in a new post, so stay tuned!

Happy patterning!


Ikea Cook Book

Friday, November 19th, 2010

Ikea is putting out a cookbook, but no, you don’t need an Allen wrench to build your favorite Swedish dish. The book, however, is cleverly done with beautiful, witty, and functional imagery that makes even me want to cook. It’s called “Hembakat ar Bast” (Homemade is Best) and its’ best feature is the stark, geometric photography by Carl Kleiner. All of the ingredients are broken down into a still life image containing small piles and pieces. It definitely has the streamlined, modern appeal that keeps Ikea in business. The book is 140 pages, with 30 classic Swedish recipes. Fortunately, this book is free! Unfortunately it’s only in Swedish, and can only be found in Sweden. But wait, they have an app too! The app is called Kondis and contains the same recipes from the book. Not only that, but it will also tell you how much exercise you have to do to work off the dish! Now you can enjoy your Swedish fancies without a guilty conscience!



Google Font Previewer

Thursday, November 18th, 2010

Another free Google tool in beta?  Yep.  Seems like another one comes out every week.  This one in particular has been out for months, so if you haven’t given it a try yet, then you are overdue.

Do you need help configuring, testing and then easily embedding some free fonts into your web pages?  Great!  The Google Font Previewer lets you pick one of the open source fonts from Google’s Font Library, then tweak the size, spacing and decorations using simple sliders and buttons.

Perhaps even more exciting is the Chrome browser extension for the Google Font Previewer.  Click the icon in your Chrome toolbar, and select the web font you want the page you are currently viewing to become.  Zap!  New fonts to preview.  This can be great if you’re designing a site, but you’re just not sure which free web font to use.

These are both great tools for designers and web coders alike, so give them a shot.

Google Font Previewer (http://code.google.com/webfonts/preview)
Google Font Previewer Extension for Chrome (https://chrome.google.com/extensions/detail/engndlnldodigdjamndkplafgmkkencc)

Also, don’t forget to go back and read Greg’s post about Google’s Library of free Web Fonts.


Awesome Fontstacks

Friday, November 12th, 2010

Continuing the discussion of new web typography options from our earlier posts Web Fonts and Cufon vs CSS3 vs Google Font API, I ran across this the other day: Awesome Fontstacks. And it is pretty awesome. Kurtis will back me on this.

This site allows you to “automatically match fonts based on typographical metrics, optimize the font bundles for their intended purpose, and deliver rock solid CSS for those fonts and their fallbacks to copy & paste”. Basically, you can go to this site and choose from 45 fonts (that are free and licensed for online use) to use for your headlines, body copy, decorative and monospaced needs. As you choose your font for each category, sample text in a window to the right updates to show you how it will look as copy. It only displays fonts that would be appropriate to use together so you don’t end up with, say, two similar sans serifs like Droid Sans as your headline font and Fontin Sans as your body copy font. This makes it really nice for me as a designer.

What makes it nice for web developers is that after you have chosen all your fonts, or your “fontstack”, you can conveniently download the font files and put them into a directory in your website then copy the CSS code to your stylesheets folder and link it from your website. Awesome, eh?

AND, each font stack has a back-up stack for those using browsers that don’t support @font-face.

P.S. Iron Maiden rules


Designing a Sticky Site

Tuesday, November 9th, 2010

As a graphic designer, our job and overall goal is to communicate clear and succinct ideas and messages to a specific audience. When designing for the web, we want strong ideas to get the attention of the user, so that they return regularly and consistently spend more time on the site. We do this in hopes of creating a “Sticky” site, where ideas are absorbed and then spread outward, in hopes of making the site successful. One of the key elements in making a site “Sticky,” is to keep ideas simple and compact. A clear idea focuses on the core of your message, removes any superfluous information, making the message memorable and allowing it to stick with your audience.

In the post How To Design A Sticky Site: Stickiness Part I by Steven Bradley, he shares how to convey simple ideas in web design in order to achieve stickiness:

… The first thing is to understand the core idea or goal of the site. Why does the site exist? What’s its purpose? What is it trying to do? These are questions you should be asking before beginning any design.

We can carry the idea of finding the core to each page of the site as well. What goal does any given page have? How can we design the page to push people toward that goal.

Generally a site and even a page will have more than a singular goal. Your site might exist to make a sale, generate a lead, convert a visitor to subscriber and so on. Still it should have a primary idea or message to communicate.

Think of a tagline? Isn’t your tagline meant to simply and succinctly sum up what your site and business is about? Isn’t a tagline the core idea behind your site.

When someone lands on any page of your site they should be able to understand what the site is about instantly. This is usually done through a combination of the site name, the company logo, the tagline. On the single page it would also include the main heading. Consider the idea of simplicity in all of these.

We might also add in the idea of across a site. A unified design is one where everything is working together to communicate the same central message. When all your design elements agree they create a whole that is greater than the sum of its parts. They help to place the focus on what’s most important.

Stripping away the unessential might also lead us toward minimalism. I don’t think the idea of simplicity means we should only create minimalist designs, but it does imply that any design we create should be effective when we strip away the eye candy and it does imply that no matter what style, your design should only include what’s necessary to communicate your message.

“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” -Antoine de Saint-Exupery

When there’s nothing left to take away you’re left with the core.


Color Trends: The Economic Effect

Tuesday, November 2nd, 2010

Earlier this year, Pantone named Turquoise as the color of the year and it can now be found all throughout the fashion, interior, and graphic industries. The color was chosen because it “evokes thoughts of soothing, tropical waters and an escape from the everyday troubles of the world, while at the same time restoring our sense of well being.” Color trends for all areas of design are most often chosen based on our current economic and social trends. We have been living in a world economic crisis and it’s no wonder a color was picked to represent an escape from our everyday lives.

The current economy continues to haunt us and that translates into a desire for the better days of the past. We are saving money, and trying to go green by repurposing, recycling, and reusing the materials available around us. For 2011, with money on the back-burner, there will be a foreseen focus on family and preserving and exploring the past. What does this mean for design? Picture old, heirloom colors, distressed finished and earthy hues of brown, green and blue. We’ll seek styles that bring us comfort, reminiscent of our heritage and roots. Trend analysts are forseeing a large interest in patterns, textures and colors that have a global influence. Renewed Aboriginal, Tribal and bold geometric patterns will be set off with amber tones, tomato reds, and sea blues, balanced by earthy neutrals like putty and sand.

To keep money in our wallets, we will also crave to keep things simple. Tones of gray and white will be the hottest neutrals and will be popped with warm butter yellows and taupes. To keep things sophisticated, understated washes of gold and champagne metallics will make their way into this upcoming 2011 season’s pallet. We should find all of these trends reflected in paint and fabric, and we will probably find overlapping in graphic design, by the use of simple and warm-colored hues, printed textures, and a mixture of patterns throughout collateral. Curious about how this might look? Check out these examples below of how this may effect design in the upcoming year:

Reference:
Pantone Unveils Color of the Year for 2010:PANTONE 15-5519 Turquoise
Pantone Must-Have Colors for 2011

Interior Design Trends for 2011

Interior design trends for 2011 will reflect on ancestry


Spring Color 2011

Thursday, October 14th, 2010

Fashion is only a hop skip and a jump from graphic design, so checking on upcoming trends in color and pattern is always a good idea. Today I started looking into color trends for Spring 2011 to help stay a bit ahead of the game. According to Pantone Color Institute executive director Leatrice Eiseman, new spring hues will keep harmony, proportion and balance in mind. In the article by WSAToday, she offered up three color pallets that will be very important in the upcoming season:

Focus

Complementary

Branching

“Focus”
A color pallet that works off of neutrals (which include graphite blues and grays) that are infused with hotter hues like yellow, orange and red. The pallets focus is to combine practability with something a little more exciting.

“Complementry”
This pallet uses complementary colors, taken from nature, to create vibration for the eye (think blues and reds).

“Branching”
A sophisticated and quiet pallet that uses both warm and cool shades together, almost mimicking the seasons changing weather.

Color has a unique ability to capture the attention of the audience, bring on emotion, and enhance the look of a product or design. So, if you’re just shopping for the next trend or starting early on those spring designs, it’s smart to keep these tips in mind to make sure we are continually tempting the consumer, making a sale or giving off the appropriate message.


What is good design?

Monday, September 27th, 2010

Its a tough question to answer succinctly. Dieter Ram summed it up very nicely here. Although his post speaks more to product design than to graphic design, the same principles apply.

Good design:
- Is innovative
- Is useful and considerate of the user
- Is aesthetically pleasing
- Creates clarity
- Is unobtrusive
- Is honest
- Is accurate and thorough
- Is eco-concious
- Is as little design as possible

I also collected a few quotes that speak to what design is and what makes it “good” or “great” or more importantly, effective. Enjoy!

“To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.”
— Paul Rand

“Truly elegant design incorporates top-notch functionality into a simple, uncluttered form.”
— David Lewis

“People ignore design that ignores people.”
— Frank Chimero

“Design is the application of intent – the opposite of happenstance, and an antidote to accident.”
— Robert L. Peters

“Good design is a lot like clear thinking made visual.”
— Edward Tufte

“I think design covers so much more than the aesthetic. Design is fundamentally more. Design is usability. It is Information Architecture. It is Accessibility. This is all design.”
— Mark Boulton

“Design is easy. All you do is stare at the screen until drops of blood form on your forehead.”
— Marty Neumeier

And finally, just a little advice:

“Practice safe design: Use a concept.”
— Petrula Vrontikis