On the other hand, if this sounds interesting to you but you have no idea what isotope is or does, visit the isotope web site.

Let’s cut to the chase. Once you’ve seen the demo examples, you have a head full of ideas and – if you’re like me – the particular idea you’re after is not shown in any of the examples…just bits and pieces here and there, so at least you know it can be done.

Case in point: I wanted an isotope layout (experience), in which I would have, say, nine (9) boxes.

Yes, this is as ugly as can be, but I’m simply trying to get a prototype (proof of concept) going, so hush up! JK!

Here’s what I need to happen:

1. When you click any one of the boxes, it needs to show up as the first box in the 3 x 3 layout.
2. The box also needs to double in size.
3. The remaining boxes get reshuffled (to make room for the first box that’s now twice its previous size) but remain in their original order. The first box will obviously be taken out of the order, but that’s OK.
4. When clicking another box, that one large box that’s now the first box will “shrink back” to its original size, find its place in the original order, and the box you’ve just clicked will double in size and become the first box.

This is what it needs to look like after you click any one of the boxes:

After much Google-ing, going down wrong paths and trying out a number of different settings, I got tipped off by a Metafizzy blog article, in which the author describes how to target the first and the last item of an isotope-based layout. So that inspire me to dabble around a bit more, but I wasn’t quite there yet.

Then I clicked Help on the isotope web site and started clicking some of the links that David DeSandro has assembled. Eventually, I go to the “sort selected first” article/tutorial, and that had pretty much all the necessary ingredients in it.

After copying and pasting the example HTML, CSS and JavaScript, however, things just didn’t work out. Turned out there was a typo in the HTML mark-up (an opening <div> had a closing </p>) and one semi-colon too many had prevented my JavaScript from doing what it was supposed to do. At any rate, after I got out the screwdrivers, suddenly everything worked as advertised, and I was a happy little fellow.

You will need to tweak the isotope and masonry settings to your likings, and if you don’t know what any of that means, please take the time to read through the isotope documentation and examples online.

There’s also quite a bit of CSS editing required, for obvious reasons, to make it fit your needs, but that’s a one-time task if you plan on using the same layout for various purposes. (Obviously, if you want to have several isotope layouts, then you’d have to tweak things separately per project.)

Now I have all the technological stuff figured out and tested, and I’ll spend the rest of my time making everything pretty and adding meaningful content into the layout. Here’s a wireframe prototype of my project:

If you want to recreate something similar, here are the HTML, CSS and JavaScript files that produce the first two screenshots in this article.

Acknowledgments go to :

David DeSandro, of course

Metfafizzy blog

The author(s) of the JSFiddle project that got me 90 percent to what I was after in the first place

Sites using isotope on ZooTools

Web Site Design

Web Site Template – Walk With You
http://www.walkwithyou.me/

ClassiPress – WordPress | Premium Classified Ads Theme
http://wpclassipress.com/demo/

365 Days of Astronomy (unique design approach)
http://365daysofastronomy.org/

AdFlavor (advertising network with a sleek web site)
http://www.adflavor.net/

Blue Sky Resumes (incredibly slick and one-of-a-kind web design)
http://www.blueskyresumes.com/

User Experience & User Interface

Catalyst Resources – Commercial UX Outfit
http://catalystresources.com/

Backgrounds in Web Design: Examples and Best Practices – Smashing Magazine
http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

Freelance Web Designer: Serj Kozlov (you have to see this…beautiful)
http://www.serj.ca/

Prototyping & Wireframes

iPlotz – Web Application
http://iplotz.com/

FlairBuilder – Windows Desktop Application
http://www.flairbuilder.com/

Axure – Mac & Windows Desktop Application
http://www.axure.com/default.aspx

JavaScript & jQuery

jQuery Tools
http://flowplayer.org/tools/index.html

Animated background Image with jQuery
http://www.catswhocode.com/blog/animated-background-image-with-jquery

Animated Landscape Header with jQuery
http://buildinternet.com/live/landscape-header/landscape-header.htm

Spritely – Dynamic Character and Background Animation with jQuery
http://www.spritely.net/

Photoshop & Graphics

600+ Photoshop Gradients to Download – Best Design Options Blog
http://bestdesignoptions.com/?p=2314

71 Gradient Resources for Web Design – Vandelay Design Blog
http://vandelaydesign.com/blog/tools/gradient-resources/

Textures, Wallpapers and Backgrounds – Desktop Nexus Abstract (p. 4)
http://abstract.desktopnexus.com/cat/textures/4

