“Of all the forms of non-verbal communication, color is the most instantaneous method of conveying messages and meanings. Among other uses, color stimulates and works synergistically with all of the senses, symbolizes abstract concepts and thoughts, expresses fantasy or wish fulfillment, recalls another time or place and produces an aesthetic or emotional response.

[...]

Much of the human reaction to color is subliminal and consumers are generally unaware of the pervasive and persuasive effects of color. Psychological effect is instantaneous as color stimulates the senses and exerts its power of suggestion. The power that color wields is seen at every level of communication: in corporate identification and logos, signage, advertising on television, billboards, in print media and packaging, on the computer and at point-of-purchase.”

SOURCE: Logo Design Color Psychology

It’s evident the importance of the color, and of its combinations, when we want to communicate a precise message.
In this collection, I have selected 50 creative logos which use the colors effectively and cleverly. Take a look!

50 Unique Colorful And Multicolored Logos

Don’t forget, you are free to suggest additional resources in the comments to this post.

High-Quality Handwritten Fonts For Your Designs

Jellyka – Estrya’s Handwriting

Breakfast at Michy’s

Journal Font

Hand of Sean Font

Luna Bar Font

Pappo’s Blues Band Font

PopStar Autograph Font

Christopher Hand Font

Dear Joe 5 Casual Font

Daniel Font

Joyful Juliana Font

Arsenale White Font

Nathan’s Notations Font

Note this! Font

Dali Font

Honey I Stole Your Jumper Font

Inkburrow Font

Jacek Zieba Jasinski Font

Child’s Play Font

Salamander Font

Aberration font

Gorillaz 1 Font

Brian Cary font

Emperors Scrawl font

SickCapitalVice Font

Jenny Font

Kids First Print Font

SF Burlington Script Fon

Kingthings Font

A Theme for murder Font

Tesla Font

Fely Font

!PaulMaul Font

Barbara Font

Good Foot Font

HarabaraHand Font

Jinky Font

Krazy Nights

Rabiohead

Next Font

Vielkalahizo Font

Download The Complete Social Media Icon Set

We want to provide useful freebies to our readers and for this reason, apart to explain how to create your own social media icon, you can download the complete set for free.

Create A Grungy Social Media Icon

This is a tutorial for beginners, in fact it explains some basic techniques in order to realize a nice social media icon. We hope that you can find useful this post.
First of all, you need the following material to complete the tutorial: Grunge Paper Texture from omnigenus.

Step 0

Let’s start, create new file with a size of 512×512 px, 72 dpi, RGB. Activate Ellipse shape tool. shift+click to create a circle.

Step 1

Add layer stye: Drop Shadow and Stroke (Layer > Layer Style > Drop Shadow and Layer > Layer Style > Stroke). Use settings shown below.

Step 2

In Layers panel, right click on the small “fx” icon at the end of circle layer and choose Create Layers. With this trick you can create the layers for the style, separating them from their layer.

Step 3

Create another circle, same size and layer style as previous one (or duplicate it). Move it to top right corner.

Step 4

Click Layer > Create Clipping Mask. This step will cut the second circle and put it inside first circle.

Step 5

Download paper grunge texture from deviantart. Place it above all layers and change its blend mode to Overlay.

Step 6

Click Layer > Create Clipping Mask. The texture will be inside the circle.

Step 7

Create a new layer (ctrl+shift+N) and with the Gradient Tool draw a white to black gradient. Change layer’s blend mode to Multiply.

Step 8

Again, click Layer > Create Clipping Mask.

Step 9

Hold down ctrl key and click all layers to select them. Hit ctrl+G to place all layers inside a group.

Step 10

Using Polygonal Lasso Tool to select a section of the circle as shown below in the image.

Step 11

Press ctrl+shift+I to reverse the selection.

Step 12

Click Add Layer Mask icon. This operation will add a layer mask to the group and it will hide unselected areas.

Step 13: Add Twitter’s Logo

So, we’ve just created a base for our icon. The next step is adding the logo of the web application. Go to Twitter and save its logo image.

In Photoshop, drag logo image to our icon file.

Step 14

For Twitter, we just need to add the “t”. So, erase “witter” text and press ctrl+T to resize the “t” of the logo.

Step 15

Activate Pen Tool. Choose shape icon from option bar and change foreground color to #4cd9ff. Carefully trace the “t” shape to redraw manually the logo.

Step 16

