Design 101: September 2007
Author: Tiara Rea
Last month, I introduced many of you to some great resources for DIY web design and coding. This month, I’d like to take the same route but also give it a different spin and offer some links to sites you said you wanted! So let’s get started.
FavIcons!!!
Okay, so not everyone is as excited as me, probably because not everyone knows immediately what a FavIcon is. But I bet you’ve seen them and may be looking at one right now.
FavIcons are those cute little icons that appear next to your browser’s address bar and are often the company’s logo, symbol, or mascot. For example, Google’s famous FavIcon is the big multicolor G in the box.
For me, I’ve always been interested in these FavIcons, because I think they can really make a site pop. So I found this nice little application over at Chami.com that allows you to create your very own FavIcon in less than 30 seconds. Just choose a picture, click submit, and you’ve got your very own FavIcon that you can install instantly into your website’s HTML code. The site also offers simple instructions for this, but all you need to know is that after you’ve uploaded your new FavIcon to your site, add this HTML tag to your site’s code between the <head> and </head> tags.
< link rel = “shortcut icon” href=”favicon.ico” >
Feel Elated
I stumbled onto Elated.com accidentally while in search of free web templates a while back, and was pleasantly surprised to find that they offer a ton of different things to assist new webmasters or old tech gurus.
First up are their free templates – you know me; I’m a sucker for free stuff! And their templates aren’t cheap-looking, nor are they the kinds of free templates you normally find out there (I’m talking about the red text on a yellow background kind *shudder*). Elated templates are actually a really amazing resource for something professional and easy to upload. My personal favorite is their Hang A Right theme:
Elated.com also has a variety of tutorials for the beginner and the techie with subjects ranging from “making a rollover menu bar with JavaScript” to “your first CGI script” and even “choosing the mood for your site”. Basically, if you want some quick introductions to JavaScript, ASP, HTML, or CSS, give this site a try.
And finally, they do offer some pretty decent buttons, backgrounds, and icons for your site, as well as a really cool tool they call ImageKits, which is a free download that lets you put fog, rain, or even robot-vision over any image. I am partial to putting Amy underwater. 
Simple Banner Generator
Need to promote your website but don’t have time to sit down and create a banner yourself? Or maybe you’re just looking for a temporary, quick fix to get yourself started. Either way, WebWeaver’s Free Online Banner Generator can help. This tool creates a banner with your choice of premade templates and a variety of text colors, so it’s very simple and quite fun to use. The completed banners aren’t half bad either, though this tool certainly doesn’t create anything flashy like CoffeeCup and other great (and sometimes costly!) design tools can. Still it’s completely free, it’s easy, has that one-touch feel, and is a tool that may at least offer you some inspiration for your own future banner designs!
And check out my awesome masterpiece:
Yes, I realize it is genius.
Pattern4U
Some of you had asked for a website that offers professional backgrounds for your websites, and let me tell you, this was nearly an impossible task. Do a simple search in Google for “website backgrounds” or “background pictures”, etc, and you will come back with junk, junk, and more junk. I actually spent an hour or two researching, trolling through Google and Yahoo, etc, only to come back with somewhat useless resources I didn’t want to share. And while I know that a webpage’s background isn’t as necessary as it was say ten years ago, I know many webmasters still rely on them for a snazzy look, and I didn’t want to let you guys down.
Enter Pattern4U, a resource I actually found from one of our faithful Lunartics’ Blog readers!
Pattern4U contains over 250 useful, professional website backgrounds designed by people just like you in categories ranging from classic and modern to “dirty” and funky. I honestly don’t think there’s a better resource online for good graphic backgrounds, though please let me know if I’m wrong. Check out my favorite samples below and choose a great background for your new site!
Okay, that’s all for September’s Design 101. Keep offering your suggestions so I can find great themes for next month’s issue!
September 25th, 2007 at 11:09 am
Hi Tiara,
Reading your writing, I get the impression you would be most qualified to address my question. Though I have had my SoulMentors Domain with LunarPages for over a year now, I have yet to create and launch the site! I have begun to work on the site, having added a template, trying to learn CSS, and using my old FrontPage 2002, but maintaining my old site ( http://www.transitions-counseling.com ) has had predominance so far.
I plan to develop my new SoulMentors site and then upgrade and transfer my old site, also, to LunarPages. Here’s my question. I have almost no HTML experience and have grown up on FrontPage. Now, I see this great LunarPages opportunity to switch to Coffee Cup to develop my site. I wonder, from where I stand, would it be best to continue with my old 2002 FrontPage, upgrade to the new version of FrontPage, or change entirely to develop my site using Coffee Cup? Primarily, I want to minimize time lost due to the learning curve, while also following a course that will not be a dead-end path as far as web-development options are concerned.
Thank you in advance for your sage advice!
September 25th, 2007 at 1:43 pm
Sage advice? Oooh, I like that.
My recommendation would definitely be to try something new. You don’t have to keep whatever you design with CoffeeCup, but it’s worth a try, and many users find they enjoy it more than Frontpage. I would say, try downloading CoffeeCup and play around with the VisualSite Designer for a couple days, maybe a week. Upload the content to a subdomain (anything.soulmentors.com) and see what you think. It’s a What-You-See-Is-What-You-Get designer, but looking at it on a live website tends to make it seem more “real”.
Like I said, you don’t have to keep what you design, but I think not trying it would be a sin, as it’s yours free and you can give something new a shot. Who knows, it might help you develop a site design that’s perfect for your needs!
Also, if you’d rather work with premade templates, you could try PageMason. Just login to Cpanel and you’ll be promted to install it. It runs in your browser, so there’s no downloading necessary.
September 25th, 2007 at 4:13 pm
Thanks so much for this!!!! I’ve always wondered how to creat favicons – always thought they were something only rich businesses could do so this helps tons with my company’s net image. Anything to save a few bucks…
October 6th, 2007 at 5:46 pm
I’m new to LunarPages and this newsletter, but I’ve enjoyed reading it. Your writing style is entertaining and easy to read. I look forward to new newsletters.
I’ve a novice – at best – when it comes to HTML, but I’ve been a graphic designer for many years. Fortunately, what makes the printed page look good rolls-over to what makes a web page look good. I’m commenting on the use of background tiles in general, not your opinion on these specific patterns or the web site Patterns4U.
The background examples you show in Patterns4U are poor choices for two reasons: the value runs the entire grayscale gamut and they are visually busy. Let me explain.
All color has its equivalent on a gray scale and it can be given a number from 1, being white, to 100, which is black. This is called value. If you were to remove the color from these backgrounds you’d see that most of them have areas of absolute white and absolute black, as well as many areas in-between. Some call this contrast. The lesser the difference in value within a background, the better the choice. The greater the value, or contrast, between that background and foreground, the easier it is to read text or see foreground objects on that page. It is impossible to choose a color that will give sufficient contrast when a background runs the gamut for value.
The other problem is pattern. When a background has a visually busy pattern, it competes with the text of the page, and it’s the background that almost always wins. Text forms its own pattern so when you place it over a patterned background you are placing pattern over pattern. A heavier or higher contrast pattern will almost always grab the reader’s attention first.
For example: the grass.jpg pattern has areas of white, black AND everything in the middle. You might choose yellow for the text because it is different from the green color of the grass. This is true as far as hue, but you have to consider the value of yellow and yellow often “reads” nearly black. Technically, because of the value you could see the text over the lighter areas of the background, but the “hue” or color of yellow is difficult to see over white. The value of yellow, being dark, makes it difficult to read over the dark areas of the background. The blades of grass are thin and this presents its own problem in that they are similar in size to the lines that make up a letter. It’s like trying to find a needle in a haystack, so-to-speak. The needle would be easier to find if it weren’t the same shape as the hay and similar in color.
The bigger patterns found in funkyflowers.jpg and graygreenflowers.jpg grab your attention first because they are bigger and bolder patterns than the text. You want your reader to see the text — and hopefully read it! — not the background. If you think about it, you rarely find printed pages with these types of backgrounds, so why do we use them on the web? When you see text on a TV screen it is almost always white with a very dark shadow, placed over a darkened area of the screen or placed within a block of solid color. HTML is limiting in that it can only place text over a solid color.
You can use these background, but you should do two things: first, change the value. You can do this by opening them in a photo-editing or drawing software and making them either very, very light or very, very dark. You can then choose a color of opposite value for the text. Second, colorize them, that is make it monochromatic or one color. Then choose a different color for the text or foreground objects.
If you’re not sure if your background in inappropriate, print out your page in black and white. This simple step will tell a lot. All this can be avoided if you choose subtle backgrounds and let your foreground graphics and text be the “stars” of your page.
And, me, too. Thank you for the “how-to” on favicons!