Web Page Concept and Design : Getting a Web Site Up and Running. Lesson 2. Principles of Web Page Design

<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>

Web Page Concept

and Design :

<b>Getting a Web Site Up and </b>
<b>Running</b>

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

Scope

_{What are the frst steps in web page design?}
_{What are the elements of a web page?}

_{What are the guidelines for the design}

elements of a web page?

_{What are some tips in web page creation}

and design?

_{What are the guidelines for creating library}

websites?

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

Learning outcomes

_{Identify the frst steps in web page}

design

_{Recognize the elements of a web page}
_{Realize the do’s and don’t’s in web page}

design

_{Apply guidelines in designing library web}

sites

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

What are the frst steps

in web page design?

_{State your purpose/objective – why build a}

website for your library?

_{Determine your audience – who are your}

target audience?

_{Defne the content – what kind of}

information will be provided on your site?

_{Identify the essential resources – do you}

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

What are the frst steps

in web page design?

State your purpose

_{To publish online information about the library}

- collections, services

_{To provide extension services – user}

education, reference services, tutorials

_{To act as a gateway to local and external}

information resources on the Web – library
catalog, online databases, e-journals

_{To serve as a communication tool - through}

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

Determine your audience

_{Who is your target audience? Students?}

Faculty? Or staf?

_{What are their interests and needs?}

_{Are they profcient in using technology}

available in the library?

_{Do you have the equipment and materials}

necessary to meet their needs?

_{What will they get from your site? Learn}

anything or accomplish a task?

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

Defne the content

_{What kind of information will be provided on}

your website?

_{Is it educational information or}

entertainment?

_{Does the content meet the information}

needs of your audience?

_{Is it relevant ? interesting?}
_{Is it current and accurate?}

_{Will web pages be efective in conveying and}

distributing the information?

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

Identify the essential resources

_{Do you have the management’s support?}
_{Is the allocated budget enough for the}

creation and publishing of the web site?

_{Do you have the manpower?}

_{Do the personnel involved in the project}

have the needed expertise?

_{Are the necessary materials already}

available?

_{What is your timeline for the creation of the}

library web site?

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

Activity 2.1



<b>_{Go through the frst steps in}</b>

<b>web page design and answer the </b>

<b>initial questions discussed. You </b>

<b>can add more information as you </b>

<b>would like. Write them down </b>

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

What are the elements of a

web page?

 _Title_{– title of the web page}

 _{Web address}_{– URL of the page shown at the}
browsers address box

 _Content_{– information on the page - text, graphics}
and other media types

 _Design_{– style of the page, font, color, background,}
visual elements

 _Structure_{– layout of the page, title, headings, tables,}
frames, navigational tools, footers

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>

<b>Table / </b>

<b>Navigational tools</b>

Elements of a web page

<b>Document title</b>
<b>Address (URL)</b>

<b>Banner</b>
<b>Web page title</b>

</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>

Activity 2.2

<b>Read these articles:</b>



<b>_{Anatomy of a Web Page}</b>

– <b> />

<b>10301.html/</b>



<b>_{Web Page Elements}</b>

– <b> />

</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>

What are the design elements

of a web page?

_{Overall look of the web page}_{– the general}

look or feel of the page (aesthetic value)

_Content_{– all the information contained within}

the page I.e. text and other media types
embedded in the page

_{Navigational tools}_{– the text links, icons,}

buttons, bars and other objects use for
exploring the page and any linked pages

_Graphics_{– the images other graphical}

elements in the page

_{Page layout and structure}_{– organization of}

</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>

Overall look

_{Match the purpose of the web site and}

its appropriate information to the target
audience

_{Maintain consistency, clarity and}

simplicity – uniform color scheme

_{Use of colors, images, hyperlinks and}

web technology efectively

_{Organize the design elements logically}

and predictably

What are the design

</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>

Content

_{Match the purpose of the web site and its}

appropriate information to the target
audience

_{Information organized logically and}

predictably (text and other media types)

_{Ensure information is accurate, current,}

relevant , useful complete, interesting,
unique

_{Employ a concise, easy to read writing style}

</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>

Navigational tools

_{Can be selected from text links, icons, buttons,}

bars and other graphical elements

_{Organized them logically and predictably}

_{Provide clear, quick and consistent method to}

move within the site

_{Provide easy to use and fnd links}

_{Should employ intuitive and descriptive}

pointers

_{Help create the web site’s identity}

What are the design

</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>

Graphics

_{Appropriate, essential, and relevant to the}

content of the page

_{Functional - serve a purpose and/or provide}

information

_{Of size, quality and fle format appropriate}

for the page content

_{Used to add value to the overall design}

What are the design

</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>

