Ideally, keeping important content “above the fold” will allow the user to understand what the website is about without having to scroll in their browser — a reasonable goal when laying out a webpage.

Anyway, I thought I’d share some of my results from the research I did. Defining an exact pixel number can be tricky, so I made this graphic to give an idea of heights in pixels. http://www.laughcard.com/hi.html

Go ahead and view the graphic on your friends, coworkers and neighbors computers. This will give you an idea of all the little things you have to keep in mind; toolbars, menu bars, window decoration, system bars, browser window sizes, etc.

There’s a lot to consider, but I want to define a number or at least a range in which to design for. I came across this website boxesandarrows that stated “the three highest fold locations were 570, 590 and 600 pixels—apparently from different browsers running on 1024×768 screens.” It was talking about another study conducted.

Based on my research, I would say less than 600 pixels tall is a good height to design for. If I was to give a range, it would be between 550 and 600 pixels tall. There is a lot to consider, but those are some pretty decent numbers for the time being, which of course is subject to change…

Also, here’s a cool tool I found for measuring the users browser size and placing content:
http://browsersize.googlelabs.com/

1. Unclear call to action
2. Offering too many choices
3. Asking for too much information
4. Too much text
5. Not keeping promises
6. Visual distractions
7. Lack of credibility and trust

After about 42 minutes into the video they begin to talk about Google’s Website Optimizer and less about design. It shows you how to test, track, and optimize your landing pages.

I was having problems with embedding the video on this blog but it seems to play okay here at the Google Adwords Blog Site.

Red easy button

Green easy button

1. Hit the “create new fill or adjustment layer” button at the bottom of the layers palette and create a new Hue/Saturation layer. (Fig. 1)

Fig. 1

2. Check colorize at the bottom of the adjustment pallete and move the sliders to create the color you desire. The settings I used are:
Hue 132
Saturation 53
Lightness 0

3. On the Hue/Saturation layer mask, you’ll want to paint out areas so that the green color only shows through in certain areas. To do this in an easy way, we’ll create a selection and then fill it with black. Use the magic wand tool to select the white letters on the button.

On the layer with the easy button photo, hold the shift key and click each white letter to select all the letters. You can also hold the option key and click to subtract from the selection if you find you selected too much. After your selection is all set, go back to the Hue/Saturation layer mask (Fig. 2)

Fig. 2

and fill your selection with black. (Hit the D key to ensure that your default colors are set to black and white).

4. Follow this same selection process with the green part of the button that used to be red. (It still is red if you turn off the adjustment layer) Keep shift/option clicking on this part of the button until you have the selection you like.

5. Last but not least desaturate your original button layer to kill any red that’s showing through.  In the menu you’ll find it in Image > Adjustments > Desaturate or use command-shift-u on a Mac or control-shift-u on a PC.

Now you have an easy button that in my mind is properly colored. Do you think the easy button should be red or green? Maybe some other color? Leave your opinion in the comments.

Also, here’s a 1024 x 768 res screensaver of a green easy button. Enjoy!

Psychiatrist
“What seems to be bothering you?”

Designer
“I hate having to upgrade my Adobe Suite. Every time they change things around, I can’t find my shortcuts and they change the interface in ways that are very disconcerting, it’s awful…”

“… I used to look forward to upgrades but now I can’t stand them. Ever since CS2 it seems it’s been all downhill and now I hate upgrading my Adobe products”

Psychiatrist
“I can prescribe something for that, would you like to try Adobetin?”

Designer
What about Adobezac or Adobezine? I heard there were bad side effects with Adobetin.

Psychiatrist
Actually, Adobetin is new and the makers have reduced some of the bad side effects that the other medications have. Lots of designers use it and have reported excellent results.

Designer
Won’t this prescription only work for a year or so and then wear off? Adobe upgrades every year and a half, so this won’t really work for me.

Psychiatrist
Some users of Adobetin have reported this, but it usually works best when coupled with other treatments.

Designer
What kind of treatments?

Psychiatrist
Group therapy and talk therapy. Sometimes it helps to talk these things out and know that there hundreds, even thousands of people that are just like you. You are not alone with your problems and it can help you to learn that you’ll just have to shut the hell up and deal with it.

Designer
Blaaaaaaahaaaaahaaaaaaaaah!

Anyone got some Adobetin? What’s your prescription for Adobe upgrades? Did you once look forward to them and now you dread them? Is this a phenomenon that happens with age, experience or both? Not effected at all? Talk to me.

(Fig A)

A good way to learn to use the pen tool is to try this “follow the circle” exercise.
Drag this circle image (Fig A) to your desktop or right-click/save to desktop.

