Vandelay Design Blog

Showcase of Excerpts in Blog Design

Vandelay Website Design — Thu, 19 Nov 2009 02:56:38 +0000

Many blogs are using excerpts to display content on the front page. The use of excerpts gives designers a little bit more freedom and some opportunity to create an attractive and unique front page. In this post we’ll showcase for blog front pages that are using excerpts.

Work Awesome

Design Critique

Strip Turnhout

Kaligram

Development Seed Blog

The Swish Life

Jord & Chan

Line25

UX Booth

Spyre Studios

Design Feedr

The Visual Click

Mark Forrester

Brad Ruggles

Twirk Ethic

West Coast Poppin

The Photo Argus

Krftd

Officeal

Freelance Switch

Powerful CMS

Dale Anthony

Devot:ee

Vectips

10Steps.SG

Blog.SpoonGraphics

X3 Studios Blog

The Art of Nonconformity

Istok Pavlovic

Blue Dots Design

Design Reviver

Unblogged

Well Medicated

Creative Tempest

Kineda

Francesca Battistelli

Colorburned

GoMediaZine

Ecoki

For more blog design inspiration see our gallery site Blog Design Heroes.

Looking to Hire a Designer or Developer?

Post a free job listing to the DesignM.ag job board for freelance, part-time or full-time positions. Your listing will be seen by thousands of talented designers and developers. - Post a job for free.

Free Business Icon Set from IconShock

Vandelay Website Design — Tue, 17 Nov 2009 20:35:53 +0000

Our friends at IconShock have designed another set of icons especially for the readers of Vandelay Design. This pack includes five icons with a business theme. As you will see from the preview, it includes a briefcase icon, a calculator icon, a phone icon, a coins icon, and a pie chart icon.

These icons can be used for personal or commercial projects, no attribution required. You may use them in any way that you like, but they cannot be re-distributed or sold.

The source files (Illustrator) are included, as well as two sizes of PNGs (512 px and 256 px).

Download the Business Icon Set

Also see the other set of icons from IconShock – Free Portfolio Icons

Looking to Hire a Designer or Developer?

35 Excellent Ecommerce User Interface Designs

Vandelay Website Design — Mon, 16 Nov 2009 21:44:24 +0000

While user experience is important on all types of websites, it is especially critical for ecommerce websites where visitors will be making purchases. A poor user experience will result in visitors having difficulty finding what they want, frustration during shopping, and many lost sales. In this post we will showcase the design of 35 e-commerce websites for your own UI design inspiration. The sites that are showcased in this post have also been featured at CartFrenzy, our gallery of the best ecommerce web design.

Russell & MacKenna

Jaqk Cellars

BCBGMAXAZRIA

Victoria’s Secret

Inkd

TOOBYDOO

Pottery Barn Kids

Innovative Baby

Baby & Child

Williams-Sonoma

The Company Store

Abercrombie & Fitch

Maui Divers Jewelry

For more design inspiration see CartFrenzy, our gallery of ecommerce web design, plus the following posts from our archives.

Looking to Hire a Designer or Developer?

40 Beautifully-Designed Navigation Menus

Vandelay Website Design — Thu, 12 Nov 2009 02:18:39 +0000

Navigation menus are, of course, important for usability purposes and creating a user-friendly website, but they also provide opportunities to add some visual appeal to the design. In this post we’ll showcase 40 examples of attractive navigation menus, including a variety of different types and styles.

For more on navigation menus please see:

Mission Community Church

Sushi & Robots

Wonderbra Ultimate Strapless

Organic Supermarket

Pasadena Symphony and Pops

West Coast Poppin

Veer

The Invoice Machine

Tennessee Vacation

Ekklesia 360

Show & Tell Consignment Sale

Inner Metro Green

Apple Reviews

For more design inspiration please see:

Looking to Hire a Designer or Developer?

Vandelay Design Partners with Fanurio Time Tracking and Invoicing – Plus a Limited-Time Discount!

Vandelay Website Design — Wed, 11 Nov 2009 13:10:07 +0000

