Course Overview:

This course is an ideal starting point for beginners interested in pursuing a career in web and graphic design. It combines the technical aspects of web development with the creative elements of graphic design, offering a comprehensive approach to digital design. Students will gain proficiency in web technologies like HTML, CSS, and JavaScript, along with graphic design principles, tools, and techniques. By the end of the course, students will be equipped to create visually appealing and functional websites, design engaging digital assets, and build a professional portfolio. This course emphasizes hands-on projects, preparing students for real-world applications and career opportunities in the web and graphic design industry.

Course Objectives:

Upon successful completion of this course, participants will:

1. Understand and apply the core principles of web and graphic design, including layout, typography, and color theory.
2. Gain practical experience using design tools such as Adobe XD, Figma, Photoshop, Illustrator, and Webflow for web and graphic design tasks.
3. Master HTML, CSS, and JavaScript to create responsive, functional websites.
4. Understand user experience (UX) and user interface (UI) design principles for designing seamless websites and digital experiences.
5. Learn the fundamentals of web accessibility, ensuring designs are inclusive and usable for all users.
6. Build and deploy websites using Content Management Systems (CMS) like WordPress and platforms like GitHub Pages and Netlify.
7. Develop effective communication skills to collaborate with clients and incorporate feedback into design solutions.
8. Create a professional portfolio website to showcase skills and work, improving employability or attracting freelance opportunities.

Course Requirements:

1. No prior experience in web or graphic design is necessary.
2. Basic computer skills and familiarity with using the internet.
3. A passion for learning design concepts and a desire to create beautiful, functional websites.
4. Access to a computer with an internet connection and design software (free trials of Adobe XD, Figma, and other mentioned tools will be provided).

Accreditations:

• Upon successful completion, participants will receive a Certificate of Achievement in Web and Graphic Design.
• The course may count towards Continuing Education Units (CEUs) or Professional Development Units (PDUs), depending on the accrediting institution.

Examination and Award:

• Final Examination: A combination of practical assignments and a written exam covering both web design and graphic design topics. Students will be assessed on their ability to create a fully functional website, apply design principles, and use tools effectively.
• Capstone Project: A hands-on project where students demonstrate their design and development skills by building a website with both graphic design and web development elements.

Examination Weights:

1. Final Examination: 40%
2. Capstone Project: 40%
3. Assignments and Quizzes: 20%

Module 1: Introduction to Web and Graphic Design

Topics:

1. The Role of Web and Graphic Designers
2. Core Design Principles (Balance, Alignment, Contrast, Hierarchy, Proximity)

Learning Outcomes:

1. Understand the distinctions between web design (creating websites) and graphic design (visual elements for branding, logos).
2. Apply fundamental design principles to create balanced and visually appealing layouts for both web and graphic design projects.

Module 2: Web Design Fundamentals

Topics:

1. Overview of Web Technologies (HTML, CSS, JavaScript)
2. User Experience (UX) and User Interface (UI) Design
3. Introduction to Design Tools (Adobe XD, Figma, Webflow)

Learning Outcomes:

1. Gain an understanding of how HTML, CSS, and JavaScript work together to create functional websites.
2. Learn key principles of UX/UI design to create intuitive and user-friendly websites.
3. Get hands-on experience with design tools for building wireframes, prototypes, and interface designs for web projects.

Module 3: HTML and CSS Essentials

Topics:

1. HTML Structure and Elements (Headings, Links, Images, Lists)
2. CSS Basics and Styling (Text, Colors, Layouts)
3. Responsive Design with Media Queries

Learning Outcomes:

1. Master the basics of HTML to build the structure of a webpage, including semantic HTML for better SEO and accessibility.
2. Learn CSS to style websites, including layout techniques like Flexbox and Grid.
3. Understand responsive design principles and implement media queries to make websites mobile-friendly.

Module 4: Graphic Design Principles and Tools

Topics:

1. Typography and Color Theory
2. Image Editing and Logo Creation (Adobe Photoshop, Illustrator)
3. Designing for Branding (Visual Identities, Logos, Icons)

Learning Outcomes:

1. Understand how to choose fonts and color schemes that align with brand messaging and design goals.
2. Gain proficiency in Photoshop and Illustrator to edit photos, create logos, and design vector graphics.
3. Learn how to design branding materials like logos and icons that represent businesses and products effectively.

Module 5: Advanced Web Design Techniques

Topics:

1. Advanced CSS Styling (Animations, Transitions)
2. Introduction to JavaScript for Designers (Interactivity, Forms, Sliders)
3. Web Accessibility (WCAG Guidelines, Making Websites Inclusive)

Learning Outcomes:

1. Enhance your CSS skills by incorporating animations, transitions, and responsive elements to improve website interactivity.
2. Learn basic JavaScript concepts to add interactive features such as buttons, sliders, and forms to websites.
3. Understand web accessibility principles and how to design websites that are inclusive and usable by all, including people with disabilities.

Module 6: Content Management Systems (CMS)

Topics:

1. Setting Up WordPress Websites
2. Installing Themes and Using Plugins (SEO, Forms, Galleries)

Learning Outcomes:

1. Learn how to set up and customize a WordPress website, install themes, and utilize plugins for extended functionality.
2. Understand how to implement basic SEO techniques and optimize content for search engines.

Module 7: Portfolio Development and Web Deployment

Topics:

1. Building a Personal Portfolio Website
2. Deploying Websites with GitHub Pages, Netlify, and Web Hosting Providers

Learning Outcomes:

1. Design and build a personal portfolio website to showcase your web and graphic design projects.
2. Gain experience in deploying websites using platforms like GitHub Pages, Netlify, and traditional web hosting services.

Module 8: Capstone Project

Topics:

1. Real-World Web Design Project (Building a Functional Website)
2. Project Presentation and Feedback

Learning Outcomes:

1. Apply all the skills learned throughout the course to complete a fully functional website for a hypothetical client, integrating both graphic design and web development elements.
2. Present your capstone project to peers and instructors for feedback and refinement.