Transcript Digital Design – Foundations of Web Design

Teaching a Standards-based
Web Curriculum
Digital Design:
Foundations of Web Design
Fran Weaver
Course Technology
[email protected]
Agenda
 The Players and Tools
 Curriculum Goals and Challenges
 Digital Design Curriculum
 How can we help you?
Web Tools
…the Players
Curriculum Goals and
Challenges
What are schools teaching?
 It’s all over the map






Microsoft
Adobe
Macromedia
Web page design
HTML and JavaScript
Video editing
 Who is teaching these programs?
Curriculum Goals
 Teach the professional web design and
development process
 Criteria:
 Develop students’ career skills
 Provide engaging, real-world projects
 Use industry-standard professional web design
tools
 Correlate the curriculum to state and national
standards
 Pilot with teachers and revise to meet their needs
 Increase enrollment of girls into IT courses
IT Career Cluster
 Washington is one of 10 states participating in the National
IT Career Cluster Initiative sponsored by USDOE and the
National School-to-Work office
 Create a national model and curricular framework for IT
careers (www.careerclusters.org)
 Network Systems
 Information Support and Services
 Programming and Software Development
 Interactive Media
 WA OSPI took on the task to create a curriculum to prepare
students for digital-media and web-design careers
 Maps to Interactive Media IT Career Pathway
Digital Design Project
 The challenge:
 Limited resources and broad expertise among
teachers and administrators to build the curriculum
all on their own
 The partnership:
 2001-02: Macromedia and WA teachers
collaborated to developed and test the curriculum in
over 35 high schools across the state
Digital Design Curriculum
 Now offered as a career and technical-education
elective in urban, suburban, and rural high schools
throughout country
 Consistent teacher acclaim about student retention and
achievement
 States adopting Digital Design
 WA trained 200 additional teachers summer 2003 for fall classes
 Michigan
 Mapped DD to the Bus. Mgmt. & Administration Career Cluster
 Trained 90+ add’l. teachers summer 2003 for fall classes
 Indiana, Connecticut, Florida
 Training this summer: Wisconsin and Idaho
 Many others… on individual district-by-district basis
Course Technology and Macromedia
 Course Technology partnered with Macromedia as the
exclusive Macromedia Education publishing partner
 Integrating Macromedia's subject-matter expertise with Course
Technology's innovative approach to educational publishing
 The commitment — Enable faculty and students to use
Macromedia products for teaching and enhance learning
 90% of professional web developers use Dreamweaver
 Millions of people see Flash and Shockwave enabled web sites
every day
Digital Design Curriculum Guide
Yearlong, project-based curriculum
teaching the professional Web design
process and Web tools
 Develops students’ career skills
 Provides engaging, real-world projects
 Coverage includes Flash, Dreamweaver,
and Fireworks
 Correlates to educational technology
and national IT standards
 Addresses core academic skills specific
to writing, reading, communications, and
art
Studio MX 2004 ISBN 0-619-18396-9
Studio MX ISBN 0-619-05516-2
$262.50 from Course Technology
Student Learning Objectives
 Develop
 Collaborative and team skills through group projects
 Communication skills through web design
 Higher-order analysis and problem-solving skills
 Design and project management experience
 Technical skills with professional web tools
 Skills taught in a spiral
 Each project adds more challenging skills onto
foundation proficiencies
The Standards
 ISTE NETS for Students
 Standard 1:
Basic operations and concepts
 Standard 2:
Social, ethical, and human issues
 Standard 3:
Technology productivity tools
 Standard 4:
Technology communications tools
 Standard 5:
Technology research tools
 Standard 6:
Technology problem-solving and
decision-making tools
 NWCET Standards for Students
 Digital Media
 Project Management
Digital Design
Curriculum Content
First Semester
 Foundation for producing
Web-ready communications
 Effective personal
communications
 Graphic design principles
 Site analysis and design
 Project planning
 Peer teaching and evaluation
 Authentic assessment that ties
back to the standards
 Tools:
 Fireworks
 Dreamweaver
 Projects:
 Graphical images
 Electronic portfolio
 Web photo album
 Interactive graphics
Curriculum Hours
150
Activities
51
Process Guides
20
Technical Guides
50
Second Semester
 Perspective shifts from
individual to client
 Soft skills (interviewing and
responding to feedback)
 Working on a team
 Working for a client
 Project planning and design
 Redesigning a site
according to client specs
 Advanced web design tools
 Technical Web publishing
 Tools:
 Dreamweaver
 Fireworks
 Flash
 Projects:
 Design documents and visual
composites for client review
 Develop Web site designs
that solve specific
communication challenges
 Build technical skills to
