10 One-of-a-Kind E-commerce Websites That Put Ordinary Sites to Shame

This collection of creative e-commerce websites includes those that take a unique approach to creating a storefront, and each are discussed in light of what makes their creative designs work so well.

Hopefully, you too can find some inspiration in the collection below to help you in your own e-commerce website designs. Which of these made a big impression on you?

Mom and Popcorn

This vintage website is a very unique experience in that it jumps off the page and makes you forget what decade you are really in. Although not the typical clean cut design of most popular e-commerce sites, it remains easy to use and bursts with creativity. It is very easy to find what you are looking for and the prices are prominent. You don't have to click around aimlessly to figure out what to do next. Five stars for Mom & Popcorn!

The Affair

The Affair is a UK based, offbeat clothing company that makes no apologies; neither for its darkness and morbid atmosphere, nor for its unique shopping design. Although simple and uncluttered, it is anything but standard. For one thing it has a discreet but impossible to miss shopping cart link in the corner. When an item is added to the cart, there is an animation of the selected item dropping into the shopping cart. This is a great touch because so often people click several times to be sure their selection was made and end up with too much in the cart at the end. With The Affair's unique concept, there is no confusion. Another useful feature is that each product's thumbnail offers a 360 degree view so you can examine it from all angles. It's these details that make all the difference.

Storenvy

Storenvy is ingenious, both in concept and in execution. It takes social networking, Etsy, and Pinterest and combines them all into one with an interface as easy to use as Blogspot. It allows users to create their own store to sell stuff, or to buy by browsing hundreds of items from different sellers at once. It is able to pack a lot of information and products into a small space without getting cluttered or confusing. It comes with a built-in store creation wizard to make it super easy to get out there and sell your goodies. I only wish I had thought of it first!

Saddleback

Saddleback is a beautifully and meticulously designed website that sells all types of leather products. Every element of the site contributes to its design, which is a breath of fresh air from other designs that can be weighty and cluttered, even if nice looking. The attention to detail is what makes this rich site still completely practical and usable. One particularly nice touch is that it includes a list of the sites of their business rivals, making it easy to see that Saddleback is the complete package.

Heartbreaker Fashion

Heartbreaker has a pleasant design with a good use of patterns and textures, which is what makes it different from other creative e-commerce websites. The trend has been to avoid patterns because they can distract shoppers from the product. When done right, however, it can really enhance the store front. Heartbreaker also has a handy shopping cart box in the footer of the site as well as the top. Even though it breaks the mold, it is still very user friendly, and even stronger for it.

Oi Polloi

Oi Polloi is a retro site that sells clothes and footwear. It is surprising to find that it does not have a shopping cart immediately available - only once an item is selected does a shopping cart (here called a "Basket") descend as an overlay to the site, showing exactly what you bought, what size, and how much it is, as well as a subtotal. So there is not a separate page for the checkout, which is quite efficient in my opinion. Never be afraid to reinvent the wheel!

A Modern Eden

A Modern Eden sells prints, decals, and stuffed animals with strange angular designs. It makes use of trendy colors, and where normally the bright green background would be tacky or distracting, in this usage it is not only appropriate but adds greatly to the fun and feel of the site. The ribbon highlighting the shopping basket icon is a very nice touch as well.

Patrick Ervell

Patrik Ervell sells fashionable men's clothing with a really cool twist. Where expensive men's clothes can often appear stiff or uncomfortable, this site helps guys envision themselves wearing the clothing, with use of live moving models with every product! Normally this is a huge no-no. Animations can quickly become a very bad idea, especially if there is more than one moving item per page. But Patrik Ervell accomplishes it beautifully, with a sterile white background and simple, concise text only interspersed where necessary.

Marie Catrib's

Marie Catrib's uses vivid pastel colors; friendly, bold text; and interesting dotted lines and patterns to make the pastry and bread products come alive. Some unique elements include the ability to search by vegan or gluten-free, a toggle button to hide half the website to focus on browsing, most information in the footer, and having ALL the offered products on the home page of the site. Simple, easy to use, and captivating.

Brand Neusense

Brand Neusense breaks a lot of rules by being too crowded, having too many colors, and incorporating too many animations - yet, somehow it all works. First of all, the models look like real people, not - for lack of a better word - models. Even more so, though, this creative e-commerce website stands out because the homepage focuses more on the various brands it sells and on ads than it does on its product. It is designed thoughtfully for its target market, and that's all you can ask of a web designer.

So whether you have an upcoming creative e-commerce website design project coming up or you need to revamp your e-commerce site design, use the examples above in your decisions. Doing your research and noting what others do right (or wrong) is one of the best ways to create a website that puts ordinary to shame.

Parallax Scrolling 101: The Good, The Bad and The Beautiful

One of the hottest trends in website design is parallax scrolling. First employed by Ian Coyle on the Nike Better World site in 2011, this is a special scrolling technique wherein background images move by the camera – or in this case, your computer screen – more slowly than images in the foreground, thereby creating an illusion of depth in what is in reality a two-dimensional environment on your screen.

