Design Nerd

Many ugly websites make tons of money, it is a fact, and it is something that graphic designers just have to deal with. I admit it was hard for me at first. I couldn’t believe that sites with blinking lights and red shiny buttons and whatever else were making millions and millions of dollars.

It’s true, and it was a hard lesson for me as a designer.

I did get to thinking, though, about what was making these sites sell. I have mentioned in the past that this subject interests me, and it still does. I have a bit more experience with “ugly” sales design since I last posted about it. I have created quite a few sales websites since then, and what I have found goes a bit beyond “ugly”.

The real key is that stuff is NOTICEABLE.

Ugly is good at being noticable. Usually, when a website is designed without much, shall we say, expertise from a graphic designer, things tend to happen that would otherwise never happen. I am referring to stuff like 5 different colors, all intermixed in the same space, or perhaps a button that is badly optimized and dithered, with a drop shadow bigger than the button itself.

Yeah, all that stuff is pretty putrid, but it also has a benefit. The website users see it. Most of the time, on a sales site, everything that is ugly is stuff that the seller wants the user to click on. Since it is so noticable, they DO click, and sales happen.

Many people don’t judge whether or not they are going to buy a product based on how nice the site looks. Usually, the dealbreaker is how fast the person can find what they are looking for on the page. If they have a choice between a nicely colored, integrated with the overall design button that is a bit hard to see, and a big red flashing button that they noticed before anything else, chances are they are going to click on the big red button.

“But I’m a designer! Good design sells and I know it!”

Yes, good design can sell, but only if you understand WHY the ugly sites sell as much as they do. How can you provide supreme contrast on the clickable elements on your site without making them ugly? This is the challenge of the professional designer in the world of internet sales. It is always easier to make a site where all of the elements are in balanced harmony with one another, but that is contrary to sales, and that is why there are still commercials and ads out there with flying starbursts and spinning text.

You CAN make good looking sales sites, but it’s hard, and it takes a dedication to understanding what makes people click. I also takes dedication to be willing to try lots of different things, even things you hate. Remember, the main goal is to make money for your client, but you can (with effort) make designs that you are happy with too.

That’s right, I have returned. After a long dry spell of posts, I have decided to update and revamp this blog. I have been very busy as the sole designer of a growing affiliate network, and over the next few weeks I will be redesigning this blog and adding a plethora of articles.

I have learned a great deal during my tenure as a designer for affiliate-related webpages, as well as being an in-house designer for a company, rather than a designer at a web shop. This blog will be used to present what I have learned about design in the competitive arena of affiliate marketing, as well as continuing to present design history and theory as I research it.

For the last couple of years I have used Firefox to browse the web simply because I liked the interface. Steadily, I have come to hate it, however, due mostly to the memory leakage that causes it to be very slow and occasionally crash. Furthermore, I have begun to scorn Firefox because of it’s laziness toward web standards.

About three weeks ago I switched to Opera for my full-time browsing. The only time I use Firefox now is for Firebug.

What I have discovered in these three weeks is a myriad of sites that do not work in Opera. Amazingly, these sites often have a script running to detect Opera and inform me that I should get a browser that is compatible with their site.

Some of the offending sites include:

http://www.usbank.com <- this site actually works fine, but still pops up with an annoying window telling me I should choose another browser

http://www.juniper.com <- the site works ok, but their credit card backend does not work at all.

mail.yahoo.com <- the beta version. I have other problems with Yahoo Mail Beta (bloatware…), but that can wait for another time. This site won’t load at all on Opera for Windows, forcing the user to use the old Yahoo mail (which is actually a blessing!), and they failed to create a script for the Mac version of Opera, so the beta mail will start up, but it has many styles that aren’t in the correct place.

http://www.nfl.com -> If you click on this link you have have a look at what I see at the bottom of this site when I load it up in Opera. Here is the Firefox alternative.

http://www.vh1.com -> Most of this site’s homepage is fine, but the footer is somewhat messed up. Opera Version & Firefox Version

Opera exposes incapable web designers for one simple reason: Opera is a browser that forces web designers to do the code correctly. Thus, when I see these professional sites that are for large companies not working correctly in Opera, I know that there are some clueless (or lazy!) web designers out there making bad websites for big companies.

