Adobe AIR is a great platform to build efficient and cutting edge desktop applications, that work on any operating system.

In the last few years, hundreds of very useful applications have been built on AIR for all sorts of purposes. Here we focus our attention on apps built for web and graphic designers.

This list only contains applications that have proven to be dependable and useful for designers. We’ve split it up into these sections:

• Creating Graphics
• Design-Specific Tools
• Editing Images
• Taking Screenshots
• Productivity Tools
• Image Sharing Tools
• Multimedia Apps

Creating Graphics

1. Splashup Light:

Splashup Light is a casual desktop based image editor. It provides a lot of features to enhance, manipulate and edit your photos with minimum effort.

2. Color Lovers:

Color Lovers offers a desktop color finder for searching the ColorLovers community database. Using this app you can search from over 1 million named colors and 300,000 user created color palettes.

3. Contrast-A:

Contrast-A allows you to check for contrast, experiment with color combination and interact with a 3 dimensional RGB color space.

4. LiveBrush:

LiveBrush is a drawing app that lets you create extra-ordinary graphics by combining simple motion controls with creative brush styles.

5. Icon Generator:

Icon Generator allows you to create stylish icons with minimum drawing abilities. Just select the type of icon you want, customize the text and color and create your icon.

6. e2vector:

e2vector is an illustration tool with powerful features like layers, masks, gradients, intersection and path splicing. It also allows you to import/export SVG files.

7. ColorPicker:

Using ColorPicker you can either pick a color from a color grid or design a color using sliders to adjust the RGB values of a color. An essential tool for somebody trying to play around with colors.

8. ColorBrowser:

ColorBrowser is a simple app to organize your favorite color palettes locally. You can import color palettes that you have created elsewhere in the form of ASE files.

9. Kuler:

Kuler is probably the most popular design app for AIR. Kuler lets you generate color themes for any project and browse through thousands of themes created by the Kuler community. It lets you experiment with color variations without any hassle to design your new project.

10. Random Pattern:

A cool app that creates color patterns based on your given parameters.

Design-Specific Tools

11. Pixus:

What does a designer need more than a tool to measure pixels. Pixus does exactly that and more. Pixus lets you preview your designs and offers a multi-screen support.

12. FontPicker:

FontPicker is a simple tool that lets you see all the fonts installed on your computer and select one. You can also type in text to preview all the fonts before choosing one.

13. PixDif:

In addition to measuring pixels, PixDif also lets you measure difference between two design elements and tweak the alpha/opacity of the image.

14. Em Calculator:

Em is an important concept in typography and design. Finally, there is a calculator to measure em without any hassle.

15. HtmlTextEditor:

HtmlTextEditor caters to the most basic needs of a web designer, writing Html code. Also supoorts CDATA wrapping and changes the Html automatically when you change the rich text.

16. iPixer:

iPxer allows you to create interactive flash content from images. You can use it to create image annotations and interactive presentations.

17. OBO Site GatherAIR:

OBO Site GatherAIR is a website generation tool that lets you create Html templates with ease. You can also use it to drag and drop SWF files into your template.

18. Boks:

Boks is an app for designers to work visually with the Blueprint CSS framework. Lets you drag and drop grid elements, preview in browser and compress your CSS code.

19. PixelWindow:

PixelWindow is another simple app to measure things on your screen using a transparent pixel ruler.

20. iPlotz:

iPlotz is all about letting you create wireframe pages and interactive mockups of your website or software.

21. PixelPerfect:

PixelPerfect is another great application to measure the size of objects on your screen. It also lets you create, resize, move and close windows.

22. DesignView:

DesignView is a great application for the design and development of Flex applications. It is a useful tool to create a quick layout before you start tweaking your MXML code.

23. Merlin:

If you are a designer with hundreds of fonts scattered around your hard drive, Merlin can help you organize them. It helps you by alphabetizing all the fonts and arranging them into folders by first alphabet.

24. Caliper:

Caliper is a measuring scale for your screen that can be dragged and rotated through 360 degrees.

Editing Images

25. ImageSizer:

ImageSizer allows you to resize images in a batch and put them in a compressed zip file. You can also use it to to batch rotate, optimize and rename images.

26. ImageDropr:

ImageDropr is a desktop app to upload images to Flickr. Just drag and drop your images into the application, tag or group tag them and start uploading them to Flickr.

27. XeIMG Image Editor:

XeIMG is an image editor that lets you apply effects and filters to your images. The features include blur, sharpen, negative, embossing, black and white e.t.c.

28. Shrink-o-Matic:

Shrink-o-Matic is a simple app to shrink/resize batch images. It supports Jpeg, Gif and PNG images.