Open the image up in Photoshop and blow it up to 300%. Select the pen tool by hitting the (P) key. Follow around the edge of the circle by clicking with the mouse and setting “anchor points”.

Put your anchor points close together (almost touching each other). When you’re comfortable placing the anchor points, try spacing them out a little farther. (Fig B) If necessary, use the arrow keys to nudge each one into place along the edge of the gray circle.

(Fig B)

Follow the outline of the circle until you’re near the point at which you started. When you’re almost finished, hover your curser over the first anchor point that you created. You’ll see your cursor turn from a pen tool to a pen tool with an open circle next to it, this means you are about to close your path. (Fig 1)

(Fig 1)

When you’ve closed your path, zoom out to 100% and see what you’ve got. Click on your paths tab (by default it’s next to the layers tab in the layers palette). Save your new path by double clicking the layer that says “work path” and name it Path 1.

With Path 1 selected, click on the icon at the bottom of the paths palette that looks like a circle composed of tiny dots. (Fig 2)

(Fig 2)

This will load a selection from your path. With the “marching ants” selection activated, Go into edit in the main menu and select stroke. Choose a color, put 1 pixel, center.

Now you see you have a pretty flawless circle drawn out. This circle was created by nothing more than straight lines. This method works, but now we’re going to try a much faster method.

Deselect Path 1 by clicking in the negative space on the paths palette (below path 1). With the pen tool Create a new path and start following the circle again, only this time try to drag each anchor point a little.

When you click and drag, you’ll notice your anchor points don’t move, instead they have “handles” that come out. Try and line these handles up with the edge of your circle as you trace. Put more and more space between each anchor point when you drag and keep lining them up with the edge of your circle.

Play around a bit and notice how the line reacts. If you get something you don’t like, hit delete and click your last anchor point to pick up the path again. Notice it’s a lot quicker to trace the circle when you can drag out the handles.

When you’re finished, try to trace around the edge with fewer and fewer anchor points. Just for fun, see if you can eventually do it with only 4 anchor points (Fig D) or even two!

Photoshop Pen Tool Exercise

1. Graphic Elements – 27 Indespensible Resources for Graphic Designers
2. Design Trends and Predictions 2009 – Web Design Trends in 2009
3. Cheat Sheets - Cheat Sheets for Web Designers
4. Older list, but still some great posts - The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007
5. Online Design Handbooks – 4 Online Handbooks for web designers and developers

I guess it’s because it hasn’t yet launched so that must be where the problem is. Democracy Designs is going to be one of those sites that changes the Internet forever. Well… okay maybe it’s not quite that profound but it will be unique and useful, especially for designers. The site’s planned to launch in Feb. 2009 so stay tuned.

This is what we'll make!

I’m using Illustrator CS2-CS3 for this tutorial, but you’ll find these steps to be pretty much the same in most versions of Illustrator. I also have my preferences set up for working with the web so I’ll use pixels instead of the default measurement which is points.

In a new Illustrator doc select the rectangle tool and draw a vertical rectangle with black fill and no stroke as thin as you can make it about 100 px tall. (Fig. A)

(Fig. A) Vertical line

Use your width and height panel to enter 100 px for the height and .75 for the width. (In CS2 and CS3 this panel is located by default at the top of your screen) Also, If you’re using points as your default measurement, use the same numbers I use here.)

Sidenote: I often like to use filled rectangles instead of a stroke because strokes can get a little hard to work with when you need pixel perfect accuracy. When working for web it’s always nice to have this accuracy so I find myself getting away from using strokes as much as I used to. That said, use whatever you like, basically, you just need to create a vertical line with similar dimensions.

Click on your newly drawn line to select it and then click on the rotate tool in your tools palette. If you’re new to Illustrator, the rotate tool is shaped like a circle with a small arrow at the end of it.(fig 1.)

(Fig 1) CS3 Toolbar

(Fig. 2) Rotate Dialogue box from Illustrator CS 3

Double-click this rotate tool to and get a dialogue box. (fig. 2)

For your angle enter 60 degrees, check the Preview checkbox and hit Copy. You will now see a copy of your line on your canvas, rotated at 60 degrees. Also notice the cross-hairs in the middle of your line. This is your rotation point which we’ll talk more about soon.

Now hit command-D on a Mac or Control-D on a PC to duplicate the action you just performed. You should now have a total of 3 line segments on your canvas that looks like Fig B.

(Fig. B) Symetrical Image - 3 lines rotated at 60 degrees