Add layer style Stroke to the logo. Use the settings shown below.

Here’s what we have so far.

Step 17: Save as Transparent PNG Icon

Now we need to remove empty areas around the icon. Click Image > Trim and click OK.

Click eye icon in front of “Background” layer to hide it. Now, we have a transparent icon.

Step 18

Click File > Save For Web & Device, choose Preset PNG-24 with Transparency. Click save to create a transparent PNG icon.

Conclusion

Our icon is flexible, we can use it for adding many logo: Facebook, Twitter, MySpace, LinkedIn, anything. All you have to do just add a character or the logo inside it. If you have other nice idea on creating icon, please share it in comment form below. Don’t forget: we love our reader, along this tutorial we will give you a free set of icon and its raw PSD file. Click here to download.

The theme has a two-columns layout with an unique soft grunge design and a nice featured news section, it includes many mordern qualities to create a nice sports blog/magazine. Sports News PVM is free to use in private and commercial projects because we love our readers.

Download Sports News PVM Theme for free

The theme is released under GNU General Public License. You can use it for all your web projects for free, without any restrictions and you may modify the theme as you wish. So if you like this resource for WordPress lovers, spread the word with a link to this article. Below you can download the theme + PSD source (.zip, 1.6 Mb – the font for the logo is available on Dafont: Hollywood Hills). You can also see the live preview of the our first free WordPress theme.

More Screenshots

Below you’ll find more screenshots of the theme. We hope you like the final result of our work.

Header Particular

Featured News Box

Post Container

More Information

The theme is packed full of nice features to encourage the readers to explore new posts an sections. Read below to know additional information on this freebie.

Features

• 1. Modern and beautiful web design
• 2. Tableless design and 100% CSS-based layout
• 3. Two columns of fixed width
• 4. Support post thumbnail images for 2.9
• 5. Widget Ready
• 6. XHTML 1.1 Transitional valid
• 7. The package also include the PSD-source files (logo included)
• 8. Commented CSS and theme PHP files for customization
• 9. Multi-browser compatibility. Tested under modern w3c compliant browsers Firefox 3, Safari 4, IE8, IE7 and Google Chrome 3

Installation

• STEP 1. Extract the files it contains. You need to preserve the directory structure in the archive when extracting these files
• STEP 2. Upload the theme to your /wp-content/themes/ directory
• STEP 3. Now go to Appearance >> Themes and activate the “Sports News PVM” theme
• STEP 4. Go to Appearance >> Sports News PVM Options and customize the theme

Sports News PVM Theme Options

• 1. Enable/Disable Featured news box in home page and choose the tag for featured posts
• 2. Show/Hide Ads section in the sidebar and customize all necessary URLs (images and links) and the title
• 3. Add your Feedburner link and your profiles on Social networks (Facebook, Twitter, Delicious, etc…)

Post Thumbnails

• Normal post thumbnail – As said the theme supports the new post thumbnail image system of Wordpress 2.9 and to use this feature, you must be within the post editing screen of your WordPress admin. Here, you can see a new meta box labeled “Post Thumbnail”. There is a link to “Set thumbnail,” which allow you to use the media uploader to load a new image. Once uploaded the image you can click on “Use as thumbnail” to add your thumbnail.
• Featured post thumbnails – For featured posts you can upload the images (big and small) to your site using the image upload feature on the post edit screen (in your WordPress admin panel).
  Once uploaded your images, scroll to the bottom of the post edit page and look for the “Custom Field” panel. Click on “Enter new” and type the word “feat_img” (big image) into the “Name” input field in your dialog box. Paste the URL to your image in the “Value” textarea input field of your custom fields dialog box and click the “Add custom field” button. Then repeat the operation: type the word “feat_img_sm” (small image) into the “Name” input field in your dialog box and paste the URL to your image in the “Value” textarea input field.

Size For Thumbnails

• Normal post thumnail image: size 200×200 px
• Featured post big image: size 340×189 px
• Featured post small image: size 75×40 px

Agreements

• 1. You can use them on as many domain names as you wish
• 2. You may use them for your clients’ projects / websites. Number of projects is not limited
• 3. You may not claim intellectual and exclusive ownership to any of the themes
• 4. You may not sub-license the original themes and their individual files to and with anyone else, unless a specific license within the theme states otherwise
• 5. You may modify them. However, you may not modify and then resell, unless the modified versions are drastically different from the originals
• 6. We reserve the right to refuse, cancel, or suspend service at our sole discretion and the right to change or modify these terms with no prior notice

