defter*
defter / katalog / GRA 316

GRA 316 Interface Design Studio

Türkçe kataloğunda Arayüz Tasarımı: Yapay Zeka Destekli Stüdyo Pratiği diye geçiyor.

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.

Kredi 3 ECTS 5 Fakülte Güzel Sanatlar, Tasarım ve Mimarlık Fakültesi Bölüm Grafik Tasarım Ön koşul GRA 218 Koordinatör Can İzzet Birand Müfredat Y3 Bahar

GRA 316 zor mu?

Son 10 dönemde dersin ortalaması 2,88 (273 öğrencinin notu, 4,00 üzerinden), yani sınıf ortalaması B civarında. Zorluk hocaya ve şubeye göre değişir; ölçülebilir olan bu sayı. Diğer derslerle karşılaştır →

GRA 316 dersinin ön koşulu var mı?

Evet. Bilkent kataloğuna göre ön koşulu: GRA 218.

GRA 316 dersinde hangi kitap okunuyor?

İzlencede zorunlu kitap: PDF Packet. İzlence toplam 2 kaynak sayıyor.

GRA 316 kaç kredi?

3 Bilkent kredisi, 5 AKTS.

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 · 10 dönem ortalaması 2.88 (273 öğrenci) nasıl hesaplanıyor
Notunu hesapla
KalemAğırlık Notun (100 üzerinden)
Assignment 1%10
Assignment 2%15
Assignment 3%20
Assignment 4%20
Final Submission%30
Process, studio work, attendance%5
Bildiğin notları gir; girmediklerin hesaba katılmaz.

Ağırlıklar GRA 316 izlencesinden. Hocanın bu dönemki dağılımı farklı olabilir; bağlayıcı olan ders izlencesidir. Harf notu sınırlarını hoca belirliyor, o yüzden hedefi sen giriyorsun. İzlencede FZ şartı var, sayfanın sonundaki kutuda.

Ö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ı 10 dönem · ort. 2.88

DönemDers ort.
2025-2026 Spring 2.93 2 şube · 37 öğr
2024-2025 Spring 2.88 2 şube · 49 öğr
2023-2024 Spring 2.89 1 şube · 16 öğr
2022-2023 Spring 2.34 2 şube · 34 öğr
2021-2022 Spring 2.58 2 şube · 34 öğr
2020-2021 Spring 2.90 2 şube · 29 öğr
2019-2020 Spring 2.97 2 şube · 24 öğr
2018-2019 Spring 2.95 1 şube · 23 öğr
2018-2019 Fall 2.93 1 şube · 10 öğr
2017-2018 Fall 3.41 1 şube · 17 öğr

Dersin dönem ortalaması, o dönemin bütün şubeleri birlikte. Kaynak STARS'ın ders değerlendirme raporu. Rapor yalnız kampüs ağından ya da Bilkent VPN ile açılıyor: GRA 316 raporu · Bilkent VPN bilgisi. Öğrenci anket cevaplarını defter'de tutmuyoruz. Tüm derslerin ortalamaları →

2026-2027 Güz döneminde açılmadı. Ders kaydı geçti, kayıt sisteminde bu dersin şubesi yok. Katalogda duruyor, yani başka bir dönem açılabilir. Son 4 güz döneminde açılmamış; en son 2018-2019 güz döneminde açılmış. Açık dersler → · kayıt tarihleri

⚠️ 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ım 3. 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.

Bu ders 15 programın seçmeli havuzunda.

Elective İç Mimarlık ve Çevre Tasarımı · havuzda 509 ders General Elective Amerikan Kültürü ve Edebiyatı · havuzda 582 ders Non Technical Elective Moleküler Biyoloji ve Genetik · havuzda 634 ders

ve 12 program daha.

Havuz listesi bölümün QME müfredatından; en küçük havuzlar önce yazılıyor, çünkü büyük "serbest seçmeli" havuzunda olmak dersi anlatmıyor. Seçmeli havuzunda olmak o dersi alabileceğin anlamına gelmez: ön koşul ve kontenjan ayrıca geçerli.

Aynı koddan diğer dersler · katalogda 33 GRA dersi · tüm GRA dersleri →