Category Archives: Bad design by design

In part three, I continue my discussion of McCain and his ineffective use of the web. This is part three of six.

Excluding 50% of Americans
John McCain’s website does not have a ‘Students for McCain’ webpage. In fact, last Spring he had only three people group webpages: Lawyers, Women and Veterans for McCain. But still today, there’s no “Students for McCain” webpage. What gives? This would lead one to believe that McCain doesn’t value every voter, and only values his three favorite type of voters: Women voters, Veteran voters and Lawyer voters. Sure, these three groups are probably the most likely of any group to actually go to the polls and vote… but why exclude 50% Americans?

A Logical Approach with a Community-Driven Approach
Barack Obama didn’t exclude all non-women, non-veterans, and non-lawyers. He has webpages for many ethnicity’s, sexual orientations, and political parties. He also includes: People of Faith, Kids, Seniors, Small Business, Labor etc. Most important to my discussion is that he has a ‘Students for Obama’ webpage. This, combined with Facebook, MySpace, Twitter social networks is giving Obama a huge edge with getting young people’s attention. Within each page there are blog posts particularly relevant to that category. That is brilliant because now someone in that category can ‘comment’ and discuss issues with people like them. Building a community is central to Obama’s website; from his various blogs on people webpages to ‘MyBO’ where voters can get involved locally through events and more.

Shaping Up (kind of)
Sometime in the past few months (late Summer), McCain decided that he should have pages for more people than just women, lawyers and veterans. Maybe he finally realized that not everyone in American fit into those groups. I’m theorizing that he took a gander at Obama’s set of people groups and trimmed it down a little, leaving out many important people groups. Ironically some of the them being: LGBT and ‘Students for McCain’. He might not agree with LGBT voters or even Student voters but you got to at least try and reach out to them. He strangely added ‘Bikers for McCain’ (probably because Cindy McCain is a biker girl). He also has ‘Americans of Faith’ and thought it necessary to add ‘Catholics for McCain’ as if Catholics aren’t American with faith. He’s even got a news article on that page titled “Obama’s Catholic Problem.” Maybe Obama should put a news article up titled “McCain’s Young Vote Problem.”

He’s got people group pages, but their iss no community aspect.
These people group page on McCain’s website don’t offer community opportunities. For example, Catholics can’t interact with other Catholics for McCain while on the ‘Catholics for McCain’ webpage. So the result is saying: “See, I can write articles pay people to write articles about Obama’s Catholic problem and get pictures taken with Catholics”; instead of saying, “Here are some important issues to Catholics and a blog/comment section so you can discuss it with other Catholics.” The side columns to any people group webpage on McCain’s website offer non-related items, while Obama’s side columns offer some people group specific steps that can be taken along with non-related items.

In part four, I take a look at the recent website redesign by John McCain and compare it to his previously all black website.

In part two, I continue my discussion of McCain and his ineffective use of the web. This is part two of six.

As I said in part one, I spent last Spring studying the presidential candidates and how I could create some ‘advertising’ to help one of the candidates. This was when the democrats were narrowed down to Obama and Clinton and the republicans were narrowed to Huckabee, McCain and Romney.

A side-by-side comparison of McCain and Obama's website through time

The Facts
I began looking at web statistics for these remaining candidates, especially the number of Myspace and Facebook friends. We all know that if you want to reach young people, you need to go to where they are most of the time: Facebook and Myspace. There’s a phrase in the Church that says, “God will meet people where they are.” The candidates need to meet young voters where they are: the web (specifically Facebook and Myspace). What I found is that Obama had 800,000 Facebook supporters while McCain had 117,000. Today, Obama has over 2 million supporters and McCain has 575,000 – this has to worry McCain when it comes to young people not being excited for a McCain presidency. Last Spring they were presumed to be the nominees, and yet were getting very different numbers in terms of young support – today is no different. If that wasn’t enough evidence, I looked at website stats from Quantcast.com and 88% of McCain’s website visitors were over 24. Today, Quantcast reports that 63% of his website viewership come from people over 34 years old. Today, McCain’s website draws 4.3 million visitors a month. That’s a lot, right? Well, double that number – 7.9 million – and that’s the number of visitors a month who visit Obama’s website.