Credits
All the icons which are used in “Sports News PVM” is free for use and Designed by following references: Socialize Icon Set, version 1.0 – Functions

CSS Gallery – Inspire Yourself!

PV.M Garage Gallery is not just another CSS design gallery. We want to collect stunning designs showing the merits of each website through a complete review. Our mission is to provide a deep inspiration to our readers and promote creative works of brilliant web designers.

You can also suggest a site to be featured in our Gallery filling out the Submit-To-Gallery form, we appreciate not only suggestions for your own sites, but any site that you feel is worthy of being listed in our gallery. We accept only websites written in (X)HTML/CSS with a sexy and high-quality design. Each site is carefully examined by our staff.

We hope you’ll find interesting our work, aimed to bring inspiration to web designers across the web, providing quality content.

Below you can see a collection of 60+ type-based logos, they are very clever and highly communicative. Enjoy it!

Note: in the bottom of the article there is a list of logo galleries where you can find more inspiration and more information about the logos (and their designer) collected in this post.

60+ Beautiful Type-Based Logos

Logo Design Resources

Below some useful websites to find inspiration, tips, resources to improve your logo design skills and more information about logos collected here, in this article. Don’t forget to subscribe our RSS Feed to stay connected with the PV.M Garage.

• Creattica.com
• LogoFi.com
• LogoMoose.com
• DeviantArt.com
• LogoPond
• LogoFromDreams.com
• LogogGala.com
• LogoOfTheDay.com
• LogoFaves.com
• LittleBoxOfIdeas.com
• TypeBased.com

What Is a Drop-Down Menu

Drop-down menu is a design element that allows the user to choose a value from a list of possible options.
It seems, at a first glance, a simple navigation menu, but when your mouse arrow points an item of the menu a magical two-dimensional panel appears through a drop-down effect. The panel provides more navigation options for the users and, often, these options are organized in groups to emphasize connections among items.

Its aim is to provide a tool for digging into the sections of the website in a clever and tidy way. In order to simplify navigation, the drop-down menu has to show the list of items, contained in the panel, at once without the need of scrolling.

Drop-Down Menus in Recent Web Design

This kind of navigation menu has the great asset of displaying at once more navigation options. So it could be a great solution when the designer has to organize several categories, products, sections or to reduce the number of steps to do an action (e.g. sign-in or login forms).
It has the big task of helping users to navigate the website in a correct way, it should provide a complete view of the contents and sections of the web application… and it would seem perfect for many web applications and, in fact, it is widespread. Below we can see some examples in wich a drop-down menu might be useful.

Organize Topics for a Web Magazine or a Website for Breaking News

Websites with a large amount of information and articles, like mirror.co.uk and sportsillustrated.cnn.com, require an easy-to-use navigation menu. A well-done mega drop-down menu might be a working solution in this case.

Arrange and Organize Categories and Tags in a Articulate Blog

A brilliant blog with good posts and a fresh design needs an effective navigation menu and, when there are several topics, a fresh drop-down effect for displaying subcategories is the best solution to create an impressive menu.

Show Several Products in an E-Commerce Website

In e-commerce website design is essential a clear presentation of products and services, and a limpid organization for the categories of articles. The drop-down menu is always a working feature for the on-line stores.

Display Login and Sign-Up Forms

The registration on a website is an operation that often annoys the user. A drop-down can be a good solution to build a quick sign-up form for saving space on your layout and for creating an user-friendly, one-step, module for the registration.

When there is the need of saving space on our home-page, a drop-down box is useful also for a login form. The famous microblogging service, Twitter, adopts a drop-down effect for the sign-in button in the home page.

Multi-Level Menu

Many usability experts recommend to avoid the use of drop-down multi-level menus because they aren’t user-friendly. In my honest opinion, the key isn’t to understand if a multi-level drop-down menu is usable or not, but if it’s possible to make it usable.
Porsche.com use a well-done multi-level menu and, friends, can you say that it isn’t usable? No!

Issue Behind Drop-Down Menu

It would seem that the drop-down menus are the resolution for many navigation problems. Caution: if something shines, it doesn’t mean that is gold.

Low Visibility for the Links

A drop-down menus is very useful to save space on your layout, they take up just the area of the title (or main category) in the layout, but is this a real advantage?