29. JustResizeIt:

Resize multiple images by dragging and dropping into the application. Once done, drag the resized images into email, office documents or a folder.

30. CleVR Stitcher:

CleVR Stitcher is a simple panoramic photo stitcher. Just drag and drop your images and the app would create a panorama.

31. TiltShift Generator:

If you love re-touching photos, you’ll love this app. It allows you to create the famous Tilt Shift affect in your photos with a single click.

Taking Screenshots

32. WebKut:

WebKut is a simple and free desktop app to capture screenshots from the web. You can capture the whole screen or a part of it.

33. Snippage:

Snippage allows you to create snippets from any website and place them on your desktop.

34. WebSnapshot:

With WebSnapshot you can take thumbnail, browser size or full page snapshots of any website. The snapshots are automatically saved into your specified folder.

35. PhotoTable:

PhotoTable is a unique tool to capture images from the web where you can simply drag an image from any website to the PhotoTable icon and it would be saved.

Productivity Tools

36. AgileAgenda:

AgileAgenda is a GTD tool that plans your schedule for you. Just enter the basic facts of your project and let the app plan out your schedule.

37. Adobe Shortcut App for Creative Suite:

Create and manage all your shortcuts with ease. A must have app for Graphic designers.

38. Live Presentations:

Live Presentations allows you to create and save presentations locally and share them online.

39. Ora Time and Expense:

Ora Time is a simple app for tracking and generating timesheets, invoices and expense reports. You can also use it to generate customizable reports and invoices for your clients.

40. Doomi:

Doomi is one of the simplest to-do apps around. It lets you create tasks, set reminders and archive your tasks.

41. Mindomo:

Mindomo is a mind mapping application that lets you organize your ideas, manage your tasks and goals and do all this visually.

42. FEAT:

Freelancer’s Estimation Assistance Tool lets you calculate hourly rates and project estimates.

43. Klok:

Klok is a personal time tracking application where all you need to do is press a button when you start working and press another when you stop working. Other features include drag and drop, excel export, archive and a collapsed view.

44. Fireworks Auto Backup Utility:

Ever had Fireworks crash on you? if you hate to lose your work with incidents like this, this app will work like a charm for you. It automatically creates backups of all the PNG files being worked on.

45. Ephemeris:

Ephemeris is an app for photographers that calculates accurate times of sunset and sunrise for that perfect shot.

46. BroadChoice Workspace:

BroadChoice workspace is an AIR based team collaboration app. You can send messages to your team mebers, share notes and tasks and create separate spaces for separate projects.

47. ConceptShare Desktop Companion:

ConceptShare lets you upload files, manage workspaces and get updates from your work spaces.

Image Sharing Tools

48. zFlick:

A simple yet great app to view and save images from Flickr to your desktop. Simply drag any image from Flickr and drop it onto your desktop to save it.

49. FlickrFlipper:

Another great app to search for photos from Flickr. It even lets you search for specific users.

50. TinyUploads:

TinyUploads lets you resize and upload images online within seconds. You can directly embed images to your blog or any other web page.

51. Flickr Desktop Search:

Flickr Desktop Search is a simple yet effective desktop search tool for Flickr.

52. Snoto:

Snoto lets you browse your recent photos from Flickr, or images uploaded by any other user. You can also view them as a slideshow.

53. Destroy Flickr:

Complete hassle-free management of your Flickr account.

Multimedia Apps

54. RichFLV:

RichFLV lets you play and edit FLV files with ease. You can also use the app to convert FLV files to SWF and convert the audio to MP3.

55. Fractal4D:

Fractal4D is a great app to draw cool fractal swirls that can either be saved as simple PNG files or exported as vectors to use in Adobe Illustrator.

56. SWF Shot:

SWF Shot allows you to create high-resolution snapshots of your SWF, PNG and JPG content.

57. UVLayer:

UVLayer allows you to organize and play your digital media including photos, videos and games.

58. Adobe Media Player:

A great media player that lets you play your downloaded or streamed media without any hassle. Highly customizable.

59. LightBoxer:

LightBoxer gives you a constantly changing showcase of high-quality images as your screensaver.

60. Webcam To GIF:

Captured something on webcam that you want to convert into GIF? This is the app to do it.

There are a tonne of great apps out there for Air. We’ve compiled our favorites here, but are there any we’ve missed? Which apps do you use?

This is just a quick post to let you know that we’re once again looking for writers, and this time, at a substantially higher rate.

The new rate is based on the feedback you all left a few weeks back. Big thanks to everyone who took part!

