Terminologies:

TERMINOLOGIES:

WEB BROWSER

It is a software program that allows for the display of web pages. Examples are Microsoft Internet Explorer, Mozilla Firefox, Netscape Navigator.

SEARCH ENGINES

It is a software program that find web sites and web pages. Typically, it also provides directories, which classify web pages into such categories as arts and entertainment, jobs, health and fitness, travel, news and media.

PORTALS They are websites that offer not only search services but also e-mail, chat rooms, news and sports , maps and more. Examples of portals include Excite, Lycos, AltaVista, and Yahoo!

IMPACT OF THE INTERNET

Communication

Education

Design your website so it communicates TRUSTWORTHINESS, CURRENCY and VALUE.

To develop a formal educational website, you must understand effective approaches to teaching and learning online and methods to overcome barriers to online learning, such as attention span and lack of discipline. You must include elements to successfully convey content, provide feedback, maintain records, and assess learning.

www.howstuffworks.com

www.friendster.com

IMPACT OF THE INTERNET Entertainment

Business

To develop an entertainment element on a website, identify what would appeal to your audience and what type of multimedia should be included.

To develop an e-commerce website, determine the features that would make the product or service desirable or necessary.

www.abs-cbn.com

Gain an understanding of the methods for building e-commerce capability into webpages, such as forms for customers to fill out. You also need to understand the role and support your OSP must supply to make e-commerce function on your website.

TYPES OF WEBSITES PERSONAL

TOPICAL/ORGANIZATION

Allows you to advertise your employment credentials, meet new friends, or share a common interest or hobby with fellow enthusiasts.

It promotes member’s accomplishments or to encourage support and participation.

Do not create webpages that include personal information that can be misused.

Topical website devotes the entire website in discussing a particular topic such as black and white photography, photo galleries and online resources.

TYPES OF WEBSITES

COMMERCIAL

Allows you to promote and sell a product and service. When designing a webpage to promote and sell products, make sure you include the benefit associated with each feature you list.

WEB DESIGN RESEARCH

1. Develop a website that stands out» Explore other websites and identify those that impress you.» Describe design elements that contributed to that positive impression.» Identify the means by which information was presented to you – photos, text, video, sound.» Describe what made the information easy to find.» List the reasons you would want to return.

WEB DESIGN RESEARCH

2. Identify your audience» Are the visitors to your website members of your audience?

» How did they come to your website – surfing, by means of a search engine, as a result of your website promotion?» Did they find what they were looking for on your website?» Was there anything they did not like about your website?» Will they visit your website again? Why or why not?

WEB DESIGN RESEARCH

3. Incorporate new web technologies

» What specifically can this technology do to further the purpose of my website?

» Will it appeal to my audience?

» What will it cost to put it into action?

» How soon will I see a return on investing in this new technology?

» What impact will adding this technology have on security and other website elements?

WEB DESIGN ROLES

WRITER/EDITOR

You create and revise the text that visitor read when they visit a website. You must write specifically for the web environment and a targeted web audience. To fill a web writer/editor position, an employer frequently looks for a highly creative applicant with a liberal arts background and demonstrated print and Internet writing experience.

WEB DESIGN ROLES

MULTIMEDIA DEVELOPER You design and produce animation, digital video and audio, 2D and 3D models, and other media elements to include in a website. This role demands knowledge of and experience with sophisticated hardware and software, as well as art theory and graphic design principles.

WEB DESIGN ROLES

ARTIST/GRAPHIC DESIGNER

You create original art such as logos or stylized type, and frequently the overall design concept for a website, including the way it looks and feels. You may also prepare photographs and other graphic elements and redesign print publications for the web environment. This highly creative role demands experience with high-end illustration and image editing software.

WEB DESIGN ROLES

WEB PAGE DESIGNER

Your primary role is to convert text into HTML documents. Your responsibilities may include graphic design and website setup and maintenance. You must communicate effectively, know HTML thoroughly, and have graphic design talent and some programming skills beyond HTML. This role requires a solid understanding of how web pages and browsers interact.

WEB DESIGN ROLES

WEB PROGRAMMER

Must be highly skilled in advanced programming languages, such as Practical Extraction and Report Language(PERL), Java, JavaScript and Virtual Reality Modeling Language(VRML).

WEB DESIGN ROLESWEBMASTER

Staffing and other resources devoted to developing a website. He assumes all the roles. He oversees a web development team comprised of a writer/editor, artist/graphic designer, multimedia developer, web page designer, and web programmer. He must have a broad range of skills and knowledge, including familiarity with databases and other programming languages, content development, creative design, marketing, and growth and maintenance of the hardware connecting computers and users.

ADVANTAGES OF WEB PUBLISHING

Timeliness

Plan to provide changing, timely content once your website is up and running.

Interactivity

Build into your web pages simple and convenient ways for visitors to interact with you.

