• 50 Inspirational E-Commerce Website Designs
• 25 Inspirational E-Commerce Website Designs – Part Two
• 35 Excellent E-Commerce User Interface Designs
• 25 Creative E-Commerce Website Designs
• WordPress E-Commerce: 30+ Resources
• 37 Shopping Cart Options for Developers
• 9 Characteristics of Well-Designed E-Commerce Websites

Best Buy

United Pixelworkers

Vera Bradley

The Greeting Farm

Layla Grayce

Rip Curl

W + K Studio

Chicago L – Shirts

Wheels & Dollbaby

One Village Coffee

St. John

Velorution

Killer Brigade

The Limited

Blossom Mother and Child

Hunter’s

Lark

Brooklyn Industries

Jones New York

Breezy Baby

Morgan Ranch

Anne Klein

Reebok

Alexander McQueen

LuLu’s

For more design inspiration please see:

• 25 Flash Portfolios for Your Inspiration
• 25 Impressive Design Portfolio Websites
• 40 Beautiful Corporate Websites
• 27 of the Best Real Estate Websites
• Graffiti Art Showcase

Free Texture Pack:

A few weeks ago we released the first free resource pack from Vandelay Premier. If you are not already a member you can still download this set of 4 textures as a sample of what is available.

Plain Brown Paper Textures

Vectors:

Ink Splatter Vectors

Yesterday we published a tutorial for creating these splatter vectors.

Vector Tags

Grunge Vectors

PSD Files:

iPad PSD

Corporate Website Layout

Web Hosting Banner Set

Textures:

Urban Textures Part II

Peeling Paint Textures – Part I

Old Paper Textures – Part II

Bubble Wrap Textures

Rust Textures – Part I

Cracked Pavement Textures – Part I

Dark Fabric Textures

Icons:

E-Commerce Icon Set

Brushes:

Illustrator Brush Strokes Brushes

Watercolor Photoshop Brushes

Career Resources:

Making Money from Texture Sales: An Interview with Caleb Kimbrough

Launching a WordPress Theme Shop: An Interview with Brian Casel of ThemeJam

More Discount Offers for Members

Our marketplace launched with 13 partners offering discounts on great products and services to our members. We’re happy to add 3 more partners this month! Vandelay Premier members can:

• Save 20% at Flashloaded in September (15% after September)
• Save 20% at Deposit Photos
• Save 10% at Rapid XHTML

There is More on the Way!

We released 19 resources/packs in August and we plan to have about 20 in September. We’ve got some great resources already prepared and we’re always working with our team of designers on more. Members get unlimited access to download new resources as well as all of those from the archives. Also, all of the design resources come with an extended, multi-use license. If you’re interested in learning more about Vandelay Premier you can take the tour or browse through the available resources. Membership costs just $9 per month, or $79 per year (sign up here).

Here is a preview of the final result of this tutorial.

These splatter vectors are fun to create, and since the end result is in vector format it is highly versatile.

Things You Will Need:

• A bottle of ink (I used black India ink from a craft shop)
• Paper (photo paper or heavy white paper)
• A straw
• A scanner
• Adobe Illustrator
• Adobe Photoshop
• Inkscape (optional)

Overview of the Process:

In a moment we’ll be going over the specific steps and the details of each, but first let’s take a look at the basic process:

1 – Creating the ink splatter on paper

2 – Scanning it after the ink has dried

3 – Cleaning the image in Photoshop

4 – Tracing the image and saving it as a vector file

So as you can see it is not an overly complicated process, you just need some patience to let the ink dry and to complete the needed adjustments in Photoshop.

Now let’s get started.

Step 1: Creating the Ink Splatter

This is probably the most fun part, and it’s definitely the messiest. Take a piece of paper (I’d recommend either photo paper or a heavy piece of white paper) and place it somewhere that can get a little bit messy. You may want to put it on a table covered with newspaper, on your basement or garage floor, or somewhere that is protected from the ink splatters.

Your bottle of ink may come with a tube for dispensing the ink, or you can use a simple straw to collect the ink. Gather some ink in the tube or straw and splatter it on your paper. You’ll probably want to do this several times to get a good amount of ink.

Once you have a bunch of ink on the paper allow it to dry. Some types of ink are pretty thick so be sure that you are giving it adequate time to dry before scanning, or else you can damage your scanner. I allowed about 24 hours for the ink used in this tutorial to dry.

Step 2: Scanning