From now on, post authors will be paid somewhere between $70 and $125 for their work, based on the quality of the post. We’ll be drifting away from the list posts that some of you are getting a little tired of, and start focusing on more in-depth tutorials and discussions (And when you do see list posts in future, you’ll find a lot more value in them. You’ll see what I mean come Thursday!).

The topics we’re interested in are getting the most out of WordPress (of course!), but also more general design theory, case studies of usability improvements, PHP and JavaScript tutorials, and just about anything else a web designer could find of interest!

And of course, authors still get full credit for their work with an avatar and bio with links at the end of each post.

So if you’d like to talk to us about writing articles, head over to our Write For Us page for full details!

As part of our feedback post, we promised to review one commenter’s site here on Pro Blog Design. Well, our winner was Liam J Moore, so we’ll be reviewing his site today.

A quick note to everyone who took part in the feedback post though, thank you for all of your suggestions! We’ve gone through every single one of them, more on that to come on Monday!

Now, to the review. Liam is a student completing his Masters project in Multidisciplinary Design this year. The blog currently serves a joint purpose; as a portfolio for his design work, but also as a progress log for the project.

The really interesting thing about Liam’s site is the style he has set it in, have a look:

(click it to view in full size)

What Has Been Done Well?

The most obvious part of this site that has been done well is simply how it looks. The color scheme consists solely of yellow, grey and white, all across the site. There are very few graphical touches, just large blocks of yellow or gray, all laid out to give quite a memorable appearance.

The vivid yellow is one shade you rarely find making up the background of a website. Combine this with simplicity of the setup to get quite a bold feeling from the website.

That leaves a good message about being brave enough to try new things as a designer. Perfect for a portfolio site.

Another unique touch is the picture in the sidebar. You’ll notice I couldn’t resist putting it into the intro image for this post, just because it’s such a cool idea.

A regular picture with a “Hello” speech bubble to welcome you to the site. Another simple effect. Another effective one.

Even the typography on this site is nicely set. The large fonts are effective where they need to be, and reading off the vivid yellow background is a lot more pleasant than I expected it to be. I don’t think it’s a move that any newspaper websites will ever copy, but given that this site is primarily a talent showcase, it might just be worth any small usability loss.

What Could be Improved?

One question I had to ask Liam before I wrote this review was this, “is the site primarily a portfolio, or a blog?”

The answer was that it had become both, but in the long run, the real purpose was to be a portfolio. Sometimes it can be hard to choose between two goals for a website, but to get the most out of it, you will need to make that decision eventually. With that in mind, let’s look at how we could re-assess the homepage.

The two things you will be drawn to first when you load the homepage are the large messages on the grey background in the center, and the “hello” image to the right. That’s fine. The text introduces you to the site, and the photo is a great personal touch.

But underneath that, there’s a large empty space. The sidebar extends 2 or 3 more screen’s worth down the page, stretching out the homepage where it doesn’t need to be. All of the content in the sidebar is useful, but not an essential.

Given the purpose of the homepage to drive readers to particular aspects of your site, we can take out some of this sidebar content on the homepage, and only display it on the blog pages instead:

• Hello – Introduces Liam. Given that this is a site about Liam, it’s obviously going to stay!
• What Am I Twittering? – Twitter is great, but perhaps this would be more relevant to longer term readers? (i.e. the people who will be on your blog page)
• Flickr – The Flickr photos here are great. There’s nothing wrong with keeping them here, or perhaps we could find another way of displaying them elsewhere in the site?
• Archives and Module Blogs – Both of these sections are navigation for the blog. But the reader hasn’t gotten to the blog yet, so let’s take them out.
• Search – Again, the reader hasn’t chosen to visit the blog yet, so a search engine may not be what they’re after. It’s a small part of the page though, so it won’t do much damage in staying either.
• Contact details – Always an essential for a portfolio!
• Blogroll – Nice to have on a blog, but it takes up a little too much room for the homepage.

Now we’ve cut down on the space, how are we going to drive users to the portfolio page?

The first step is the simplest; in the welcome paragraph, link the words “portfolio website” to the portfolio. You could even link “Web & Graphic Designer,” and there’s no need to change the appearance of the text when it’s linked.

Another option would be to display pieces from your portfolio. Displaying the full images might be a little much, but smaller thumbnails of each could be effective.

Some Usability Tips To Consider

Liam’s site looks great, but as I browsed around it, there were a few little things that bugged me occasionally. Nothing major, but when a lot of small things come together, it can make a difference.