It’s evident that the “secondary” links (in the panel) don’t have a great visibility, they practically are hidden and only an interaction with the mouse pointer can activate the panel. A common mistake is that of not indicating the presence of a drop-down panel, thing that can be done through a little arrow or a similar symbol.
A hasty choice, in planning your navigation menu, may be counterproductive for the usability of your website.

Difficult Organization of the Navigation Options

An hard thing to do when we plan a mega menu is to organize the options within a relatively small space. A working approach is to separate links into groups of navigation; a general rules is of not offer huge groups with numerous options that are hard to scan.
We see, often, huge panel with many options that confuse the users. You should consider other design elements, and not a drop-down navigation menu, when you have to show a lot of information for a single item (e.g. a section for showing events).

If the menu panel have a huge list it can be very high and wide and, so, there is the possibility that low-resolution screens show only a portion of the mega drop-down.

Designer vs Response Time

Building a mega drop-down navigation menu we have to deal with the mouse movement, why?
There is two ways for displaying the panel: first, hover to activate; second, click to activate.

Remember that web interface elements should render within 0.1 seconds to provide users a complete sensation of control.
In the first case the panel appears when the pointer is over the item on the navbar, and to keep it active, the mouse arrow has to be over the menu to scan all options.
Now consider the normal activity of a user on a web page: the mouse pointer is in movement and at any passage over the drop-down menu it will cause the opening of the panel (0.1 seconds), your interface will become absolutely unusable for the simultaneous scrolling of several panels. So we can’t make the response time too fast to avoid the screen flicker. A good choice could be to add a delay of 0.3 – 0.5 seconds, so the pointer has to remain stationary for 0.4 – 0.6 seconds before of displaying the complete panel (a sort of fade-in).
Besides if the user lose the focus on the menu, or the user temporarily takes the pointer outside the active area, the panel disappear. To avoid that accidental movements of the mouse out of the active area can hide the panel (diagonal problem), we should plan the same delay also to hide the box.

In the second case the users have to click twice to open and close the panel, in this case there isn’t the problem for the movement of the pointer.

Designer vs User Behavior

It is well-known that the user don’t read, they scan a web page, so the designer have to emphasize the elements that might attract the user. A well-designed navigation menu is essential to stimulate the user at visiting more sections of the website.
A drop-down menu couldn’t be direct and intuitive for the visitors. They always choose the easy way and not the best way to obtain a gratification (an interesting content) and a big (and hard-to-scan) panel might not represent the easy way for our user.

Enjoy It Responsibly!

Modern web design is influenced by some misused and abused trends. Often the designer’s choices, in building a working web interface, aren’t completely focused on the purposes of the website and on usability; but they are driven by the frenzy of using new trends and techniques and, in most cases, a simple design element works better than a complicated and new solution.

We have just seen as a drop-down menu might be really useful, but it must be perfect to work well. So the designer has to find the right balance for his navigation menu and he has to understand which is the right choice between a standard navbar and a complete mega drop-down menu.

Below we can see some simple solutions that simplify navigation without the use of drop-downs.

Smashing Magazine – A simple navigation menu with main categories and sub-categories for the most famous web design magazine.

Ugmonk – A nice and clear solution for a navigation menu.

A last thing. It has been proved that a well-designed and sexy drop-down menu has a great appeal on the clients, it is sexy and make dynamic the website, but you must describe strengths and weaknesses to your client to allow an aware choice.

Showcase of Interesting Drop-Down Menus

In this presentation, you’ll find a variety of interesting drop-down menu designs.

Guitar Hero

Second Life

Intuitive Designs

BMI

Audi

Fuel Brand Network

Fuel Your Creativity

Giraffe Restaurants

Little Kids Bedrooms

Aviary

mtvU

The White House

MTV

Food Network

EA Video Games

GoMediaZine

Porsche

Media Temple

Mac.AppStorm

Sony USA

Incase

Republic

Owl

Philadelphia

Boxee

BuySellAds.com

Tuts+ Network

Psdtuts+

Mirror.co.uk

The Ad Feed

Designmess

Minimalist Design Magazine

Consorzio Creativo

Useful Tutorials to Learn How to Build Drop-Down Menus

Below some useful resources that may help you in making stunning drop-down navigation menus for your projects.

Mega Drop Down Menu w/ CSS & jQuery

Sexy Drop Down Menu w/ jQuery & CSS

Perfect signin dropdown box likes Twitter with jQuery

Incredible Drop Down Menu Solution With CSS Only