We’re happy to announce that Vandelay Design is now partnering with Fanurio to make its time tracking and invoicing software accessible to more designers. We worked with Fanurio a few months ago to give away some free licenses to readers and the response was tremendous, so we decided to work together on a more permanent basis. We wanted to offer something special to all of you to kick off this partnership. Starting today (November 11, 2009), for the next 35 days you will be able to try and buy Fanurio for $49, a $10 discount from the regular price. Fanurio always comes with a 30 day free trial of the full software, so the 35 days will give you enough time to download it and try it out before the coupon code expires.

The coupon code to use when purchasing is “vandelay2009″. More details at the end of this post.

Why Fanurio?

All freelancers and independent designers need a way to track the time that they spend on client projects and a simple solution for creating, managing, and tracking invoices. There are plenty of options out there and a number of them are pretty good, but Fanurio offers some distinct advantages. We’ve chosen to partner with Fanurio because we think it’s a great choice for all of the following reasons.

One-Time Purchase

Most of the options for invoicing involve a monthly fee for a web based app. While there is nothing wrong with this, it can quickly add up to a much higher expense as compared to a software license that is purchased one time. Fanurio’s price of $59 (or $49 with the discount) is less than you would pay for just one year with a basic plan of most invoicing apps.

Unlimited Clients and Invoices

The flat price of $59 gives you a full license to the software that will allow you to manage an unlimited number of clients and projects, and to create an unlimited number of invoices. Most of the online invoicing apps base their pricing on the number of clients and invoices that you need to manage, but this is not an issue with Fanurio.

Multi Platform

Fanurio works with Windows, Mac OS X including Leopard, Linux, and more.

Easy Time Tracking, and it Integrates with the Invoicing Features

With Fanurio you can easily stop and start the tracking of time on a particular project. The timer can be accessed from the menu, the toolbar, the iTunes-like mini timer or from the menu bar/tray icon. The timer includes a few features like idle time detection to help keep your time tracking accurate. Additionally, for situations where you do not want to use the time tracker you can add time to a project manually before it is invoiced (invoices can be based on an hourly rate or a flat fee).

Managing Invoices

You can easily manage your invoices to see what is paid, unpaid, or overdue. A lot of invoicing features are included, such as the ability to give discounts, handling of multiple currencies, and more.

Invoice Templates

Invoices are created and emailed to clients (or printed) and you can use a template to control the look of the invoice. Fanurio offers template customization as a free service to its users.

Data Backups

To prevent loss of data, Fanurio to create a backup or restore from a backup at any time.

And More

There are a lot of other features that I won’t cover here, but you can read more about them at Fanurio’s website.

The Details of this Special Offer:

The discounted price of $49 is available now through December 16, 2009. You can download a 30-day trial of Fanurio (the trial allows you to use the full software) before making a buying decision. If you’re familiar with Fanurio and you want to purchase the license now you can do that, otherwise you can upgrade from the trial at any time in the next 35 days to get the discount. In order to receive the discounted price you will need to use the coupon code “vandelay2009″ when ordering. The coupon code is entered when making a payment, so if you are downloading the trial you will not need to coupon code until you purchase the license (make sure you have the coupon code handy for when you need it).

Disclosure: As a partner of Fanurio, Vandelay Design does have a financial interest. We use Fanurio and feel that it will be a great resource for other designers and freelancers.

Looking to Hire a Designer or Developer?

25 Outstanding Lighting Effect Tutorials for Photoshop

Vandelay Website Design — Mon, 09 Nov 2009 20:25:03 +0000

Lighting effects are a great way to make an impact with a design, and there are plenty of options for creating these effects with Photoshop. In the past we have published collections of Photoshop tutorials for lighting effects and they drawn a lot of interest from readers, so here is a collection of newer tutorials. For more, see:

Colorful Light Effect in Photoshop

Create a Trendy Galactic Poster Design in Photoshop

Creating Colorful Disco Lines Effect

Create a Retro Cosmic Design in Photoshop

Aurora Borealis Wallpaper in Photoshop

Design a Colorful Northern Lights Landscape

How to Create a Sparkling Fantasy Photo Manipulation

Create a Divine Angel Montage in Photoshop

Design a Retro Futurism Space Scene

Extinction

Create Energy Lines Around a Dancer

Glowing Neon Effects

Stylish Light Effect in Photoshop

How to Make a Typographic, Retro, Space Face

Design an Awesome Geometric Shaped Typography

