Developing a Framework for Web Design

1
Developing a Framework for Web Design

• LiteracyLink Lessons Learned

2
LiteracyLink Background

• 5-year Star Schools initiative, funded by U.S.
  Department of Education
• Partners - NCAL, KET PBS
• Primary goal to develop multimedia resources for
  adult education instructors learners

3
NCALs Role

• Develop online resource for adult learners that
  complements KET videos workbooks
• Workplace Essential Skills
• GED
• Develop online resource for adult educators
• LitTeacher online classes
• PeerLit
• Practice Guides
• Videoconferences

4
LiteracyLink Development Challenges

• Multimedia - coordinating partners efforts
  across video, online print
• Flexibility of web is positive negative
• Changes can be made (unlike KETs video products
  workbooks)
• Changes must be made (evolving web requires
  constant upkeep)
• Restricted technological capacity of many adult
  education programs (pressing the envelope without
  pressing it too far) - developing alternatives
  for low-end use

5
LiteracyLink Development Challenges - Continued

• Diverse audience (teachers learners) - parallel
  construction of website
• Range of technology experience among users -
  developing a system that will appeal to a range
  of users wont alienate people
• Striking a balance between structure
  flexibility
• Striking a balance between community
  autonomy/privacy
• Creating opportunities for meaningful
  interactivity
• Developing a collection of useful learning tools
  that will complement/enhance the LiteracyLink
  content

6
LiteracyLink Development Challenges - Continued

• Desire to develop a language of graphics - that
  reinforce but do not control meaning within the
  system
• Limited staff on project
• Basic logistics - coordinating production
  components (programmer, system designer, graphic
  designers, video consultants, text authors,
  experts/contributors, testers)

7
Development Tips - Grounding Questions

• 1. Who is your audience? What are their needs?
  Strengths? Limitations?
• 2. How would you describe your web project in
  three sentences or less?
• 3. Why are you pursuing this particular project
  over others? Why is it important?
• 4. How will it address users needs, reinforce
  their strengths and work with their limitations?

8
Practical Development Steps

• 1. Create Site Map - A Visual Representation
• Include all site pages
• Identify connections between pages
• Clearly present/identify content on each page
• Identify number of website pages so you (or
  programmer) can build shell

9
Practical Development Steps - Continued

• 2. Draw Individual Pages
• Sketch out what you want individual pages to look
  like (completely)
• Keep these drawings organized according to your
  site map headings
• Draw/draft specific images for individual pages

10
Practical Development Steps - Continued

• 3. Identify Special Features
• Create a list of special features that your pages
  will need bulletin boards, online chatting
  functions, video clips, etc.
• Determine the creation order of these special
  features

11
Practical Development Steps - Continued

• 4. Keep Running List of Images Needed
• Identify images (page by page) to be created
• Identify site-wide icons, buttons and headers
  like Back, Help and Exit buttons
• Keep this list organized according to site map
  headings
• If you hire outside consultants to create
  graphics, keep an itemized list of what you need
  try to send consultants requests in bulk.
  (This itemized list will also come in handy if
  you or colleagues are charged with locating or
  developing graphics.)
• In either case, describe in explicit detail what
  you want each image to look like be sure to
  mention color/dimensions and explain how you plan
  to have images work together on a page.
• Try to develop a reasonable timeline for
  acquiring these graphics. If you are working
  with consultants, be sure you discuss turn-around
  time as well as fees.

12
Practical Development Steps - Continued

• 5. Keep Running Prioritized To-Do List For
  Programmer
• Have weekly or biweekly meetings with programmer
  and identify priority tasks
• Keep list where programmer can refer to it easily
  on the wall/on a calendar
• Assess progress on itemized list regularly and
  shift focus as needed

13
Practical Development Steps - Continued

• 6. Develop Your Text
• Create a list of all the text needed (for the
  different pages)
• Remember your design be sure that your text
  will fit into/complement the space that youve
  allotted
• Save all page text in plain text format for
  conversion into valid html
• Come up with a naming system that lets everyone
  know where these plain text files fall in the
  site map
• For every page of text you write, you should at
  least consider creating complementary Help text
• Remember to write text that will describe images
  and video for users with older browsers and to
  ensure Bobby compliance

14
Practical Development Steps - Continued

• 7. Testing
• Be specific about what you need tested
  content/functionality
• Allow 1-2 weeks for extensive testing of new site
• Ask testers to print out all pages that they test
  and mark problem spots on those handouts
• Be sure to build fix-it time into your design
  schedule

15
Practical Development Steps - Continued

• 8. Upkeep
• Create a master list of areas within the site
  that require ongoing attention
• Divide upkeep into different areas and delegate
  responsibility
• Develop a basic maintenance schedule and plan
  regular updates (once a month, once every two
  months, etc.)

16
Practical Development Tips - Continued

• Wrap-Up
• Revisit grounding questions regularly
• Maintain a working schedule
• Post your work in a public arena
• Strive for simplicity
• Try to remain consistent - carry a few themes
  through the website
• Delegate/collaborate let contributors know how
  their work will be used
• Test/conduct focus groups
• Dont forget upkeep!