Web Design Syllabus

Lecturer: David Petryca – david.p@praguecollege.cz

Week 1: Introduction to Web Design (1 class)

• Course Overview: Objectives, structure, and expectations.
• Web Design Evaluation Task: Analyze and critique existing websites to understand good and bad design practices.

Weeks 2 to 8: Web Design Fundamentals and Tutorials (7 classes)

The topics covered in Weeks 2 to 8 will not follow a strict sequential order. Instead, they will be taught through a series of tutorials and exercises that take a holistic approach, integrating multiple aspects of web design simultaneously. This means that concepts such as design, typography, layout, and interactivity will often be interwoven within each session to provide a more comprehensive learning experience. Due to this approach, it is essential for students to attend all classes, as each session builds on the previous ones and missing a class could impact understanding of the integrated content.

1. Design and Wireframing Using Figma

   • Introduction to Figma: Creating low and high-fidelity wireframes.
   • Design principles: Layout, spacing, and visual hierarchy.

2. Web Typography

   • Choosing the right fonts and typefaces.
   • Implementing responsive and accessible typography.

3. Working with Color

   • Understanding color theory and its impact on design.
   • Creating color schemes and managing contrast for accessibility.

4. Working with Media

   • Integrating images, videos, and icons.
   • Optimizing media for web performance.

5. Layout Design Using CSS Grid

   • Introduction to CSS Grid.
   • Creating complex, responsive grid layouts.

6. Layout Design Using CSS Flexbox

   • Introduction to Flexbox.
   • Creating flexible and adaptive layouts.

7. CSS Animation and Interactivity with JavaScript

   • CSS Animation Techniques: Adding life to your website with animations.
   • Adding Interactivity: Introduction to JavaScript for user interactions (e.g., buttons, forms, sliders).

Weeks 9 to 14: Project Development (6 classes)

1. Weeks 9-10: Wireframing and Design Implementation

   • Develop detailed wireframes and convert them into final designs using Figma.
   • Receive peer and instructor feedback to refine designs.

2. Weeks 11-12: Coding the Project

   • Convert your wireframes into a working website.
   • Implement responsive design using HTML, CSS, and JavaScript.

3. Weeks 13-14: Testing and Refinement

   • Test for functionality, cross-browser compatibility, and responsiveness.
   • Make refinements based on feedback and testing results.

Week 15: Final Presentation (1 class)

• Project Showcase: Present your final website to the class.
• Review and Feedback: Receive constructive feedback from peers and the instructors.