Sliding Jquery Menu

Take your time to read these fantastic articles written by helpful people and discover as the design community has said “Welcome!” at 2010.

That’s all guys… I hope you’ll find useful these bookmarks.

Amazing Tutorials and Tips for Web and Graphic Designers

Create a Gnarly Snowboarding Themed Web Design

How to Create a Cool Anaglyphic Text Effect with CSS

Design a Surreal Desert Scene in Photoshop

How to Make a Vibrant Portfolio Web Design in Photoshop – Design Instruct

How to Make a CSS Sprite Powered Menu

The New Hotness: Using CSS3 Visual Effects

Halftone Navigation Menu With jQuery and CSS3

How to Design the Apple iPad in Photoshop

Design a Colorful Retro Futuristic Poster in Photoshop

Reader Tutorial: Easy Digital Painting Illustration in Photoshop

Create a Grungy, Translucent Web Portfolio Design

Articles and Interviews

An Interview with Designer & Blogger Jon Phillips

Curating Comments Threads

Principles of Great Design: Craftsmanship | Design Informer

The Risk of Being Unique – The Logic of Design Styles

15 Invoicing Tips for Designers and Freelancers | Vandelay Design Blog

Design Trends (Predictions) in 2010

Interview with Little Box of Ideas Design Blog

Freebies and Resources

20 Must Have WordPress CMS Plugins

25 New High Quality Free Fonts

20 Sets of Photoshop Brushes for Vintage Style Design

25 Fresh, Clean and Unique Wordpress Themes – Speckyboy Design Magazine

29 Resources for Freelance Designers Operating on a Tight Budget

12 Awesome, Fresh And Free Web Social Icons Sets

Showcases and Inspiration

11 Most Popular Blog Design Styles (With Examples) | Web 2.0

70 Gourmet Logos Of Food Restaurants Bars And Grills

40+ Examples of Horizontal Scrolling Websites | Naldz Graphics

Single Page Website Designs: 70+ Latest Examples

Beautiful Helvetica Inspired Artworks (Fanart, Posters, Wallpapers & Icons)

Progress Trackers in Web Design: Examples and Best Practices

55 Trendy Web Design Interfaces From Deviantart

WebSite of The Month – IndoFolio.com

IndoFolio – The Portfolio of Gopal Raju

Must-Follow on Twitter

Fabio Marasco (marbio) on Twitter

Dainis Graveris (1stwebdesigner) on Twitter

ThinkDesign (ThinkDesign) on Twitter

Must-Read, Blogs/Magazines of The Month

Tutorialzine – PHP MySQL jQuery CSS Tutorials, Resources and Freebies

PelFusion.com

PSD Vault – Extra Unique Adobe Photoshop Tutorial

Here the first words on Wikipedia to describe the electronic commerce:

“Electronic commerce consists of the buying and selling of products or services over electronic systems such as the Internet and other computer networks. The amount of trade conducted electronically has grown extraordinarily with widespread Internet usage. The use of commerce is conducted in this way, spurring and drawing on innovations in electronic funds transfer, supply chain management, Internet marketing, online transaction processing, electronic data interchange (EDI), inventory management systems, and automated data collection systems.”

Issues Behind An E-Commerce Website

The main goals for an e-commerce website are to sell and promote products and services. This kind of website, much more than the others, should be optimized to create a perfect user experience.

Image three visitors in a real store: the first, a pretty girl in a fashion store who are looking for new and nice clothes; the second, a crazy nerd who wants the last electronic devilry; the third, a normal guy interested in deals and discounts.
It’s evident that these potential customers need different things, and for this reason the expert dealer make use of various approaches to sell his products.

On-line the situation changes. There isn’t the direct contact between the expert merchant and the client and the front-end web developer has to create a working selling machine foreseeing the users’ reactions. As web designers, we should build a web interface that shows the right products, in the right place and in the right way to drive the customers to the “Checkout.”

There is another aspect. Our three potential buyers are looking for different products and probably they will seek in specific stores to find them. A pretty girl rarely buy her nice clothes in a generic (and nonexclusive) store, rather she trusts in a “famous” fashion store with well-designed showcase and an accomodatived salesman; our geek knows what he wants and an electronic megastore (direct and fast) could be the right choice for our friend. Who are looking for discounts need a different kind of “trust”, they want to buy good (and notorious) stuff at a low price.
On the web one of the most difficult thing to do is just to create “trust”, and through an e-store we want to sell something; clearly if the visitors don’t trust us, our mission will fail. There is an hard work for us in making a good interface for an e-store website, this work consists in understanding the target and what kind of customer we should engage.

