Overview

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İKResponsive design nedir?- Responsive tasarıma giriş - Google Chrome üzerinde responsive bir sayfanın farklı çözünürlüklerde incelenmesiResponsive Tasarımın Önemi ve Avantajları Nelerdir?- Responsive tasarımın sağladığı faydalar- Responsive olmayan tasarımlarda karşılaşılan zorluklarDetaylı Constraints Kullanımı- Uygulama üzerinde constraints (kısıtlamaların) kullanımı- Scale ve Left and Right arasındaki farklar- Horizontal and Vertical constraintsTü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 eklenmesiResponsify Eklentisinin KullanımıFigma'da Responsify eklentisinin kullanımıSıfırdan Responsive Web Tasarım Projesine Giriş- Projeye giriş- Design system öğelerinin incelenmesiDesign System Öğelerini Tanımlama- Grid Yapısı- Butonlar- Tipografi- İkonlar- Boşluk Sistemi- RenklerHeader 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ı

Skills

Reviews