Course Information
SemesterCourse Unit CodeCourse Unit TitleT+P+LCreditNumber of ECTS CreditsLast Updated Date
3VTK 205Web Grafik Tasarımı1+2+02312.10.2026
Course Details
Language of Instruction Turkish
Level of Course Unit Associate Degree
Department / Program Web Design and Development
Type of Program Formal Education
Type of Course Unit Compulsory
Course Delivery Method Face To Face
Objectives of the Course The Web Graphic Design course teaches how to create aesthetic, functional, and user-centric graphic designs for web projects. This course focuses on design principles such as color theory, typography, visual hierarchy, and user experience (UX). Students learn to create graphics, icons, interface components, and mockups suitable for web projects using popular design tools like Adobe Photoshop, Illustrator, and Figma.
Course Content By mastering visual design software, skills in creating professional-grade graphic content for web design are developed.
Course Methods and Techniques Lecture
Question and Answer
Discussion
Demonstration
Hands-on Laboratory Practice
Individual Practice
Project-Based Learning
Problem Solving
Case Study
Computer-Assisted Instruction
Prerequisites and co-requisities None
Course Coordinator Instructor Havva Sarı havva.sari@ankarabilim.edu.tr
Name of Lecturers Instructor HAVVA SARI
Assistants None
Work Placement(s) No

Recommended or Required Reading
Resources https://www.figma.com/
Course Notes Course presentations, application notes, sample codes, and supplementary materials prepared by the instructor will be used.

Course Category
Engineering %25
Engineering Design %75

Planned Learning Activities and Teaching Methods
Activities are given in detail in the section of "Assessment Methods and Criteria" and "Workload Calculation"

Assessment Methods and Criteria
In-Term Studies Quantity Percentage
Mid-terms 1 % 30
Practice 5 % 30
Project 1 % 10
Final examination 1 % 30
Total
8
% 100

 
ECTS Allocated Based on Student Workload
Activities Quantity Duration Total Work Load
Course Duration 15 3 45
Hours for off-the-c.r.stud 15 1 15
Assignments 2 3 6
Mid-terms 1 5 5
Practice 5 1 5
Laboratory 5 1 5
Project 1 4 4
Final examination 1 5 5
Total Work Load   Number of ECTS Credits 3 90

 
Course Learning Outcomes: Upon the successful completion of this course, students will be able to:
NoLearning Outcomes
1 1. Explains and applies visual design principles (color, typography, composition, hierarchy).
2 2. Designs graphic components suitable for web projects using Photoshop, Illustrator, and Figma.
3 3. Develops interface designs in accordance with UI and UX principles.
4 4. Produces and optimizes graphic content in accordance with responsive design principles.
5 5. Selects appropriate file formats for web projects and implements performance-oriented image optimization.

 
Weekly Detailed Course Contents
WeekTopicsStudy MaterialsMaterials
1 Introduction to Web Graphic Design • Differences between graphic design and web design. • Key tools and software used in web graphic design.
2 Color Theory and Web Design • Psychological effects and meanings of colors. • Creating color palettes and ensuring color harmony in web projects.
3 Typography and Fonts • Web typography principles. • Font selection, readability, and accessibility.
4 Visual Hierarchy and Layout Techniques • What is visual hierarchy? • Creating balance in design through layout and grid systems.
5 Web Design with Adobe Photoshop • Basic tools and techniques in Photoshop. • Image and banner design for web projects.
6 Vector Graphics with Adobe Illustrator • Advantages and uses of vector graphics. • Design of web icons and logos.
7 Interface Design with Figma • Introduction to Figma and key features. • Prototyping and interface design.
8 Vize
9 :Image Optimization for the Web • Image file formats (JPEG, PNG, SVG, WEBP). • Image optimization techniques for performance improvement.
10 UI (User Interface) and UX (User Experience) Design • Differences between UI and UX. • Creating user-friendly graphic designs.
11 Icon Design and Usage • Minimalist and effective icon design principles. • Use of icon sets in web projects.
12 Responsive Graphic Design • Creating graphics for responsive design. • Adapting visuals for different devices.
13 Animations and Micro-interactions • Integration of animations into the design using CSS and JavaScript. • Contribution of animations to the user experience.
14 Project Development • Developing a web graphic design project. • Completion and evaluation of design components.
15 Final Sınavı

 
Sustainable Development Goals
Contribution of Learning Outcomes to Programme Outcomes
P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 P11 P12 P13 P14 P15 P16
All 5 2 5 4 4 5 4 4 3 3 4 5 5 5 5 5
C1
C2
C3
C4
C5

  Contribution: 1: Very Slight 2:Slight 3:Moderate 4:Significant 5:Very Significant