With its explosive popularity, you have likely seen this effect in use but may not have known exactly what it was or how parallax scrolling is reshaping the landscape of today’s Web. But just like any trend or technique, parallax scrolling is not the right fit for every site, and it does have a few drawbacks. To help you decide whether this is a bandwagon you should jump on, let’s dive in and take a look at parallax scrolling from every angle – the good, the bad and the beautiful.

The good

The obvious benefit of parallax scrolling is its undeniable visual wow factor. Even though this technique has become very popular of late, it is still not so overdone that it has become commonplace. This means that any site that uses this approach well will make a lasting impression on its visitors. In a world where every company and organization is looking for a way to stand out from the crowd, this can be a powerful advantage.

The bad

While the bold visual impact of parallax scrolling is hard to beat, there is a downside to all that eye-popping punch: due to the weight of these graphic-intensive designs, these sites generally take a bit longer to load. In our modern age of impatience, this could potentially be a deal-breaker. Many people will not wait more than a few seconds for your site to load, so if your awesome parallax scrolling means that you have a 20-second load time (which is not unheard of), that is a big problem.

The reason that parallax sites take longer to load is due to the size of the images that must be used to create this style of presentation. As a result, you must be cautious in how you implement this technique. It's easy to overdo it, thereby making your site so large and cumbersome that you’ll turn away customers who aren’t inclined to wait for the page and its images to load.

If you are considering incorporating a parallax effect on your site, be sure to consider performance and work with your web development team to ensure that all images are optimized so that your site not only looks great but also loads as quickly as possible.

The beautiful

Let’s look at a few examples of parallax scrolling that really amp up the wow factor:

Life Of Pi

The website for the movie Life of Pi illustrates the incredible journey of not only the characters in the film but also of the filmmakers who took on this challenging story.

Through the use of numerous still images taken from the film and pieced together, the implementation of the scrolling technique here gives the illusion of video content, providing an element of motion that really enhances the presentation.

Other effects used include images that start out black and white or as sketches and are colored in as you scroll down the page, as well as content that appears from the sides of the screen. In this way, the site is the perfect reflection of a film that relies heavily on visual effects, recreating that feeling of “movie magic” on the screen for its visitors.

Rimmel London

Rimmel London's site uses a traditional parallax effect, where images of the company's products appear in the foreground and scroll at a different rate than those in the background. This gives the site a sense of visual interest and perception of dimension that you simply would not get with flat, static photographs.

Parallax.js

This site, which is a sandbox aimed at web developers, has an incredibly complex and layered implementation of the parallax effect.

The scene depicted has multiple layers of ocean waves that move at different speeds and patterns along with a lighthouse that bobs up and down to give the illusion of an undulating seascape. For added effect, users on mobile devices equipped with a gyroscope can use the orientation of the device to manipulate the way the page moves and flows.

As this intricately layered demonstration of the parallax scrolling effect shows, with so many layers and axes of motion at your disposal, there is a mind-boggling array of possibilities for the kind of experience you could design for your visitors.

Make Your Money Matter

The purpose behind this website is to illustrate the difference between putting your money in a bank versus a credit union.

As you scroll down the page, a series of whimsical illustrations are layered into the page to tell the story of “where your money really goes” when you put it in a bank. In doing so, a topic that is fairly dry and serious becomes much more engaging and approachable through the strength of its presentation. The end result is much more powerful than it would be had the site’s owners simply published a flat page of content and bullet points relating this same information.

Sony

In much the same way as the site for Life of Pi, Sony uses a series of photographic images strung together to create the sensation that the visitor is watching a video in motion, as Sony’s products – ranging from a 4k television screen, speakers, a smartphone and more – appear to assemble themselves right before their very eyes.

This is a very cool presentation technique that far surpasses what traditional still photography alone could capture. Even a video of the product assembly process would not be nearly as engaging, because here, there is the added element of surrealism where the user’s scroll is what controls the build of the products.

TEDxGUC

The site for TedxGUC is far less intricate than others covered so far, but it’s still a great example of how parallax scrolling can deliver a narrative via the Web.

Using nothing but elementary illustrations and some well-written copy, this approach conveys its intended message much more effectively than it could through a few paragraphs of text alone. In fact, the strength of this site is in its simplicity, which goes to show that you do not need to be as over-the-top as the Life of Pi or Sony examples in order to use make effective use of the parallax scrolling technique. Sometimes, less is, in fact, more.

But does it convert?

The million dollar question is whether parallax scrolling has any measurable impact on the power of a website to convert leads and customers. While the results are still hazy on that front, a Purdue University study from 2013 did find that “although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience.” This is, of course, just one attempt to evaluate a relatively new technique, but it is noteworthy.

That being said, this particular study did not take into account the memorability of the sites included. The ability of parallax scrolling sites to make a lasting impression is one of their key benefits – one which could theoretically have a very real effect on the site’s ability to capture and convert customers.

In summary

While the business benefits of parallax scrolling are yet to be fully determined, the visual wow factor of this technique is very appealing and is one of the main reasons it has become such a popular trend. In the end, like any element of web design and marketing, parallax scrolling is something that you and your trusted web development team will need to decide whether or not it is a fit for your brand and your website.