Once the ink is completely dried, scan it at 300 DPI and open it in Photoshop. Here is a look at my image at this stage:

Step 3: Clean Up the Image in Photoshop

As you can see from the image above, we have the splatter but it needs some work before it will be usable. To start with, there are some gray areas that need to be made white. We want to have the ink splatters as black, and the paper as white so that it will allow us to create a splatter that can be used on any background.

To get rid of the gray areas we will make some changes to the levels. Go to Image – Adjustments – Levels and you should see something like this.

Change the white level (on the right) to about 160, which will turn the gray areas to white, and change the black level (on the left) to about 25, which will make the dark areas black.

The specific levels and numbers used will be different on your image, so play with it to get a combination that makes the white areas white and the black areas black.

Here is a look at the image after simply adjusting the levels:

This is a good start, but if you look at the image at 100% you will see plenty of areas that still need to be touched up. In the image below you’ll notice some areas, especially near the edges of the splatters, where there is still a good bit of gray. We want to color all of this to black.

To do so we’ll use the brush tool with a small round tip. The size of the brush tip will depend on your particular image, smaller tips will be needed for more detailed areas.

Take the brush, with the foreground color set to black, and color the gray areas so that they become black.  You’ll also want to use a white brush tip to color over any tiny stray splatters or ink spots. You may find it easiest to work with the image zoomed. The image below is at 300%.

Tracing the image to create the vector will also help with the cleanup process, but it helps to get it as clean as possible in Photoshop first. After touching up the image shown earlier, here is how it looks.

Save your image as a JPG and we’ll move on to the next step.

Step 4: Tracing the Image

Adobe Illustrator has a powerful Live Trace functionality, but after reading a tutorial on Bittbox a few years ago I have been in the habit of using Inkscape for this. Inkscape is a free program that can be downloaded here, or you can simply use Illustrator to accomplish the same thing.

Open the image in Inkscape

Go to Path – Trace Bitmap and you will see the following.

There are a lot of settings you can change here, but start with the default, it usually works pretty well for purposes like this. Click “Ok” and then X out of that box.

The trace will now be showing above the image you started with, so drag the trace to the side.

Then delete the original image that you started with, leaving just the trace.

Now click on the trace and go to File – Save As and save it as a .svg file, which we can then open in Illustrator.

In Illustrator open the .svg file.

You can inspect the image to see that it looks ok, but it should be pretty good with no need for additional clean up. At this point you can save it as a .ai file and the process is complete. You now have a versatile splatter vector that can be used whenever you need it.

Here is our final result:

The full set of 15 ink splatter vectors is available for Vandelay Premier members to download and use in their own work.

Fortunately, most designers and developers receive challenges on a daily basis in the normal course of their work, especially those who work for a variety of different clients. However, there are times when a designer should focus on learning and improvement outside of these normal activities. Perhaps no project has come up that will provide an opportunity to hone skills in a particular area, or maybe you have something specific in mind that deserves extra attention.

In this article we will look at some of the ways that you can challenge yourself as a designer. This is not intended to be an all-inclusive list, there are certainly countless possibilities in this area, but it is intended to give some ideas to those of you who are interested in trying new things or improving on existing skills.

Some of the most beneficial things that I have done in my career have also been the most uncomfortable. For most of us it is easy to get in the habit of doing things in a familiar way or avoiding projects that push us beyond our comfort zone. There are times, however, when those challenges and discomfort lead to invaluable opportunities that can have a significant impact on our futures.

1. Accept Clients for Freelance Work

If you are currently working for an agency or as an in-house designer, managing some clients of your own on a freelance basis would certainly provide some outstanding learning opportunities. With your own clients you will need to consider things like pricing your work, securing the client, project and time management, financial management, communication with the client, possibly outsourcing some of the work, and meeting deadlines.

Some of these things, like time management, communication and deadlines, are likely already a part of your daily work as an employee, but when you are managing the client and the project on your own they will probably have a different type of significance.

2. Try a New Type of Layout

Do you find that you use the same type of layout on the vast majority of your projects? Maybe a fixed-width center-aligned site is not appropriate or necessary for every project, and trying something new would bring a new challenge and an opportunity to gain experience with other types of layouts.

Have you ever tried designing a horizontal website? They are not practical for most projects but learning to create one can teach some new skills that may be useful at some time in the future.

3. Seek Out Feedback and Constructive Criticism

