|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/figma-ile-responsive-tasarim-egitimi/
课程评论：没有评论
课程名称：Figma从零开始的响应式设计培训 课程概述：欢迎亲爱的设计爱好者！本课程的第一部分将介绍响应式设计的基本原则，包括约束（constraints）、自动布局（auto layout）和网格体系（grid structure）。通过学习这些内容，您将掌握如何创建可扩展（灵活）设计的基本知识。此外，我们还将探索在创建这些特性时需要注意的重要提示。在设计过程中，您可以将收集到的数据展示给不同尺寸的设备。课程中，我们将使用网格系统在Figma中完成一个响应式的单页面网站，支持移动端、平板和桌面版本。在此过程中，我们将使用预先准备好的UI元素。在后续阶段，我们将一起创建组件和其他一些UI元素。建议按照课程指定的顺序观看学习。如果有任何问题，您可以通过问答部分或私信与我联系。具备基本的Figma知识是学习本课程的前提条件。 **课程大纲：** - **响应式设计概述** - 什么是响应式设计？ - 在Google Chrome上检查不同分辨率下的响应式页面 - **响应式设计的重要性与优势** - 响应式设计的主要好处 - 非响应式设计面临的挑战 - **详细的约束使用** - 在应用中使用约束 - 尺寸和左右的区别 - 水平和垂直约束的应用 - **全面了解自动布局** - 自动布局与Flexbox的使用 - Fill Container、Hug Content、固定宽度、固定高度、绝对定位的使用 - 创建响应式UI卡片 - **响应式布局网格的使用** - 固定和流体结构的使用 - 针对桌面、平板和移动设备的网格结构 - 容器的使用 - 间距、拉伸和侧边距的使用 - **布局网格偏移的使用** - 在网格结构中使用偏移 - 根据给定的偏移值计算网格宽度 - **4倍与8倍间距系统的使用** - 在实例上应用4倍和8倍间距 - 硬间距与软间距的定义 - **响应式文本的使用** - 标题标签的定义 - 针对不同设备设置字体大小 - 使用EM单位 - 将排版元素加入设计系统 - **使用Responsify插件** - 在Figma中使用Responsify插件 - **从零开始的响应式网页设计项目** - 项目概述 - 设计系统元素的审查 - **定义设计系统元素** - 网格结构、按钮、排版、图标、间距系统、颜色等 - **完成头部区域设计** - 桌面版本的头部设计 - **完成滑块区域设计** - 滑块区域的布局与设计 - **完成“选择我们的理由”模块设计** - 为“选择我们的理由”模块设计所需组件 - **完成特色模块设计** - 为特色模块设计所需组件 - **完成服务模块设计** - 为服务模块设计所需组件 - **完成价格表模块设计** - 为价格表设计所需组件 - **完成联系表单与常见问题模块设计** - 为联系表单和常见问题模块设计所需组件 - **完成团队模块设计** - 为团队模块设计所需组件 - **完成拉伸结构设计** - 在流体-拉伸网格中进行设计 - **完成平板设备设计** - 在平板网格中进行设计 - **完成移动设备设计** - 在移动网格中进行设计 该课程将为希望掌握响应式设计的设计师提供全面的技能与实践经验。
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ı
