Web Design Basic

Web design uses all the same elements as print design. You need to explore the space and layout, handle fonts and colors, and put it all together in a format that puts your message across. These resources will help you learn Web design whether you are already a professional Web developer or just getting started in the Web arena.

-Elements of Good Design
-Fonts and Typography
-How to Use Color
-Graphics and Images
-Web Layout Basics
-Tackling Web Navigation
-Accessibility and Usability
-Web Design Software

Elements of Good Design
Good Web design is the same as good design. If you understand the elements that make up good design, you'll have a Web page that works well. These elements of good design apply whether you are writing a Web page, a business card, or a t-shirt and once you understand them you'll have the skills to be a great designer.

Fonts and Typography
Fonts are the way your text looks on a Web page. And most Web pages have large amounts of text. When you're thinking of design, you need to think about how the text looks on a micro-level (the font glyphs, what font family, etc.) as well as the macro-level (positioning blocks of text and adjusting the size and shape of the text). These resources explain how to work with fonts on Web pages.

How to Use Color
Color is everywhere. It's how we dress up our world and how we see things. Color has meaning beyond just "red" or "blue" and color is an important design element. These color resources teach how to use color effectively in Web design.

Graphics and Images
Graphics are the fun part of most Web pages. As the saying goes "a picture is worth 1,000 words" and that's also true in Web design
Adding Images to Web Pages
Images add interest and excitement to your Web pages, and they are fairly easy to add. The tag has only two required attributes: src and alt. The src attribute tells the browser which image to display, and alt tells the browser what to display if it can't show the image.

However, there are two other attributes that it is strongly recommended you include:

width
height
The width and height attributes tell the browser how big the image is. This allows the Web page to render more quickly, as the browser can allocate space for the image and then move on to the rest of the page while the image downloads.
Hint on Finding the Width and Height:
If you load the image in Netscape, the width and height are displayed in the title, "GIF image width x height pixels - Netscape". Internet Explorer displays the height and width that are specified by the HTML not the actual image size if you right click on the page and choose properties.
The Tag
alternative description of the image

Comments

Post a Comment

Popular posts from this blog

Money Management

I have recently noticed that you have reduced you trading activity and you are hardly opening positions. Even though you recently encountered some loses on your account, you shouldn’t let it reflect your trading capabilities. Most new traders quickly become discouraged due to a few losses, giving up on this potential market. To help you develop a strategy and allow you to overcome problems experienced by beginners, I have listed a few points below that I would advise you to take into consideration, especially as they helped me tremendously, when I first started to trade. STEP 1: Motivation and Determination Remember that all successful traders start from scratch. No one is born a trader and all novices go through a learning curve overcoming losing trades. The difference between a long term profitable trader and an unprofitable one is motivation and Determination. STEP 2: Get to Know your Strengths and Weaknesses When starting out, make a list of your strengths and weaknesses. F...
Read more

Accessible Web design

To be accessible, web pages and sites must conform to certain accessibility principles. These accessibility principles are known as the WCAG when talking about content. These can be grouped into the following main areas.[3] * Use semantic markup that provides a meaningful structure to the document (i.e. web page) * Semantic markup also refers to semantically organizing the web page structure and publishing web services description accordingly so that they can be recognized by other web services on different web pages. Standards for semantic web are set by IEEE * Use a valid markup language that conforms to a published DTD or Schema * Provide text equivalents for any non-text components (e.g. images, multimedia) * Use hyperlinks that make sense when read out of context. (e.g. avoid "Click Here") * Don't use frames * Use CSS rather than HTML tables for layout * Author the page so that when the source code is read line-by-line by user...
Read more

Web Design Basic 2

Web Layout Basics When people think of Web design often what they mean is the layout. Layout is the organization of elements on a Web page. First you need to start with basic design principles. Once you understand them, you can move through how to place elements on your Web page. These links and resources will take you through the steps to learn good Web layout design. Tackling Web Navigation Navigation is how your customers get around from one page to another on a Web site. Navigation provides movement and gives your customers the chance to find other elements of your site. You need to make sure that the structure of your Web site (the information architecture) makes sense so that your customers aren't forced to simply use search. Accessibility and Usability Accessibility and usability are often seen as a detriment to Web design, but a good designer focuses on making their site useful to as many people as possible. The links below take you through the basics of making an ac...
Read more