Entries Tagged 'Rants' ↓

In a previous job, I used to be the Lead User Interface Designer for an enterprise level CMS (Content Management System). One of my last tasks, was to update the “New” icon. The new icon creates new records. Sounds pretty easy right? Two months after undertaking that task, the icon was still not updated. Why? The software development industry is relatively young, rapidly evolving, and surprisingly little is automated. It is full of communication issues, organizational issues, customs, values, fashions, and myths. It brings out the best and the worst in people. Personalities determine much of what happens. It is more like making movies than engineering cars.

If I paid myself a salary, I should’ve gotten at least $120 to write this article. - Jeff Knooren

I was told it was impossible to update any icon in the system. The Engineers who coded the interface had created 20 New icons over the years. They all had different file names, height/width attributes, located in different folders, yet they were essentially the same icon. Frustrating, because in software development, design is undervalued. Often no user interface design is done, or it’s considered a formality, before the “real work” of coding. organizational issues then becomes recoding, and recoding, and recoding. This is short-sighted, because you write more code in the long run. The useful debate is about doing something right from the beginning, which saves you 10x the work later on; Capture problems early.

If an engineers objective is to finish a function on time, and a designer’s objective is to make it look pretty, that isn’t teamwork. Each member needs to put trust in the expertise of the others. They should welcome a system that makes their job easier. Specific to this post, I’m talk about graphic sprites. An explanation of it can be found on AListApart. So, how the AListApart article applies to your website, is demonstrated below:

Structure

You need at least two rows, and two columns. I’ve got a 400×400px graphic divided into a 20×20 grid. The top-most row is for actions such as “Add” or “Delete”. The left column is for “Base” icons, like “Document” or “Appointment”.

Actions

An action gives you the ability to mix-n-match icons symbols, like pluses or checkmarks, with a base icon placed below it. For example a “Document” icon, combined with a “+” symbol makes a “New Document” icon.

Base Icons

Are “things” that are acted upon. One problem you will run across with this grid method, is that not every possible combination of icon will make sense. Just ignore the few unusable combinations.

Setup

My icons generally have a strong black border around them. Notice the icons are smaller than the grid. This allows me to get the best possible placement for bases and actions, because sometimes the strong black borders are too thick.

Why do this?

You’ll be able to easily compare the icons to make sure they’re a consistent set of icons, and not a hodge-podge of icons from say, windows and mac operating systems. Using this grid format and naming convention, will allow you to keep all the icons organized in one file, rather than possibly hundreds of icons scattered about your application.

If you had a piece of software to visualize your thoughts, organize them, and put them in context, you will write better. Visualizing the organization of your content is called mindmapping. I use MindManager to create a map of the posts I’m writing. To you reading this blog, it’s all linear by date. But here is what it looks like to me:

As you can see, there is a heirarchy. While I’m traveling the internet, I run across ideas, other posts, and over time, I add them to the map, and the blog posts practically write themselves. This saves you from the feeling of having to face the wall of a blank page. So, what else can do with all this stuff? Well, do you need to plan projects, Brainstorm new ideas for products, develop presentations, manage meetings, create a resume…

So far, I don’t think [iFreelance] is the best use of Bidders or Buyers time. - Jeff Knooren

IMO, one of the best things about this type of sofware, is it allows you too look at the map in different ways. Craft an outline of your thoughts and develop a logical progression of your points. If the flow doesn’t work, rearrange the order of your points. Switch back between linear outline and non-linear map view. Then, you can export/import it to MS Office.

A Bit Of History

I remember just 15yrs ago, if you wanted to make a spreadsheet, like excel, or have a document scanned in, you needed an expert to do it. A person was paid quite a bit of money to write the formulas to calculate a column of numbers. Or, making a newsletter required someone with years of experience in PageMaker. That level of expertise took so much time to acquire; they were considered highly skilled experts.