Designers are always receiving feedback from clients and this is obviously useful and an important part of the process. But if you have not actively sought out feedback from other designers you may benefit from doing so. Concept Feedback is a great resource for designers who want to submit their work and receive honest feedback from other designers.

4. Blog

Blogging can be a great exercise for designers, whether it is publishing posts on your own blog or writing for others. The design blogging community is large and very active, so there are always plenty of opportunities. Writing an article or a detailed tutorial can be a great learning experience because if you know your work is going to be visible to the world you’ll probably push yourself to do the best that you can.

I’ll never forget writing my first post for Smashing Magazine. The thought of having my article read by an audience that large was rather intimidating, but it forced me to go further than I would if I was writing for a much smaller publication. For those of us that don’t naturally want that exposure, blogging is a valuable experience for moving out of the comfort zone and trying new things.

5. Try a Different Style of Design

Is there a particular style of design that you have never tried or that you would like to improve on (for example vintage, nature-inspired, minimalist, magazine-style, textured)? Stretching your design skills will make you more valuable and well-rounded, but often it is easy to stick with similar styles without exploring new possibilities.

If you don’t have a client that is an appropriate fit for a different style of design that you would like to try, personal projects can be a possible solution.

6. Experiment with a New Content Management System

If you find that you use WordPress, Drupal, ExpressionEngine or some other content management system on almost all of your projects, maybe you would like to try a different CMS. No CMS is perfect for every situation, so learning something new may prove to be a wise decision when the right situation comes up in the future.

The best way to know what CMSs work well in specific situations and which ones are most user-friendly is to experiment with them on your own. There is a lot of information available online regarding the different CMS options, but you can learn a lot more from some hands-on experience than you can from reading about someone else’s experience.

7. Use HTML5 and CSS3

If you’re not already familiar with HTML5 and CSS3 they are certainly an area for potential improvement that will open up new opportunities and new ways of doing things in your projects. Here are some learning resources:

• 25 Amazing CSS3 Experimentations and Demos
• Coding a HTML5 Layout from Scratch
• 15 Useful HTML 5 Tutorials and Cheat Sheets
• Dive into HTML5
• 7 Awesome CSS3 Techniques You Can Start Using Right Now
• 70 Must-Have HTML5 and CSS3 Tutorials and Resources
• HTML5 and CSS3: The Techniques You’ll Soon Be Using

8. Write a Book or E-Book

We already talked about the opportunity that blogging presents for challenging yourself, but that’s not the only possibility for those who like to write. Writing a book or an e-book is now a realistic option for just about anyone. Services like Lulu make it possible to publish a book independently, and e-books are of course easy and inexpensive to produce.

Covering a specific topic in a book or an e-book will force you to really dive into the subject, and you’re bound to learn plenty along the way. Of course, you’ll probably not want to attempt to write a book on a topic that requires extensive learning on your part, but even writing about a subject at which you are well versed can present learning opportunities and experiences that will improve your abilities.

9. Sell Stock Graphics

Marketplaces like GraphicRiver and stock photo sites like iStockphoto allow designers to sell stock graphics like vectors, illustrations, and icons. Designing these types of items presents unique challenges that are not a part of the client process.

Selling stock graphics can also provide a nice secondary income and can also be a great fill in activity when client work is slow or between projects. (Vandelay Premier members can see the interview with Ryan Putnam for a detailed look at the process of selling stock graphics.)

10. Sell Themes or Templates

Similar to selling stock graphics, you can also design and code template or themes (premium WordPress themes are especially popular) to be sold. Selling themes/templates has become a significant source of income for many designers, but even if making money is not your primary goal designing for a mass audience rather than designing for a specific client will present some new challenges.

When it comes to actually selling your work you can either use a marketplace or manage the sales on your own through your site. If you’re primarily focusing on it as a way to learn and challenge yourself you’ll probably want to use a marketplace like ThemeForest, which can save huge amounts of time as compared to setting things up to sell from your own site.

11. Answer Questions on Forums

There plenty of design and development related forums where users interact and look for help and guidance from other users. If you’re looking for a way to challenge yourself why not take a few minutes to browse through some forums and attempt to answer questions from other users?

In some cases you may be able to answer the question easily based on your experience, but at other times you may want to answer a question that requires research or experimentation on your part. This is a great opportunity to stretch your own skills and knowledge in areas that are likely to be valuable to you at some point in the future, and it will also be appreciated by others.

12. Take Up Photography

