Here is my proposed realignment for the website of Mac System Notification App – Growl. If you have any comments or suggestions, please don’t hesitate to leave a comment.

Firstly, I just made a few minor adjustments to the header. I added some rays, shadows and highlights.

Then I decided to ditch the white menu and main content area for green ones. I also made the menu a little larger.

The main content area was then divided into two sections. One for a short description of the app and the download button. And one for a video demonstration of Growl.

Lastly, I decided to put all the partners and footer content on a nice brown background, to help differentiate between the main content and the sub content.

Realigned Version

Current Version

Here is my proposed realignment for the website of Mac App Developer – Flying Meat Software. If you have any comments or suggestions, please don’t hesitate to leave a comment.

To kick things off, I textured the background a little.

Then I moved the logo and site navigation, up to the top. And added a nice dark background for the header.

I made the Application titles look slightly indented, for a more professional. Then I made the “More Info” and “Download” links more prominent, and added some icons.

Lastly I put some faint dividers between the apps and above the copyright.

Realigned Version

Current Version

Here is my proposed realignment for the website of Safari Ad/Flash Blocker – Click2Flash. If you have any comments or suggestions, please don’t hesitate to leave a comment.

As always, I started with the background first. I added a bit of texture and a highlight behind the header. Then I reworked their logo/icon, to something a little more presentable.

Then I added some color to the download buttons. I colored the latest stable release green, to represent go/good. And the latest beta was colored orange, to represent warning/carefulness.

The link colors were changed to a greenish blue, to compliment the download buttons.

Next, I jazzed up the Features section, with nicer bullets and swirls next to the title.

Screenshots were added, to allow visitors to get better idea of what they are downloading.

The “Support Other Video Sites” and “Help” links, were reworked to stand out more, but not so much that they get in the way.

Finally, I just made some small adjustments to the text, like adding sleek dividers and the “What is ClickToFlash:” heading.

Realigned Version

Current Version

For the first time ever, DVQ has been featured on CSSMania. I guess I must have done something right :)

Here is my proposed realignment for the website of Mac App Developer – BLACKTREE, best known for their Quicksilver App. If you have any comments or suggestions, please don’t hesitate to leave a comment.

To start off, I redid the background, by adding a bit of texture.

Then I worked on the header. Firstly I moved the tree mark to left, next to the logo. Then I increased the brightness of the logo, and added a tagline below it. The Support and Docs links were moved to the header, to get them out of the way of the content, while still making them easily accessible.

Next I added the intro text “Hello! We make Mac Apps, like Quicksilver & Wildcard!”, so that the user quickly understands what the site is for. Because, with the original design, I felt the user didn’t know what the site was for, until they clicked on a few of the apps.

Then I redid the app navigation and description boxes, with some transparency and other effects, for a more sleeker look.

I colored the download buttons and put them on a slightly darker background, so that they really stood out from the rest of the content.

Some screenshots of the app, were added for a touch of color, but also to show off some of its features.

Lastly, I added a footer with a background that tied in with the intro text background, to better balance the design.

Realigned Version

Current Version

Here is my proposed realignment for the website of Mac OS X Instant Messaging App – Adium. If you have any comments or suggestions, please don’t hesitate to leave a comment.

First of all I changed the color scheme to more visually please colors.

Then I dealt with the header. I changed the logo to a more professional font and added the app description next to the logo. Then I spaced out the navigation a bit, for a more sleek look.

I added some rays and a highlight behind the Adium duck, to make him stand out more. And brought him up into the menu a bit, to make the design feel a little more 3D.

Next, I made the download button more prominent.

I then added some screenshots, so the users get feel for the app, right away. Without having to visit the screenshots page.

Lastly, I changed the duck next to the donate button, to a heart. To symbolize, showing some love to the developers, by donating.

Realigned Version

Original Version

And there we have it. Let me know your thoughts. What did you like, what didn’t you like.

v.1

v.2

v.2.5

v.3

v.4

v.5

v.6

v.7 – Current

If your interested in the future of Fonts on the web, you might want to check out Typekit. Currently Typekit is invitation only, but luckily I have 5 invites to give away.

What is Typekit

Typekit allows you to use a large selection of fonts on your website, without messing with font files and browser compatibility issues, via JavaScript and @font-face. Installation is as simple as including a JavaScript file.

If you want to see Typekit in action, Chris Coyier of CSSTricks has nice video here.

How to Enter

To mix things up a little, leave a comment containing your favorite line or episode from the TV show Seinfeld (if your not a fan of the show, just make one up :))

The 5 winners will be chosen on Friday 23rd, Oct.

Update: The winners have been chosen. Thanks to everyone who commented.

On the right is the image we will be using in this example.A simple picture of a lake with wooden platform floating in it.

#1 – Blur & Shadow Effect

With Blur & Shadow, you duplicate the image layer, and then blur the new layer. Then you erase the parts of the blurred image, where you want the users eyes to focus. After that, you add a slight shadow to the edges of the image, so the image doesn’t look so flat.

#2 – Split Color Effect

To create the Split Color effect, you can either select half of the image and desaturate the color, or for a more unique look, you only remove the color on certain parts of the image. You can also add a white to transparent gradient from the center to the edge of the image, and the lower the opacity, to give it even more of a split effect.

#3 – Perspective & Rotation Effect

By playing with the perspective and rotation of the image, you can achieve a unique look.

#4 – Text Effect

You can add text to the image, to reinstate the post title or perhaps add a intriguing by-line.

#5- Border Effect

By adding a black border around the image, and then lowering the opacity. You can create a very simple, but nice border effect. You can see the technique over at Build Internet.

What is Ubiquity you maybe asking yourself, “Ubiquity is a Mozilla Labs experiment into connecting the Web with language in an attempt to find new user interfaces that could make it possible for everyone to do common Web tasks more quickly and easily”.

Take a look at the video below to learn more about Ubiquity. Please note that Ubiquity is still in beta.

As you can see from the video the Ubiquity interface is still a long ways from being complete. There are a few Ubiquity themes out there, but I haven’t found one that did Ubiquity justice, so I decide to mock up what I would like the interface to eventually look like in the final version.

Start Page

YouTube Search

Options List

All feedback is greatly appreciated.