Posted: 22 Feb 2010 05:43 AM PST
E-commerce design requires much of the same design knowledge and skill as any other type of web design. The pages are built from many of the same elements – headers, footers, columns, graphics, and text, among other things. But there are additional elements that need to be considered, from both a design and usability standpoint. Site architecture is often more complicated, with products sometimes falling into multiple categories. Product pages need to be laid out in a way that makes it easy for customers to see exactly what it is they’re getting. And the checkout process needs to be as simple and streamlined as possible while still capturing necessary information and encouraging repeat business. Overall, e-commerce design takes a bit more planning and care than simpler website forms.
A good e-commerce design will guide customers through finding the product they’re looking for through the end of their purchase. It will make them comfortable making an online purchase in general, and specifically from your site. And it will do so in a way that’s as user-friendly as possible. Design can play a huge part in this process, as a good design will guide them through the process seamlessly.
Below is a roundup of more than 100 e-commerce site resources. There are sources to inspire you, a collection of excellent shopping carts and e-commerce platforms, a ton of stock icons you can use in your designs, and a few tutorials to help you out. We’ve even included some ready-made e-commerce templates that you can customize and that can be used with or without a CMS.
The first place to start with any new website design is with inspiration. Below are some great roundups and collections of inspiring e-commerce designs to get you thinking.
20 of the Best e-commerce Websites – A roundup of excellent e-commerce site designs from Tutorial Blog.
Cart Craze – A gallery that showcases only e-commerce site designs.
23 Excellent Examples of How to Design Online Stores – A great roundup of fantastic e-commerce sites from InspectElement.
20 Well Designed E-Commerce Websites – A showcase of site designs from Dzine Blog.
50 Inspirational e-commerce Website Designs – An awesome showcase from Vandelay Design Blog.
35 Excellent e-commerce User Interface Designs – Another great e-commerce design showcase from Vandelay Design Blog.
Call to Action Buttons
107 Add to Cart Buttons of the Top Online Retailers – A roundup of add to cart buttons from some top online stores, as well as some analysis.
80 Examples of Add to Cart Buttons for Design Inspiration – This is a phenomenal collection of add to cart buttons assembled by Six Revisions.
20 e-commerce Add To Cart Buttons For Your Inspiration – Another excellent roundup of real-world examples.
"Add to Cart" Button Showcase – A post from Vandelay Design Blog that showcases a variety of add to cart buttons.
2. Shopping Carts and e-commerce Platforms
Unless your e-commerce site has very, very unique needs, you’ll save yourself a lot of time by using a ready-made shopping cart or e-commerce platform. Below are some of the best, many of which are free, and some of which will work alongside other CMSs.
PrestaShop – A free, open-source, scalable shopping cart with an intuitive interface.
OpenCart – A free, PHP-based, open-source shopping cart that includes support for product reviews, automatic image resizing, and downloadable products.
Magento – An e-commerce platform that includes both free community versions and paid enterprise versions.
CubeCart – A shopping cart with two versions available, one of which is free.
Zen Cart – A free open-source shopping cart with free add-ons available.
osCommerce – A free and open source shopping cart that powers more than 225,000 online stores around the world.
Digistore – A free, open source shopping cart built on osCommerce.
StoreSprite – A free and powerful PHP/MySQL shopping cart that’s easy to use.
BossCart – A PHP-based shopping cart with free and premium versions available.
FatFreeCart – A copy-and-paste shopping cart solution that works with PayPal or Google Checkout and doesn’t require you to sign up for an account or install anything.
WordPress e-Commerce – A free, open source plugin for WP with free and paid add-ons.
Shopp – An incredibly easy to use, premium shopping cart for WP.
Ubercart – A shopping cart plugin for Drupal 5 or 6.
Drupal e-Commerce – An e-commerce plugin for Drupal that works with PayPal, Authorize.net, and other payment systems.
VirtueMart – A free shopping cart plugin for Joomla.
Seber Cart – A small, easy to use shopping cart plugin for Joomla.
Joomla jQuery Cart – jCart is an easy-to-install and customize, free Ajax shopping cart.
3. Stock Icons and Design Elements
There’s no sense in reinventing the wheel. Rather than creating all of your icons from scratch, why not see if there are some stock icons out there that suit your needs? Below are dozens of great options, as well as some general design elements (like pricing tables) you can use on your site.
Stock e-commerce Themes
35 Free High-Quality E-Commerce Templates – A great roundup of premade e-commerce themes, most of which can be adapted to meet your own needs, from Smashing Magazine.
25 Magento Templates for Your E-Commerce Business – Another great collection from Smashing Magazine of Magento templates.
20+ Best e-commerce (WordPress Themes, Templates, Icons, Flash Sites) Collection – An excellent collection of templates and other design elements.
The Clothes Shop Theme – A plugin-free WordPress online clothing store theme.
The Furniture Store Theme – A plugin-free furniture store WordPress theme.
enVirashop – A plugin-free, flexible e-commerce theme for WordPress.
wpShop Reloaded – A flexible WordPress e-commerce theme with two child themes.
RGBSTore e-commerce – An e-commerce-ready HTML template that can work with Magento, osCommerce, Zen Cart and others.
Boutique – An elegant e-commerce HTML template.
Sancart – A simple OpenCart e-commerce template.
OScomm E-Commerce Template – An e-commerce HTML template.
ClassyShop – An e-commerce template built on the 960 grid system.
Store Theme – A theme from Templatic that turns your standard WP installation into an online store.
Crafty Cart Theme – A great, free WP theme that turns your WP site into an online store.
SimpleCart(js) – Another free WP theme to turn your site into an online store.
Market Theme – Market is yet another theme that lets you turn a standard WP installation into an online store.
ShopperPress – A WP theme that turns your WP install into an e-commerce site that works with Google Checkout, PayPal, Authorize.net, and a number of other payment gateways.
e-commerce Web Elements, Dark Grey & Green – A set of design elements in dark gray and lime green for your e-commerce site.
Web 2.0 Button (e-commerce #2) – A collection of e-commerce call to action buttons.
e-commerce Web Elements – A set of editable design elements with customizable color schemes.
Web Pack (Price Table, Banner, Buttons…) – A set of black and gray buttons and other design elements.
Price Table – Customizable price table elements.
Colorful Pricing Table – A very colorful, fully customizable price table element.
Pricing Tables – 5 Pack – A collection of pricing tables that includes 3D, horizontal, and vertical versions.
Pricing Tables – A pricing table element that includes a features list.
Super Bright Pricing Tables – A collection of pricing tables in four colors that can be mixed and matched.
Posted: 22 Feb 2010 12:26 AM PST
Today we are releasing yet another high quality icon set. Here is a set of 10 social network icons specially created for hongkiat readers from our friend at Iconshock.
These Iconshock icon set comes in 6 different sizes: 12×12, 16×16, 24×24, 128×128, 256×256 and 512×512 covering social various social network logos like Blogger, Delicious, Facebook, Flickr, Linked-in, Reddit, RSS feed, Stumble Upon, Technorati and Twitter. All icons are free and you can download and use them in either personal or commercial project. If you like what you are downloading, consider linking back to this article :)
Here are more icons we’ve previousled released:
|You are subscribed to email updates from hongkiat.com |
To stop receiving these emails, you may unsubscribe now.
|Email delivery powered by Google|
|Google Inc., 20 West Kinzie, Chicago IL USA 60610|