Webtext Design Guide

Webtext Design Tutorial & Guidelines

 

» Apply dig­i­tal rhetoric under­stand­ing and skills, com­pos­ing for online audience:
web­text arrange­ment, with orga­ni­za­tion, links, mul­ti­ple media used to enhance discussion.

 

    » Rec­om­mended plat­forms: Wee​bly​.com, Google Sites, or Word­Press (cre­ate new pages on your exist­ing site).

    *Note, fol­low­ing instruc­tions for Word­Press — with design guide gen­er­ally applic­a­ble for any sites. 

 

 

Design Web­text using

  • Mul­ti­ple Pages (5 rec­om­mended; must be more than 1, with links)
    → Word­Press sub-pages (under Project 1 “par­ent” page)
     
    • Dis­trib­ute ana­lytic dis­cus­sion across sev­eral pages—
      with purposeful/thoughtful lay­out, con­sid­er­ing audience/readers and plat­form features

      •  

    • Arrange into sec­tions (label, title pages); plan/map prior 
        sug­ges­tion: the main top­ics of your ana­lytic dis­cus­sion (Infor­ma­tion, Exper­tise, Argu­ment, Research, Proof/Evidence, Dis­course Com­mu­nity, etc)
        — con­sider audi­ence & pur­pose, per­haps label­ing pages in your terms (specific/specialized)? 

 

  • Hyper­links
      — for nav­i­ga­tion between pages/sections and from within text (hyper­linked words? con­sider “inter­nal” vs. “exter­nal” point­ing links.…)
       
      *Cre­ate / mod­ify top Nav­i­ga­tion Bar: use sec­tion titles in Cus­tom Menu (WordPress)
       
      » reminder from class: link­ing pur­pose­fully (delib­er­ate sequence? or view­ers choose read­ing order?); offer mul­ti­ple types of nav­i­ga­tion, includ­ing links for read­ing “back and forth” (rec­i­p­ro­cally on pages)
       

    → Pro­tip Use Images as Links (WP.com tuto­r­ial)

    •  

  • Mul­ti­ple media
    » Word​Press​.com Sup­port Section
      • Embed pur­pose­fully / thoughtfully

        •  

      • Use visual media like images (pic­tures, graph­ics, screen-capture); charts/diagrams; animation/GIFs, videos
        — per­haps upload your own to site (WP Media Library strongly rec­om­mended
          *Note, sug­gested strat­egy for images: save from Web, edit, then upload to site.

         
        → Pro­tip for screen­cap­ture images/video: SnagIt Chrome Exten­sion

        •  

      • Employ media in mul­ti­ple ways: sup­ple­ment dis­cus­sion; use for var­i­ous purposes/effects, such as to illus­trate, doc­u­ment, demon­strate, plus point out / call atten­tion to (via anno­ta­tions / mark-up)
        *reminder: avoid redun­dancy — repeat­ing in text and image.
        Instead, use visual media to enhance dis­cus­sion as well as to improve effi­ciency — espe­cially of examples. 

 

webtext screencap

“Screen­cap” with “mark-up” (made with SnagIt)


 
  • Effec­tive dig­i­tal rhetoric: design for online/Web readers 
        — revise and edit/proofread care­fully, “pol­ish­ing” for “publication“
        — mod­ify dis­cus­sion con­tent (essay draft) as needed, imag­in­ing audience
        (for exam­ple, creating/arranging sec­tions regard­ing lay­out and media)

    * Pub­lish only revised, final project

    • in other words, ensure all pages, links, and media ele­ments appear & function;
      revise text (not first draft!) before post­ing, reflect­ing for­mal aca­d­e­mic style.

 

    » Cheryl E. Ball further notes that webtexts take advantage of the affordances of their medium: "Webtexts are not linear articles with a few multimedia elements, such as video trailers, TED-like presentations or video supplements; they are a specific (and ever-changing) genre of peer-reviewed scholarship that uses the affordances of the Web (browser-based presentation, multimedia, hyperlinks, etc.)" and "Webtexts often need to be experimentally multimodal, merging modes and genres together in ways that are often new to readers." — Dig­i­tal Rhetoric Col­lab­o­ra­tive Wiki

 

 

» Resources: