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.

Kredi3ECTS5FakülteFaculty of Art, Design, and ArchitectureBölümGraphic DesignÖn koşulGRA 218KoordinatörCan İzzet BirandMüfredatY3 Bahar

→ STARS müfredatı (resmi syllabus)

Haftalık müfredat 14 hafta

Hafta 114–20 Eyl
Derse Giriş (Course Introduction)
Course Introduction
course introduction
Hafta 221–27 Eyl
Sign theory ve user interface terminolojisi
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
sign theoryindexical, iconic, symbolic signsMaterial DesignThe Interface Experience - A User's Guide
Hafta 328 Eyl – 4 Eki
Surface, hero image ve HTML'e giriş
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.
surfacehero imageelevation & shadowsHTML
Hafta 45–11 Eki
Card component ve CSS'e giriş
UI Component: Card lecture and tutorial. Cards as basic and flexible layout elements. Intro to CSS. Reading: Material Design, Components - Cards.
cardCSSMaterial Design Cards
Hafta 512–18 Eki
Card component, CSS ve swiss style
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.
cardCSSwireframe & grid systemsswiss style
Hafta 619–25 Eki
Flexbox ve process check
UI Component: Flexbox Process Check. Reading: By-Design, Alice Rawsthorn
flexboxProcess CheckBy-Design, Alice Rawsthorn
Hafta 726 Eki – 1 Kas
Hero bölümü ve media queries
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.
heroheadermedia queriesbrand identity
Hafta 82–8 Kas
Table ve navbar tasarımı
UI Component: Tables and Navbar Improvements in readablity and aesthetics in a schedule design. Tables as data structures. Reading: Material Design, Data Styles.
tablesnavbardata structuresschedule design
Hafta 99–15 Kas
Mark'lar ve modal box tasarımı
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.
markmodal boxPure CSSMaterial Design Icons
Hafta 1016–22 Kas
Location component'i ve harita tasarımı
UI Component: Location. Creating a map that fits the visual unity and consistency of a web page using various mapmaking tools.
locationmapmaking toolsvisual unity
Hafta 1123–29 Kas
Süreç kontrolü
Process Check.
process check
Hafta 1230 Kas – 6 Ara
Term project checklist ve final sunum hazırlığı
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.
typographydivsmargin ve paddingimage quality
Hafta 137–13 Ara
Term project çalışması sürüyor
Term project work in progress.
term project
Hafta 1414–20 Ara
Term project çalışması sürüyor
Term project work in progress.
term project

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%
en büyük tek kalem %30 · 9 dönem ortalaması 2.87 (236 öğrenci) nasıl hesaplanıyor

Önerilen kaynaklar 2 kitap

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

Bu dersi alınca · 4 öğrenme çıktısı

Bilkent'in resmî syllabus'ünden. Sağdaki etiket o çıktının hangi değerlendirmeyle ölçüldüğünü söylüyor.

🤖 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. Tüm derslerin ortalamaları →

2026-2027 Güz için şubesi henüz görünmüyor. Kayıt sistemi bu dersi bu dönem listelemiyor, ama şube girişi sürüyor: ders kaydı 15 Eylül, bölümler o güne kadar şube ekleyebiliyor. Son 4 güz döneminde açılmamış; en son 2018-2019 güz döneminde açılmış. Ön kayıt müfredat üzerinden yapılıyor, açılan şube listesi üzerinden değil; o yüzden ön kayıtta seçebildiğin bir dersin şubesi burada henüz görünmeyebilir. Kesin sonuç ders kaydında belli oluyor. kayıt tarihleri → · açık dersler

⚠️ 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 0 bu dönem · 2 geçmiş

Geçmişte ders veren (2 kişi)
Erhan Tunalı, Can İzzet Birand

Bu ders 1 bölümün müfredatında zorunlu.

Grafik Tasarım3. sınıf Bahar

Kutulardaki sınıf ve dönem, o bölümün müfredatının dersi hangi sırada önerdiği. Dersin fiilen hangi dönem açıldığı ayrı bir şey.