Some may say, “But wait, no one uses Opera anyway!” and while it may be true that the user base of Opera is a very small percentage of the web, it turns out that designing something to work properly in Opera will most likely end with a website that works properly elsewhere (IE is more touchy, obviously). Further, creating a website that is functional in Opera allows the web designer to better understand why things work and do not work, and it prevents crazy hacks and ugly markup.

I test in every browser I can when I am creating websites, but I usually start out testing in Firefox. This isn’t because I think Firefox is the best browser to test in; quite the opposite. I think Firefox doesn’t hold designers to strict enough standards guidelines and allows designers to be sloppy. Firefox is also memory-leaky and pretty slow-running compared to some browsers. It’s not perfect by any means.

So why do I start out my testing in Firefox anyway? It’s because of Firebug.

Firebug is a brilliant Firefox add-on that allows you to view the html, CSS, and scripts of any page on the web, and make changes that will then show up in the browser. This feature is a great way to see what others are doing on the web and to learn a few things, but it isn’t the feature that makes it a super app for me.

The other feature that Firebug possesses is the ability to highlight block level elements in a design and color-code things like margins and padding. There are other web developer addons for Firefox, such as Web Developer, which I also use occasionally, but I have found that it is not as developer-friendly or easy to use as Firebug.

Clicking on the above image will produce a full-size version.

The Firebug interface is located at the bottom of the browser window, but it can also be opened in a new window. I have a line of html highlighted in the screenshot, and the corresponding element is subsequently highlighted above in blue, purple, and yellow. (The highlighted portion is just above the order ID lookup on the right, if you are having trouble distinguishing the highlighting from the design).

The yellow is a margin, the purple is padding, and light blue is the block-level element. Using firebug, it is possible to see things you might not be able to imagine yourself when laying out a page, and whenever something goes wrong in Opera or Safari (the most persnickety browsers about standards and syntax) the answer can usually be found in a misplaced margin or a strangely sized div that can easily be seen in Firebug.

I use this tool all the time, and it has allowed me to create far more hack-free validated sites than I could ever create without it. I have also learned a great deal from using Firebug about the way that browsers interpret CSS.

Bad design ideas happen all the time, but usually they are filtered out or at least used in projects that don’t have a national audience. Not so for Intel, as I discovered from a post in the High Desert Wanderer Blog. This AD by Intel really needs little explanation or introduction. I’ll just post it right here.

This AD can also be viewed at the Snopes.com Rumor site.

Now, even if this AD -does- need an explanation for the commendable few (several black men bowing down to a smug white man), it bears the question: What was this designer thinking? According to Snopes.com, the original intent of the AD was “… to emphasize the ability of Intel’s Core 2 Duo Processors to ‘boost productivity and efficiency by running multiple computing-intensive applications at once’ through the visual imagery of presenting a team of (identical) sprinters down in set positions, ready to take off and blaze their way through the office environment while a pleased IT Manager stands amidst them bearing a look of confidence and satisfaction.”

I suppose I can give this person a little credit. A tiny, tiny TEENY tiny bit of credit. Tiny. I have made a mistake like this in the past, creating something that was construed as sexual by my observers when I had no intention of doing so. All I focused on was what I thought was a good idea, and I was never able to see the broader picture. But still, it wasn’t posted in a magazine or anything like that.

What my experience taught me, and what this AD teaches me, is to always remember the value of the unbiased critique. Show that idea to someone who isn’t invested in it. Show it to someone who is part of the targeted AD base. Even if it is just a small project that hasn’t had much time spent on it, show it to -someone- before it goes to press.

Why? See above.

Edit: I wanted to ad that I realized today that this very AD was also feature on the front page of somethingawful.com. It is worth mentioning and linking to because some of their bad advertising incidents are hilarious.

Click here to go to the SomethingAwful article

As is probably apparent, I have changed my site yet again. I became fed up with the fact that, since I had done the quick setup of wordpress with my web hosting company, I was unable to edit any of my wordpress files, or otherwise make my site unique at all. Basically my web hosting company decided that I would not be allowed to customize my blog at all.

