Greg's Web World
My Strategy:
Design Disasters:
Text Blunders:
Image Issues:
visualization
implementation
evaluation
go live
results of implementation
results of evaluation


The Core - My first rule for designing is always cater to the user. My strategy achieves this goal and ensures your design will be as effective as it can be out in the real world.
  • Visualization - This is the brainstorming and idea phase, involving everything from finding appropriate colors to probing weaknesses and strengths of competitor's sites. top

  • Implementation - Next is the building stage. Images are optimized and a master template is made from scratch from which all pages are made.

    Throughout this phase the design is tested and compared on different browsers, screen sizes, and color formats. The design must render consistently in order to pass. top

  • Evaluation - When all seems done, the site is tested by people with no involvement or familiarity with the project to ensure usability. This reveals any oversights in the design.

    If a problem is pointed out, that aspect is re-thought and adjusted as necessary. top

  • Realization - When the site is complete, it is transferred from its trial arena to its actual home on the web. If any bugs or problems surface they are taken care of as necessary. top


Web design mishaps - Obviously, as many opinions exist on web design as there are web designers. I try to take the level-headed approach and design for the average guy, while not imposing annoying design features on the advanced or novice web users. You can't satisfy everybody, but you can go a long way toward creating a pleasant web experience for most people.


Design Disaster #1 - Having to scroll horizontally to see the whole page. This is the result of dot-com companies with bloated budgets who buy their designers oversize monitors, thus encouraging them to design pages that fill up the entire screen, when in actuality the average surfer uses a screen size of 1024x768 or below and cannot see the whole page at once. I think desigers ought to try to accomodate an 800x600 screen. top

Design Disaster #2 - Meta tags that redundantly reload the page. This is done to foil users who hit the back button. The effect is that when they try to go back they land on the same page. Evidently it is hoped that this will cause them to stay on the site. Fat chance. top

Design Disaster #3 - Too much blank space. The very first screenfull of content is what makes or breaks a web site—it is valuable space to the wise web designer. Newspaper editors know this, they put their best stories above the fold on the front page and none of the space is wasted. top

Design Disaster #4 - Scripts that open new windows when the page loads or unloads. Pop-up and pop-under advertisements, while annoying, are an excusable sin because web designers need to feed their families. Pop-up-on-exit windows, on the other hand, are used by web hooligans and those sites with *ahem* less than respectable binary content. top

Design Disaster #5 - Unnecessarily long downloads. Dot-Coms with ultra-fancy websites have either died or changed their strategy because users will simply not wait five minutes to see a slick effect. The 28.8 modem speed still prevails in the general populace and their time is precious. top

Text Blunder #1 - Stringing text from edge to edge across the page. Long, marginless lines are tiresome to follow and readers lose interest. Wider margins or columns would break up the monotony. top

Text Blunder #2 - Centering big blocks of text. Each time a line ends, the eye searches for the beginning of the next line. This tiny task is easy with a justified left margin, but if the eye doesn't have that constant reference point it can be distracting. Poetry can be centered. top

Text Blunder #3 - Peppering blocks of text with too much bold, colored text, and especially links. This can disrupt the flow of thought you are trying to establish because the user has to decide whether to follow the link. Its hard enough to read web pages anyway. top

Text Blunder #4 - Writing with all caps or all boldface too much. You sound like you're yelling and you leave yourself nowhere to go when you really want to emphasize your point. Let your bold be bold and your caps be caps. top

Text Blunder #5 - Placing text over a high-contrast background. I've seen a few sites do this. The tiled background image has details that obscure text so you have to strain to read it or you can't read it at all. top

Text Blunder #6 - Bad grammer, bad spelling and typing error's. This ought to be a no-brainer however I run across a promotional site for a book, with this problem. It was also obvious that the creator of teh site was also the authorof the book. Who in they're right mind would buy the book after seeing there site? top

Image Issue #1 - Using a very large image as a small image. Occasionally someone will put a seemingly small image on their page. Users fidget while the tiny thumb-nail takes more than its share of time to load, when in actuality the image is much larger than it appears to be. The designer, probably using HTML authoring software, merely resized the image to look small. top

Image Issue #2 - Using the wrong file format for an image. Using GIF when JPG should be used results in unnecessary dithering (speckling) and/or oversized files. Using JPG when GIF should be used results in blotches, patches, and seams on what should be smooth edges and areas. General rule of thumb: Use JPG on photographs, GIF on logos and other graphical images. top

Image Issue #3 - Anti-aliasing a GIF image for the wrong background. Aliased computer images have jagged, abrupt contours, hence anti-aliased images. This means that the edges are blended slightly so they look smoother. This blurred edge can spell disaster if the background used on the graphics program is different from the background used on the web page. The end user will see a speckly edge surrounding the image where it attempts to blend into its original background. top

Image Issue #4 - Logo images with aliased text. Mentioned above, "aliased" refers to the undesirable, jaggy edges that computer images often have. The first thing a designer usually does is put a logo or caption at the top of the page. While the quick and dirty way to do this is to set it as a heading with HTML text and tags, a more elegant approach is to use an image. Advantages are you can stylize and anti-alias the text very easily with graphics software, the disadvantage is that images take time to download. Since smart designers consider download time to be currency, an aliased logo would be a raw deal since you're not getting your download time's worth out of the image. top

© 1999-2001 by greg