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 DSN1713 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.

  2. 2

    Review: thinking in grids

    CLRs: 3

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

  3. 3

    Responsive design

    CLRs: 3

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

  4. 4

    Inclusive design

    CLRs: 3

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

  5. 5

    Images & apps

    CLRs: 1

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

  6. 6

    The power of SVG

    CLRs: 1

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

  7. 7


    CLRs: 1

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

  8. 8

    Reading week—no classes

    CLRs: 1, 2, 3

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

  9. 9

    Independent project

    CLRs: 1, 3

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

  10. 10


    CLRs: 2

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

  11. 11


    CLRs: 2

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

  12. 12

    Accessibility & effects

    CLRs: 1, 2, 3

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

  13. 13

    Work period

    CLRs: 1, 2, 3

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

  14. 14


    CLRs: 1, 2, 3

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

  15. 15

    Assessment week—no classes

    CLRs: 1, 2, 3

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

Marking scheme

Activities & lessons

10%9 @ 1.1% each

  • Complete/incomplete
  • Formative assessment


20% — 12 @ 1.7% each

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


40% — 15 @ 2.7% each

  • Complete/incomplete
  • Formative assessment

Big projects

30% — 2 @ 15.0% each

  • Proof you learned everything
  • Summative assessment

Grading system

Algonquin College’s grading system is based on letter grades. Below are qualitative descriptions as well as numerical equivalents for the letter grades.

To succeed in the Graphic Design program you must…

  • Achieve a minimum passing grade of 50% (D-) in all courses across all levels
  • Achieve a minimum cumulative grade of 63% (C / 2.0)

Refer to Algonquin’s policy to learn how to calculate your grade point average.

Grade designations

A — Excellent
Course learning requirements are met in a consistently outstanding manner.
B — Superior
Course learning requirements are met and exceed the requirements.
C — Satisfactory
Course learning requirements are met satisfactorily.
D — Marginal
Course learning requirements are met, but achieved at a marginal level. consistent, ongoing effort is required for continuing success in the program.
F — Unsatisfactory (failure)
Course learning requirements are not met. No credit is awarded.

Numeric value conversions

Percent grade Letter grade Numeric grade

Students are expected to meet evaluation and completion deadlines as stated in course outline and course section information documents. In circumstances where evaluation and/or completion deadlines are missed or student performance has been affected by a temporary or permanent disability (including mental health), interim or retroactive accommodations may be considered. In such instances, please consult your course faculty member. For other situations where deferral of evaluations may be warranted, please refer to college policy AA21.

Course learning requirements

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

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

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.

Program policies

Evaluation/Earning Credit

The following will provide evidence of your learning achievement. In order to understand the importance of meeting deadlines in the field, students will be required to complete assignments and projects within a given period of time. Due to the nature of the Graphic Design industry, all late assignments, handed in within one hour after deadline (to be determined by instructor), will be given an F (value of 0 - 49%), depending on the quality. Any assignment handed in after these terms, not handed in (NHI) or Incomplete will be given a zero (0). For the student’s benefit, feedback on performance will be provided.

Incomplete projects are those that do not meet all the criteria set out by the instructor for that particular project.

Passing & Promotion

The Graphic Design program uses two determinants for student advancement to the next level of their studies: one is a minimum passing grade and the other is a minimum progression grade.

The achievement levels are as follows:

  1. Achieve a minimum passing grade of 50% (D-) in all courses across all levels.
  2. Achieve a minimum cumulative grade of 63% (C / 2.0).

Passing grades will be calculated at the end of the semester. Any students not meeting these minimum requirements will not be permitted to progress to the next level. Progression in the program also adheres to respective course pre- and co-requisites. Students must meet the eligibility requirements for each course at every level. Pre- and co-requisite requirements can be found in the course outlines. The Graphic Design program is integrated. Most classes in the higher levels depend upon students having the skills and knowledge from courses taken in earlier semesters. Students cannot take these courses without their prerequisites.


All assignments must be submitted as directed in writing, online and orally, in class. Each assignment has its own instructions. It is the student’s responsibility to adhere to the instructions for each assignment.

Even if a deadline is missed, it is important for the student to submit the assignment. It will be held by the instructor. It could be used to increase the student’s grade at the faculty’s discretion.


  1. Students who do not hand in a project on time or not at all, must initial and acknowledge this with their instructor in the instructor’s marking book.
  2. Students must retain all projects, tests and assignments handed back to them until the end of the semester.
  3. Organizing, naming and submitting files adhering to precise instructions is an important skill in the practice of Graphic Design. As such, 20% of all assignment values is based on adhering to instructions. These instructions will be given orally in class and/or online. If files are submitted in such a way that they are not usable to produce the final product, the student can earn a grade of zero on that assignment at the faculty’s discretion.