So, I’ve trashed the old site completely only to start fresh. I did a manual install of Wordpress and now I have total control over my themes, CSS, etc. I am much happier with the site now and changes will be continuous for a while as I continue to repopulate my content and tweak the CSS.

If there is one thing I have learned about myself in the few years that I have been in the professional design world, it is this: do not assume that I can’t learn how to do it.

A little arrogant maybe. I’m certain there are some things I will not be able to learn how to do. I’m also certain that there are many things I -can- learn how to do. It has happened before. I am required by my job to do something I’ve never done before, and I must do it quickly. I learn it out of necessity, and thus acquire a new skill with no monetary loss to the company I am working for; rather, that company gains because I have learned something that they can put to use in future projects.

I mention this because I feel that it is important to think about when it comes to running a business. There are projects out there that are perfect for people who want to learn on, and while employers fear the unknown (in this case, the unknown being someone working on the project who doesn’t know what they are doing), if chosen wisely it can lead to a large benefit for the company in the long run. The risk is especially low when there is another employee available who, while too busy to take on the project that the other employee is learning on, may have time to help them when they get stuck.

This isn’t something I would push on an unwilling employee. The person must -want- to learn a new skillset or the time will be wasted and the project will likely be a failure. Employee willingness to work outside of their comfort zone must be gauged carefully. Those who do not wish to expand their horizons will resent being forced to, and those who want to learn and grow will resent being held back.

Originally Posted: July 22, 2007

A series of discussions with my new boss and time spent in my new job have led me to an interesting revelation about graphic design. Though I still firmly believe in my educational background of graphic design theory, it turns out that good design isn’t always what is effective. At the risk of contradicting my last post on this blog, it seems that traditional ideas about good design do not always translate into sales conversion when it comes to selling products on the web.

The company I work for now deals in the marketing of products through online product landing pages. Based on their research within this industry, it seems that the more disorganized and, I daresay, ugly designs seem to sell more products than the well designed professional-looking landing pages.

Why is this? Why do confusing and jumbled designs sell more than organized and clean sites? Are people buying more products from these jumbled sites because they are confused and simply click the download to get the site over with? Are they less compelled to buy a product from a website when they have read about it longer and had more time to think about it? Is there a way to translate these jumbled designs into something that looks good and still converts just as well?

These are all questions I hope to research and eventually answer as I continue in my career in this interesting field. It will take more data, more tests, and more time for me to even begin to understand what is going through the minds of online shoppers.

Originally Posted
July 19, 2007

I have begun to frequent a graphic and web design board known as Designer’s Talk and I recently had a discussion with a newcomer to design who was asking for advice for becoming a better web designer. I posted a somewhat comprehensive design basics guide for this person, and I felt like it would be a good idea to reproduce it here so it doesn’t get lost in the depths of forum archives.

The inquiry (paraphrased) was that this person was asking for interface design help. This person indicated that Photoshop skills were important to him or her, and that they wanted to know why their designs did not measure up to some other designs that this person felt were outstanding.

I will not post details because I do not want to invade this person’s privacy without their permission. However, it should be possible to gain something from the designer guide regardless of visual examples (and I will provide the professional examples that the poster provided)

Professional design examples:

http://www.northcolour.com

http://www.incrediblebox.com

http://www.ndesign-studio.com

http://www.worldspangroup.com

(I would like to point out that I do not necessarily endorse these designs or feel that they are “top quality”, but rather, they are simply examples that another web poster provided to me as what he or she felt was worthy of note. I am providing them here as background for my writing).

Now, on to the design basics guide:

“Obviously skill and expertise with the tools at your disposal (design software, mostly, in this day and age) is one of the key components to good design. However, it’s not the only component, and in my opinion, it is actually the least important.

What you must focus on before even worrying about Photoshop, is learning about basic design theories and concepts of aesthetics. These theories have been created over many generations of graphic designers, and while they are by no means a set in stone rulebook to good design, they can help you because they give you a basic framework to go on (which you can then expand upon). Once you know the rules and are comfortable with them, you can start breaking them with taste.

I’ll provide an example by applying some general rules to your design.

I’ll use some basic design concepts to help you compare and contrast your site to the others you have listed, and try to show you exactly why they are different.