address client needs
Web Design and Development Process
Plan
Research
Schedule
Goals and audience
Cost-benefit analysis
Evaluate
Usability
Accessibility
Content
Client feedback
Design
Redesign & Rework
Develop
Content
Graphics
Multimedia
Web pages
Site map
Visual comps
Prototypes
Storyboards
Supports Key Career Skills
DESIGN
TECHNICAL





 Broad, independent use of
Open-ended projects
Graphics and navigation
Page layout
Digital narrative
industry-standard web software
 Increasingly complex projects
 Spiraling skill growth
Design documents
PROJECT MANAGEMENT
RESEARCH & COMMUNICATION
 Individual and team projects
 Project plans
 Development process
 Design process
 Higher-order analysis and
 Website review and comparison
 Personal and peer review
 Presentations
 Portfolio
problem-solving
Digital Design Approach
 Builds web design skills in ever-larger, more complex
projects:
Nameplate
Online
Business
Logo
Virtual
Business
Card
Electronic
Portfolio
Web Photo
Album
Interactive
Graphics
Simple Client
Website
Redesigned
Client Website
Rich Media
Client Website
Design  Technical  Project Management  Research & Communication
Pilot Teacher Feedback
 Engaging projects focus on student interests
 Useful guide provides prep, lesson plans, resources
and assessment tools
 Students are engaged as team members, critical
thinkers
 Collaboration grew with each project
 Empowered students’ learning and use of professional
tools
 Listen to Joann Fevergeon, Digital Design Teacher,
Ellensburg High School
Digital Design resources:
 Digital Design curriculum  Instructor Resource CD includes
includes







Teacher Lesson Plans
Introductory presentations
Student Concept Guides
Technical “how to” Guides
Assessment guidelines
Correlations to Standards
Suggested lesson time
 Learner Study Guides
 Teacher notes
 ExamView testing software and test
bank (Win & Mac)
 PowerPoint presentations
 Data files
 And more…
 Digital Design Concepts and
Technical Guide includes
 Printed Student Concepts and
Technical Guides, $21 each
 Studio MX 2004 ISBN 0-619-18397-7
 Studio MX ISBN 0-619-18334-9
Digital Design Staff Development Guide
 Prepares instructors to teach the Digital
Design Curriculum
 Includes project management, design,
research and communication, and technical
skills
 Reproducible binder includes
 Workshops that emphasize content and
methods for teaching courses on web design
and development
 3-day workshop covers 1st semester
(Dreamweaver and Fireworks)
 2-day workshop covers 2nd semester (Flash)
 Participants reflect on skills learned, discuss
ways to use tools and projects in the
classroom, support student learning, and
assess the technology use
ISBN 0-619-18438-8
$121.00 from Course Technology
Student Examples
Sample Student Work - Logos
Sample Student Electronic Portfolio
Sample Student Electronic Portfolio
© Anacortes High School
© Ellensberg High School
© Arlington Elementary School
© Anacortes High School
© Anacortes High School
© Anacortes High School
Supporting the
Digital Design Program
Gathering Support
 Identify key players who can lend support to
your program
 Vocational director
 Technology coordinator
 School principal
 Other colleagues
 Think outside the business or computer
technology department in your school
Promoting Digital Design
 Seek Art credit
 Educate counselors
 Hold showcase days to exhibit student work
 Write articles about Digital Design for school
and local newspapers
Promoting Digital Design
Special K-12 Site License for
Macromedia Studio MX 2004
Studio MX 2004 K-12 Site License
 Includes both Windows and Macintosh






Dreamweaver MX 2004
Flash MX 2004
Fireworks MX 2004
Freehand MX
ColdFusion MX 6.1 Developers Edition (Win only)
Macromedia University’s online Studio MX 2004 courses
for 1 person at your school for 1 year
 Home-use rights for teachers for school-related work
 Curriculum published by Course Technology
 Teacher Resource CDs
 Sample project for both Dreamweaver and Flash
Studio MX 2004 K-12 Site License
 Pricing
 500 or fewer students
 ISBN 0-619-18438-8, $2,500
 501 or more students
 ISBN 0-619-18437-X, $3,500
 Order software and curriculum directly from
Thomson Learning @ 800 824-5179
 Include your complete school information where
the software will be installed
 Include a contact person at that school
Studio MX K-12 Site License Upgrade
 Upgrade your current Studio MX K-12 Site
License from Course Technology:
 500 students or less: $1,875
 501 students or more: $2,625
 Special upgrade pricing available through 6/30/04
 Must provide copy of original invoice as proof of
purchase
Additional Curriculum from Macromedia
Macromedia Studio MX 2004 Step-by-Step
Textbook of projects using Studio
MX 2004 to develop commercial
websites
 Includes projects on Dreamweaver,
