MSN.com, Microsoft's search, news and services portal page, hasn't weathered the years well. Tweaking the same basic design for a decade left it far behind the times in terms of design and usability. With today's clean, whitespace-friendly, reimagining of MSN.com, Microsoft ditches the spectre of MSN search and delivers a site that's a little more worthy of showcasing the company's new search hotness, Bing.

A prettier, less cluttered layout and a prominent Bing search bar aren't the only upgrades to the homepage. In a touch that says Microsoft actually knows what year it is after all, you can add your Facebook newsfeed and your Twitter stream to an area on the right side of the page. The news is still there, but it's more customizable, and the layout presents fewer stories at a time than the cluttered old MSN.com did. There's also a local focus, with local weather and a Bing-powered local news widget at the bottom left.

I have to say that, compared to the MSN of old, this new design looks attractive and functional. Speaking of comparisons, though, have a look at our gallery of MSN.com designs since 2001. Looking at how slowly the site changed over the years only underlines how much it just changed overnight.

Finding a web designer is a terrifying proposition for many people. How do you find someone qualified? It's not like there's a directory out there that lets you quickly browse and compare examples of work from various web designers to narrow down your set of choices quickly, and can help you get in touch with the one you choose.

Well, actually, now there is. And if that sounds like a good idea, consider that last week 37signals released a new site called Haystack. 37signals is a well-known web development company that is responsible for the incredibly popular online project management software Basecamp, as well as a few other web properties you might know: Campfire, Basecamp, and Highrise, to name a few.

The thing is, 37signals wasn't always an online service provider; at one time they were a web design firm creating client sites, so they know the difficulty web designers go through to attract clients. 37signals also takes pains to understand the difficulties users face, and have applied that approach to building a directory to help clients easily find web designers (and web designers easily find clients).

Early reports seem to be positive, with designers reporting they are signing new clients in short order. So if you're looking to advertise your design abilities, or if you're looking for a designer, give Haystack a look.

Minimalist Gmail is a Firefox plugin that gives you control over whether to hide or show each part of the Gmail interface. You can take out individual buttons and menus and, yes, even ads. There are Greasemonkey scripts that do similar things, but not every Firefox user has delved into userscripting, so this simple add-on makes a nice alternative.

One of the nicest things about Minimalist Gmail is the way it handles chat. You can hide the chatbox, but as long as you're signed into chat, you'll still see new messages if they come in. If you're using other Gmail skins, Minimalist Gmail might be compatible with those, too. It works with my favorite clean Gmail look, Helvetimail.

[via Lifehacker]

Before there was anything today's Internet users would think of as "web design," there was GeoCities. The homepage service that let absolutely anyone try his or her hand at putting something on the Internet is also one of the cradles of contemporary Web Fugly. In fact, Fugly Friday owes such a debt to the GeoCities aesthetic that this week's installment is going to take a trip down memory lane to look at some early innovations in tearing a human being's eye out using pure HTML.

Today's fugly site, HTML Advanced Tricks & Tips, is a cookbook for everything that make GeoCities sites painful to look at. Tables! Frames! Scrolling marquee text! I will grant you that some people continue to defend tables to this day, but I don't think anyone is defending those animated flame GIFs. Good luck navigating this page by clicking on the text: it's not linked. You're not going anywhere unless you click on those dancing flames. Maybe that's a secret you learn from the "HTML Writer's Guild" once they give you a cool badge like the one on this homepage.

As for the tips themselves? Closing your tags is still decent advice, and cropping and shrinking your graphics was a necessity back in the low-bandwidth heyday of GeoCities. These tips were actually not terrible at the time, but the author has to mess it up by slapping on animated GIFs and encouraging the use of the marquee tag. Between those two, we've covered most of what made every GeoCities page so terrible. Add an autoplaying midi and you'd have a Fugly Tutorial Trifecta.

