Archive for the ‘Design’ Category
Sidelanes Gets a New Look
Yup, it’s about time I updated the look of my blog! I got this cool new theme by cudazi off themeforest.net. I love the minimal style. read more…
Where is “The Fold” in Web Design Today?
I recently needed to find out the optimal height to design for when building a website. This is sometimes called “the fold” height, a term borrowed from newspaper displays. Basically, the fold refers to anything seen on screen without the user scrolling.
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/
How to optimize a landing page
This video posted on the Google Adwords blog, talks about well converting landing pages and the “7 deadly sins of landing page design”. If you are a web designer or web marketer, it’s a must watch. The breakdown of the 7 sins goes like this:
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.
Change color in Photoshop
I’m changing a red easy button to green in this example (who ever heard of a red easy button anyway). I’m also using Photoshop CS4. Feel free to use this photo and copy it to your desktop if you want to follow along.
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!
A designer walks into a psychiatrists office…
Designer
“I’m depressed”
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.
Profile
