WTK212U Web Grafik Tasarimi Ünite -5

Giriş

Google Web Designer, web için etkileşimli içerik ve animasyonlar oluşturmayı amaçlayan, Google tarafından geliştirilmiş bir görsel tasarım aracıdır. Özellikle HTML5 banner reklamları, etkileşimli görseller veya basit web öğeleri hazırlamak isteyen kullanıcılar için pratik bir çözümdür. Kodlama ve tasarımı birleştiren entegre yapısıyla hem tasarımcıların hem de geliştiricilerin iş akışını kolaylaştırır.

Google Web Designer Programının Özellikleri

Bu yazılım, “Design” ve “Code” görünümleri sunarak hem görsel düzenleme hem de doğrudan HTML, CSS ve JavaScript ile çalışma olanağı sağlar. Animasyon oluşturmak için zaman çizelgesi (timeline) mevcuttur; eklentiler veya hazır bileşenler (Components) ile çeşitli etkileşim öğeleri eklenebilir. Google Web Designer’ın temel avantajlarından biri de reklam odaklı olup, Google Ads platformuyla uyumlu banner’lar oluşturabilmesidir.

Google Web Designer Programında Web için Grafik Tasarım Bileşenleri ve İşlevleri

Uygulamanın arayüzünde araç çubuğu, çalışma alanı, zaman çizelgesi ve yan paneller (Properties, Events, Components, CSS) bulunur. Design modunda sürükle-bırak yaparak görsel öğeleri konumlandırabilir, Code modunda HTML/CSS yapılarını doğrudan düzenleyebilirsiniz. Atlı Karınca Galeri (Carousel Gallery) veya Slider gibi bileşenler de bileşenler panelinde yer alır ve projeye kolayca eklenebilir.

Google Web Designer Programının Arayüzünün Görünüm ve Özellikleri

Arayüz, 6 ana bölümden oluşacak şekilde düzenlenmiştir: üst menüler, araç çubuğu, zaman çizelgesi, görünüm çubuğu (Design/Code), yan paneller ve alt durum çubuğu. Seçili nesneye dair boyut, konum, renk gibi ayarlar “Özellikler” paneli üzerinden yapılır. “Bileşenler”, “Etkinlikler” ve “CSS” panelleri de tasarımı zenginleştirmek ve etkileşim eklemek açısından kritik rol oynar.

Google Web Designer ile Tasarım ve Animasyon Süreci

Tasarım sürecinde ilk adım, çalışma boyutlarını (genişlik, yükseklik) ve proje türünü seçmektir. Ardından metin, görsel veya hazır bileşenler eklenerek yerleştirilir. Zaman çizelgesi (timeline) aracılığıyla sahneler arasında geçişler ve animasyonlar ayarlanabilir. HTML eşdeğerine “Görünüm Çubuğu”ndan Code moduna geçerek ulaşabilir, gerekirse düzenlemeler yapılabilir.

Sonuç

Google Web Designer, hızla gelişen web reklamcılığı ve etkileşimli tasarım alanlarında kullanıcılara büyük kolaylık sağlayan bir araçtır. Özellikle animasyonlu banner ve basit HTML5 projeleri üretme noktasında hem tasarım hem de kod aşamasını tek çatı altında sunar. Arayüzünün tüm bileşenlerini öğrenmek ve etkili kullanmak, web için profesyonel grafik tasarımı süreçlerinde önemli bir avantaj sağlar.

1) Google’ı kuran kişi aşağıdakilerden hangisidir?

A. Tim Berners-Lee
B. Bill Gates
C. Larry Page ve Sergey Brin
D. Jimmy Wales
E. Mark Zuckerberg

Cevap : C) Larry Page ve Sergey Brin

Açıklama : Google, Stanford Üniversitesi’nde doktora öğrencisi olan Larry Page ve Sergey Brin tarafından 1998 yılında kurulmuştur.

Yanıtınız yanlış ise “Google Web Designer Programının Özellikleri” konusunu yeniden gözden geçiriniz.

2) Google hangi yıl faaliyete geçmiştir?

A. 1995
B. 1996
C. 1998
D. 2000
E. 2001

Cevap : C) 1998

Açıklama : Google.com alan adı ilk olarak 1997’de kaydedilse de şirket resmi olarak 1998 yılında faaliyete geçmiştir.

Yanıtınız yanlış ise “Google Web Designer Programında Web için Grafik Tasarım Bileşenleri ve İşlevleri” konusunu yeniden gözden geçiriniz.

3) Aşağıdakilerden hangisi, Google Web Designer programının birincil özelliğidir?

A. Entegre bir programdır.
B. Kolayca ulaşılabilir.
C. Pratiktir.
D. Estetik bir arayüzü vardır.
E. Araç çubuğu çoklu seçeneklere sahiptir.

Cevap : A) Entegre bir programdır.

Açıklama : Google Web Designer, reklam banner’ları ve web animasyonları oluşturmak için entegre bir tasarım ve kodlama aracı sunar. Programın en önemli özelliği, tasarım ve kod tarafını birleştiren entegre yapısıdır.

Yanıtınız yanlış ise “Google Web Designer Programında Web için Grafik Tasarım Bileşenleri ve İşlevleri” konusunu yeniden gözden geçiriniz.

4) Google Web Designer arayüzü kaç bölümden oluşur?

A. 5
B. 6
C. 7
D. 8
E. 9