Yes, a) there are slicker ways to do it, and b) there are management tools that can do all of this for you; but if you just need to “fix” the field size quickly in SQL Query Analyzer, then this will do the trick.

It seems so obvious now, but I’m embarrassed to say that it took me a good day to catch on to that. The situation in a nutshell: I built this Flex application, using a custom skin. When I added a popup window for options and settings, the text was all white and the button fonts were “normal” instead of bold. Naturally, I thought I had done something wrong. Some kind of transparency setting? A unique attribute of the TitleWindow container?

After Google-ing all around the world, I tried again and realized that my main application window (dark background with white text) had the same characteristics. Aha! Once I figured that out, the world was all right again.

So in the end, myopia was to blame. Because I had been working with the application for a couple of weeks, I took a few things for granted, and that reminded me of similar experiences with database and web applications. You work on custom solutions, and after a while everything seems normal as it is. I’m sure most programmers have experienced this, and I would never claim to be the only one who’s walked straight into that trap.

Related terms: Flex, PopUpManager, TitleWindow, white text, button font not bold, normal, text not bold, text is not black, custom skin

Sometimes, I work for hours on end into the night, trying to get an assignment or side-project finished. And I start thinking about all the other people I know…who are NOT working at this hour. They’re doing something fun or, better yet, they might be sound asleep. Then I start thinking about all the sleep I will miss out on, how I have to get up early the next day no matter what.

And pretty soon, you start going crazy. Too many things to do. Hardly a day of rest in this economy, and the money goes towards paying bills anyway. So what’s the point?

Of course, this kind of thinking should be prohibited as it gets you nowhere fast. As a matter of fact, that’s exactly how you will and can self-induce depression and anxiety. Especially if the majority of your social interaction takes place between you and the computer.

The best thing for me to do in situations like this — no, going to the beach for an afternoon is unfortunately not an option for me — is to listen to “specific music.” This might ring true with some of you who are in similar situations. However, the “specific music” I listen to has to do the following:

• Don’t involve my mind into anything that requires thinking about it. I already have to focus on my work, so it has to be background music. If it’s familiar, even better.
• No lyrics. But this rule may be broken any time. If there are lyrics, it has to be something “abstract” and familiar. For me, that would be the (mostly) British progressive-rock band YES, especially the “Highlights – The Very Best Of Yes” album. Nothing that makes me go, “What did they just sing?” Just some lyrics that I’ve heard over and over already.
• Repetitious motives work extremely well. Whether you prefer progressive rock, jazz, math rock, trance, classical or psychedelic, I have found that anything with repetitious musical themes works really well to calm down my subconscious thinking. Somehow, it helps my mind know what to expect. Unlike the work that I do — in which a project can be cancelled anytime or the requirements might change and the 4–hour GUI design I finished after midnight might end up in the trash — a repetitive melody or riff structure will involve that part of my brain and lead it elsewhere.
• Volume is important, too. Obviously, if you work by yourself, that might not always seem like an issue to you. However, in my case (and you may be totally different), too much music that’s too loud will actually result in a headache. On the other hand, if I can barely hear it and have to strain my auditory senses, I end up concentrating on that — instead of my work. So find what works best for you, and feel free to invest in a pair of comfortable headphones.

So, having said all that, you’re probably wondering, “What should I listen to?” There’s no right answer, of course, that would work for everybody. Each one of us has different tastes in music, and there might be some overlap, but hardly ever do we agree on much.

Without hoping that anyone out there would agree with my musical choices (but they work for me), I’m going to list a few of my favorites. At any rate, I would love to hear from you. Tell me what works and, if you could, explain to me why you think it keeps you sane, makes you more productive, etc.

Yes – “Highlights – The Very Best Of Yes”

Carbon Based Lifeforms – anything, but in particular the albums “Hydroponic Gardens” and “World Of Sleepers”

Ulrich Schnauss – everything, but if you want specifics, how about the albums “Far Away Trains Passing By” and “A Strangely Isolated Place”

Peter White – most everything, specifically “Glow,” “Caravan Of Dreams” and “Reflections”

BrainSync (Kelly Howell) – just about any of their subliminal albums with a topic of interest (since I don’t smoke, the smoke cessation program wouldn’t do much for me and Deep Sleep just doesn’t seem appropriate for some reason)

Tags: music for programming, music to program by, music for developers,

More specifically, it depends on the web browser. According to Eric Puidokas, who did some z-index testing in a number of web browsers, “The results show IE, Firefox and Opera all use a 32-bit signed integer to store the value of z-index.”

From Eric Puidokas’ web site.

