Identifying web design problems, using the right image formats.

• Planning a web site
• Creating efficient content driven designs
• Combining images and color effectively
• Benefits of HTML4.0 compliant programming
• Identify structural problems
• Applying CSS styles and techniques
• Critiquing site’s usability.
• Navigation Techniques.
• Create Accessible web sites
• Design for Different Resolutions
• Use Browser Detection Script
• Write Effective Meta Content

Common Problems in web Design (Design and content Problems)

• Identify common design and content problems.
• Explore the importance of developing your own style guide.
• Checking Visual aesthetics of the site is the first thing people look at.

Be aware of Amateur design approaches like:

• The Visible
• Overuse and poor use of color
• Excessive use of Fonts faces
• Unnecessary Images
• Universally centered text
• Overuse Horizontal Rules

The Invisible (Code)

• HTML learning to write good code takes time and experience.
• Html Codes may be full of nesting errors, old html tags, and disorganized.

How to avoid fundamental problems?

• In design there are few absolute rules. It all depends on the site’s purpose.
• Avoid Tiling Background Images unless images is a simple band of color.
• Background images make text unreadable. Although, smart use of a background image may be beneficial for brand or Logo watermarks, or advanced designs.
• Black Backgrounds, White Text: Avoid using black backgrounds, white text. It can strain the eyes. Readability should come first. Readers eyes are usually better of with lighter background and dark text.
• Background Music: Background music may be an unnecessary nuisance if out of controlled. Do not make it automatically on. Let the user control it. Think that the user may not like your music style. Music may slow your viewer’s browsing experience. Will it keep visitors in the site, or make them leave.
• Stop using browser buttons pointing to best resolutions or browser version required. No longer needed.
• Minimize animated Gifs. Well designed animations can be successful add-on, draw attention, beneficial if used to advertise. However, overusing can lead to dizzying and slow your download time.
• Looping animations can distract and annoy. Instead, pause the last frame of the animation for ten seconds before repeating, and set the looping to stop after 3 iterations, why continue?
• Avoid Under constructions signs, just wait till you finish making the website to publish it. Who wants to see an unfinished website?
• Hit Counters are unnecessary to the regular end user, not useful to visitors, misleading. They can easily be manipulated by web designers.
• Although, sometimes useful to clients, advertisers, administrators, to determine path information, rotating ad views, and how often users to the website and where they click, usually this information is of lesser interest than unique page views, new members orders, and anyway should not be shown to just anybody.

 

 

Downloads:

• Indicate the size of the file and file type. Keep user informed with the estimated download time. (14.4, 28.8, 56K, cable, T1, etc.).

Excessive use of colors:

• Don’t get carried away with color. Color is a powerful tool which requires special attention. If used improperly, they can distract and confuse. Use logical combinations and be cautious. Be aware of the unique purpose for using the colors you want.

Excessive use of Fonts Faces

• Fonts also have a huge impact on design. Too many Fonts can muddle design and make text difficult to read. Fonts should be used consistently, and with the primarily goal OF READABILITY.

Splash Images

• Avoid using Splash images, unless the website is for purely visual experience and not content driven. Use splash only for entertainment or artistic purpose, and don’t use when information is the main goal.

Pop-up Windows

• Avoid pop-up windows, they are irritating, commonly used for advertising, or irrelevant information. Must users will shut them down immediately.

Inflexible Design:

• Don’t ask visitors to adjust their browser, or download latest browser versions or a special pluggin. You can recommend it, but make sure you remain within the standard viewing norms, except if you require the specific update in for the intended experience.
• Development teams prepare a style guide with things to do and not do in order to establish design consistency. Develop a list of what to do and not do.
• Every design project should have its own style guide created in conjunction with the client to establish a consistent look and feel.
• Then there is the designers’ style guide, which is personal to every designer or team.
• Establishing you personal style preference and procedures and what works and what doesn’t will take time and experience. Get a few things out of the way, by keeping a list of preferred practices.
• There is no absolute right or absolute wrong.
• The focus should be on what attracts and retains users, providing usability and allowing them to get what they came for.

Evaluating a Website

