Figma ile Sıfırdan Responsive Tasarım Eğitimi

Merhaba sevgili tasarım sever arkadaşlar,

Eğitim setinin ilk bölümünde responsive tasarım ilkeleri, constraints, auto layout ve grid yapısı gibi temel bilgilere sahip olacağız. Böylece ölçeklenebilir (esnek) bir tasarımın nasıl oluşturulacağına dair temel bilgiyi edineceğiz. Ayrıca bu özellikleri oluştururken dikkat etmemiz gereken önemli ipuçlarını da keşfedeceğiz. Tasarım sürecinde elde ettiğiniz verilerinizi farklı boyutlardaki cihazlarda kullanıcıya sunabilirsiniz. 

Grid sistem kullanarak mobil, tablet ve masaüstü versiyonlar olmak üzere dijital ortamda Figma ile one page bir web siteyi  responsive olarak tamamlayacağız.

* Bu işlemleri tamamlarken önceden hazırladığımız ui elemanlarını kullanacağız. İlerleyen aşamalarda componentlerimizi ve bazı diğer ui elemanlarımızı birlikte oluşturuyor olacağız.

Kursu belirtilen ders sırasına göre izlemeniz faydalı olacaktır.

Herhangi bir sorunuz olduğunda soru cevap kısmından veya özel durumlar için mesaj atarak benden cevap alabileceksiniz. Temel düzeyde Figma bilgisi bu eğitimi almanın ön şartlarından birisidir.

GENEL İÇERİK

Responsive design nedir?

- Responsive tasarıma giriş
- Google Chrome üzerinde responsive bir sayfanın farklı çözünürlüklerde incelenmesi

Responsive Tasarımın Önemi ve Avantajları Nelerdir?

- Responsive tasarımın sağladığı faydalar
- Responsive olmayan tasarımlarda karşılaşılan zorluklar

Detaylı Constraints Kullanımı

- Uygulama üzerinde constraints (kısıtlamaların) kullanımı
- Scale ve Left and Right arasındaki farklar
- Horizontal and Vertical constraints

Tüm detaylarıyla Auto Layout

- Auto Layout ve Flexbox yapısının kullanımı
- Fill Container - Hug Content
- Fixed width, Fixed Height
- Absolute Position kullanımı
- Responsive UI Card Yapımı

Responsive Layout Grid Kullanımı

- Fixed ve Fluid Yapının Kullanımı
- Masaüstü, Tablet ve Mobile için grid yapısı
- Container kullanımı
- Gutter, stretch ve side margin kullanımı

Layout Grid Offset Kullanımı

- Grid yapısında offset kullanımı
- Verilen offset değerine göre matematiksel olarak grid genişliğinin hesaplanması

4'lü ve 8'li Boşluk Sistemlerinin Kullanımı

- 4'lü ve 8'li boşlukların örnek üzerinde uygulanması
- Hard ve Soft Spacing nedir?

Responsive Text Kullanımı

- Başlık etiketlerinin tanımlanması
- Font size değerlerinin farklı cihazlar için belirlenmesi
- EM kullanımı
- Tipofrafik öğelerin design system için eklenmesi

Responsify Eklentisinin Kullanımı

Figma'da Responsify eklentisinin kullanımı

Sıfırdan Responsive Web Tasarım Projesine Giriş

- Projeye giriş
- Design system öğelerinin incelenmesi

Design System Öğelerini Tanımlama

- Grid Yapısı
- Butonlar
- Tipografi
- İkonlar
- Boşluk Sistemi
- Renkler

Header Alanının Tamamlanması

Masaüstü versiyon için header alanının tasarımı

Slider Alanın Tamamlanması

Slider alanın yerleşimi ve tasarımı

Neden Bizi Seçmelisiniz Modülünün Tamamlanması

Neden Bizi Seçmelisiniz modülü için tasarımın yapılması ve gerekli componentlerin oluşturulması

Öne Çıkan Özellikler Modülünün Tamamlanması

Öne Çıkan Özellikler modülü için tasarımın yapılması ve gerekli componentlerin oluşturulması

Hizmetlerimiz Modülünün Tamamlanması

Hizmetlerimiz modülü için tasarımın yapılması ve gerekli componentlerin oluşturulması

Fiyat Tablosu Modülünün Tamamlanması

Fiyat Tablosu için tasarımın yapılması ve gerekli componentlerin oluşturulması

İletişim Formu ve Sıkça Sorulan Sorular Modülünün Tamamlanması

İletişim Formu ve Sıkça Sorulan Sorular modülü için tasarımın yapılması ve gerekli componentlerin oluşturulması

Takım Modülünün Tamamlanması

Takım Modülü için tasarımın yapılması ve gerekli componentlerin oluşturulması

Stretch Yapısı için Tasarımın Tamamlanması

Fluid-Stretch Grid yapısında tasarımın yapılması

Tablet Yapısı için Tasarımın Tamamlanması

Tablet Grid yapısında tasarımın yapılması

Mobil Yapı için Tasarımın Tamamlanması

Mobil Grid yapısında tasarımın yapılması