Öğretim Materyallerinin Tasarımı: Görsel Öğeler ve İlkeler

Bu doküman, öğretim materyallerinin tasarımında kullanılan görsel öğeler ve tasarım ilkelerini açıklamakta ve örneklerle desteklemektedir. Bootstrap 5 stilini kullanarak daha görsel bir sunum sağlamaya çalışacağız, ancak Bootstrap kodunu doğrudan vermeyeceğim. Bootstrap sınıflarının nasıl kullanılacağına dair örnekler vereceğim.

1. Tasarım Öğeleri

Tasarım öğeleri, materyallerin görsel yapısını oluşturan temel bileşenlerdir. Başlıca tasarım öğeleri şunlardır:

1.1 Çizgi

Çizgi, en temel tasarım öğesidir. Yön, hareket, bağlantı ve vurguyu gösterir. Kalın çizgiler ince çizgilere göre daha etkilidir.

* Kullanım Alanları:
* Süreçleri göstermek: Bir algoritmayı veya bir üretim zincirini adım adım göstermek için. ➡️➡️➡️
* Fikirleri ayırmak: Farklı kavramları veya bölümleri birbirinden ayırmak için. ---
* Hareketi göstermek: Bir nesnenin hareketini veya yönünü göstermek için. ↗️
* Vurguları belirlemek: Önemli noktaları vurgulamak için kalın çizgiler kullanılabilir.

*

Örnek: Bir matematik probleminin çözüm adımlarını göstermek için numaralandırılmış adımları ayıran çizgiler.

* Bootstrap Örneği: Bir `card` içindeki başlığı alt metinden ayırmak için `hr` etiketi kullanılabilir. `class="mb-3"` gibi sınıflar ile `card` içindeki öğelerin dikey boşluklarını da ayarlayabilirsiniz.

1.2 Şekil

Şekiller, iki boyutlu geometrik biçimlerdir (kare, daire, üçgen vb.). Şekiller, içerikleri düzenlemek ve dikkat çekmek için kullanılır. Form ise şekillerin birbiriyle olan ilişkisidir (örneğin, dairelerin bir araya gelmesiyle oluşan bir desen). Şekil-zemin ilişkisi de önemlidir; bir şekil ön planda, diğeri arka planda olabilir.

* Kullanım Alanları: Grafikler, diyagramlar, simgeler, vb.
*

Örnek: Pasta grafiği kullanarak verileri görsel olarak sunmak.

* Bootstrap Örneği: Farklı şekillerde `card` kullanarak içerikleri kategorize edebilirsiniz. `rounded` sınıfı ile kartlara yuvarlak köşeler ekleyebilirsiniz.

1.3 Doku

Doku, bir yüzeyin görünüşünü ve hissettirdiğini anlatır (pürüzlü, pürüzsüz, yumuşak, sert). Gerçekçi bir his yaratmak ve dikkat çekmek için kullanılabilir.

* Kullanım Alanları: Fotoğraflar, dokulu kağıtlar, gerçek materyal örnekleri.
*

Örnek: Bir kumaş dokusunun fotoğrafını kullanarak kumaşın türünü göstermek.

* Bootstrap Örneği: `bg-gradient` sınıfları ile arka planlara degrade renkler ekleyebilirsiniz.

1.4 Renk

Renkler, duyguyu, önemi ve kategorileri ifade eder. Çok fazla renk karmaşıklığa neden olabilir. 4 renge kadar kullanmak önerilir.

* Kullanım Alanları: Metin, arka plan, vurgular, grafikler.
*

Örnek: Kırmızı rengi acil durumları, yeşil rengi olumlu durumları göstermek için kullanmak.

* Bootstrap Örneği: `text-primary`, `text-success`, `text-danger` gibi Bootstrap sınıflarını kullanarak metin rengini kolayca değiştirebilirsiniz.

1.5 Yazı Tipi ve Boyutu

Okunabilirlik için uygun yazı tipi ve boyutu seçmek önemlidir. Farklı yazı tipleri farklı hisler uyandırabilir.

* Kullanım Alanları: Başlıklar, metinler, etiketler.
*

Örnek: Başlıklar için daha büyük ve kalın yazı tipi, metinler için daha küçük ve ince yazı tipi kullanmak.

* Bootstrap Örneği: Bootstrap'in varsayılan yazı tiplerini kullanabilir veya özel yazı tipleri ekleyebilirsiniz. `display-1`, `display-2` gibi sınıflar ile başlıkların boyutunu değiştirebilirsiniz.

2. Tasarım İlkeleri

Tasarım ilkeleri, tasarım öğelerini etkili bir şekilde bir araya getirmek için kullanılan kurallardır.

2.1 Bütünlük

Tüm öğelerin uyumlu ve birbiriyle ilişkili olması.

2.2 Denge ⚖️

Görsel ağırlığın sayfada eşit dağılımı.

2.3 Vurgu

Önemli noktaların diğerlerinden daha belirgin hale getirilmesi.

2.4 Yakınlık-Uzaklık Proximity

İlişkili öğelerin birbirine yakın, ilişkili olmayan öğelerin birbirinden uzak yerleştirilmesi.

2.5 Gerçeklik ve Basitlik

Tasarımların sade, anlaşılır ve gerçekçi olması.

2.6 Düzen-Alan

Öğelerin düzenli ve organize bir şekilde yerleştirilmesi.

2.7 Oran-Ölçek

Öğeler arasındaki boyut oranlarının uyumlu olması.

2.8 Ritim

Görsel öğelerin tekrarı veya değişimi ile bir akış oluşturulması.

2.9 Ahenk

Tüm öğelerin birlikte uyumlu ve güzel bir görünüm oluşturması.


Bu doküman, öğretim materyallerinin tasarımında kullanılan görsel öğeler ve ilkeler hakkında genel bir bakış sunmaktadır. Daha detaylı bilgi için ilgili tasarım kaynaklarına başvurmanız önerilir. Bootstrap 5 kullanarak, bu prensipleri HTML ve CSS kodlarıyla uygulayabilir ve daha etkileyici öğretim materyalleri oluşturabilirsiniz.