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.

Hot Gloo is an online wireframing tool designed with information architects in mind. The heart of the app is a palette of the main site elements IAs use in wireframes every day. The elements can be easily positioned and resized by dragged, making Hot Gloo a cinch to use. Throw in the ability to share your designs with clients via the web, and this app could the wireframer's new best friend.

You can add multiple users for collaboration, too, either as editors or reviewers. The ability to add comments to any part of your work helps you explain things to clients effectively. The full featureset will be active During Hot Gloo's fee beta period, with one exception: you only get 3 projects and 5 people. This should be enough to get a feel for the app before it's completely finished, but the sharing limit means Hot Gloo is not the kind of beta product you can immediately start using professionally.

Not long ago a DeviantArt user put together a Firefox 3/3.5 theme based on Mozilla's concept for Firefox 3.7. Want to go the extra .3 and jump ahead to version 4? Take a look at Strata40.

By using the them in conjunction with a few Firefox addons - All Glass, Personal Menu, Fission, Omnibar, and Stylish - and following some lengthy but simple instructions you'll have yet another slick, futuristic look for your browser. The complete rundown is available on SpewBoy's DevArt page. I didn't adhere strictly to the 4.0 look (I added bookmarks and downloads buttons), but you're free to tweak the layout to your liking.

As before, don't forget to change the FF window title text using Titlebar Tweak or Nightly Tester Tools to make the illusion even more believable. You'll need NTT anyway to get the theme working on Firefox 3.6, so you may as well have some fun with it.

[via Tweaking with Vishal]

If you've got an eye for design, but lack the proficiency in HTML and CSS to convert your ideas into functional websites, Divine might be for you. It's currently in the beta stage, but it aims to transform Photoshop documents into working Wordpress layouts. There's no coding involved, just selecting the appropriate sections of your PSD layout and assigning them the appropriate parts of the layout.

There are professional services that charge substantial rates to do similar conversions by hand, so a free, automated solution - even a flaky one - would be a big money-saver for non-coding designers who want to play with Wordpress. Divine doesn't seem flaky, though. It claims to produce results that are both SEO-optimized and standards compliant. It's also blessedly free of tables. Certainly, there's no substitute for doing it yourself, but Divine seems to be a reasonable (and free!) way to get started.

ColorSuckr uses photos to generate color palettes you can use in your artwork and designs. You can choose from one of the photos on the main page, search Flickr, or input the URL of any webpage to find source material. ColorSuckr automatically finds the main photo on any Flickr page you enter.

There's also a bookmarklet that you can add to your browser's toolbar. Clicking it gives you a choice of any image on the current page. Once you've got an image, ColorSuckr will give you a draggable selection of colors, complete with hex, web safe and RGB info so you can get them exactly right in your designs. It's a unique way to get a good palette, and especially comes in handy if you're working on a layout that has to match a photo.

Web 2.0 style is its own special brand of Fugly. Hundreds of sites capitalize on the volcanically-hot design trends that signal a Web 2.0 property, but botch the job and end up looking like they were made with cookie cutters in 2007. But now, botching the job can be even easier, with Tiny Designer! You can create your own hideous Web 2.0 elements in seconds, including plenty of gradients, that ubiquitous lime-green color, and (of course) the always-popular "beta" badge.

Can you believe that the entire Tiny Designer site was made using elements from Tiny Designer? I sure can: it's atrocious. From the glossy sticky notes (why?) to the misappropriated Twitterrific bird at the bottom of the site, everything about Tiny Designer does violence to the entire idea of design. If you're not too stunned by the eyeful of horrors that is the Tiny Designer front page, launch the design gallery and see what other abominations this Frankensite hath wrought.

And all of this is to say nothing of the clunky, stilted user experience of actually attempting to make anything in Tiny Designer. The tool's disorderly UI involves a lot of toolbars stacked on top of one another, and, of course, a lot of gloss. If you thought the dismal results people produced with Tiny Designer were somehow due to user incompetence, you'll change your tune once you try to do anything with it. I'm predicting a long weekend of nightmares about the entire web being rebuilt with Tiny Designer.

Nowadays, what with the internet and all, you can pretty much pick up "good" (read: adequate) design for free and all over the place. There are templates for EZ, no-bake websites to beat the band. But Twitter's oddball format doesn't lend itself to much more than a blurb in terms of customization. That doesn't mean people won't maximize that space.

There are also folks butchering the design, but maybe it's not their fault. Twitter isn't really designed to be designed -- the profiles are mere vanity. You're looking at them when you tweet, and relying on people to visit them and give you a 3 second verdict to follow or unfollow (coming to NBC this Fall).

Here's a few interesting specimens we found:

• HotTweeps - Nothing says quality like improper use of Photoshop's magic wand.
• shawnshewchuk - Whoa dude, your logo is like, totally huge.
• DavidLetterman - Even if Dave approved of Twitter, he'd disapprove of the animated GIF in the profile pic. Careful he doesn't sue the Worldwide Pants off of you.
• Now here's YGrab, who AAAAH, my eyes! Who says you can't mix orange and blue? Over and over. No repeating backgrounds, ever!
  
• Here's one of zillions of those "gonna put all my info in the rail" designs. Be selective, people.
• Maybe this isn't a design thing, maybe it's just a thing where we haven't been typing in all caps on the internet for about a decade, but this guy needs to cut it out.
• If it's self-indulgence you wish to see, but you're burnt on celeb tweets, may we suggest Twouchebags? Aside from being a great name for a band or bar, it's a good resource for, well, people whose behaviors might make cause them to be labeled something rhyming with Twouchebags.

