The other approach is to stay with the classics. It took me a long time to learn this. My first lesson was Halloween. Every year, Halloween at the Shoemate house brings performance anxiety. I get my knife out and I stare at the blank face of the pumpkin. I know that a REAL artist would go big. By the end of the night a real artist would carve this pumpkin into some kind of 3d masterpiece that would give neighbor kids nightmares and go viral on the internet. And if I took my time, planned it out, refined the design, thought it through, I could, and have, pull off something awesome. But the truth is, I didn’t plan, and I don’t have time to go big. I still don’t even have my costume picked out.

So if you can’t go big, if you lack the time, skill, or energy to do it right. Then fall back on the classics.

• Triangle eyes, square notch at the bottom for pupils.
• Triangle nose.
• Square toothed smile.

Simple. Fast. Easy. Classic. The classic jack-o-lantern works.

Getting dressed up for a wedding? Black suit, black tie, white shirt – classic.

Making content for a website? Don’t have time to make a fancy info-graphic? That’s ok. Headers, bulleted lists, simple images. Classic.

The classic is a classic for a reason: It works. It’s not boring, you won’t look bad, you don’t need an excuse and if anything, it makes a bolder statement.

Picasso often said: color weakens. So he used just black and white. If you use color, do it deliberately. Boldly. No grey. If you want black – go black. Know what you want and do it.

By the way: Picasso Black and White on exhibit at the Houston Museum of Fine Arts

I do not recommend books very often, but I recommend this one. Go read: Ready Player One. If you have a single fond memory of the 1980s, or liked any of the following movies: The Matrix, Willy Wonka and the Chocolate Factory (the old good one), Star Wars (again, pre-prequel Star Wars), and if you ever played video games as a kid (and still do) – then you love this book.

I read it straight through over the weekend and I could not put it down and immediately started re-reading it as soon as it was over. I’m gushing about it on my blog because my wife doesn’t share my love for giant robots, virtual reality, or video games but I know that you (the Internet) share my passion for all things geek. Of coarse – you might need to lower your expectations. I had low expectations and only picked it up because Barns and Nobles had it on the buy 2 get one free shelf (yes I still ready paper books). Anyway – hats off to the author Ernest Cline – he wrote the book I wanted to write.

Read it, and let me know what you think.

To get started, I’m testing it here, on my own blog.

Step 1: Installed the plugin Email Before Download - Email Before Download presents your users with a form where they submit information, like their name and email address, prior to receiving a download. This plugin integrates with the popular Contact Form 7 and WordPress Download Monitor plugins, allowing you to create any form you like and manage/monitor your file downloads.

Step 2: Installed Contact Form 7 - Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Step 3: Install Download Monitor – WordPress Download Monitor Even though it is no longer supported, it still works.

Ok. So now let’s test:

I uploaded a small image for the file.

When we design a site, regardless of how many bells and whistles it has, it is important that it tell a story that is simple enough that people can hold the whole thing in their mind. This sounds hard, but imagine your local grocery store. If I emptied the entire store and then, as a test, asked you to put a loaf of bread on the right shelf, or milk, or an apple, you would probably get pretty close. The story of how a grocery store is organized is intuitive to you as a user. It something you could explain. This makes it easy for both users and those that manage the store to keep it organized.

If you can’t tell the story of how your intranet at work is organized, if it burned down and had to be rebuilt tomorrow (assuming you would want to rebuild it) – could you do it? If not, you should call us at Base22. We can help.

In this video, the famous designer Saul Bass introduces a new brand identity to Bell System (now mostly AT&T) back in 1969. Watch how he builds his argument and justifies each design element. Notice how he stops and addresses unspoken but obvious objections. When you present a new design to a client think about this video. Remember that you design will be as important to your client as their own face. Because it is their face. If you are going to change it, you need to appear confident, certain, and thoughtful about each part of your design. Well done Saul. I can see why your firm won the work.

Saul Bass introduces the new logo for Bell System

• If it really takes 30 days to begin a new habit. Then if you build good sites that offers a 30 day free trial, you should tell the users they have to log in every day or else the free trial expires.

That’s still a good idea! If you knew you would lose it, you mght be more likely to use it.
I thought I better post this to the web since I’m not likely to open ten year old files everyday.

