A new trend is making its way through cyberspace – long shadow design.

The concept, which borrows themes from flat design, is popping up in a big way in recent weeks. The trend is impacting user interface elements and icons the strongest, but is starting to creep into other parts of website design.

What is Long Shadow Design?

Long shadows extend far past the object in which they mirror.

“Long shadow” is not a new term. It is actually borrowed from lighting and photography. Photographers often show long shadows in images to create a high-drama effect. In natural light, long shadows are cast when the sun ins near the horizon, occurring both at dusk and dawn.

In design, long shadows have become a quick trend. In design, long shadows are being added to objects in flat design schemes. The shadows, which often rest at a 45-degree angle, mirror an object and add a lot of emphasis and drama.

What’s different about these shadows are that, they too, are flat. Designers are creating long shadows using a tint of the color with no fading, shading or graduation of color.

It seems like many designers hopped on long shadows almost all at once and are using the same basic idea. Even as far as the direction and angle of each shadow. (Most shadows fall to the lower right corner of the object at a 45-degree angle, although some designers are using 120 degrees.) Shadow edges are sharp and add an extra element of depth to the overall design.

Long shadow design is more limited than other concepts, because it is intended only for small elements. It is not something that designers are using for an entire project and is almost exclusively limited to icons or buttons.

So far, long shadow design is used primarily for smaller objects and elements such as icons. Shadows live within the element and often extend beyond an object to the surrounding frame. Many of the long shadow concepts we are seeing come from projects where designers are looking for creative ways to build icons for the upcomingApple iOS 7.

Borrowing from Flat

Long shadow design is borrowing a lot of the principles of flat design. It could even be considered a form of flat design (or you might call it “almost flat”).

Long shadow design is based on simple shapes and clean lines, as is flat design. It also uses a color palette that is bright and vibrant. Color is also used for shadows, which may just be a shade darker than the hue it mirrors, rather than black or gray.

By picking up and mirroring flat design concepts, long shadow design is meant to be used in conjunction with a flat design scheme. Elements employing long shadow design can be used with elements that are completely flat to create an interesting overall design scheme.

Where long shadow design removes itself from flat design is with the idea that elements take on more of a three-dimensional effect. While it works for long shadow design, some purists may argue that any effect designed to create that extra layer of dimension is not entirely flat.

Gallery of Long Shadow Design

Long shadow design is popular in mockups right now, although not as many projects have made it to publication yet. (But expect to see quite a few of them soon.)

The most notable example of long shadow design right now comes from American retailer JC Penney, which is running a television and internet ad campaign that uses long shadows.

Dribbble is a great place to look for flat and long shadow design inspiration. Here’s a gallery of some great examples of long shadows.

Long Shadow Design Resources

Long Shadow Generator

Long Shadows in CSS3

Google Fonts CSS longshade Icon

Read more…

We’ve talked a lot here at webusabilityhelp about flat design – so you probably know what the trend is all about at this point.

The short version: Flat design is a style that does not use tricks or embellishments such as shadows, embossing or gradients to make elements look “real.” The design is characterized by a minimalistic style that uses color and typography in bold ways to create a distinct user experience.

That idea has been discussed in great detail for web projects – especially mobile apps – but not so much for when it comes to print design. And readers of this blog asked me about it on Twitter: How can you convert the flat style to print applications?

It’s easier than you might think.

Getting On-Trend

Why would you ever use flat design for both web and print design projects?

1. Because you like the look of flat design.
2. To brand materials in the same way for a consistent look.

Flat design is not brand new, even though it is very trendy right now. It is a concept that has come to the surface in many forms over the years. And it does work for a variety of projects.

In addition to web and application design, flat concepts have been used for quite some time on business cards, posters and even newspaper design. (Wall Street Journal above-the-fold promos often showcase the flat design style.)

Tips for Flat and Printing

There are a few considerations for printing using a flat design scheme – the difference in color, bleed from printing and overall vibrancy.

When translating a flat design from digital to print, colors have to be remixed for printing. Digital projects often use colors based on HEX or RGB values, while most printers prefer CMYK (cyan, magenta, yellow, black). CMYK printing uses four printer “plates” to create every color in the document and colors are mixed based on the four plate colors used.

When looking at a screen, very little consideration is given to bleed from one color to the next. In some instances colors can seem to mesh together a little, but this is a much more common problem when working with print materials. The darker a color, the more likely it is to bleed into a lighter color. The weight of the paper used also makes a big difference as well. Thinner paper types bleed much more than thicker, heavier-weight paper. This bleed is most commonly noticed when it affects the quality of type. If you are using a lot of ink (typically meaning use of a dark hue), make sure to use type that has a thicker, bolder stroke weight to absorb some of the potential ink bleed.

Finally, think about overall color vibrancy and selection. Digital display has a higher capacity to show more colors and variations in truer and sharper color than most standard printing (think posters and business cards). There is can be considerably less contrast between close shades when working with CMYK color (depending on the printing method). So you will likely not want to use both Amethyst and Wisteria from the Flat UI Color palette below in print because they may end up looking like the same color.

What Does This Mean for Flat Web Design?

If you are designing for digital only, all of these considerations mean nothing.

If your projects cross over between print and web, they are of utmost importance.

Web designers may find that they choose to use certain colors and tints because of cross-platform compatibility. Instead of matching colors with slight to moderate changes in color value, a designer may instead go bolder to create more contrast. This look might be easier to use in multiple mediums.

Font selection can also be impacted if a project will be used in print and web applications. For print, you must have a font to package, prep and print it. You can “borrow” fonts for use online from services such as Google Web Fonts, without having them installed on your computer. To maintain consistent font usage, a designer may look toward a different typeface they own for these projects.

In the end, designers must think about the complete package from start to finish. It can be quite difficult to convert a flat-designed website into a print counterpart after the fact, if print was never considered in the original plan.

Flat Colors as CMYK

Flat UI Colors is a fun little site that showcases 20 of the most popular hues in flat design right now. But the color swatches are only available in HEX and RGB.

We’ve converted each color to CMYK for you to use in print projects. Remember that projects come off different printing presses and from different printers in quite different ways, so make sure to adjust the color settings to best work with your printer.

A couple things to keep in mind when using these colors across platforms:

They will look slightly different from RGB to CMYK. These colors were created for flat digital design projects.

My suggestion? Use colors from the second and fourth rows for print projects.

The colors on these rows are a little more saturated and contain more colors from the CMYK mix. (Note all the zeroes in the first and third rows? That’s why for printing you will likely want to avoid those colors.)

Another tip? If you are planning to use white text, opt for a color with no black (K). If you are planning to use black (K) as the text color, use colors that contain black in the color mix. This can help keep print registration a little sharper.

Flat Fonts for Printing

Source: http://designmodo.com/flat-design-web-print/#ixzz2aVpOj9Z6

Read more…