Very Easy Heroes Eclipse in Photoshop

Create a Glossy Volt Icon in Photoshop

Distant Desert City Scene with Energy Ray Blast

80’s Style Design Using Photoshop

Give a Car Photo Super Slick Lighting Effects

How to Create a Magic Mysterious Ball in Photoshop

Fantastic Disintegration Effect in Photoshop

Create a Dramatic Car Speeding Scene

Sexy Model with Glowing Bubbles Effect

Making of a Mythical Encounter

For more tutorials please see:

Looking to Hire a Designer or Developer?

Examples of Excellent Blog Post Formatting and Styling

Vandelay Website Design — Wed, 04 Nov 2009 22:43:23 +0000

While front pages are usually the part of blogs that get showcased, blog design includes a lot of other details that can add to the overall look and appearance of the blog, not to mention usability. The pages of individual blog posts provide opportunities for design and styling in a number of different areas.

In this post we’ll look at a few aspects of blog posts and showcase some design elements that are used to make the post more helpful, inviting, or attractive.

Intro Areas:

At the start of posts, some blogs include additional elements or design techniques to improve the post in one way or another.

ANidea

ANidea’s appraoch is pretty unique. Each post has a lead image that appears above the right sidebar, and just below that is a list of related posts.

Blogfullbliss

Blogfullbliss uses a lead image at the top right of each post.

Ecoki

Ecoki uses a thumbnail just to the left of the post title, followed by the author name, date of publication, and categories.

Tutorial9

Tutorial9 posts start with a lead graphic and links for social media voting/sharing.

Web Design Ledger

Above each post on Web Design Ledger is a lead image. Between the image and the post title is a comment count, date of publication and category link.

The Art of Nonconformity

New visitors to the Art of Nonconformity will be greeted with a brief intro to the site that includes links to get more information about the site or to subscribe.

Creative Tempest

Above posts on the Creative Tempest is a large lead image.

Design Reviver

Design Reviver also includes a large lead image above the post title.

Sub-Headers:

Readability is obviously important to any blog in order to build an audience and encourage repeat visits. One of the best ways to improve readability in posts is to make use of sub-headers, and to have them styled effectively.

ANidea

ANidea uses all uppercase letters on its sub-headers to make them stand out and break up the rest of the text.

Viget Inspire

Viget Inspire also uses uppercase styling, and if you click through to this post you will see that their use of sub-headers and bold text helps to make the post scannable.

Reality Equation

Reality Equation has a colorful theme, and the purple sub-headers fit well with the approach of the design and they look nice.

CSS Globe

CSS Globe doesn’t use different colors for sub-headers, but changing the font family and the size of text makes it an effective approach.

UX Booth

UX Booth uses different colors for h3 and h4 tags, which helps to visualize the flow or outline of the post.

End of Post Area/Promotion:

At the end of posts and before the comments, many blogs are including things like buttons and links for social media voting, and calls to action that will encourage readers to subscribe.

Web Designer Wall

Web Designer Wall includes some hand-drawn design elements in this area to go along with links to popular social media sites and a link to the previous post.

Webdesigner Depot

Webdesigner Depot includes an area for promoting submissions and votes at a number of social media sites, plus an icon and link to the feed.

Ecoki

Ecoki provides links to a few related posts and some icons with links to subscribe, share on Twitter and email to a friend.

GoMediaZine

GoMediaZine has a dark, textured area with social media icons and links, as well as related posts and subscription options.

We Are not Freelancers

We Are not Freelancers continues the hand-drawn approach to its design by using a hand-drawn heart, “Promote Me” text, and an RSS icon.

Colorburned

Colorburned includes an area for social media promotion, followed by a list of related posts with thumbnails for each post.

Well Medicated

Well Mediacated has an area for encouraging social media votes and an “about the author” section.

Blog.SpoonGraphics

Blog.SpoonGraphics uses the doodle icons for social media (these icons were created and distributed by Chris Spooner).

AppStorm

AppStorm uses a box that contains two simple lists for related posts and popular posts.

Macalicious

Macalicious has a related post list followed by 3 purple buttons for voting, bookmarking and subscribing.

Bluemag.es

Bluemag uses several icons for social media votes and sharing, as well as a list of related links.

Foodess

Foodess uses a list of similar recipes, and a few small links for social media.

