Design Vitality

In today’s tech age, the modern blogosphere is becoming a much more populous region of the world wide web. Bloggers from all over the world are creating, managing, and maintaining their own websites, most often using freeware templates or creating their own from scratch.

As a designer, I recognize how difficult it can be to compose and style your own website or blog, especially if you don’t have any design skills or are just starting out. I was a beginner once, and it was definitely a learning experience to style and develop my own blogs.

One of the most valuable aspects of the internet is the instant availability of all kinds of helpful tools and information. Among these resources are the golden nuggets known as online  generators. If you need to create a quick and easy element for your website or template, these utilities offer automated functions for creating just what you’re looking for.

Be it images, text, layouts, or CSS, these generators have just the fix you need.

Web 2.0 Design

1. Web 2.0 Badge Generator
Badges are fun little accents to add to a Web 2.0 oriented site. Quite often, they are used to denote a “Beta” mode, but they can be used for much more. This generator allows you to select a badge style and customize the color, text, and size.


2. Web 2.0 Buttons
In just four steps, this generator offers you a variety of options for specifying the shape, color, text, and inclusive icons for a custom Web 2.0 button. It offers more than 50 fonts and a hefty variety of icons (or the option to upload your own).


3. Stripe Generator
As Web 2.0 has evolved into its own style of design, there are many elements that have emerged to represent it. Reflections, cutesy icons… and stripes. This utility offers up a variety of settings for creating and customizing a striped pattern that is just right for you.

(more…)

Anyone that knows what’s what about web design knows what CSS is, and how invaluable it can be to styling the navigation of a website.

The thing about CSS is that it is capable of much more than just stylistic design. It has a degree of utile functionality as well, and I’m going to point out some tutorials that make use of some of the more practical applications of CSS when designing your site’s menus.

1. Mac Style Dock Menu Navigation Bar in CSS
For those of you Mac fanatics out there who love the smooth, animated functionality of the OSX Dock, then this is the menu for you! This tutorial makes use of a quick and easy jquery script to beautify the effect.

2. Hoverbox Menu
Similarly to the fisheye expansion effect of the Mac Dock, this menu creates an onHover blowup of the image link.

3. Position Property CSS Menu
This menu makes use of the CSS position property in order to create a rollover effect. Rather than replacing the image, it simply changes the position of the existing image, which has the rollover built in.

4. Flickr-like Horizontal Menu
Like the look and feel of the Flickr navigation menu? Well, so do we! This tutorial augments the CSS with a bit of Javascript to emulate the Flickr functionality.

5. Apple Style Rollover Menu
Here’s another one for the Mac fanatics. Like the look of the menu on the Apple website? Well, this tutorial shows you how to recreate it.

(more…)

First off, we would like to wish everyone of our readers a happy new year. May it be your best year yet. We will be making all the WordPress theme entries available for viewing, downloading, voting and all around enjoyment on January 7th. (more…)

No matter how many fonts you have now, if you are a designer and you see a free font that you like you download it. Period. Of course whenever you go looking for free fonts, a crap load of the search results that show up will get you interested by showing you some good looking fonts and then tell you to pull out your credit card for that one you really liked.

Fortunately, we found just the thing to let you tell those sites that try to charge for fonts to take a hike. (more…)

Do you feel like something is missing from your site? Do you want to give your design a little snap? Make your site stand out with icons! When used correctly icons can add flavor and character to your site. Below are the top 50 sources for designer icons for use on your website: (more…)

It’s happened to us all: We come across a site with very helpful information and we print it. What do we get? A broken layout, ads and cut-off sentences. How do we remedy this? We use these 15 tools and CSS stylesheets to create printer friendly websites of course! (more…)

Let’s face it: Owning a website for your business is pretty much a requirement in this day and age. What good is a website that only shows customers what your company sells? Why not actually sell to them while they are there?

Use any of these 20 open source shopping carts to maximize your sales potential. Some of these aren’t open source, but they are all free. Create an online store and increase your revenue. (more…)

There is over $1500 in cash and prizes and all you have to do is design a WordPress theme. This is an update for those of you who are planning on entering our 2007 WordPress Theme Design Competition.

The last date to submit your WordPress theme is November 30th. It is completely free to enter.

For details about the contest visit our WordPress Theme Design Competition page.

Dreamweaver is a very powerful webpage creator. Using Dreamweaver can help you save time when designing a website. Built in FTP, website testing, link checking and validation are just a few of the program’s powerful time savers. Why not save even more time and take a look at these powerful keyboard shortcuts?

For those of us that like hard-coding our designs, these shortcuts will still save us plenty of time. (more…)

We live in a world of automation. We get everything quicker and easier than before. Why not get the same when working on web designs? These tools and tips will show you how to quicken your workflow when designing or editing a website. (more…)