Create a list of things you like and dislike about a website source. Evaluate the:

• Appearance
• Content presentation
• Page layout
• Colors used
• Other items.

From this impressions, build a list of things you like.

Pay Close attention to:

• How images are used
• Are images well designed?
• Do they communicate the intended meaning?
• How is the content presented, is it easy to read, informative or irrelevant?
• Are the links well organized, are the links texts adequately presenting the content of the destination page?
• How is color used? Does it add to the overall appeal and usability, or is it distracting?
• Is the design logically structured? Are there any unnecessary elements, which don’t provide any added value and would be a waste of space?
• Is the layout of each page making the content easier to access and visually organized?

 

 

Only with hands on experience will you evolve and solidify your skills.

Common sense is not always easy to see.

• Common Design problems: Tiling background images, black backgrounds with white text, background music, browser buttons, animated GIFs, hit counters, and excessive use of different colors and fonts.
• Importance of developing a style guide: A designer's style guide (not to be confused with a site's style guide) provides a framework in which to create consistent, effective Web sites. For the new designer, it's important to record and review common mistakes in design and content choices that are ineffective or distracting.
• Browser canvas: The space a browser uses to display Web content.
  Browser offset: The default margin between the edge of the browser window and the page canvas.
  Deprecated tags: Those HTML tags and attributes that are now discouraged in favor of style sheets or other element definitions.
• DHTML: A family of technologies, including CSS, HTML, scripting languages like JavaScript, and the document object model (DOM), that together allow you to create dynamic and interactive sites.
• Dithering: When a high color image is reduced to the 256 color palette, the image will usually appear speckled. This "dithering" attempts to simulate the original image by blending similar and available colors within the 256 color palette.
• DOCTYPE: A declaration in HTML documents that defines the DTD (Document Type Definition) in use for the document.
• Empty elements: Those HTML elements, like <br> and <hr>, that have traditionally prohibited the use of a closing tag. As non-containers, they don't have to be closed. If you want to make your documents XHTML compliant, you'll need to add a forward slash after the element name to "close" the tag.
• font-family:Refers to a specific font face and all of its variations.
• Generic family: Refers to a type of font; for example, monospace, serif, sans-serif, cursive, or fantasy.
• GIF: Graphic Interchange Format. The most common image file format on the Web today, GIF images support 8-bit color with a maximum of 256 colors. They are typically used for images with flat color, like image text, logos, and line art.
• Hierarchical structure: A "flowchart"-type structure that delineates the hierarchy of importance, or simply from the most general to the most specific.
• JPEG: Joint Photographic Experts Group. JPEGs are the best format for photographic images that contain more than 256 colors. JPEG images support 24-bit color with a maximum of over 16 million colors.
• Linear structure: Any structure that moves in a predictable, linear fashion, the way a typical book reads.
• Page weight: Describes the total file size for a given page, including all graphics, text, scripts-everything.
• PNG: Portable Network Graphic. Developed in 1995 by Thomas Boutell, the PNG format supports Indexed color, 48-bit color images, the Alpha channel transparency with true color and grayscale images.
• Replaced elements: Images and objects are referred to as "replaced" elements because their content doesn't exist in the document itself; the tag is "replaced" by an image or object that is stored outside of the document.
• Validation: An optional but important part of Web authoring, validation services allow you to locate coding errors that might produce inconsistent results in some browsers, and also help you to become a better developer by pointing out such things as nesting errors, syntax errors, and DTD mismatches. Validation usually requires that you specify which DTD you want your documents to conform to; HTML transitional, HTML strict, and so on.
• Web structure: A more loose site structure that allows the user to navigate in whatever direction that might be of interest. The content structure of a site like this would typically involve several independent content areas, rather than a series sections that flow in a particular direction.
• WYSIWYG: Pronounced "Wizzy-wig" -What You See Is What You Get. This term is typically used to describe software that shows your results as you work.
• XHTML: A strict version of HTML that is likely to grow in preponderance on the Web-fast. XHTML is an application of XML that will make Web documents leaner and viable in multiple client devices.

Please send your comments & requests.

Fullname:

Telephone:

E-mail:

Product Name and Message.