• Logo not linked to the homepage.
• The logo shade of yellow is very slightly different to the shade of yellow in the rest of the website. It’s not something noticeable at first, but might be worth looking at.
• There are very few rollover effects on the site. Both the navigation buttons in the header, and the post headlines in particular, would benefit from the interactivity. For the post headlines, some CSS could be used to make the entire grey block into the link, and the effect only needs to be simple. Changing the font color to white would do it.
• White comment fields. Normally white is great to read and write off, but when the white is set against the yellow background here, the contrast turns it almost neon.
• Location of the Earth Divided tweet in the header. This tweet is exactly where I would expect a slogan to be. I was able to work out what it was when I saw the “22 days ago” at the end of the message, but for non-Twitter-addicts, it may be a little confusing.
• The social sharing links at the end of each post are in blue. Given how well the site sticks to the 3 tone color scheme, it would be nice to see these few links fall in line with the rest.
• When visiting the blog, you’re greeted with a lot of titles like “Tutorial #17” and a lot of talk about the Masters project. Given that the Masters is the focus of the blog for now and the next while to come, it would be worth giving a quick overview of what the project actually is at the top of the blog page. That way, new readers won’t be lost when they start to dive in!
• Bonus pointer; it still says copyright 2007 in the footer. Woops!

Conclusion

All in all, I think Liam’s site has a great style to it. It’s boldly different to the norm, which is a selling point for any graphic designer. The stark yellow may not be to everyone’s taste, but striking moves are what it takes to get attention in a crowded niche.

Now it’s your turn, what do you think of Liam’s site?

PS – I just wanted to give a shout out to one of Liam’s projects, Earth Divided. There are some great uses of graphic design in his logos (Plenty of people walking around Belfast will have spotted them before!), but for everyone else, you’ll find the Twitter profile is full of truly fascinating statistics.

There are a lot of free fonts available online. Sites like Dafont and 1001Fonts are invaluable repositories for designers, because they give us such a wide range of font options.

Cartoon fonts are one type of font that rarely get much praise. The problem with them is that by definition, they’re gimmicks. They are never the most legible fonts, I’d never recommend using one for content, and quite often, they just look foolish.

But when it comes to creating a memorable logo easily, a good cartoon font can be a great first step. They’re distinctive, look great in large sizes, and can be easily modified and re-colored in Photoshop to make it that little bit more unique.

Of course, that only works with certain styles of design. If your site is all bubbly and colorful, it’s worth considering. If you’re more minimalist or professional, stay well clear!

So with that in mind, here are 37 of the best free cartoon fonts we could find. Let us know if you put any of them to good use!

Glimstick

Joint By Pizzadude

Mandingo

Smilage

Chachie

Bumbazoid

Baby Kruffy

Letras Locas

MTF Scribblie

Taxidermist

Smartie

Mickey

Chizzler

Umberto

Space Pontiff

Fontdinerdotcom Sparkly

Broken Toys

Ice Age

Army Beans

Chlorinar

LoOse Gangster

Gwibble

Chubby Cheeks

Candy Time

Cosmic Dude

Cactus Sandwich

BabOonjaZzbaSsoOn

Altamonte

akaHoggle

Eyesis

Armor Piercing

Fighting Spirit

Denne’s Aliens

Clink Clank

Pokemon

Oogie Boogie

Burrito

Which was your favorite of these cartoon fonts? Or did I put you off a little too strongly in the intro to the post?

Any others that you would recommend to us?

We all know that our computers will crash someday, and we all know that we need to make backups of our files to keep our work safe.

The hassle is that a lot of backup methods are tedious and time wasting to keep going. We want to have a backup system that we can set up, and then forget about it.

We’ve already shown you how to keep a WordPress database safe, but in this post we are going to look at the rest of your blog and theme files, as well as client files or any other important documents you keep.

Here’s what we’ll be talking about:

• What is Dropbox?
• Securing your blog folder.
• Why use Dropbox for backing up client files.
• Creating symlinks to preserve your current folder structures.
• Collaborating with others on blog posts, design files etc.

What is Dropbox?

There’s a good chance you’ve heard of it already, but anyway, Dropbox is a free service which offers you 2GB of storage space online.

You install the program on your computer, and it creates a “Dropbox” folder in your Documents folder. From then on, anything that goes in the folder gets copied up to Dropbox as well, instantly.

The nice part is that you can install Dropbox on as many computers as you want, so your files are accessible from anywhere (Including a regular web interface).

So, let’s start by signing up. If you use this link, you will get the free 2GB + 250MB of extra space. That’s because of Dropbox’s “Invite a Friend” program, which you may as well take advantage of!

Alternatively, here’s the regular homepage link. Just download and install the program, and you can sign up as part of the installation.

Securing Your Blog Folder and Client Files

