Smashing Magazine we smash you with the information that will make your life easier. really.
Showcase Of e-Commerce Fall Sales Designs
September 30th, 2008 in Design Showcase | 70 Comments
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).
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:
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.
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:
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:
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:
About the author
Ann Smarty is an SEO consultant and blogger. (al)
Mike M. (September 30th, 2008, 6:34 am)
Nice list. Gotta love fall =)
jaxter (September 30th, 2008, 6:42 am)
Nice designs …
g (September 30th, 2008, 6:46 am)
nice
James E. (September 30th, 2008, 6:57 am)
Magento has an upcoming Link [www.magentocommerce.com] that shows how to create these types of specials and promotions - should be interesting (although less from a creative standpoint and more from a technical rule-based view point).
Should be interesting. Thanks very much for this list - bookmarked!
Joseph Maguire (September 30th, 2008, 7:02 am)
Most of the designs here are well they are what they are a regurgitation of standards. but I do like cold water creek’s site and nordstrom’s attempt to break from standards. Although alot of these are just based on their creative from their print advertising material campaign. But really a nice collection. Good work smashing!
PS thankyou so much for adding the edit feature. May all other site’s start learning from you!!!!!
Eddy (September 30th, 2008, 7:27 am)
Very helpful, thanks man!
mikemike (September 30th, 2008, 7:30 am)
I don’t think that any site should be featured with code from 1998. Those sites were atrocious looking as well. I really think that beauty will be out of style before it takes hold in mainstream e-commerce. These people make millions, and they can’t spend the extra 100k on redoing their sites for humanity’s sake.
Beppone (September 30th, 2008, 7:50 am)
very niiice list… thanks
David (September 30th, 2008, 7:55 am)
I don’t see many examples of good design on this post. Most of them, like Macys, have big type and a red background every season, not just fall. And showcasing Ann Taylor’s Store is really scraping the bottom of the barrel. Most of the other sites just use some clipart leaves and call it fall. Are we trying to say, as long as there is a generic leaf that we must be “impressed by a new catchy look?” And the “Pfaltzgraff” example is pathetic.
Link [www.davidpcrawford.com]
Rick (September 30th, 2008, 8:00 am)
lol @ Aroma Boutique design, free bong with every order?
Chris Mills (September 30th, 2008, 8:22 am)
I guess fall leaves never get old …not. Also, someone please tell Venca.es that stock frilly vectors are overused.
tripdragon (September 30th, 2008, 8:39 am)
Arrrrg To painful on the eyes. It’s like you picked up the sunday paper and cut out everything you could find. What’s next? Coupons?
Billy (September 30th, 2008, 8:41 am)
Way too literal, and ugly to boot.
Tony (September 30th, 2008, 9:06 am)
not a fan of this post… nothing ground-breaking. SmashingMag always has great stuff and this isn’t great.
Ted (September 30th, 2008, 9:12 am)
My favorite season! Favorite colors, too. But like others have stated, it’s just more of the same thing… At least Ann Taylor aims more for a cool/cold feel and succeeds: even the red looks cold to the touch.
Arch (September 30th, 2008, 10:31 am)
This is interesting in context of fashion-related e-commerce. It makes total sense for a seasonal industry to have a design structure that supports seasonal design changes.
tripleGinteractive (September 30th, 2008, 10:41 am)
Never would have thought i would see all those leaves falling….
i really like the idea of letting the product do the selling, but the makeup one, well it cant really do it, you need to see it on someone not just its pretty container.
San (September 30th, 2008, 10:46 am)
They look like “Print ads.” I’m not saying its bad, but very different considering UI
mau (September 30th, 2008, 11:00 am)
I donno … why do all the designs look like regular advertisment flyers. Check this one: Link [www.mikatani.com]
;-)
delikatissen (September 30th, 2008, 11:38 am)
As interesting as always. Great post!
Timespeak (September 30th, 2008, 12:14 pm)
what happened to quality>quantity? Good topic Smashing, but some poor submissions.
heather (September 30th, 2008, 12:24 pm)
i think this post was necessary, because to see these ads and designs collectively, i think, we designers, need to start a movement to show these hot shot, big box sellers, what innovative and fine design could really do for their image and profits (their bottom line). it’s quite obvious from the post, they need us.
Lily Patterson (September 30th, 2008, 12:40 pm)
Thanks for your list, but I think you missed one :)
Link [fall.tnvacation.com]
rSharp (September 30th, 2008, 1:01 pm)
The demographic of these ads are prominently developed toward the female spender. Leads me to wonder where males are spending on the internet during this season and what fall design trends are geared more toward that demographic.
I too feel that these design elements are over used… but they are tried and true. What was used prior to color printing? I too would love to see a breath of fresh air in fall design.
nick (September 30th, 2008, 1:36 pm)
Awesome!
Roshan (September 30th, 2008, 3:37 pm)
As usual, lots of resources in one single post.
That is what i love about you guys.
Thank you.
Link [www.instantshift.com]
Okibi (September 30th, 2008, 4:17 pm)
Nothing very revolutionary there but I appreciate the trouble you went to compiling this article. Remember your international audience; not all of us have simplified autumn down to “fall” and some of us are enjoying spring weather.
dragoshell (September 30th, 2008, 4:18 pm)
not so great article… I did not found anything breath-taking like in the old articles… :(
Brian Gottier (September 30th, 2008, 5:42 pm)
I agree with dragoshell. I’m looking forward to seeing articles like the old days. There was a time when I checked this site for new articles literally every day, but the content has been lacking lately. I loved the “Best of ….” articles of the past. CSS tricks, Javascript tricks, PHP stuff… that’s the kind of stuff I wanna see!!!
Take care,
Brian of Link [www.brianswebdesign.com] - Temecula, CA, USA
Rakesh.S (September 30th, 2008, 9:11 pm)
Nice collection. The “Disney Online Shop” looks coool..
Sam (September 30th, 2008, 9:38 pm)
Amazing ideas! Look really great. *
Justin (www.DotNetMushroom.com) (September 30th, 2008, 10:45 pm)
Visited most of the sites in this post but this time I wasn’t much impressed. Most of the sites look quite old in design such as the Sketchers site. Most of the nice images in this post are actually banners - and they weren’t much impressive either. In my honest opinion it is somewhat a bit of a too mixed up post. Still thanks for the effort.
Link [www.dotnetmushroom.com]
chetan (September 30th, 2008, 10:59 pm)
Not So Great… but thx for collection
Pallian (September 30th, 2008, 11:21 pm)
Thanks guys - was just looking for some inspiration for the online store I was going to create at Link [timothysykes.com]… this is simply perfect!
insic2.0 (October 1st, 2008, 12:01 am)
Cool designs
Tom (October 1st, 2008, 12:10 am)
You cheated with the logo!
I can see where it was simply cropped for comparison ;)
Other than that, the big ecommerce sites tend to have a very similar style - even with sales on it seems!
niemi (October 1st, 2008, 12:58 am)
I don’t really see any fall on the newegg.com site, it looks like the same to me.
Le Marquis (October 1st, 2008, 12:59 am)
I really don’t know what I have to think about this showcase…
So Purple is the fashion color for this year???
LC (October 1st, 2008, 1:22 am)
I hate autumn … but well the real question is “are these (sad and flat) seasonal designs generating money ?”.
(the edit function is great, wanted to do that for years)
obozdag (October 1st, 2008, 2:57 am)
Nice work. People who don’t like should send their breath-taking designs as some did for us to feel the difference!
Aftab Khalid (October 1st, 2008, 4:13 am)
Very Cool Smash — Very Cool Design
Rob (October 1st, 2008, 4:40 am)
I thought this post was pretty good and couldn’t see why others were complaining…. then i looked at the actual sites, and now i see!
The designs are okay on their own but within the site they don’t go.
However, it must be difficult to design an autumn “site” when you can only change one picture keeping the rest of the site the same.
Wender (October 1st, 2008, 5:02 am)
Another Beautiful one:
Link [www.roupasdebazar.com.br]
MSOnWired (October 1st, 2008, 6:14 am)
They all pretty much look the same. The MetroStyle and the Nordstrom designs stand out more than others. Most of those have major leaf over-kill.
onwired.com
Uncreative (October 1st, 2008, 7:08 am)
Sorry, clearly a low point and the worst article I’ve seen on here so far.
boogieman (October 1st, 2008, 7:35 am)
@Okibi
shut the hell up
bycolor (October 1st, 2008, 7:59 am)
Nordstrom looks good, but the majority is a rather “No”. Eg: The Ann Tayolor Loft website got tables all over the place and its overall look is outdated. Oh, come on… :) A couple of leaves and an autumnish shade won’t save the day.
Nothing outstanding. At least, nothing to be mentioned in a Smashing Magazine article.
dan black (October 1st, 2008, 1:08 pm)
check out some bluefly fall stuff, it’s a little less obvious.
Link [www.bluefly.com]
Link [www.bluefly.com]
Karen (October 1st, 2008, 1:32 pm)
As an SEO consultant, I thought it would have been more fitting for you to point out that most of these site have little to no actual content on their home pages as opposed to the colours used to announce autumn (in the northern hemisphere). It’s not all about looks…and even then I didn’t actually see anything here that really caught my eye.
Chris Mills (October 1st, 2008, 6:47 pm)
I failed to thank Smashing for posting print design samples in my earlier post. Every design blog on the web seems to promote only web design instead of taking the more holistic approach. Keep it up!
Chris Mills (October 1st, 2008, 6:50 pm)
Excuse me, thought some of these were print but instead seem to be web. How about some print stuff Smashing?
gr8pixel (October 1st, 2008, 11:20 pm)
awesome!
Thomas Strobl (October 2nd, 2008, 1:12 am)
how I freakin’ hate those designs. anyway nice article.
DRM (October 2nd, 2008, 11:24 am)
I’ve come to realize that Smashing Mag probably gets paid for their posts. Because honestly, who in their right mind cares about the current state of banner advertising for the fall season? Try tackling a real issue — like, how to get more business during this economic crisis, or how to keep clients happy while maintaining your aesthetic bottom line.
Something that matters.
Raj S (October 2nd, 2008, 11:12 pm)
Here is one more of the E-commerce Web site. The Web site is using flash.
Link [www.lightningfast.com]
Jimmy (October 3rd, 2008, 4:10 am)
Any ideas how I could improve the attached design for a fall offer . Or even a general improvement on the design.
Link [www.mybusinessgifts.co.uk]
Victorita (October 3rd, 2008, 6:40 am)
And don´t forget to check out Link [www.zarahome.com], it´s the greatest interiors website.
madewira (October 4th, 2008, 9:42 am)
nice typography there. thanks smashing ;)
Dariusz (October 6th, 2008, 7:02 am)
very nice graphics especially the girl with bag surrounded by autumn leafs. I like pink coulour also….
Link []
James Lindsay (October 6th, 2008, 12:04 pm)
I was really interested in this article. Well done SM!
I was traipsing around some online shops, and I came across a good one for autumn! Take a look at the Link [www.jackwills.co.uk]
-James!
Christopher Ross (thisismyurl.com) (October 8th, 2008, 4:01 am)
Does anybody know who did the Eddiebauer.com site? Was it in-house or an agency?
freeky_naughty (October 8th, 2008, 7:42 am)
Interesting article. And I must say I adore the art direction of the models on Elegance.de. fn
Rafi (October 23rd, 2008, 4:10 am)
Good collection. I agree that since the title indicates that this is fall sales ecommerce collection, the list encompasses what it promises. Nice one.