Photography is a hobby of many designers as there is often some overlap in the creative areas of both. If you’re not already active with photography taking the time to learn some basics may even help you to learn some new things that can be applied in your design work.

13. Identify Your Weak Areas

All designers have areas of strength and weakness. You’re probably already aware of some areas where you could use improvement, but if not, try to take an objective look at your work and your experience. What area of your work are not as strong as they could be? By identifying and improving your areas of weakness you will make yourself a more complete designer and more valuable to your clients or your employer.

What’s Your Experience?

Do you make an effort to challenge yourself and to improve your skills? If so, how do you do it?

Looking at the analytics data shortly after launching Vandelay Premier it was obvious that the tour page will have an incredibly significant impact on the success of the site. When visitors arrive at a site that they are not familiar with the tour page is very inviting since it promises to help them get acquainted with the site very quickly. Many sites and apps place a link or a button for the tour in a very prominent location, so it provides a very valuable opportunity to sell.

By looking at the trends and examples of well-designed tour pages you can pick up some ideas for use in your own work. Here we will cover some of the most common trends of tour pages and we’ll include a showcase of pages for your own inspiration.

Trends of Tour Pages:

1. Lists of Features and/or Benefits

The most important job of a tour page is to show a visitor why they should care about the site or product, and what it can do for them. Effective tour pages break down the main features, benefits, or selling points in a way that shows visitors how useful it can be to them. The screenshot below shows how Basecamp quickly lists the benefits, and visitors can click on any of them for more information.

2. Numbered Items (Lists)

Lists are useful for making the key points on a tour page easy to read and scan. The purpose of the page is to quickly communicate the main points to visitors, and lists are great for accomplishing this. Wufoo uses a list to display the key features, and visitors can click on an item for more information.

3. Video

Video is also very common for tour pages and can be great for actually showing visitors how an app or a product works. Videos can also do an effective job of helping to connect with the visitor. Business Catalyst includes a number of videos on its tour page to show different features and so visitors can see the system in action.

4. Screenshots

When video is not being used it can still be helpful to give visitors a visual tour by showing screenshots of the product or app. This is especially common with web apps because it helps to show the visitor exactly they will be using. Ballpark includes multiple large screenshots of the user interface to demonstrate what it can do.

5. Less is More

One of the tricky parts of creating a tour page is including all of the most important information without going too far and overwhelming the visitor. You want to give them enough information to show why they should be interested in the product or app, but providing too much information will probably cause them to leave the site without taking the time to go through it all. Project Bubble does a nice job of getting to the point quickly and wasting nothing.

6. Sign Up Buttons and Calls to Action

The purpose of the tour page is to lead the visitor to take action. That action may be to sign up for a free trial or to make a purchase. Since this is of critical importance it makes sense that it should be clear to visitors what action they should take and it should be as easy as possible. Most tour pages will have sign up buttons, or some other call to action, on the tour page. It may be at the top of the page, sidebar, or below the relevant information provided through the tour. MediaLoot uses a button at the top of the page and a link at the bottom.

7. Unique Template or Design

Tour pages rarely use a sitewide template that is used on other pages throughout the site. In many cases they will have the common header and footer just like every other page, but the sidebar is frequently eliminated or changed to included items specific to the tour. This allows the page to focus strictly on one purpose without other distractions for the visitor. Campaign Monitor’s feature tour page contains a small sidebar with links to some of the specific features, so visitors who are interested can take the tour in a certain direction.

8. Links to Pricing and Plans

Most web apps offer a few different plans for customers to choose from. Tour pages also often include prominent links to a page where visitors can see the various options that are offered. The top of Bidsketch’s tour page includes a button that leads to the pricing page.

Showcase of Tour Pages:

The Invoice Machine

Backpack

ProtoShare

Basecamp

Wufoo

Notable

LightCMS

Shopify

Gist

Bidsketch

activeCollab

Dialogix

Ronin

FreshBooks

Pulse

Huddle

Squarespace

For more design inspiration please see:

• 25 Flash Portfolios for Your Inspiration
• 27 of the Best Real Estate Websites
• 25 Impressive Design Portfolios
• 35 Excellent Ecommerce User Interface Designs
• 25 of the Best Websites of Bands and Musicians

In this post we’ll feature 25 experimentations and demos from various designers/developers using CSS3.  Some have more practical real-world uses than others, but all of them demonstrate what can be done with CSS3 and some creativity.

Look Ma, No Flash!

Old School Clock with CSS3 and jQuery

