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

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

IMPACT OF THE INTERNET ⇒ Design your website so it communicates TRUSTWORTHINESS, Communication CURRENCY and VALUE. www.friendster.com

⇒ Education 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

IMPACT OF THE INTERNET ⇒ Entertainment To develop an entertainment element on a website, identify what would appeal to your www.abs-cbn.com audience and what type of multimedia should be included.

⇒ Business

To develop an e-commerce website, determine the features that would make the product or service desirable or necessary. 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

TYPES OF WEBSITES ⇒ PERSONAL

Allows you to advertise your employment credentials, meet new friends, or share a common interest or hobby with fellow enthusiasts. Do not create webpages that include personal information that can be misused.

⇒ TOPICAL/ORGANIZATION It promotes member’s accomplishments or to encourage support and participation. Topical website devotes the entire website in discussing a particular topic such as black and white photography, photo galleries and online

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 » Explore other websites and identify out 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

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

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 ROLES WEBMASTER 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

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 Costs When 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 Distribution Consider using the web when the need exists for economical and rapid distribution of information.

BASIC DESIGN PRINCIPLES  Balance and Proximity Arrange 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  Proximity Proximity(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  Unity UNITY – 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.