It’s also important to evaluate if the on-line business can work, for example it’s arduous to presume that a worldly girl can buy expensive clothes on-line without to dress them at least one time (or without a good knowledge of the product), but she could buy accessories, bags and t-shirts; on the contrary it’s probably that the our young geek looks for his electronic gadget on-line. So, don’t try to sell “impossible” things on your e-store, things that the consumers with difficulty buy on-line. If you are in a business with difficult customers, be informative and provide more details and images on your on-line store.

A built-to-sell website should also provide information and announcements about products. Remember that the goal is to improve the sales, but not only on-line. In fact, creating interest on your articles through well-done descriptions and useful notes about new ways to use products (or explaining features that might not be commonly known) you can also improve the trust of the visitors in your e-store attracting clients for the future.

So, planning and designing a web interface for an on-line business you should follow three main guidelines: define your aims; design a layout for the specific target; build your website to create a perfect user experience; be informative, be serious and and your clients will have trust in you.
The main objective? You have to convert your visitors into real customers!

Note: the following tips are just some crucial points, on which, in my opinion, it is dutiful making a reflection to plan a good interface for an e-commerce website.

Focalize The Target And Choose The Right Style

Often we have seen unattractive or poorly designed e-commerce websites, but a professional looking and an opportune style is necessary for building a good presence on-line.

The Perfect Style

Define your target and what kind of consumer could buy from your shop, then you must design for them.
For example if you are selling retro football shirts it could be a good idea to create a vintage design using photos of glorious moments of the past in the history of football.
A perfect style for your target means to use an opportune color palette, a good typography and some nice design elements. An attractive website, that communicates emotions, is a good way of saying “Welcome!” to your visitors (and potential buyers).

Dog Funk – A soft grunge style for a website that sells snowboarding clothing and gear.

Toys Rus – Bright colors and a fresh looking to sell toys.

Organic SuperMarket – Grass texture and a stunning animation to promote an irish supermarket.

High-Quality Photography

Maybe the most evident trend in e-commerce website design is the use of large and high-quality images. Many designers use photos with awesome models (or simply with the products) in a clean and fresh layout to generate interest and promote the best articles. This solution might be perfect in many cases from the fashion website to the on-line store where to buy books and DVDs.

Rapha – Black and white photography in a clean layout.

Dune – Large high-quality photo for a minimal fashion website.

Republic – Stunning background photo to highlight the “New Arrivals” section.

Make your Website Usable And Boost The User Experience

An on-line store must be easy-to-use to generate regular sales, but to make a perfect selling machine an usable website is not enough. You should generate curiosity and interest in your users, you should drive the visitor in a pleasant virtual tour on your e-store.
The front-end web developer can use more tools to enhance usability and to make comfortable the navigation for the user and here we analize some solutions that might make user-friendly an e-commerce website.

Highlight Your Best Products

Make sure you’re highlighting your best products (best sellers, new arrivals, special categories of products etc…), many well-done websites use featured sections where to show their most attractive articles. A good slideshow effect helps to display more contents and for this reason the home page of many sites make use of javascript (or flash) techniques to create short galleries.

Surfride – This site use a nice slideshow gallery with large images to promote some products and discounts.

Chrome Bags Store – This is another example of a good use of slideshow in a very nice layout.

Use Call To Action Buttons

Entice your user to visit more products, or interesting stuff, using nice call to action buttons and good “hover effect” for clickable images.

Nau – Here a nice hover effect for clickable images that makes fresh and “dynamic” the website.

Cellar Thief – Some strategic call to action buttons in this layout.

Chocri / The Autumn Film – Other examples of call to action buttons.

Simplify The Navigation and Organize Your Products

Categorize and organize your contents and provide useful tools to your users to allow them an easy navigation. This is a very important point, if the shoppers don’t find their favourite products they don’t buy and our mission fails.
A good and working navigation menu is strictly necessary to boost our interface, but to manage huge lists of categories could be complicated. To solve this problem we can use a clever mega drop-down menu (some sites use also simple drop-down lists – GUI widget – but, in order to enhance usability, this isn’t a good choice).

Republic – Great example of mega drop-down menu implementation.

Zumiez – Another example of a well-done drop-down menu.