Now select the ellipse tool from your tool palette. (skip to the next paragraph if you know where the ellipse tool is) Otherwise, this is a beginner tutorial so I’ll Explain where the ellipse tool is. By default you’ll see a rectangle tool in the palette, click and hold your mouse button over the rectangle tool and you’ll see a fly-out menu with several options. The ellipse tool is the 3rd one down the list.

With your ellipse tool selected, click anywhere in the canvas to get a dialogue box. Fig. 3 and enter the values 10 px for the width and 10 px for the height.

(Fig. 4) Dialogue box for ellipse tool

Give this new ellipse a fill of white and a black stroke of .75. Drag it over to the top of our object as seen in Fig C. Position it so that the center of the circle is over the end of our line. You may have to enlarge the viewing size to do this. Use the magnifying glass or (command/control +) to enlarge the view.

(Fig. C) Drag the new ellipse to the top end of the verticle line

Now we’ll create the other circles on the end of the lines, the instruction here gets a little tricky so stay with me. Click on the ellipse to select it and then click on the rotate tool once to view a new cross-hairs in the center of the ellipse object. (Your curser should look like a cross-hairs as well) Option Click on a Mac or Alt Click on Windows in the exact center of the line object to set the new center of the rotation. You may want to enlarge your canvas to about 1200% in order to see your center point better (Fig. D)

(Fig. D) Option click in the center of our object to get a dialogue box

When you option/alt click, a dialogue box will come up, enter 60 degrees and hit copy. Make sure you hit “copy and not “OK”. This performs your transformation once (Fig. E).

(Fig. E) Hit copy in your dialogue box to get this image.

Now hit Command/Control – D four more times to duplicate it. You should have a full looking ornament as in Fig. F.

(Fig. F) (Almost Done!)

Hit Command/Control G to group the object (The group command is also found in the object menu under group). You don’t have to group it but I like to keep the elements organized this way.

With the object selected and grouped double-click the scale tool in the menu palette (It looks like two rectangles and an arrow). Double-clicking will bring up a dialogue box. Enter 70 in the uniform section and hit copy.

(Fig. 5) Scale Dialogue box

With your object still selected double click the rotate tool and in the dialogue box enter 30 degrees. Instead of hitting copy, hit OK and you now have the finished product!

(Fig. G) Final element.

You can also hit copy in this last state to get an interesting effect. Play around with the different settings and you can end up with some cool effects. I think you’ll find that doing this tutorial will provide you with a backbone for many creative ideas you can use with these tools and techniques. Snowflakes, clocks, wheels, and ornaments just to name a few.

Another good thing to remember when rotating images is to use a number that divides evenly into 360: 2, 5, 10, 15, 30, 45, 60, 120, 180. This will ensure that what you are rotating will fit into your circular object.

“Out of hundreds of options available, a handful of options will work”. I like to say, “Let’s try to shoot for that”, keeping in mind that “that” is a somewhat broad target. On the other hand, I’ve worked with some people that think the only solution that will work is the ONE idea that they have in their head, A bulls-eye!

Next time you find yourself in front of a dartboard, see how long it takes for you to get a bulls-eye. You usually quit before it actually happens, however you hit the dart-board (the target) every time (hopefully).

I’ve been on many sides of the table as a creative director, a client, and a designer. Being a creative director or client, I think it’s important to leave a certain amount of choices open to the graphic designer. This keeps their job interesting and keeps them thinking, rather than mechanically following orders.

With this approach, you may not get exactly what you thought you wanted, but it just may work better than what you had initially thought. You may even learn to like a design solution that you didn’t like a whole lot at first. To sum up, when working with designers as a creative director or client… stay open to possibilities!

When I came across these billboards on the side of the Interstate I just had to wonder who was the mastermind behind this. Is this the result of an unassertive graphic designer or an excessively pushy client? I wondered what was the back-story to this scenario.

The wordcount is 25 not including contact info and logo

Let’s say for the sake of a back story that it was the client who had something they absolutely had to say. The designer did their best to cut the text down to size but the most they could get was a couple words here and there. The billboard goes up with dozens more words than anyone can possibly read while driving by at 65+ mph and their advertising budget is spent on something completely worthless.

I mean you can’t really expect someone to stop and pull over their car to read your novel of text on the side of the road, can you? Do you really think someone would give you that sort of attention? Who in their right mind would pay any attention to this? Who in their right mind would take a picture and… post it on the… Internet?

Hmmmm, with that in mind I took it a step further and masterminded my own campaign of billboards for Sidelanes.com.

My Billboard

My billboard again (In case you want to have another look)

Keep a lookout, you’ll see these popping up all around the Salt Lake Valley.