Great job! I’m certainly hoping that I will never need any z-index attributes to go that high, but it’s always good to know about the potential possibilities.

Not that there is anything wrong with scrolling through 44 jQuery tab examples, but — to be honest — it all becomes a bit of a blur, very quickly. To me, the real nuggets of useful information come in the form of shorter blog articles, usually focusing on one issue at a time, offering perhaps a handful of links to related resources.

So without any further ado, here are some online destinations that I have recently encountered and enjoyed because of a) the down-to-earth information they have to offer and/or b) the fact that they are rocking-and-rolling pretty much on their own:

Dew Lilly (Anne) – Freelance Web & Graphic Designer / Flagstaff, Arizona

http://www.website-and-graphic-design.com/blog/

Laura Spencer – Freelance Writer / North West Texas

http://freelancefolder.com/how-to-be-genuine-and-nice-in-a-web-20-world-and-why-its-important/

http://www.writingthoughts.com/

The Get Smart Blog (Bridget Ayers) / San Diego, California

http://www.thegetsmartblog.com/

PS: I just realized that all of those blogs are primarily written by women. Hmmm, not sure why that is, but just in case you were wondering, I do read tons of other blogs about web design, web development, Flex technology, database programming, CSS techniques and graphic design that are written by men. The ones I’ve listed here are just the most interesting that I’ve read in a while, as of right now.

If you like the general theme, the color scheme and the overall graphic design, there is an icon in there for just about everything. The author of these icons states that he was particularly inspired by three other icon sets:

1. Drunkey Love
2. Silk Icons
3. Fugure Icons

From the 512 Pixel LED Icon Set web page:

Some may ask: “How is our icon set different?” Drunkey’s, James’ and Kamiyamane’s icons have a total number of 3044, ours – exactly 500, but all original (only the most frequently requested variants are included). Led Icons set is not yet complete – if any important icons are missing, let us know – we’ll include.

Free Download at http://led24.de/iconset/

You know the scenario, right? The development team (which, in a typical small business scenario does not include any user interaction designers) works like crazy on a web application for about a year. They implement cutting-edge functionality, over-the-top back-end contraption . . . and all kinds of “interesting” ways to use the same button for three different purposes, dependent upon the step in the workflow process, the same button will do three different things. Cool, eh?

Companies that focus on usability, human factors and graphical user interface design

Good web application GUI examples

Around that time, they show the web application to the boss, who in turn wants the Customer Support department to see it, too. Oh, and then Sales & Marketing join in as well. That’s usually about the time they realize that the end user documentation is missing.

If you’ve ever been in a situation like that, you probably know what’s coming. As soon as real people see the web application, they are going to have questions. By golly, you know, even though everything was supposed to be intuitive and straightforward, the people over 30 just don’t seem to get it. They can’t figure out that right-clicking that one icon (looks like a tin can but means ARCHIVE) is what you’re supposed to do on that one web apge. And so forth and so on.

After that, one very embarrassed development manager has a meeting with the boss. In a very diplomatic manner, the boss tells the development manager that “the end user experience needs to be finetuned a little bit.” The development manager then starts looking around for someone (anyone, really) who can define usability and hopes to have all the problems solved by the time he finds such a person. Perhaps even post an ominous message to that effect on craigslist, eh?

Back in the real world, the web application completion date gets delayed. Developers and their managers begin to stress out. Graphic designers get hired to fix something that nobody can explain in actual words; usually, somebody will just point at the web application and say something along the lines of, “We need this to work better.”

Inevitably, the budget for the project needs an increase, because now things need to get fixed and revised and re-tested. If everything goes well, somebody comes in and advises the team on usability, end user eye movement, GUI standards and a variety of issues involving white space, targetability of graphical user interface elements that need to be clicked, consistent fonts and a global color scheme.

However, the likelihood that the average small business in the United States ends up hiring someone like HFI, EffectiveUI or Cynergy Systems seems very small — due to the seemingly high cost associated with such companies. (This is by no means a scientific assessment, but based on the number of HR related web applications I have seen, tested and experienced, this conclusion seems very reasonable.)

Most lilkely, somebody in the organization knows someone who has done something like this before — or worse, they know someone who knows someone else. As a result, a lot of usability and graphical user interface work goes to people who don’t necessarily do such work on a regular basis. Quite frequently, this kind of work goes to ad agencies and creative design outfits who know all about dazzle but very little about the particular workflow of the web application.

In the end, usability and graphical user interface work gets a bad rap. Developers tend to get even more frustrated, because the decision to make all buttons blue (instead of gray) does not seem to solve the actual problems the boss wanted to have fixed. Even worse, some smooth-talking creative designers find a way of justifying almost everything with the right spin on it, and when the boss buys into a series of such arguments, the development team feels as though all hope is lost.

