Mastering the Internet, XHTML, and JavaScript Web Design

Outline Goals and Objectives Goals and Objectives Chapter Headlines Chapter Headlines Introduction Introduction Planning Planning Elements of Web Design Elements of Web Design Navigation Elements Navigation Elements Layout Design Layout Design Website Design Website Design Web page Design Web page Design Design Tools Design Tools Validation and Testing Validation and Testing Summary Summary

Goals and Objectives Goals Goals Understand the basic design principles of web sites and pages, the elements of web design, the difference between design and coding, and the importance of design in attracting and increasing website traffic Objectives Objectives Website planning Website planning Elements of Web design Elements of Web design Navigation elements Navigation elements Layout design Layout design Web site and page design Web site and page design Design tools Design tools Testing and validation Testing and validation Putting it all together Putting it all together

Chapter Headlines 11.1Introduction 11.1Introduction Web designers and programmers work together to build web sites and pages Web designers and programmers work together to build web sites and pages 11.2 Planning 11.2 Planning Design for intended market and audience Design for intended market and audience 11.3 Elements of Web Design 11.3 Elements of Web Design Good web design begins by knowing the elements of web content Good web design begins by knowing the elements of web content 11.4 Navigation Elements 11.4 Navigation Elements Good website navigation begins by knowing the navigation elements Good website navigation begins by knowing the navigation elements 11.5Layout Design 11.5Layout Design Apply Hollywood storyboarding to your web site Apply Hollywood storyboarding to your web site

Chapter Headlines 11.6Website design 11.6Website design Learn what it takes to design a web site that generates heavy traffic of visitors Learn what it takes to design a web site that generates heavy traffic of visitors 11.7Webpage design 11.7Webpage design Anybody can create a web page but very few can design good ones Anybody can create a web page but very few can design good ones 11.8Design tools 11.8Design tools Automation tools help maintain consistency in web design Automation tools help maintain consistency in web design 11.9 Validation and Testing 11.9 Validation and Testing Validating and testing web sites come before they go public Validating and testing web sites come before they go public Putting it all together Putting it all together 4-steps to design great web sites and pages 4-steps to design great web sites and pages

Introduction Web sites are first designed then built Web sites are first designed then built Designers and developers design web sites Designers and developers design web sites Programmers write XHTML code to build them Programmers write XHTML code to build them Web is considered as a method of marketing Web is considered as a method of marketing The 5-phases of design that apply to web design also are: The 5-phases of design that apply to web design also are: Planning Planning Analysis Analysis Design Design Implementation Implementation Support Support

Planning Planning guidelines: Planning guidelines: URL choice – choosing a domain name and web host URL choice – choosing a domain name and web host Branding – build a brand name for customers Branding – build a brand name for customers ing – establish communication with customers ing – establish communication with customers Casting a net – join discussion groups Casting a net – join discussion groups Search engines – submit to and build search engines Search engines – submit to and build search engines Online sales – offer coupons and discounts Online sales – offer coupons and discounts E-information – online newsletter E-information – online newsletter Visualization – Consider your self as a user Visualization – Consider your self as a user Analysis – Compare with other web sites Analysis – Compare with other web sites Reverse engineering – get ideas for the websites that you admire Reverse engineering – get ideas for the websites that you admire

Elements of Web Design ElementIssues TextLayout, formatting, spacing ColorsBackground, foreground, images LinksEasy navigation ImagesSize, number of images, resolution MapsDesign for non-graphical browsers AnimationAre they necessary? FramesDifficult to be indexed by search engines TablesBetter control for formatting and layouts FormsCollects information CookiesTracks users’ online habits

Navigation Elements Allows a user to get around web pages and sites ElementIssue HyperlinksForward and backward navigation ButtonsRequire use of JavaScript Menu barsProvide consistent navigation interface Image mapsMore efficient than buttons Bullets/ArrowsNavigate through a series of related pages TablesThey do not provide navigation

Layout Design ConceptIssues Organization schemeBy topic, task, type or audience Organization structureRandom or hierarchical Storyboarding siteStick to the design NavigationProvide site map and index Web page layoutHave alternatives Tables/layersCreate formatting patterns AlignmentsHorizontal or vertical ProximityGrouping similar/related items RepetitionUnifies the site ContrastFor better visualization Mapping web pagesManually draw the web page layout

Layout Design

Website Design ConceptIssues GeneralMake registration optional AccessibilityOld browsers may not support new designs ConsistencyCreate and use templates NavigabilityShallow structure is preferred StabilityAvoid confusing novelty Search-engineUse tag effectively Concise, simpleShould be easy to understand replyEnsure support Related linksGives credibility Dynamic contentProvide new and updated information

Web Page Design ConceptIssues GeneralQuick downloads, and avoid cluttering Avoid scrolling, and use repetition Use more contrast, and less advertisements SetupEnsure proper margins, and indenting Use GIF spacers TextSelect appropriate colors Use proper formatting Avoid text crowding by spreading it WhitespaceUse paragraphs, lists and GIF spacers ColorsNon-dithering, browser safe colors

Web Page Design ConceptIssues LinksCoordinate link colors NavigationConsistent and easy navigation system GraphicsUse less images Use tables for image placements AnimationAvoid continuous loops Use less animation DataUse for data collection Use forms PrintingUse printer friendly designs

Design Tools Design tools include HTML editors, graphics and image software, validators, and management tools Design tools include HTML editors, graphics and image software, validators, and management tools HTML editors can be text or graphics based HTML editors can be text or graphics based Commonly used HTML editors are FrontPage, and DreamWeaver Commonly used HTML editors are FrontPage, and DreamWeaver Site management tools help in making accessible sites Site management tools help in making accessible sites Management tools include preprocessors, and server-side scripting Management tools include preprocessors, and server-side scripting Server-side scripting allows dynamic content inclusion Server-side scripting allows dynamic content inclusion These tools allow easy updating These tools allow easy updating

Validation and Testing Validators are used to check web pages against XHTML published specifications for technical errors Linting is another method of checking errors in web pages Designers should upload all the web pages on the web server after checking for errors Finally the designer should test the website and links to make sure that there are no broken links and that all images load up correctly

Putting it All Together StepAdvice PlanningKnow your audience and market Decide on a URL name LayoutSelect the scheme and structure Storyboard the website WebsiteShould be accessible, consistent, easy to navigate Web pagesFormat text Ensure that links work Use appropriate colors and text sizes Use repetition and contrast

Summary Websites and pages have to be carefully designed Websites and pages have to be carefully designed Follow the planning guidelines Follow the planning guidelines Use web design elements wisely Use web design elements wisely The navigation scheme should be easy to use The navigation scheme should be easy to use Layout should be well planned Layout should be well planned Website should be designed such that it is useful and easy to use Website should be designed such that it is useful and easy to use Web page can be fun to create Web page can be fun to create Design tools must be used effectively Design tools must be used effectively The website must be validated and tested The website must be validated and tested Follow the 4-step design process Follow the 4-step design process