Plagiarism is the submission of work that is in whole or in part someone else’s work that you claim as your own. You should be aware of the College policy on plagiarism (E-43), a new policy in effect August 29, 2005. Please see the Algonquin College web site for a detailed explanation of this policy. Plagiarism will result in a disciplinary action by the School of Media & Design.


Students are expected to attend all scheduled classes. Attendance means arriving on time and staying for the entire class. In order to prevent disruptions of the class in progress, late students will be required to wait outside the classroom until the instructor opens the door to let them in.

As a courtesy, students unable to attend a class are asked to notify the instructor before the start of the class.

If a student misses class, they are responsible for getting information missed in that class. They assume all responsibility for any miscommunication that may arise in obtaining missed information and assignments outside of class time.

This is not a correspondence course. In order to earn points for in-class assignments, students must be present in class. In the case of an un-excused absence, students can complete the assignment with the help of the online course material, but no points will be earned. Feedback will, however be provided on the student’s performance. If an absence is unavoidable, please communicate with faculty before the class to make them aware of it. Faculty will have the option to excuse your absence and allow completion of the assignment outside of class.

Resolving Grievances

When a student has a grievance related to a course, their first recourse must be to communicate with the faculty member in question. In order to avoid inappropriate confrontations, they must make an appointment to meet with faculty outside of class time in a private setting.

If the grievance is not resolved, the student should meet with a program coordinator to seek redress. Failing resolution with the coordinator, the student will be directed to suggested next steps by that coordinator, depending on the circumstances of the situation.

Students must avoid prematurely contacting chairs, deans and even the president of the college. They must adhere to the prescribed process. Skipping any of these steps will see the student returned to the appropriate person to proceed as described above.

Respect for Confidentiality

Students are required to respect the confidentiality of employer, client and/or patient information, interactions, and practices that occur either on Algonquin College premises, or at an affiliated clinical/field/co-op placement site. Concerns regarding clients, patients, and/or employer practices are to be brought to the attention of the program coordinator, or designated field/clinical/co-op placement supervisor so that they may be resolved collaboratively. Such concerns are not to be raised publicly either verbally, in writing, or in electronic forums. These matters are to be addressed through established program communication pathways.

College policies


Algonquin College provides all full-time students with an e-mail account. This is the address that will be used when the College, your professors, or your fellow students communicate important information about your program or course events. It is your responsibility to ensure that you know how to send and receive e-mail using your Algonquin account and to check it regularly.

Students with disabilities

If you are a student with a disability, you are strongly encouraged to make an appointment at the Centre for Accessible Learning to identify your needs. Ideally, this should be done within the first month of your program, so that a Letter of Accommodation (LOA) can be provided to your professors. If you are a returning student, please ensure that professors are given a copy of your LOA each semester.

Retroactive accommodations

Students are expected to meet evaluation and completion deadlines as stated in course outline and course section information documents. In circumstances where evaluation and/or completion deadlines are missed or student performance has been affected by a temporary or permanent disability (including mental health), interim or retroactive accommodations may be considered. In such instances, please consult your course faculty member. For other situations where deferral of evaluations may be warranted, please refer to college policy AA21.

Academic integrity & plagiarism

Adherence to acceptable standards of academic honesty is an important aspect of the learning process at Algonquin College. Academic work submitted by a student is evaluated on the assumption that the work presented by the student is their own, unless designated otherwise. For further details consult Algonquin College Policies AA18: Academic Dishonesty and Discipline and AA20: Plagiarism.

Student course feedback

It is Algonquin College’s policy to give students the opportunity to share their course experience by completing a student course feedback survey for each course they take. For further details consult Algonquin College Policy AA25: Student Course Feedback.

Use of electronic devices in class

With the proliferation of small, personal electronic devices used for communications and data storage, Algonquin College believes there is a need to address their use during classes and examinations. During classes, the use of such devices is disruptive and disrespectful to others. During examinations, the use of such devices may facilitate cheating. For further details consult Algonquin College Policy AA32: Use of Electronic Devices in Class.

Transfer of credit

It is the student’s responsibility to retain course outlines for possible future use to support applications for transfer of credit to other educational institutions.

It is the student’s responsibility to refer to the Algonquin College Policies website for the most current information.