What Makes A Good Design On The Web?
One of the elements that makes a good design on the web is using a lack of elements that make up a bad web design. If you stay away from the bad elements; chances are you might have a pretty good website.
Backgrounds-Using default gray colors, or color combinations of text and background that make the text hard to read. Very busy distracting backgrounds also make the text very hard to read.
Text-Text that is too small to read, text crowding against the left edge of your page or text that stretches all the way across the page. Paragraphs that are in all caps, paragraphs in bold, or type in italic ,in all caps, bold and italics all at once. Another bad element is text that is underlined and is not a link.
Links-Default blue links or blue link borders around graphics, or links that are not clear about where they will take you. Links in a body copy really distract readers and then lead them off to remote or useless pages. Links that are not underlined are frustrating as the user may have to wander around the page to check to see if randomly colored texts are links. And lastly, links that simply do not work!
Graphics-Large graphic files that take forever to load will detour your visitors and they will go elsewhere. Meaningless or useless graphics or thumbnail images that are nearly as large as the full-sized images they link to. Using graphics with no alt labels, or targets. Do not use graphics that do not fit on a screen. Do not create an entry page or home page that does not fit within the standard browser window (800 x 600 pixels).
Tables-Do not use borders that are turned on in the table, or use tables as design elements, especially with large borders. Tables are also not accessible to blind people, ideally tables should be converted into a CSS file.
Blinking & Animations-Anything that blinks, especially text will once again detour the user from continuing to view your page. This also includes multiple things that blink such as rainbows, and rule (lines). Any animated “under construction” signs, especially of little men working. Animated pictures for email, or animations that never stop. This includes multiple animations that never stop.
Junk-Junk such as counters on the pages, or junky advertising. Having too many or little pictures of meaningless awards on the first page. Having to scroll sideways, or a frame with scroll bars in the middle of the page, including multiple frame scroll bars in the middle of the page. Complicated frames, too many frames, or unnecessary scroll bars in frames.
Navigation-Complex or unclear navigation. Orphan pages such as no links back to where they came from or identification. Useless page titles that don’t explain what the page is about. No focal point on the page, or too many focal points on the page. Using navigation buttons as the only visual interest especially when they are large, or cluttered, or do not have enough alignment of elements. Pages that look okay in one browser, but not in another. Lack of contrast such as color, text, to create hierarchy of information etc.
Here are some good concepts and key elements to keep in mind when making a good design on the web:
Typography-Fonts for electronic material. Usually using a serif font for the heading and a sans serif for the content. Use of CSS Stylesheets to define the fonts when viewing on the screen, i.e. Arial when viewing, and when printing, Times New Roman and removing all the images etc., for handhelds. Make sure you text does not interrupt the background or the text is big enough to read, but not too big. Make sure the information and hierarchy is perfectly clear. The columns of text are narrower than in a book to make it easier to read on a screen. Stick to the four basic rules of typography:
Repetition:
Repeat visual elements of the design through the piece. You can repeat colors, shapes, textures, spatial relationships, line thickness, fonts, size, graphic concepts etc., This develops organizations and strengthens the unity.
Alignment:
Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page This creates a clean, sophisticated, fresh look.
Proximity:
Items related to each other should be grouped close together. When several items are in close proximity to each other, they become on visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the read a clear structure.
Contrast:
The idea behind contrast is to avoid elements on the page that are merely similar. If the elements are not the same, then make them very different. Contrast is often most important to visual attraction on a page – it’s what makes a reader look at the page. Contrast is always a good approach to attract attention to your design by creating elements on the page that do not look similar, and hence can easily be identified by the human eye. You may achieve contrast by using different colors, line thicknesses, variable type sizes and fonts shapes, and manipulate space by creating it and leaving areas of the page blank (white space).
Navigation:
Make sure your navigation buttons and bars are easy to understand and use and are consistent throughout the website. Navigation buttons and bars provide the visitor with respect to where they are, and what page they currently are on. If frames are used, make sure they are not flashy. If you create a large site, make sure the site has an index or site map.
Links:
Make sure your link colors coordinate with page colors and that they underline so that they are instantly clear to the visitor. Do not include links that go ‘nowhere’ or are broken links.
Graphics:
Make sure your graphics and buttons are not big and dorky. Make sure all graphics has an ‘alt’ label to them and every graphic link has a matching text link. Make sure that your background and graphics use are browser-safe colors. If you have animated graphics, make sure you have them turn off by themselves. Make good use of graphic elements (photos, subhead, pull quotes) to break up large areas of text. Try and use .GIF or .JPEG file formats for your graphics. Although .GIF’s would be the smallest format, the difference between the .GIF and JPEG formats would be so slight, that you can’t really conclude that a .GIF would be smaller file format.
General Design:
Create your pages so they download quickly. The first page, the home page, fits onto a 800 x 600 pixel space. All of your other pages should have the immediate visual impact within the 800 x 600 pixels. Every web page in the site should look like it belongs to the same site, such as repetitive elements that carry throughout the pages. Adhering to Standards is best practice. There are certain things people expect, and not giving them causes confusion, for example, if text has an underline, you expect it to be a link. Keeping your design consistent is about being professional. Inconsistencies in a design are like spelling mistakes in an essay. They just lower the perception of quality.
Clarity: (Sharpness)
Keeping your design crisp and sharp is super important in webdesign. When it comes to clarity, it’s all about the pixels.
Layout and Design– Good pages don’t overuse inline images for their own sake, and have a consistent layout and organization. The more extensive the page or ‘pages’, the more important it is to have navigational aids like “what’s new” pages and tables of contents. Don’t go overboard with slow-loading graphics, optimize the graphics you do use by making them smaller and using fewer colors.
Depth:
The best Home Pages always give you a sense that there is something beneath the surface, and that exploration will be rewarded with new discoveries This doesn’t necessarily mean dozens of different pages; it’s a matter of using hypertext in an intelligent way to expand the impact of the material you do have.
Creativity:
HTML markup language gives everyone creating Web pages the same set of basic tools. All your pages should be saved as a HTML format, as that is now the standard of ‘Good Home Pages’. Combine those tools in new and innovative ways, and give Web surfers a reason to check them out rather than some other, similar pages. The Web gives you an opportunity to have your work viewed by literally thousands, or even millions of other people around the world — make the most of it!
Personality:
A home page is your window on the Internet It should give people viewing it a sense of who you are. This can mean the obvious, like biographical information, or more subtle forms of content that demonstrate your interests and outlook on life. Don’t feel that you have to do the same thing some that other “cool” pages did; make your home page YOURS!