I know, I know – McCain’s support lies in the senior citizens of America and they don’t use the web as much as younger people do. But the question will be: Will young people who support Obama via Facebook actually go and vote. Similarly, will seniors who support McCain actually go and vote. We shall see on November 4.

So, as you can tell, McCain has a problem with young voters. Not only because of the web statistics, but also because he’s not speaking to issues directly relating to them. He doesn’t mention much at all about technology, or college tuition. He wants to keep the Internet free (wow-who doesn’t) and for college, he doesn’t offer anything as substantial as Obama’s $4,000 tax credit for students. But I set out to find those issues that would connect to young voters, even if in a very indirect way.

My Small Contribution to McCain
I decided to pretend I worked for McCain and wanted to get young people to vote for him, because I could tell that Obama had the young crowd in the bag… and still does. The reason I decided on this was because I searched and searched and couldn’t find a “Students for McCain” website. No place for students to call their ‘online home’ if they were checking out McCain or were already Republicans. I set out to make McCain seem ‘exciting’ to more young voters.

My work in Advertising last semester resulted in this website: a blog style website that allowed students to interact with the campaign and each other on issues that were important to them. It also highlighted the lighter side of McCain via photos and video (videos no longer work since they were deleted from youtube). This website would theoretically allow students to take action and network with McCain via social networking websites, which was hidden or not there at all on his real website last Spring.

In part three, I will talk about what McCain has done with his website to reach a different audience.

In part one, I introduce the dilemma McCain has in effectively reaching young people on the web. This is part one of six.

As a designer I’ve constantly looked at the candidate websites and tried to imagine how people of different age groups would react and interact with them. These next six blog posts will be a culmination of this research and thought process.

John McCain’s age is not helping him reach young voters. An ineffective (or not as effective) use of his campaign website is hurting him in this area. Simple things such as branding, color scheme and number of times photographs of him are used on a single web page all drastically effect a person’s impression of him as a candidate. McCain’s brand: a militaristic star (seen on the right), is not a good choice in a time when more than half Americans aren’t happy about the wars we are in. McCain’s color scheme last Spring was black, and a little bit of blue. This just enhanced the idea that McCain would be the oldest person to be president if elected. Black, to me, symbolizes death, not ‘Country First’. His biography once had over 10 photos of him. 10 reminders of his age – all were in black and white. He also hasn’t embraced social networking. This could be done easily by making his campaign website a central hub for connecting with him through various social networks like Twitter, Facebook, Myspace etc. Although, I believe he has recently adopted this concept. Good for him.

On the flip side, Barack Obama’s age and central theme is helping him. An effective use of his website is helping him in this area. Obama’s not even THAT young, so it can’t be solely because he is younger. Ron Paul was the second oldest candidate during the primaries and was generating more online buzz than Obama or McCain (for a small period of time). The creative typography, effective circle logo (seen on the right), colors, and key concepts of hope and change have really catapulted Obama. The design of everything involved with his campaign is great. The circle logo is reminiscent of the Midwest. It might be that the first time I saw his logo was on a sign placed in a corn field in Iowa, so I always think that the logo represents a corn field and sunset. The strong themes of hope and change have done well for him, especially with McCain’s lack of theme.

I spent the Spring of 2008 studying campaign websites of all 20 or so candidates from both sides for my Advertising course. I started the project simply researching and finding something I could zone in on. What became apparent was that many of the candidates weren’t attracting the same buzz online as Barack Obama and Ron Paul were. Ron Paul has sense fallen off the face of the earth while spewing the same phrase, “It’s all about the value of the dollar declining.” Obama’s success online and overall has continued throughout the whole campaign. This is apparent in the over 1 million facebook friends Obama had versus his next highest opponent who was Ron Paul at the time, with half as many friends. I forsaw McCain being the Republican candidate, so I wanted my class project to focus on generating online buzz for McCain – I know, it was a tall task. McCain never did and still doesn’t have a ‘Students for McCain’ website, while Obama does.

