Web Graphic Design Mockup
Day 1 & 2: Adobe Illustrator Fundamentals & Vector UI Assets
| Day 1: Vector Essentials & Shapes: Master artboards, the pen tool, shape builder, and vector paths for clean visual assets. Leverage AI to brainstorm icon concepts and vector asset styles. |
| Day 2: UI Kits & Scalable Assets: Design custom buttons, cards, and vector components using layout grids. Establish scalable color palettes and vector text hierarchies for web integration. |
| Question-and-Answer Session with Collaborative Activities |
Day 3 & 4: Adobe XD Interactive Wireframing & Prototyping
| Day 3: Rapid Wireframing: Navigate artboards, layout grids, and UI kits to translate vector concepts into structured desktop and mobile web wireframes with AI layout guidance. |
| Day 4: Prototyping & Micro-Interactions: Link artboards, add transition animations, and simulate user navigation. Design component states (hover, active, disabled) for interactive web buttons and menus. |
| Question-and-Answer Session with Collaborative Activities |
Day 5 & 6: Adobe Photoshop Image Manipulation & Web Banners
| Day 5: Layers & AI Generative Fill: Master layers, masking, adjustment layers, and smart objects. Utilize AI generative tools to expand canvas edges, swap backgrounds, and generate visual placeholders. |
| Day 6: Web Hero Sections & Raster Workflow: Combine typography, photography, and UI layers to create high-impact landing page headers. Slice images and optimize web file formats (JPEG, PNG, WebP). |
| Question-and-Answer Session with Collaborative Activities |
Day 7 & 8: Canva for Rapid Marketing Collateral & Social Proof
| Day 7: Template Customization & Brand Kits: Leverage Canva’s ecosystem to design fast marketing collateral, testimonials, and blog banners while establishing core brand consistency. |
| Day 8: Multi-Page Workflows & AI Magic Design: Build social proof carousels, ad creatives, and lead-magnet mockups using AI design tools to auto-generate matching layout variations. |
| Question-and-Answer Session with Collaborative Activities |
Day 9 & 10: Figma Collaboration & Design Systems
| Day 9: Auto Layout & Component Libraries: Master Figma’s Auto Layout and constraints for responsive web components. Build reusable UI components, variants, and design system foundations. |
| Day 10: Advanced Prototyping & Developer Handoff: Create fluid micro-interactions with Smart Animate. Organize layers, inspect CSS code snippets, and prepare clean files for front-end developer handoff. |
| Question-and-Answer Session with Collaborative Activities |
Day 11 & 12: Design Strategy, Research & Ideation
| Day 11: UX/UI Research & Moodboarding: Understand target audience personas, user journeys, and competitor benchmarking. Curate style tiles, color palettes, and typography vibes using AI brainstorming prompts. |
| Day 12: Information Architecture & Concept Validation: Map out sitemaps and content hierarchy. Use AI to stress-test your design logic, copywriting hierarchy, and conversion pathways. |
| Question-and-Answer Session with Collaborative Activities |
Day 13 & 14: Web Principle Design & Multi-Device Execution
| Day 13: Core Design Principles & Structure: Implement visual hierarchy, contrast, whitespace, alignment, and Gestalt principles using any of your preferred prepared tools (Figma, XD, or Photoshop). |
| Day 14: Responsive Multi-Device Layouts: Design desktop, tablet, and mobile responsive views. Conduct accessibility (WCAG) checks for proper color contrast and touch target sizes. |
| Question-and-Answer Session with Collaborative Activities |
Day 15: Branding Design & Social Media Graphics
| Day 15: Cross-Platform Brand Extension: Translate your website’s design system into cohesive social media graphics (banners, ad posts, profile kits) maintaining brand voice and image style across all channels. |
| Question-and-Answer Session with Collaborative Activities |
Day 16: Capstone Project Details, Presentation & Launch
| Day 16: Final Portfolio Showcase: Review capstone deliverables (complete multi-device website mockup + branding suite + design system). Conduct peer/AI critiques and present your fully realized mockups in a professional showcase format. |
| Question-and-Answer Session with Collaborative Activities |
Why Should You Enroll in This Class?
| COURSE REQUIRED |
| – HTML & CSS (Github) or Related Certification |
| TOOLS REQUIRED |
| Visual Studio, Laptop or Desktop, Browsers Google Chrome, Mozilla, Safari, Opera. Lesson Tools: Headset, Headphone, Quality Internet Connection can handle Zoom Google Fonts Download and Install Adobe Photoshop (Portable Provided Windows Only) Adobe Illustrator (Portable Provided Windows Only) Adobe XD (Portable Provided Windows Only) Canva (Free Account) Figma (Trial Account) Premium Account Examinest Valid for 1 Year ( Not convertible cash ) |
100% Full Tuition Refund for the Top 3 Students: Complete all 16 workshop days and build your final project to compete for a full refund.
Dual-Purpose Capstone Project: The final project will be assigned after completing the 16-day curriculum, serving simultaneously as your comprehensive evaluation and your personal portfolio.
Limited Capacity: Only 25 students per class to ensure personalized guidance and support.
Daily Schedule: 4 hours per session, broken down into 3 hours of structured instruction and 1 hour of Q&A and collaboration.
NOTE: Student/Participant Qualification:
This Course only for 18 years old above, Minor or 18yrs old below are not invited to enroll.
| Recommended Next Course (Road Map) Ideas |
| Front End Developer WordPress / Web Designer HTML & CSS/Bootstrap Guide with AI HTML & CSS/Tailwind Guide with AI Vanilla JavaScript Foundation DOM PHPWordPress Essential Basic/Core Principle PHP WordPress Theme Development Website Design with WordPress AI Guide |
NOTE: Student/Participant Qualification:
This Course only for 18 years old above, Minor or 18yrs old below are not invited to enroll.
