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
https://www.w3schools.com/html/default.asp
https://www.w3schools.com/css/defaul
t.asp
https://www.acikakademi.com/
https://gelecegiyazanlar.turkcell.com.tr/konu/egitim/201-html5-css/html5-ve-css-uzerine-genel-bilgiler
https://tympanus.net/codrops/
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. Creates user-centered and effective web pages by applying fundamental design principles and elements in digital environments.
2. Ensures visual hierarchy and aesthetic arrangements in web design by considering user experience (UX) and user interface (UI) principles.
3. Integrates fundamental design elements such as color, typography, visual components, and layout in alignment with the web project structure.
4. Develops interactive and engaging visual storytelling strategies in web products using digital media.
5. Applies planning, problem-solving, and project management skills in the web design process to create a comprehensive design strategy.
6. Reflects symbolic and visual communication elements in web design to reinforce brand identity and deliver clear messaging.
7. Plans page layout and content hierarchy effectively to create a user-friendly navigation structure for websites.
8. Produces dynamic and original web design solutions aligned with current trends using digital design tools and applications.
9. Combines static and dynamic visual elements to design interactive and immersive web pages.
10. Establishes a harmonious balance between text and visual components in web products through typography and layout adjustments.
11. Implements acquired knowledge into web projects with a focus on critical evaluation and continuous improvement, producing innovative solutions.
12. Supports web design projects with professional portfolio presentations, demonstrating digital communication and visual storytelling skills.
Week 1: HTML CODING STANDARDS, What does HTML & CSS mean? Why is it important?, What are the methods of using HTML and CSS infrastructure on websites?
Week 2: Software development editors and usage methods, HTML Coding Standards, Week 3: HTML tags and usage features, HTML interactive form usage
Week 4: Develop a multi-page website with basic features using HTML tags and features. During development, benefit from the features of Visual Studio Code editor and server simulation with compatible add-ons (plug-ins). HTML assignments should consist of minimum 3, maximum 5 HTML pages. Use HTML tags to select fonts, colors, and layout basics with table tags. Examine the features of linking tags to navigate between pages.
Week 5: COMPLETION OF BASIC WEBSITE TO BE MADE WITH HTML TAGS, Assignments should be sent via e-mail by compressing a folder containing HTML files and visual elements connected to them. CSS INTRODUCTION, CSS Writing Rules, Use of Comment Lines, CSS Selectors (class, identity), Style recognition priorities, Shorthand coding standards
Week 6: CSS PROPERTIES, Use of Background, Text properties, Use of Font Properties, Google Font integration
Week 7: CSS DESIGN ELEMENTS, Use of Margin - Padding, Outline definitions, Use of Advanced Font Properties, Display Method, Use of Position and Layer
Week 8: CSS ANIMATION, Use of Float - Clear, Advanced use of CSS Selectors, Use of Transition simple animation, Use of 2D and 3D Transform
Week 9: CSS LAYOUT METHODS, Use of Flex, Prefix (Browser compatibility) Controls, Use of Grid
Week 10: CSS DEVICE-FOCUSED DESIGN METHODS, Responsive and Adaptive device-focused design logics, HTML and CSS Site, Enrichment of previously prepared HTML homework with learned CSS properties. Homework assignments must consist of a minimum of 3 and a maximum of 5 HTML pages. The CSS file must be in a separate folder.
Week 11: ASSIGNMENT 2: COMPLETION OF A BASIC WEBSITE USING HTML AND CSS FEATURES. Homework assignments must be sent via e-mail by compressing a folder containing HTML files and visual elements attached to them.
Week 12: FINAL PROJECT
Tentative Assesment Methods
• Homework Evaluation 1 15 %
• Homework Evaluation 2 15 %
• Final Project Evaluation 70 %
|
Program Outcome
*
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
Course Outcome
|
1 |
|
|
|
|
|
|
|
|
|
|
|
|
2 |
|
|
|
|
|
|
|
|
|
|
|
|
3 |
|
|
|
|
|
|
|
|
|
|
|
|
4 |
|
|
|
|
|
|
|
|
|
|
|
|
5 |
|
|
|
|
|
|
|
|
|
|
|
|
6 |
|
|
|
|
|
|
|
|
|
|
|
|
7 |
|
|
|
|
|
|
|
|
|
|
|
|
8 |
|
|
|
|
|
|
|
|
|
|
|
|
9 |
|
|
|
|
|
|
|
|
|
|
|
|
10 |
|
|
|
|
|
|
|
|
|
|
|
|
11 |
|
|
|
|
|
|
|
|
|
|
|
|
12 |
|
|
|
|
|
|
|
|
|
|
|
|