Skip to main content
10201132 Designing for Development
Course Information
Description
Prepare digital designs for development, structuring files and design systems so intent survives the handoff. Direct AI coding tools to build working interfaces from those specifications, then evaluate the results against design intent, accessibility standards, and functional requirements. Revise the specification when the build reveals what was left unsaid, version the work in Git, and deploy publicly. Produce a portfolio case study tracing the path from design file to working product.
Total Credits
3
Prior Learning Assessment
  • None

Course Competencies (Course Outcomes)
  1. Structure design files for development handoff
    Assessment Strategies
    Skill Demonstration
    Project
    Criteria
    Organize pages, frames, and layers so another person can navigate the file without verbal explanation
    Name components, styles, and variables using a consistent convention
    Separate in-progress exploration from work intended for handoff
    Remove unused, hidden, and detached elements before handoff
    Structure the file so its organization maps predictably to a code structure

  2. Develop a component library using design tokens and variants
    Assessment Strategies
    Skill Demonstration
    Project
    Criteria
    Define color, type, spacing, and elevation tokens as reusable styles or variables
    Build components with named variants covering each documented state
    Apply tokens consistently rather than overriding values on individual instances
    Structure the library so components can be reused across screens without modification
    Document naming conventions so the library translates predictably into code

  3. Document design intent using industry-standard terminology
    Assessment Strategies
    Written Product
    Project
    Criteria
    Use accurate terminology for layout, components, states, and interaction patterns
    Specify responsive behavior at defined breakpoints
    Document interaction states including hover, focus, active, disabled, empty, loading, and error
    Identify edge cases not represented in the visual design
    Write acceptance criteria that define correct implementation

  4. Produce front-end interfaces using AI coding tools
    Assessment Strategies
    Skill Demonstration
    Project
    Criteria
    Supply the context an AI coding tool requires to match documented design intent
    Sequence a build into scoped requests rather than a single broad instruction
    Produce an interface that runs without errors
    Document the prompts and decisions that produced the result

  5. Evaluate generated code against design intent and functional requirements
    Assessment Strategies
    Critique
    Written Product
    Criteria
    Compare the built interface against the documented specification and identify discrepancies
    Verify that the interface performs correctly across the specified breakpoints
    Identify code that is fragile, redundant, or does not perform as described
    Determine when to redirect the tool and when to intervene manually
    Explain what can and cannot be verified about generated code

  6. Test interfaces against accessibility standards
    Assessment Strategies
    Skill Demonstration
    Written Product
    Criteria
    Test keyboard navigation and focus order across the interface
    Verify semantic structure and programmatic labeling
    Measure color contrast against WCAG AA
    Test the interface using a screen reader
    Document each failure with the standard it violates and the correction applied

  7. Revise design specifications based on build outcomes
    Assessment Strategies
    Project
    Written Product
    Criteria
    Trace an implementation failure back to an ambiguity in the specification
    Revise documentation to resolve the identified ambiguity
    Rebuild the affected component and confirm the revision resolved the issue
    Compare initial and revised specifications and describe what changed

  8. Manage project versions using Git
    Assessment Strategies
    Skill Demonstration
    Project
    Criteria
    Commit work in increments with messages that describe the change
    Use branches to separate in-progress work from a working version
    Push work to a remote repository on a regular cycle
    Restore a prior version of a file or project
    Maintain repository documentation that describes the project

  9. Apply ethical standards to the use and disclosure of AI-generated work
    Assessment Strategies
    Scenario Response
    Written Product
    Criteria
    Distinguish between work you directed, work you authored, and work a tool generated
    Disclose the role of AI tools in portfolio and professional contexts
    Identify licensing and attribution obligations for generated code and assets
    Evaluate whether a generated solution introduces bias, exclusion, or harm
    Explain a decision to reject or override a tool's output

  10. Critique design and development work in peer review
    Assessment Strategies
    Critique
    Oral Presentation
    Criteria
    Identify specific strengths and specific problems in another student's work
    Reference the specification or accessibility standard supporting the observation
    Propose an actionable next step rather than a general reaction
    Apply peer feedback to your own project and document the resulting change

  11. Develop a portfolio case study documenting the process
    Assessment Strategies
    Case Study
    Portfolio
    Presentation
    Criteria
    Trace the project from design file to functioning interface
    Show the difference between the initial specification and the final build
    Describe your role in directing and evaluating generated work
    Present the case study to an audience outside the course
    Publish the case study in a format appropriate for a professional portfolio

  12. Prepare a project for deployment and public access
    Assessment Strategies
    Skill Demonstration
    Project
    Criteria
    Deploy a working interface to a publicly accessible URL
    Configure the build and hosting settings a project requires to run outside a local environment
    Identify the technical components a project would require to operate at production scale, including data storage, authentication, and content management
    Distinguish between what a prototype demonstrates and what a production system would require
    Document the known limitations of the deployed version