So much for the typical bad-case scenario. Now let’s take a look at the flip side of that coin.

If you end up hiring someone who knows what their doing and/or has done similar work before, chances are, the developers will have to re-program some of their work, but the reasons for doing so will actually be the solutions to the overarching problems.

For example, the boss, the manager and even the developers might agree that the order process is cumbersome and confusing. So they look ath the one web page on which all of this takes place. They have some very precise questions for the usability and GUI expert, and they want to know whether the buttons should be in a different color, and would it make more sense to have the drop-down on the left side or on the right?

OK, that’s good. People are thinking about stuff. Unfortunately, in some cases it makes absolutely no sense to focus on such a small aspect of the entire web application. Chances are — and this is not meant to be offensive rather eye-opening — if we’re worried about this sort of thing, we’ve overlooked something else entirely.

Don’t get me wrong. I’m not writing this with an “ I KNOW IT ALL AND YOU KNOW NOTHING” attitude. For many years, I used to struggle with myopia in the sense that isolated web page (or software screen) designs were thrown at me out of context. Only when I stepped back and worked through the way the entire web application (or desktop software program) was supposed to work did I have an AHA moment. Most of the time. Not always.

And, yes, I still struggle through the GUI design and usability process. Things change all the time, and we certainly don’t ever want to take anything for granted. And you never really want to be in charge of your own web application (doing the usability, the GUi design and the programming all by yourself) — that only leads to system-centric design.

In a nutshell, realizing that it takes an outsider to take on those tasks is a critical first step to getting things right (or at least righter). And by outsider, I’m not necessarily talking about someone from a third party. It can absolutely be a staff member, just not the same staff member who has other stakes in the development process (or is the lead developer of the project).

Such findings have been previously documented by others who deal exclusively with software design and usability. If my memory seves me correctly, even well renown usability expert Jakob Nielsen has brought up this particular point on a number of occasions. So have others, but let’s move on.

If we allow an outsider to take a look at the workflow — and what we’re ultimately attempting to allow the end user to accomplish — we will often find that, in an effort to get things done and do those things in an awesome way, we ended up over-developing. I’m not saying we developed too much, but I am suggesting that we typically end up being too clever for our own good.

For example, consider a simple HR process in which the web application needs to evaluate an employee’s performance. In this web application, you get to evaluate a number of performance factors (such as timeliness, accuracy, working with others, etc.). You rate an employee on each individual performance factor, and to get from one factor to another, you click the NEXT button.

Then, when all factors have been evaluated, and there is no more next factor to advance to, you get to mark the perfromance evaluation as “ready to meet in person.” Only now, the clever web application has switched the NEXT button ot a MARK AS READY button. Sure, it might actually be a totally different button (from a developer’s point of view), but as far as the end user can tell, the buttons are in the same place, look the same and only one of them shows up at a time — so why wouldn’t it be the same button?

Now presume the meeting process is over and the performance evaluation can be taken to the next level. Yes, you are right: The developers changed the button again, and now it states COMPLETE. Pretty clever, eh?

The point of this little example is that sometimes, as developers who are knee-deep involved and invested in the development, worrying about deadlines and project milestones, we can easily get too close to the technicalities and the functionality of a web application. All the pressures tend to make us forget that not everybody is as computer-savvy as we are, and somebody else might just not get it (especially if the end user only uses the web application a couple of times per year).

To follow up on the scenario I mentioned above, it was actually much more helpful (to the end users) to break up the factor evaluation part of the performance measurement web applciation into three separate web pages (or screens):

1) evaluation

2) meeting follow-up

3) completion

More work? Yes, if you consider that an existing web page had to be broken apart into three separate web pages. More satisfaction? Yes, even the boss was happy and found such an approach reasonable. Could this have been avoided? Absolutely.

Once again, the point here is not to belittle web application developers who have to call in the GUI Police after the fact. The point is to convince stakeholders to consider usability and graphical user interface design up front.

