defter / katalog / GRA 210

GRA 210 Web Design

GRA 210 treats the web page as a designed artifact, not just a technical deliverable, you learn to think about layout, hierarchy, and UI components (cards, heroes, navbars, modals) through the lens of Material Design and Swiss-style graphic principles, then implement them in raw HTML and CSS. The semester is project-driven: you build a series of components and a responsive landing page, culminating in a term project presented at the end, with readings from Duckett and Material Design guiding each iteration. It sits at the intersection of graphic design instincts and front-end code, so the payoff is being able to plan and ship a coherent, responsive site for a real brand or small business without hiding behind a template.

Kredi 3 ECTS 5 Fakülte Güzel Sanatlar, Tasarım ve Mimarlık Fakültesi Bölüm Grafik Tasarım Koordinatör Can İzzet Birand

→ STARS müfredatı (resmi syllabus)

GRA 210 zor mu?

Son 38 dönemde dersin ortalaması 3,27 (1.051 öğ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 210 dersinin ön koşulu var mı?

Bilkent kataloğunda bu ders için ön koşul yazılı değil.

GRA 210 dersinde hangi kitap okunuyor?

İzlencede önerilen kitap: HTML & CSS Design and Build Websites, John Duckett.

GRA 210 kaç kredi?

3 Bilkent kredisi, 5 AKTS.

Haftalık müfredat 14 hafta

Hafta 114–20 Eyl

Syllabus, araçlar ve arayüz deneyimi okuması

Introduction to the syllabus and the required tools. Reading: The Interface Experience - A User’s Guide

syllabusaraçlarThe Interface Experience

Hafta 221–27 Eyl

HTML/CSS temelleri ve Material Design

HTML and CSS basics. Divs, Sections, other HTML5 sections (header, footer, etc…) Foreground and background images. Inspection via browser. Reading: Material Design; intro, environment, material properties, elevation and shadows. Intro to HTML.

HTML5 sectionsbackground imagebrowser inspectionMaterial Design

Hafta 328 Eyl – 4 Eki

Material Design yüzeyleri ve görsel hiyerarşi

Material Design Surfaces and Elevation Visual Hierarchy & Hero Image Button addition - minor code tweaks + inline and block elements Reading: Material Design, Components - Cards.

Material Designelevationhero imageinline ve block elements

Hafta 45–11 Eki

Card component, CSS grid ve swiss style

UI Component: Card lecture and tutorial. Cards as basic and flexible layout elements. CSS grid. 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.

cardCSS gridwireframe & grid systemsswiss style

Hafta 512–18 Eki

CSS grid, responsive design ve breakpoint'ler

UI Component: CSS grid (continued) Basic typographic & color principles. Responsive design & media queries. Defining breakoints. Breakpoints are basically transition points between general devices. Process Check. Reading: Material Design, imagery & color.

CSS gridresponsive designmedia queriesbreakpoints

Hafta 619–25 Eki

Hero ve card bölümlerinin geliştirilmesi

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. work-in-progress: Refining Hero and Card sections.

heroheadermedia queriescard

Hafta 726 Eki – 1 Kas

Table tasarımı ve okunabilirlik

UI Component: Tables Improvements in readablity and aesthetics in a schedule design. Alternative table design without using element. Reading: Material Design, Data Styles.

tablesschedule designMaterial Design Data Styles

Hafta 82–8 Kas

Navbar ve modal box tasarımı

UI Component: Navbar & Modal Box Design. Navigation bar is a list. A set of choices that provide navigational context. Modal (or dialog) design to provide extra content and UI controls. They retain focus until dismissed. Tutorial on Pure CSS Modal windows. Reading: Material Design, Icons.

navbarmodal boxPure CSSMaterial Design Icons

Hafta 99–15 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 1016–22 Kas

Çeşitli section'lar ve process check

Miscelleneous sections (including break and other content sections). Process Check.

break sectioncontent sectionprocess check

Hafta 1123–29 Kas

Micro-Animation ve Term Project Kontrol Listesi

Extra content (micro-animations using animate.style) 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.

animate.stylemicro-animationstypographyfinal presentation

Hafta 1230 Kas – 6 Ara

Term project çalışması sürüyor

Term project work in progress.

term project

Hafta 137–13 Ara

Term project çalışması sürüyor

Term project work in progress.

term project

Hafta 1414–20 Ara

Term project ve Final Presentation hazırlığı

Term project work in progress.technicalities. Getting ready for the Final Presentation.

term projectFinal Presentation

Değerlendirme 100% · 6 adım

10%

15%

20%

30%

Project 5×Project 1 95%

Performance Attendance / Performance 5%

en büyük tek kalem %30 · 38 dönem ortalaması 3.27 (1051 öğrenci) nasıl hesaplanıyor

Notunu hesapla

Kalem	Ağırlık	Notun (100 üzerinden)
Project 1	%10
Project 2	%15
Project 3	%20
Project 4	%20
Project 5	%30
Attendance / Performance	%5

Hedef toplam puanın

Bildiğin notları gir; girmediklerin hesaba katılmaz.

Ağırlıklar GRA 210 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 1 kitap

📖

Önerilen

HTML & CSS Design and Build Websites, John Duckett

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

Have knowledge of the stages of the web design process and required software.Project 1, Project 2, Project 3, Project 4, Project 5, Attendance / Performance
Successfully planning out a website by learning how to design a responsive landing page. This knowledge can be fully translated into user friendly design for startups and small business web pages.Project 1, Project 2, Project 3, Project 4, Project 5, Attendance / Performance
Breaking down ubiquitous user interface components (such as card, button, header, etc...) from a critical standpoint using sign theory as a philosophical guide. Rethinking and questioning these already established systems and realizing original work.Project 1, Project 2, Project 3, Project 4, Project 5, Attendance / Performance
Associating key user experience concepts such as efficiency, accessibility, navigation, aesthetic unity and credibility.Project 1, Project 2, Project 3, Project 4, Project 5, Attendance / Performance
Handling screen typography effectively with a clear understanding of the limitations of web typography.Project 1, Project 2, Project 3, Project 4, Project 5, Attendance / Performance

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

Ders notları · henüz yok

GRA 210 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ı 38 dönem · ort. 3.27

Dönem	Ders ort.
2025-2026 Fall	3.30	1 şube · 11 öğr
2024-2025 Fall	3.66	1 şube · 18 öğr
2023-2024 Fall	3.40	1 şube · 18 öğr
2022-2023 Fall	3.31	1 şube · 18 öğr
2021-2022 Summer	3.08	1 şube · 18 öğr
2021-2022 Fall	3.18	1 şube · 19 öğr
2020-2021 Fall	3.49	2 şube · 35 öğr
2019-2020 Summer	3.06	2 şube · 40 öğr
2019-2020 Spring	3.29	1 şube · 15 öğr
2019-2020 Fall	2.77	2 şube · 30 öğ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 210 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öneminin hepsinde açılmış, yani bu dönem de açılması beklenir. Son açıldığı dönemde (2025-2026 güz) 1 şube vardı. Açık dersler → · kayıt tarihleri

⚠️ FZ engelleyen şartlar

Attending at least %80 of the classes is required.

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

Geçmişte ders veren (4 kişi)

Can İzzet Birand, Erhan Tunalı, Mehmet Atıl Kurttekin, Orhan İktu

Bu ders 16 programın seçmeli havuzunda.

Restricted Elective Güzel Sanatlar · havuzda 36 ders Elective İç Mimarlık ve Çevre Tasarımı · havuzda 509 ders General Elective Amerikan Kültürü ve Edebiyatı · havuzda 582 ders

ve 13 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 →

GRA 202Graphic Design II GRA 205Rendering for Graphic Design I GRA 207Conceptual Design GRA 209Graphic Design for Non-Majors GRA 211Typography I GRA 212Typography II GRA 215Computer Graphics for Film and Television I