Computer Concepts and Applications – Introduction to Web Design

Computer Concepts and Applications – Introduction to Web Design

• Introduction To Web page Design

5.1Introduction to Web Design

The term web designing in simple terms can be understood as a representation of content, related to an individual, business or any other topic; using design and graphics principles on the internet in the form of web applications and web sites. Web design usually involves and uses technologies and standards such as HTML,CSS,XML,SSL,PHP,ASP ect.

Web design differs completely from web development, which is more technical and deals with issues concerning the web site dynamics, validations and constrains. The principle of web site design further involves the conception and collection of web pages, which in-tern collectively is kn own as single entity, a web site. Web pages are usually the basic content and design holders for the entire web site.

Web Design

Web design is the process of creating websites. It encompassed several different aspects, including webpage layout, content production, and graphic design. While the terms web design and web development is often used interchangeably, web design is technically a subset of the broader category of web development.

Meaning

Web design is the art and process of creating a single web page or entire web sites and amy involve both the aesthetics and the mechanics of web site’s operation although primarily it focuses on the look and feel of the web site – design elements. Some of the aspects that may be included in the web design or web production are graphics and animation creation, colot selection , font selection, navigation design, content creation, HTML/XML authoring, Javascript programming , and ecommerce development. Web design is a form of electronic publishing.

Web design Pyramid

One way to think of all the components of web design is through the metaphor of the web pyramid as shown in figure.

Content provides the bricks that build the pyramid, but the foundation rests solidly on both visuals and technology, with a heavy reliance on economics to make out projects worth doing.

While web development challenges aren’t quite on the level of those faced by the ancient Egyptians, building a functional, pleasing web sites that can stand the test of internet time is certainly not easy. The pyramid provides a simple way for designers to think of all the aspects of web design in interplay, but does little to provide a deeper understanding of the web medium.

• The medium of the web

While the web pyramid analogy is a very abstract way of describing web design, it is a useful tool for showing the interplay of the various components of web building. A more practical way to discuss web design is to think of the various components of the web medium. Today’s web sites are primarily a basic client – server network programming model with their common elements.

• The server side

This includes the web server hardware and software as well as programming elements and built – in technologies. The technologies can range from simple CGI programs written in PERL to complex multi-tier java based applications, and include backend technologies such as database servers that may support the web site.

• The client side

The client – side is concerned with the web browser and its supported technologies, such as HTML, CSS and Java script languages and Active – X controls or Netscape plug – ins , which are Utilized to create the presentation of a page or provide interactive features.

• The Network

The network describes the various connectivity elements untilised to deliver the web site to a user. Such elements may be the various networks on the public internet or the private connections within a corporation – often dubbed an internet.

5.2 Types of web pages:

A web page is a web document that is suitable for the world wide web and the web browser. A web browser displays a web page on monitor or mobile device. The web paqge is what displays, but the term also refers to computer file, usually written in HTML or comparable markup language, whose main distinction is to provide hypertext that will navigate to other web pages via links. Web browsers co-ordinate web resources centered around the written web page, such as style sheets, scripts and images , to present the web page. The five types of web pages are stated below:

Advocacy

An advocacy webpage is one sponsored by an organization to influence option. The URL address of this type of page frequently ends .in, .org.

• Example :
• de

Business and marketing

business or marketing webpage is one sponserd by a commercial enterprise that is typically trying to sell or market their services / products. The URL address frequently ends in, .com News

news webpage is one whose purpose is to provide timely information about current events and issues. The URL address frequently ends in.com Informational

An informational webpage’s purpose is to present factual information. This include reports research finding, and general topical information. The URL address frequently ends with edu.or.gov.

Personal

personal webpage is created by an individual for his/her own personal need. The URL frequently has a tilde(~) somewhere in the address 5.3 Building web sites

Web site building involves complex tasks. Though it is complex it is not touch. Following points enlist the necessary things bear in mind while creating and building a web site.

• Registration of Government Domain Names

A domain name is like an internet address of the websites and has labeling effect. Government bureau and department are advised to register a bundles pair of englesh and chiness domain names under gov.hk and ??.?? categories respectively for setting up website addresses in bilingual to facilitate public access.

• Portable Document Format file

Users should use the portable Document Format(PDF) onlu for very long document or when the exact formatting must be preserved. They should avoid using pdf file for information that is of wide public interest, because pdf file may not be readable on mobile devices or by users without the necessary reader. Whenever pdf file is used provide hyperlink to access the required reader software . pfd should be produced by proper pdf creation tools instead of scanning from the document, as scanned image of text file is inheriently inaccessible .

• Using meta data to assist search engine Registration

