Vandelay Design Blog

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?

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.

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?

75 PSD to HTML Resources for Web Designers

Vandelay Website Design — Mon, 26 Oct 2009 19:57:59 +0000

PSD to HTML conversion is a critical step in the web design and development process. Whether you are coding your own design or outsourcing it, the quality of the final project will be significantly influenced by the work that is done at this stage. In this post you’ll find 75 resources, including PSD to HTML providers, PSD to WordPress providers, sites for reading reviews of the service providers, automated resources, and PSD to HTML tutorials.

PSD to HTML Tutorials:

If you’re interested in learning more about doing the PSD to HTML coding yourself, these tutorials will be very helpful.

From PSD to HTML, Building a Set of Website Designs Step-by-Step

Build a Sleek Portfolio Site from Scratch

Encoding a Photoshop Mockup into XHTML/CSS

How to Convert a PSD to HTML (video)

How to Code a Clean Portfolio Design

How to Code a Grunge Web Design

Coding a Clean and Illustrative Web Design

How to Create a Dark and Sleek Web Design from Photoshop

Coding a Clean Web 2.0 Style Web Design from Photoshop

Converting a Design from PSD to HTML

Slice and Dice that PSD

The Design Lab: PSD Conversion

Converting a Photoshop Mockup (video)

PSD to HTML Providers:

Here is a look at more than 40 of the leading providers of PSD to HTML services. Additionally, some offer options to have a PSD coded into a WordPress theme, some other type of CMS template, or for a particular shopping cart system.

Snobby Slice
You can read our review to see why we recommend Snobby Slice.

Markup4U
Markup4U also did some excellent work for us. You can see our review of the services from Markup4U.

SEO Semantic XHTML

You We You Coding

PSD to HTML Ninjas

PSD to WordPress Providers:

The companies listed below specialize in taking a PSD file and coding it into a WordPress theme.

WPCoder
WPCoder has done some work for us, and you can read our review of their services.

PSD to Any
In addition to WordPress, they offer coding services for other CMSs.

Reviews:

Finding the right PSD to HTML provider can be a challenge. There are a few sites that exist to allow reviews of PSD to HTML companies, which may be helpful if you are trying to find a provider that comes highly recommended.

Most Sliced

PSD to HTML Reviews

Best PSD to HTML
Also see the post Tips to Choose the Right PSD to XHTML Firm.

PSD to HTML Companies

Resources:

There are a few resources that will take your PSD and automatically create the code for you. I have not personally used any of these tools, so be sure to pay attention to the code that is produced.

SiteGrinder 2
A premium Photoshop extension that will convert a PSD to HTML.

PSD 2 CSS Online
A free online tool for PSD to HTML conversion.

Divine
Converts a PSD to a WordPress theme.

For more helpful resources please see:

Looking to Hire a Designer or Developer?

25 Well Designed Sports E-Commerce Sites

Vandelay Website Design — Wed, 21 Oct 2009 23:22:01 +0000

Since I launched CartFrenzy a few months ago I have enjoyed seeing a lot of great e-commerce websites from designers all over the world. Many e-commerce sites aren’t much to look at, but there are plenty that feature attractive designs. In this post we’ll feature 25 sports-related e-commerce sites.

Bonfire Snowboarding Apparel

Sanction Snowboards and Skatboards

Columbia Sportswear

Adidas

New Balance Web Express

Puma

Zumiez

Under Armour

Dick’s Sporting Goods

For more e-commerce design inspiration please see:

Looking to Hire a Designer or Developer?

Interview with Tyler from Snobby Slice (PSD to HTML)

Vandelay Website Design — Tue, 20 Oct 2009 20:47:26 +0000

PSD to HTML services have become incredibly popular in the past few years and many designers use these services regularly. Personally, I was hesitant to try PSD to HTML providers for a few reasons, one of them being that I just wasn’t sure how it worked and what was involved. I assume that many other designers out there are curious about PSD to HTML services, so I asked Tyler from Snobby Slice to do this interview to help those designers.

Who Is Snobby Slice?

After trying a few different providers I came across Snobby Slice several months ago. Tyler and his team did a great job for me and they have established a reputation for being one of the highest quality providers in a crowded market. If you’re interested in working with a PSD to HTML provider who will produce quality code you can see more details in our review of Snobby Slice. And if you are just curious about the PSD to HTML process, I think you’ll find the information that Tyler shares in this brief interview to be a good starting point.

Why should designers hire a PSD to HTML service provider?

Why deal with code when you don’t have to? By choosing a PSD to HTML service provider, you can stick to your biggest profit center (design), and spend more time making sure the needs of your clients our met. We’ll do all the nasty coding work!

Most PSD to HTML companies primarily emphasize their price and turnaround time to potential clients. What would you advise designers to consider when choosing a provider?

I would suggest contacting them and making sure that it’s a provider that they trust. Look around their site, see where they’re based and get familiar with their service. Do they have relationships with others in the community? A little due diligence goes a long way. Making sure they’ll treat your client work with respect and secrecy is extremely important before putting your reputation at risk.

What type of research (if any) do you think a designer should do before hiring a PSD to HTML provider?

I’d start by talking with other designers, seeing if they have any experience with a few of the firms out there, and also read some of the blogs/forums on the topic to see if anyone can provide you with a solid recommendation.

What are some of the most common issues experienced by your coders that slow down the process or require them to go back to the designer?

Sometimes the designer isn’t always clear with exactly what they want. An added “comments” layer in the PSD (specifying texts, images, etc.) can really speed up turn around time.

What tips do you have for organizing layers in Photoshop to make it easier on the coder?

Just keeping things nice and neat in folders is helpful. However, a comments layer is really the most important thing.

What should designers expect to be included in the base price and what is likely to cost extra?

Unfortunately, many providers are skimping out on key features to lower their prices. Make sure your design would be compatible with a healthy variety of browsers, and that you’re not getting sold a “sub par” coding package.

What makes Snobby Slice different from other PSD to HTML providers?

We care about our clients! Our base pricing includes everything our clients could want or need. We don’t charge for every little drop down or javascript implementation. Since we offer a 100% money back satisfaction guarantee, we’ve designed our business model around keeping our customers happy – NOT just collecting their cash.

Looking to Hire a Designer or Developer?

50+ Useful Photoshop Plugins

Vandelay Website Design — Mon, 19 Oct 2009 19:51:40 +0000

One of the great things about Photoshop (and others from the Adobe Creative Suite) is the ability to extend the possibilities with 3rd party plugins. In this post we’ll feature more than 50 plugins/extensions/add-ons for Photoshop, some are free and others are premium.