When you installed the program, you specified a location for your Dropbox folder (Most likely; My Documents > My Dropbox, if you’re a Windows user). We’re going to copy our blog files into this folder.

With WordPress, upgrades now take place on the server, so the likelihood is, the core WordPress files on the server will always be different to the ones on your computer (Unless you’re very meticulous about keeping the two in sync).

Fortunately, those files aren’t important. You can always re-download them from Wordpress.org if the worst happens. For that reason, we’ll stick to just 3 folders.

Load up your FTP client, and download a copy of the following:

• wp-content/themes/
• wp-content/plugins/
• wp-content/uploads/
• Optional: You may want to download your .htaccess file if you have edited it, and your wp-config.php file for your database options.

These 3 folders combined with your database backup, mean that you’ll always be able to recreate your site exactly as it was.

Now simply copy all of the files into the Dropbox folder on your computer and Dropbox will take care of the rest.

Why Use Dropbox for Client Files

There are some great ways to backup all of the files on your computer, but the problem is that they have to be scheduled, e.g. to happen once a day.

So if your computer dies, you’ve lost at least 1 day’s work.

That can be a costly mistake, but one that Dropbox would avoid. While working on files saved in your Dropbox folder, every time you click save, the saved file is copied up to the server.

Dropbox as a Version Control System

Dropbox also keeps a record of previous versions of the file, so it works as its very own personal version control system.

Check out this screenshot; it’s of the web interface for a WordPress style.css file I’ve been working on. I can roll it back to any previous version I like if anything goes wrong in the current one (Like accidentally overwriting the whole file with a different one…).

Click to see in full size:

Setting Up Dropbox For Client Files

The best way to work with client files within Dropbox is to set up 2 folders for your client files:

• Current Clients
• Past Clients

Current Clients is where you put all of the files you are currently working on. This is the folder that you should put in your Dropbox.

Past Clients can then be backed up to an external disk, or any other normal backup method.

You are unlikely to go over the 2GB freebie limit this way, and Past Clients files won’t change often so a daily backup will cover them 99% of the time.

Creating Symlinks to Preserve Your Folder Structure

A symlink (symbolic link) is like a folder pointer. Let’s say your original folder is here:

My Documents/Work/2009/ABC

But you’d like to be able to access that folder just by going to:

My Documents/ABC

Then you could create a symlinks for My Documents/ABC that would take you to the real folder any time you clicked it (or any time a program accessed it).

Dropbox and Symlinks

If you have a nicely organized folder on your computer for all of your client files, or your blog files, then you may not like the idea of moving the most important folder from each to a separate location.

With symlinks, we can avoid that:

• Cut and paste the folder (e.g. “Current Clients”) from the original location, into your Dropbox folder.

  (Important: the original must be put into Dropbox. If you do this the other way around, files will only be backed up each time Dropbox loads)

If you are a Windows user, continue reading here for how to set up the symlink. For Mac and Linux users, Dropbox themselves have a good guide on setting these up.

• In Windows, go to Start > All Programs > Accessories > Command Prompt.

• Windows Vista and Windows 7 users can then type, for example: (all on one line)

  mklink /D "C:\Users\YOURNAME\Documents\Web\Clients\Current Clients" "C:\Users\YOURNAME\Documents\My Dropbox\Current Clients"

  The first path in quotes is where you would like the symlink to be placed. The second is for the folder in Dropbox that you would like it to point to. And don’t forget to replace YOURNAME with your name on the computer.

• Windows XP users will need to download Junction, and then type a similar command: (All on one line again)

  junction "C:\Documents and Settings\YOURNAME\My Documents\Web\Clients\Current Clients" "C:\Documents and Settings\YOURNAME\My Documents\My Dropbox\Current Clients"

Now you can browse and find your clients folder in the same place it always has been, but you’ll actually be working on files in your safe and secure Dropbox folder!

Collaborating With Others

Folders can be shared with anyone else with a Dropbox account. Every person can edit and add to the files in the folder, and Dropbox will keep a copy of the revisions.

Just right click the folder, and select “Share This Folder” from the Dropbox menu.

You’ll be taken to a screen where you enter the email addresses of the people to share with, and it’s a simple as that.

There are a lot of options for collaborating online (e.g. Google Docs), but here are a few examples of where this could come in useful:

• Working with authors on your blog who prefer to type their posts up in Word first.
• Collaborating with another designer on a PSD for a client.
• Working with another coder on a WordPress theme, so you both always have the most up-to-date versions of every file.

Conclusion

I love Dropbox. I use it primarily for backing up my client files and the occasional reversion to an older version of a file, but I also use it a lot for sharing files with people instantly (both for code files that other people are working on with me, and for sending over small files like images without resorting to emails or IMs).

