|
More than anything, a Web site needs to be useful and informative. Next, it needs to be fun to use. Fun on the Web means interactive.
In the world of the Web, community sits at the top of the interactive food-chain. We've added a few applications you can use to help make your site interactive and fun. The beauty is they're all FREE. A good price for anyone on a budget ;-)
Image Editors:
All the graphics on this
Web site were created or edited using PaintShop Pro: v4.12. While there
are newer versions of Paint Shop pro, they all contain a "drop dead after
30 day" feature. The 4.12 release was the last with an infinite evaluation
period. Honor suggests that you really should discontinue use after
30 days if you don't purchase it. There's a nag screen advising me that
I'm on the 413th day of my 30 day evaluation trial.
PaintShop pro was created by
the good folks at Jasc Software, Inc. and it's, IMHO, one of the very best
image editors available today.
Windows 3.x (and above):
PaintShop Pro v4.12: Review Download: Psp412.zip
(2.97MB) Download Paint Shop Pro 3.11
(Evaluation version): psp311.exe
[1.9MB]
Windows 95, 98 and
NT4.0:
Download Paint Shop Pro 5.03
- psp503ev.exe [7.02MB]
More:
PaintShop
Pro Help Center: Tutorials
to get you started -- everything from working with your first image to
creating transparent and animated GIFs.
Latest
Graphics Tips & How-tos: Links to dozens of great graphic utilities
and programs. All free!
Top
Organization: Ten Quick Tips for Better Site Design
Tom Karlo put this list together to help provide pointers and direction for folks who know HTML and want to produce better site designs. His list is more concerned with the issues of designing pages than the technical problems of HTML or Photoshop and is a must read for any wannabe webmaster.
1. Keep your goal in mind
Too often, people forget why the site they're designing is being put up. The purpose of designing a site carefully is not to make it look cool, or win awards. It's to accomplish the intended goal of the site. If you're making a site for a company, sometimes the goal is simply to distribute information about the firm. Often, however, the real goal is to sell or advertise some product of the company. Obviously, the structure and design of the site would have to vary greatly depending on which of these two objectives was viewed as the primary one. Note, however, that you usually will have more than one goal in building a site.
Before starting a project, carefully write down a statement of the goals of the site. How do you know what your goals are? Simple. Ask your client. If you're your own client, ask yourself what you would say if you contracted the project to an outside firm. This is critical to keeping everyone in the project directed and satisfied with the outcome. It also provides a constructive basis for design decisions during the project. When you're in the middle of a long term project, it gets too easy to forget why you're doing it. Having a clearly stated goal goes a long way towards resolving this issue, and can often settle design arguments in a way that both sides agree with.
Tips
2. Design sites, not pages
Although you spend most of your time worrying about pages, rather than the site as a whole, your primary concern should be the site's overall design. When starting to design a new site from scratch, you should try to create a design that will make sense to users, has a consistent look and feel, and is not to difficult to extend in the future.
Using a consistent page design across a site can seem "boring" or "uncreative" at first. Stay with it. The consistency of design of a site is one of the factors that differentiates amateur sites from professional ones. Yes, at times you may end up with individual pages that are not as satisfying as they might have been had you designed them individually. But your site will have a consistent look across all pages that will allow users to know immediately when they enter your site, and that will help them remember your site as well.
Designing on the site level also means that your work becomes far easier for others to extend. Don't expect to always be the person working on a site - most of a site's life is maintenance, rather than design. If you can create a site with a well defined and codified page structure, you will enable people with less experience and design savvy to work on updating and extending the site. This is critical if you want to go on to creating other sites, and your customers will appreciate it greatly when they are faced with updating their site.
Tips
3. Never Design in HTML
This may sound ridiculous. But it's absolutely true. When the time comes to design pages, ditch your HTML editor and pick up a pad and pencil. If you can't draw, use Quark, Pagemaker, Illustrator or Freehand. The last thing you ever want to do is initially design your pages in HTML. While HTML is a great transmission medium, it is a miserable design environment. Simple things such as tables, columns and alignment take far too long to play with, and you get lazy about trying different designs out. By drawing your prototype, or using a mature design program, you ensure that the only obstacle to your designing a great page is your own imagination.
When you design in HTML, you end up with pages that look like every other page designed in HTML. You shouldn't arrive at a design simply because it's easy to do in HTML, or it's something you know how to do. You should want to create in HTML a design your envisioned without considering the messy reality of HTML. Using HTML 3.0, just about anything is possible... it's just not necessarily easy. Solving the problems of expressing a design in HTML are trivial - once you already know exactly what your design should be.
Some of my best designs were done sitting in the sun with a pad and pencil. Wouldn't you rather do that then sit in front of the computer fighting with HTML??? So even if you don't believe me, give it a try. At the worst, you'll get to sit in the sun for an hour.
Tips
4. Write down your design
When was the last time you wrote down exactly what you did in order to produce that great header on top of your HTML page? And when was the last time you sat there cursing under your breath because you couldn't remember how to make a new header to match that old one? I'm betting the latter happened a bit more recently.
When you create that great design that is going to be the centerpiece of your site, write down how you did it! Write down anything that you can't extract later. This includes typefaces (font, font size, leading, spacing, attributes, etc.), graphical effects (how many pixels was the gaussian blur on the drop shadow?), and anything else you might forget.
A corollary of this is to always save a copy of what you created in Photoshop from the point before you flattened the image. Save a copy in Photoshop format with all the layers, etc intact. This is a lot of critical information being saved, as well as preserving separately graphic elements you might need later on.
Tips
5. Go for consistency
I've already discussed this somewhat, but it's so important I'm going to repeat myself. Consistency is paramount! Your goal should be to create a site where a user, if he or she has ever been on any other part of the site, instantly knows they're on the site when any other section loads into their browser. This doesn't mean all the pages have to look the same. But the structure and metaphors used in the site should be consistent throughout. If every section is totally different, you probably haven't really created a "site" - you've created a bunch of little tiny isolated sites. Guess which one is better for users....
Tips
6. Templates, templates, templates...
A bit benefit of having a consistent, well thought out site design is that you can use templates for the HTML of your pages. These are simply files with the basic HTML tags, including common graphic elements such as navigation bars and site logos, already in place. Usually, you'll need to create several of these for a site - say one for section pages (which have a list of content pages) and one for content pages.
To create an actual page, you simply make a copy of a template and stick in the content particular to that page between the existing HTML. Not only does this approach save a significant amount of time and effort, but it also reduces HTML errors. Also, it means that someone other than the lead page designer can be responsible for the creation of site pages, without the designer being worried about major errors in the design of pages.
On a side note, users of BBEdit 4.0 can use a function included in the text editor to turn any prototype document into a template. Simply select Extensions >> HTML Debugging >> Format >> Document Skeleton to produce a template. This can also be accessed by pressing CTRL-OPTION-CMD-F and selecting the Document Skeleton option.
Tips
7. Think like a user
Just because you're using a 2000x1500 screen with 16 gazillion colors and T3 connection to the Internet, don't expect your users to. If your site isn't easy to view for end users, you've failed to achieve your goal, regardless of how cool your design is. The average user has a 640x480 screen, 14.4 or 28.8 modem, and often as little a 256 color video. Even if they do have an ISDN or T1 connection, they'll still appreciate a site that loads fast and gets them where they want to go in as few clicks as possible.
Part of this is using clever design to reduce the download size of pages. Every time you can reduce the size of a graphic, you've moved closer to making the perfect site. This doesn't mean you should be using tiny little unreadable graphics - far from it. It means that when you do choose to use a graphic, you should be making the best use of the download time. If you have to create graphic with large areas of white space, step back and consider what you're doing - there is something fundamentally inefficient going on.
Consistency (here we go again) can also help speed users through a site. If you use a graphic over and over (say a logo or nav bar) it adds content to pages without increasing download time. This is because once a user downloads a graphic, it stays in their cache and the browser doesn't need to download it again. For this to work, make sure they're accessing the same file or URL for the image, not just the same graphic.
Tips
8. Ask your users what they see
By asking your users what they see, I don't mean simply putting up a comment form on your site. You need to go out and proactively research how your users perceive the site. Ask friends to check out the site, then grill them on what they thought about it. Ask them to be honest. This can be valuable input on what improvements are needed. Often, users can be thrown by things such as confusing hierarchies, unclear icons, or other things a designer might never see as problem areas.
Here's a easy example of the kind of stuff I'm talking about. When you're choosing icons for a site, take the graphics, and print them out, without any labels or text on them. Photocopy them and give them to a couple of people who don't know what the icons symbolize on your site. Ask the users to write down what they think the icons might symbolize on a web site. (Don't ask them to specify this for your web site - have them do it for any web site.) If more than half the answers for a particular icon are right, you're probably OK. If not, it's time to go back to hunting through those clip art files for a new icon.
Tips
9. Content is king
In the end, all the design you do on a site is worthless if the content isn't there for users. Make sure you have good content, and that it's accessible for users. If this requires you forgo some design resources in order to provide more content, do so. If a user comes to your site, and finds the content they want, they'll probably forgive any minor design flaws. But if the content isn't there, what reason do they ever have to come back, regardless of how "cool" the design is?
Yes, design is important, and only with both good design and good content can you have a truly great site. But don't ever sacrifice content on the altar of good design. You may be happier with your design as a result, but what does that matter if there aren't any users to see your great design?
Tips
10. Don't link for the heck of it
Finally, a lighter tip to remember. Just because you can link, doesn't mean you should link. Hypermedia can be extremely confusing for users. Putting in many, many links doesn't help users find what they need. It's important to link in a consistent, well thought out manner that users can learn to navigate. If your linking is intelligent, it will allow users to "see" the path ahead of them when navigating to content. Don't make your site a maze of links - instead, make it like the supermarket, where content is organized and categorized in intelligent ways, making it easy for users to find that tidbit they're craving without wandering the aisles endlessly.
Top
Edit Tools:
Good, dependable and FREE
HTML editors are easy to come by. Chances are you're using one now, whether
you know it or not. If you're using one of the two most popular browser
(Netscape or Internet Explorer) you've got the ability to create and send
HTML based email. And, any HTML email can be saved as an HTML document
and loaded to the web.
Basic HTML (HyperTextMarkupLanguage) editors are pretty much WYSIWYG (What-you-see-is-what-you-get) and the one I like the best is the one that comes with Netscape. All pages on this site were created and edited using Netscape® Communicator 4.61 Slightly advanced users will love the publish feature which lets you upload pages to a Web site on the fly.
Image Mapping:
CuteMAP™ is an image mapping
utility designed to assist HTML authors to create click able images for
web sites. As each hotspot or clickable area is defined, HTML code,
including image coordinates, is recorded in a file which is saved and added
into the HTML code of the web page through program commands.
Image Maps are graphic images containing user-defined areas, also known as hotspots, that move a user from the image to an associated URL or page within a URL when clicked. Images may have more than one defined area, each with its own associated URL. While in most cases image maps are used to move a person to another page or URL, the link could also call up a sound file or other file type. Clickable images defined in CuteMAP™ can be pasted directly to CuteHTML™ or copied and pasted to another HTML editor using the Windows® Clipboard.
There are a ton of image map utilities out there and all of them have left me clueless as how to use them -- until I found this one. It's easy to use and the image map on this page was built five minutes after downloading and installing the program.
ZDNet Review: CuteMAP
System Requirements: Windows 95, 98, or NT
Top
Finding a Location:
Considering the state of
most family budgets, free is best. But, if you absolutely must have your
own your own domain, (www.YourSite.com), but don't want to pay an arm and
a leg for it, take a look at nomonthly.com.
It's a service that offers hosting without a monthly fee. There
is a one-time $99 setup charge and they place no ads on your pages.
A Note about ths site:
The page you are now reading
is housed on Netscape's free web server. I picked Netscape because their
banners (like the one which may be at the top of this page -- were least
offensive of the banner advertising found on any free web site. Hey, someone's
gotta pay the bills ;-)
Netscape's Site Central: Free web pages.
Just a few of the free web hosting service around today...
Even more can be found
here...
Check out thefreesite.com
for even more free sites to host your church's web pages -- freesite.com
does a wonderful job of keeping track of all the free realestate available
in cyberspace today. Each of the 50 or so web sites in its inventory has
an extensive write-up like the sample below.
50megs.com - A solid, reliable new free Web hoster that offers you a very generous 50 megabytes of space, in exchange for displaying their 468-by-60 pixel banner, (which you may display either inline or as a pop-up). Your URL here will be http://www.50megs.com/YourSite. They also offer an easy-to-use online "EZ Web Builder" that allows you to create Web pages, even if you have no knowledge of HTML. Note: no adult or warez sites allowed. (50megs.com now offers FTP access).
Top