Empowerment Technologies Lesson 1: Web Design and ICT

**EMPOWERMENT TECHNOLOGIES** LESSON 1: Web Design and ICT  Web Page\ A web page is a document which is designed for the World Wide Web and is accessible using a web browser such as Firefox, Google Chrome, Microsoft Internet Explorer, or Apple Safari. A web page may content te...

**EMPOWERMENT TECHNOLOGIES** LESSON 1: Web Design and ICT  Web Page\ A web page is a document which is designed for the World Wide Web and is accessible using a web browser such as Firefox, Google Chrome, Microsoft Internet Explorer, or Apple Safari. A web page may content text, graphics, sound, video, and animation.\ \ Basic Web Design Principles and Elements A web design is a concept of planning, creating, updating, and maintaining websites. A good design allows the user to understand the message, contents, and ideas in the most convenient way.\ \ Web Design Elements\ In order to come up with a technically and visually good appealing and effective web design, elements must be arranged in a way that is pleasing in the eye, well-coordinated and maintaining a good balance among the elements.\ \ 1. Text -- font family and type must be chosen well, clear, and in readable size.\ 2. Graphics/ Illustration -- must be with good quality and well arranged with the text and other elements.\ 3. Shapes -- can be used to denote an enclosed boundary in the overall design.\ 4. Background -- or texture can help provide your website with a feeling of a surface underneath.\ 5. Color -- must blend well and complement the elements on the page.\ 6. Video/Audio -- will help viewers easily understand what you are teaching or selling.\ 7. Links -- will allow users to connect to another site or page that is related to the content of your page or site.\ \ Figure 1. Page Structure and Site Design Web Design Principles A good web design must contain elements that are not the only appealing but should be functional, responsive, and useful.\ 1. Portable Design -- web design must be portable and accessible by users who have different browsers, operating systems, and computer platforms.\ 2. Design for Low Bandwidth - website design must be accessible at a variety speeds.\ 3. Direction -- Identify the order of importance of the various elements and place them in a sequence where the eye moves and perceives the things it sees.\ 4. Accessibility -- when a visitor enters the website, he/she must be able to easily access the information.\ 5. White Spaces -- use white space deliberately in your design and as a breathing space.\ 6. Simplify -- the more options you place in your site, the more difficult it is for a visitor to make a decision more time is required to browse through them.\ 7. Convenience -- to allow a visitor to make an action, the click buttons should be conveniently located and accessible.\ 8. Regular testing -- the website should be regularly upgraded, updated, and tested so that problems will be quickly resolved.  Web Page Design Using Templates and Online WYSIWYG Platforms WYSIWYG is an acronym for "what you see is what you get". A WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.\ \ Example of WYSIWYG platforms HTML editor:\ 1. Wix -- is a pure WYSIWYG, free cloud-based web development platform that allows users to create HTML5 websites and mobile sites.\ 2. Weebly -- is a free website builder, blog, and web-hosting service.\ 3. Drupal -- is a free and open-source content management system (CMS) based on PHP and MySQL.\ 4. Wordpress -- is a free and open-source content management system (CMS) based on PHP and MysQL. Other Ways to Create Website\ 1. HTML (Hypertext MarkUp Language) -- is a set of symbols codes inserted in a file intended for display on a World Wide Web browser page,\ 2. CSS (Cascading Style Sheets) -- is a Web page derived from multiple resources with a defined order of precedence where the definitions of any style element conflict.