What do you think of Dropbox? What uses have you put it to, or do you have a different tool we should look at?

Joomla is a CMS (Content Management System) that lets you create websites, blogs, web portals and online applications with a minimal amount of coding. It has a lot in common with WordPress.

We haven’t covered Joomla in any way previously on this blog, so we’re going to start by giving you a taste of the sites that can be made with Joomla. The following 40 themes are all free to use and show you the starting point you could have for your next site if you use Joomla with it.

If you’d like to see more Joomla coverage in the future, just let us know. Or of course, we can stick to good ol’ WordPress!

AdminPraise Lite

Afterrburner

IceMag

Xbox

Xbox Black

Medal Of Honor

Artik

Connect The Dots

Aqualine

Greenera 4.0

Somnia

Droppler

Mercury

News

Ink Kids Land

Manuscript

World War Craft

GetsWider

Sublime

Nuke Red

Elements

Hogwarts

L Cars

Vec Demo

Clean and Clear

Ytw Red Bah

Pink, White and Black

Orange Blog

Word Blog

Black and Orange

Field 2006

Contasi

Music Blog

Sun Burst

Art Colours

Star Craft

The Matrix

Spirit

Youloo

New Horizon

What do you think of the themes? Any great ones, or will WordPress be your steadfast favorite for the foreseeable future?

Splashnology is a community design site. Members join up and submit articles, which are then displayed in blog format on the website.

Today we’re going to take a look Splashnology’s design to see what has been done well, and what we would improve on. Lets start by opening up a new tab, and then on to the review!

NB – This is a sponsored design review. To see about getting one for your own site, email us.

What Has Been Done Well?

The first word that comes to mind when describing this design would be “clean.” The color scheme is largely black and white, and there is ample padding with few visual effects.

The subtle differences in shades of grey, combined with relatively large headlines and photographs take what could otherwise be a very simple appearance, into a nice, minimal design.

In the whole of the website, there are very few “graphical effects” as such to catch your eye. Instead this design relies on its very lack of those effects for its appeal, and some nice touches in smaller aspects of the site.

For instance, the article titles begin by naming their category, and then the title of the post. On a site with such a wide variety of categories, this could be a very nice of quickly scanning for the posts you want.

Another well made section of the website is the “Our Friends” blogroll of the sidebar. It is a simple list, but with the favicons of each website shown. In more colorful websites, this could end up causing clutter, but here it adds a spark of life to the site.

They may want to follow their own advice on these images and use CSS sprites though, cutting down by 19 HTTP requests.

One area of a website which rarely catches my eye is the navigation between results pages (The “1, 2, 3, 4…” etc. navigation at the bottom of a search). That changed on this site however.

The large “previous/next” makes it very easy to use. Too many sites have a tiny little arrow in a box that you have to hunt for (Or worse, a single arrow for the next page and a double arrow for the last page). Splashnology’s setup was very friendly and looks good.

What Could Be Improved On?

One big question needs to be answered; what is this site?

Load the homepage and you will be presented with what looks like a blog. You’ll see a line of tabs saying “Posts Blogs People Jobs Help”, which is a little confusing. You’ll even see the name Splashnology, which could mean just about anything.

You may or may not notice the tiny little slogan tucked under the title, “Web technology society.”

Whilst there is nothing wrong any one of those elements, when you put them all together, they just don’t mesh well. When I began this review I thought I was reviewing a blog with some unusual tabs I should check out later.

It wasn’t until later that I found the site is a community where anyone can sign up and submit articles. They even have rather extensive author pages.

If your site looks like a blog, that’s no problem. But if it’s not a blog and you really want me to sign up, to vote on articles, or anything else your members can do, then you need to make it clear.

We’ll talk about the header in a minute, but let’s just look at the social voting options for now.

Splashnology’s 2 boxes are hidden way down at the end of the post, those decimals could mean anything and even the 2 arrows aren’t that clear on their purpose (And yes, there is actually some sort of text in that blue box…)

Contrast that with Digg. One simple number which is clearly a number of votes, and the thumbs-up vote button is hard to miss.

If people are going to interact, it needs to be as simple as possible for them.

The other major area which could do with a rethinking is the header itself. This is the current header:

There is quite a lot going on here, without any one element truly taking precedence. The content includes the logo, login/register buttons, navigation tabs, a submit button, a search form, and some more navigation.

But what could be done about this all?

Let’s start with the “Login or Register.” The 2 are given equal prominence, but a user will only ever need one or the other. Now let’s assume that a user looking for the login button has been to the site before and knows it better than a user looking for the “Register” button would.