ADVANTAGES OF WEB PUBLISHING

Reduced Production CostsWhen you design web pages, do not limit your creativity to the print environment. Where appropriate, include color, photograph, animation, video and sound clips in your web design.

Economical, Rapid DistributionConsider using the web when the need exists for economical and rapid distribution of information.

BASIC DESIGN PRINCIPLES

Balance and ProximityArrange web elements such as photographs, illustrations and text symmetrically(centered or balanced), on a web page to suggest conservative, safe and peaceful atmosphere.

Mood: boring, uninteresting

Asymmetrical(off balance)

Mood: Intense, energetic

BASIC DESIGN PRINCIPLES

BASIC DESIGN PRINCIPLES

Balance and Proximity

BASIC DESIGN PRINCIPLES

ProximityProximity(closeness) will place elements that have a relationship close to each other. For example, position a caption near a photo, a company with its mission statement, and headlines and subheads with body copy.

It visually connects elements that have a logical relationship, making it more organized.

BASIC DESIGN PRINCIPLES

Proximity

It visually connects elements that have a logical relationship, making it more organized.

WHITE SPACE – empty space around text and graphics, also can define proximity and help organize web page elements, eliminate clutter, and make content more readable.

BASIC DESIGN PRINCIPLES

HOW DO WE CREATE A WHITE SPACE?

You can create white space by adding line breaks, paragraph returns, paragraph indents, and space around tables and images.

Utilize proximity and white space to create effective and organized web pages.

BASIC DESIGN PRINCIPLES

Contrast and Focus

CONTRAST – is mix of elements to stimulate attention.

HOW DO WE ACHIEVE CONTRAST?

Through text styles, color choices, size of elements.

BASIC DESIGN PRINCIPLES

Focus

BASIC DESIGN PRINCIPLES

Focus

BASIC DESIGN PRINCIPLES

UnityUNITY – sense of oneness or belonging, to create and maintain a visual identity.

HOW DO I ENSURE UNIFORM?

Grid – is an underlying layout structure that arranges a page into rows and columns and helps place page elements consistently.

BASIC DESIGN PRINCIPLES

BASIC DESIGN PRINCIPLES

Unity

HOW DO I ACHIEVE UNITY

By placing unvarying placement of textual content and navigation controls throughout a web page.

Use tables and cascading style sheets(CSS).

Use common graphic theme and color scheme on all web pages.

BASIC DESIGN PRINCIPLES

BASIC DESIGN PRINCIPLES

Unity

Alignment – is the arrangement of objects in fixed or predetermined positions, rows or columns.

Mixing the alignment of elements causes web pages to look inconsistent.

BASIC DESIGN PRINCIPLES

WRITING FOR THE WEB ACCURATE Establish credibility for your web site by providing accurate and verifiable content. Include the last reviewed date to show timeliness.

Spell check and grammar check the textual portion of your website. After completing web pages, set them aside for a day before proofreading for accuracy and completeness. Always have another person proofread your web pages.

WRITING FOR THE WEB EASILY READ

GUIDELINES:

Use headings, subheads, lists and highlighted sections frequently.

Begin each paragraph with a topic sentence that summarizes the general idea of the whole paragraph.

READABILITY

TO ASSIST READABILITY:

Use type that is big enough to be read by most people, but not so large that it conveys an unsophisticated or child-like impression. Suggestion: 10 – 14 pt.

Do not set type in all uppercase because it slows down reading.

READABILITY

TO ASSIST READABILITY:

Use Sans Serif Type – geometric, straightforward looking type

Enhance legibility of the type by choosing backgrounds that either are plain or subtle.

WRITING FOR THE WEB UNDERSTANDABLE

Visitors could easily understand the general idea behind the content on an inverted pyramid style.

Conclusion

Details

Background Information

UNDERSTANDABLE

Do not overuse transitional words/phrases, such as similarly, as a result, or as stated previously. These transitions will have no significance to a visitor who is skimming the web page’s content or who has arrived at your web page via clicking a link at another web site.

Use language that is straightforward, contemporary, and geared toward an educated audience. Avoid overly promotional, full-of-fluff language that will divert visitors quickly.

UNDERSTANDABLE

Use wording in headings that clearly communicates the content of a web page or section. Avoid overly cute or clever headings. Such headings typically confuse or annoy visitors.

Be cautious regarding the use of humor. Small doses of humor correctly interpreted can enliven content and entertain. Remember, though, that the web audience frequently scans content, and that humor can be taken out of context and may be misunderstood or misinterpreted as sarcasm.

WRITING FOR THE WEB

COMPREHENSIVE AND CONCISE

Consider using the chunked format, rather than the paragraph format, to reduce long passages of text.

ASSIGNMENT:

1. List down name of colors and what mood do they convey.

2. Enumerate the steps in developing a design plan for a web site.