Archive for the ‘design’ Category

h1

contrast people!

October 10, 2007

This is a public service announcement for people who do this:

This looks horrible.

(Not having enough contrast).

I have spoken about this before. Please stop. Thank you.

h1

make an error page, geez.

May 22, 2007

Most of you have seen it, and developers should dread it. When your browsing the net and you find a site who’s page you are requesting is missing, you’ll see this infamous page (depending on your browser of course):
Page cannot be found

Please, for the sake of your viewers make a custom error 404 page.

Read the rest of this entry ?

h1

sample only

April 27, 2007

So you have to do some work for someone and they didn’t pay you yet. Or, let’s say that they only paid you half and you get the other half when you complete the project. Whatever the reason, in order for them to be happy (remember, the customer is always right!), they have to see what you’ve been up to.

If you don’t want your work stolen, use a watermark on the work you send them. This is done really easy with photoshop by creating a new file (165 x 73 pixels) and typing the word “sample”. Use a font size that can fit neatly in the center of the file. Do not use a background color, just have the text with a clear background.

Save it as a pattern (Edit>Define Pattern) and then fill in your new pattern in your flattened artwork (please use a copy, not the original!) using the layer effects. You can adjust the size and opacity in the fx panel. Put the opacity low (10-20) so that they can view your artwork. Once your happy, your almost done!

Make sure your artwork is 72 dip (dots per inch/resolution) by going to Image > Image Size. Save your work and send it! Now your work can’t be stolen because it says “sample” all over it. Not only that, the resolution is so low that it wouldn’t even be worth printing. Yay for designers!

h1

super quick tip: stop erasing, use a mask instead

April 13, 2007

When your trying to edit a picture with Photoshop, before doing anything, duplicate the layer to preserve the original copy. Then when your ready to edit the duplicate, use a mask:mask with photoshop
found at the bottom of the layers palette to erase any unwanted pixels. This way while your adding your’re effects and whatnot’s, you’ll have the original as well as a copy that hasn’t been erased.

h1

tiny fonts are best with Verdana

April 3, 2007

People loooove having small fonts on their websites. Have you seen this? I still don’t understand the trend, but it’s everywhere. Not only do they love having these super tiny fonts, but they pick the most dreadful fonts to go with.

I think people think that it looks all super cool and stylish. “Oh, look at me; bust out my super fine font, how vogue of me”. Cut the crap.

I’m not against having small fonts, they are good when used properly (legal stuff, footer links, etc). But come on, if the main content is written in these god awful sizes, you can’t read a damn thing.

There are sites that, for instance, are displaying code within their article. That’s cool, but why make the font so impossible to read? I’m sure you’ve seen this:

<script language=”javascript”>
function thisFontSucks(){
alert(“Please stop using these tiny fonts.\nDo it for the children.”);
}
</script>

Maybe it looks good with your resolution, but with mine at 1280×1024, it can be annoying. If your going to go with a small font on your website, go with Verdana. It’s simple, clean, and legible. Compare the following standard web fonts and you be the judge:

Arial: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Times New Roman: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Courier New: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Georgia: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Verdana: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Geneva: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Geneva and Arial are also a good picks, but don’t you see how clearly Verdana stands out? If you want to follow the tiny font trend, be my guest. Just please do it with a legible font.

Now if you make the mistake of using a crappy small font and a horrible color scheme between text and background, then you are setting yourself up for design hell. Stay away from tiny fonts with serifs. Please, do it for the children.

h1

color scheme – a good start on how to find the right colors

March 9, 2007

Trying to find the right colors to use for a project can sometimes be annoying. I’ve seen some designs that are in desperate need for a color assessment. Mixing and matching patterns and color is an art withing itself. It takes a keen eye to know what looks good together.

If your having trouble trying to decide what colors can work for your design, try Color Schemer. It will give you a start in the right direction and help you with your designs. If next time your designing and you swear that red text looks great on a black background, consult the schemer and get a quick reality check.

It’s also helpful to find inspiration in everyday life. You could be passing by a store window display, or looking at natures palettes; great colors are everywhere. It’s OK to steal color schemes; color belongs to everyone. If you see a scheme you like, try to incorporate it in your next project. I also recommend getting anything by Jim Krause. He’s an excellent designer and has some great books out.

Also check out a previous post that I did that can help you out with getting good contrast between text and background color.

h1

775 px, make it your default webpage width

March 1, 2007

When designing a web-page, your hope as a designer is to have your work look the same on everyone’s computer as it does on your own. Wake up. That is not happening. All browsers don’t get along, and sometimes, it’s the web-pages that are the victims. Here is how you can help:

Start using CSS to manage every element on your web-page.

This page for instance, is laid out using CSS only, no tables. Yes. It’s true. But I’m not here to talk about CSS; I’m here to tell you about 775 px wide. The least you can assume is that people are browsing the Internet at a minimum of 800×600 resolution. For those of you who have it below this, get off of the Internet and think about what you did wrong. Then come back and increase the resolution of your computer.

Whether you are using tables or CSS to layout your design, you should set the width to 775 pixels wide. This way, if people are browsing at 800×600, your page will fit perfectly in any browser. Nobody likes to scroll left or right when viewing a web-page. I have seen a few sites that have gotten away with it, but this is rare. Do yourself a favor and avoid designs that have people scrolling horizontally.

And for those of you who follow in the myspace trend, please stop it with your enormous pages. It may look cool on your computer, but for those users with a lower screen resolution, your site can be a nightmare to navigate. Stop with the huge images too. They can totally skew your web-page and drive users up a wall. Consider reducing the size of big images using any imaging software.

The other (maybe not so) obvious option is to use percentages for the widths of tables (or layers if your going the CSS route). In the event that you have created your own interface with graphics, this really can’t apply. Just try and make sure your graphic is 775px wide.
And remember:
Scrolling horizontally on a web-page = crappy design

UPDATE: I posted a pretty cool update to this post. Check it out here:
https://funbytebitstop.wordpress.com/2008/04/16/775px-webpage-width/