The returning user knows his link is in the top left. The new user doesn’t know where to begin and needs the “Register” to catch his eye. With that in mind, why not make the “Register” larger (or the same size), and the login a lot smaller but nearby to it.

Now onto the navigation. The large tabs divide the site into sections. Most are self-explanatory, except for the “Blogs” tab which instead of showing a list of blogs, it shows a list of topics.

This navigation is useful for people looking to get to other parts of the site, but the majority of users are going to be interested solely in the articles. The “Blogs” section already has a sidebar widget. Something similar could be made for the “Jobs”, and then the rest of the navigation can be moved somewhere less obtrusive.

The sidebar widgets will gather the attention to these sections (Better than the header could, because it will provide content from the sections, e.g. latest jobs), and users can then use the regular header links for navigation if they want to return to them a second time.

Now we’re starting to free up some space!

We’re left with the Submit button, the search bar and the 2nd navigation bar to sort out.

The Submit button is an interesting one though. Currently it is the only indicator of the social nature of this site, but for an un-registered users, it’s pointless because they have to register before they can use it.

That leaves us with a choice; we can remove the “Submit” button for non-registered users (freeing up more space), but we have to find another way to emphasize the social nature of the website.

If we highlight the social voting buttons around the post titles (With a new design, as we talked about earlier), then the social nature will become apparent. We can also use the header to help us out by increasing the size of our slogan. I’ll also take the chance to reword “society” to “community.”

When a user is logged in, they won’t have need of the “Register” or “Login” buttons, which frees up the perfect space for our submit button.

Our next move now is to focus on the second navigation bar. Let’s consider what we currently have.

A “Popular” tab which lists the most popular posts. A “General Blogs” tab which showcases posts from other websites. A “Personal Blogs” tab which shows posts written for Splashnology, and a “Top” tab which display the most popular posts, with different options for date ranges (e.g. Top in 24 Hours etc.).

Each of those then has a “Positive” or “Negative” subnavigation option.

The first thing we can say is that Popular and Top should be the same thing, so let’s strike one off our list.

Now for General and Personal; the purpose of these tabs isn’t clear until you actually click them and try to work it out. And for a new reader, what difference does it make if the article they read was submitted in, or hand-written there on the site? That information doesn’t help them find what they’re after.

We could reduce this list down by putting the main categories in the top navigation, and the actual topics in the subnavigation.

You could experiment with grouping the topics into categories and listing those (e.g. Design would be a main topic, and Inspiration, CSS, Tutorials etc. would be a subtopic), but our goal here is to make it as clear as possible so we’ll keep it simple.

We will have one tab for “Home” and one tab for “Popular.” Both of those will then list the main site topics underneath.

When a user is logged in, this also leaves us with room for a “My Account” tab, giving them quick access to things like their profile, account settings and comments.

Last but not least, the red “Search” text stands out merely by having almost the only color in the header. Let’s take that out and all a little spacing to the header.

Now we’ll compare our finished product with the original.

Original:

vs. modified:

And that was all done without adding any sort of graphic effect or changing the style in any way. It’s amazing what some organization and layout can do.

All in all, the minimal Splashnology design is well done and the style needs no changing. The usability of the site and its clarity of purpose could be strongly improved though. Taking each aspect of the site one at a time and thinking “how could I make this clearer?” will take it a long way.

What do you think of Splashnology? Is there anything you would do differently?

And on a purely Pro Blog Design note, what did you think of the style of this review? Our previous reviews have always been shorter and snappier. A list of the good sides, then a list of the bad. Which do you prefer?

It’s been a while since we last asked for some feedback about who you are and what you think of the site. If you could spare two minutes to answer the polls below, it would really help us make Pro Blog Design even better!

There is also a reward for anyone answering the question at the end! Absar from ShopHTML is offering 20% off their PSD to HTML services to anyone who does!

On top of that, I will choose one random winner from the list and give them a free design review, published here on Pro Blog Design. That means you get all the feedback on your website of course, but also a good bit of publicity as well!

Poll Questions

Competition Question

ShopHTML do PSD to xHTML conversions, but also to systems like WordPress as well. To receive 20% off your next shopHTML order, all you have to do is answer the following question:

“If you could change one thing about Pro Blog Design, what would it be?”

Leave your answer in a comment on this post, and Absar will get email you soon with your discount code! (If you’d rather not, just say in the comment and I won’t pass on the email address).

You’ll also be entered in the competition to have your site reviewed here on Pro Blog Design. One winner will get a full design critique published here.

