Mastering the Internet, XHTML, and JavaScript Web Design.
-
Upload
aubrey-carson -
Category
Documents
-
view
213 -
download
1
Transcript of Mastering the Internet, XHTML, and JavaScript Web Design.
![Page 1: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/1.jpg)
Mastering the Internet, Mastering the Internet, XHTML, and JavaScriptXHTML, and JavaScript
Web DesignWeb Design
![Page 2: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/2.jpg)
OutlineOutline Goals and ObjectivesGoals and Objectives Chapter HeadlinesChapter Headlines IntroductionIntroduction PlanningPlanning Elements of Web DesignElements of Web Design Navigation ElementsNavigation Elements Layout DesignLayout Design Website DesignWebsite Design Web page DesignWeb page Design Design ToolsDesign Tools Validation and TestingValidation and Testing SummarySummary
![Page 3: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/3.jpg)
Goals and ObjectivesGoals and Objectives GoalsGoals
Understand the basic design principles of web sites and pages, the Understand the basic design principles of web sites and pages, the elements of web design, the difference between design and coding, elements of web design, the difference between design and coding, and the importance of design in attracting and increasing website and the importance of design in attracting and increasing website traffictraffic
ObjectivesObjectives Website planningWebsite planning Elements of Web designElements of Web design Navigation elementsNavigation elements Layout designLayout design Web site and page designWeb site and page design Design toolsDesign tools Testing and validationTesting and validation Putting it all togetherPutting it all together
![Page 4: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/4.jpg)
Chapter HeadlinesChapter Headlines 11.111.1 IntroductionIntroduction
Web designers and programmers work together to build web Web designers and programmers work together to build web sites and pagessites and pages
11.2 11.2 PlanningPlanning Design for intended market and audienceDesign for intended market and audience
11.3 11.3 Elements of Web DesignElements of Web Design Good web design begins by knowing the elements of web Good web design begins by knowing the elements of web
contentcontent 11.4 11.4 Navigation ElementsNavigation Elements
Good website navigation begins by knowing the navigation Good website navigation begins by knowing the navigation elementselements
11.511.5 Layout DesignLayout Design Apply Hollywood storyboarding to your web siteApply Hollywood storyboarding to your web site
![Page 5: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/5.jpg)
Chapter HeadlinesChapter Headlines 11.611.6 Website designWebsite design
Learn what it takes to design a web site that generates heavy Learn what it takes to design a web site that generates heavy traffic of visitorstraffic of visitors
11.711.7 Webpage designWebpage design Anybody can create a web page but very few can design Anybody can create a web page but very few can design
good onesgood ones 11.811.8 Design toolsDesign tools
Automation tools help maintain consistency in web designAutomation tools help maintain consistency in web design 11.9 11.9 Validation and TestingValidation and Testing
Validating and testing web sites come before they go publicValidating and testing web sites come before they go public 11.10 11.10 Putting it all togetherPutting it all together
4-steps to design great web sites and pages4-steps to design great web sites and pages
![Page 6: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/6.jpg)
IntroductionIntroduction Web sites are Web sites are first designed then builtfirst designed then built Designers and developersDesigners and developers design web sites design web sites Programmers write Programmers write XHTML codeXHTML code to build them to build them Web is considered as a Web is considered as a method of marketingmethod of marketing The The 5-phases of design5-phases of design that apply to web design also are: that apply to web design also are:
PlanningPlanning AnalysisAnalysis DesignDesign ImplementationImplementation SupportSupport
![Page 7: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/7.jpg)
PlanningPlanning Planning guidelines:Planning guidelines:
URL choiceURL choice – choosing a domain name and web host – choosing a domain name and web host Branding Branding – build a brand name for customers– build a brand name for customers E-mailing E-mailing – establish communication with customers– establish communication with customers Casting a net Casting a net – join discussion groups– join discussion groups Search engines Search engines – submit to and build search engines– submit to and build search engines Online sales Online sales – offer coupons and discounts– offer coupons and discounts E-information E-information – online newsletter– online newsletter Visualization Visualization – Consider your self as a user– Consider your self as a user Analysis Analysis – Compare with other web sites– Compare with other web sites Reverse engineering Reverse engineering – get ideas for the websites that you admire– get ideas for the websites that you admire
![Page 8: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/8.jpg)
Elements of Web DesignElements of Web DesignElementElement IssuesIssuesTextText Layout, formatting, spacingLayout, formatting, spacingColorsColors Background, foreground, imagesBackground, foreground, imagesLinksLinks Easy navigationEasy navigationImagesImages Size, number of images, resolutionSize, number of images, resolutionMapsMaps Design for non-graphical browsersDesign for non-graphical browsersAnimationAnimation Are they necessary?Are they necessary?FramesFrames Difficult to be indexed by search enginesDifficult to be indexed by search enginesTablesTables Better control for formatting and layoutsBetter control for formatting and layoutsFormsForms Collects informationCollects informationCookiesCookies Tracks users’ online habitsTracks users’ online habits
![Page 9: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/9.jpg)
Navigation ElementsNavigation Elements Allows a user to Allows a user to get around web pagesget around web pages and sites and sites
ElementElement IssueIssue
HyperlinksHyperlinks Forward and backward navigationForward and backward navigation
ButtonsButtons Require use of JavaScriptRequire use of JavaScript
Menu barsMenu bars Provide consistent navigation interfaceProvide consistent navigation interface
Image mapsImage maps More efficient than buttonsMore efficient than buttons
Bullets/ArrowsBullets/Arrows Navigate through a series of related Navigate through a series of related pagespages
TablesTables They do not provide navigationThey do not provide navigation
![Page 10: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/10.jpg)
Layout DesignLayout DesignConceptConcept IssuesIssues
Organization schemeOrganization scheme By topic, task, type or audienceBy topic, task, type or audience
Organization structureOrganization structure Random or hierarchicalRandom or hierarchical
Storyboarding siteStoryboarding site Stick to the designStick to the design
NavigationNavigation Provide site map and indexProvide site map and index
Web page layoutWeb page layout Have alternativesHave alternatives
Tables/layersTables/layers Create formatting patternsCreate formatting patterns
AlignmentsAlignments Horizontal or verticalHorizontal or vertical
ProximityProximity Grouping similar/related itemsGrouping similar/related items
RepetitionRepetition Unifies the siteUnifies the site
ContrastContrast For better visualizationFor better visualization
Mapping web pagesMapping web pages Manually draw the web page layoutManually draw the web page layout
![Page 11: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/11.jpg)
Layout DesignLayout Design
![Page 12: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/12.jpg)
Website DesignWebsite DesignConceptConcept IssuesIssuesGeneralGeneral Make registration optionalMake registration optionalAccessibilityAccessibility Old browsers may not support new designsOld browsers may not support new designsConsistencyConsistency Create and use templatesCreate and use templatesNavigabilityNavigability Shallow structure is preferredShallow structure is preferredStabilityStability Avoid confusing noveltyAvoid confusing noveltySearch-engineSearch-engine Use Use <meta><meta> tag effectivelytag effectivelyConcise, simpleConcise, simple Should be easy to understandShould be easy to understandE-mail replyE-mail reply Ensure supportEnsure supportRelated linksRelated links Gives credibilityGives credibilityDynamic contentDynamic content Provide new and updated informationProvide new and updated information
![Page 13: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/13.jpg)
Web Page DesignWeb Page DesignConceptConcept IssuesIssuesGeneralGeneral Quick downloads, and avoid clutteringQuick downloads, and avoid cluttering
Avoid scrolling, and use repetitionAvoid scrolling, and use repetitionUse more contrast, and less advertisementsUse more contrast, and less advertisements
SetupSetup Ensure proper margins, and indentingEnsure proper margins, and indentingUse GIF spacersUse GIF spacers
TextText Select appropriate colorsSelect appropriate colorsUse proper formattingUse proper formattingAvoid text crowding by spreading itAvoid text crowding by spreading it
WhitespaceWhitespace Use paragraphs, lists and GIF spacersUse paragraphs, lists and GIF spacersColorsColors Non-dithering, browser safe colorsNon-dithering, browser safe colors
![Page 14: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/14.jpg)
Web Page DesignWeb Page DesignConceptConcept IssuesIssues
LinksLinks Coordinate link colorsCoordinate link colors
NavigationNavigation Consistent and easy navigation systemConsistent and easy navigation system
GraphicsGraphics Use less imagesUse less images
Use tables for image placementsUse tables for image placements
AnimationAnimation Avoid continuous loopsAvoid continuous loops
Use less animationUse less animation
DataData Use e-mail for data collectionUse e-mail for data collection
Use formsUse forms
PrintingPrinting Use printer friendly designsUse printer friendly designs
![Page 15: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/15.jpg)
Design ToolsDesign Tools Design tools include Design tools include HTML editors, graphics and image HTML editors, graphics and image
software, validators, and management toolssoftware, validators, and management tools HTML editors can be HTML editors can be text or graphics basedtext or graphics based Commonly used HTML editors are Commonly used HTML editors are FrontPageFrontPage, and , and
DreamWeaverDreamWeaver Site management tools help in making Site management tools help in making accessible sitesaccessible sites Management tools include Management tools include preprocessorspreprocessors, and , and server-side server-side
scriptingscripting Server-side scripting allows Server-side scripting allows dynamic content dynamic content inclusioninclusion These tools allow These tools allow easy updatingeasy updating
![Page 16: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/16.jpg)
Validation and TestingValidation and Testing Validators Validators are used to are used to check web pages check web pages against XHTML against XHTML
published specifications for technical errorspublished specifications for technical errors LintingLinting is another method of is another method of checking errors checking errors in web in web
pagespages Designers should Designers should upload upload all the web pages on the web all the web pages on the web
server server after checking for errorsafter checking for errors Finally the designer should test the website and links to Finally the designer should test the website and links to
make sure that there are make sure that there are no broken links no broken links and that all and that all images load up correctlyimages load up correctly
![Page 17: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/17.jpg)
Putting it All TogetherPutting it All TogetherStepStep AdviceAdvice
PlanningPlanning Know your audience and marketKnow your audience and market
Decide on a URL nameDecide on a URL name
LayoutLayout Select the scheme and structureSelect the scheme and structure
Storyboard the websiteStoryboard the website
WebsiteWebsite Should be accessible, consistent, easy to Should be accessible, consistent, easy to navigatenavigate
Web pagesWeb pages Format textFormat text
Ensure that links workEnsure that links work
Use appropriate colors and text sizesUse appropriate colors and text sizes
Use repetition and contrastUse repetition and contrast
![Page 18: Mastering the Internet, XHTML, and JavaScript Web Design.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e6b5503460f94b69f3d/html5/thumbnails/18.jpg)
SummarySummary• Websites and pages have to be Websites and pages have to be carefully designedcarefully designed• Follow the Follow the planning guidelinesplanning guidelines• Use web design elements Use web design elements wiselywisely• The The navigation schemenavigation scheme should be easy to use should be easy to use• Layout should be Layout should be well plannedwell planned• Website should be designed such that it is Website should be designed such that it is useful and easy useful and easy
to useto use• Web page can be Web page can be fun to createfun to create• Design toolsDesign tools must be used effectively must be used effectively• The website must be The website must be validated and testedvalidated and tested• Follow the Follow the 4-step design process4-step design process