In part two I will look at exactly what is hurting McCain and his online presence.

  1. Websites should look pretty and that’s all that matters.
    They should be well designed, but from a usability standpoint. It’s not a magazine ad, where the audience just looks at and reads it. Think about how the user will navigate through the site, their Internet speed, browser support, search engine optimization.
  2. I don’t know HTML so I’ll just use Flash to build my website.
    If it was 1999, maybe this would fly, but not today. Building websites purely in Flash is a misuse of Flash and an alienation of web useres. Flash is a motion graphics program, not a website editing program. Flash is meant to enhance  well programmed and designed websites. You will alienate visitors because they won’t find your website in the search engines. What about your grandma? She might not have the newest browser or Flash player which will allow her to view your website.
  3. I’ll welcome my visitors to my website with a “click here to enter” page. (see the screenshot)
    This is usually only done with Flash websites, but this is the silliest thing someone can do. By typing your web address in, it is a sign that they already wanted to “enter” your website. Keep the front door open and let them land right there in your living room, aka: your full homepage. Even if this page is only here so users know they need flash player to view the website, they most likely not going to take extra time to get the flash player just to view your website, unless it’s your very devoted mom.
  4. I’m using tables to lay out my website, because I just don’t get this new fandangled CSS thing.
    The Internt began as a way to present and transfer content in purely text format, with no layout needed or required. Tables were added shortly after so that tables of data could be displayed. Then someone decided that they could use a table to design their whole website. They even began nesting tables inside one another to create their complex web designs. Tables are to be used for “tables” of data, and CSS should be used for the layout and styling of a website . Cascading Style Sheets separate the design from the content. This means that when you want to redesign your website in a year, it will only take a few minutes. For example, I recently changed color schemes on my approx. 50 page portfolio website and it took about 10 minutes. If I was using tables, I would have had to open each of my 50 pages and change colors manually. I admit, in high school I learned to use tables, and it took 6 years to make the switch, and what a change it has been.
  5. Image maps are the best thing ever! I can create a website in seconds!
    What about visitors to your website who are disabled and use a screen reader? When they visit a well programmed website, the contents of the website is read to them out loud by special software. If your website is primarily image-based or even Flash, then all the disabled visitor will hear is silence. You can also alienate your visitors with dial-up Internet, because they will wait many times longer for your website to load. I will admit I’ve used image maps. Just check out http://www.sargent-construction.com The whole circle motif is an image.
  6. I just make my paragraphs of text images so that the user will see exactly what I want them to, in the correct font, size, and color.
    It is true that the user might see a different font or size if you use real text, but that’s part of the beauty of the web. The user can decide, via their choice of screen resolution, font size, etc how they view your website. By making your text an image, you take that right away from the user, while also blocking that content from search engines and slowing the load time of dial-up users.

These ideas are ones I’ve spent eight years learning. I’ve made all these mistakes at one time or another, either for my convenience or because I truly had no idea what I was doing. The biggest idea above that can actually be a good thing to do would be ‘all flash’ website. For product promotions and mini-sites, it is definitely appropriate to use primarily flash, because you want to sell the product with a “flashy” design… Pun intended But if you are creating a corporate website, or even a band website, think about search engine optimization, usability, functionality etc.

The era of ‘pretty websites’ has passed. People now demand more usability, interactivity and functionality. If you can create a well designed website that is usable, functional and interactive, then you’ve figured something out.

 

As journalists we believe the guiding principle of our profession is accuracy; therefore, we believe it is wrong to alter the content of a photograph in any way that deceives the public.

As photojournalists, we have the responsibility to document society and to preserve its images as a matter of historical record. It is clear that the emerging electronic technologies provide new challenges to the integrity of photographic images … in light of this, we the National Press Photographers Association, reaffirm the basis of our ethics: Accurate representation is the benchmark of our profession. We believe photojournalistic guidelines for fair and accurate reporting should be the criteria for judging what may be done electronically to a photograph. Altering the editorial content … is a breach of the ethical standards recognized by the NPPA.

