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.

Credit3ECTS5FacultyFaculty of Art, Design, and ArchitectureBölümGraphic Design

→ STARS müfredatı (resmi syllabus)

Değerlendirme 100% — 6 adım

10%

15%

20%

30%

Project 5×Project 1 95%

Performance Attendance / Performance 5%

Önerilen kaynaklar 1 kitap

📖

Önerilen

HTML & CSS Design and Build Websites

John Duckett

Haftalık müfredat 14 hafta

Hafta 1

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

Hafta 2

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.

Hafta 3

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

Hafta 4

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.

Hafta 5

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.

Hafta 6

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.

Hafta 7

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

Hafta 8

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.

Hafta 9

UI Component: Location. Creating a map that fits the visual unity and consistency of a web page using various mapmaking tools.

Hafta 10

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

Hafta 11

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.

Hafta 12

Term project work in progress.

Hafta 13

Term project work in progress.

Hafta 14

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

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	Course CPA
2025-2026 Fall	3.30	1 sec · 11 öğr
2024-2025 Fall	3.66	1 sec · 18 öğr
2023-2024 Fall	3.40	1 sec · 18 öğr
2022-2023 Fall	3.31	1 sec · 18 öğr
2021-2022 Fall	3.18	1 sec · 19 öğr
2021-2022 Summer	3.08	1 sec · 18 öğr
2020-2021 Fall	3.49	2 sec · 35 öğr
2019-2020 Fall	2.77	2 sec · 30 öğr
2019-2020 Summer	3.06	2 sec · 40 öğr
2019-2020 Spring	3.29	1 sec · 15 öğ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.

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