Provide An Effective Search Function

A good navigation menu isn’t sufficient. The site search function must be unexceptionable and you should also consider the possibility of adding advanced options to obtain precise results, like search by category or brand and other filters to refine your search.

Borders – Nice search box in the header.

Liga Retro – Search form with some additional options.

The Perfume Shop – Search results with an useful filter system.

Use Breadcrumb Trail

Another important feature to add to our website could be a breadcrumb trail, a navigation aid that gives users a way to keep track of their location on the site. It provides useful links to reduces clicks for returning to higher-level pages.

Master Of Malt – Example of breadcrumb in e-commerce web design.

Big Brown Box – Simple horizontal and text-based breadcrumb trail navigation.

Apple Store – The solution of Apple Store to reveal the user’s location.

Create An Exhaustive Product Page

Some statistics says that more of the user’s time is spent to know more about products. The lack of detailed article information is a common mistake that you can avoid creating an accurate product detail page in which to provide useful data (and accurate technical specifications).

You can also include related products on your product description pages to promote more articles of the same category.

Rapha – A complete product detail page.

Master Of Malt – A deatiled product page.

Bridge 55 – Deatiled images on this website.

Shopping Cart

The shopping cart is a crucial part of your e-commerce website. It must allow users to add (and remove) multiple products and to edit the quantities of items. A well-done shopping cart allows users of adding a product to their cart without leaving the page they’re on (or to provide a return-button to the last page they were on).

An effective use of icons and symbols could be necessary, in shopping cart as in other sections (like lists of features for the products), for helping the user to assimilate information more efficiently.

Crate And Barrel – Clever solution. A fixed toolbar on the bottom of the page (using Flash).

Dog Collars – Shopping cart using a modal window.

FireBox – Nice basket on the sidebar.

Checkout Process

The checkout process must be transparent and it must provide all details to complete correctly the payment. It should have as few steps as possible and they must be clear and easy-to-read.
A nice progress tracker could be a good solution to boost your checkout progress page(s) and keep it tidy and sequential.

Make sure your users know that your website is secure and that their privacy will never be compromised. Be transperent including accurate shipping rates details and precise information about the taxes; you should also provide several options for the payment (PayPal, Credit Cards, Google Checkout etc…).

It’s a good idea provide some quick checkout FAQs to simplify the communication with your users.

FireBox – Progress tracker for a checkout page.

Cafe Press – Another example of progress tracker.

Dog Collars – Example of checkout page.

Take your users (customers). Be serious, Be informative

We have understood as to create a strong trust in our users is very important to maintain a business on-line. Sure, a well-done user interface is a good presentation for your activities on the web, but consumers need safety to buy something on internet. With some tricks you can improve your reputation.

Provide Details About You and Your Company

A customer wants to know the real company (or the man) behind the e-commerce website, they are leaving their personal information (and their credit card data). They want to be sure that if there is a problem they will directly contact a real person to solve the complication. Put your contact information in a strategic position on every page of the site, provide all necessary details: email address, phone number, mailing address etc…

Write accurate pages with FAQs, privacy policy, terms of use, detailed information about shipping options, payments and… your return and exchange policy. This last point is really important: “If you are not satisfied with the merchandise you received, we are more than happy to accept returns or exchanges within 90 days of the original order” are words that sound good for the consumers and they will have a real trust in you if they read something like this on your website.

Create An Effective Communication On The Web

Well, to sell effectively you need to offer solutions and useful services to your customers through a well-designed website, but you also need several channels of communication through wich to spread spontaneous (and positive) words on your products. In order to improve your presence on-line you have to plan a clever action on social networking and bookmarking websites: creating and managing your accounts on this kind of web service, providing sharing-buttons to your users, engaging your “audience” and encouraging happy clients to share your contents through the social networks.
“Contents” doesn’t mean only the product details, but a complete description of the product with reviews and comments from users.

An on-line business can often benefit from having a direct communication with potential customers. To seriously boost your presence on the web you should consider to start a blog; to have a direct line with your customer, to facilitate the spread of your links (and products) and to receive feedbacks.

Another brilliant idea? Use video demonstrations to present your products (or services) and in a few minutes you can show more features of your high-quality stuff.

Finally, remember to make your e-commerce platform SEO-friendly.

A Showcase Of 65+ Well-Designed E-Commerce Websites

Below a massive collection of beautiful and working e-stores. They might be a good source of inspiration for your next works. Enjoy it!