This is the center of the debate. I agree, designers, photographers and journalists shouldn’t add or take things away from a photo that will change the “integrity” of the photo. If you take out a person or a building or even add a person or building, that shouldn’t be done if the photo is being published in a newspaper or magazine. But what if you have a photo of a person with the background cutout and the photographer decided to take a photo with the half of one of the shoes cropped off. Does the designer whip out the graphics tablet and open up Illustrator and paint in the tip of the shoe, to complete the photo? I would say, yes, you should, especially if you are cutting out the background and there would be an awkward cropped foot floating in the middle of the page.

This exact thing happened this week in the Index (see this pdf). They published a photo that had the background cutout of a person’s foot but it was cropped off. It looked horrible and very incomplete. As a designer I saw laziness on behalf of the photographer and designer. But it wasn’t laziness, it simply was due to their ‘ethical’ restrictions. So, after looking at the PDF I realize they DID manipulate the photo, they placed a cutout photo on top of the rectangular photo with big fatty white drop shadow. Don’t believe me, check out this photo. They cutout this photo and placed it on another photo, to look like the person was in a different photo. Now if this isn’t changing the integrity of a photo, I don’t know what is. Maybe it’s unethical to also to publish recipes that are correct (see the Instructions section of the currey rice recipe where they call for chocolate chips and walnuts).

If it’s unethical to enhance photos without changing the meaning or integrity of the photo, then I’ll never work for a newspaper. I agree that we shouldn’t add or delete major aspects of a photo, but simply finishing the job of the lazy photographer I think is justified.

The other thing is that the photos a designer chooses should be ones he can successfully implement into his design. If we, as designers aren’t allowed to make photos look great through color correcting, levels, cropping and slight enhancements, then we shouldn’t use a photo. Maybe we’ll make the writer mad by using only typography or simply find another job, one that allows for creativity.

I heard someone in our discussion say that newspapers shouldn’t look pretty, they should just convey information.

Yeah. Right.

If the paper didn’t look pretty, no one would pick it up besides the newspaper staff who wrote it. Designers also make things functional and usable, not just pretty.  Think about posters, you don’t even look at the ugly ones, you are drawn to the readable, functional, beautiful ones.

My final thoughts: I believe editing photos in order to create the best image for the specific layout or story is what we should do, not follow an ambiguous rules, that don’t keep design in mind. Why can’t the newspaper designers have a code of ethics that begins with “As designers, we believe that….” ?

Check back with me in 5 years, I guarantee I won’t be working for a newspaper.

I found this article by Andy Rutledge to be very interesting. He believes Poynter is doing the public a disservice by putting out studies on the eye movement of people who read things on the web or in print (the study is here). Now, I’ve always found information about the typical eye movement of people to be interesting, but nothing more. In high school, I learned people view a website in a Z pattern, starting in the top left and ending in the bottom right. I used this rule of thumb to design many websites that ended up all looking alike and were really boring. But since I’ve been in college, I’ve thrown the silly “eye-movment” rules out the window. It has never informed me on how to design something. Why? Because the designer can control the reader’s eye with design principles and elements.

I find it interesting that a school for journalists is studying eye movement of web and print readers. Designers have total control over the movement of the eye with the design principles they employ, so studying eye movement should be done case by case and not by journalists. This is like a school of graphic designers putting a study on how to write for newspapers or for the web. It just shouldn’t be done

Poynter has consistantly put out studies on the the eye-movement of readers, giving specific conclusions about their data. How useful are their conclusions? Andy Rutledge would say they aren’t very useful at all because an eye-tracking test can’t be applied to every publication or website. The reader who they tested on a certain newspaper might have been interested in the article, therefore read more of it. That doesn’t mean everything about that design is great and should be applied to every other aspect of publication design.

My communication friends might not like this quote, but I think, in this case, it is true. Poynter has done a study on something outside the realm of their profession. They are measuring something the designer has the ability to control: eye movement.