Thank you for taking the time to answer the polls and the question. We really appreciate it and you’re helping us to build a much better website!

Update (17/10/09): We’re now up to 28 awesome green web designs, thanks to all your comments!

Today is the 3rd Blog Action Day, meaning that you’ll be bombarded by articles from all over the internet on helping our environment. We took part in the first two, and of course we’ll be taking part in the bombardment today as well.

Keeping in line with our regular topic, we’ve pulled together a collection of the best designed “green” blogs and websites out there.

As web and graphic designers, one of the easiest ways we can help out a green organization is to help out with their site’s design. There are a lot of big environmental websites out there with great information which could do with a facelift!

Hopefully the sites below will inspire you with what you can come up with for a “green” website, whether it’s green or not!

And more importantly, the content on all these sites is packed with information on the effects of issues like global warming and foresting, along with tips on how to reduce your impact.

Inhabitat – One of the nicest green color palettes in this list.

Planet Green – With a pretty brave logo! Seems to work though.

Pando.org – No green to be found, which is a nice change! This one’s all in the header photo.

The Greenists – Little details like the leaves in the nav and sidebar headings are done perfectly.

Treehugger – You *must* load up this site and check out their navigation trick on the right side.

World Changing – Organizes its content particularly well.

Ran.org – A lot more striking than most others in the list!

EcoGeek – Very relaxing and easy on the eye.

No Impact Man – The illustration in the header makes this one, great work!

The Daily Green – The header typography across the site looks great.

Apple and the Environment – Like all things Apple, this one is well designed.

Evergreen – The grey and white with the awesome background image give this site a very different feel to the others. Definitely one way to stand out!

Climate Progress – Not as graphically impressive as some of the others here, you still have to give them credit for doing something different with the green color scheme.

Clean Technica – All about green technology. Notice the clever design in the logo?

Alt.Energy – The design here is mostly in shades of grey, but color is used very effectively for splitting up the different sections (blue for hydropower, orange for solar etc.)

Take Part – Very cutting edge design with some great effects!

Greenpeace – Not as impressive as you would have liked from such a large movement, but if nothing else, it is quite neatly done.

Cool Green Science – Extremely minimal, and it works.

Earth2Tech – Another clever play on circuit boards and leaves, Earth2Tech also has a nice layout for posts on the homepage.

Carbon War Room – Stunning graphics work on the planet, and a pretty impressive script as well (Shows the scale of various emissions and green energy generation)

Earth Hour – Another excellent site maintained by the WWF.

Global Warming on Change.org – A social networking design with a lot of character.

What do you think of these designs? Have any favourites? What would you do for a “green” web design?

And if you want to learn more about Blog Action Day and the thousands of articles being written by bloggers around the globe, be sure to check out Blog Action Day’s official site.

Update (15/10/09): Thanks to Gopal Raju and Sunil, we have 2 more awesome green designs to add to the list! Thanks guys.

Green Ideas – A very peaceful design with a fantastic illustration!

Heroes of the UAE – It’s not often I say this, but the Flash video actually makes this design.

Update (17/10/09): You guys are amazing, thanks to Rich Sturim, Michael Hepher, Alex, and milo for sharing what yous have come up with for green web designs. Great work!

Brighter Planet has a very simple design with a perfect color scheme.

CB Green has a very “earthy” feel with the rich brown background, and a pretty cool logo to boot!

Be Green Chic is a theme for a green shopping site with plenty of strong graphic usage.

53 Mondays is an interesting one because it is a web design portfolio site first and foremost, but their unique selling point is that they are eco-friendly. Read more here!

Vector images are a very popular style on designs these days. They don’t have a fixed resolution, instead they are flexible, which means you can still adjust any dimension without losing the quality of the image.

Many designers use them for print ads, flash animation and even web design because it gives awesome flexibility, you can play around with the images and produce quality images for your artwork. If you’re a designer looking for icons, clip-arts or images for your next design project, we’ve compiled a list of the best websites where you can download the vector images for free.

Adobe

Today-Free

Ndesign-studio

Snap2objects

Designers Revolution

Smashing Magazine

Vector Cartoons

Vibr8bros

Free Logotypes

Deviantart

Design Bum

Magic People

Vectorvault

Cool Vectors

Dr-Depot

Createsk8

Vector Stock

Vectors Workshop

The Pixlpusher

All The Flags of The World

SVG-Cards

BrainCorp

VectorJunky

Vector Portal

KeepDesigning

RoundPixel

FreeVectors

QVectors

Bittbox

Vecteezy

Vector4Free

GoMediaZine

Vector Wallpapers

Which sites are your favorites? Any great collections that we’ve forgotten?