Web Design 2

The web is accessible to all human beings on the planet; websites should be universally designed to meet everyone’s needs. Using automation and online resources, explore grid systems, type systems, and visual design best practices to construct modular and flexible web architectures and rich interactions that support the many different screen dimensions, platforms, and needs of people connected to the open web.

Instructor Course code Prerequisites
Self-directed LTW0002 Web Design 1
Classes Labs Homework
None None ~90 h
  1. 1

    Review: components

    CLRs: 3

    Review ideas & code from previous terms to get your code brains working again.

    1. Web Dev 2 intro slide deck
    2. Semantics schemantics
    1. Flexbox videos
    1. Euro just doing semantics
    2. Flexible info card
  2. 2

    Review: thinking in grids

    CLRs: 3

    Review how to plan & code webpages using CSS grids—getting that code brain back in business.

    1. Sketch those grids
    1. CSS grids videos
    1. Speak your code
    2. Components on a grid
  3. 3

    Responsive design

    CLRs: 3

    Export media queries & how to adapt your layouts to different screen sizes with more drastic adjustments.

    1. Media queries slide deck
    1. All devices setup videos
    2. Media queries videos
    1. Em Enforcer
    2. Modularity mindfulness
  4. 4

    Inclusive design

    CLRs: 3

    Apply knowledge of accessiblity tools and continue to make websites inclusive for all humans.

    1. Using VoiceOver
    1. Content accessibility videos
    2. Accessibility for design videos
    1. Accessibility Adapter
    2. Hear me, oh content!
    3. Kraken good accessibility
  5. 5

    Images & apps

    CLRs: 1

    Learn how to properly create assests in professional design tools & export them for the web.

    1. Preparing images slide deck
    2. Image formats
    1. Images for the web videos
    1. Exporting from Photoshop
    2. Exporting from Illustrator
    3. Production prepping & compression
  6. 6

    The power of SVG

    CLRs: 1

    Explore the power of SVG, learning how to write by hand, and creating icon sets.

    1. Advanced SVG slide deck
    1. Advanced SVG videos
    1. SVG smiley face
    2. Using SVG icons
    3. SVG icons sets
  7. 7

    Performance

    CLRs: 1

    Apply performance best practices to websites, making sure exported graphics aren’t a detriment to user experience.

    1. Performance slide deck
    1. Performance videos
    1. Performance Prognosticator
    2. Fastness fixer
  8. 8

    Reading week—no classes

    CLRs: 1, 2, 3

    No classes, labs or new homework this week—get caught up!

    1. Mid-course feedback
    1. Continue assignments
  9. 9

    Independent project

    CLRs: 1, 3

    Use the next few weeks to define, plan and create a large-scale, multi-page website.

    1. Independent website project slide deck
    1. Define your project
    2. Plan your project
  10. 10

    Transitions

    CLRs: 2

    Learn how to add simple transition to designs to add an extra fanciness—and usability.

    1. Transforms & transitions slide deck
    1. Position & z-index videos
    1. Fancy hover boxes
    2. Project plan check-in
    3. Plan your project
  11. 11

    Animations

    CLRs: 2

    Explore keyframe-based animations that can be added to websites for that extra oomph.

    1. CSS animations slide deck
    1. CSS animations & effects videos
    1. Animated clock
    2. Project plan critique
    3. Code your project
  12. 12

    Accessibility & effects

    CLRs: 1, 2, 3

    Loop back to accessibility to confirm our graphics, transitions & animations are still compatible with inclusive design.

    1. Effects + a11y slide deck
    1. Accessibility of animations & effects videos
    1. Prefers accessibility
    2. Code your project
  13. 13

    Work period

    CLRs: 1, 2, 3

    A full work period to work on your website project, get feedback & get help.

    1. Project check-in
    2. Code your project
  14. 14

    Testing

    CLRs: 1, 2, 3

    Using peer resources, get your website testing in all browsers, accessibility tools & performance tools.

    1. Browser testing
    2. Accessibility testing
    3. Performance testing
    1. Request for grade
    2. Code your project
  15. 15

    Assessment week—no classes

    CLRs: 1, 2, 3

    Assessment week: no classes—just extra time to finalize any incomplete assignments.

    1. College course feedback

Marking scheme

Activities & lessons

10% — 9 @ 1.1% each

  • Complete/incomplete
  • Formative assessment

Videos

20% — 12 @ 1.7% each

  • Complete/incomplete
  • Must reach 80% of playlist duration to receive pass
  • Formative assessment

Exercises

40% — 15 @ 2.7% each

  • Complete/incomplete
  • Formative assessment

Big projects

30% — 2 @ 15.0% each

  • Proof you learned everything
  • Summative assessment

Course learning requirements

1
Export and compress web graphics following online performance best practices

  • Choose properly between common web image formats: JPG, PNG, SVG
  • Export images from graphical design tools into the correct format
  • Optimize and compress images for the best performance
  • Get feedback from automated tools and apply suggested changes

2
Employ mathematical skills to align and time elements for interactive and motion effects that improve website user experience

  • Use positioning, coordinate systems and transformations to align items on the screen
  • Apply animations on user interaction and automatically
  • Demonstrate application of math skills while creating interactions & animations
  • Manipulate illustrated graphics to add animations and interactions

3
Plan, prototype and develop websites for multiple screen sizes and multiple use cases while maintaining accessibility

  • Make adaptive layouts that change and respond to different devices, screen sizes & type sizes
  • Wireframe pages, sketch components & how they adapt to different screen sizes
  • Execute coding best practices to enhance accessibility of web pages
  • Test websites on multiple devices for the best compatibility & accessibility

Vocational learning outcomes

Description Taught Assessed Culminating performance
1 — Conceptualize and develop design solutions using principles of design to create visual communications that meet the needs of the projects.
2 — Employ the design process to create design solutions that meet the project objectives and the needs of the client and/or user.
3 — Plan, create and use photography, illustration and typography in design layouts to meet the requirements of the creative brief.
4 — Design, develop and create a variety of media products using relevant, current and/or emerging technologies.
5 — Communicate ideas, design concepts and opinions clearly and persuasively to others.
6 — Use recognized industry practices throughout the design process and related business tasks.
7 — Plan, implement, and evaluate graphic design projects using project management skills to deliver quality work to clients according to schedule and within budget.
8 — Complete all work in a professional and ethical manner, and in accordance with all applicable legislation and regulations.
9 — Keep current with visual media design trends, technologies and industry practices using strategies that enhance work performance and guide professional development.
10 — Identify and apply discipline-specific practices that contribute to the local and global community through social responsibility, economic commitment and environmental stewardship.

Essential employability skills

Description Taught Assessed Culminating performance
1 — Communicate clearly, concisely and correctly in the written, spoken and visual form that fulfills the purpose and meets the needs of the audience.
2 — Respond to written, spoken or visual messages in a manner that ensures effective communication.
3 — Execute mathematical operations accurately.
4 — Apply a systematic approach to solve problems.
5 — Use a variety of thinking skills to anticipate and solve problems.
6 — Locate, select, organize and document information using appropriate technology and information systems.
7 — Analyze, evaluate and apply relevant information from a variety of sources.
8 — Show respect for diverse opinions, values, belief systems and contributions of others.
9 — Interact with others in groups or teams in ways that contribute to effective working relationships and the achievement of goals.
10 — Manage the use of time and other resources to complete projects.
11 — Take responsibility for one's own actions, decisions and consequences.