Posts Tagged ‘2011’

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


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.


2011 Web Trend: Creative Navigation

Monday, April 25th, 2011

Again and again I’ve run across experimental and creative ways to navigate a page. I’ve uncovered side-scrollers, one-page vertical scrollers, parallax scrolling, animation, story-telling, and even horizontal scrolling within horizontal scrolling (and the list goes on). These new types of navigation systems can give web sites an exciting and engaging way to captivate users, forcing them to interact differently with content, experiment, or be taken on a journey through your web site. But be careful, because something new and different can often confuse or scare users away.

More traditional styles of navigation are comfortable and expected to users, enabling them to easily guide themselves through your content. By steering your users in a non-traditional style, you can risk losing your audience. For this reason, it’s vital that your navigation remains effective. A non-traditional navigation needs to be smart, thoughtful, and content appropriate. An e-commerce site probably wouldn’t benefit from a single page scroller, because of it’s high-volume of information. But a smaller scaled portfolio or promotional site could potentially benefit from a more dynamic style of navigation. If you are in a specific design, illustration or web field, giving your users a new way to get around can be a great way to show off personal style, technique and skill.

Want to experience it for yourself? Check out these examples of creative navigation below:

Nike Better World
This site uses parallax scrolling to create a dynamic site with depth. Just scroll to explore and animate.

Jax Vineyards
This site uses a mixture of vertical and horizontal scrolling, for a clean, minimal look and feel. Constant top navigation is smart and let’s users interact easily with the site and side. Scrolling arrows are large and easy to maneuver.

Ben The Body Guard
This web site takes you on a journey, once you figure out about its vertical scrolling feature. Follow Ben along the dark streets to figure out all you need to know.

Youzee
This vertical scroller takes you step by step. Just click the button on the home screen to get started. Use the icon driven nav at the top or scroll on through each page.

crushlovely
With a constant navigation on the left, it’s easy to get around this vertical scrolling site. Each “page” is broken up vertically with a different color theme.

Polecat
This is a vertical stroller that allows you to jump between pages with a simple top navigation.


2011 Web Trend: The End of the Fold

Friday, February 25th, 2011

With new developments in screen sizes and devices, the fold has become practically outdated. In web design, the “fold” is known as the imaginary line on a screen that designates what content is visible to a viewer without scrolling. If you’re curious, the term, “fold” originated from the traditional newspaper, where the most important content and images were printed above the paper fold. This rule helped gain maximum attention from the reader and made sure essential information was always visible. The same goes for web design, you want to make sure a viewer has visual access to the key info on your site within the first five seconds of reaching the page.

For years, web designers could mostly rely on the fact that a visitor would have a screen resolution between 1024×768 or 1280×700, and web sites could be created accordingly. There have been debates on where the traditional fold fell on these screen resoutions, but in general, the rule has been, don’t put any essential information below 600 pixels. Today, this is not always the case. Viewers now have access to a variety of screens, from iPhones, to giant TV’s, and it’s getting more and more difficult to establish the ‘fold’ line on a specific device. You can’t possibly design for all outcomes, and so the “fold” is starting to become irrelevant. To add to the mayhem, users today also aren’t afraid of scrolling either, and devices like the iPhone, make this intuitive and essential to view important information. With this new openness to scroll, these invisible boundaries seem somewhat unnecessary.

Even though we are moving into an entire new use of space, it doesn’t mean we should totally ignore the idea of the fold. The most important messages should remain near the top. We still need to respect the importance of the initial visual hit a viewer gets when they reach a site. It’s a powerful tool and and can help to capture the attention of the audience and perhaps even keep them scrolling on down the page.


2011 Web Trend: Full Image Backgrounds

Wednesday, January 26th, 2011

Want a show-stopper? Then hop on trend with full image backgrounds. A large scale illustration or photo background instantly grabs your viewer’s attention, adding life and creating a more dynamic and engaging look and feel. These over-sized backgrounds are great, but should be used in the right setting. Sites that already have image galleries make great candidates, think photography studio, design agency, fashion designer, illustrator, or even a picturesque resort. Beware, the most common issue with large backgrounds it that they have to conform to many different screen resolutions, so make sure you test, test, test and use an image large enough to fit the width for the most commonly used screen resolutions. Check out these images below for this new trend in action.


2011 Web Trend: Parallax Scrolling

Monday, January 10th, 2011

First seen in side scrolling video games from the 80′s, Parallax Scrolling is a special technique that gives an illusion of depth in a video game, or in today’s case, a web site. Parallax scrolling uses multiple layers to create the illusion of a 3D space, where background images move slower than foreground images. When used in web design, it can add a great sense of depth to the look of your site and is best used as a header, footer, or background. The effect can be created using CSS and some JQuery plugins (I’ll leave that up the the dev team). To experience this technique in action, check out Silver Back App. You’ll have to scale your screen width to get the full experience. Also, The Old Pulteney Row to the Pole web site uses a top down parallax that is super sweet. Be on the lookout for more designs like these popping up in 2011. For more info and how it can be done, check out Think Vitamin’s post on how to recreate the silverbacks parallax effect.


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