Finally there's the leeches and remoras of the Twitter landscape, all those "get a zillion followers and die rich!" sites. Funny this is, most of them don't show their Twitter account names ON their site. Inspired Magazine has a pretty funny roundup of these jokers.

If you've been on Twitter over the past day or so, you may have noticed some big changes to the way the site shows users' lists of followers and followees. Instead of just showing names and icon, these pages now display more detailed information, including location and most recent tweet. All of the actions you have available for each user are collected into a compact drop-down menu, so you can mention, direct message, block, follow or unfollow the user quickly.

Several users have correctly pointed out that the new design makes Twitter look a lot more like an iPhone-optimized site. It's definitely an improvement in many ways, but there's one small quirk I have to take issue with: in the old layout, the appearance of the "direct message" link next to a username gave a quick visual indication of whether that user was following you. You can still figure this out by clicking the drop-down menu, but it's definitely not as efficient as before. On the other hand, the new design does a great job of showing who you're following when you browse another user's list.

Password masking - the practice of replacing the characters a user types into password entry field with bullets - has been widespread on the web for a long time. Jakob Nielsen recently wrote a thought-provoking post suggesting masking is hurting more than it helps, and that it's only being kept around out of habit. I'll try to make the case for and against masking here, and let Download Squad readers weigh in on the subject.

Down With Masking:

Masking ruins the user experience. When users can't see what they're typing, they're likely to make mistakes and second-guess themselves. Did I forget my password, or did I just make a typo? After enough login failures, they'll either stop using your site or call support. As a result, users try to get around the problems of masking by entering a simple, insecure password, or by copying and pasting their passwords in. Why are we continuing a practice that undermines user security and adds uncertainty to the user experience? Masking has got to go.

Masking Forever:

Masking doesn't make users feel insecure, it makes them feel more secure. It was instituted for a reason: to keep someone who might be reading over your shoulder from reading your password. Maybe this has become less of a concern over the years, but masking has picked up some new, equally important uses, too. What if you're screensharing with a coworker or recording a screencast that happens to include your site's login process? Users have come to expect masking. When they run into the rare site that doesn't use it, they get nervous that their password might be sent unencrypted. Part of good design is giving users what they expect, so keep giving them password masking.

So, readers, what do you think? Take the poll, and let me know in the comments if you've got better arguments for or against.

Ah, the dreaded comment phase! You've submitted your design for a new site, and you're waiting for your client to get back to you with ridiculous last minute changes that probably won't even be communicated clearly. There's unfortunately not yet an app to make your client smarter, but Redmark might make the comments easier to understand.

Redmark is a web-based visual markup tool for designs, so you'll know exactly which part of your work each comment refers to. On the client end, it's very easy to use. Dragging or zooming the design never loses the marker your comment is attached to, so it's always clear which element of a design you're talking about. Just hit "new comment" and click on the relevant spot. Redmark even sends an email notification from the design when a new version goes up.

One of the challenges of web design is making sure your site renders properly in the most popular browsers your visitors use. Sometimes, this means installing an extra browser or two (or ten) on your system, to preview your page in each one. It might even mean running multiple operating systems. Well, Adobe BrowserLab aims to fix all that by generating previews of a page as it would look in several different browsers, across multiple operating systems.

You can view the previews side-by-side to get a direct comparison between Firefox 2 and 3 for Mac or Windows XP, IE 6 and 7 for Windows XP, and Safari 3 for Mac. There's also an Onion Skin mode that allows you to overlay one version on another, with adjustable transparency. Sure, there are some perfectly viable browsers that aren't included, but the most popular players are all there. It will be interesting to see if Adobe expands BrowserLab to reflect the increasing adoption of mobile browsers.

The free preview of BrowserLab is available now, but it's limited and there aren't always slots available. You'll find a "check status" link on the download site to let know whether you can get in.

Typography on the web has always been a delicate topic, and the source of a lot of tension between web designers, type designers, and standards gurus. Websites should have quality type choices available for all of their readers, but type designers deserve to be compensated for their hard work. The appropriate standard and the appropriate license have been debated for years. Typekit, launching this summer, is one possible resolution to the situation.

Billing itself as "the easiest way to use real fonts on your website," Typekit is a cross-browser platform that will offer a consistent license for fonts, without DRM. A group of type foundries is already supposed to be on board, although it's not yet clear which ones they are. For web designers, using Typekit will apparently be as easy as adding a little bit of Javascript to the site. It will be interesting to see whether it catches on, or whether it's too good to be true.

One of the best things about Tumblr as a blog platform is how easy it is to try out new themes on your Tumblog. There's a wide selection of built-in themes, some of which are excellent, and many more that you can find elsewhere on the web and plug in with a quick copy-and-paste. Just go to http://www.tumblr.com/customize, turn on custom HTML, and plug in the code for your chosen theme, which you can usually find at the designer's page. Here are ten of my favorites to get you started:

There are a lot of different interfaces for creating and using color palettes, but ColoRotate may be the one with the coolest visuals. It plots your colors on a 3D diamond as you blend, tint and change hues to form a palette. More experienced designers may not find it useful, and may prefer something more straightforward. Beginners, on the other hand, might dig how easily you can make a decent palette with this tool.

There's also an entire "learn about color" section of the site, giving a good overview of the theory and science behind color and color combinations. Adobe CS4 users will be interested to know that a ColoRotate plugin is coming in the fall, and it will allow you to use ColoRotate as your color picker in Creative Suite apps. It will also sync with your saved palettes on the ColoRotate site, but that's slated to cost you $2.50/month.