130 likes | 312 Views
Webpage Design. Designing and Writing Webpage Content. Webpage Design. For typical commercial Web sites, the basic aspects of design are:
E N D
Webpage Design Designing and Writing Webpage Content
Webpage Design • For typical commercial Web sites, the basic aspects of design are: • The content: The substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with. • The usability: The site should be user-friendly, with the interface and navigation simple and reliable. • The appearance: The graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant. • The visibility: The site must also be easy to find via most, if not all, major search engines and advertisement media.
Content • Websites should have goal oriented design. • It is essential to define the purpose of the website as one of the first steps in the planning process. • A purpose statement should show focus based on what the website will accomplish and what the users will get from it. • Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place.
Content • Collect a list of the necessary content then organizing it according to the audience's needs. • Items that do not support the defined purpose or accomplish target audience objectives should be removed. • It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs.
Content • Organize the basic information structure by categorizing the content and organizing it according to user needs. • Each category should be named with a concise and descriptive title that will become a link on the website.
Content • Documentation may be considered a prototype for the website – a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. • Content is categorized and the information structure is formulated. • Information structure is used to develop a document or visual diagram called a site map.
Content • There are three main ways of diagramming the website structure: • Linear Website Diagrams will allow the users to move in a predetermined sequence; • Hierarchical structures (of Tree Design Website Diagrams) provide more than one path for users to take to their destination; • Branch Design Website Diagrams allow for many interconnections between web pages such as hyperlinks within sentences.
Usability • Use buttons, headings, images and hyperlinks to view pertinent information quickly. • Viewers read 25% slower on a screen and move very quickly so limit information. • Plan your navigation first. Your site should allow for easy user interface.
Usability • Break down information into chunks. • Use clear, simple language no jargon/slang. • Use shorter words. • Avoid complex sentence structure. • One idea per paragraph. • Bold main points/words • Use lists. • Left align.
Information Architecture • Vertical Hierarchy: homepage down to lower level. • Horizontal Dimensions: how pages link horizontally. • Links: identify what ties the pages together internally and externally.
Developing a Webpage • There are several software packages that all you to develop a website easily. • Microsoft Frontpage is a WYSIWYG HTML editor that allows a person to develop a webpage through a series of Windows interfaces. • WYSIWYG stands for “What You See Is What You Get.”
Developing a Webpage • WYSIWYG implies a user interface that allows the user to view something very similar to the end result. • In general, WYSIWYG implies the ability to directly manipulate the layout of the document without having to type or remember names of layout commands.
Webpage Development • Some of the features of Frontpage include: • Help navigating through your site and seeing your structure. • Built-in features for HTML. • Point and click functionality for common tools. • Simple to use with previous knowledge of Microsoft products. • Support for rich clipboard data import.