(This post was made possible by Reocities, a GeoCities rescue attempt that backed up 600,000 pages of potential fugly before Yahoo! shut off GeoCities' animated flashing lights for good.)

If you're in need of a quick pdf form creator and don't want to dig in your wallet too deep, PDFAmigo might be a good option for you. Running from your browser, PDFAmigo allows you to create enhanced fillable pdf forms utilizing color, different fonts, text fields, radio buttons, etc.

You don't have to sign in to get started, however you will need to if you want to save your work or upload images. If you don't mind the huge watermark across your file, the pdf you create is free. Naturally, that might be a problem, so you can buy the file for $1.00 using Paypal and the watermark will be erased. This fee does not include future changes to the form, so each change you make to the form would be an additional $1. Also, the first page is $1, and additional pages are 50 cents. (If you like to tweak your output this might get a bit expensive). Just sayin.

Another option that is completely free is PDFescape. It also runs in your browser and you can create fillable pdf forms, albeit with less font options and features. Any other faves? Let us know!

A key part of interface design is an exercise known as "wireframing." In this design phase, elements of an interface are blocked out roughly to show relative placement, interaction, and functionality. It is a rapid way to talk through functional requirements of a project and get buy-in from stakeholders without having to waste a lot of time on visual design that won't remain in a finished product.

Mockflow is a flash-based, online, collaborative wireframing tool for Web and Software designers. It contains a fairly complete set of wireframe elements and icons for use in your wireframe with flexible customizability of all the elements. The killer app of the tool is it's ability to collaborate in real-time with other team members online. Very, very useful for distributed teams.

I tend to use Adobe Fireworks for all my wireframing (and everything else) but a coworker pointed me toward this tool and it captured my attention. I find flash-based tools distasteful, they always feel slow to me, but this one was simple enough, with enough features to make it compelling to use. Definitely the right tool for the right situation.

The basic version is free, but ad supported and you are limited to two collaborators. Upgrading (introductory price of $49 / year) grants you unlimited collaborators and projects, is ad-free, and gives you 500 MB of storage. Definitely worth a look for distributed Web teams.

The flash-based tool will render a page in recent versions of the most used browsers, and will let you view an image of the rendered page one at a time, side by side (2-up view) or my personal favorite, onion skin view, which stacks two images from two different browsers on top of each other and gives you a slider to adjust translucency back and forth so you can see just how horribly Internet Explorer renders your page elements relative to every other modern browser.

The service is currently free and I expect that I will be using it quite heavily.

At the time of writing, the supported browsers are:

• Firefox 2.0 - Windows XP - version 2.0.0.18
• Firefox 3.0 - Windows XP - version 3.0.4
• Internet Explorer 6.0 - Windows XP - version 6.0.3790.3959
• Internet Explorer 7.0 - Windows XP - version 7.0.5730
• Internet Explorer 8.0 - Windows XP - version 8.0.6001.18702
• Safari 3.0 - OS X - version 3.2.3
• Safari 4.0 - OS X - version 4.0.3
• Firefox 2.0 - OS X - version 2.0.0.18
• Firefox 3.0 - OS X - version 3.0.4

The Printliminator is a bookmarklet that gets any webpage ready to print. Once it's activated, you can click on elements you don't want to print to remove them from the page. If you don't want to do it manually, you can remove all images on the page using one button. Another button applies a nice default print stylesheet.

Sometimes there's only one element of a page that's worth printing, and The Printliminator has you covered there, too. Instead of clicking to delete one thing at a time, you can option-click to delete everything but what you're clicking on. If you make a mistake and delete something you wanted to print, there's no undo. Just reload the page and start over.

I'll describe PhotoSketch, but you really have to watch the demo video to believe it. If you make a living putting together composite images in Photoshop, you may want to stop reading right now, and start looking for a new line of work. Photosketch takes rough, even stick-figure-like drawings you do in Photoshop, finds real images to match, and puts together a montage that looks a lot like what you were imagining when you drew those sticks. You do need to add some text labels to the elements of your picture to help with search, but PhotoSketch does the rest. And, surprisingly, it looks pretty darn good.

You might expect something as advanced as PhotoSketch to come from a huge company like Google, but it was actually developed by a group of 5 computer science students in China. Their bandwidth isn't enough to stand up to all the hype, though, so PhotoSketch is down right now. The very impressive demo video shows a bit of how it works, though.

PhotoSketch uses a combination of your text labels and the rough shape of what you drew to find appropriate elements for your image. The results, at least the ones in the video, are incredible. The video also reveals that PhotoSketch isn't perfect - you don't want a baseball player for your Frisbee throwing scene, for example - but it generates several decent options for you to choose from, so one of them should be what you're looking for.

[via Mashable]

There's an incredibly short post up at Typophile by Miha showing how much better YouTube's favicon could be if Google applied a sub-pixel rendering technique. Sub-pixel rendering is the approach that Microsoft uses in its ClearType font-smoothing technology, though there are many others using the technique. The concept of sub-pixel rendering is that you can fool the eye into seeing smoother curves and cleaner lines than are actually possible due to the pixel density of a screen by using very specific colors. Miha's example shows that to make clear-looking white inside the read YouTube logo, you actually use yellows and purples rather than the white that is currently used.

While there's no doubt that sub-pixel rendering is valuable for rendering text on computer screens, is it really necessary to have specialized talents in this area to make favicons more readable? There's no doubt that Miha's revised version of the YouTube favicon is more clear and easier to read; what do you think? If you could apply it easily, would you revise your site's favicon using sub-pixel rendering?

[via Google Blogoscoped]

Hot on the heels of stylish Mac OS X image editor Pixelmator hitting version 1.5, Acorn - the simple (yet powerful) image editor from Flying Meat software has reached version 2.0.

This all-new release is one of the first applications we've seen to require Mac OS X Snow Leopard, and comes a tonne of new features including: layer-based screenshot capture; RAW image support; layer groups; perspective transform; Dodge Burn, Clone, and Smudge tools; and much more.

Those looking to script Acorn can now also script the application via Javascript (using JSTalk) - and the trial of Acorn no-longer expires. Instead of locking itself down after the trial period ends, Acorn simply limits certain features until you purchase a copy - a nice change from
If you're an existing customers with a Acorn 1.0 licence you can upgrade for $20, and a new licence costs just $49.95.

Twitter is a lot of things to a lot of people, but "pretty" isn't really the first one that comes to mind. It doesn't have to be that way, though, because you can give Twitter a clean, minimal new look with Helvetwitter. It's a script that lets you view the Twitter website in black and red, with all the type in Helvetica, and plenty of white space for all the words to breathe. This may sound somewhat familiar, because it's inspired by the' Helvetireader script for Google Reader, which made my list of the 10 best Greasemonkey scripts.

Helvetwitter isn't perfect for everyone. One if its big pluses is that it doesn't use the entire area of your browser window, so you can shrink Twitter down and drag it off to the side of your screen. On the other hand, the lack of icons can make it harder to pick out whose tweets you're reading at a glance. The lack of sidebar is both a plus and a minus: I personally don't miss it, but you might if you actually care about trending topics. You can install Helvetwitter in Greasemonkey if you use Firefox, and the site offers instructions on how to set it up on other browsers.

I have to admit, I'm pretty envious of kids today, because they get to play with fun stuff like Storybird. Storybird is a place for kids and parents to read and create storybooks. It's completely kid-friendly and features a gallery of great artwork that you can use to get started. Just because Storybird is targeted at children doesn't mean it's dumbed-down, though. A lot of adults I know couldn't lay out a storybook in Pagemaker, but they'd have no problem creating something nice with this.

Of course, kids can make their own Storybirds, but they can also read selections from the site's public collection. They're not all great, but the characters in the art gallery are cool enough to hold some interest (I know I would have loved the monsters, in particular, as a kid). Storybird is also looking at offering a print publishing platform, so you can use it to make real books, too. What kid wouldn't want a professionally printed version of his own book?