The most common methods for users to find web site through popular search engine. These search engines operate on the principle of keyword search, where the use enters a keyword and the search engine returns web pages realated to the keyword enterd. To ensure that the site is returned as one of the to listing in the serach results, a descriptive title and meta tags of description and keyword containing the keywords that users commonly search should be defined.

• Regular Re-registration in prominent search engines

Registration can be conducted manually by visting the individual search portal sites. Chinese web pages should be submitted to Chinese based search engine. Each web page should have a descriptive and accurate page tiltle to facilitate work of search engine.

• Facilitate search engine indexing

Web page hyper links generated by java script should be avoided because search hyper links normally cannot be indexed by common search engines. As an alternative, webmasters may create a site map with static hyper links pointing to all pages in the website, and in the web site of the site , add the static hyper link to the site map.

• Browsers

In theory , gov websites should be tested on deferent browsers. In practice , testing them on prevalling versions of internet explorer , Firefox, chrome and safari will suffice. As most user do not upgrade their browsers regullary, it will be use full to try out page with more popular and low end versions. If PDA version of the website is provided, it should also be tested on a web browser on a pda or a mobile internet device.

• Screen resolution

The lowest acceptable screen resolution should be determined at the onset before development stage. The common screen resolutions of a width of 1024 pixels or above. Conduct tests for websites viewed under different resolution to avoid an improper page layout under certain screen resolution.

• Bilingual pages

Use separate pages for the Chinese and English versions. This is to avoid upsetting English screen reader software that cannot handle Chinese encoding. If the entry page is in Chinese, the link to English version should be the first link at the top left hand croner of the web site to facilitate language switching. Limitation in English screen reader software is also the reason for placing the English version as the first link of the website. Gov websites should include simplified Chinese version in addition to the English and traditional Chinese versions to enhance the accesbility of the website to the other Chinese communities.

• User’s preference

For better relation with website users and their best viewing experience, government website should recognize users previous preference by storing his / her language, fort side and / or color reference ect, such as cookies best on the last access. When the user access a gov website user should check the cookies about the stored user preference and automatically redirect to the well come massage page of the corresponding language reference with appropriate font side and/or color preference

• Use of embedded video links on websites

The use of embedded video links on web sites is now very popular. B/Ds ,may considers embedding video links to the other video websites according to their particular requirements.

5.4 Web development process model :

No two projects are identical, but the following stages illustrate how the different skills of information architect, graphics designers.

• Objectives and outcomes

As with any design process, the first stage in the web development project is to agree and than clearly state the desired outcomes – the objectives the site needs to achieve. This will for the basis of a design and development brief and although it is not carved in stone it if will give client , designers and programmers a basis on which to build the site elements and assess their suitability and success at different stages in project.

• User experience (UE) and information architecture (IA)

There are potentially many different types of user for any given website and there are numerous ways they may approach and access the site. It the design consultancies job to ensure that all potential targets audiences are catered for. UE consultants develops wireframe models of different user journeys, which are then used by information architects, graphics designers and programmers to construct and populate site with content. Information architects and client than work together to start constructing the IA or site map. The IA will ensure that everything that needs to be in the site is present.

• Wireframes

Graphics designers , user experience designers and programmers start to build wireframe models of how the site is structured. These wireframe may be flat images or liked html pages. The wireframe models show where the blocks of content are located, how they are accessed and give an overall feel for how the site will be setup. Wireframes can also be shown to user groups to test the site structure and navigation against the project objectives

• Graphics design

Once the structure is clearly understood from the wireframes and the client has signed off the IA,the graphic desigeners can start work on visual version of the pages.these graphic designs may be develope as flat visuals or as prototype HTML built(or as a combination of the two)and may or may not be directly linked to the IA at this stage.the bulk of early visual work will not usually be shown to the client although the degree of collaboration at this stage dependes on the nature of project and the relationship between the client and desiginer. When the desigener have settled on one or more graphis ideas the suggested routes are discussed and selected with the client.

• Build :

After a graphics design scheme is chosen, proper building of site can begin.The build is based on all the information gathered so far-during the IA user testing and user experience phases-and aims to create visually and functionally appealing implementation of the ideas.Programers/coders work with the designers to ensure that the design is delivering the right content at the right time and in a way the users will be able to understand and navigate. These stage often involves a number of iterative cycles interaction designers are responsible for everyway that digital system respondes to user input. In the case of screen based system, they will develop integration mechanics, such as graphics or text motions and transitions, selections and focusing, media player controls and so .. on

• Launch and post – lunch

Once the site is fully functioning there may be a final user test in a order to in iron out any remaining glitches and ensure that nothing major has been over look. After these the site can be launched. Even at this point, a site may be launched in a beta testing state, where live version is used to workout in bugs or identify any changes that need to be made.