defter*
defter / katalog / GRA 316
GRA 316

Interface Design Studio

Interface design here is treated as a semiotic problem first and a coding problem second: you learn to read buttons, cards, headers, and icons as indexical, iconic, or symbolic signs before you build them in HTML and CSS. Each component you study (surface, card, hero, navbar, modal, map) becomes a small project, and the semester ends with a responsive landing page that ties everything into a single term project. The studio sits where visual language from earlier graphic design courses meets the practical constraints of the browser, giving you a vocabulary for the front-end and brand-facing work that follows in later studios and in real client jobs.

Credit3ECTS5FacultyFaculty of Art, Design, and ArchitectureBölümGraphic DesignPreGRA 218MüfredatY3 Bahar

→ STARS müfredatı (resmi syllabus)

Değerlendirme 100% — 6 adım

10%
15%
20%
20%
30%
5%
Project 4×Assignment 1 65%
Term project Final Submission 30%
Performance Process, studio work, attendance 5%

Önerilen kaynaklar 2 kitap

📕
Zorunlu
PDF Packet
📖
Önerilen
HTML & CSS Design and Build Websites
John Duckett

Haftalık müfredat 14 hafta

Hafta 1
Course Introduction
Hafta 2
Introduction: Interactive lecture on Sign Theory. Indexical, iconic, and symbolic signs. De-mystifying user interface terminology using Material Design. Project introduction. Reading: The Interface Experience - A User’s Guide
Hafta 3
UI Component: Surface & Hero Image. Concepts of background and foreground as material surfaces. Opaque / semi-opaque surfaces. Browser window as a -dynamic- surface; fullwidth surfaces vs. fixed-width surfaces. The concept of a “button” including full functionality from the analog button. Reading: Material Design; intro, environment, material properties, elevation, and shadows. Intro to HTML.
Hafta 4
UI Component: Card lecture and tutorial. Cards as basic and flexible layout elements. Intro to CSS. Reading: Material Design, Components - Cards.
Hafta 5
UI Component: Card lecture and tutorial. Cards as basic and flexible layout elements. Intro to CSS. Reading: Material Design, Components - Cards. Integrating cards into wireframes & grid systems. Lessons from swiss style graphic design & modern examples in the light of swiss style. Work-in-progress: card study assignment.
Hafta 6
UI Component: Flexbox Process Check. Reading: By-Design, Alice Rawsthorn
Hafta 7
UI Component: Hero & Media Queries Further Header (or “Hero”) development The idea of different sections serving different “goals and elements” purposes. Lecture and tutorial about how headers draw in a user, provide context about the content and reinforce the brand identity. Reading: Material Design, imagery & color.
Hafta 8
UI Component: Tables and Navbar Improvements in readablity and aesthetics in a schedule design. Tables as data structures. Reading: Material Design, Data Styles.
Hafta 9
UI Component: Mark(s) & Modal Box Design. In this course, we use the term mark as a generic name for various logos, symbols and icons that enhances user experience and reinforces brand identity. Modal (or dialog) windows provide extra content and UI controls. They retain focus until dismissed. Tutorial on Pure CSS Modal windows. Reading: Material Design, Icons.
Hafta 10
UI Component: Location. Creating a map that fits the visual unity and consistency of a web page using various mapmaking tools.
Hafta 11
Process Check.
Hafta 12
Term Project Checklist: A comprehensive overview of attention points that are covered earlier, including typography, divs, spacings, margins, paddings, image quality and other technicalities. Getting ready for the Final Presentation.
Hafta 13
Term project work in progress.
Hafta 14
Term project work in progress.

🤖 GenAI politikası

For Research: Allowed, step-by-step documentation is required. For visual idea generation: Allowed, step-by-step documentation is required. Design process: Allowed, step-by-step documentation is required. Final product: Direct output from prompt to image is not allowed.

Ders notları — henüz yok

GRA 316 için defter ekibi henüz not yazmadı.

İlk dosyayı sen atarsan — not, slayt, geçmiş sınav, çözüm, cheat-sheet, ne varsa — defter ekibi öğrenci paylaşımlarından bu dersin notlarını yazar. Drive linki / PDF / ZIP, hepsi olur.

← katalog

Geçmiş GPA dağılımı 9 dönem · ort. 2.87

DönemCourse CPA
2024-2025 Spring 2.88 2 sec · 49 öğr
2023-2024 Spring 2.89 1 sec · 16 öğr
2022-2023 Spring 2.34 2 sec · 34 öğr
2021-2022 Spring 2.58 2 sec · 34 öğr
2020-2021 Spring 2.90 2 sec · 29 öğr
2019-2020 Spring 2.97 2 sec · 24 öğr
2018-2019 Fall 2.93 1 sec · 10 öğr
2018-2019 Spring 2.95 1 sec · 23 öğr
2017-2018 Fall 3.41 1 sec · 17 öğr

Aggregate course GPA — Bilkent STARS'tan public data. Hoca-bazlı per-section detayı için STARS evaluation report →. Öğrenci anket cevapları KVKK kapsamında defter'de tutulmaz.

⚠️ FZ engelleyen şartlar

Attending at least %80 of the classes is required. That it 9 allowed hours of abscence. Life happens, so do not be frivolous with your 9 alloted abscence hours, you may need them later on. No differentiation is made between excused and unexcused abscences. Failing to meet the attendance criteria will result in final presentation disqualification. I also expect at least %50 performance for the assignments throughout the

Hocalar 2 bu dönem · 0 geçmiş

Bu dönem (2025-2026 Spring) · 2 section
Can İzzet Birand, Erhan Tunalı