Computers are still a mystery to most people. In fact, even though I’ve built sites for IFAW and National Geographic, I still take jobs for the most basic tasks, like formatting PowerPoint presentations. I’m not too proud I’ll have you know. But I’ve also noticed that the world of computing has change quite dramatically, and not many people have noticed.

Todays World

Flash forward to today, and creating spreadsheets and HTML newsletters can be done by junior high school students. Creating a ready made site was impossible just five years ago. Look around at how many sites there are, built on blogs. It is obvious that blog software has become the next “killer app” because blogging is so easy, anyone can do it. Blogging changed the world, because in 5 years it created an army of Instant Experts. Now the problem has gone from “How do I create a newsletter” to “What do I fill by blog with”

… they had different file names and attributes, yet they were essentially the same icon. Frustrating. - Jeff Knooren

Creating basic websites is automated, and the fastest I’ve ever done it, was 3 minutes. That’s registering the domain name, to having a dynamic site all configured that the internet could enjoy; 3 minutes. The caveat is: Just because it’s automated, doesn’t make it automatic. It’s there, but totally useless unless you put something in it. Once you start a blog, you better keep it running.

Still, it is quite a challenge to publish something that stands out from the noise of a total of the estimated 3.5 million blogs that are out there. But have you ever stared at a blank page, not knowing what the blogosphere wants to read? The internet rewards interesting blogs with attention. But help is on the way, all it takes is a little planning before you start.

As an addition to yesterdays post about CSS Best Practices; sometimes I wonder if I will ever live to see the day when CSS rounded tabs would be a simple process? I’ve spent damn near 24hrs trying to get it to work. Here is what I mean:

I’m not asking for sharks with freakin’ laserbeams on their heads! I came so close, but as soon as you try to adjust paddings or whatnot for that one pixel difference, it all falls apart. I think anyone who try’s to accomplish “tableless layouts” is a fool! Using tables, and 20 minutes I acheived the desired result:

Not only does it line up perfectly in all browsers, but I could easily make the roundness not extend 100%. The idea on that, is I might want to put text links or icons to the far right side. Another bonus, is there are ready-made table cells available for an Icon sprite which I mentioned a few days ago.

It is very easy to layout a page like this using a simple table. It is just as easy whether the columns have fixed widths or variable widths. Flexible-width approaches like this one tend to be harder without using a table. My conclusion, is that tableless layouts are hype used to sell books. If you have the skills to develop a tableless-layout web site, you also have the skills to develop one with table-layout that is “Strict” compliant, accessible, efficient, flexible, etc. It validates, why not use it, what’s the problem?

I just won a design contest a few weeks ago. Here’s the usual pitch for these contests. Somebody a new logo/site/banner created for their fledgling business, and offers a prize between $50 to a few grand? Some offer nothing but the “glory” of designing the winning entry. The theory is; if enough entries are submitted, one should be a winner. I realized this is a total waste of time.

The problem with this situation, is the winning entry has to guess correctly what you want. Designing anything is about testing and feedback. Instead of paying someone to create a quality product, you just hope someone can read your mind. I’m not going through endless variations, to guess what someone wants. It should be gauged by a far more complicated litmus test including usability, application and market reach. It is the execution of an idea, a concept.

It comes down to: “Make an example for me, and if I like it, I’ll pay for it”. If I had a nickel for every time I’ve heard that adage. My answer is “No”. I’ve got a resume, with tons of print, web, and illustrations. It’s impractical to work for free. All this fancy software and computers to do this wonderful stuff costs many thousands of dollars. Conversely, I never ask clients for “free stuff” because that isn’t professional. If you hire someone to paint your house, you don’t ask them to paint part of your house first, before you hire them.

At the risk of sounding snotty, the “chance” of winning $50 only buys so much time and effort. Sorry, but it’s a dollars and cents equation. Design contests are not a professional way to develop your business. Order design projects by contacting Jeff Knooren at http://www.compugasm.com, or call 1-760-975-1422.