Mastering the Internet, Mastering the Internet, XHTML, and JavaScriptXHTML, and JavaScript

Web DesignWeb Design

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

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

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

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

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

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

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

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

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

Layout DesignLayout Design

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

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

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

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

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

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

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