Page layout and structure

_{Follow the overall look guidelines}
_{Take the technical elements into}

consideration

– _{descriptive fle name}

– descriptive document title

– complete contact information

– efective use of tables and frames
– browser compatibility

What are the design

</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>

Activity 2.3

<b>Read this article:</b>

<b>_{Yale Style Manual}</b>

– <b> />

<b>_{Create a storyboard for your web}</b>

<b>page, with a layout for each web page </b>

<b>_{Organize your web site – illustrate the}</b>

</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>

Some tips in web page design

Do’s in web page design

_{Plan the web site structure and}

navigation

_{Keep the layout simple and intuitive}

_{Use the same general style throughout}

_{Add standard navigation tools to each}

page

_{Include copyright and contact}

</div>
<span class='text_page_counter'>(21)</span><div class='page_container' data-page=21>

Some tips in web page design

Do’s in web page design

_{Use original or free graphics}

_{Use images wisely and keep fle size}

small for fast download

_{Respect copyright and intellectual}

property rights

_{Always state the source of all materials}

used

</div>
<span class='text_page_counter'>(22)</span><div class='page_container' data-page=22>

Some tips in web page design

Don’t’s in web page design

<b>_{Don’t crowd your pages – balance text,}</b>

<b>graphics and space</b>

<b>_{Don’t overuse graphics, animations}</b>

<b>and other bleeding edge technology – </b>
<b>use them to support and enhance but </b>
<b>not to overpower your work </b>

<b>_{Don’t use background that distracts}</b>

</div>
<span class='text_page_counter'>(23)</span><div class='page_container' data-page=23>

Some tips in web page design

Don’t’s in web page design

<b>_{Don’t use blinking or glowing text for}</b>

<b>emphasis </b>

<b>_{Don’t use long paragraphs of text –}</b>

<b>divide them into readable chunks</b>

<b>_{Don’t create dead end pages, which}</b>

<b>have no links to any other local page in </b>
<b>the site</b>

</div>
<span class='text_page_counter'>(24)</span><div class='page_container' data-page=24>

Activity 2.4

_{Read the following articles:}

– Designing efective web pages

efectivedesign.html

– Indiana University: Basics of Web Design.

basics.html

_{Make a checklist regarding your library’s}

</div>
<span class='text_page_counter'>(25)</span><div class='page_container' data-page=25>

How to evaluate web sites?

_{Accuracy – free from error and alteration}

_{Authority – credibility of author / publishing}

body

_{Objectivity – creator’s point of view / bias}
_{Currency – timeliness of information}

_{Content – scope and depth of material}

</div>
<span class='text_page_counter'>(26)</span><div class='page_container' data-page=26>

How to evaluate web sites?

Accuracy



_{How reliable is the information?}



_{Is it the original document?}



_{Are there any errors or alterations on}

the page?



_{Is there a way to verify authenticity of}

</div>
<span class='text_page_counter'>(27)</span><div class='page_container' data-page=27>

How to evaluate web sites?

Authority



_{Who is the author?}



_{Is the author credible?}

</div>
<span class='text_page_counter'>(28)</span><div class='page_container' data-page=28>

How to evaluate web sites?

Objectivity



_{From which point of view is the}

information presented?



_{Does it show a minimum of bias?}



_{Is it trying to sway opinion?}



_{Is it in line with the aims or purpose of}

</div>
<span class='text_page_counter'>(29)</span><div class='page_container' data-page=29>

How to evaluate web sites?

Currency



_{Is the information dated?}



_{Is it timely?}



_{Is it up-to-date?}



_{Are the links current and still}

</div>
<span class='text_page_counter'>(30)</span><div class='page_container' data-page=30>

How to evaluate web sites?

Content



_{What is the scope of the web site?}



_{How in-depth are the materials?}



_{Is it in line with the purpose of the}

web site?



_{Does it provide meaningful and useful}

</div>
<span class='text_page_counter'>(31)</span><div class='page_container' data-page=31>

How to evaluate web sites?

Design



_{Does it follow the design principles?}



_{Is the site easy to read and navigate?}



_{Is there a balance between style and}

</div>
<span class='text_page_counter'>(32)</span><div class='page_container' data-page=32>

How to evaluate web sites?

Accessibility



_{Can it be viewed using diferent}

browsers?



_{Does it require a special program to}

read the content?



_{Is the information readily available on}

</div>
<span class='text_page_counter'>(33)</span><div class='page_container' data-page=33>

Activity 2.5

_{Read the following articles:}

– ALA’s Selection Criteria

/>eria.html

– _{What makes a great web site?}

/>

_{Visit and evaluate library web sites.}
_{Choose which ones you could use as}

</div>

<!--links-->