Yılın en büyük indiriminin bitmesine
Mezunlarımızın Çalıştığı Şirketler
Eğitim programlarımız lider şirketlerle kurduğumuz ortaklıklar ile güçlendirilmiş ve inovatif ekipler tarafından kullanılmaktadır.
Program hakkında ayrıntılı bilgi edinin
Kurs 16 Saat
UI/UX Web Designer
Figma’yı başlangıç seviyesinden ileri seviyeye kadar öğreneceğiniz bu eğitimle birlikte, UI/UX tasarım prensiplerini öğrenip, bunu gerçek uygulamalar yaparak hayata geçireceksiniz.
1
Figma’ya Giriş
Bu bölümde, genel anlamda UI ve UX kavramlarına hakim olduktan sonra, Figma arayüzüne giriş yapacak, Figma'nın temel konularını ve araçlarını öğreneceksiniz. Bir tasarımı oluştururken kullanmanız gereken tüm bu araçları örneklerle anlayacaksınız. Ayrıca, Figma'da resimlerin kullanımı, eklentilerle çalışma, maskeleme gibi konuları da ele alarak, giriş seviyesinde Figma bilgisine ulaşacaksınız.
Bölümü ayrıntılı incele
- UI ve UX Kavramlarına Genel Bakış
- Figma Nedir, Ne İşe Yarar, Kimler Kullanır, Avantajları Nelerdir?
- Figma Arayüzüne Giriş ve Toolbox Kullanımı
- Aligment ve Boolean Operations
- Resim Dosyaları ve Vektör Objelerin Figma Üzerinde Kullanımı
- Figma’da Maskeleme
- Renk ve Tipografileri Kütüphaneye Ekleme
- Plugin Kurulumu ve Sıkça Kullanılan Pluginler
2
Temel Figma Özellikleri
Bir tasarımı oluşturmaya başlarken yapısal özellikleri önceden belirlemek büyük bir öneme sahiptir. Figma’nın yapısal özelliklerini öğreneceğiniz bu bölümde, çalışmalarınızda nasıl bir grid yapısı oluşturmanız gerektiğini, responsive tasarımı yaparken hangi kuralları bilmeniz gerektiğini öğrenecek ve otomatik yerleşim düzeni hakkında detaylı bilgi sahibi olacaksınız.
Bölümü ayrıntılı incele
- Effects Kullanımı
- Layout Grid Kullanımı
- Component ve Master Component Oluşturma
- Variant Oluşturma
- Component Properties
- Constraints (Kısıtlamalar)
- Tüm Yönleriyle Auto Layout V4
3
Prototype ve Interaction
Bu bölümde, yaptığınız tasarımları geçiş animasyonları ve linkler ile etkileşimli hale getirebileceksiniz. Uygulayacağınız prototiplerde değişkenleri ve gelişmiş prototipleme özelliklerini kullanarak tasarımlarınızı daha hızlı ve efektif hale dönüştürebileceksiniz. Aynı zamanda tasarım sistemlerinizi modüler olarak oluşturma yönünde ilk adımınızı atmış olacaksınız.
Bölümü ayrıntılı incele
- Örneklerle Interactive Components
- Prototip Oluşturma
- Advanced Prototype Özelliği (Mantıksal ve Şartlı İfadeler)
- One Page (Anchor Link) Tekniği ile Sayfa Oluşturma
- Variables ve Tokens
- Variable Mode Kullanım
4
Dinamik Olarak Verilerin Figma’da Kullanımı
Bu bölümde, uzak veri tabanındaki verileri Figma içine çekerek çalışmalarınızda harici verilerin kullanımını gerçekleştirebileceksiniz. Figma Mirror uygulaması ile yaptığınız tasarımları mobil cihazınızda deneyimleyebileceksiniz.
Bölümü ayrıntılı incele
- Google E-Tabloların Figma ile Birlikte Kullanımı
- Airtable ile Uzak Veritabanından Verileri Figma’ya Aktarma
- Json Formatındaki Dosyaların Figma Componentler ile Kullanımı
- Figma Mirror Kullanımı
5
Design System’a Giriş
Bu bölümde, bir projeye başlarken o projeye hangi adımlar ve yapı ile başlanması gerektiğini öğreneceksiniz. Tasarım boyunca kullanılacak olan yapıları modüler bir şekilde öğrenip farklı projeler için uygulayabileceksiniz. Design System ve UI Kit arasındaki farkı kavrayarak bunları ne zaman kullanmanız gerektiği bilgisini edinmiş olacaksınız.
Bölümü ayrıntılı incele
- Design System Nedir, Ne İşe Yarar?
- HTML ve CSS Nedir, Tasarımcılar İçin Gerekli Midir?
- Grid Sistem
- Butonlar ve Özellikleri
- Tipografi
- İnputlar ve Özellikleri
- İkonlar ve Özellikleri
- 4 ve 8’li Boşluk Sistemi
- Renk Mimarisi Oluşturma ve Kütüphaneye Ekleme
- Atomic Design System ile Buton Seti Oluşturma
6
Sıfırdan Web Sitesi Tasarımı
Bu bölümde, projeye başlamadan önce özellikle UX (Kullanıcı Deneyimi) çerçevesi altında yapılması gereken adımları öğrenip daha sonra bunları UI (Kullanıcı Arayüzü) tasarımına aktaracaksınız. Tüm eğitim boyunca edindiğiniz bilgileri kullanarak, tasarım sistemine uygun bir web projesini yazılım ekibine teslim edebileceksiniz. Ayrıca, tasarım öncesi wireframe çalışmalarını oluştururken nelere dikkat etmeniz gerektiğini ve bu çalışmaların nasıl yapılması gerektiğini de öğreneceksiniz.
Case Study: Finans Sektörü için One Page Web Ui Design
Bölümü ayrıntılı incele
- User Flow Nedir ve Niçin Gereklidir?
- Wireframe Oluşturma
- UI Elementlerini Oluşturma
- Grid Sistemin Belirlenmesi
- Renk Sistemi ve Componentlerin Oluşturulması
- Sayfa İçi Modüllerin Tamamlanması
- Prototiplerin Oluşturulması
- Handoff ve Collaboration
- Developer Mode
2
Temel Figma Özellikleri
Bir tasarımı oluşturmaya başlarken yapısal özellikleri önceden belirlemek büyük bir öneme sahiptir. Figma’nın yapısal özelliklerini öğreneceğiniz bu bölümde, çalışmalarınızda nasıl bir grid yapısı oluşturmanız gerektiğini, responsive tasarımı yaparken hangi kuralları bilmeniz gerektiğini öğrenecek ve otomatik yerleşim düzeni hakkında detaylı bilgi sahibi olacaksınız.
Bölümü ayrıntılı incele
- Effects Kullanımı
- Layout Grid Kullanımı
- Component ve Master Component Oluşturma
- Variant Oluşturma
- Component Properties
- Constraints (Kısıtlamalar)
- Tüm Yönleriyle Auto Layout V4
4
Dinamik Olarak Verilerin Figma’da Kullanımı
Bu bölümde, uzak veri tabanındaki verileri Figma içine çekerek çalışmalarınızda harici verilerin kullanımını gerçekleştirebileceksiniz. Figma Mirror uygulaması ile yaptığınız tasarımları mobil cihazınızda deneyimleyebileceksiniz.
Bölümü ayrıntılı incele
- Google E-Tabloların Figma ile Birlikte Kullanımı
- Airtable ile Uzak Veritabanından Verileri Figma’ya Aktarma
- Json Formatındaki Dosyaların Figma Componentler ile Kullanımı
- Figma Mirror Kullanımı
6
Sıfırdan Web Sitesi Tasarımı
Bu bölümde, projeye başlamadan önce özellikle UX (Kullanıcı Deneyimi) çerçevesi altında yapılması gereken adımları öğrenip daha sonra bunları UI (Kullanıcı Arayüzü) tasarımına aktaracaksınız. Tüm eğitim boyunca edindiğiniz bilgileri kullanarak, tasarım sistemine uygun bir web projesini yazılım ekibine teslim edebileceksiniz. Ayrıca, tasarım öncesi wireframe çalışmalarını oluştururken nelere dikkat etmeniz gerektiğini ve bu çalışmaların nasıl yapılması gerektiğini de öğreneceksiniz.
Case Study: Finans Sektörü için One Page Web Ui Design
Bölümü ayrıntılı incele
- User Flow Nedir ve Niçin Gereklidir?
- Wireframe Oluşturma
- UI Elementlerini Oluşturma
- Grid Sistemin Belirlenmesi
- Renk Sistemi ve Componentlerin Oluşturulması
- Sayfa İçi Modüllerin Tamamlanması
- Prototiplerin Oluşturulması
- Handoff ve Collaboration
- Developer Mode
Yetkinlik Edin
UI/UX Web Designer Öğren
%60 indirim
Bugün Öğrenmeye Başla
1 yıl boyunca sınırsız erişim
Her yıl yalnızca 30$'a otamatik erişim yenileme
Yenileme diledigin zaman iptal edilebilir
Kupon Kodu: BF60
$
160
$
64
.00
/tek seferlik
- Tüm materyallere 1 yıl erişim
- Ders videoları & materyalleri
- Puanlanan quiz’ler
- Sertifika
Miuul, gerekli gördüğü durumlarda eğitim içeriklerinde, modüllerde ve yenileme ücretlerinde değişiklik yapma hakkını saklı tutar. 30$'lık yıllık yenileme ücreti şu an için özel bir fırsattır; ileride bu koşullarda revizyon yapılabilir.
Çeşitli ölçeklerdeki kurumlar ekipleri için Miuul'u kullanıyor.
Çalışanlarınıza özel teklif almak için Bize yazın
UI/UX Web Designer öğrenmeye bugün başla!
Kayıt Ol