School of Architecture and Design \ Visual Communication Design
Course Credit
ECTS Credit
Course Type
Instructional Language
Programs that can take the course
Visual Communication Design
In this course, each student is expected to individually develop a visual communication web design project using HTML and CSS. Students will select a topic of their choice, design the visual interface, and write the necessary code to build a functional website. Successfully completing the project within the given timeframe is a core requirement of the course.
Textbook and / or References
"1. Jennifer Niederst Robbins – Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics
2. Jon Duckett – HTML and CSS: Design and Build Websites
3. Jeffrey Zeldman – Designing with Web Standards
4. Ethan Marcotte – Responsive Web Design
5. Steve Krug – Don't Make Me Think: A Common Sense Approach to Web Usability
6. Dan Cederholm – CSS3 for Web Designers
7. Jeremy Keith – HTML5 for Web Designers
8. Rachel Andrew – The New CSS Layout
9. Vitaly Friedman – Smashing Book: Modern Web Design and Development
10. Luke Wroblewski – Mobile First"
This course aims to equip students with the knowledge and experience needed to digitally implement a visual communication design project. Through research, development, presentation, and adaptation for digital platforms, students will gain essential skills to design, develop, and present web-based visual communication projects.
1. Understands the technical infrastructure of the web environment, browser dynamics, and the working principles of digital media formats on the web.
2. Effectively uses industry-standard software and tools required for user interface (UI) design and web development processes.
3. Designs aesthetic and functional web interfaces by focusing on user experience (UX).
4. Plans and manages a website project from beginning to end through the stages of wireframing, information architecture, and prototyping.
*The following weekly plan may vary depending on the year and semester of the course:
WEEKS 1 & 2 & 3
HTML CODING STANDARDS
What do HTML and CSS mean? Why are they important?
What are the methods of using HTML and CSS infrastructure on websites?
Software development editors and methods of use
HTML coding standards
HTML tags and their usage features
Use of interactive HTML forms
WEEK 4
ASSIGNMENT
ASSIGNMENT 1: PRESENTATION
Develop a multi-page website with basic features by using HTML tags and their properties. During the development process, make use of the features of the Visual Studio Code editor and benefit from server simulation through a compatible plug-in.
HTML assignments must consist of a minimum of 3 and a maximum of 5 HTML pages.
ASSIGNMENT 2: HTML Website
Using HTML tags, apply font and color choices, and use table tags for the basics of layout. Examine the properties of link tags in order to navigate between pages.
Enrich your page with photographs, videos, and vector elements.
WEEK 5
ASSIGNMENT 3: COMPLETION OF THE BASIC WEBSITE TO BE CREATED WITH HTML TAGS
Assignments must be submitted by compressing the HTML files and the folder containing the related visual elements, and sending them via e-mail.
INTRODUCTION TO CSS
CSS syntax rules
Use of comments
CSS selectors: class and identity
Style priority rules
Shorthand coding standards
WEEK 6
CSS PROPERTIES
Use of backgrounds
Text properties
Use of font properties
Google Fonts integration
WEEK 7
CSS DESIGN ELEMENTS
Use of margin and padding
Outline definitions
Use of advanced font properties
Display method
Use of position and layers
WEEK 8
CSS ANIMATION
Use of float and clear
Advanced use of CSS selectors
Use of transition for simple animation
Use of 2D and 3D transform
WEEK 9
CSS LAYOUT METHODS
Use of Flex
Prefix controls for browser compatibility
Use of Grid
WEEK 10
CSS DEVICE-ORIENTED DESIGN METHODS
Responsive and adaptive device-oriented design principles
ASSIGNMENT 1: HTML and CSS Website
Enriching the previously prepared HTML assignment with the CSS properties learned in the course. Assignments must consist of a minimum of 3 and a maximum of 5 HTML pages. The CSS file must be located in a separate folder.
WEEK 11
ASSIGNMENT 2: COMPLETION OF THE BASIC WEBSITE TO BE CREATED USING HTML AND CSS PROPERTIES
Assignments must be submitted by compressing the HTML files and the folder containing the related visual elements, and sending them via e-mail.
WEEK 12
FINAL PROJECT
| Tentative Assesment Methods |
| Activities |
Number |
Weight (%) |
| Course Attendance/Participation |
- |
- |
| Laboratory |
- |
- |
| Application |
- |
- |
| Homework |
2 |
60% |
| Project |
1 |
40% |
| Presentation |
- |
- |
| Field Work |
- |
- |
| Internship |
- |
- |
| Course Boards |
- |
- |
| Quiz |
- |
- |
| Midterm Exam |
- |
- |
| Final Exam |
- |
- |
|
Total |
100% |
| Tentative ECTS-Workload Table |
| Activities |
Number/Weeks |
Duration (Hours) |
Workload |
| Course Hours (first 6 weeks) |
6 |
4 |
24 |
| Course Hours (last 6 weeks) |
6 |
4 |
24 |
| Laboratory |
- |
- |
- |
| Application |
- |
- |
- |
| Homework |
2 |
36 |
72 |
| Project |
1 |
48 |
48 |
| Presentation |
- |
- |
- |
| Field Work |
- |
- |
- |
| Internship |
- |
- |
- |
| Course Boards |
- |
- |
- |
| Preparation for Quiz |
- |
- |
- |
| Preparation for Midterm Exam |
- |
- |
- |
| Final Exam |
- |
- |
- |
| Preparation for Final Exam |
- |
- |
- |
| Study Hours Out of Class (preliminary work, reinforcement, etc.) |
- |
- |
- |
| Total Workload | | |
168 |
| Total Workload / 30 | | |
168 / 30 |
| | |
|
| ECTS Credits of the Course | | |
6 |
|
Program Outcome
**
|
| 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
|
Course Outcome
|
| 1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 3 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|