- Responsive tasarıma giriş - Google Chrome üzerinde responsive bir sayfanın farklı çözünürlüklerde incelenmesi
- Responsive tasarımın sağladığı faydalar - Responsive olmayan tasarımlarda karşılaşılan zorluklar
- Uygulama üzerinde constraints (kısıtlamaların) kullanımı - Scale ve Left and Right arasındaki farklar - Horizontal and Vertical constraints
- 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ı
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ı
- 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şlukların örnek üzerinde uygulanması - Hard ve Soft Spacing nedir?
- 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
Figma'da Responsify eklentisinin kullanımı
- Projeye giriş - Design system öğelerinin incelenmesi
- Grid Yapısı - Butonlar - Tipografi - İkonlar - Boşluk Sistemi - Renkler
Masaüstü versiyon için header alanının tasarımı
Slider alanın yerleşimi ve tasarımı
Neden Bizi Seçmelisiniz modülü için tasarımın yapılması ve gerekli componentlerin oluşturulması
Öne Çıkan Özellikler modülü için tasarımın yapılması ve gerekli componentlerin oluşturulması
Hizmetlerimiz modülü için tasarımın yapılması ve gerekli componentlerin oluşturulması
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ü için tasarımın yapılması ve gerekli componentlerin oluşturulması
Takım Modülü için tasarımın yapılması ve gerekli componentlerin oluşturulması
Fluid-Stretch Grid yapısında tasarımın yapılması
Tablet Grid yapısında tasarımın yapılması
Mobil Grid yapısında tasarımın yapılması