Hierarchy

Everything is too crowded. Isolation of important elements is a useful technique in graphic design because it is aesthetically pleasing and isolated elements (elements with a lot of negative space around them) are -very- noticeable. This concept is part of a larger design concept which involves hierarchy of information.

You can see this process in action on the site http://www.northcolour.com The logo is very isolated from the rest of the site, and since it is on top of the page, it is by far the most important thing present. Furthermore, while all of the content on this page is laid out similarly, everything has breathing room (negative space) around it. The image of the potted plant is very compelling because it sits on display, alone in it’s own special space. Hierarchy of the typography is also present here.

Size is not always a determining factor in hierarchy of information. If everything is big, for example, nothing is more important than anything else. Size can also be a very ugly way to determine hierarchy if it is not used carefully. Very small differences in size can be just as effective as large ones, and they often look much more pleasing.

Small Multiples

This brings me to a concept which was outlined by Edward Tufte in his book Envisioning Information. This concept is paramount to information design (which web design fits very snugly into). Small multiples is the concept of nearly everything being similar/the same, EXCEPT for the important bits that the designer wants you to notice right away. Again on http://www.northcolour.com, this technique is in practice, as all of the information is styled nearly the same, but the headers are larger and a different color, and the boxes are separated from one another by very subtle gradients and lines. This style is very pleasing to the eye, and yet we can still very comfortably view and organize the information in our minds.

Your site is lacking in this quality, as everything is very variable. Most designers will design on a grid to prevent a disorganized and confusing look to their content. The best place to view a grid-layout is in a magazine. Most magazines are laid out on a baseline grid, which gives each page a unique look that is well-organized, but also fits in with the look of the rest of the pages in the book.

Color Management

Finally, you may notice that your website has very little color variation. While the gold you have chosen is not unpleasant, it is the only color present, which causes the design to look boring and static. Color is very difficult to master, because it can be used in very bad taste. It is always best to err on the side of caution with color, and your design is a better alternative to too many horrible colors that make the eyes burn.

The best way to deal with color until you have more practice is to never use more than three colors in one design. You can use different lightness and darknesses of those three colors, but only use those three. Also, get a color index if you need help finding color combinations, or go to Adobe’s awesome color website: http://www.kuler.com.

Color is a very powerful tool that can be dangerous in the wrong hands.

I hope this post has helped you somewhat. If you have any questions about what I’ve said or anything else really, I’ll be glad to talk. Also, since I’ve blathered on about design like I know what I’m talking about, here’s my portfolio http://www.segdesign.com … you can have a look and decide for yourself if I’m worth listening to.

Finally, I should point out that once you throw a real-live client into the mix, everything changes. When you are working on a project for a client, their ideas are usually far more important than yours (this project is their baby, and it’s their money) so the challenge often becomes finding ways to implement their horrible ideas into your design in a tasteful and visually pleasing way. Sometimes this isn’t possible, but experience and trial and error helps. The best advice I can give about clients is to never get attached to an idea too much, because a client will invariably ruin it. Always be prepared to adapt.”

Originally posted:
March 26, 2007

Well first you have a mommy idea and then a daddy id-

Ahem.

I had a very interesting conversation today about how people come up with ideas (credit to Will, for those of you who know who he is). I had always assumed that thinking just happened, and ideas flowed out of me in a random way that had no real structure to it.

Of course that is not true, but I had never really thought about it before. If you compare the mind to a computer, rather than a random assortment of cells that just happen to think, idea-forming almost makes sense. You need an idea, so you start considering the possibilities. You begin to filter these possibilities out based on their validity, sorting them and arranging them in a sort of order. Sometimes it is necessary to write down and organize ideas on paper or talk about them, but this is part of the filtering process. There are variables that can affect this process, depending on the person who is doing the thinking. An important one in the field of design is experience, as those who are older and have done more with their skills have an easier time filtering their way to a good idea.

I found this concept all very interesting (and I cannot take credit for it). I don’t know if our minds really work like a program, but I know that something goes on when I need to think of an idea, and when I happen upon an idea that I like, it is usually after I have done some calculated hierarchical thinking about the whole thing.