Carbon Sugar

Carbon Sugar includes two large areas for voting and for subscribing.

UX Booth

UX Booth uses an attractive area with encouragement for social media votes.

About the Author:

Including author information on posts is also very common, especially on multi-author blogs. We’ll see a few different approaches to this here.

Viget Extend

Viget Extend show the author name and photo at the top of the post, rather than showing a brief bio at the end of the post as is more common.

Outlaw Design Blog

Outlaw Design Blog includes an author bio box at the end of posts with links to the author site and to Twitter.

Line25

Line25 includes a brief author bio with a photo at the end of posts.

Tutorial9

At the end of posts on Tutorial9 there is an “about the author” section with a brief bio, photo and a link to the author’s site. The bio also includes a subtle background image that helps to make it an attractive area of the post.

PSDTUTS

PSDTUTS includes the author area after a brief post intro at the top of articles.

What’s Your Opinion?

From a reader’s perspective, which elements do you feel are important to have on blog posts, and which design approaches do you prefer?

For more design inspiration see:

Looking to Hire a Designer or Developer?

25 Beautifully Colorful Websites – Part V

Vandelay Website Design — Mon, 02 Nov 2009 21:14:13 +0000

Color schemes have a huge impact on the end result of a design. In this post we’ll feature 25 websites that use bright and vibrant color schemes very effectively. This is the fifth post that has been published in this series. You can see the previous four here.

Gary’s Real Life

Yodaa

Chris Jennings

Sacramento Jazz Festival

Ryan Keiser

Juan Diego Velasco

Bellyshades

Flex360

The Alamo Basement

Villa Hope Adoption Agency

RCI UK

Vacation Rental Station

Knoxville

For more design inspiration see:

Looking to Hire a Designer or Developer?

Trends in Pricing Page Design and Layout

Vandelay Website Design — Wed, 28 Oct 2009 21:00:48 +0000

Pricing pages are very common for sites of web apps, web hosting and other types of services. These pages are critical to the success of the company because they will have a significant influence on the visitors who are trying to make a buying decision. Pricing pages typically give the necessary details regarding the various plans and options, and they encourage visitors to take action.

In this post we’ll look at a number of trends in pricing page design, along with several examples for each.

Emphasis on One Option:

Most of the pricing pages that we are looking at in this post include some sort of table or chart that shows the various options that are available for purchase. Obviously, this is helpful for buyers to be able to compare their options and determine which is the best choice for them. However, sometimes having too many possible choices can actually make things more difficult. Some pricing pages are using an emphasis on one option to help it stand out to visitors. In some cases it is listed as the most popular or best value, and in other cases it is simply emphasized in some way.

Aside from attempting to make the decision easier for visitors, emphasis also gives the designer the ability to control which of the options will get the most attention from visitors. In some cases it is used on the most expensive option, but in many cases it is not. Let’s look at some examples.

Crazy Egg

Crazy Egg emphasizes their basic plan (the lowest-priced option) by using a green background color compared the the gray background of the other plans, plus the column background is also a little bit larger.

Highrise

Highrise offers five different plans that users can choose from, but the Plus plan is marked as the most popular and is emphasized by a larger sized box, a slightly different background color, and a drop shadow that causes it to appear as if it is on top of the other options.

Media Temple

Media Temple uses a simple ribbon that says “best value” to its (dv) RAGE server.

TypePad

TypePad has four different plans to choose from, but the Pro plan is emphasized. In addition to just making this plan stand out visually, they also have a discount available for the Pro plan to give it further emphasis.

FormSpring

FormSpring uses color and size to help the Professional plan to stand out. Also, they have listed it as their most popular plan.

Pulse

Pulse uses a colored background and a green border to emphasize their standard plan.

Onehub

Onehub emphasizes their Team plan by using a subtle change in background color and button color. Additionally, it is starred and labeled as the most popular plan.

Volusion

Volusion uses a “most popular” sticker, change in background color, and a higher tab to allow the Gold package to stand out.

Multiple Colors for Various Options

Color can be used very effectively to make things stand out, and it can also be used to distinguish various items/options. Some pricing pages use different colors for each plan to help separate them visually and to give some added visual appeal to the page.

Wufoo