1. Web application developers, web designers and UI experts need to be involved in the design and development process from the start. (Let’s add a member from the Documentation team as well.)
2. That’s not to say that they should be cross-trained in each others’ areas of expertise; it simply means that they need to run things by each other and work through the planning phases together.
3. As ridiculous as this may sound to some people in 2009, do some user-centered research upfront. Even if your product enters Version 5, you might want to do a reality check and find out whether the old, etsablished workflow still applies or not. If possible, invite a few local clients to meet with you and talk about the ways in which their people use the web application. Call it a focus group and get the boss to pay for drinks and donuts.
4. Even more ridiculous, come up with paper prototypes, demonstrating the workflow and the key elements for each step of the way. Draw these by hand until you’ve run them by a few people. Use tape to add (removable and/or flippable) dialog boxes. Hang them up on a wall or a white board, and walk through each step with the product developer or a subject matter expert. Meet in groups or with one individual at a time — as long as you find out what works, what is expected and what might be unacceptable.
5. Don’t ever be afraid to ask questions and try out new things. If you’re not sure about something, ask now. If you’re going to commit a blunder, do it now during the planning and prototyping phase. It will be cheap and easy to rectify. (Committing those blunders during beta testing is going to cost money and cause a lot of stress, but that’s still better than fixing and revising things after the official product release.)

While most of my observations and explanations may come across as common sense to most of you, dear readers, I am hopeful that there is a hidden nugget in all of this for one or two of you.

Perhaps I might be forgiven for being somewhat opinionated about how to be n effective usability & GUI expert by listing a few additional ideas about being (or becoming) a usability & GUI person in general.

• Pay attention to the way software works — or deosn’t. If something works well for you (for example, Microsoft Word 2003), try and figure out why it works. If something annoys you (for example, Microsoft Word 2007), on the other hand, try and figure out what it is that makes it hard to get things done. Most of all, nurture ideas about what you could do to improve the software.
• Read, read and read. Get your hands on books by software design evangelists, usability experts, human factors experts and others who are engaged in making software and web appications work for the rest of the world. A few names that come to mind are JoAnne Hackos, Robert M. Gagne, Jakob Nielsen, Alan Cooper, Kathy Baxter, Donald A. Norman, Deborah J. Mayhew, Patrick W. Jordan, etc.
• If you don’t have easy access to any of their books, look up their web sites, search for podcasts, find their videos on YouTube or just simply go to town on Google.
• Find a mentor. If any usability or GUI authorities hold workshops, seminars or give keynote addresses near you, attend. It’s also a good idea to put your ear to the ground and find out who’s considered an expert in those fields in your geographical area. Perhaps you could meet up with one of them for occasional chats or visits. Perhaps they would allow you to call them (or send them e-mail messages) once a month to find out what’s new in the field?
• Volunteer to be involved in product reviews at work. Or jump at every opportunity to conduct usability testing (with actual end users) or participate in reviews. You may not always have a lot to bring to the table (especially if there already is a designated usability expert), but you will certainly learn something new every time you engage.
• Take screenshots of good examples. Start your own collection on flickr or photobucket. Give credit where credit is due, and cite the sources (you will be glad you did when you finally find a good use for one of the design approaches you saw several months ago).
• Participate in GUI and usability discussion on message boards, join relevant groups on LinkedIn and on Facebook. Listen to others. Follow the links of those people who seem to have the best comments. Ask for follow-up clarifications if somebody mentions something you’ve never heard of.
• If at all possible, get yoru hands wet on a few freelance projects (if you are a full-time employee somewhere else). Don’t worry about the money (yet). Try and find someone locally, so that you can meet with them in person to discuss their GUI & usability needs.
• Unless you know how to use Photoshop (or something just like it), find a graphic designer with whom you could collaborate. Ten out of nine times [sic] it is important to show your clients what you mean by mocking up a few examples.
• Most of all, don’t have an IT’S MY WAY OR THE HIGHWAY attitude. Almost every situation involving GUI design & usability advice requires some sort of compromise. Perhaps it’s impractical to re-program the entire web application, and you need to make do with what you have. You’re going to have to negotiate with project managers, developers and CEOs. Be tactful. Make your point, support it with evidence from current studies and tests, and then present two or three solutions in such a manner that your clients can gracefully decline Option A but still feel in control when accepting Option B or C.

Companies that focus on usability, human factors and graphical user interface design

Links to various companies that promote usability, human factors, graphical user interface design and such in a good way:

Human Factors International

Jakob Nielsen’s Web Site

Nielsen Norman Group

EffectiveUI

TandemSEVEN

UX Roast

Cynergy Systems, Inc.

Web application with good GUI implementations, resources, etc.

Examples of web sites and web applications that have implemented best practices in terms of usability, human factors, graphical user interface design and such.

WebAppers

User Interface Resource Center

Envato

Yahoo Design Pattern Library for GUI Developers

AudioJungle

Good.is

Digitalmash 

CollabFinder

Postbox 

RedBrick Health 

GUI Design & Prototyping Tools