A Colorful Clock with CSS & jQuery

AT-AT Walker

Pure CSS Social Media Icons

Pure CSS3 Page Flip Effect

Recreating the OS X Dock

Use CSS3 to Create a Dynamic Stack of Index Cards

Experiment: Realistic iPod with CSS3

CSS3 Loading Spinners without Images

CSS Posters

CSS3 Background-Clip & @Font-Face

CSS3 Button Maker

Create a Vibrant Digital Poster Design with CSS3

Multi 3D Cubes with Animation Using CSS

Sliding Vinyl with CSS3

Animations Using CSS Transforms

Easily Turn Your Images into Polaroids with CSS3

jQuery DJ Hero – CSS3 and jQuery Fun

CSS3 Animations Demonstrated with Snow

How to Create Depth and Nice 3D Ribbons Only Using CSS3

Apple’s Navigation Bar Using Only CSS

Pure CSS Coke Can

Our Solar System in CSS3

Rotating Image Gallery Using CSS Transform and Transition

For more web development resources please see:

• 14 Options for Managing Membership Websites
• 25 jQuery Image Gallery/Slider Tutorials and Plugins
• 37 Shopping Cart Options for Developers
• 35 Adobe AIR Tutorials for Web Developers

The textures can be downloaded from their page at Vandelay Premier. If you enjoy the textures please take a moment to see the other resources available at Vandelay Premier, or take the tour.

Ghostown Studios

Webdesign.fr

Urban Roots

Launchmind

HTML Mafia

New York New York Web Design

Creative Switch

Nathan Sanders

Porcupine Colors

Paperfold Media

Nybble Tech

Open Angel Forum

WhatsApp

CAD Website Design

Dan Conway

Itasyon Tasarim

Tarek Shalaby

Reprezent

The Cambridge Academy of Dramatic Art

Morphix Design Studio

1,000 Acts of Kindness

Water Falcon

Magellan Development Group

Os meninos de seu Zeh

Big Deal

Photoshop Brushes:

Famous City Skylines

City Skyline Silhouettes

Funky City Skylines

Skyline Brushes

For more design inspiration please see:

• One-Page Portfolios: Trends and Showcase
• 40 Beautiful Corporate Websites
• 25 Websites with Creative and Unique Layouts
• 35 Excellent Ecommerce User Interface Designs
• Design Trend Showcase: 30 Horizontal Websites

John Wright

Eric Campbell

Kiluka

Erwin Hines

Mammoth

Eown

Saizen Media

Grey Group

Thom Bennett

James Monaghan

Soleil Noir Studio

Alan Lim Studios

Red Interactive Agency

Joby Sessions

MyORB

Skive

BBH

DriftLab

Skinny Wrists

Sefihanov

Drawing Art

Brook Pifer

Blue Collar

Rudd Studio

Soft Whiteroom

For more design inspiration please see:

• 25 Impressive Design Portfolio Sites
• One-Page Portfolios: Trends and Showcase
• 25 of the Best Photographer Portfolio Websites
• 25 of the Best Photographer Portfolio Websites – Part II

The unlimited plan includes a number of upgrades:

• Use your own domain.
• No ads – removes the Wix ads from your site’s footer and sidebar.
• Remove Wix logo – removes the wix logo from your site including favicon and loader.
• Google Analytics – You can track site visitors, where they come from, how long they stay, what keywords they use to find your site and more.
• 2.5GB storage – Increasing your storage space will enable you to upload large files and high-resolution content with ease.
• Unlimited Bandwidth – Increasing your bandwidth will allow more data to be transmitted at a faster and smoother speed.
• Premium support.
• $125 voucher – $75 Google AdWords voucher + $50 Facebook voucher + free domain coupon + tips on how to use your vouchers & info on connecting your Wix site.

About Wix

Wix is a free website builder tool, for quick and easy creation of quality Flash websites. Wix’s advantage is that it’s search engine friendly, allowing you to create a website that looks great without knowledge in coding or programming. The welcoming editor is a simple drag n’ drop tool that makes life easy and fun.

Contest Details

If you would like to enter to win one of the two free accounts, please leave a comment on this post. The winners will be selected at random on Friday, August 13th. At that time this post will be updated to announce the winners, and the winners will be contacted by email. You will have 30 days to claim your prize and we will provide you with instructions to do so.

Sample Wix Sites

UPDATE: The contest is now over. Thank you to everyone who participated. The winners are:

• Rahul
• Kerri Larson