Web Page Design Overview
This introductory-level article provides checklists to help with planning a new website. Tips include the effect background colors can have on site visitors and page length considerations such as using shorter pages to break up text by topic or using longer page lengths for ease of printing.
Designing a web page is a creative process. The page gives you the opportunity to express yourself or convey information using an interesting array of options including text, graphics, photos, video, sound, and animation.
Like most creative endeavors, however, the process is not linear or step-by-step. Therefore, it's best to understand the elements necessary to create a page and then find the way that works best for you.
Your page will change many times as your idea evolves into the final product. To begin, don't be afraid to keep it simple. Create a page with just text and a graphic to get a feel for how it all works.
So how to start?
Pick a Starting Point
So where do you begin? It is best to begin by planning and exploring. See web options in action by browsing the web and looking at what others have done.
Once you have an idea for the page you would like to create, you can get down to work and begin to create the text file that will be the foundation for your page. The text file will contain the HTML codes that make it all happen.
Having a basic understanding of how the HTML codes work is very important. Even if you use a web editor to create your page, you will, at some point, need to correct the coding or go beyond the capabilities of the editor to customize your page. If you know how the codes work, the task won't seem so daunting.
Evaluate your Progress
Check the progress of your page as you go along by saving the file and then opening it in a web browser, such as Netscape. You don't have to be connected to the Internet to view your page.
Using Graphics
The most memorable elements of a web page are often the graphics. In order to use graphics on your page, you must consider how to acquire them and also understand the file formats and limitations dictated by the web.
There are a number of ways to acquire graphics for your page. You can create them yourself, scan them, or buy commercial clipart. You can also copy graphics from other web pages, but this should be done only if you have permission, since most graphics on the web are under copyright protection.
Consider following methods for creating and designing your web page:
• The Process of Creating a Web Page
• Designing Your Site
Web Page Design Overview - The Process of Creating a Web Page
1. Formulate your idea
Why do you want a web page?
What information would you like to present?
2. Explore the options
See what kinds of elements you can incorporate in your page by looking at other pages.
3. Gather your materials
Take inventory such as text and graphics that you can use.
4. Create the HTML coding
Behind every web page there are HyperText Markup Language (HTML) codes that makes the page appear the way it does.
5. Check your progress
As you develop the coding, open Internet Explorer to check your progress.
6. Transfer the files at one of the web-hosting site server
To make your page public, your HTML files must be uploaded to a web-hosting site server.
7. Test, tweak, and publicize it
Open your web browser, and go through your page to make sure all the elements appear properly and test all links to make sure they work.
Web Page Design Overview - Designing Your Site
Topics to be covered:
I. Content
II. Layout
III. Text
IV. Graphics
V. Backgrounds
VI. Temptations
VII. Finishing Touches
I. Content
Select your content carefully
Content is the most important aspect of your website. Keep in mind that people come to your site to get information. No matter how many hours you've spent scanning or animating graphics, if you're not delivering the content that people want, they won't stay very long and they probably won't return.
Define your purpose
Before you start to plan your website, determine why you're developing a site and what you hope to achieve. After you design your site, or if you already have a site, look carefully at your site and ask yourself the following questions:
Why does this site exist?
Who am I trying to reach?
Can my visitors easily find what they need?
Why would my visitors return to this site?
Update your site frequently
A website with a schedule of events from last year looks unattended. If your site features up-to-date information, include the date of your update.
Display important information prominently
Don't bury important information in long paragraphs or in pages embedded deep in your website.
II. Layout
Lay out the text first
Before you concern yourself with graphics, you should lay out the text of your web page first. The content and the layout of the text should then suggest the types of graphics you need and the best placement for them.
Use long pages for printing or downloading
Printing or downloading one page is easier than handling several pages. You can help your visitors read through a long page by creating a clickable table of contents at the top with internal links to specific sections on the page. You can also include a hypertext link, such as "Return to top of page," after each topic. The drawback of using long pages, however, is that they tend to go on-and-on. Also, a page of 40 Kilobytes (KB) or more may take a long time to fully appear on the screen.
Break up topics into shorter pages
To do this, design one index page with links that jump to shorter pages. Each page should treat one subject only. While shorter pages offer the advantage of less viewing time, they are harder to print than longer pages.
Provide navigational tools
If you have a complex site with multiple pages, you may want to have one- or two-word designations that allow your visitors to jump to other sections of your website. The most common links include a "home" or "top of page" link and "clickable" images or buttons.
Include links to other sites
The power of the web is its ability to link to other pages, but be careful. When a visitor arrives at your site, you don't want to send that person away too quickly. Also, remember to frequently check outside links to make sure that they still exist and have not moved.
Use descriptive page titles
The title of your page displays at the top line of your web browser. The title is important because it often shows up in search engines such as Google and as the bookmark name. Make sure your page title accurately describes your site by including keywords that people might use to find your page.
Web Page Design Overview - Text and Graphics
III. Text
Condense your text
Edit your text to the minimum that you need to get your message across. Use white space to break up areas of text and avoid sections that contain only long paragraphs.
Use headline typefaces sparingly
Normal typeface looks more modest. Otherwise, you risk overkill. Don't use all caps or overuse the bold and italic styles.
Make sure your text is readable
Whatever color or texture you choose for your background, don't let the background overwhelm the text. Instead, select a background that subtly complements your text. If your visitors can't read the text, they won't stay.
Choose a high-contrast color for your text
For example, use light text on a dark background or dark text on a light background. Avoid using green text on a red background or vice versa. Red and green have the same value (lightness or darkness), so people who are red/green color blind cannot differentiate between the two. If you expect people to print your page, consider using standard black text on a white background.
Be consistent
Don't mix and match fonts or colors. Decide on the font style, size, and color and use the same style consistently, even on subpages. The same guideline applies to textured and colored backgrounds. They can unify your pages as long as you are consistent with your choices.
Proofread your text carefully
Nothing destroys the professional look of a site more than typos and spelling mistakes.
IV. Graphics
Avoid using large images
The larger the image, the longer it takes to load the page. The longer it takes to load the page, the more likely your visitors will go somewhere else.
In general, you should avoid using a graphic larger than 30KB. You should also try to limit the total size of your images on one page to less than 40KB. Web browsers are usually set to automatically display images. Don't make your readers wait too long to see them.
Web Page Design Overview - Backgrounds, Special Effects and More
V. Backgrounds
Choose background colors carefully
Many websites today use a simple white background so that text is easy to read, but you can choose any color. Be cautious, however. Research on color has shown that color can affect how people perceive information. For example, royal blue represents a conservative or traditional approach while gray evokes a feeling of being uninvolved. Red increases blood pressure and heart rate and indicates an urge to achieve results and succeed. Also, you should avoid using bright colors, such as neon tones, because they can be hard to look at for too long.
Avoid large backgrounds
There are lots of sites on the Internet where you can get free backgrounds for your site. Be careful though about selecting one of these backgrounds. Some are "too busy" and distracting and many are large and, therefore, take a long time to load.
VI. Temptations
Use special effects sparingly
This is one instance where the old saying "less is more" applies. Have you ever browsed a page with several blinking text items or animations going on simultaneously, or a page with five or six frames, each tiled with a different background image? Then you know that too many special effects can be irritating. Use special effects, such as frames and animations, conservatively and tastefully to enhance your web page. You don't want to overwhelm or annoy your visitors.
Avoid copyright violations
The current copyright laws and their application to the Internet continues to be a topic of debate. For example, just because art or information is on the Internet, it does not mean that you have the right to copy it. Also, you cannot copy text or images from books, magazines, or other sources and place them on your website. Even using clipart that you have purchased for print may be illegal for use on the web.
Instead, create your own text and, if possible, draw your own graphics. Also, consider purchasing clipart that you can use on the web.
VII. Finishing Touches
Add horizontal lines
Horizontal lines are effective design elements that you can use to separate different elements on a page. Lines don't take any extra time to download, and you can vary their length and width.
If you wish to spice up your page, consider using color lines. They take a few seconds to download, but they can add a strong design element to your page, especially if you coordinate the lines with the color scheme of your page. Avoid using different types of lines on the same page, and be careful -- too many lines can be distracting.
Include bullets
You can use bullets to set off lists or to break up the page visually. Color balls, arrows, and pointers are also available, but remember, a little color goes a long way.
Use markers
If you want to draw your viewers' attention to new items on your page, you can add colorful markers that identify the items as "New" or "Updated." Again, don't overdo it -- one or two markers per page is sufficient. More than that defeats the purpose.
Include an e-mail address link
Invite your viewers to contact you by including an e-mail address link on your page. This link will take your visitors directly to a window where they can type and send you an e-mail message.
This is how you can design your site. So what are you thinking? Get set go.
No comments:
Post a Comment