Flash, Fireworks and FreeHand
 50 hours of step-by-step instruction and
explanation of Web-authoring tools
 Interactive training modules to introduce
tools
 School price from Course Technology
$35.75
Ships with K-12 Site License
Studio MX 2004 ISBN 0-619-18390-X
Also available:
Studio MX ISBN 0-619-05507-3
Studio MX 2004 Step-by-Step
 Just Studio MX 2004 products (Director and UltraDev
to be covered in other books)
 4-color layout!
 Just a textbook – no duplication allowed
 Numerous teacher materials on instructor resource
CD:
 PowerPoint presentations, lesson plans, learner study
guides, teacher notes, ExamView testing software, and
test bank
Flash Project: Gallery San Luis
website
 Project:
 Create a Flash
website for a
photography studio
 Tool:
 Macromedia Flash
Macromedia Flash project from the textbook:
Macromedia Studio MX 2004 Step-by-Step Projects
Multimedia Projects for Flash and
Dreamweaver
Teaches web design within
academic classes
 Step-by-step projects that integrate
multimedia into other academic subjects
 Reproducible projects for Macromedia
Flash, Dreamweaver, and Fireworks
 Project planning, scheduling and
assessment
 Interactive training modules to
introduce Studio tools
 School price from Course Technology
$105
Studio MX 2004 ISBN 0-619-18394-2
Ships with K-12 Site License
Also available:
Studio MX ISBN 0-619-05514-6
Multimedia Projects
 Updated for Studio MX 2004
 Shipped in 3-ring binder
 Materials are reproducible
 Numerous teacher materials on instructor resource
CD:
 PowerPoint presentations, learner study guides,
teacher notes, ExamView testing software, and test
bank
Electronic Portfolio project
 Project:
 Design an electronic
portfolio website to
share and reflect on
work in a course or
across a subject
 Tool:
 Dreamweaver
Electronic Portfolio project from the teacher guide
Multimedia Projects for Macromedia Flash and
Dreamweaver
Digital Autobiography Project
 Project:
 Design and build a
digital narrative that
incorporates text,
audio, and graphics
 Tool:
 Macromedia Flash
Digital Autobiography project from the teacher
guide Multimedia Projects for Macromedia
Flash and Dreamweaver
Additional Multimedia-Web Design Titles from
Course Technology
Design Professional Series
 Designed for digital
media students and
instructors with in-depth
“why” information
 Quick Reference steps
 Landscape layout
 Professional quality
graphics and design
BASICS Series
 Ideal for introductory,
shorter courses (25+
hours)
 Most simplified
approach of all series
 Covers most popular
features in easy stepby-step format
 Wide range of topics
Shelly Cashman Series
 Unique project-based approach
 Step-by-step, screen-by-screen
instructions keep students on
track
 Comprehensive coverage of
concepts w/numerous hands-on
activities
 Extensive end-of-chapter
exercises reinforce new skills
learned
 Most documents created from
scratch
New Perspectives Series
 Realistic business casebased approach to make
learning meaningful
 Critical thinking and
problem solving skills are
encouraged
 Extensive end-of-chapter
materials build in complexity
 Higher level approach for
comprehensive coverage
Web Warrior Series
 Focus on Web development and
Internet programming for
upcoming Web professionals
 Learn to construct powerful
dynamic Web sites using the
latest Internet technologies
 Students gain concrete skills by
building Web portfolios they can
use outside the classroom
 Professional approach for higher
level classes
Macromedia Studio MX 2004
K-12 Staff Development Guide
Workshops for Using Web Tools in the
Classroom
K-12 Staff Development Guide
 Designed to help K-12 schools
and districts provide teachers with
Macromedia training
 Reproducible 3-ring binder
 Four 1-day workshops
 Teaches web tools with educationally
relevant projects
 Correlated to ISTE teachers
standards
Macromedia Studio MX 2004
ISBN 0-9742273-6-6
 Technology operations and concepts
Macromedia Studio MX
ISBN 0-9742273-0-7
 Productivity and professional practice
$399.00
In Conclusion…
In Conclusion
 Digital Design meets the challenge of business and industry and
education
 Provides real-world curriculum developed as a partnership with
classroom teachers and the leading multimedia and web
developer
 Correlated to national standards with clear measurable objectives
 Value to students
 Teaches higher level thinking skills
 Research and communication
 Project management and collaboration
 Professional design and web development process
 Learn more about Macromedia and Digital Design
 www.course.com/macromediaeducation
Thank You!
For information on all Macromedia
products from Course Technology
www.course.com
To download a copy of this
presentation, go to
www.geocities.com/flweaver2003
[email protected]