CST8318 Deliverables

Every week there will be work for you to complete inside or outside of class. Some exercises will be larger than others. There will be 6 exercises (20%), midterm (25%), Final project (40%), and 3 quizzes (15%).

Exercises 20%

Exercise 1 — Image Composition

Refer to Brightspace for your section's due date.

In this exercise, you'll enhance your skills in non-destructive masking and background replacement, progressing to create a unified composition by blending multiple images into a visually and narratively compelling scene.

View Details

Exercise 2 — Photo Retouching

Refer to Brightspace for your section's due date.

In this exercise, you'll apply the retouching techniques learned in class, emphasizing the importance of using non-destructive editing methods throughout the task.

View Details

Exercise 3 — Logo Recreation

Refer to Brightspace for your section's due date.

In this exercise, you'll learn how to use basic shapes for logo creation using simple shapes and then utilizing pathfinder tools and anchor point manipulation

View Details

Exercise 4 — Gradients in Nature

Refer to Brightspace for your section's due date.

In this exercise, you will use Adobe Illustrator's gradient tools to transform a real-life landscape photograph into a vibrant, gradient-rich illustration, enhancing your skills in gradient techniques, color blending, and vector illustration. By tracing an actual photo, you'll learn to apply gradients effectively to convey depth, dimension, and natural color variations, resulting in a cohesive and visually appealing landscape design.

View Details

Exercise 5 — Creating Effective Icons

Refer to Brightspace for your section's due date.

In this exercise, you'll design a cohesive set of icons, ensuring they harmonize in style and functionality.

View Details

Exercise 6 — Animated SVG

Refer to Brightspace for your section's due date.

In this exercise, you'll create an engaging loader using animated SVG in Adobe Illustrator, focusing on design aesthetics, clean export setup, and CSS-based animation styling.

View Details

Midterm 25%

Website Design Assets

For your midterm project, you'll craft a comprehensive suite of website design assets, encompassing everything from optimized images to bespoke icons, leveraging the capabilities of both Adobe Photoshop and Illustrator.

Submission 1

Refer to Brightspace for your section's due date.

Submission 2

February 23rd @11:59pm

View Details

Final Project 40%

Part 1: Low-fidelity Wireframes

Refer to Brightspace for your section's due date.

In part 1 of your final project, you'll develop a series of low-fidelity wireframes, laying the foundational design blueprint for a website.

View Details

Part 2: Design System

Refer to Brightspace for your section's due date.

In part 2 of your final project, you'll develop a mini design system, creating guidelines and standards for elements such as typography, color palettes, and UI components to ensure consistency and coherence in your design approach.

View Details

Part 3: High-fidelity Wireframes

Refer to Brightspace for your section's due date.

In part 3 of your final project, you'll elevate your mid-fidelity wireframes to high-fidelity by meticulously applying the principles and elements from your design system, ensuring a polished and detailed representation of your final design concept.

View Details

Part 4: Interactive Visual Prototype

Refer to Brightspace for your section's due date.

In part 4 of your final project, you'll bring your high-fidelity wireframes to life by integrating interactivity and animations, preparing them for a comprehensive user testing experience that closely simulates the final product.

View Details

Part 5: Presentations

Refer to Brightspace for your section's due date.

In part 5 of your final project, you'll showcase the culmination of your efforts from parts 1 to 5, including a comprehensive presentation and a live demonstration of your interactive prototype, highlighting the journey from initial concepts to the final interactive design.

View Details

Quizzes 15%

Photoshop Quiz

Refer to Brightspace for your section's due date.

Test your knowledge of the skills and techniques covered in the Photoshop portion of the course, encompassing everything from basic editing tools to advanced image manipulation

Illustrator Quiz

Refer to Brightspace for your section's due date.

Test your knowledge of the skills and techniques covered in the Illustrator portion of the course, encompassing everything from using the shape tool to creating icons.

Figma Quiz

Refer to Brightspace for your section's due date.

Test your knowledge of the skills and techniques covered in the Figma portion of the course, encompassing everything from using Figma to UI best practices