They’re making these mistakes, I believe, largely because they’re clearly not designers! The Poynter Institute is “a school for journalists, future journalists and teachers of journalists.” That’s great, but it clearly does not stand them in good stead when they so casually and unwittingly wander into the realm of design.

If you haven’t began to hate me, maybe this next excerpt from Andy Rutledge’s post will make you do so. 🙂

Eye-tracking Myopia

Here are a couple of examples of Poynter’s EyeTrack conclusions. Let’s examine some of their claims from the studies about online readers’ habits.

1. Users spend a good deal of time initially looking at the top left of the page and upper portion of the page before moving down and right-ward.

Not if the designer doesn’t want that to happen. What they’re referring to here are the behaviors of their study subjects when presented with the specific layouts used in the study. Any competent designer can craft a layout and design to elicit any specific entry/focus behavior on the page.

2. Ads perform better in the left hand column over the right column of a page. The right column is treated by users as an “after-thought” area and should be designed with that in mind.

Hogwash. Yes, a designer can make this so, but she can also design the page so that any area of the page allows ads to perform better. This is, in fact, the designer’s responsibility with many projects. The “after thought area” of a page is created by the design—if it is designed to exist at all, and is not always relegated to the right column.

3. Navigation placed at the top of a homepage performed best.

…For the specific designs used in the study, perhaps. But this again is wholly contextual to the design, the content, and the intent of the designer.

This is the sort of pap they would have designers, publishers, and editors believe and invest in. In their current pre-study promo article, they say, “Because the study adheres to the highest research standards, we’ll be able to offer industry leaders scientific accuracy on which to base the editing decisions they make every day.” However, as their conclusions are farcical and myopic, they don’t actually offer much in the way of valuable information. Their definitions of high research standards and scientific accuracy would seem to be unreliable.

So let’s let journalists write and study the effects of writing on readers. Also, let’s let designers design and study of the effects of design on viewers.

Blast from the Past
I don’t know why I’m posting my design work from high school. If only to prove a point that Truman State University is teaching me something about design. I was a senior in high school when my then band director requested I design his website for his political campaign.

This was my first website job.

Notice my inclination for good typography… or lack thereof. I used drop-shadows and edges/strokes on all text. I used a script font, I used a pointless “welcome message”

All these are what I now know is generally bad to do.

You live, You learn.


website job number one

I won’t blame this on the software I was using, but it definitely didn’t help. Anyone ever hear of Microsoft Image Composer? It was shipped with old versions of Microsoft FrontPage. It is what I used until entering college and being forced to use Adobe Photoshop.


farewell dearest Image Composer


You’ll be missed

This program didn’t have layers, channels, pen tool, etc. It was essentially one layer and you could only “undo” once.

Only one undo.

You Photoshop guys wouldn’t survive in the world of one undo.

I survived.

What I’ve learned in regards to graphic design.

1. You should stab yourself in the hand if you feel the urge to use a drop shadow, stroke or gradiant.
A direct quote from my Professor. I believe that drop shadow can be used, but very faintly and only to achieve better readability

2. Large blocks of text should be no larger than 14 and should be a serif font.

3. The client is always right, but that doesn’t mean they decide upon the specifics of the design. It’s the designers job to make great design and please the client at the same time. The client should give the designer what they want the result to be but they should not dictate the means (specifics) to getting those result.

4. Pixelation… not good

5. Obtain your graphics and photos legally. Nothing, when it comes to photos online is free, and if it is, the quantity of photos isn’t very large or the photo probably isn’t that great (quality or conceptually).- Check out http://www.sxc.hu/ for some top-notch, free stock photography… they don’t have a large variety though.

6. Use pencil and paper to sketch your design before using the computer. The computer is a tool, but you’re the designer.

7. Website design: HTML tables were meant for tables of data, not for designing a website. That’s what CSS is for.

8. Website Design: Using an image map is cheating, and your grandma who is using dial-up at about 5kbps will not have the patience to wait for the page to load.
I’ve learned these things in the past 3 years here at Truman, and I know I will learn a million other things in the next year and a half that I should avoid when it comes to designing.