Digital Design: Foundations of Web Design

Web Design curriculum ISTE NETS-aligned curriculum

Digital Design is a year-long, project based curriculum that develops skills in web design and production using Adobe web tools. You can use the curriculum in web design education or in more general career and technical education.

Digital Design develops key digital-communication skills such as design, project management, and web technology. Each project builds on lessons learned previously.

Digital Design aligns with the International Society for Technology in Education (ISTE) National Educational Technology Standards (NETS) for Students (2007) as well as the new Adobe Certified Associate Web Communication and Rich Media Communication objectives to prepare students for certification.

Note: You will be required to register/log in to view all instructor and student materials.

What's new in Digital Design CS6

  • Completely revamped from the CS5 version with rewritten easy-to-use projects aligning to the latest web standards and including hot topics like HTML5, game design, and mobile application development.
  • New recommendations for alternate methods of teaching with this curriculum, including product-based instruction by using new packages of product technical guides. See the Introduction for more information.
  • HTML5 and CSS3: Presentations, best practice guides, and technical instruction for teaching HTML5 and CSS3, including working with HTML5 video, utilizing web-hosted fonts, and much more.
  • Multiple screens: Instruction on designing and deploying to multiple screens, including design principles, Fluid Grid Layouts, CSS media queries, and more
  • Fireworks: Enhanced prototyping workflow from Fireworks to Dreamweaver and using the Fireworks design tools to export CSS styles.
  • Game design: Game design principles, best practices, and technical instruction for using sprite sheets, character animation, and working ActionScript code to design and develop interactive games in Flash Professional.
  • Mobile applications: Instruction on designing and developing mobile applications with Flash Professional, including best practices, example assets, ready-to-use ActionScript code, and more.

Digital Design curriculum

The Digital Design curriculum includes instructor project guidelines, reproducible student materials, and some media assets. Download the full curriculum or any of the eight individual projects.

Project 1: Widgets

In this project, students are introduced to web design principles, HTML, and CSS. They use these new skills to customize an existing widget. Students also learn about the phases of web production and about publishing web projects.

Project 2: Web Design and Planning

In this project, student teams begin work on a project to build a website for a client. They complete the define, structure, and design phases of the web project production process. Students create wireframes, design comps, storyboards, and a web site prototype.

Project 3: Web Development and Deployment

In this project, student teams use their client-approved design documents for the technical build of a website. They complete the build and test and launch phases of the web project production process. Students extend their skills by using HTML and CSS to build a functional client website.

Project 4: Web Portfolios

In this project, students create the elements of a web portfolio with Adobe Fireworks and Adobe Dreamweaver. They build a website that features work they have completed and work to be completed. As students create their portfolios, they plan, implement, and test their website designs; students then reflect on and evaluate their work.

Project 5: Interactive Games

In this project, students, working in teams, begin using Flash Professional to create a simple interactive game with basic ActionScript 3.0. Students discover ways to use rich media and animation created with Flash for gaming. They develop skills evaluating effective uses of Flash on the web and in gaming, learn about game design, and design and build an interactive game.

Project 6: Digital Narratives

In this project, students use Flash Professional to create a digital narrative for an existing website about a school club or sports team. Students discover how to use techniques in Flash to create various film effects and then apply those techniques to building a narrative. Students learn how rich media and animation they can create with Flash improves digital communication.

Project 7: Mobile Applications

In this project, students use Flash Professional to create a school information application for mobile devices. Students will design and develop the home page, news, campus map, and basic navigation elements of the application.

Project 8: Final Web Portfolios

In this project, students update their web portfolios from Project 4. They build a website that features work they have completed and work to be completed. Students learn about potential careers in web design and development.