Cevap : B) 6

Açıklama : Google Web Designer arayüzü temelde araç çubuğu, aşama/çalışma alanı, zaman çizelgesi, paneller ve menü çubuğu gibi toplamda 6 ana bölümden oluşacak şekilde tanımlanır (kaynak dokümana göre değişebilse de, ünitedeki bilgi bu şekildedir).

Yanıtınız yanlış ise “Google Web Designer Programında Web için Grafik Tasarım Bileşenleri ve İşlevleri” konusunu yeniden gözden geçiriniz.

5) Aşağıdakilerden hangisi Google Web Designer arayüz panelleri arasında yer almaz?

A. Bileşenler
B. CSS
C. Gradyan
D. Etkinlikler
E. Özellikler

Cevap : C) Gradyan

Açıklama : Google Web Designer’ın arayüzünde genellikle “Bileşenler” (Components), “CSS”, “Etkinlikler” (Events), “Özellikler” (Properties) gibi paneller bulunur. “Gradyan” isminde bir panel yoktur; gradyan ayarları “CSS” veya “Özellikler” paneli içinde yer alabilir ama ayrı bir panel olarak geçmez.

Yanıtınız yanlış ise “Google Web Designer Programında Web için Grafik Tasarım Bileşenleri ve İşlevleri” konusunu yeniden gözden geçiriniz.

6) Aşağıdakilerden hangisi Google Web Designer arayüzü zaman çizelgesinin temel işlevleri arasında yer almaz?

A. Üzerinde çalıştığımız tasarımın katmanlarını kontrol etmek
B. Animasyonlar oluşturmak ve kontrol etmek
C. Üzerinde çalıştığımız tasarımın bellek kayıtlarını tutmak
D. Üzerinde çalıştığımız tasarımın katmanlarını kilitlemek
E. Kitaplığı saptamak

Cevap : E) Kitaplığı saptamak

Açıklama : Zaman çizelgesi (timeline) katmanların yönetimi, animasyon ekleme, kilitleme gibi işlevlere sahiptir, ancak “kitaplığı saptamak” (library determination) gibi bir işlev zaman çizelgesinin temel fonksiyonlarından değildir.

Yanıtınız yanlış ise “Google Web Designer Programının Özellikleri” konusunu yeniden gözden geçiriniz.

7) Google Web Designer arayüzünde yer alan paneller kaç tanedir?

A. 3
B. 4
C. 5
D. 6
E. 7

Cevap : D) 6

Açıklama : Google Web Designer’da sık kullanılan 6 panel: “Properties” (Özellikler), “CSS”, “Events” (Etkinlikler), “Components” (Bileşenler), “Files” (Dosyalar / Proje Klasörü), “Color” vb. şekilde listelenir. Bu sayı resmi kaynaklara göre değişebilir, ama ünitedeki bilgi çerçevesinde 6 panel olarak geçmektedir.

Yanıtınız yanlış ise “Google Web Designer Programının Arayüzünün Görünüm ve Özellikleri” konusunu yeniden gözden geçiriniz.

8) Google Web Designer’da yaptığımız görsel tasarımın, HTML eş değerine nereden ulaşabiliriz?

A. Araç Çubuğu
B. Araç Seçenekleri Çubuğu
C. Görünüm Çubuğu
D. Bileşenler Paneli
E. Etkinlikler Paneli

Cevap : C) Görünüm Çubuğu

Açıklama : Google Web Designer’da tasarımı “Design” görünümünde veya “Code” görünümünde düzenleyebilirsiniz. Bu “Görünüm Çubuğu” (View bar) üstte yer alır ve “Design – Code – Split” gibi seçeneklerle HTML koduna erişim sağlar.

Yanıtınız yanlış ise “Google Web Designer Programının Özellikleri” konusunu yeniden gözden geçiriniz.

9) Atlı Karınca Galeri, hangi panelde yer alır?

A. Özellikler Paneli
B. Bileşenler Paneli
C. Etkinlikler Paneli
D. Kitaplık Paneli
E. CSS/Duyarlı Paneli

Cevap : B) Bileşenler Paneli

Açıklama : Google Web Designer’da “Atlı Karınca Galeri” (Carousel Gallery) gibi hazır öğeler “Components (Bileşenler)” panelinde bulunur. Diğer panellerde bu bileşen yer almaz.

Yanıtınız yanlış ise “Google Web Designer Programında Web için Grafik Tasarım Bileşenleri ve İşlevleri” konusunu yeniden gözden geçiriniz.

10) Google Designer’da tasarımını yaptığımız bir banner’ın boyutlarını hangi panelde ayarlarız?

A. Özellikler Paneli
B. Bileşenler Paneli
C. Etkinlikler Paneli
D. CSS/Duyarlı Paneli
E. Kitaplık Paneli

Cevap : A) Özellikler Paneli

Açıklama : Bir HTML dosyasına veya seçili öğeye ait boyut (genişlik, yükseklik) gibi temel ayarlar “Özellikler (Properties) Paneli” üzerinden yapılır. Bileşenler paneli hazır öğelere erişimi, Etkinlikler paneli olay yönetimini, CSS paneli ise stilleri, Kitaplık paneli medya elemanlarını yönetir.

Yanıtınız yanlış ise “Google Web Designer Programında Web için Grafik Tasarım Bileşenleri ve İşlevleri” konusunu yeniden gözden geçiriniz.