Wufoo offers five different plans to choose from, and on the pricing page each option features a different color.

Shopify

Shopify uses some subtle color changes on the various plans to help them stand out from one another. The Business plan is also emphasized by labeling it as the most popular.

LightCMS

The pricing page for LightCMS uses a different color for each of the six plans that they have to choose from.

Freckle

Freckle offers four different plans. Each one has a unique color on the pricing page.

Emphasis on Sign Up Link

Some pricing pages use a sign up link or button that stands out from the rest of the page in some way. Of course, this is done with the intent of capturing the attention of visitors and encouraging them to take action and sign up for something. Some companies use this method to encourage signups for a free plan or trial just get to people to try it out, while others use the emphasis to encourage signups for their paid plans. Here are some examples.

The Resumator

The Resumator uses a large sign up button below the name of each plan that is available.

FreshBooks

FreshBooks uses a green arrow and a large button that says “Get Started with a FREE Account!” the button is located at the bottom of the table that displays the prices and features.

Cobblestone

Cobblestone uses a large banner graphic that is displayed above the plans and pricing to encourage signups. The enticement is provided by offering the opportunity to lock in to low prices during the beta launch.

Free Account Options, or Free Trial

A number of companies have chosen to offer limited free accounts from their pricing page to encourage customers to give the service a try. This also makes it possible for customers who only have a need for very basic features and limited quantities to use without the need to pay. Here we will see some examples of pricing pages that promote free accounts.

MailChimp

MailChimp has a free plan in addition to their five paid plans.

Campaign Monitor

Campaign Monitor’s pricing page is different than most that are shown here, but they do offer a free plan on the page and they use buttons to encourage visitors to sign up for the free account.

Six Central

Six Central offers a choice of two plans, including a free one.

Polldaddy

Polldaddy offers three different types of accounts, including a free one.

Backboard

Backboard doesn’t offer a permanently free account, but two of their plans come with a 14-day free trial, and this is emphasized on the pricing page.

Feature Listing

Most of the pricing pages that you have seen throughout this post have some sort of feature listing. In some cases the pricing page may only list basic features, but these pages are examples of though that use extensive lists of features and details for the various options or plans.

Expression Engine

Expression Engine has a detailed table on its pricing page that shows the differences between each plan.

Invoice Machine

Invoice Machine has four different plans and a list of features for each.

Big Cartel

Big Cartel shows the difference between each plan through a table that compares the features of each.

WiredTree

WiredTree lists the details of its various web hosting plans on the pricing page.

Proof HQ

Proof HQ has eight different plans to choose from and they use a large table to list the features and details of each plan for comparison.

For more design inspiration please see:

Looking to Hire a Designer or Developer?

Win 500 Die-Cut Business Cards from UPrinting

Vandelay Website Design — Tue, 27 Oct 2009 23:05:01 +0000

UPrinting has offered to give 500 die cut business cards to five readers of the Vandelay Design blog! If you’re interested in having a unique business card that helps you to stand out to potential clients, this is a great opportunity.

If you’re not familiar with UPrinting, they have been a printing leader for over 25 years and they offer a very wide variety of services, including business cards, brochures, calendars, menus, posters, postcards, envelopes, and more. UPrinting also has a blog that may interest you. They publish articles relevant to graphic designers and the printing industry.

UPrinting offers convenient ordering for business cards. Their site includes a pricing calculator that allows you to choose the size, stock, color, and quantity so you can see the price before even getting started. Shipping costs can also be calculated.

Giveaway Details:

Five readers will win 500 business cards each, plus free ground shipping courtesy of UPrinting. Free shipping is only provided to winners in the U.S. Those outside the U.S. are welcome to enter the contest but would have to pay for shipping and applicable taxes.

To enter the contest, please leave a comment on this post stating that you would like to enter, or tell us how you would use the business cards if you win. On Friday, October 30th I will select five random winners and this post will be updated at that time. The winners will be contacted by email (be sure to leave a valid email address with your comment).

Good luck!

UPrinting is also sponsoring an identical giveaway at DesignM.ag, so feel fee to leave a comment on this post to double your chances. You may enter once at each site.

UPDATE: The contest is now over. Thanks to everyone who participated! Here are the winners (you will be contacted by email shortly):

Looking to Hire a Designer or Developer?