Surf Ride

Me and Mommy-to-be

Big Brown Box

Itself

Lallevopuesta

Tillymoss

Fugitive Toys

One Horse Shy

Chrome Bags Store

Clothing at Tesco

Green Label Organic

Cellar Thie

Shirt Fight T-Shirts

Dog Funk

Dog Collars

20×200

Duchy of Cornwall Nursery

Piccadilly

Toys Rus

Master of Malt

Nature & Découvertes

Schokolade Von Chocri

Japnó Shop

Wood And Beyond

Ukecosas

Torn Robes

Yellow Bird Project

La Patate

Shirt City

Page CXVI

Opera Magé

The Autumn Film

Cosmicsoda

Borders

Liga Retrò

FarFetch

Weta’s Online Shop

Ride Four Ever

Hello, Bird!

Red Velvetart

I’m Walking

Feel Unique

Organic Food Ireland

Republic

Online Grocery Store

Tiger Leisure

Fat Face

Organic Vegetable Seeds

Shoes And Handbags

Shop Rush

Dune Shoes

Nau

Pixie Market

Hmv

Fire Box

Design Collectors

Cafe Press

Zumiez

Pure And Little

Apple Store

Rapha

Bridge 55

Crate and Barrel

Nineteen 47

Tommy Hilfiger

Trolley Cards

Plus De Bulles

Teesey

The Perfume Shop

9 Solutions To Build Your E-Commerce Platform

Here a list of 9 different solutions to build your own e-commerce website. Read the features and technical specifications of each of the following options to choose the opportune platform for your project.

Open Freeway

Freeway is an Open Source e-commerce platform. It doesn’t just sell products but extends to sell in some very fancy new ways and is very configurable.

Magento

Magento is a robust e-commerce software application designed to be simple and highly-customizable.
Magento’s modular architecture puts the control back in the hands of the online merchant and places no constraints on business processes and flow.

Open Cart

OpenCart is an open source PHP-based on-line shopping cart application. A robust e-commerce solution for internet merchants.

osCommerce

osCommerce is an online shop e-commerce solution. It offers a wide range of out-of-the-box features that allows on-line stores to be setup fairly quickly with ease, and is available for free as an Open Source based software.

PrestaShop

The PrestaShop e-Commerce Solution, despite its technical sophistication and advanced functionality, is very light (around 2 MB not including translation files), so it’s easy to download, install, and update.

Zen Cart

Zen Cart truly is the art of e-commerce; free, user-friendly, open source shopping cart software. The ecommerce web site design program is being developed by a group of like-minded shop owners, programmers, designers, and consultants that think ecommerce web design could be and should be done differently.

Drupal and UberCart

Ubercart is an open source e-commerce solution fully integrated with the leading open source content management system, Drupal. This is a killer combination for anyone looking to build a community around a product, sell access to premium content, offer paid file downloads, and much more, all while maintaining a seamless connection to your users.

Drupal E-Commerce

Drupal e-Commerce is a package of modules to let you create your own online store. It is totally free, open source, rich featured and flexible.

WordPress and Ecommerce Plugin

The WordPress e-Commerce plugin is a state-of-the-art e-Commerce platform with a focus on aesthetics, web standards and usability. It is both free and priceless at the same time.

Industrial Fonts For Your Designs. They are FREE!

1. Babylon Industrial

2. Industrial Decapitalist

3. 28 Days Later

4. TR Heavy

5. A Bite

6. Aldo

7. Heavy Loud Edge

8. Heavy Weight Gamer

9. Reservoir Grunge

10. Boston Traffic

11. Barrio 30

12. Greatlakes

13. Know Your Product

14. Lintsec

15. Metro

16. Heavy Rotation

17. Capture It

18. Techno Overload

19. Future Flash

20. Future Millennium

21. Retroheavy Future

22. Angular

23. Ignis et Glacies Sharp

24. Alpha Male Modern

25. Vanberger

26. WC Wunderbach

27. Armalite Rifle

28. Pulse Rifle

29. CitonLight DB

30. Destencil

31. Millenia

32. Octin Prison Free

33. Orbitron

34. Pirulen

35. Telegrama

36. Black Oak

37. Yatis Black

38. DS Nova Black

39. Paint It Black

40. Broad

41. Dusty

42. Dirty Bakers Dozen

43. Dynomite

44. Urban Brush

45. Urban Rubber