![Udemy - Figma ile Sıfırdan Responsive Tasarım Eğitimi Udemy - Figma ile Sıfırdan Responsive Tasarım Eğitimi](https://www.gfxtra31.com/uploads/posts/2024-06/1717230898665add32c1dee.jpg)
Language:
Figma'da Masaüstü, tablet ve mobil cihazlara uygun tasarım yapmayı tüm detaylarıyla öğrenin!
https://www.udemy.com/course/figma-ile-responsive-tasarim-egitimi/
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ş Responsive Tasarımın Önemi ve Avantajları Nelerdir? - Responsive tasarımın sağladığı faydalar Detaylı Constraints Kullanımı - Uygulama üzerinde constraints (kısıtlamaların) kullanımı Tüm detaylarıyla Auto Layout - Auto Layout ve Flexbox yapısının kullanımı Responsive Layout Grid Kullanımı - Fixed ve Fluid Yapının Kullanımı Layout Grid Offset Kullanımı - Grid yapısında offset kullanımı 4'lü ve 8'li Boşluk Sistemlerinin Kullanımı - 4'lü ve 8'li boşlukların örnek üzerinde uygulanması Responsive Text Kullanımı - Başlık etiketlerinin tanımlanması Responsify Eklentisinin Kullanımı Figma'da Responsify eklentisinin kullanımı Sıfırdan Responsive Web Tasarım Projesine Giriş - Projeye giriş Design System Öğelerini Tanımlama - Grid Yapısı 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ı
- Google Chrome üzerinde responsive bir sayfanın farklı çözünürlüklerde incelenmesi
- Responsive olmayan tasarımlarda karşılaşılan zorluklar
- Scale ve Left and Right arasındaki farklar
- Horizontal and Vertical constraints
- Fill Container - Hug Content
- Fixed width, Fixed Height
- Absolute Position kullanımı
- Responsive UI Card Yapımı
- Masaüstü, Tablet ve Mobile için grid yapısı
- Container kullanımı
- Gutter, stretch ve side margin kullanımı
- Verilen offset değerine göre matematiksel olarak grid genişliğinin hesaplanması
- Hard ve Soft Spacing nedir?
- Font size değerlerinin farklı cihazlar için belirlenmesi
- EM kullanımı
- Tipofrafik öğelerin design system için eklenmesi
- Design system öğelerinin incelenmesi
- Butonlar
- Tipografi
- İkonlar
- Boşluk Sistemi
- Renkler
TO MAC USERS: If RAR password doesn't work, use this archive program:
RAR Expander 0.8.5 Beta 4 and extract password protected files without error.
TO WIN USERS: If RAR password doesn't work, use this archive program:
Latest Winrar and extract password protected files without error.
![](/templates/uslu/images/user.png)