The other idea in the file is more lame only because is so very obvious. (What was ten-years-younger Ben thinking?)

• Appeal to influencer teens – the teens that all others want to be like. Marketing lifestyles, aspirations, sex.

Where does it come from?
The quote is this form was a favorite of Steve Jobs but he but he was probably (mis)quoting Pablo Picasso who said “Lesser artists borrow; great artists steal” – who in turn might be rephrasing Igor Stravinsky, but both sayings may well originate in T. S. Eliot’s dictum: “Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different than that from which it is torn.” – The origins of this quote itself is an example of great artists stealing.

Why this matters?
At Base22 we have great designers. They are often tempted to “show off” their talent by creating website designs that are creative to the extreme. That’s great. But I remind them that it is also OK to follow established conventions and to “copy” by applying the best practices, principles, and patterns for usability, communication, and style. All of human culture, science and the arts have been an exercise of observing the world, including the human world, understanding it by taking it into your head, copy it, refine it, improve it.

The internet culture inspired by creative commons licenses and open source software actively encourage innovation through sharing. The patent system itself was established not to prevent copying, but to give it structure and relieve the fears of companies and individuals who would other wise keep their improvements forever to themselves for fear of losing the edge to competition. By applying for a patent, you publish the idea publicly in exchange for limited protection. Its a great system.

I created a Google Ad for my wife’s bootcamp last week. I was excited and eager to show her how easy it was so she could do it more often. Well, nine days later, the ad is still not running. So I sent an email to support. Two days after that they wrote me back to say the ad was rejected. Why? Because we used “unnecessary punctuation”. Specifically the exclamation point!

I’m not mad about the policy. I’m mad it took NINE DAYS!!!! Google has some of the best javascript developers in the world (I know because they keep hiring everyone I try to hire for Base22).

But lets focus on solutions. Allow me give you the code to detect an exclamation point instantly, at the time of typing it into the ad, and thus tell the user it’s not allowed. It is ridiculous to wait nine days to find out you used an illegal character in a field.

Just put this on your input form:

<input type="text" id="yourAdText" 
    onchange="if (this.value.charAt(this.value.length-1) == '!') 
    {
    alert("Warning - adding an exclamation point (!) to your add
             will cause mysterious a NINE DAY DELAY! So we changed
             it to a period for you'); 
    this.value = this.value+'.'; 
    }" 
/>

Legal notice: I hereby release the above code into the public domain for all uses public and private, commercial and non-profit. Google developers should have no fear implementing this (or a much more robust, function driven piece of code that has ALL the restrictions.) I like to encode business rules into the tools as much as possible. In this case, if it is your policy to disallow exclamation points, that should, you know, BE COMMUNICATED in context rather than on page 543 of the FAQ.

First challenge – what resolution do we use in Photoshop?

Since most designs start in photoshop – a common task is to create an new blank canvas. The only thing that matters is the number of pixels. The pixels per inch is only matters for print. It does nothing for screens. You will notice that when you save for web – pixels per inch is not an option you can tweak – BECAUSE IT DOESN’T MATTER.

But – If you want to PRINT your stuff – the set your canvas up as the same number of pixels but 300 pixels per inch. Here is an example. Notice that changing the pixels per inch only affects the “document” size (i.e. the printed size) – at 300 pixels per inch the document size is only 2 inches (again, this does not matter for ipads or any other screens)

Same image, same number of pixels, same DATA at 72 pixels per inch.

So here is a plan – if you want to print your comps and have them look good on paper – you need to set your resolution high. But when you slice this up and make a website, it will all be pixels anyway.

More tests.

Take a look at the two images below on an ipad. Both are set in the HTML to be 300 pixels wide. But behind the scenes, the left actually twice the size of the other (600 pixels wide).

HTML width 300px; Image 600px	HTML and real width 300px

Theoretically, the one on the left will look better on the ipad or a high res display. If you print this document, the image on the left might also look better. But from a web perspective, they are both the same.

One more trick

If you want to get fancy you can do what Apple does on their website. They have images at double resolution (like the example above) and swap them out with javascript if they detect the user has a high resolution device.

Some more information on how to do this can be found here:

• Design Basics 101 for iPhone and iPad Application Development
• The High Resolution Web
• Misunderstand DPI and PPI