The Information Technology Blog brought to you by 4 Ace Technologies

Showing posts with label website design. Show all posts
Showing posts with label website design. Show all posts

Tuesday, July 28, 2009

What is a Bad Design for a Website?


Robin Williams

Below are features that can make a web design look dorky. These are not just my personal opinions, but are ideas I have collected from speaking to groups around the country. Examples of many of these features and more detailed explanations of the problems and solutions are in my book, The Non-Designer's Web Book, written with John Tollett.

Backgrounds
Default gray color
Color combinations of text and background that make the text hard to read
Busy, distracting backgrounds that make the text hard to read
Text
Text that is too small to read
Text crowding against the left edge
Text that stretches all the way across the page
Centered type over flush left body copy
Paragraphs of type in all caps
Paragraphs of type in bold
Paragraphs of type in italic
Paragraphs of type in all caps, bold, and italic all at once
Underlined text that is not a link
Links
Default blue links
Blue link borders around graphics
Links that are not clear about where they will take you
Links in body copy that distract readers and lead them off to remote, useless pages
Text links that are not underlined so you don't know they are links
..(If you're not going to underline your links, please make darned sure
..that each link is perfectly clearly a link! Don't make me wander around
..with my mouse checking to see if randomly colored text is a link!)
Dead links (links that don't work anymore)
Graphics
Large graphic files that take forever to load
Meaningless or useless graphics
Thumbnail images that are nearly as large as the full-sized images they link to
Graphics with no alt labels
Missing graphics, especially missing graphics with no alt labels
Graphics that don't fit on the screen (assuming a screen of 800 x 600 pixels)
Tables
Borders turned on in tables
Tables used as design elements, especially with extra large (dorky) borders
Blinking and animations
Anything that blinks, especially text
Multiple things that blink
Rainbow rules (lines)
Rainbow rules that blink or animate
"Under construction" signs, especially of little men working
Animated "under construction" signs
Animated pictures for email
Animations that never stop
Multiple animations that never stop
Junk
Counters on pages -- who cares
Junky advertising
Having to scroll sideways (800 x 600 pixels)
Too many little pictures of meaningless awards on the first page
Frame scroll bars in the middle of a page
Multiple frame scroll bars in the middle of a page
Navigation
Unclear navigation; over complex navigation
Complicated frames, too many frames, unnecessary scroll bars in frames
Orphan pages (no links back to where they came from, no identification)
Useless page titles that don't explain what the page is about
General Design
Entry page or home page that does not fit within standard browser window (800 x 600 pixels)
Frames that make you scroll sideways
No focal point on the page
Too many focal points on the page
Navigation buttons as the only visual interest, especially when they're large (and dorky)
Cluttered, not enough alignment of elements
Lack of contrast (in color, text, to create hierarchy of information, etc.)
Pages that look okay in one browser but not in another

* * * * * * * * * *


What is a Good Design for a Website?


Robin Williams

One of the elements of good web design is a lack of the elements that make bad web design. If you stay away from everything listed on the page about dorky web pages, you've probably got a pretty nice web site. In addition, keep these concepts in mind:

Text
Background does not interrupt the text
Text is big enough to read, but not too big
The hierarchy of information is perfectly clear
Columns of text are narrower than in a book to make reading easier on the screen

Navigation
Navigation buttons and bars are easy to understand and use
Navigation is consistent throughout web site
Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
Frames, if used, are not obtrusive
A large site has an index or site map

Links
Link colors coordinate with page colors
Links are underlined so they are instantly clear to the visitor

Graphics
Buttons are not big and dorky
Every graphic has an alt label
Every graphic link has a matching text link
Graphics and backgrounds use browser-safe colors
Animated graphics turn off by themselves

General Design
Pages download quickly
First page and home page fit into 800 x 600 pixel space
All of the other pages have the immediate visual impact within 800 x 600 pixels
Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

Thursday, June 18, 2009

Image Effects

There are lots of little tricks to add special effects to images. This tutorial shows a few of the popular ones, done in Paint Shop Pro 7. Below is the image we'll be working with, taken from my free photos archive.

example

Grid Overlay

A nice addition to images, usually when used in layouts, is to add a grid layer over the top. When the image you want to add a grid to is open in PSP:

  • Go to Effects>Texture Effects>Blinds.
  • Click on the Auto Proof button so you can see what the effect will look like.
  • Make sure "Horizontal" is checked.
  • Play with the options until you find the effect you want. I set the width to 1 and the opacity to 30.
  • Click Okay.

example

  • Now the image is Interlaced. To complete the grid, go to Effects>Texture Effects>Blinds again.
  • The settings you used last time will have been remembered. All you need to do is uncheck "Horizontal".
  • Click Okay. Now you have an image with a grid.

example

Selected Areas

If you make/edit graphics often, you're familiar with the selected area look, with the dotted lines, or "marching ants". You can incorporate this look into your actual graphics.

  • Select the area you want to show as selected, using either the Magic Wand or Freehand Select tool.
  • Once it looks the way you want, press the Print Screen (Prt Scr) key on your keyboard.
  • Then press Ctrl+V on your keyboard, or go to Edit>Paste>As New Image.
  • Crop the resulting image to the area you want, and save it. That's it!

example

Semi-Opaque Text Areas

If you're using a background image that is too bright to have text put over the top, you can add a semi-opaque text area to the part you want text to be readable on, like this:

example

  • To do so, open your image, and go to Layers&gtNew Raster Layer.
  • Set opacity to whatever value you'd like. The higher the opacity, the easier the text will be to read.
  • Click Okay. Then click on the Shape tool.
  • Set your foreground color to null (click on the black arrow) and your background color to white, or whatever colour you'd like the text area to be.
  • If you haven't got the Options toolbox open, click on its icon to open it.
  • Select the shape you'd like the area to be. Make sure "retain style" is unchecked.
  • Click and drag to draw the shape on the image layer. It may take a few tries to position it right.
  • When you've got it the way you want, go to Layers>Merge>Merge All (Flatten), so you can save it as a jpeg.

Tuesday, June 16, 2009

5 Beautiful Icons Set For Web Designers

A Must Visit Link:

http://www.instantshift.com/2008/09/24/5-beautiful-icons-set-for-web-designers/

Material extracted from the above site:

Icons are the basic requirement of any web related projects and good icons are like a treasure for web designers.

Being a successful creative web artist has a lot to do with the way you work. Sure, you can’t teach good design in some lessons or you can’t create icons for your daily needs, but it never hurts to pick a few free icons which are always available free to grub.



1. Function Icon Set

Function icon set is a great collection designed by Liam McKay. All icons are free for personal non-commercial use.

2. Web Development Icons

Icojoy has beautiful free icon sets including web development icon sets, pixel icon sets, rss icon sets & smiley icons.

This is the 4th part of their web development icon sets. Click here to find their all free icons.

Web development icons is a set with 60 free icons in web 2.0 style (24×24). These icons are free to use in any kind of project unlimited times.

3. Monofactor

Monofactor is a beautiful set contains 25 scalable Illustrator format icons. You are completely free to edit, change and/or directly use the icons in your site and in any kind of your projects.

4. Aquaticus Social Icons

Aquaticus is a beautiful social icons set designed by Jwoloh (60×60, 48×48, 24×24, 16×16):

5. Simplicio

Simplicio is a simple looking but a quality & free icon set.

The set has 78 icons & the download package consists of ICO, PNG & AI files.

Wednesday, May 13, 2009

Color Combination Guides for Web Design

http://www.allwebdesignresources.com/colorschemescombinations.html

http://www.allwebdesignresources.com/webdesignblogs/graphics/webdesigncolorcombinationsguide/

http://www.allwebdesignresources.com/colorusageinwebdesign.html