Smashing Magazine - we smash you with the information that will make your life easier. really.

The Web is changing along with the weather outside the window, adopting bright autumn-inspired makeovers for seasonal fall sales and special offers. The autumn (or fall) season is primarily associated with:

• harvest (most cultures celebrate one of various harvest festivals this season),
• bright, hot colors (ranging from yellow to red) reflecting autumn leaf colors,
• falling leaves, etc.

Websites are adapting to these associations. Most e-commerce websites are running seasonal promotions stylized with distinctive fall designs:

• Most widely used colors: red and yellow.
• Most widely used decorative elements: yellow and red (falling) leaves.

The main purposes of these seasonal design changes include (though, of course, are not limited to):

• to attract more attention: impressed by a new catchy look, visitors are more likely to spread the word;
• to increase brand awareness by implementing seasonal decorative elements in the company banner or logo;
• to make a special offer stand out in the background of the overall design (and thus increase conversion rates).

[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]

1. Focus on colors

Red, yellow and violet colors instantly set the atmosphere of the bright season. Notice how well huge, bold typography is used in some of the designs displayed below. This is the key to a successful promo-design.

Macy’s online store sticks to a red palette for the background of its special offer text. The vivid red color is contrasted with a gray palette, which enhances the effect:

Ann Taylor’s online store also sticks to the color red for its text background. However, in this case, the color lacks contrast, which makes the offer look much less autumn-like:

Eddiebauer.com gets a stylized orange look. The design is simple yet communicates the message effectively:

Onlineshoes adds a few complementary design elements, sticking to an orange palette for the special offer text background and red for the text that needs to stand out:

Skechers.com focuses on orange colors in its Flash-based ad. The impression is enhanced by different hues of the same color:

1800flowers.com not only chose orange colors for the text backgrounds and major page elements but also used the same palette for its actual products. In this case, the color choice and featured products work well together and the technique creates a bright, consistent impression that lasts:

The Popcorn Factory chose a similar tactic, matching the page colors to the products:

Gymboree sticks to the color red in stylizing both the page background and the displayed products. A few distinctive design decisions (e.g. little leaves in the corners) increase the effect and create an appropriate mood:

Newegg.com goes a step further, giving a fall look to all of the page elements: background decorative elements (leaves and harvest), text color (primarily orange) and even stylized products (autumn scenes displayed on the monitors):

Cabelas‘ orange-brown-yellow palette does not render the fall atmosphere as distinctively as the above examples, but still creates some kind of autumn mood:

Elegance.de

Wilsons Leather

La Redoute

Gap.com

JCPenney

Ross-Simons.com

Classic Closeouts

Spiegel

Metrostyle

VictoriasSecret.com

2. Focus on the imagery (e.g. leaves)

To communicate the atmosphere of the fall, designers use common metaphers such as leaves which are the most popular motif. The latter is almost always used together with appropriate color combinations and helps the promo-image to stand out by appealing and vibrant visuals. Still, colors are sometimes used very sparsely and almost always remain passive in the background.

Damart.fr

Nordstrom

Venca.es

Beauty Bridge uses yellow and red leaves as the product background:

VisitScotland.com also sets up a fall atmosphere with the help of red and yellow leaves, which frame the website’s navigation:

Sports Authority avoids seasonal colors. Still, traditional decorative elements (i.e. leaves) are added (top-left corner) to make the fall sale stand out:

Shoes.com has a most impressive design for its fall sale landing page, implementing an autumn theme consistently throughout the Flash-based page banner. The products are surrounded by perfectly matched seasonal decorative elements: falling leaves, brown trees and beautiful hover elements (stylized as yellow leaves):

For its seasonal sale, Disney Online Shop introduces a bright pop-up window, stylized with red text and orange and green leaves:

Apple Seeds adds some spice to its fall landing page with a single small orange leaf that doesn’t distract the visitor’s attention but renders the atmosphere perfectly:

eToys.com

FragranceNet.com

3. Creating an Autumn Mood with Certain Design Elements

3.1. Page background

Coldwatercreek.com chose an orange background with orange leaves:

3.2. Page Banner

Some companies went no further than stylizing the page banner:

Barnes&Noble:

Newegg.com:

3.3. Illustrations

Aroma Boutique uses an illustration with a girl and leaves to highlight the fall sale.

3.4. Matching products

ShopBop.com places its products in the middle of the page, creating the perfect image of rainy weather outside the window:

Linen Source — introducing here a new product line: wall art — gives preference to products displaying autumn-looking scenes:

3.5. Company/Website Logo

Pfaltzgraff adds a tiny autumn-looking detail to its company logo. Compare: